Solid

This handler module supports SSR and hydration and serves Solid (JSX) components with the .jsx extension.

Install

npm install @primate/frontend @babel/core@7 babel-preset-solid@1 solid-js@1

Configure

Import and initialize the module in your configuration.

import { solid } from "@primate/frontend";

export default {
  modules: [
    solid(),
  ],
};

If you are using another JSX frontend module alongside Solid, consider changing the file extension for Solid to something else, to avoid conflicts.

import { solid } from "@primate/frontend";

export default {
  modules: [
    solid({
      extension: ".solid",
    }),
  ],
};

Use

Create a JSX component in components. This example assumes you have changed the Solid component file extension to .solid.

import { For } from "solid-js/web";

export default function PostIndex(props) {
  return <>
    <h1>All posts</h1>
    <For each={props.posts}>
      {post => <h2><a href={`/post/${post.id}`}>{post.title}</a></h2>}
    </For>
  </>;
}

Serve it from a route.

import { view } from "primate";

const posts = [{
  id: 1,
  title: "First post",
}];

export default {
  get() {
    return view("PostIndex.solid", { posts });
  },
};

The rendered component will be accessible at http://localhost:6161/solid.

Configuration options

extension

Default ".jsx"

The file extension associated with Solid JSX components.

spa

Default true

Whether SPA browsing using fetch should be active.

Resources

• Repository