Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/LXSMNSYC/solid-sfc
Experimental SFC compiler for SolidJS
https://github.com/LXSMNSYC/solid-sfc
Last synced: 2 months 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 (2 months 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)
[](https://www.npmjs.com/package/solid-sfc) [](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)