@statorjs/stator 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tony Sullivan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,104 @@
+# @statorjs/stator
+
+A server-canonical web framework: business logic lives in composable state
+machines that have no awareness of the UI, and the UI is a thin renderer
+binding machine outputs to DOM positions. Templates are `.stator` single-file
+components; interactions POST typed events; the server diffs affected bindings
+into small JSON patches. Client islands run the same machine engine in the
+browser as custom elements.
+
+Full documentation — tutorial, concepts, guides — lives in the repo's
+[`apps/docs`](https://github.com/statorjs/stator/tree/main/apps/docs) site;
+the repo [README](https://github.com/statorjs/stator#readme) has the tour.
+
+## Install
+
+```bash
+pnpm add @statorjs/stator hono
+```
+
+> **This package ships TypeScript source, by design.** Stator is
+> Vite/tsx-native: the dev server compiles `.stator` (and the framework's own
+> `.ts`) through Vite, and production runs the built output under `tsx`. There
+> is no `dist/` of transpiled JS — a plain-Node consumer that can't load `.ts`
+> modules can't import this package directly. This is a deliberate 1.0 stance,
+> not an oversight.
+
+## Entry points
+
+| import | contents |
+|---|---|
+| `@statorjs/stator/server`   | `createApp`, `defineMachine`, `defineRoute`, `defineApiRoute`, stores, `dispatchToApp` |
+| `@statorjs/stator/machine`  | the browser-safe engine core (`defineMachine`, `createActor`) |
+| `@statorjs/stator/template` | `html`, `read`, `each`, `when`/`match`, `raw`, directives |
+| `@statorjs/stator/client`   | island runtime — `StatorElement`, `use`, `machine`, `bind`, `dispatch` |
+| `@statorjs/stator/dev`      | `createDevApp` — the Vite-embedded dev server |
+| `@statorjs/stator/build`    | `buildApp`, `loadProductionHead`, `syncTypes` |
+| `@statorjs/stator/components` | built-ins (`<JsonLd>`) |
+
+`compiler` and `vite` subpaths exist but are internal — their shape may change
+in minor releases.
+
+## Minimal app
+
+```ts
+// server.ts
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { createDevApp } from '@statorjs/stator/dev'
+
+const here = dirname(fileURLToPath(import.meta.url))
+const app = await createDevApp({
+  root: here,
+  machinesDir: resolve(here, 'machines'),
+  routesDir: resolve(here, 'routes'),
+})
+await app.listen(3000)
+```
+
+```ts
+// machines/counter.ts
+import { defineMachine } from '@statorjs/stator/server'
+
+type Events = { type: 'INCREMENT' }
+
+export default defineMachine({
+  name: 'CounterMachine',
+  lifecycle: 'session',
+  events: {} as Events,
+  context: { count: 0 },
+  initial: 'idle',
+  states: {
+    idle: {
+      on: {
+        INCREMENT: (ctx) => {
+          ctx.count += 1
+        },
+      },
+    },
+  },
+  selectors: { label: (ctx) => `count is ${ctx.count}` },
+})
+```
+
+```
+// routes/index.stator  (`Stator` is provided by the compiler — no import)
+---
+import Counter from '../machines/counter.ts'
+
+const [counter] = Stator.reads([Counter])
+---
+<html>
+  <body>
+    <p>{read(counter, (c) => c.label)}</p>
+    <button on:click={() => counter.send({ type: 'INCREMENT' })}>+</button>
+  </body>
+</html>
+```
+
+Run with `tsx server.ts`. See the repo's `apps/example` for the full wiring
+(type sync, production build, deploy).
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@statorjs/stator",
+  "version": "1.0.0",
+  "description": "Server-canonical web framework: business logic in composable state machines, UI as a thin renderer binding machine outputs to DOM positions. Ships TypeScript source (Vite/tsx-native by design).",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/statorjs/stator.git",
+    "directory": "packages/stator"
+  },
+  "homepage": "https://github.com/statorjs/stator#readme",
+  "bugs": "https://github.com/statorjs/stator/issues",
+  "keywords": [
+    "framework",
+    "server-canonical",
+    "state-machine",
+    "ssr",
+    "sse",
+    "islands",
+    "vite"
+  ],
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "exports": {
+    "./server": {
+      "types": "./src/server/index.ts",
+      "default": "./src/server/index.ts"
+    },
+    "./machine": {
+      "types": "./src/engine/index.ts",
+      "default": "./src/engine/index.ts"
+    },
+    "./dev": {
+      "types": "./src/server/dev.ts",
+      "default": "./src/server/dev.ts"
+    },
+    "./build": {
+      "types": "./src/build/index.ts",
+      "default": "./src/build/index.ts"
+    },
+    "./template": {
+      "types": "./src/template/index.ts",
+      "default": "./src/template/index.ts"
+    },
+    "./components": {
+      "types": "./src/components/index.ts",
+      "default": "./src/components/index.ts"
+    },
+    "./client": {
+      "types": "./src/client/index.ts",
+      "default": "./src/client/index.ts"
+    },
+    "./compiler": {
+      "types": "./src/compiler/index.ts",
+      "default": "./src/compiler/index.ts"
+    },
+    "./vite": {
+      "types": "./src/vite/index.ts",
+      "default": "./src/vite/index.ts"
+    }
+  },
+  "dependencies": {
+    "@hono/node-server": "^1.13.0",
+    "esbuild": "^0.24.0",
+    "hono": "^4.6.0",
+    "ioredis": "^5.10.1",
+    "pino": "^10.3.1",
+    "postcss": "^8.5.15",
+    "postcss-selector-parser": "^7.1.4",
+    "schema-dts": "^1.1.5",
+    "typescript": "^5.6.0",
+    "zod": "^3.23.0"
+  },
+  "peerDependencies": {
+    "vite": "^6.0.0 || ^7.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^22.7.0",
+    "happy-dom": "^15.0.0",
+    "pino-pretty": "^13.1.3",
+    "vite": "^6.0.0",
+    "vitest": "^2.1.0",
+    "@statorjs/stator": "1.0.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "build:client": "esbuild src/client/runtime.ts --bundle --format=iife --target=es2020 --outfile=dist/client.js"
+  }
+}

