@loom-js/create 0.0.0-stage → 0.1.0

package/dist/templates/biome/js/base/public/styles/base.css

@@ -0,0 +1,17 @@
+/* Layered, so a UI kit's or Tailwind's rules win over these defaults. */
+@layer base {
+    body {
+        font-family: system-ui, sans-serif;
+        margin: 0;
+    }
+
+    .app-nav {
+        display: flex;
+        gap: 1rem;
+        padding: 1rem 1.25rem;
+    }
+
+    .app-main {
+        padding: 0 1.25rem;
+    }
+}

package/dist/templates/biome/js/base/src/app.js

@@ -0,0 +1,23 @@
+import { component, createRoutes, RouteLink } from '@loom-js/core';
+
+// Pages load on demand. Registering routes touches no DOM, so module scope
+// is safe on the server too.
+const Routes = createRoutes({
+    config: {
+        '/': () => import('@app/pages/home'),
+        '/about': () => import('@app/pages/about')
+    }
+});
+
+/** The composed app: the browser entry and the server render both call it. */
+export const App = component(
+    (html, props) => html`
+        <div class="app">
+            <nav class="app-nav">
+                <${RouteLink} href="/">Home</>
+                <${RouteLink} href="/about">About</>
+            </nav>
+            <main class="app-main">${Routes(props)}</main>
+        </div>
+    `
+);

package/dist/templates/biome/js/base/src/pages/about.js

@@ -0,0 +1,12 @@
+import { component } from '@loom-js/core';
+
+export default component(
+    (html) => html`
+        <section>
+            <h1>About</h1>
+            <p>
+                A second route, so client-side navigation has somewhere to go.
+            </p>
+        </section>
+    `
+);

package/dist/templates/biome/js/base/src/pages/home.js

@@ -0,0 +1,22 @@
+import { activity, component } from '@loom-js/core';
+
+const count = activity(0);
+
+export default component(
+    (html) => html`
+        <section>
+            <h1>Welcome to loom</h1>
+            <p>
+                Edit
+                <code>src/pages/home.ts</code>
+                and save to reload.
+            </p>
+            <button
+                $click=${() => count.update(count.value() + 1)}
+                type="button"
+            >
+                ${count.effect(({ value }) => `Clicked ${value} times`)}
+            </button>
+        </section>
+    `
+);

package/dist/templates/biome/js/base/src/routes.js

@@ -0,0 +1,3 @@
+// Every route that gets an HTML shell. The config and the router read this
+// list; add a route here and in `app.ts` together.
+export const routes = ['/', '/about'];

package/dist/templates/biome/js/server/src/prerender.entry.js

@@ -0,0 +1,22 @@
+// The server module: built next to the client so markup and state match the
+// shipped app. `loom build` calls `prerenderRoute` once per route.
+
+import {
+    dehydrate,
+    renderToString,
+    serializeState
+} from '@loom-js/core/server';
+
+import { App } from './app';
+
+export { routes } from './routes';
+
+/** Renders one route: its markup plus the state the client primes from. */
+export const prerenderRoute = async (url, window) => {
+    const html = await renderToString(App(), {
+        url,
+        window
+    });
+
+    return { html, state: serializeState(dehydrate(window)) };
+};

package/dist/templates/biome/js/tailwind/scripts/dev.mjs

