create-kerf-component 5.0.0-beta.17 → 5.0.0-beta.18

package/README.md

@@ -20,7 +20,7 @@ directory's basename is used as the package name.
 ## What you get
 
 A ready-to-publish component package that encodes the rules from the kerf docs
-(*Building reusable component packages*):
+(_Building reusable component packages_):
 
 - **`kerfjs` as a `peerDependency`, `external` in the tsup build** — never
   bundled, so `isSafeHtml` brand checks and signal identity stay intact across

package/index.js

@@ -17,7 +17,15 @@
 // kerf-component` alone just works. No third-party dependencies — the
 // initializer is plain Node so `npm create` runs it with zero install latency.
 
-import { cpSync, existsSync, mkdirSync, readdirSync, readFileSync, renameSync, writeFileSync } from 'node:fs';
+import {
+  cpSync,
+  existsSync,
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  renameSync,
+  writeFileSync,
+} from 'node:fs';
 import { basename, dirname, join, resolve } from 'node:path';
 import { createInterface } from 'node:readline/promises';
 import { fileURLToPath } from 'node:url';
@@ -41,7 +49,9 @@ const USAGE =
 async function promptForTarget() {
   const rl = createInterface({ input: process.stdin, output: process.stdout });
   try {
-    const answer = await rl.question(`Directory (\`.\` for current) [${DEFAULT_NAME}]: `);
+    const answer = await rl.question(
+      `Directory (\`.\` for current) [${DEFAULT_NAME}]: `,
+    );
     return answer.trim() || DEFAULT_NAME;
   } finally {
     rl.close();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-kerf-component",
-  "version": "5.0.0-beta.17",
+  "version": "5.0.0-beta.18",
   "description": "Scaffold a publishable kerf component package that already follows kerf's hard packaging rules.",
   "type": "module",
   "license": "MIT",

package/template/README.md

@@ -1,4 +1,4 @@
-# __PKG_NAME__
+# **PKG_NAME**
 
 A reusable [kerf](https://github.com/brianwestphal/kerf) component package,
 scaffolded with `create-kerf-component`.
@@ -7,7 +7,7 @@ scaffolded with `create-kerf-component`.
 
 ```bash
 npm install
-npm run build       # tsup → dist/ (ESM + .d.ts); kerfjs stays external
+npm run build # tsup → dist/ (ESM + .d.ts); kerfjs stays external
 npm run typecheck
 ```
 
@@ -17,11 +17,11 @@ A kerf app that already has `jsxImportSource: "kerfjs"` configured can import an
 render the component like any local function — there's no extra toolchain:
 
 ```tsx
-import { mount } from 'kerfjs';
-import { Counter, createCounter, wireCounter } from '__PKG_NAME__';
+import { mount } from "kerfjs";
+import { Counter, createCounter, wireCounter } from "__PKG_NAME__";
 
-const counter = createCounter(0);          // per-instance state (a factory)
-const root = document.getElementById('app')!;
+const counter = createCounter(0); // per-instance state (a factory)
+const root = document.getElementById("app")!;
 
 mount(root, () => <Counter store={counter} label="Clicks" />);
 
@@ -31,7 +31,7 @@ const dispose = wireCounter(root, counter); // delegation disposer (call on tear
 ## The rules this package follows
 
 These are kerf's hard packaging rules (see the kerf docs,
-*Building reusable component packages*). The scaffold encodes them so you don't
+_Building reusable component packages_). The scaffold encodes them so you don't
 have to:
 
 - **`kerfjs` is a `peerDependency` and is `external` in the build — never
@@ -45,7 +45,7 @@ have to:
   `delegate()` (see `wireCounter`), which returns a disposer.
 - **Build emits ESM + `.d.ts`; `tsconfig` sets `jsxImportSource: "kerfjs"`.**
 - **Never import `kerfjs/dev`.** kerf's dev diagnostics install global hooks, so
-  installing them is the consuming *app's* call, not a library's — the app
+  installing them is the consuming _app's_ call, not a library's — the app
   writes `if (import.meta.env.DEV) await import('kerfjs/dev')` in its own entry.
   To get the diagnostics while developing this package, add that line to your own
   test harness or demo page instead (it belongs to the harness, not to `src/`).

package/template/package.json

@@ -28,7 +28,7 @@
     "kerfjs": "^5.0.0-0"
   },
   "devDependencies": {
-    "kerfjs": "^5.0.0-beta.17",
+    "kerfjs": "^5.0.0-beta.18",
     "tsup": "^8",
     "typescript": "^5 || ^6"
   }

package/template/src/counter.tsx

@@ -61,7 +61,10 @@ export function Counter({ store, label = 'Count' }: CounterProps): SafeHtml {
  * single listener survives every re-render. Returns the disposer `delegate()`
  * hands back — call it when the host unmounts.
  */
-export function wireCounter(root: HTMLElement, store: CounterStore): () => void {
+export function wireCounter(
+  root: HTMLElement,
+  store: CounterStore,
+): () => void {
   return delegate(root, 'click', '[data-action^="counter:"]', (_event, el) => {
     const action = el.getAttribute('data-action');
     if (action === 'counter:inc') store.actions.inc();