package/src/build/build.ts

@@ -0,0 +1,244 @@
+import { cp, mkdir, readdir, readFile, rm, stat, writeFile } from 'node:fs/promises'
+import { join, relative, resolve, sep } from 'node:path'
+import { compile } from '../compiler/index.ts'
+
+/**
+ * Production build: compile a `.stator` app to a `dist/` of plain `.ts` that the
+ * existing `createApp` + tsx runtime serves with no Vite.
+ *
+ *   1. copy machines / routes / templates / static into dist
+ *   2. compile each `*.stator` → a sibling `*.stator.ts`, delete the `.stator`,
+ *      accumulate scoped CSS; for client components also write the generated
+ *      client entry as a sibling `*.stator.client.ts`
+ *   3. rewrite `.stator` import specifiers (`'./x.stator'` → `'./x.stator.ts'`)
+ *   4. write the concatenated scoped CSS to `dist/static/components.css`
+ *   5. when the app has client components: bundle every island entry in one
+ *      Vite build (hashed output under `dist/static/assets/`, server-machine
+ *      imports stubbed to `{ name }` via `machineStub`), walk each route's
+ *      import graph to find which islands it reaches, and write
+ *      `dist/stator-manifest.json` mapping route files → island script URLs
+ *
+ * The prod server runs `createApp` over `dist/` with the `headExtras` hook
+ * from `loadProductionHead(dist)` — it links `components.css` and injects the
+ * manifest's `<script type="module">` tags per route. File discovery + dynamic
+ * import work unchanged on the precompiled output; Vite is needed only at
+ * build time, and only when islands exist.
+ */
+
+export interface BuildConfig {
+  /** App directory containing machines/ routes/ templates/ static/. */
+  root: string
+  /** Output directory. Wiped and recreated. */
+  outDir: string
+  /** Subdirectories to copy into dist. Defaults to every top-level directory
+   *  in the app root except node_modules, tests, hidden dirs, and the outDir
+   *  itself — machines and routes import freely from sibling dirs (lib/,
+   *  data/), so dist must mirror the app's source shape. */
+  dirs?: string[]
+}
+
+export interface BuildResult {
+  outDir: string
+  /** Number of `.stator` files compiled. */
+  compiled: number
+  /** True when any component produced scoped CSS (components.css written). */
+  hasCss: boolean
+  /** Number of client components bundled for the browser. */
+  islands: number
+}
+
+/** Shape of `dist/stator-manifest.json` (only written when islands exist). */
+export interface StatorManifest {
+  /** Island component (dist-relative `.stator` path) → its script URL. */
+  islands: Record<string, string>
+  /** Route file (dist-relative) → script URLs for every island it reaches. */
+  routes: Record<string, string[]>
+}
+
+const NEVER_COPY = new Set(['node_modules', 'tests', 'test', '__tests__'])
+
+/** Every top-level directory that can hold app source. Machines/routes
+ *  import from arbitrary sibling dirs, so dist mirrors the source tree. */
+async function discoverSourceDirs(root: string, outDir: string): Promise<string[]> {
+  const outBase = relative(root, outDir).split(sep)[0]
+  const entries = await readdir(root, { withFileTypes: true })
+  return entries
+    .filter(
+      (e) =>
+        e.isDirectory() && !e.name.startsWith('.') && !NEVER_COPY.has(e.name) && e.name !== outBase,
+    )
+    .map((e) => e.name)
+}
+
+export async function buildApp(config: BuildConfig): Promise<BuildResult> {
+  const root = resolve(config.root)
+  const outDir = resolve(config.outDir)
+  const dirs = config.dirs ?? (await discoverSourceDirs(root, outDir))
+
+  await rm(outDir, { recursive: true, force: true })
+  await mkdir(outDir, { recursive: true })
+  for (const d of dirs) {
+    const src = join(root, d)
+    if (await exists(src)) await cp(src, join(outDir, d), { recursive: true })
+  }
+
+  // Compile every .stator into a sibling .stator.ts; collect CSS and islands.
+  const statorFiles = await walk(outDir, (f) => f.endsWith('.stator'))
+  let css = ''
+  const islands: Array<{ rel: string; entry: string }> = []
+  for (const file of statorFiles) {
+    const source = await readFile(file, 'utf8')
+    const rel = relative(outDir, file)
+    const kind = /(^|[\\/])routes[\\/]/.test(rel) ? ('route' as const) : ('component' as const)
+    const result = compile(source, { id: rel, kind })
+    await writeFile(`${file}.ts`, result.serverCode)
+    if (result.isClient) {
+      // The generated client entry, written as a sibling so the authored
+      // script's relative imports resolve against the mirrored dist tree.
+      await writeFile(`${file}.client.ts`, result.clientCode)
+      islands.push({ rel, entry: `${file}.client.ts` })
+    }
+    await rm(file)
+    if (result.css) css += `/* ${rel} */\n${result.css}\n`
+  }
+
+  // Rewrite `.stator` import specifiers to the compiled `.stator.ts` sibling.
+  const tsFiles = await walk(outDir, (f) => f.endsWith('.ts'))
+  for (const file of tsFiles) {
+    const code = await readFile(file, 'utf8')
+    const rewritten = code.replace(/(['"])([^'"]+\.stator)\1/g, '$1$2.ts$1')
+    if (rewritten !== code) await writeFile(file, rewritten)
+  }
+
+  if (css) {
+    await mkdir(join(outDir, 'static'), { recursive: true })
+    await writeFile(join(outDir, 'static', 'components.css'), css)
+  }
+
+  if (islands.length > 0) {
+    const manifest = await buildClientAssets(outDir, islands)
+    await writeFile(join(outDir, 'stator-manifest.json'), `${JSON.stringify(manifest, null, 2)}\n`)
+  }
+
+  return { outDir, compiled: statorFiles.length, hasCss: Boolean(css), islands: islands.length }
+}
+
+/**
+ * Bundle every island entry in one Vite build and derive the manifest.
+ * Vite is imported lazily — server-only apps never need it at build time.
+ */
+async function buildClientAssets(
+  outDir: string,
+  islands: Array<{ rel: string; entry: string }>,
+): Promise<StatorManifest> {
+  const [{ build: viteBuild }, { machineStub }] = await Promise.all([
+    import('vite'),
+    import('../vite/stub.ts'),
+  ])
+
+  const input: Record<string, string> = {}
+  for (const island of islands) {
+    input[island.rel.replace(/\.stator$/, '').replace(/[\\/]/g, '_')] = island.entry
+  }
+
+  const assetsDir = join(outDir, 'static', 'assets')
+  await viteBuild({
+    root: outDir,
+    logLevel: 'warn',
+    configFile: false,
+    plugins: [machineStub({ machinesDir: join(outDir, 'machines') })],
+    build: {
+      outDir: assetsDir,
+      emptyOutDir: true,
+      manifest: true,
+      rollupOptions: {
+        input,
+        output: {
+          entryFileNames: '[name]-[hash].js',
+          chunkFileNames: 'chunks/[name]-[hash].js',
+          assetFileNames: '[name]-[hash][extname]',
+        },
+      },
+    },
+  })
+
+  // Vite's manifest keys inputs by root-relative path; map back to islands.
+  const viteManifest = JSON.parse(
+    await readFile(join(assetsDir, '.vite', 'manifest.json'), 'utf8'),
+  ) as Record<string, { file: string; isEntry?: boolean }>
+  const islandUrls: Record<string, string> = {}
+  for (const island of islands) {
+    const key = relative(outDir, island.entry).replace(/\\/g, '/')
+    const entry = viteManifest[key]
+    if (!entry) throw new Error(`stator: island "${island.rel}" missing from Vite manifest`)
+    islandUrls[island.rel] = `/static/assets/${entry.file}`
+  }
+
+  // Per-route reachability: walk each route file's relative-import graph
+  // (post-rewrite, so island shells appear as `<island>.ts`) and record which
+  // islands it reaches. Mirrors the dev server's module-graph walk.
+  const shellToIsland = new Map(islands.map((i) => [resolve(outDir, `${i.rel}.ts`), i.rel]))
+  const routeFiles = await walk(join(outDir, 'routes'), (f) => f.endsWith('.ts'))
+  const routes: Record<string, string[]> = {}
+  for (const routeFile of routeFiles) {
+    const reached = new Set<string>()
+    await walkImports(routeFile, outDir, new Set(), (file) => {
+      const island = shellToIsland.get(file)
+      if (island) reached.add(island)
+    })
+    if (reached.size > 0) {
+      routes[relative(outDir, routeFile).replace(/\\/g, '/')] = [...reached]
+        .sort()
+        .map((rel) => islandUrls[rel]!)
+    }
+  }
+
+  return { islands: islandUrls, routes }
+}
+
+const IMPORT_SPECIFIER_RE = /(?:from|import)\s*\(?\s*['"]([^'"]+)['"]/g
+
+/** Depth-first walk of a file's relative-import graph, bounded to `outDir`. */
+async function walkImports(
+  file: string,
+  outDir: string,
+  seen: Set<string>,
+  visit: (file: string) => void,
+): Promise<void> {
+  if (seen.has(file)) return
+  seen.add(file)
+  visit(file)
+  let code: string
+  try {
+    code = await readFile(file, 'utf8')
+  } catch {
+    return
+  }
+  for (const match of code.matchAll(IMPORT_SPECIFIER_RE)) {
+    const spec = match[1]!
+    if (!spec.startsWith('.')) continue
+    const target = resolve(join(file, '..'), spec)
+    if (!target.startsWith(outDir)) continue
+    await walkImports(target, outDir, seen, visit)
+  }
+}
+
+async function exists(path: string): Promise<boolean> {
+  try {
+    await stat(path)
+    return true
+  } catch {
+    return false
+  }
+}
+
+async function walk(dir: string, match: (file: string) => boolean): Promise<string[]> {
+  const out: string[] = []
+  const entries = await readdir(dir, { withFileTypes: true })
+  for (const e of entries) {
+    const full = join(dir, e.name)
+    if (e.isDirectory()) out.push(...(await walk(full, match)))
+    else if (match(full)) out.push(full)
+  }
+  return out
+}

package/src/build/head.ts

@@ -0,0 +1,43 @@
+import { readFile, stat } from 'node:fs/promises'
+import { join, relative, resolve } from 'node:path'
+import type { StatorManifest } from './build.ts'
+
+/**
+ * Production `headExtras` for a built `dist/`: links `components.css` when the
+ * build produced one, and injects each route's island `<script type="module">`
+ * tags from `stator-manifest.json`. Pass the result to `createApp`:
+ *
+ *   const app = await createApp({ ..., headExtras: await loadProductionHead(dist) })
+ *
+ * Both artifacts are optional — a server-only app without styles gets an
+ * empty hook.
+ */
+export async function loadProductionHead(distDir: string): Promise<(filePath: string) => string> {
+  const dist = resolve(distDir)
+
+  let cssTag = ''
+  try {
+    await stat(join(dist, 'static', 'components.css'))
+    cssTag = '<link rel="stylesheet" href="/static/components.css">'
+  } catch {
+    // no scoped component styles
+  }
+
+  let routes: StatorManifest['routes'] = {}
+  try {
+    const manifest = JSON.parse(
+      await readFile(join(dist, 'stator-manifest.json'), 'utf8'),
+    ) as StatorManifest
+    routes = manifest.routes ?? {}
+  } catch {
+    // no islands
+  }
+
+  return (filePath: string): string => {
+    const rel = relative(dist, resolve(filePath)).replace(/\\/g, '/')
+    const scripts = routes[rel] ?? []
+    return [cssTag, ...scripts.map((url) => `<script type="module" src="${url}"></script>`)]
+      .filter(Boolean)
+      .join('\n')
+  }
+}

package/src/build/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Production build for `.stator` apps. Compiles a `.stator` app to a `dist/` of
+ * plain `.ts` the runtime serves with no Vite. See `buildApp`.
+ */
+
+export type { BuildConfig, BuildResult, StatorManifest } from './build.ts'
+export { buildApp } from './build.ts'
+export { loadProductionHead } from './head.ts'
+export type { SyncResult } from './sync.ts'
+export { syncTypes } from './sync.ts'

package/src/build/sync.ts

@@ -0,0 +1,65 @@
+import type { Dirent } from 'node:fs'
+import { mkdir, readdir, readFile, rm, writeFile } from 'node:fs/promises'
+import { dirname, join, relative, sep } from 'node:path'
+import { generateDts } from '../compiler/dts.ts'
+
+/**
+ * Type sync: generate a `<name>.stator.d.ts` for each component so editors and
+ * `tsc` type `import X from './x.stator'` against the component's real props
+ * (the `.d.ts` beats the `*.stator` ambient wildcard).
+ *
+ * The generated files live in a hidden, framework-managed `.stator/types/`
+ * directory that MIRRORS the source tree — never next to source. TS finds them
+ * via `rootDirs: ['.', '.stator/types']` in the app's tsconfig, which merges the
+ * two trees into one virtual root (the Astro `.astro/` / SvelteKit `.svelte-kit/`
+ * convention). `.stator/` is gitignored.
+ *
+ * Route pages (`routes/*.stator`) are skipped — they export `GET`, not a render
+ * function.
+ */
+export interface SyncResult {
+  /** Number of `.stator.d.ts` files written. */
+  written: number
+  /** The generated-types directory. */
+  outDir: string
+}
+
+const TYPES_DIR = join('.stator', 'types')
+
+export async function syncTypes(root: string): Promise<SyncResult> {
+  const outDir = join(root, TYPES_DIR)
+  await rm(outDir, { recursive: true, force: true })
+
+  const files = await walk(root)
+  let written = 0
+  for (const file of files) {
+    const kind = file.split(sep).includes('routes') ? 'route' : 'component'
+    const dts = generateDts(await readFile(file, 'utf8'), { kind })
+    if (dts === null) continue
+    // Mirror the source path under .stator/types: templates/x.stator →
+    // .stator/types/templates/x.stator.d.ts.
+    const rel = relative(root, file)
+    const target = join(outDir, `${rel}.d.ts`)
+    await mkdir(dirname(target), { recursive: true })
+    await writeFile(target, dts)
+    written++
+  }
+  return { written, outDir }
+}
+
+async function walk(dir: string): Promise<string[]> {
+  const out: string[] = []
+  let entries: Dirent[]
+  try {
+    entries = await readdir(dir, { withFileTypes: true })
+  } catch {
+    return out
+  }
+  for (const e of entries) {
+    if (e.name === 'node_modules' || e.name === 'dist' || e.name.startsWith('.')) continue
+    const full = join(dir, e.name)
+    if (e.isDirectory()) out.push(...(await walk(full)))
+    else if (e.name.endsWith('.stator')) out.push(full)
+  }
+  return out
+}

package/src/client/bind.ts

@@ -0,0 +1,47 @@
+import { actorOf, type ClientInstance } from './use.ts'
+
+/**
+ * The one client binding mechanism: subscribe to a set of client actors, and on
+ * any change re-evaluate a value thunk, diff against the last value, and write
+ * the DOM. The client mirror of the server's recompute loop.
+ *
+ * The compiler generates one `bind()` call per `bind:` directive: it infers the
+ * dependency set (the `use()` instances the expression references), passes the
+ * expression as the thunk, and supplies the target node + write function.
+ *
+ * Returns a disposer that unsubscribes.
+ */
+export function bind(
+  deps: ClientInstance[],
+  compute: () => unknown,
+  apply: (value: unknown) => void,
+): () => void {
+  let last = compute()
+  apply(last)
+
+  const onChange = (): void => {
+    const next = compute()
+    if (!Object.is(next, last)) {
+      last = next
+      apply(next)
+    }
+  }
+
+  const unsubs = deps.map((d) => actorOf(d).subscribe(onChange).unsubscribe)
+  return () => {
+    for (const u of unsubs) u()
+  }
+}
+
+/**
+ * Imperative reactivity escape hatch: run `fn` now and again whenever any
+ * dependency changes (no diffing — `fn` owns its own DOM writes). The lower-
+ * level primitive `{key}Changed` desugars to. Returns a disposer.
+ */
+export function effect(deps: ClientInstance[], fn: () => void): () => void {
+  fn()
+  const unsubs = deps.map((d) => actorOf(d).subscribe(fn).unsubscribe)
+  return () => {
+    for (const u of unsubs) u()
+  }
+}

package/src/client/client-id.ts

@@ -0,0 +1,10 @@
+/**
+ * Per-page-load identity, sent on the SSE connect AND on every dispatch —
+ * fan-out uses it to recognize a dispatch's own connection and advance its
+ * diff baseline WITHOUT re-sending patches the POST response already
+ * delivered (text/attr dupes are invisible; keyed inserts are not).
+ */
+export const clientId: string =
+  typeof crypto !== 'undefined' && 'randomUUID' in crypto
+    ? crypto.randomUUID()
+    : `c${Math.random().toString(36).slice(2)}`