@@ -0,0 +1,66 @@
+// `dev`: the Tailwind CLI in watch mode next to `loom dev`. When either one
+// exits, the other is stopped, and its exit code is passed on.
+
+import { spawn } from 'node:child_process';
+import { pathToFileURL } from 'node:url';
+
+const TASKS = [
+    [
+        'tailwindcss',
+        // `always`: plain `--watch` exits when stdin closes (any non-TTY run).
+        [
+            '-i',
+            './src/styles.css',
+            '-o',
+            './.generated/styles.css',
+            '--watch=always'
+        ]
+    ],
+    ['loom', ['dev']]
+];
+
+/** Starts every task; resolves with the first exit code once all stopped. */
+export const runTogether = (tasks, start = spawn) =>
+    new Promise((resolve) => {
+        let exitCode;
+        const stopped = new Set();
+        const children = tasks.map(([command, args]) =>
+            start(command, args, {
+                // Package binaries are `.cmd` shims on Windows.
+                shell: process.platform === 'win32',
+                stdio: 'inherit'
+            })
+        );
+        const onStopped = (child, code) => {
+            if (stopped.has(child)) {
+                return;
+            }
+
+            stopped.add(child);
+            exitCode ??= code ?? 1;
+
+            for (const other of children) {
+                if (!stopped.has(other)) {
+                    other.kill();
+                }
+            }
+
+            if (stopped.size === children.length) {
+                resolve(exitCode);
+            }
+        };
+
+        for (const child of children) {
+            child.on('exit', (code) => onStopped(child, code));
+            // A binary that can't start stops the other task too.
+            child.on('error', () => onStopped(child, 1));
+        }
+    });
+
+// Runs only as the `dev` script, not when imported.
+if (
+    process.argv[1] &&
+    import.meta.url === pathToFileURL(process.argv[1]).href
+) {
+    process.exitCode = await runTogether(TASKS);
+}

package/dist/templates/biome/js/tailwind/src/app.js

@@ -0,0 +1,23 @@
+import { component, createRoutes, RouteLink } from '@loom-js/core';
+
+// Pages load on demand. Registering routes touches no DOM, so module scope
+// is safe on the server too.
+const Routes = createRoutes({
+    config: {
+        '/': () => import('@app/pages/home'),
+        '/about': () => import('@app/pages/about')
+    }
+});
+
+/** The composed app: the browser entry and the server render both call it. */
+export const App = component(
+    (html, props) => html`
+        <div class="mx-auto flex max-w-3xl flex-col gap-6 px-5 py-6">
+            <nav class="flex gap-4 font-medium" id="app-nav">
+                <${RouteLink} href="/">Home</>
+                <${RouteLink} href="/about">About</>
+            </nav>
+            <main>${Routes(props)}</main>
+        </div>
+    `
+);

package/dist/templates/biome/js/ui/pink/src/pages/home.js

@@ -0,0 +1,21 @@
+import { activity, component } from '@loom-js/core';
+import { PinkButton, PinkCard } from '@loom-js/pink';
+
+const count = activity(0);
+
+export default component(
+    (html) => html`
+        <section>
+            <h1>Welcome to loom</h1>
+            <${PinkCard} id="welcome-card">
+                <p>Edit <code>src/pages/home.ts</code> and save to reload.</p>
+                <${PinkButton}
+                    icon="icon-check"
+                    onClick=${() => count.update(count.value() + 1)}
+                >
+                    ${count.effect(({ value }) => `Clicked ${value} times`)}
+                </>
+            </>
+        </section>
+    `
+);

package/dist/templates/biome/ts/base/public/styles/base.css

@@ -0,0 +1,17 @@
+/* Layered, so a UI kit's or Tailwind's rules win over these defaults. */
+@layer base {
+    body {
+        font-family: system-ui, sans-serif;
+        margin: 0;
+    }
+
+    .app-nav {
+        display: flex;
+        gap: 1rem;
+        padding: 1rem 1.25rem;
+    }
+
+    .app-main {
+        padding: 0 1.25rem;
+    }
+}

package/dist/templates/biome/ts/base/src/app.ts

@@ -0,0 +1,23 @@
+import { component, createRoutes, RouteLink } from '@loom-js/core';
+
+// Pages load on demand. Registering routes touches no DOM, so module scope
+// is safe on the server too.
+const Routes = createRoutes({
+    config: {
+        '/': () => import('@app/pages/home'),
+        '/about': () => import('@app/pages/about')
+    }
+});
+
+/** The composed app: the browser entry and the server render both call it. */
+export const App = component(
+    (html, props) => html`
+        <div class="app">
+            <nav class="app-nav">
+                <${RouteLink} href="/">Home</>
+                <${RouteLink} href="/about">About</>
+            </nav>
+            <main class="app-main">${Routes(props)}</main>
+        </div>
+    `
+);

