Add Xote and Xote SSR templates (#124)

* add Xote CSR and SSR templates

* group Xote variants

* Address Xote template review feedback

* Format templates with ReScript 12

---------

Co-authored-by: Florian Hammerschmidt <florianh89@gmail.com>

Author: brnrdog

src/NewProject.res

@@ -80,12 +80,35 @@ let updateViteConfig = async () => {
 let newProjectMessage = "Create a new ReScript project"
 
 let getTemplateOptions = () =>
-  Templates.templates->Array.map(({name, displayName, shortDescription}) => {
+  Templates.templates->Array.map(({name, displayName, shortDescription, _}) => {
     P.value: name,
     label: displayName,
     hint: shortDescription,
   })
 
+let getVariantOptions = (variants: array<Templates.variant>) =>
+  variants->Array.map(({name, displayName, shortDescription}) => {
+    P.value: name,
+    label: displayName,
+    hint: shortDescription,
+  })
+
+let promptTemplateName = async () => {
+  let selectedName = await P.select({
+    message: "Select a template",
+    options: getTemplateOptions(),
+  })->P.resultOrRaise
+
+  switch Templates.templates->Array.find(template => template.name === selectedName) {
+  | Some({variants: Some(variants)}) =>
+    await P.select({
+      message: "Select a variant",
+      options: getVariantOptions(variants),
+    })->P.resultOrRaise
+  | _ => selectedName
+  }
+}
+
 let createProject = async (~templateName, ~projectName, ~versions) => {
   let templatePath = CraPaths.getTemplatePath(~templateName)
   let projectPath = Path.join2(Process.cwd(), projectName)
@@ -156,11 +179,7 @@ let createNewProject = async () => {
 
     let templateName = switch commandLineArguments.templateName {
     | Some(templateName) => templateName
-    | None =>
-      await P.select({
-        message: "Select a template",
-        options: getTemplateOptions(),
-      })->P.resultOrRaise
+    | None => await promptTemplateName()
     }
 
     let versions = useDefaultVersions

src/Templates.res

@@ -1,15 +1,24 @@
+type variant = {
+  name: string,
+  displayName: string,
+  shortDescription: string,
+}
+
 type t = {
   name: string,
   displayName: string,
   shortDescription: string,
+  variants: option<array<variant>>,
 }
 
 let basicTemplateName = "rescript-template-basic"
 let viteTemplateName = "rescript-template-vite"
 let nextjsTemplateName = "rescript-template-nextjs"
+let xoteTemplateName = "rescript-template-xote"
+let xoteSsrTemplateName = "rescript-template-xote-ssr"
 let templateNamePrefix = "rescript-template-"
 
-let supportedTemplateNames = ["vite", "nextjs", "basic"]
+let supportedTemplateNames = ["vite", "nextjs", "xote", "xote-ssr", "basic"]
 
 let getTemplateName = templateName => {
   let templateName = templateName->String.toLowerCase
@@ -24,15 +33,35 @@ let templates = [
     name: viteTemplateName,
     displayName: "Vite",
     shortDescription: "Vite 8, React and Tailwind 4",
+    variants: None,
   },
   {
     name: nextjsTemplateName,
     displayName: "Next.js",
     shortDescription: "Next.js 15 with static export and Tailwind 3",
+    variants: None,
+  },
+  {
+    name: xoteTemplateName,
+    displayName: "Xote",
+    shortDescription: "Xote with Vite, signals and Tailwind 4",
+    variants: Some([
+      {
+        name: xoteTemplateName,
+        displayName: "Client-Side Rendering (CSR)",
+        shortDescription: "Vite, signals and Tailwind 4",
+      },
+      {
+        name: xoteSsrTemplateName,
+        displayName: "Server-Side Rendering (SSR)",
+        shortDescription: "Vite SSR via Node server, signals and Tailwind 4",
+      },
+    ]),
   },
   {
     name: basicTemplateName,
     displayName: "Basic",
     shortDescription: "Command line hello world app",
+    variants: None,
   },
 ]

templates/rescript-template-nextjs/src/layouts/MainLayout.res

@@ -17,7 +17,8 @@ module Navigation = {
         <a
           className="px-3 font-bold"
           target="_blank"
-          href="https://github.com/rescript-lang/create-rescript-app/tree/master/templates/rescript-template-nextjs">
+          href="https://github.com/rescript-lang/create-rescript-app/tree/master/templates/rescript-template-nextjs"
+        >
           {React.string("Github")}
         </a>
       </div>

templates/rescript-template-vite/src/App.res

@@ -25,7 +25,8 @@ let make = () => {
     <p className="text-center font-thin text-stone-400">
       {React.string("Learn more about ")}
       <a
-        href="https://rescript-lang.org/" target="_blank" className="text-blue-500 hover:underline">
+        href="https://rescript-lang.org/" target="_blank" className="text-blue-500 hover:underline"
+      >
         {React.string("ReScript")}
         {React.string(".")}
       </a>

templates/rescript-template-xote-ssr/README.md

@@ -0,0 +1,70 @@
+# xote · SSR template
+
+A server-rendered starter for [xote](https://github.com/brnrdog/xote) apps. Renders HTML on a Node server, then hydrates on the client so reactivity takes over without re-rendering.
+
+## Stack
+
+- ReScript v12 (JSX transform: `XoteJSX`)
+- xote ^6.2 — uses `SSR.renderToString`, `SSRState`, and `Hydration`
+- rescript-signals
+- Vite 7 — runs in middleware mode for dev, and produces both client and SSR bundles for production
+- Tailwind CSS v4 (`@tailwindcss/vite`)
+
+## Layout
+
+```
+.
+├── index.html            # template with <!--app-html--> and <!--app-state--> placeholders
+├── server.mjs            # Node HTTP server (Vite middleware in dev, static + SSR in prod)
+├── vite.config.mjs
+├── rescript.json
+├── package.json
+└── src/
+    ├── styles.css
+    ├── Counter.res       # uses SSRState.signal so state survives hydration
+    ├── Page.res          # landing page composition
+    ├── App.res           # shared `view` thunk used by server and client
+    ├── Server.res        # exports render() → { html, stateScript }
+    └── Client.res        # imports styles, calls Hydration.hydrateById
+```
+
+## How it fits together
+
+1. `server.mjs` reads `index.html` and (in dev) hands it to Vite for asset/CSS transformation.
+2. It imports `Server.res` and calls `render()`, which uses `SSR.renderToString(App.view)` to produce HTML and `SSRState.generateScript()` to produce a `<script>` tag carrying initial signal values.
+3. The placeholders `<!--app-html-->` and `<!--app-state-->` in `index.html` are replaced with those two strings.
+4. The browser loads `Client.res.mjs`, which calls `Hydration.hydrateById(App.view, "root")`. xote walks the existing DOM, attaches reactive bindings, and reads back the serialized `SSRState` so signals start with the same values the server used.
+
+## Scripts
+
+| Script | What it does |
+| --- | --- |
+| `npm run res:dev` | Watches and compiles ReScript on save. Run during development. |
+| `npm run res:build` | One-shot ReScript build. |
+| `npm run res:clean` | Removes ReScript build artifacts. |
+| `npm run dev` | Runs `node server.mjs` with Vite in middleware mode. |
+| `npm run build` | Builds the client bundle and the SSR bundle. |
+| `npm run build:client` | Just the client bundle (`dist/client/`). |
+| `npm run build:ssr` | Just the SSR bundle (`dist/server/Server.res.js`). |
+| `npm run start` | Runs the server in production mode against the built bundles. |
+
+## Develop
+
+```bash
+npm install
+npm run res:dev
+# in another terminal:
+npm run dev
+```
+
+Open http://localhost:3000. The page is server-rendered (view source — the counter HTML is already there) and becomes interactive after hydration.
+
+## Build & run in production
+
+```bash
+npm run res:build
+npm run build
+npm run start
+```
+
+`server.mjs` defaults to port 3000; override with `PORT=8080 npm run start`.

templates/rescript-template-xote-ssr/_gitignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+lib
+*.res.mjs
+*.res.js
+.DS_Store

templates/rescript-template-xote-ssr/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>xote · SSR template</title>
+    <link rel="stylesheet" href="/src/styles.css" />
+  </head>
+  <body>
+    <div id="root"><!--app-html--></div>
+    <!--app-state-->
+    <script type="module" src="/src/Client.res.mjs"></script>
+  </body>
+</html>