Solid-sfc NPM | npm.io

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>