npm - streetui - Versions diffs - 1.0.0 - Mend

streetui 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/LICENSE +21 -0
package/README.md +127 -0
package/dist/bin.cjs +894 -0
package/dist/bin.cjs.map +1 -0
package/dist/bin.d.cts +1 -0
package/dist/bin.d.ts +1 -0
package/dist/bin.js +892 -0
package/dist/bin.js.map +1 -0
package/dist/compile-B0q07Hzq.d.cts +656 -0
package/dist/compile-B0q07Hzq.d.ts +656 -0
package/dist/create-bin.cjs +896 -0
package/dist/create-bin.cjs.map +1 -0
package/dist/create-bin.d.cts +1 -0
package/dist/create-bin.d.ts +1 -0
package/dist/create-bin.js +894 -0
package/dist/create-bin.js.map +1 -0
package/dist/hydration-diagnostics-BE6xVWD1.d.cts +89 -0
package/dist/hydration-diagnostics-Bck5dMbz.d.ts +89 -0
package/dist/index.cjs +4284 -0
package/dist/index.cjs.map +1 -0
package/dist/index.d.cts +1759 -0
package/dist/index.d.ts +1759 -0
package/dist/index.js +4114 -0
package/dist/index.js.map +1 -0
package/dist/server-84Rz4g8W.d.cts +165 -0
package/dist/server-D9GPmB49.d.ts +165 -0
package/dist/server.cjs +972 -0
package/dist/server.cjs.map +1 -0
package/dist/server.d.cts +2 -0
package/dist/server.d.ts +2 -0
package/dist/server.js +940 -0
package/dist/server.js.map +1 -0
package/dist/testing.cjs +1754 -0
package/dist/testing.cjs.map +1 -0
package/dist/testing.d.cts +113 -0
package/dist/testing.d.ts +113 -0
package/dist/testing.js +1719 -0
package/dist/testing.js.map +1 -0
package/package.json +113 -0
package/templates/basic/README.md +39 -0
package/templates/basic/_gitignore +15 -0
package/templates/basic/_package.json +21 -0
package/templates/basic/public/styles.css +40 -0
package/templates/basic/src/app.ts +62 -0
package/templates/basic/src/main.ts +39 -0
package/templates/basic/src/server.ts +40 -0
package/templates/basic/streetui.config.ts +6 -0
package/templates/basic/tsconfig.json +16 -0
package/templates/ssr/README.md +46 -0
package/templates/ssr/_gitignore +15 -0
package/templates/ssr/_package.json +21 -0
package/templates/ssr/public/favicon.svg +4 -0
package/templates/ssr/public/styles.css +61 -0
package/templates/ssr/src/app.ts +135 -0
package/templates/ssr/src/main.ts +53 -0
package/templates/ssr/src/server.ts +47 -0
package/templates/ssr/streetui.config.ts +14 -0
package/templates/ssr/tsconfig.json +16 -0

package/templates/basic/src/main.ts ADDED Viewed

@@ -0,0 +1,39 @@
+/**
+ * Browser entry. Reads the SSR state snapshot, rebuilds identical state, and
+ * hydrates the server-rendered markup in place.
+ */
+import { createRenderer, readState } from 'streetui';
+import { BrowserDOMAdapter } from 'streetui';
+import { createState, compileApp, STATE_KEY, type AppSnapshot, type AppState } from './app.js';
+export interface HydrateResult {
+  readonly state: AppState;
+  unmount(): void;
+}
+export function hydrateApp(appContainer: Element, stateRoot?: Element | Document): HydrateResult {
+  const dom = new BrowserDOMAdapter();
+  const transferred = readState(dom, stateRoot ?? appContainer);
+  const seed = transferred[STATE_KEY] as AppSnapshot | undefined;
+  const state = createState(seed);
+  const compiled = compileApp(state);
+  const renderer = createRenderer({ domAdapter: dom });
+  const handle = renderer.hydrate(compiled, appContainer);
+  return { state, unmount: () => handle.unmount() };
+}
+if (typeof document !== 'undefined') {
+  const boot = (): void => {
+    const app = document.getElementById('app');
+    if (app !== null) hydrateApp(app, document);
+  };
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', boot, { once: true });
+  } else {
+    boot();
+  }
+}

package/templates/basic/src/server.ts ADDED Viewed

