create-fluixi 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/index.js

@@ -1,9 +1,11 @@
 #!/usr/bin/env node
 /**
- * `npm create fluixi <dir>` — scaffold a new Fluixi app. Prompts for a name and a
- * mode (SSR via @fluixi/start, or SPA via vite + @fluixi/vite-plugin), unless given on
- * the command line: `create-fluixi my-app --spa` / `--ssr`. Zero runtime deps — the
- * styled prompts (gradient wordmark, gutter, arrow-key select) are hand-rolled ANSI.
+ * `npm create fluixi <dir>` — scaffold a new Fluixi app. Prompts for a name, a mode
+ * (SSR via @fluixi/start, or SPA via vite + @fluixi/vite-plugin), and a template syntax
+ * (JSX or html``), unless given on the command line: `create-fluixi my-app --spa --html`
+ * (`--ssr`/`--spa`, `--jsx`/`--html`). The html`` variant is JSX-free — plain `.ts`
+ * sources, no `jsx` in tsconfig. Zero runtime deps — the styled prompts (gradient
+ * wordmark, gutter, arrow-key select) are hand-rolled ANSI.
  */
 import { cpSync, renameSync, readFileSync, writeFileSync, existsSync } from 'node:fs';
 import { resolve, basename, join } from 'node:path';
@@ -97,7 +99,8 @@ async function main() {
     const args = argv.slice(2);
     let dir = args.find((a) => !a.startsWith('-'));
     let mode = args.includes('--spa') ? 'spa' : args.includes('--ssr') ? 'ssr' : undefined;
-    const interactive = input.isTTY && (!dir || !mode);
+    let format = args.includes('--html') ? 'html' : args.includes('--jsx') ? 'jsx' : undefined;
+    const interactive = input.isTTY && (!dir || !mode || !format);
     if (interactive) {
         output.write(`\n${c.gray('┌')}  ${gradient('◆')} ${c.bold(gradient('create-fluixi'))}\n${BAR}\n`);
         if (!dir)
@@ -108,16 +111,24 @@ async function main() {
                 { value: 'spa', label: 'SPA', hint: 'client-only · vite' },
             ]));
         }
+        if (!format) {
+            format = (await askSelect('Template syntax', [
+                { value: 'jsx', label: 'JSX', hint: 'default · .tsx · html`` works inline too' },
+                { value: 'html', label: 'html``', hint: 'no JSX · plain .ts · @fluixi/ts-plugin' },
+            ]));
+        }
     }
     dir = dir ?? 'fluixi-app';
     mode = mode ?? 'ssr';
+    format = format ?? 'jsx';
     const target = resolve(dir);
     const name = basename(target);
     if (existsSync(target)) {
         output.write(`${c.gray('└')}  ${c.red('✗')} "${c.bold(name)}" already exists — pick another name or remove it.\n\n`);
         exit(1);
     }
-    cpSync(here(mode === 'spa' ? '../template-spa' : '../template-ssr'), target, { recursive: true });
+    const template = `../template-${mode}${format === 'html' ? '-html' : ''}`;
+    cpSync(here(template), target, { recursive: true });
     // npm strips a real .gitignore from published packages → restore it from _gitignore.
     const gi = join(target, '_gitignore');
     if (existsSync(gi))
@@ -127,7 +138,7 @@ async function main() {
     pkg.name = name;
     writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
     // Outro + next steps. The leading gutter only makes sense after the intro/prompts.
-    const tag = mode === 'ssr' ? c.cyan('SSR') : c.cyan('SPA');
+    const tag = `${c.cyan(mode.toUpperCase())} ${c.gray('·')} ${c.cyan(format === 'html' ? 'html``' : 'JSX')}`;
     if (interactive)
         output.write(`${BAR}\n`);
     else

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "create-fluixi",
-  "version": "0.1.0-alpha.5",
+  "version": "0.1.0-alpha.7",
+  "license": "MIT",
   "description": "Scaffold a new Fluixi app — `npm create fluixi <dir>`.",
   "type": "module",
   "bin": {
@@ -10,7 +11,10 @@
     "dist",
     "template-ssr",
     "template-spa",
-    "README.md"
+    "template-ssr-html",
+    "template-spa-html",
+    "README.md",
+    "LICENSE"
   ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/template-spa/package.json

@@ -9,13 +9,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@fluixi/core": "next",
-    "@fluixi/jsx": "next",
-    "@fluixi/dom": "next",
-    "@fluixi/reactive": "next"
+    "@fluixi/core": "alpha",
+    "@fluixi/jsx": "alpha",
+    "@fluixi/dom": "alpha",
+    "@fluixi/reactive": "alpha"
   },
   "devDependencies": {
-    "@fluixi/vite-plugin": "next",
+    "@fluixi/ts-plugin": "alpha",
+    "@fluixi/vite-plugin": "alpha",
     "vite": "^5.0.0"
   }
 }

package/template-spa/tsconfig.json

@@ -8,7 +8,8 @@
     "strict": false,
     "skipLibCheck": true,
     "noEmit": true,
