@ketvietlab/create-view 0.1.24

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 KETVIET JSC, Vietnam
+
+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,5 @@
+# @ketvietlab/create-view
+
+Project generator for static Ket view sites.
+
+Run `npm create @ketvietlab/view@latest my-site`, install dependencies, and start the development server with `npm run dev`.

package/dist/cli.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=cli.d.ts.map

package/dist/cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../../../../packages/create-view/src/cli.ts"],"names":[],"mappings":""}

package/dist/cli.js

@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+import { resolve } from 'node:path';
+import { scaffoldView } from './index.js';
+const VERSION = '0.1.24';
+const HELP = `Create Ket view ${VERSION}
+
+Usage:
+  npm create @ketvietlab/view@latest PROJECT [-- --dir DIR]
+
+Creates a static HTML project with TypeScript, CSS and explicit client islands.`;
+const args = process.argv.slice(2);
+const option = (name) => {
+    const index = args.indexOf(`--${name}`);
+    return index < 0 ? undefined : args[index + 1];
+};
+try {
+    if (args.includes('--version')) {
+        console.log(VERSION);
+        process.exit(0);
+    }
+    if (args.includes('--help')) {
+        console.log(HELP);
+        process.exit(0);
+    }
+    const name = args.find((arg) => !arg.startsWith('--'));
+    if (!name || name === 'help') {
+        console.log(HELP);
+    }
+    else if (name === 'version') {
+        console.log(VERSION);
+    }
+    else {
+        const dir = resolve(option('dir') ?? name);
+        for (const line of scaffoldView(name, dir))
+            console.log(line);
+    }
+}
+catch (error) {
+    console.error(error instanceof Error ? error.message : error);
+    process.exitCode = 1;
+}
+//# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../../../../../packages/create-view/src/cli.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAEzC,MAAM,OAAO,GAAG,QAAQ,CAAA;AACxB,MAAM,IAAI,GAAG,mBAAmB,OAAO;;;;;gFAKyC,CAAA;AAEhF,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;AAClC,MAAM,MAAM,GAAG,CAAC,IAAY,EAAsB,EAAE;IAClD,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA;IACvC,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAA;AAChD,CAAC,CAAA;AAED,IAAI,CAAC;IACH,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC;QAC/B,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;QACpB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACjB,CAAC;IACD,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC5B,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QACjB,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;IACjB,CAAC;IACD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAA;IACtD,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;QAC7B,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;IACnB,CAAC;SAAM,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QAC9B,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;IACtB,CAAC;SAAM,CAAC;QACN,MAAM,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,CAAA;QAC1C,KAAK,MAAM,IAAI,IAAI,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC;YAAE,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;IAC/D,CAAC;AACH,CAAC;AAAC,OAAO,KAAK,EAAE,CAAC;IACf,OAAO,CAAC,KAAK,CAAC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;IAC7D,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAA;AACtB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export declare function scaffoldView(name: string, dir: string): string[];
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/create-view/src/index.ts"],"names":[],"mappings":"AAwBA,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAkBhE"}

package/dist/index.js