package/dist/templates/biome/ts/base/src/pages/about.ts

@@ -0,0 +1,12 @@
+import { component } from '@loom-js/core';
+
+export default component(
+    (html) => html`
+        <section>
+            <h1>About</h1>
+            <p>
+                A second route, so client-side navigation has somewhere to go.
+            </p>
+        </section>
+    `
+);

package/dist/templates/biome/ts/base/src/pages/home.ts

@@ -0,0 +1,22 @@
+import { activity, component } from '@loom-js/core';
+
+const count = activity(0);
+
+export default component(
+    (html) => html`
+        <section>
+            <h1>Welcome to loom</h1>
+            <p>
+                Edit
+                <code>src/pages/home.ts</code>
+                and save to reload.
+            </p>
+            <button
+                $click=${() => count.update(count.value() + 1)}
+                type="button"
+            >
+                ${count.effect(({ value }) => `Clicked ${value} times`)}
+            </button>
+        </section>
+    `
+);

package/dist/templates/biome/ts/base/src/routes.ts

@@ -0,0 +1,3 @@
+// Every route that gets an HTML shell. The config and the router read this
+// list; add a route here and in `app.ts` together.
+export const routes = ['/', '/about'];

package/dist/templates/biome/ts/base/src/types.d.ts

@@ -0,0 +1,4 @@
+// `true` in `loom dev` builds, `false` in production; set by @loom-js/build.
+declare const __DEV__: boolean;
+
+declare module '*.css';

package/dist/templates/biome/ts/server/src/prerender.entry.ts

@@ -0,0 +1,26 @@
+// The server module: built next to the client so markup and state match the
+// shipped app. `loom build` calls `prerenderRoute` once per route.
+
+import {
+    dehydrate,
+    renderToString,
+    serializeState
+} from '@loom-js/core/server';
+
+import { App } from './app';
+
+export { routes } from './routes';
+
+// The server entry's types duplicate core's, so the same runtime value needs
+// a cast at this one boundary.
+type ServerRenderable = Parameters<typeof renderToString>[0];
+
+/** Renders one route: its markup plus the state the client primes from. */
+export const prerenderRoute = async (url: string, window: object) => {
+    const html = await renderToString(App() as unknown as ServerRenderable, {
+        url,
+        window
+    });
+
+    return { html, state: serializeState(dehydrate(window)) };
+};

package/dist/templates/biome/ts/tailwind/scripts/dev.mjs

@@ -0,0 +1,66 @@
+// `dev`: the Tailwind CLI in watch mode next to `loom dev`. When either one
+// exits, the other is stopped, and its exit code is passed on.
+
+import { spawn } from 'node:child_process';
+import { pathToFileURL } from 'node:url';
+
+const TASKS = [
+    [
+        'tailwindcss',
+        // `always`: plain `--watch` exits when stdin closes (any non-TTY run).
+        [
+            '-i',
+            './src/styles.css',
+            '-o',
+            './.generated/styles.css',
+            '--watch=always'
+        ]
+    ],
+    ['loom', ['dev']]
+];
+
+/** Starts every task; resolves with the first exit code once all stopped. */
+export const runTogether = (tasks, start = spawn) =>
+    new Promise((resolve) => {
+        let exitCode;
+        const stopped = new Set();
+        const children = tasks.map(([command, args]) =>
+            start(command, args, {
+                // Package binaries are `.cmd` shims on Windows.
+                shell: process.platform === 'win32',
+                stdio: 'inherit'
+            })
+        );
+        const onStopped = (child, code) => {
+            if (stopped.has(child)) {
+                return;
+            }
+
+            stopped.add(child);
+            exitCode ??= code ?? 1;
+
+            for (const other of children) {
+                if (!stopped.has(other)) {
+                    other.kill();
+                }
+            }
+
+            if (stopped.size === children.length) {
+                resolve(exitCode);
+            }
+        };
+
+        for (const child of children) {
+            child.on('exit', (code) => onStopped(child, code));
+            // A binary that can't start stops the other task too.
+            child.on('error', () => onStopped(child, 1));
+        }
+    });
+
+// Runs only as the `dev` script, not when imported.
+if (
+    process.argv[1] &&
+    import.meta.url === pathToFileURL(process.argv[1]).href
+) {
+    process.exitCode = await runTogether(TASKS);
+}