-    "types": ["vite/client"]
+    "types": ["vite/client"],
+    "plugins": [{ "name": "@fluixi/ts-plugin" }]
   },
   "include": ["src", "vite.config.ts"]
 }

package/template-spa-html/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.log
+.DS_Store

package/template-spa-html/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fluixi App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template-spa-html/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "fluixi-app",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fluixi/core": "alpha",
+    "@fluixi/dom": "alpha",
+    "@fluixi/reactive": "alpha"
+  },
+  "devDependencies": {
+    "@fluixi/ts-plugin": "alpha",
+    "@fluixi/vite-plugin": "alpha",
+    "vite": "^5.0.0"
+  }
+}

package/template-spa-html/src/app.ts

@@ -0,0 +1,13 @@
+import { createSignal, html } from '@fluixi/core';
+
+export function App() {
+  const [count, setCount] = createSignal(0);
+  return html`
+    <div class="app">
+      <h1>Fluixi</h1>
+      <button @click=${() => setCount(count() - 1)}>-</button>
+      <span>${count()}</span>
+      <button @click=${() => setCount(count() + 1)}>+</button>
+    </div>
+  `;
+}

package/template-spa-html/src/main.ts

@@ -0,0 +1,5 @@
+import { render, html } from '@fluixi/core';
+import { App } from './app';
+
+const root = document.getElementById('app');
+if (root) render(() => html`<${App} />`, root);

package/template-spa-html/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": false,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["vite/client"],
+    "plugins": [{ "name": "@fluixi/ts-plugin" }]
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/template-spa-html/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import { fluixi } from '@fluixi/vite-plugin';
+
+export default defineConfig({
+  plugins: [fluixi()],
+});

package/template-ssr/package.json

@@ -9,15 +9,16 @@
     "start": "fluixi start"
   },
   "dependencies": {
-    "@fluixi/cli": "next",
-    "@fluixi/start": "next",
-    "@fluixi/core": "next",
-    "@fluixi/jsx": "next",
-    "@fluixi/server": "next",
-    "@fluixi/reactive": "next",
-    "@fluixi/dom": "next"
+    "@fluixi/cli": "alpha",
+    "@fluixi/start": "alpha",
+    "@fluixi/core": "alpha",
+    "@fluixi/jsx": "alpha",
+    "@fluixi/server": "alpha",
+    "@fluixi/reactive": "alpha",
+    "@fluixi/dom": "alpha"
   },
   "devDependencies": {
+    "@fluixi/ts-plugin": "alpha",
     "@types/node": "^20.0.0",
     "vite": "^5.0.0"
   }

package/template-ssr/tsconfig.json

@@ -8,7 +8,8 @@
     "strict": false,
     "skipLibCheck": true,
     "noEmit": true,
-    "types": ["node", "vite/client"]
+    "types": ["node", "vite/client"],
+    "plugins": [{ "name": "@fluixi/ts-plugin" }]
   },
   "include": ["src", "fluixi.config.ts"]
 }

package/template-ssr-html/README.md

@@ -0,0 +1,19 @@
+# Fluixi app
+
+Scaffolded with `npm create fluixi`. SSR + file-based routing + hydration via
+[`@fluixi/start`](https://www.npmjs.com/package/@fluixi/start).
+
+This variant is authored with `` html`` `` templates (no JSX), so the sources are plain
+`.ts` files and `tsconfig.json` doesn't configure `jsx`. `@fluixi/ts-plugin` gives the
+templates full TypeScript support (hover, completion, type-checking) in your editor.
+
+```bash
+pnpm install
+pnpm dev      # dev server (SSR + HMR)
+pnpm build    # production build
+pnpm start    # serve the production build
+```
+
+- Routes live in `src/routes/` (file-based).
+- `src/app.ts` is the shell layout; `src/entry-{server,client}.ts` are the SSR/hydration entries.
+- Config in `fluixi.config.ts`.

package/template-ssr-html/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.log
+.DS_Store

package/template-ssr-html/fluixi.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from '@fluixi/start/config';
+
+export default defineConfig({
+  port: 3000,
+});

package/template-ssr-html/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fluixi Start Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/entry-client.ts"></script>
+  </body>
+</html>

package/template-ssr-html/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "fluixi-app",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "fluixi dev",
+    "build": "fluixi build",
+    "start": "fluixi start"
+  },
+  "dependencies": {
+    "@fluixi/cli": "alpha",
+    "@fluixi/start": "alpha",
+    "@fluixi/core": "alpha",
+    "@fluixi/server": "alpha",
+    "@fluixi/reactive": "alpha",
+    "@fluixi/dom": "alpha"
+  },
+  "devDependencies": {
+    "@fluixi/ts-plugin": "alpha",
+    "@types/node": "^20.0.0",
+    "vite": "^5.0.0"
+  }
+}

package/template-ssr-html/src/app.ts