@@ -0,0 +1,37 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+const VERSION = '0.1.24';
+const TEMPLATES = new URL('./templates/', import.meta.url);
+const LAYOUT = [
+    ['package.json.tmpl', 'package.json'],
+    ['tsconfig.json.tmpl', 'tsconfig.json'],
+    ['ket-view.config.ts.tmpl', 'ket-view.config.ts'],
+    ['README.md.tmpl', 'README.md'],
+    ['gitignore.tmpl', '.gitignore'],
+    ['index.ts.tmpl', 'src/pages/index.ts'],
+    ['about.ts.tmpl', 'src/pages/about.ts'],
+    ['counter.ts.tmpl', 'src/islands/counter.ts'],
+    ['main.css.tmpl', 'src/styles/main.css'],
+    ['favicon.svg.tmpl', 'public/favicon.svg'],
+];
+const render = (template, name) => readFileSync(new URL(template, TEMPLATES), 'utf8')
+    .replaceAll('__NAME__', name)
+    .replaceAll('__VERSION__', VERSION);
+export function scaffoldView(name, dir) {
+    if (!/^[a-z][a-z0-9-]*$/.test(name))
+        throw new Error(`invalid project name "${name}" — use lowercase letters, digits and hyphens, starting with a letter`);
+    const files = LAYOUT.map(([template, path]) => [path, render(template, name)]);
+    const clashes = files.map(([path]) => path).filter((path) => existsSync(join(dir, path)));
+    if (clashes.length)
+        throw new Error(`refusing to overwrite: ${clashes.map((path) => join(dir, path)).join(', ')}`);
+    const output = [];
+    for (const [path, contents] of files) {
+        const target = join(dir, path);
+        mkdirSync(join(target, '..'), { recursive: true });
+        writeFileSync(target, contents);
+        output.push(`  wrote ${target}`);
+    }
+    output.push('', `  cd ${dir}`, '  npm install', '  npm run dev');
+    return output;
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../packages/create-view/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAC5E,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAEhC,MAAM,OAAO,GAAG,QAAQ,CAAA;AACxB,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,cAAc,EAAE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAA;AAE1D,MAAM,MAAM,GAA4B;IACtC,CAAC,mBAAmB,EAAE,cAAc,CAAC;IACrC,CAAC,oBAAoB,EAAE,eAAe,CAAC;IACvC,CAAC,yBAAyB,EAAE,oBAAoB,CAAC;IACjD,CAAC,gBAAgB,EAAE,WAAW,CAAC;IAC/B,CAAC,gBAAgB,EAAE,YAAY,CAAC;IAChC,CAAC,eAAe,EAAE,oBAAoB,CAAC;IACvC,CAAC,eAAe,EAAE,oBAAoB,CAAC;IACvC,CAAC,iBAAiB,EAAE,wBAAwB,CAAC;IAC7C,CAAC,eAAe,EAAE,qBAAqB,CAAC;IACxC,CAAC,kBAAkB,EAAE,oBAAoB,CAAC;CAC3C,CAAA;AAED,MAAM,MAAM,GAAG,CAAC,QAAgB,EAAE,IAAY,EAAU,EAAE,CACxD,YAAY,CAAC,IAAI,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,MAAM,CAAC;KAC/C,UAAU,CAAC,UAAU,EAAE,IAAI,CAAC;KAC5B,UAAU,CAAC,aAAa,EAAE,OAAO,CAAC,CAAA;AAEvC,MAAM,UAAU,YAAY,CAAC,IAAY,EAAE,GAAW;IACpD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC;QACjC,MAAM,IAAI,KAAK,CACb,yBAAyB,IAAI,uEAAuE,CACrG,CAAA;IACH,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAU,CAAC,CAAA;IACvF,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,CAAA;IACzF,IAAI,OAAO,CAAC,MAAM;QAChB,MAAM,IAAI,KAAK,CAAC,0BAA0B,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IAChG,MAAM,MAAM,GAAa,EAAE,CAAA;IAC3B,KAAK,MAAM,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,KAAK,EAAE,CAAC;QACrC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;QAC9B,SAAS,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA;QAClD,aAAa,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;QAC/B,MAAM,CAAC,IAAI,CAAC,WAAW,MAAM,EAAE,CAAC,CAAA;IAClC,CAAC;IACD,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,GAAG,EAAE,EAAE,eAAe,EAAE,eAAe,CAAC,CAAA;IAChE,OAAO,MAAM,CAAA;AACf,CAAC"}

package/dist/templates/README.md.tmpl

@@ -0,0 +1,8 @@
+# __NAME__
+
+A static HTML site built with Ket view.
+
+- `npm run dev` starts the local development server.
+- `npm run build` writes deployable HTML, CSS, and JavaScript to `dist`.
+- `npm run preview` serves the built output.
+- `npm run check` type-checks and validates pages and island bundles.

package/dist/templates/about.ts.tmpl

@@ -0,0 +1,24 @@
+import { html } from '@ketvietlab/ketjs-view'
+import { definePage } from '@ketvietlab/ketjs-view-tools'
+
+export default definePage({
+  head: {
+    title: 'About · __NAME__',
+    description: 'A fully static page with no hydration markers or client JavaScript of its own.',
+    lang: 'en',
+  },
+  view: () => html`
+    <header class="site-header">
+      <a class="brand" href="../">__NAME__</a>
+      <nav aria-label="Main navigation"><a aria-current="page" href="./">About</a></nav>
+    </header>
+    <main>
+      <article class="prose">
+        <p class="eyebrow">A plain static route</p>
+        <h1>Nothing to hydrate here.</h1>
+        <p>This file becomes <code>dist/about/index.html</code> with its shared, hashed stylesheet.</p>
+        <p><a href="../">Back home</a></p>
+      </article>
+    </main>
+  `,
+})

package/dist/templates/counter.ts.tmpl

@@ -0,0 +1,16 @@
+import { html, signal } from '@ketvietlab/ketjs-view'
+import type { IslandFactory } from '@ketvietlab/ketjs-view'
+
+type CounterProps = { initial: number }
+
+const counter: IslandFactory<CounterProps> = (props) => {
+  const count = signal(props.initial)
+  return () => html`
+    <div class="counter">
+      <span>Count: ${count()}</span>
+      <button type="button" on:click=${() => count.set((value) => value + 1)}>Add one</button>
+    </div>
+  `
+}
+
+export default counter

package/dist/templates/favicon.svg.tmpl

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="14" fill="#17201b"/>
+  <path d="M18 15h9v14l13-14h11L35 32l17 17H40L27 35v14h-9z" fill="#d7f26c"/>
+</svg>

package/dist/templates/gitignore.tmpl

@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store

package/dist/templates/index.ts.tmpl

@@ -0,0 +1,26 @@
+import { html } from '@ketvietlab/ketjs-view'
+import { definePage, island } from '@ketvietlab/ketjs-view-tools'
+import counter from '../islands/counter.ts'
+
+export default definePage({
+  head: {
+    title: '__NAME__',
+    description: 'A static site powered by Ket view.',
+    lang: 'en',
+    links: [{ rel: 'icon', href: './favicon.svg', type: 'image/svg+xml' }],
+  },
+  view: () => html`
+    <header class="site-header">
+      <a class="brand" href="./">__NAME__</a>
+      <nav aria-label="Main navigation"><a href="./about/">About</a></nav>
+    </header>
+    <main>
+      <section class="hero">
+        <p class="eyebrow">Ket view static starter</p>
+        <h1>Ship plain HTML.<br />Add JavaScript only where it earns its place.</h1>
+        <p class="lede">The page stays marker-free. The counter below is an explicit island.</p>
+        ${island('counter', counter, { initial: 0 })}
+      </section>
+    </main>
+  `,
+})

package/dist/templates/ket-view.config.ts.tmpl

@@ -0,0 +1,10 @@
+import { defineConfig } from '@ketvietlab/ketjs-view-tools'
+
+export default defineConfig({
+  pages: 'src/pages',
+  styles: ['src/styles/main.css'],
+  islands: {
+    counter: 'src/islands/counter.ts',
+  },
+  base: './',
+})

package/dist/templates/main.css.tmpl

@@ -0,0 +1,34 @@
+:root {
+  color: #17201b;
+  background: #f3f0e8;
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  font-synthesis: none;
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; min-width: 20rem; }
+a { color: inherit; text-underline-offset: 0.2em; }
+.site-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: min(72rem, calc(100% - 3rem));
+  margin: 0 auto;
+  padding: 1.5rem 0;
+  border-bottom: 1px solid #c7c2b6;
+}
+.brand { font-weight: 750; text-decoration: none; }
+main { width: min(72rem, calc(100% - 3rem)); margin: 0 auto; }
+.hero, .prose { max-width: 52rem; padding: clamp(5rem, 12vw, 10rem) 0; }
+.eyebrow { color: #3e6b51; font-size: 0.82rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
+h1 { margin: 0.5rem 0 1.5rem; font-family: Georgia, serif; font-size: clamp(3rem, 7vw, 6.8rem); font-weight: 500; letter-spacing: -0.055em; line-height: 0.92; }
+.prose h1 { font-size: clamp(3rem, 6vw, 5rem); }
+.lede, .prose p { max-width: 40rem; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.65; }
+.counter { display: flex; align-items: center; gap: 1rem; width: fit-content; margin-top: 2.5rem; padding: 0.55rem 0.6rem 0.55rem 1.1rem; color: #f8f6ef; background: #17201b; border-radius: 999px; }
+button { padding: 0.7rem 1rem; color: #17201b; background: #d7f26c; border: 0; border-radius: 999px; font: inherit; font-weight: 750; cursor: pointer; }
+code { padding: 0.12em 0.35em; background: #e4dfd3; border-radius: 0.25rem; }
+
+@media (max-width: 40rem) {
+  .site-header, main { width: min(100% - 2rem, 72rem); }
+  .hero, .prose { padding: 4rem 0; }
+}

package/dist/templates/package.json.tmpl

@@ -0,0 +1,22 @@
+{
+  "name": "__NAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "engines": {
+    "node": ">=24.0.0"
+  },
+  "scripts": {
+    "dev": "ket-view dev",
+    "build": "ket-view build",
+    "preview": "ket-view preview",
+    "check": "tsc --noEmit && ket-view check"
+  },
+  "dependencies": {
+    "@ketvietlab/ketjs-view": "__VERSION__"
+  },
+  "devDependencies": {
+    "@ketvietlab/ketjs-view-tools": "__VERSION__",
+    "typescript": "^7.0.2"
+  }
+}

package/dist/templates/tsconfig.json.tmpl

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "lib": ["es2022", "dom"],
+    "strict": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": true
+  },
+  "include": ["ket-view.config.ts", "src/**/*.ts", "src/**/*.tsx"]
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@ketvietlab/create-view",
+  "version": "0.1.24",
+  "description": "Create a static HTML project powered by Ket view.",
+  "type": "module",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "create-view": "./dist/cli.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ketvietlab/ketjs.git",
+    "directory": "packages/create-view"
+  },
+  "homepage": "https://github.com/ketvietlab/ketjs#readme",
+  "bugs": {
+    "url": "https://github.com/ketvietlab/ketjs/issues"
+  },
+  "keywords": [
+    "create",
+    "static-site",
+    "scaffold",
+    "ketjs",
+    "typescript"
+  ],
+  "engines": {
+    "node": ">=24.0.0"
+  },
+  "scripts": {
+    "prepack": "npm run build --prefix ../.."
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "dependencies": {},
+  "publishConfig": {
+    "access": "public",
+    "provenance": true,
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist"
+  ]
+}