@@ -0,0 +1,40 @@
+/**
+ * Server entry. The StreetUI CLI bundles this for Node and calls `render` for
+ * every non-asset request, embedding a state snapshot for hydration.
+ */
+import { renderToString, serializeState } from 'streetui';
+import { createState, compileApp, snapshot, STATE_KEY } from './app.js';
+export interface RenderRequest {
+  readonly url: string;
+}
+export interface RenderResult {
+  readonly html: string;
+}
+export function render(_request: RenderRequest): RenderResult {
+  const state = createState();
+  const compiled = compileApp(state);
+  const body = renderToString(compiled);
+  const island = serializeState({ [STATE_KEY]: snapshot(state) });
+  const html = [
+    '<!doctype html>',
+    '<html lang="en">',
+    '<head>',
+    '<meta charset="utf-8" />',
+    '<meta name="viewport" content="width=device-width, initial-scale=1" />',
+    '<title>__PROJECT_NAME__</title>',
+    '<link rel="stylesheet" href="/styles.css" />',
+    '</head>',
+    '<body>',
+    `<div id="app">${body}</div>`,
+    island,
+    '<script type="module" src="/main.js"></script>',
+    '</body>',
+    '</html>',
+  ].join('\n');
+  return { html };
+}

package/templates/basic/streetui.config.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { defineConfig } from 'streetui';
+/** StreetUI project configuration. All fields are optional. */
+export default defineConfig({
+  port: 3000,
+});

package/templates/basic/tsconfig.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": [],
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src", "streetui.config.ts"]
+}

package/templates/ssr/README.md ADDED Viewed