@@ -0,0 +1,34 @@
+import { Router, Outlet, createMemoryHistory } from '@fluixi/start/router';
+import { Suspense } from '@fluixi/core';
+import { html } from '@fluixi/start';
+import { routes } from 'virtual:fluixi-routes';
+
+// Shell layout around the routed page. File-routes (src/routes/*) are lazy, so the
+// <Outlet/> sits under <Suspense> — async SSR resolves their content server-side.
+// Components are interpolated as `<${Comp}/>` so TypeScript sees them referenced.
+function RootLayout() {
+  return html`
+    <div class="app">
+      <nav>
+        <a href="/">home</a> · <a href="/about">about</a>
+      </nav>
+      <main>
+        <${Suspense} fallback=${html`<p>loading…</p>`}>
+          <${Outlet} />
+        </${Suspense}>
+      </main>
+    </div>
+  `;
+}
+
+// Exported so entry-client can hand it to startClient — it preloads the current route's
+// lazy chunk before hydrating, so the server-rendered DOM is adopted in place (flash-free).
+export const appRoutes = [{ path: '/', component: RootLayout, children: routes as any }];
+
+export default function App(props?: { url?: string }) {
+  // On the server, match the request URL (memory history); on the client, default
+  // to browser history.
+  const history =
+    typeof window === 'undefined' ? createMemoryHistory(props?.url ?? '/') : undefined;
+  return html`<${Router} routes=${appRoutes as any} history=${history as any} />`;
+}

package/template-ssr-html/src/entry-client.ts

@@ -0,0 +1,10 @@
+// Client entry — hydrates the server-rendered markup. The app HTML is injected into
+// `#root` (the @fluixi/start mountId), so hydrate that container.
+import { startClient } from '@fluixi/core/client';
+import App, { appRoutes } from './app.js';
+
+// Passing the route tree lets startClient preload the matched route's lazy chunk before
+// hydrating — the lazy file-route then resolves synchronously and adopts the server DOM in
+// place (no first-paint flash, no duplicate). It also enables auto-hydration of the
+// server-rendered root.
+startClient(App, { root: '#root', routes: appRoutes });

package/template-ssr-html/src/entry-server.ts

@@ -0,0 +1,17 @@
+// SSR entry — @fluixi/start's dev/build/start load this. It calls `renderStream`
+// (streaming: head flushed first, body streamed) when present, else `render` (string).
+import App from './app.js';
+import { renderRequestAsync, renderToBodyStream } from '@fluixi/server';
+
+export function render(url: string): Promise<string> {
+  return renderRequestAsync(App, { url });
+}
+
+export function renderStream(url: string): ReadableStream<Uint8Array> {
+  return renderToBodyStream(App, { url });
+}
+
+// Server-function RPC dispatch — re-exported so the dispatcher shares the registry that
+// this app's `"use server"` modules populate. @fluixi/start routes RPC calls here.
+import 'virtual:fluixi-server-fns'; // registers every "use server" module (incl. lazy routes)
+export { isServerFnRequest, handleServerFn } from '@fluixi/start/server-fn';

package/template-ssr-html/src/fluixi-env.d.ts

@@ -0,0 +1,7 @@
+// Auto-generated by @fluixi/core fluixiRoutesPlugin — do not edit manually
+declare module 'virtual:fluixi-routes' {
+  import type { RouteDefinition } from '@fluixi/core/router-next';
+  export const routes: RouteDefinition[];
+}
+
+declare module 'virtual:fluixi-server-fns';

package/template-ssr-html/src/routes/about.ts

@@ -0,0 +1,10 @@
+import { html } from '@fluixi/start';
+
+export default function About() {
+  return html`
+    <section class="about">
+      <h1>About</h1>
+      <p>A second file-route — proves URL-based SSR matching works.</p>
+    </section>
+  `;
+}

package/template-ssr-html/src/routes/index.ts

@@ -0,0 +1,25 @@
+import { createResource } from '@fluixi/reactive/signal';
+import { seo } from '@fluixi/start/head';
+import { html } from '@fluixi/start';
+
+const tick = <T,>(v: T, ms = 30) => new Promise<T>((r) => setTimeout(() => r(v), ms));
+
+// A data-gated route, like a real page: the resource is awaited during SSR so the
+// content (not the spinner) is server-rendered, then hydrated.
+export default function Home() {
+  const [data] = createResource(() => tick('Hello from Fluixi Start 👋'));
+
+  // Per-route document head — rendered into <head> on the server (great for crawlers/links)
+  // and kept reactive on the client. seo() is optional; call it where you want metadata.
+  seo({
+    title: 'Fluixi Start',
+    description: 'A server-rendered Fluixi app, scaffolded by the fluixi CLI.',
+  });
+
+  return html`
+    <section class="home">
+      <h1>${data()}</h1>
+      <p>Server-rendered through the fluixi CLI, then hydrated.</p>
+    </section>
+  `;
+}

package/template-ssr-html/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": false,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["node", "vite/client"],
+    "plugins": [{ "name": "@fluixi/ts-plugin" }]
+  },
+  "include": ["src", "fluixi.config.ts"]
+}