package/dist/templates/biome/ts/tailwind/src/app.ts

@@ -0,0 +1,23 @@
+import { component, createRoutes, RouteLink } from '@loom-js/core';
+
+// Pages load on demand. Registering routes touches no DOM, so module scope
+// is safe on the server too.
+const Routes = createRoutes({
+    config: {
+        '/': () => import('@app/pages/home'),
+        '/about': () => import('@app/pages/about')
+    }
+});
+
+/** The composed app: the browser entry and the server render both call it. */
+export const App = component(
+    (html, props) => html`
+        <div class="mx-auto flex max-w-3xl flex-col gap-6 px-5 py-6">
+            <nav class="flex gap-4 font-medium" id="app-nav">
+                <${RouteLink} href="/">Home</>
+                <${RouteLink} href="/about">About</>
+            </nav>
+            <main>${Routes(props)}</main>
+        </div>
+    `
+);

package/dist/templates/biome/ts/ui/pink/src/pages/home.ts

@@ -0,0 +1,21 @@
+import { activity, component } from '@loom-js/core';
+import { PinkButton, PinkCard } from '@loom-js/pink';
+
+const count = activity(0);
+
+export default component(
+    (html) => html`
+        <section>
+            <h1>Welcome to loom</h1>
+            <${PinkCard} id="welcome-card">
+                <p>Edit <code>src/pages/home.ts</code> and save to reload.</p>
+                <${PinkButton}
+                    icon="icon-check"
+                    onClick=${() => count.update(count.value() + 1)}
+                >
+                    ${count.effect(({ value }) => `Clicked ${value} times`)}
+                </>
+            </>
+        </section>
+    `
+);

package/dist/templates/prettier/js/base/public/styles/base.css

@@ -0,0 +1,17 @@
+/* Layered, so a UI kit's or Tailwind's rules win over these defaults. */
+@layer base {
+    body {
+        font-family: system-ui, sans-serif;
+        margin: 0;
+    }
+
+    .app-nav {
+        display: flex;
+        gap: 1rem;
+        padding: 1rem 1.25rem;
+    }
+
+    .app-main {
+        padding: 0 1.25rem;
+    }
+}

package/dist/templates/prettier/js/base/src/app.js

@@ -0,0 +1,23 @@
+import { component, createRoutes, RouteLink } from '@loom-js/core';
+
+// Pages load on demand. Registering routes touches no DOM, so module scope
+// is safe on the server too.
+const Routes = createRoutes({
+    config: {
+        '/': () => import('@app/pages/home'),
+        '/about': () => import('@app/pages/about')
+    }
+});
+
+/** The composed app: the browser entry and the server render both call it. */
+export const App = component(
+    (html, props) => html`
+        <div class="app">
+            <nav class="app-nav">
+                <${RouteLink} href="/">Home</>
+                <${RouteLink} href="/about">About</>
+            </nav>
+            <main class="app-main">${Routes(props)}</main>
+        </div>
+    `
+);

package/dist/templates/prettier/js/base/src/pages/about.js

@@ -0,0 +1,12 @@
+import { component } from '@loom-js/core';
+
+export default component(
+    (html) => html`
+        <section>
+            <h1>About</h1>
+            <p>
+                A second route, so client-side navigation has somewhere to go.
+            </p>
+        </section>
+    `
+);

package/dist/templates/prettier/js/base/src/pages/home.js

@@ -0,0 +1,22 @@
+import { activity, component } from '@loom-js/core';
+
+const count = activity(0);
+
+export default component(
+    (html) => html`
+        <section>
+            <h1>Welcome to loom</h1>
+            <p>
+                Edit
+                <code>src/pages/home.ts</code>
+                and save to reload.
+            </p>
+            <button
+                $click=${() => count.update(count.value() + 1)}
+                type="button"
+            >
+                ${count.effect(({ value }) => `Clicked ${value} times`)}
+            </button>
+        </section>
+    `
+);

