@fusion.dev/helix-templates 0.205.2 → 0.207.0

package/README.md

@@ -34,7 +34,9 @@ smoke:scaffold` builds every template and holds what each renders to React on
 Vite's, in markup and in pictures, so a template that drifts fails CI.
 
 Each one starts Helix diagnostics in development, checked against the lint data
-of the Helix it installed, and a production build leaves it out.
+of the Helix it installed. A production build never loads them. Every build but
+Angular's leaves them out, and Angular's writes them to a file of their own that
+the page never requests.
 
 **There is no build-free HTML template**, and that is a fact about the packages
 rather than an omission. `@fusion.dev/helix`'s published entry re-exports bare
@@ -56,6 +58,10 @@ own name, and `HELIX_VERSION` becomes this package's version, which is the Helix
 the templates were published with. The payloads sit under `templates/<id>/` in
 this package.
 
+Each template carries its ignore file as `gitignore`, because npm leaves a file
+named `.gitignore` out of a published package. A scaffolder writes it into the
+project as `.gitignore`.
+
 **The named files are named rather than discovered.** Scanning every file for the
 placeholder would rewrite a template that merely mentions it in prose, and a
 rename that missed a file would ship rather than fail. The register is held to the

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-templates",
   "description": "Starter templates for Helix, as data. Read by `helix new` and by `npm create @fusion.dev/helix-app`.",
-  "version": "0.205.2",
+  "version": "0.207.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -17,6 +17,7 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./package.json": "./package.json",
     "./templates.json": "./templates.json"
   },
   "files": [

package/templates/angular/gitignore

@@ -0,0 +1,8 @@
+# Installed by npm install
+node_modules
+
+# Written by npm run build
+dist
+
+# The Angular CLI's build cache
+.angular

package/templates/angular/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "build": "ng build",
     "dev": "ng serve",
+    "diagnostics": "helix diagnostics",
     "ng": "ng",
     "start": "ng serve"
   },
@@ -22,6 +23,7 @@
     "@angular/build": "^22.2.1",
     "@angular/cli": "^22.2.1",
     "@angular/compiler-cli": "^22.2.1",
+    "@fusion.dev/helix-cli": "^__HELIX_VERSION__",
     "@fusion.dev/helix-diagnostics": "^__HELIX_VERSION__",
     "typescript": "~6.0.3"
   }

package/templates/angular/src/app/overview.html

@@ -48,7 +48,7 @@
 
     <!-- The footer is a row across the table: anything you slot goes at the
          start, and the table's own pagination sits at the end. -->
-    <helix-text emphasis="subtle" slot="footer" variant="caption">
+    <helix-text emphasis="muted" slot="footer" variant="caption">
       {{ members.length }} people
     </helix-text>
   </helix-data-table>

package/templates/angular/src/app/signup-form.ts

@@ -1,4 +1,4 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, signal } from '@angular/core'
+import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, inject, signal } from '@angular/core'
 import { teams } from './data'
 import { DOCS } from './docs'
 
@@ -31,6 +31,7 @@ export class SignupForm {
   protected readonly teams = teams
   protected readonly handle = signal('')
   protected readonly messages = signal<readonly Message[]>([])
+  private readonly view = inject(ChangeDetectorRef)
 
   /**
    * The page takes the submit, so nothing navigates. Remove `preventDefault()`
@@ -51,12 +52,20 @@ export class SignupForm {
    * with `preventDefault()`, then setting the value you want. Leaving `handle`
    * as it was does not refuse anything.
    *
+   * **`detectChanges()` puts the cleaned value on the element before the next
+   * key arrives.** Without zone.js, Angular renders a signal change in a later
+   * task. Keys sent at machine speed, by a barcode scanner, a password manager,
+   * or a test, arrive before that task, and each one lands in the text from
+   * before the update. Typed by Playwright with no delay, `Ada L!` left the
+   * handle empty without `detectChanges()`, and `adal` with it.
+   *
    * No typings ship for Angular, so the event's detail is named here.
    */
   protected takeHandle(event: Event): void {
     event.preventDefault()
     const { value } = (event as CustomEvent<{ value: string }>).detail
     this.handle.set(value.toLowerCase().replaceAll(/[^a-z0-9-]/g, ''))
+    this.view.detectChanges()
   }
 
   protected dismiss(id: number): void {

package/templates/angular/src/diagnostics.ts

@@ -9,9 +9,9 @@
  * **Checked against the Helix you installed**, from the lint data it ships, so
  * nothing is loaded from the network.
  *
- * To print the findings in your terminal as well, run `npx helix diagnostics`
- * from `@fusion.dev/helix-cli` beside the dev server, and add
- * `sinks: { relay: true }` below.
+ * To print the findings in your terminal as well, run `npm run diagnostics`
+ * beside the dev server, and add `sinks: { relay: true }` below. The script
+ * runs `helix diagnostics` from `@fusion.dev/helix-cli`.
  */
 import { initDiagnostics } from '@fusion.dev/helix-diagnostics'
 import lint from '@fusion.dev/helix/lint.json'

package/templates/react-nextjs/app/diagnostics.ts

@@ -9,9 +9,9 @@
  * **Checked against the Helix you installed**, from the lint data it ships, so
  * nothing is loaded from the network.
  *
- * To print the findings in your terminal as well, run `npx helix diagnostics`
- * from `@fusion.dev/helix-cli` beside the dev server, and add
- * `sinks: { relay: true }` below.
+ * To print the findings in your terminal as well, run `npm run diagnostics`
+ * beside the dev server, and add `sinks: { relay: true }` below. The script
+ * runs `helix diagnostics` from `@fusion.dev/helix-cli`.
  */
 import { initDiagnostics } from '@fusion.dev/helix-diagnostics'
 import lint from '@fusion.dev/helix/lint.json'

package/templates/react-nextjs/app/overview.tsx

@@ -86,7 +86,7 @@ export function Overview() {
 
           {/* The footer is a row across the table: anything you slot goes at the
               start, and the table's own pagination sits at the end. */}
-          <helix-text emphasis="subtle" slot="footer" variant="caption">
+          <helix-text emphasis="muted" slot="footer" variant="caption">
             {members.length} people
           </helix-text>
         </helix-data-table>

package/templates/react-nextjs/app/signup-form.tsx

@@ -8,6 +8,7 @@
  */
 
 import { type FormEvent, useState } from 'react'
+import { flushSync } from 'react-dom'
 import { teams } from './data'
 import { DOCS } from './docs'
 
@@ -83,14 +84,24 @@ export function SignupForm() {
             So taking the decision means refusing the change with
             `preventDefault()`, then setting the value you want. Leaving
             `setHandle` uncalled refuses nothing, and the element keeps the value
-            you meant to turn down. */}
+            you meant to turn down.
+
+            **`flushSync` puts the cleaned value on the element before the next
+            key arrives.** React renders a state update made in a custom
+            element's event in a later task. Keys sent at machine speed, by a
+            barcode scanner, a password manager, or a test, arrive before that
+            task, and each one lands in the text from before the update. Typed
+            by Playwright with no delay, `Ada L!` left the handle empty without
+            `flushSync`, and `adal` with it. */}
         <helix-input
           hint="Lowercase and hyphens, whatever you type."
           label="Handle"
           name="handle"
           onhelix-before-change={(event) => {
             event.preventDefault()
-            setHandle(event.detail.value.toLowerCase().replaceAll(/[^a-z0-9-]/g, ''))
+            flushSync(() => {
+              setHandle(event.detail.value.toLowerCase().replaceAll(/[^a-z0-9-]/g, ''))
+            })
           }}
           value={handle}
         />

package/templates/react-nextjs/gitignore

@@ -0,0 +1,10 @@
+# Installed by npm install
+node_modules
+
+# Written by next dev and next build
+.next
+next-env.d.ts
+*.tsbuildinfo
+
+# Environment files for this machine alone, such as .env.local
+.env*.local

package/templates/react-nextjs/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "build": "next build",
     "dev": "next dev",
+    "diagnostics": "helix diagnostics",
     "start": "next start"
   },
   "dependencies": {
@@ -16,6 +17,7 @@
     "react-dom": "^19.2.0"
   },
   "devDependencies": {
+    "@fusion.dev/helix-cli": "^__HELIX_VERSION__",
     "@fusion.dev/helix-diagnostics": "^__HELIX_VERSION__",
     "@types/node": "^22.10.0",
     "@types/react": "^19.2.0",

package/templates/react-vite/gitignore

@@ -0,0 +1,8 @@
+# Installed by npm install
+node_modules
+
+# Written by npm run build
+dist
+
+# Environment files for this machine alone, such as .env.local
+*.local

package/templates/react-vite/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "build": "tsc && vite build",
     "dev": "vite",
+    "diagnostics": "helix diagnostics",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -15,6 +16,7 @@
     "react-dom": "^19.2.0"
   },
   "devDependencies": {
+    "@fusion.dev/helix-cli": "^__HELIX_VERSION__",
     "@fusion.dev/helix-diagnostics": "^__HELIX_VERSION__",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",

package/templates/react-vite/src/diagnostics.ts

@@ -9,9 +9,9 @@
  * **Checked against the Helix you installed**, from the lint data it ships, so
  * nothing is loaded from the network.
  *
- * To print the findings in your terminal as well, run `npx helix diagnostics`
- * from `@fusion.dev/helix-cli` beside the dev server, and add
- * `sinks: { relay: true }` below.
+ * To print the findings in your terminal as well, run `npm run diagnostics`
+ * beside the dev server, and add `sinks: { relay: true }` below. The script
+ * runs `helix diagnostics` from `@fusion.dev/helix-cli`.
  */
 import { initDiagnostics } from '@fusion.dev/helix-diagnostics'
 import lint from '@fusion.dev/helix/lint.json'

package/templates/react-vite/src/overview.tsx

@@ -86,7 +86,7 @@ export function Overview() {
 
           {/* The footer is a row across the table: anything you slot goes at the
               start, and the table's own pagination sits at the end. */}
-          <helix-text emphasis="subtle" slot="footer" variant="caption">
+          <helix-text emphasis="muted" slot="footer" variant="caption">
             {members.length} people
           </helix-text>
         </helix-data-table>

package/templates/react-vite/src/signup-form.tsx

@@ -1,4 +1,5 @@
 import { type FormEvent, useState } from 'react'
+import { flushSync } from 'react-dom'
 import { teams } from './data.js'
 import { DOCS } from './docs.js'
 
@@ -74,14 +75,24 @@ export function SignupForm() {
             So taking the decision means refusing the change with
             `preventDefault()`, then setting the value you want. Leaving
             `setHandle` uncalled refuses nothing, and the element keeps the value
-            you meant to turn down. */}
+            you meant to turn down.
+
+            **`flushSync` puts the cleaned value on the element before the next
+            key arrives.** React renders a state update made in a custom
+            element's event in a later task. Keys sent at machine speed, by a
+            barcode scanner, a password manager, or a test, arrive before that
+            task, and each one lands in the text from before the update. Typed
+            by Playwright with no delay, `Ada L!` left the handle empty without
+            `flushSync`, and `adal` with it. */}
         <helix-input
           hint="Lowercase and hyphens, whatever you type."
           label="Handle"
           name="handle"
           onhelix-before-change={(event) => {
             event.preventDefault()
-            setHandle(event.detail.value.toLowerCase().replaceAll(/[^a-z0-9-]/g, ''))
+            flushSync(() => {
+              setHandle(event.detail.value.toLowerCase().replaceAll(/[^a-z0-9-]/g, ''))
+            })
           }}
           value={handle}
         />

package/templates/solid-vite/gitignore

@@ -0,0 +1,8 @@
+# Installed by npm install
+node_modules
+
+# Written by npm run build
+dist
+
+# Environment files for this machine alone, such as .env.local
+*.local

package/templates/solid-vite/helix-solid.d.ts

@@ -3,12 +3,13 @@
  *
  * Generated from the same manifest the API pages read, so a wrong attribute or
  * a wrong event detail is a compile error. The Solid flavor of the typings adds
- * `prop:`, `attr:`, and `on:` to every tag, beside the plain props.
+ * `prop:`, `attr:`, and `on:` to every tag, beside the plain props, and types
+ * `style` as Solid types it on a `<div>`.
+ *
+ * **A side-effect import in a `.d.ts`.** The typings augment
+ * `solid-js/jsx-runtime`, which is the JSX `jsxImportSource: "solid-js"` reads.
+ * An entry in the `types` compiler array resolves as an ambient type package,
+ * outside a package's exports map, so naming the subpath there resolves to
+ * nothing and every Helix tag comes out untyped.
  */
-import type { CustomElementsSolidJs } from '@fusion.dev/helix/jsx'
-
-declare module 'solid-js' {
-  namespace JSX {
-    interface IntrinsicElements extends CustomElementsSolidJs {}
-  }
-}
+import '@fusion.dev/helix/jsx'

package/templates/solid-vite/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "build": "tsc && vite build",
     "dev": "vite",
+    "diagnostics": "helix diagnostics",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -14,6 +15,7 @@
     "solid-js": "^1.9.15"
   },
   "devDependencies": {
+    "@fusion.dev/helix-cli": "^__HELIX_VERSION__",
     "@fusion.dev/helix-diagnostics": "^__HELIX_VERSION__",
     "typescript": "^7.0.2",
     "vite": "^8.3.0",

package/templates/solid-vite/src/diagnostics.ts

@@ -9,9 +9,9 @@
  * **Checked against the Helix you installed**, from the lint data it ships, so
  * nothing is loaded from the network.
  *
- * To print the findings in your terminal as well, run `npx helix diagnostics`
- * from `@fusion.dev/helix-cli` beside the dev server, and add
- * `sinks: { relay: true }` below.
+ * To print the findings in your terminal as well, run `npm run diagnostics`
+ * beside the dev server, and add `sinks: { relay: true }` below. The script
+ * runs `helix diagnostics` from `@fusion.dev/helix-cli`.
  */
 import { initDiagnostics } from '@fusion.dev/helix-diagnostics'
 import lint from '@fusion.dev/helix/lint.json'

package/templates/solid-vite/src/overview.tsx

@@ -77,7 +77,7 @@ export function Overview() {
 
           {/* The footer is a row across the table: anything you slot goes at the
               start, and the table's own pagination sits at the end. */}
-          <helix-text emphasis="subtle" slot="footer" variant="caption">
+          <helix-text emphasis="muted" slot="footer" variant="caption">
             {members.length} people
           </helix-text>
         </helix-data-table>

package/templates/svelte-vite/gitignore

@@ -0,0 +1,8 @@
+# Installed by npm install
+node_modules
+
+# Written by npm run build
+dist
+
+# Environment files for this machine alone, such as .env.local
+*.local

package/templates/svelte-vite/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "build": "svelte-check && vite build",
     "dev": "vite",
+    "diagnostics": "helix diagnostics",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -13,6 +14,7 @@
     "@fusion.dev/helix-styles": "^__HELIX_VERSION__"
   },
   "devDependencies": {
+    "@fusion.dev/helix-cli": "^__HELIX_VERSION__",
     "@fusion.dev/helix-diagnostics": "^__HELIX_VERSION__",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "svelte": "^5.57.1",

package/templates/svelte-vite/src/Overview.svelte

@@ -65,7 +65,7 @@
 
       <!-- The footer is a row across the table: anything you slot goes at the
            start, and the table's own pagination sits at the end. -->
-      <helix-text emphasis="subtle" slot="footer" variant="caption">
+      <helix-text emphasis="muted" slot="footer" variant="caption">
         {members.length} people
       </helix-text>
     </helix-data-table>

package/templates/svelte-vite/src/diagnostics.ts

@@ -9,9 +9,9 @@
  * **Checked against the Helix you installed**, from the lint data it ships, so
  * nothing is loaded from the network.
  *
- * To print the findings in your terminal as well, run `npx helix diagnostics`
- * from `@fusion.dev/helix-cli` beside the dev server, and add
- * `sinks: { relay: true }` below.
+ * To print the findings in your terminal as well, run `npm run diagnostics`
+ * beside the dev server, and add `sinks: { relay: true }` below. The script
+ * runs `helix diagnostics` from `@fusion.dev/helix-cli`.
  */
 import { initDiagnostics } from '@fusion.dev/helix-diagnostics'
 import lint from '@fusion.dev/helix/lint.json'

package/templates/vue-vite/gitignore

@@ -0,0 +1,8 @@
+# Installed by npm install
+node_modules
+
+# Written by npm run build
+dist
+
+# Environment files for this machine alone, such as .env.local
+*.local

package/templates/vue-vite/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "build": "vue-tsc && vite build",
     "dev": "vite",
+    "diagnostics": "helix diagnostics",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -14,6 +15,7 @@
     "vue": "^3.5.43"
   },
   "devDependencies": {
+    "@fusion.dev/helix-cli": "^__HELIX_VERSION__",
     "@fusion.dev/helix-diagnostics": "^__HELIX_VERSION__",
     "@vitejs/plugin-vue": "^6.0.9",
     "typescript": "~6.0.3",

package/templates/vue-vite/src/OverviewPage.vue

@@ -64,7 +64,7 @@ import { DOCS } from './docs.ts'
 
         <!-- The footer is a row across the table: anything you slot goes at the
              start, and the table's own pagination sits at the end. -->
-        <helix-text emphasis="subtle" slot="footer" variant="caption">
+        <helix-text emphasis="muted" slot="footer" variant="caption">
           {{ members.length }} people
         </helix-text>
       </helix-data-table>

package/templates/vue-vite/src/diagnostics.ts

@@ -9,9 +9,9 @@
  * **Checked against the Helix you installed**, from the lint data it ships, so
  * nothing is loaded from the network.
  *
- * To print the findings in your terminal as well, run `npx helix diagnostics`
- * from `@fusion.dev/helix-cli` beside the dev server, and add
- * `sinks: { relay: true }` below.
+ * To print the findings in your terminal as well, run `npm run diagnostics`
+ * beside the dev server, and add `sinks: { relay: true }` below. The script
+ * runs `helix diagnostics` from `@fusion.dev/helix-cli`.
  */
 import { initDiagnostics } from '@fusion.dev/helix-diagnostics'
 import lint from '@fusion.dev/helix/lint.json'

package/templates.json

@@ -1,61 +1 @@
-{
-  "placeholder": "__PROJECT_NAME__",
-  "templates": [
-    {
-      "description": "React and TypeScript on Vite. The shortest path to a running app.",
-      "id": "react-vite",
-      "named": [
-        "index.html",
-        "package.json"
-      ],
-      "title": "React (Vite)"
-    },
-    {
-      "description": "React and TypeScript on the Next.js App Router, with the three pages as real routes.",
-      "id": "react-nextjs",
-      "named": [
-        "app/layout.tsx",
-        "package.json"
-      ],
-      "title": "React (Next.js)"
-    },
-    {
-      "description": "Vue and TypeScript on Vite.",
-      "id": "vue-vite",
-      "named": [
-        "index.html",
-        "package.json"
-      ],
-      "title": "Vue (Vite)"
-    },
-    {
-      "description": "Angular and TypeScript on the Angular CLI.",
-      "id": "angular",
-      "named": [
-        "angular.json",
-        "package.json",
-        "src/index.html"
-      ],
-      "title": "Angular"
-    },
-    {
-      "description": "Svelte and TypeScript on Vite.",
-      "id": "svelte-vite",
-      "named": [
-        "index.html",
-        "package.json"
-      ],
-      "title": "Svelte (Vite)"
-    },
-    {
-      "description": "Solid and TypeScript on Vite.",
-      "id": "solid-vite",
-      "named": [
-        "index.html",
-        "package.json"
-      ],
-      "title": "Solid (Vite)"
-    }
-  ],
-  "version": "__HELIX_VERSION__"
-}
+{"placeholder":"__PROJECT_NAME__","templates":[{"description":"React and TypeScript on Vite. The shortest path to a running app.","id":"react-vite","named":["index.html","package.json"],"title":"React (Vite)"},{"description":"React and TypeScript on the Next.js App Router, with the three pages as real routes.","id":"react-nextjs","named":["app/layout.tsx","package.json"],"title":"React (Next.js)"},{"description":"Vue and TypeScript on Vite.","id":"vue-vite","named":["index.html","package.json"],"title":"Vue (Vite)"},{"description":"Angular and TypeScript on the Angular CLI.","id":"angular","named":["angular.json","package.json","src/index.html"],"title":"Angular"},{"description":"Svelte and TypeScript on Vite.","id":"svelte-vite","named":["index.html","package.json"],"title":"Svelte (Vite)"},{"description":"Solid and TypeScript on Vite.","id":"solid-vite","named":["index.html","package.json"],"title":"Solid (Vite)"}],"version":"__HELIX_VERSION__"}