README
solid-sfc
An experimental SFC compiler for SolidJS
Install
npm install solid-sfc
yarn add solid-sfc
pnpm add solid-sfc
Features
Usage
Basic example
---
let count = $signal(0);
let message = $memo(`Count: ${count}`);
effect: {
console.log(message);
}
---
<h1>{message}</h1>
Suspense and fragments
---
const [data] = $resource(source, fetchData);
---
<solid:suspense>
<solid:fragment name="fallback">
<h1>Loading...</h1>
</solid:fragment>
<Profile data={data()} />
</solid:suspense>
Syntax
solid-sfc
follows the JSX format. All tags and other Solid-namespaced elements are included into the components render result.
Setup code
---
defines the component's JS code. The code needs to be enclosed between two ---
and the code is local to the component's function scope (except the import definitions) so you can declare signals and effects in the top-level.
---
import { createSignal } from 'solid-js';
const [count, setCount] = createSignal(0);
---
You can also use solid-labels.
---
let count = $signal(0);
effect: {
console.log(count);
}
---
Local identifiers are inferred from the component's setup code.
---
import Counter from './Counter';
let count = $signal(0);
---
<Counter count={count} />
Templating
Much like attributes, you can use curly braces in any part of the solid-sfc
to evaluate JS expressions.
---
let count = $signal(0);
---
<h1>Count: {count}</h1>
, <solid:fragment><solid:slot>
and <solid:children>
If a component accepts a property that renders an element, you can use <solid:fragment>
to render that property's element for the component to receive. <solid:fragment>
has a single attribute, name
which is used to define the fragment's key in the props of that component.
<solid:suspense>
<solid:fragment name="fallback">
<h1>Loading...</h1>
</solid:fragment>
<Profile />
</solid:suspense>
Which is equivalent to
<Suspense fallback={<h1>Loading</h1>}>
<Profile />
</Suspense>
You can use <solid:slot>
to render the received fragment on the component's side. <solid:slot>
also has the name
attribute to pick from the props.
{/* Example.solid */}
<solid:slot name="example" />
{/* ParentExample.solid */}
---
import Example from './Example.solid';
---
<Example>
<solid:fragment name="example">
<h1>Hello World</h1>
</solid:fragment>
</Example>
Other namespaced elements
<solid:for>
:<For>
<solid:switch>
:<Switch>
<solid:show>
:<Show>
<solid:index>
:<Index>
<solid:error-boundary>
:<ErrorBoundary>
<solid:suspense>
:<Suspense>
<solid:suspense-list>
:<SuspenseList>
<solid:dynamic>
:<Dynamic>
<solid:portal>
:<Portal>
<solid:assets>
:<Assets>
<solid:hydration-script>
:<HydrationScript>
<solid:no-hydration>
:<NoHydration>
Tooling
SOON
License
MIT © lxsmnsyc