package/dist/templates/prettier/js/base/src/routes.js

@@ -0,0 +1,3 @@
+// Every route that gets an HTML shell. The config and the router read this
+// list; add a route here and in `app.ts` together.
+export const routes = ['/', '/about'];

package/dist/templates/prettier/js/server/src/prerender.entry.js

@@ -0,0 +1,22 @@
+// The server module: built next to the client so markup and state match the
+// shipped app. `loom build` calls `prerenderRoute` once per route.
+
+import {
+    dehydrate,
+    renderToString,
+    serializeState
+} from '@loom-js/core/server';
+
+import { App } from './app';
+
+export { routes } from './routes';
+
+/** Renders one route: its markup plus the state the client primes from. */
+export const prerenderRoute = async (url, window) => {
+    const html = await renderToString(App(), {
+        url,
+        window
+    });
+
+    return { html, state: serializeState(dehydrate(window)) };
+};

package/dist/templates/prettier/js/tailwind/scripts/dev.mjs

@@ -0,0 +1,66 @@
+// `dev`: the Tailwind CLI in watch mode next to `loom dev`. When either one
+// exits, the other is stopped, and its exit code is passed on.
+
+import { spawn } from 'node:child_process';
+import { pathToFileURL } from 'node:url';
+
+const TASKS = [
+    [
+        'tailwindcss',
+        // `always`: plain `--watch` exits when stdin closes (any non-TTY run).
+        [
+            '-i',
+            './src/styles.css',
+            '-o',
+            './.generated/styles.css',
+            '--watch=always'
+        ]
+    ],
+    ['loom', ['dev']]
+];
+
+/** Starts every task; resolves with the first exit code once all stopped. */
+export const runTogether = (tasks, start = spawn) =>
+    new Promise((resolve) => {
+        let exitCode;
+        const stopped = new Set();
+        const children = tasks.map(([command, args]) =>
+            start(command, args, {
+                // Package binaries are `.cmd` shims on Windows.
+                shell: process.platform === 'win32',
+                stdio: 'inherit'
+            })
+        );
+        const onStopped = (child, code) => {
+            if (stopped.has(child)) {
+                return;
+            }
+
+            stopped.add(child);
+            exitCode ??= code ?? 1;
+
+            for (const other of children) {
+                if (!stopped.has(other)) {
+                    other.kill();
+                }
+            }
+
+            if (stopped.size === children.length) {
+                resolve(exitCode);
+            }
+        };
+
+        for (const child of children) {
+            child.on('exit', (code) => onStopped(child, code));
+            // A binary that can't start stops the other task too.
+            child.on('error', () => onStopped(child, 1));
+        }
+    });
+
+// Runs only as the `dev` script, not when imported.
+if (
+    process.argv[1] &&
+    import.meta.url === pathToFileURL(process.argv[1]).href
+) {
+    process.exitCode = await runTogether(TASKS);
+}

package/dist/templates/prettier/js/tailwind/src/app.js

@@ -0,0 +1,23 @@
+import { component, createRoutes, RouteLink } from '@loom-js/core';
+
+// Pages load on demand. Registering routes touches no DOM, so module scope
+// is safe on the server too.
+const Routes = createRoutes({
+    config: {
+        '/': () => import('@app/pages/home'),
+        '/about': () => import('@app/pages/about')
+    }
+});
+
+/** The composed app: the browser entry and the server render both call it. */
+export const App = component(
+    (html, props) => html`
+        <div class="mx-auto flex max-w-3xl flex-col gap-6 px-5 py-6">
+            <nav class="flex gap-4 font-medium" id="app-nav">
+                <${RouteLink} href="/">Home</>
+                <${RouteLink} href="/about">About</>
+            </nav>
+            <main>${Routes(props)}</main>
+        </div>
+    `
+);