@@ -0,0 +1,46 @@
+# __PROJECT_NAME__
+A StreetUI application with server-side rendering and client hydration,
+scaffolded with the StreetUI CLI.
+## Getting started
+```bash
+npm install
+npm run dev
+```
+Then open the URL printed in your terminal (default http://localhost:3000).
+Editing files under `src/` rebuilds the app and reloads the browser.
+## Scripts
+| Command         | What it does                                              |
+| --------------- | --------------------------------------------------------- |
+| `npm run dev`   | Start the dev server with live reload                     |
+| `npm run build` | Produce a production build in `dist/`                     |
+| `npm run start` | Serve the production build                                |
+| `npm run typecheck` | Type-check the project with `tsc`                     |
+## Project structure
+```
+__PROJECT_NAME__/
+├── public/            Static assets copied as-is (styles.css, favicon.svg)
+├── src/
+│   ├── app.ts         The universal app: one definition for server + browser
+│   ├── server.ts      Server entry — exports render(request) → HTML
+│   └── main.ts        Browser entry — hydrates the server HTML in place
+├── streetui.config.ts Project configuration (all fields optional)
+└── package.json
+```
+## How it works
+`src/app.ts` defines the UI once using the StreetUI DSL and reactive signals.
+`src/server.ts` renders it to HTML for each request and embeds a state snapshot;
+`src/main.ts` reads that snapshot in the browser and hydrates the existing DOM so
+the app becomes interactive without re-rendering.
+This project depends on a single package — `streetui` — and all of its source
+imports from `"streetui"`.

package/templates/ssr/_gitignore ADDED Viewed

@@ -0,0 +1,15 @@
+# Build output
+dist/
+.streetui/
+# Dependencies
+node_modules/
+# Logs
+*.log
+npm-debug.log*
+# Editor / OS
+.DS_Store
+.idea/
+.vscode/

package/templates/ssr/_package.json ADDED Viewed

@@ -0,0 +1,21 @@
+{
+  "name": "__PROJECT_NAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "streetui dev",
+    "build": "streetui build",
+    "start": "streetui start",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "streetui": "__FRAMEWORK_VERSION__"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.3"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/templates/ssr/public/favicon.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="7" fill="#4f46e5" />
+  <path d="M10 21c0 1.7 1.6 3 4 3s6-1.1 6-3.4c0-4.3-9-2.6-9-6.4C11 12 12.8 11 15 11c2.1 0 3.6 1 3.6 2.4" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" />
+</svg>

package/templates/ssr/public/styles.css ADDED Viewed

@@ -0,0 +1,61 @@
+:root {
+  color-scheme: light dark;
+  --fg: #1a1a2e;
+  --bg: #fafafa;
+  --accent: #4f46e5;
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+body {
+  margin: 0;
+  padding: 2rem;
+  color: var(--fg);
+  background: var(--bg);
+  line-height: 1.5;
+}
+#app {
+  max-width: 40rem;
+  margin: 0 auto;
+}
+h1 {
+  color: var(--accent);
+}
+[role="navigation"] {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+button {
+  font: inherit;
+  padding: 0.4rem 0.9rem;
+  border: 1px solid var(--accent);
+  border-radius: 0.4rem;
+  background: var(--accent);
+  color: #fff;
+  cursor: pointer;
+}
+button:hover {
+  opacity: 0.9;
+}
+input {
+  font: inherit;
+  padding: 0.4rem 0.6rem;
+  border: 1px solid #ccc;
+  border-radius: 0.4rem;
+  margin-right: 0.5rem;
+}
+form {
+  margin-top: 1rem;
+}
+[role="status"] {
+  margin-top: 0.75rem;
+  font-weight: 600;
+}

package/templates/ssr/src/app.ts ADDED Viewed

@@ -0,0 +1,135 @@
+/**
+ * __PROJECT_NAME__ — the universal application, shared by the server and the
+ * browser. This single definition is rendered to HTML on the server and then
+ * hydrated in place on the client, so there is exactly one source of truth for
+ * the UI and its reactive state.
+ *
+ * It demonstrates the StreetUI essentials a new app needs:
+ *   • signals            — `count`, `view`, `name` reactive state
+ *   • conditional views  — `when(...)` swaps Home / About without a framework
+ *   • navigation         — buttons flip the `view` signal (and the URL)
+ *   • a form             — an input bound to a signal, submitted to show a greeting
+ *
+ * State is JSON-serialisable so the server can embed a snapshot and the browser
+ * can rebuild the identical state before hydrating (no flash, no divergence).
+ */
+import { streetui, type PageDSL } from 'streetui';
+import { signal, derived, type Signal } from 'streetui';
+import { compile, type CompiledApplication } from 'streetui';
+/** The set of top-level views. Kept tiny on purpose. */
+export type View = 'home' | 'about';
+export interface AppState {
+  readonly count: Signal<number>;
+  readonly view: Signal<View>;
+  readonly name: Signal<string>;
+  readonly greeting: Signal<string>;
+}
+/** Plain snapshot embedded in the SSR HTML and used to reseed on the client. */
+export interface AppSnapshot {
+  readonly count: number;
+  readonly view: View;
+  readonly name: string;
+  readonly greeting: string;
+}
+/** The key under which this app's state is stored in the SSR island. */
+export const STATE_KEY = '__PROJECT_NAME__';
+/** Build reactive state, optionally seeded from a server snapshot. */
+export function createState(seed?: Partial<AppSnapshot>): AppState {
+  return {
+    count: signal(seed?.count ?? 0),
+    view: signal<View>(seed?.view ?? 'home'),
+    name: signal(seed?.name ?? ''),
+    greeting: signal(seed?.greeting ?? ''),
+  };
+}
+/** Read a serialisable snapshot out of the live state. */
+export function snapshot(state: AppState): AppSnapshot {
+  return {
+    count: state.count.peek(),
+    view: state.view.peek(),
+    name: state.name.peek(),
+    greeting: state.greeting.peek(),
+  };
+}
+/** Map a request path to the initial view (so SSR renders the right page). */
+export function viewForPath(path: string): View {
+  return path.replace(/[?#].*$/, '').replace(/\/+$/, '') === '/about' ? 'about' : 'home';
+}
+/** The one UI definition. Identical on the server and in the browser. */
+export function buildApp(page: PageDSL, state: AppState): void {
+  const isHome = derived(() => state.view.get() === 'home');
+  const isAbout = derived(() => state.view.get() === 'about');
+  const hasGreeting = derived(() => state.greeting.get().length > 0);
+  const countLabel = derived(() => `You clicked ${state.count.get()} times`);
+  page.heading('__PROJECT_NAME__', { id: 'brand', level: 1 });
+  page.section('nav', (n) => {
+    n.button('Home', { id: 'nav-home', onClick: () => navigate(state, 'home') });
+    n.button('About', { id: 'nav-about', onClick: () => navigate(state, 'about') });
+  }, { id: 'nav', role: 'navigation' });
+  page.when(isHome, (home) => {
+    home.section('home', (s) => {
+      s.text('Welcome to your new StreetUI app.', { id: 'home-tagline' });
+      s.text(countLabel, { id: 'count' });
+      s.button('Click me', {
+        id: 'increment',
+        onClick: () => state.count.set(state.count.peek() + 1),
+      });
+      s.form('greet-form', (f) => {
+        f.input({ id: 'name-input', bind: state.name, placeholder: 'Your name' });
+        f.button('Say hello', {
+          id: 'greet-submit',
+          onClick: () => submitGreeting(state),
+        });
+        f.when(hasGreeting, (g) =>
+          g.text(derived(() => state.greeting.get()), { id: 'greeting', role: 'status' }),
+        );
+      }, { id: 'greet-form', onSubmit: () => submitGreeting(state) });
+    }, { id: 'home' });
+  });
+  page.when(isAbout, (about) => {
+    about.section('about', (s) => {
+      s.heading('About', { id: 'about-title', level: 2 });
+      s.text(
+        'This project was scaffolded with the StreetUI CLI. Edit src/app.ts to ' +
+          'change what renders on both the server and the client.',
+        { id: 'about-body' },
+      );
+    }, { id: 'about' });
+  });
+}
+/** Flip the active view and keep the URL in sync when a browser is present. */
+function navigate(state: AppState, view: View): void {
+  state.view.set(view);
+  if (typeof history !== 'undefined' && typeof location !== 'undefined') {
+    const path = view === 'about' ? '/about' : '/';
+    if (location.pathname !== path) history.pushState({ view }, '', path);
+  }
+}
+/** Turn the name field into a greeting. */
+function submitGreeting(state: AppState): void {
+  const name = state.name.peek().trim();
+  state.greeting.set(name.length > 0 ? `Hello, ${name}!` : 'Hello there!');
+}
+/** Compile the app for a given state into a renderable graph. */
+export function compileApp(state: AppState): CompiledApplication {
+  const app = streetui.app({ name: '__PROJECT_NAME__' });
+  app.page('home', (page) => buildApp(page, state));
+  return compile(app);
+}

package/templates/ssr/src/main.ts ADDED Viewed

@@ -0,0 +1,53 @@
+/**
+ * Browser entry. Runs after the server HTML has painted: it reads the embedded
+ * state snapshot, rebuilds the identical reactive state, and HYDRATES the
+ * existing markup — adopting the server DOM instead of re-rendering it.
+ */
+import { createRenderer, readState } from 'streetui';
+import { BrowserDOMAdapter } from 'streetui';
+import { createState, compileApp, viewForPath, STATE_KEY, type AppSnapshot, type AppState } from './app.js';
+export interface HydrateResult {
+  readonly state: AppState;
+  unmount(): void;
+}
+/** Hydrate the app inside `appContainer`, seeded from the SSR state island. */
+export function hydrateApp(appContainer: Element, stateRoot?: Element | Document): HydrateResult {
+  const dom = new BrowserDOMAdapter();
+  const transferred = readState(dom, stateRoot ?? appContainer);
+  const seed = transferred[STATE_KEY] as AppSnapshot | undefined;
+  const state = createState(seed);
+  const compiled = compileApp(state);
+  const renderer = createRenderer({ domAdapter: dom });
+  const handle = renderer.hydrate(compiled, appContainer);
+  // Keep the view in sync with browser back/forward navigation.
+  const onPop = (): void => state.view.set(viewForPath(location.pathname));
+  window.addEventListener('popstate', onPop);
+  return {
+    state,
+    unmount: () => {
+      window.removeEventListener('popstate', onPop);
+      handle.unmount();
+    },
+  };
+}
+// Auto-boot in a real browser; guarded so importing in a non-DOM environment
+// (e.g. a test) does nothing.
+if (typeof document !== 'undefined') {
+  const boot = (): void => {
+    const app = document.getElementById('app');
+    if (app !== null) hydrateApp(app, document);
+  };
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', boot, { once: true });
+  } else {
+    boot();
+  }
+}

package/templates/ssr/src/server.ts ADDED Viewed

@@ -0,0 +1,47 @@
+/**
+ * Server entry. The StreetUI CLI bundles this for Node and calls the exported
+ * `render(request)` for every non-asset request. It renders the app to HTML for
+ * the requested URL and embeds a state snapshot so the browser can hydrate the
+ * exact same app in place.
+ *
+ * Pure server code: no `window`, no `document`.
+ */
+import { renderToString, serializeState } from 'streetui';
+import { createState, compileApp, snapshot, viewForPath, STATE_KEY } from './app.js';
+export interface RenderRequest {
+  readonly url: string;
+}
+export interface RenderResult {
+  readonly html: string;
+  readonly status?: number;
+}
+/** Render a full HTML document for the requested URL. */
+export function render(request: RenderRequest): RenderResult {
+  const state = createState({ view: viewForPath(request.url) });
+  const compiled = compileApp(state);
+  const body = renderToString(compiled);
+  const island = serializeState({ [STATE_KEY]: snapshot(state) });
+  const html = [
+    '<!doctype html>',
+    '<html lang="en">',
+    '<head>',
+    '<meta charset="utf-8" />',
+    '<meta name="viewport" content="width=device-width, initial-scale=1" />',
+    '<title>__PROJECT_NAME__</title>',
+    '<link rel="icon" href="/favicon.svg" />',
+    '<link rel="stylesheet" href="/styles.css" />',
+    '</head>',
+    '<body>',
+    `<div id="app">${body}</div>`,
+    island,
+    '<script type="module" src="/main.js"></script>',
+    '</body>',
+    '</html>',
+  ].join('\n');
+  return { html };
+}

package/templates/ssr/streetui.config.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { defineConfig } from 'streetui';
+/**
+ * StreetUI project configuration. Every field is optional and shown here with
+ * its default — delete anything you do not need to change.
+ */
+export default defineConfig({
+  port: 3000,
+  host: 'localhost',
+  clientEntry: 'src/main.ts',
+  serverEntry: 'src/server.ts',
+  outDir: 'dist',
+  publicDir: 'public',
+});

package/templates/ssr/tsconfig.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": [],
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src", "streetui.config.ts"]
+}