https://github.com/LXSMNSYC/solid-sfc

Experimental SFC compiler for SolidJS
https://github.com/LXSMNSYC/solid-sfc

Last synced: about 1 month ago
JSON representation

Experimental SFC compiler for SolidJS

• Host: GitHub
• URL: https://github.com/LXSMNSYC/solid-sfc
• Owner: lxsmnsyc
• License: mit
• Created: 2021-11-22T11:11:02.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-05-25T16:43:51.000Z (over 2 years ago)
• Last Synced: 2024-11-01T14:03:24.452Z (about 1 month ago)
• Language: TypeScript
• Size: 813 KB
• Stars: 26
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-solid-js - Solid SFC(Experimental) - Experimental SFC compiler for SolidJS (📦 Components & Libraries / DX)

README

        
# solid-sfc

> An experimental SFC syntax for SolidJS, extends [`solid-labels`](https://github.com/lxsmnsyc/solid-labels)

[![NPM](https://img.shields.io/npm/v/solid-sfc.svg)](https://www.npmjs.com/package/solid-sfc) [![JavaScript Style Guide](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)

## Install

```bash

npm install solid-sfc

```

```bash

yarn add solid-sfc

```

```bash

pnpm add solid-sfc

```

## Usage

### Basic example

```jsx

// Required for files that do not end in `.solid.(t|j)sx?`

'use solid-sfc';

let count = $signal(0);

let message = $memo(`Count: ${count}`);

effect: {

  console.log(message);

};

// Export default is synonymous to "return".

export default 
{message}
;

```


### ``, `` and ``

If a component accepts a property that renders an element, you can use `` to render that property's element for the component to receive. `` has a single attribute, `name` which is used to define the fragment's key in the props of that component.

```jsx

  

    
Loading...

  

  


```

Which is equivalent to

```jsx

Loading}>

  

```

You can use `` to render the received fragment on the component's side. `` also has the `name` attribute to pick from the props.

```jsx

/* Example.solid.jsx */

export default 

/* ParentExample.solid.jsx */

import Example from './Example.solid';

export default (

  

    

      
Hello World

    

  

);

```


### `$props`

`$props` is a compile-time function that provides access to the component's props.

```jsx

const props = $props();

export default 
{props.message}
;

```


For Typescript, you can pass a type for the generic parameter:

```tsx

interface Props {

  message: string;

}

const props = $props();

export default 
{props.message}
;

```


### `$view`

For TypeScript to infer SFCs correctly, you can `$view` on the render part of the code.

```tsx

// Message.solid.tsx

interface Props {

  message: string;

}

const props = $props();

export default $view(
{props.message}
);


// App.solid.tsx

import Message from './Message.solid';

export default 

```

## Tooling

### TypeScript

```ts

/// 

```

## License

MIT © [lxsmnsyc](https://github.com/lxsmnsyc)