### Run example commands
Source: https://github.com/solidjs/solid/blob/main/packages/solid-ssr/README.md
Commands to build and start the SSR example using lerna.
```bash
lerna run build:example:ssr --stream
lerna run start:example:ssr --stream
```
--------------------------------
### Install Solid Element and Dependencies
Source: https://github.com/solidjs/solid/blob/main/packages/solid-element/README.md
Install the necessary packages for Solid Element, Solid.js, and Babel preset for Solid.
```sh
npm i solid-element solid-js babel-preset-solid
```
--------------------------------
### Install SolidJS dependencies
Source: https://github.com/solidjs/solid/blob/main/packages/solid/README.md
Commands to install the necessary packages for a manual SolidJS setup.
```sh
> npm i -D babel-preset-solid
> npm i solid-js
```
--------------------------------
### Render a component with html
Source: https://github.com/solidjs/solid/blob/main/packages/solid/html/README.md
Full example demonstrating component definition and rendering using html.
```js
import { render } from "solid-js/web";
import html from "solid-js/html";
import { createSignal } from "solid-js";
function Button(props) {
return html``;
}
function Counter() {
const [count, setCount] = createSignal(0);
const increment = (e) => setCount((c) => c + 1);
return html`<${Button} type="button" onClick=${increment}>${count}`;
}
render(Counter, document.getElementById("app"));
```
--------------------------------
### Build SolidJS from source
Source: https://github.com/solidjs/solid/blob/main/CONTRIBUTING.md
Commands to enable corepack, install dependencies, and build the project.
```bash
corepack enable
```
```bash
pnpm install
```
```bash
pnpm build
```
--------------------------------
### Solid HyperScript Counter Example
Source: https://github.com/solidjs/solid/blob/main/packages/solid/h/README.md
A complete example demonstrating how to build a Counter component using Solid's HyperScript function, including imports and rendering.
```javascript
import { render } from "solid-js/web";
import h from "solid-js/h";
import { createSignal } from "solid-js";
function Button(props) {
return h("button.btn-primary", props)
}
function Counter() {
const [count, setCount] = createSignal(0);
const increment = (e) => setCount(c => c + 1);
return h(Button, { type: "button", onClick: increment }, count);
}
render(Counter, document.getElementById("app"));
```
--------------------------------
### Install babel-preset-solid
Source: https://github.com/solidjs/solid/blob/main/packages/babel-preset-solid/README.md
Add the preset as a development dependency using your preferred package manager.
```javascript
npm install babel-preset-solid --save-dev
```
```javascript
yarn add babel-preset-solid --dev
```
--------------------------------
### Initialize a SolidJS project
Source: https://github.com/solidjs/solid/blob/main/packages/solid/README.md
Commands to scaffold a new SolidJS application using degit.
```sh
> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm
```
```sh
> npx degit solidjs/templates/ts my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm
```
--------------------------------
### Define server entry point
Source: https://github.com/solidjs/solid/blob/main/packages/solid-ssr/README.md
Server entry files must export an async function that returns an HTML string.
```js
export default async function(req) {
return "My Page"
}
```
--------------------------------
### Initialize and update a Solid store
Source: https://github.com/solidjs/solid/blob/main/packages/solid/store/README.md
Demonstrates creating a nested reactive store and updating a specific property using the setter function.
```js
import { createStore } from "solid-js/store";
const [store, setStore] = createStore({
user: {
firstName: "John",
lastName: "Smith"
}
});
// update store.user.firstName
setStore("user", "firstName", "Will");
```
--------------------------------
### Run SolidJS tests
Source: https://github.com/solidjs/solid/blob/main/CONTRIBUTING.md
Command to execute the test suite for the project.
```bash
pnpm test
```
--------------------------------
### Create elements and components with html
Source: https://github.com/solidjs/solid/blob/main/packages/solid/html/README.md
Basic syntax for creating elements and components using the html tagged template literal.
```js
// create an element with a title attribute
html``
// create a component with a title prop
html`<${Button} title="My button">Click me`
// create an element with dynamic attribute and spread
html`
selectedClass()} ...${props} />`
```
--------------------------------
### Configure Babel Preset
Source: https://github.com/solidjs/solid/blob/main/packages/babel-preset-solid/README.md
Define the solid preset in your .babelrc or package.json configuration.
```json
{
"presets": [
"solid"
]
}
```
```json
...
"babel": {
"presets": [
"es2015",
"solid"
],
"plugins": [
]
},
...
```
--------------------------------
### Create Elements with HyperScript
Source: https://github.com/solidjs/solid/blob/main/packages/solid/h/README.md
Demonstrates basic usage of the HyperScript function for creating elements with attributes, components, and multiple children.
```javascript
h("button", { title: "My button" }, "Click Me")
```
```javascript
h(Button, { title: "My button" }, "Click Me")
```
```javascript
h("div", { title: "My button" }, h("span", "1"), h("span", "2"), h("span", "3"))
```
--------------------------------
### Configure Babel preset
Source: https://github.com/solidjs/solid/blob/main/packages/solid/README.md
Configuration snippet for adding the Solid preset to your Babel configuration.
```js
"presets": ["solid"]
```
--------------------------------
### Create a Counter Component in SolidJS
Source: https://github.com/solidjs/solid/blob/main/README.md
Demonstrates creating a reactive counter component using `createSignal` and rendering it to the DOM. The `console.log` statement shows that the component body executes only once.
```tsx
import { createSignal } from "solid-js";
import { render } from "solid-js/web";
function Counter() {
const [count, setCount] = createSignal(0);
const doubleCount = () => count() * 2;
console.log("The body of the function runs once...");
return (
<>
);
}
render(Counter, document.getElementById("app")!);
```
--------------------------------
### Create a Basic Custom Element with Solid
Source: https://github.com/solidjs/solid/blob/main/packages/solid-element/README.md
Use the `customElement` function to define a new web component with a tag name, default props, and a Solid template function.
```jsx
import { customElement } from 'solid-element';
customElement('my-component', {someProp: 'one', otherProp: 'two'}, (props, { element }) => {
// ... Solid code
})
```
--------------------------------
### Create a Reactive Counter Component
Source: https://github.com/solidjs/solid/blob/main/packages/solid/README.md
Demonstrates a basic component using createSignal for state management and JSX for rendering.
```jsx
import { render } from "solid-js/web";
import { createSignal } from "solid-js";
// A component is just a function that (optionally) accepts properties and returns a DOM node
const Counter = props => {
// Create a piece of reactive state, giving us a accessor, count(), and a setter, setCount()
const [count, setCount] = createSignal(props.startingCount || 1);
// The increment function calls the setter
const increment = () => setCount(count() + 1);
console.log(
"The body of the function runs once, like you'd expect from calling any other function, so you only ever see this console log once."
);
// JSX allows us to write HTML within our JavaScript function and include dynamic expressions using the { } syntax
// The only part of this that will ever rerender is the count() text.
return (
);
};
// The render function mounts a component onto your page
render(() => , document.getElementById("app"));
```
--------------------------------
### Configure Babel for Universal Rendering
Source: https://github.com/solidjs/solid/blob/main/packages/solid/universal/README.md
Set the moduleName and generate options in babel-preset-solid to target a custom renderer.
```json
{
"presets": [
[
"babel-preset-solid",
{
"moduleName": "solid-custom-dom",
"generate": "universal"
}
]
]
}
```
--------------------------------
### Consume a Custom Renderer
Source: https://github.com/solidjs/solid/blob/main/packages/solid/universal/README.md
Import the render function from the custom renderer package to mount the application.
```js
import { render } from "solid-custom-dom";
function App() {
// the skies the limits
}
render(() => , mountNode)
```
--------------------------------
### Configure Vite for Universal Rendering
Source: https://github.com/solidjs/solid/blob/main/packages/solid/universal/README.md
Use the vite-plugin-solid configuration to specify the custom renderer module.
```js
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
export default defineConfig({
plugins: [solidPlugin({
solid: {
moduleName: "solid-custom-dom",
generate: 'universal'
}
})]
});
```
--------------------------------
### Implement a Custom Renderer
Source: https://github.com/solidjs/solid/blob/main/packages/solid/universal/README.md
Define the renderer methods using createRenderer and export Solid control flow components.
```js
// example custom dom renderer
import { createRenderer } from "solid-js/universal";
const PROPERTIES = new Set(["className", "textContent"]);
export const {
render,
effect,
memo,
createComponent,
createElement,
createTextNode,
insertNode,
insert,
spread,
setProp,
mergeProps,
use
} = createRenderer({
createElement(string) {
return document.createElement(string);
},
createTextNode(value) {
return document.createTextNode(value);
},
replaceText(textNode, value) {
textNode.data = value;
},
setProperty(node, name, value) {
if (name === "style") Object.assign(node.style, value);
else if (name.startsWith("on")) node[name.toLowerCase()] = value;
else if (PROPERTIES.has(name)) node[name] = value;
else node.setAttribute(name, value);
},
insertNode(parent, node, anchor) {
parent.insertBefore(node, anchor);
},
isTextNode(node) {
return node.type === 3;
},
removeNode(parent, node) {
parent.removeChild(node);
},
getParentNode(node) {
return node.parentNode;
},
getFirstChild(node) {
return node.firstChild;
},
getNextSibling(node) {
return node.nextSibling;
}
});
// Forward Solid control flow
export {
For,
Show,
Suspense,
SuspenseList,
Switch,
Match,
Index,
ErrorBoundary
} from "solid-js";
```
--------------------------------
### Configure SSR and Hydration
Source: https://github.com/solidjs/solid/blob/main/packages/babel-preset-solid/README.md
Specify generation targets and hydration settings for server-side and browser-side builds.
```json
{
"presets": [
["solid", { "generate": "ssr", "hydratable": true }]
]
}
```
```json
{
"presets": [
["solid", { "generate": "dom", "hydratable": true }]
]
}
```
--------------------------------
### Reactive Expressions in HyperScript
Source: https://github.com/solidjs/solid/blob/main/packages/solid/h/README.md
Shows how to manually wrap reactive expressions in functions when using HyperScript, contrasting with JSX.
```javascript
// hyperscript
h("div", { id: () => props.id }, () => firstName() + lastName())
```
--------------------------------
### Use callback refs
Source: https://github.com/solidjs/solid/blob/main/packages/solid/html/README.md
Only the callback form of refs is supported.
```js
let myEl;
html`
myEl = el} />`;
```
--------------------------------
### Render static pages with solid-ssr
Source: https://github.com/solidjs/solid/blob/main/packages/solid-ssr/README.md
Use renderStatic to generate static HTML files from a list of page configurations.
```js
renderStatic(
PAGES.map(p => ({
entry: pathToServer,
output: path.join(pathToPublic, `${p}.html`),
url: `/${p}`
}))
);
```
--------------------------------
### SolidJS Counter Component with Explanation
Source: https://github.com/solidjs/solid/blob/main/README.md
An expanded version of the Counter component, explaining the role of `createSignal` for reactive state and how derived state is created. It also clarifies the JSX syntax and the targeted re-rendering of dynamic content.
```tsx
import { createSignal } from "solid-js";
import { render } from "solid-js/web";
// A component is just a function that returns a DOM node
function Counter() {
// Create a piece of reactive state, giving us an accessor, count(), and a setter, setCount()
const [count, setCount] = createSignal(0);
//To create derived state, just wrap an expression in a function
const doubleCount = () => count() * 2;
console.log("The body of the function runs once...");
// JSX allows you to write HTML within your JavaScript function and include dynamic expressions using the { } syntax
// The only part of this that will ever rerender is the doubleCount() text.
return (
<>
);
}
// The render function mounts a component onto your page
render(Counter, document.getElementById("app")!);
```
--------------------------------
### Compose Custom Element with Multiple Mixins
Source: https://github.com/solidjs/solid/blob/main/packages/solid-element/README.md
Utilize `compose` and `withSolid` from `component-register` and `solid-element` respectively to create a custom element with additional behaviors.
```jsx
import { register, compose } from 'component-register';
import { withSolid } from 'solid-element';
/*
withSolid
*/
compose(
register('my-component'),
withSolid
)((props, options) =>
// ....
)
```
--------------------------------
### Shorthand for Static IDs and Classes in HyperScript
Source: https://github.com/solidjs/solid/blob/main/packages/solid/h/README.md
Shows the shorthand syntax available in HyperScript for defining static IDs and classes directly on the element string.
```javascript
h("div#some-id.my-class")
```
--------------------------------
### Callback Refs in HyperScript
Source: https://github.com/solidjs/solid/blob/main/packages/solid/h/README.md
Demonstrates the required callback form for refs when using HyperScript, as compiled assignment is not supported.
```javascript
let myEl;
h(div, { ref: (el) => myEl = el });
```
--------------------------------
### Enable Hot Module Replacement for Components
Source: https://github.com/solidjs/solid/blob/main/packages/solid-element/README.md
Use the `hot` method to enable Hot Module Replacement for a specific custom element, allowing components to be swapped without preserving state.
```js
import { customElement, hot } from 'solid-element';
hot(module, 'my-component');
```
--------------------------------
### Compiled SolidJS Counter Component
Source: https://github.com/solidjs/solid/blob/main/README.md
Shows the compiled output of the SolidJS Counter component, illustrating how Solid's compiler transforms JSX into efficient real DOM operations using functions like `_$template`, `_$insert`, and `_$delegateEvents`.
```js
import { template as _$template } from "solid-js/web";
import { delegateEvents as _$delegateEvents } from "solid-js/web";
import { insert as _$insert } from "solid-js/web";
//The compiler pulls out any static HTML
const _tmpl$ = /*#__PURE__*/_$template(`