npm - generator-white-label - Versions diffs - 9.0.0 → 10.0.0 - Mend

generator-white-label 9.0.0 → 10.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 (98) hide show

package/CLI.md +13 -17
package/EXISTING_APPLICATIONS.md +155 -0
package/PACKAGE_MANAGERS.md +6 -4
package/README.md +135 -153
package/app/404.ts +28 -0
package/app/README.md +19 -7
package/{scaffold/no-jsx/app → app}/assets/script/index.ts +1 -0
package/{scaffold/no-jsx/app → app}/assets/script/tasks/TaskView.ts +1 -1
package/app/assets/view/CodeBlock.ts +15 -0
package/app/assets/view/examples/tasks/TaskExample.ts +50 -0
package/app/assets/view/examples/tasks/task-state.ts +1 -1
package/app/assets/view/layout/SiteFooter.ts +11 -0
package/app/assets/view/layout/SiteHeader.ts +17 -0
package/app/assets/view/page-data.ts +2 -2
package/app/assets/view/sections/GettingStartedSection.ts +26 -0
package/app/assets/view/sections/HeroSection.ts +15 -0
package/app/assets/view/sections/LiveExampleSection.ts +24 -0
package/app/assets/view/sections/PackageDocsSection.ts +69 -0
package/app/assets/view/sections/{SourceGuideSection.tsx → SourceGuideSection.ts} +11 -16
package/app/index.ts +50 -0
package/cli/index.ts +4 -41
package/dist/app/404.d.ts +1 -1
package/dist/app/404.js +18 -2
package/dist/app/404.js.map +1 -1
package/dist/app/assets/script/index.d.ts +1 -6
package/dist/app/assets/script/index.js +1 -6
package/dist/app/assets/script/index.js.map +1 -1
package/dist/app/assets/script/tasks/TaskView.d.ts +1 -6
package/dist/app/assets/script/tasks/TaskView.js +2 -8
package/dist/app/assets/script/tasks/TaskView.js.map +1 -1
package/dist/app/assets/view/CodeBlock.d.ts +3 -3
package/dist/app/assets/view/CodeBlock.js +4 -2
package/dist/app/assets/view/CodeBlock.js.map +1 -1
package/dist/app/assets/view/examples/tasks/TaskExample.d.ts +2 -8
package/dist/app/assets/view/examples/tasks/TaskExample.js +41 -9
package/dist/app/assets/view/examples/tasks/TaskExample.js.map +1 -1
package/dist/app/assets/view/examples/tasks/task-state.d.ts +1 -1
package/dist/app/assets/view/examples/tasks/task-state.js.map +1 -1
package/dist/app/assets/view/layout/SiteFooter.d.ts +2 -2
package/dist/app/assets/view/layout/SiteFooter.js +8 -3
package/dist/app/assets/view/layout/SiteFooter.js.map +1 -1
package/dist/app/assets/view/layout/SiteHeader.d.ts +2 -8
package/dist/app/assets/view/layout/SiteHeader.js +14 -9
package/dist/app/assets/view/layout/SiteHeader.js.map +1 -1
package/dist/app/assets/view/page-data.d.ts +2 -2
package/dist/app/assets/view/page-data.js.map +1 -1
package/dist/app/assets/view/sections/GettingStartedSection.d.ts +1 -1
package/dist/app/assets/view/sections/GettingStartedSection.js +21 -6
package/dist/app/assets/view/sections/GettingStartedSection.js.map +1 -1
package/dist/app/assets/view/sections/HeroSection.d.ts +2 -8
package/dist/app/assets/view/sections/HeroSection.js +12 -9
package/dist/app/assets/view/sections/HeroSection.js.map +1 -1
package/dist/app/assets/view/sections/LiveExampleSection.d.ts +2 -6
package/dist/app/assets/view/sections/LiveExampleSection.js +17 -7
package/dist/app/assets/view/sections/LiveExampleSection.js.map +1 -1
package/dist/app/assets/view/sections/PackageDocsSection.d.ts +1 -1
package/dist/app/assets/view/sections/PackageDocsSection.js +57 -20
package/dist/app/assets/view/sections/PackageDocsSection.js.map +1 -1
package/dist/app/assets/view/sections/SourceGuideSection.d.ts +2 -7
package/dist/app/assets/view/sections/SourceGuideSection.js +20 -8
package/dist/app/assets/view/sections/SourceGuideSection.js.map +1 -1
package/dist/app/index.d.ts +2 -8
package/dist/app/index.js +36 -11
package/dist/app/index.js.map +1 -1
package/dist/cli/index.d.ts +0 -3
package/dist/cli/index.js +4 -36
package/dist/cli/index.js.map +1 -1
package/dist/scaffold/index.d.ts +2 -13
package/dist/scaffold/index.js +17 -53
package/dist/scaffold/index.js.map +1 -1
package/dist/scripts/build.js +97 -28
package/dist/scripts/build.js.map +1 -1
package/dist/server/handler.js +2 -9
package/dist/server/handler.js.map +1 -1
package/package.json +22 -22
package/pnpm-workspace.yaml +0 -1
package/scaffold/AGENTS.md +13 -8
package/scaffold/index.ts +17 -57
package/scripts/build.ts +90 -30
package/server/handler.ts +2 -10
package/tsconfig.site.json +1 -4
package/app/404.tsx +0 -28
package/app/assets/script/index.tsx +0 -13
package/app/assets/script/tasks/TaskView.tsx +0 -24
package/app/assets/view/CodeBlock.tsx +0 -17
package/app/assets/view/examples/tasks/TaskExample.tsx +0 -63
package/app/assets/view/layout/SiteFooter.tsx +0 -11
package/app/assets/view/layout/SiteHeader.tsx +0 -23
package/app/assets/view/sections/GettingStartedSection.tsx +0 -27
package/app/assets/view/sections/HeroSection.tsx +0 -21
package/app/assets/view/sections/LiveExampleSection.tsx +0 -29
package/app/assets/view/sections/PackageDocsSection.tsx +0 -69
package/app/index.tsx +0 -54
package/scaffold/no-jsx/README.md +0 -73
package/scaffold/no-jsx/app/404.ts +0 -10
package/scaffold/no-jsx/app/assets/view/examples/tasks/TaskExample.ts +0 -39
package/scaffold/no-jsx/app/index.ts +0 -58
package/tsconfig.site.no-jsx.json +0 -24

package/tsconfig.site.json CHANGED Viewed

@@ -11,8 +11,6 @@
     "outDir": "dist",
     "rootDir": ".",
     "resolveJsonModule": true,
-    "jsx": "react-jsx",
-    "jsxImportSource": "white-label-view",
     "types": [
       "node"
     ],
@@ -21,7 +19,6 @@
   "include": [
     "scripts/**/*.ts",
     "server/**/*.ts",
-    "app/**/*.ts",
-    "app/**/*.tsx"
+    "app/**/*.ts"
   ]
 }

package/app/404.tsx DELETED Viewed

@@ -1,28 +0,0 @@
-interface PageData {
-    cdn: string;
-    version: string;
-    www: string;
-}
-export default function NotFoundPage(data: Record<string, unknown>) {
-    const page = data as unknown as PageData;
-    return (
-        <html lang="en-US" dir="ltr">
-            <head>
-                <meta charset="utf-8" />
-                <meta name="viewport" content="width=device-width, initial-scale=1" />
-                <meta name="robots" content="noindex,follow" />
-                <title>Page not found | White Label</title>
-                <link rel="stylesheet" href={`${page.cdn}release/${page.version}/assets/style/global.css`} />
-            </head>
-            <body>
-                <a className="skip-link" href="#main">Skip to the message</a>
-                <main id="main" tabindex="-1" className="mx-auto max-w-5xl px-4 py-24 sm:px-6 lg:px-8">
-                    <h1 className="text-5xl font-extrabold tracking-tight">Page not found</h1>
-                    <p className="mt-6 text-lg">The requested page does not exist.</p>
-                    <p className="mt-6"><a className="font-bold underline" href={page.www}>Return to the White Label starter</a></p>
-                </main>
-            </body>
-        </html>
-    );
-}

package/app/assets/script/index.tsx DELETED Viewed

@@ -1,13 +0,0 @@
-/** @module app/assets/script/index */
-import {initializeTaskApplication} from './tasks/TaskApplication.js';
-/**
- * Browser entry points should stay small.
- *
- * The task application owns its own composition and lifecycle, so the entry
- * module has one obvious responsibility: start the feature for this document.
- */
-export {initializeTaskApplication} from './tasks/TaskApplication.js';
-export {normalizeTaskFilter} from './tasks/TaskRouter.js';
-initializeTaskApplication(document);

package/app/assets/script/tasks/TaskView.tsx DELETED Viewed

@@ -1,24 +0,0 @@
-import View from 'white-label-view';
-import TaskExample from '../../view/examples/tasks/TaskExample.js';
-import type {TaskState} from '../../view/examples/tasks/task-state.js';
-import type TaskModel from './TaskModel.js';
-/**
- * View owns rendering, but not application decisions.
- *
- * Passing the already-rendered task root lets View adopt useful static HTML
- * instead of replacing the document merely because JavaScript has started.
- */
-export function createTaskView(parentElement: HTMLElement, model: TaskModel): View {
-    const element = parentElement.querySelector<HTMLElement>('[data-task-app]');
-    if (!element) {throw new TypeError('Task example requires its static task-app root');}
-    return new View({
-        element,
-        model,
-        parentElement,
-        template(data) {
-            return <TaskExample state={data as TaskState} />;
-        }
-    }).initialize();
-}

package/app/assets/view/CodeBlock.tsx DELETED Viewed

@@ -1,17 +0,0 @@
-import type {JSX} from 'white-label-view/jsx-runtime';
-export const syntax = {
-    keyword: 'code-syntax-keyword',
-    type: 'code-syntax-type',
-    value: 'code-syntax-value',
-    muted: 'code-syntax-muted'
-};
-/** Render a readable code example with stable line numbers and caller-supplied syntax spans. */
-export default function CodeBlock({lines}: {lines: JSX.Element[]}) {
-    return (
-        <pre className="code-block"><code>{lines.map((line, index) => (
-            <span className="code-block__line"><span aria-hidden="true" className="code-block__number">{index + 1}</span><span>{line}</span></span>
-        ))}</code></pre>
-    );
-}

package/app/assets/view/examples/tasks/TaskExample.tsx DELETED Viewed

@@ -1,63 +0,0 @@
-import {getVisibleTasks, type TaskFilter, type TaskState} from './task-state.js';
-const filters: TaskFilter[] = ['all', 'active', 'completed'];
-/**
- * Render the task example from state only.
- *
- * The same JSX function is used twice: once while generating the initial HTML
- * and again by white-label-view in the browser. Sharing one renderer keeps the
- * static and interactive versions of the example from drifting apart.
- */
-export default function TaskExample({state}: {state: TaskState}) {
-    const visibleTasks = getVisibleTasks(state);
-    const completed = state.tasks.filter(task => task.complete).length;
-    return (
-        <section className="task-app" data-task-app aria-label="Interactive task example">
-            <form className="task-form" data-task-form action="#example" method="get">
-                <label htmlFor="task-title">New task</label>
-                <div className="task-form__controls">
-                    <input id="task-title" name="task" type="text" autocomplete="off" required />
-                    <button type="submit">Add task</button>
-                </div>
-            </form>
-            <nav className="task-filters" aria-label="Filter tasks">
-                {filters.map(filter => (
-                    <a
-                        href={`/?tasks=${filter}#example`}
-                        data-task-filter={filter}
-                        data-pushstate
-                        aria-current={state.filter === filter ? 'page' : 'false'}
-                    >
-                        {filter.charAt(0).toUpperCase()}{filter.slice(1)}
-                    </a>
-                ))}
-            </nav>
-            <ul className="task-list">
-                {visibleTasks.map(task => (
-                    <li>
-                        <label>
-                            <input
-                                type="checkbox"
-                                checked={task.complete}
-                                data-task-toggle
-                                data-task-id={task.id}
-                            />
-                            <span>{task.title}</span>
-                        </label>
-                    </li>
-                ))}
-            </ul>
-            <dl className="demo__trace">
-                <div><dt>Router</dt><dd>/?tasks={state.filter}</dd></div>
-                <div><dt>Mediator</dt><dd>task:* application events</dd></div>
-                <div><dt>Model</dt><dd>{state.tasks.length} tasks · {completed} complete</dd></div>
-                <div><dt>View</dt><dd>{visibleTasks.length} tasks rendered</dd></div>
-            </dl>
-        </section>
-    );
-}

package/app/assets/view/layout/SiteFooter.tsx DELETED Viewed

@@ -1,11 +0,0 @@
-/** A small reusable footer keeps the page template focused on page structure. */
-export default function SiteFooter() {
-    return (
-        <footer className="site-footer">
-            <div className="container site-footer__inner">
-                <p>White Label. Framework-independent TypeScript building blocks.</p>
-                <a href="#top">Back to top</a>
-            </div>
-        </footer>
-    );
-}

package/app/assets/view/layout/SiteHeader.tsx DELETED Viewed

@@ -1,23 +0,0 @@
-/**
- * Static navigation is ordinary HTML first.
- *
- * White Label's router enhances only links that opt in with data-pushstate,
- * so global navigation stays conventional, crawlable, and usable without
- * client-side JavaScript.
- */
-export default function SiteHeader() {
-    return (
-        <header className="site-header">
-            <div className="container site-header__inner">
-                <a className="wordmark" href="#top">White Label</a>
-                <nav aria-label="Primary navigation">
-                    <a href="#example">Example</a>
-                    <a href="#packages">Packages</a>
-                    <a href="#source">Source</a>
-                    <a href="#start">Get started</a>
-                    <a href="https://github.com/bshack/white-label">GitHub</a>
-                </nav>
-            </div>
-        </header>
-    );
-}

package/app/assets/view/sections/GettingStartedSection.tsx DELETED Viewed

@@ -1,27 +0,0 @@
-import CodeBlock, {syntax} from '../CodeBlock.js';
-/** Keep the shortest path from generator install to a verified local build visible. */
-export default function GettingStartedSection() {
-    return (
-        <section className="section" id="start" aria-labelledby="start-title">
-            <div className="container start-grid">
-                <div className="section-intro">
-                    <p className="eyebrow">Get started</p>
-                    <h2 id="start-title">Create a project with the generator.</h2>
-                    <p>The generated project is static-first, TypeScript-first, accessible by default, and ready for application-specific code.</p>
-                </div>
-                <div>
-                    <p className="code-label">Create a project</p>
-                    <CodeBlock lines={[<><span className={syntax.type}>npx</span> generator-white-label</>]} />
-                    <p className="code-label">Then develop</p>
-                    <CodeBlock lines={[
-                        <><span className={syntax.type}>npm</span> ci</>,
-                        <><span className={syntax.type}>npm</span> test</>,
-                        <><span className={syntax.type}>npm</span> run build -- --version=<span className={syntax.value}>local</span></>
-                    ]} />
-                    <p><a href="https://github.com/bshack/white-label#readme">Read the complete generator documentation</a></p>
-                </div>
-            </div>
-        </section>
-    );
-}

package/app/assets/view/sections/HeroSection.tsx DELETED Viewed

@@ -1,21 +0,0 @@
-/**
- * Marketing content can stay a plain JSX function.
- *
- * White Label does not require every piece of markup to become a stateful
- * View instance. Use View where lifecycle or observable state is useful;
- * keep static presentation simple.
- */
-export default function HeroSection() {
-    return (
-        <section className="hero" id="top" aria-labelledby="hero-title">
-            <div className="container hero__inner">
-                <h1 id="hero-title">Small pieces.<br />Complete applications.</h1>
-                <p className="hero__lede">Framework-independent TypeScript packages for state, rendering, coordination, routing, and project generation.</p>
-                <div className="hero__links">
-                    <a className="primary-link" href="#example">See the example</a>
-                    <a href="#start">Install the generator</a>
-                </div>
-            </div>
-        </section>
-    );
-}

package/app/assets/view/sections/LiveExampleSection.tsx DELETED Viewed

@@ -1,29 +0,0 @@
-import TaskExample from '../examples/tasks/TaskExample.js';
-import {createInitialTaskState, describeTaskStatus} from '../examples/tasks/task-state.js';
-/**
- * The initial task UI is rendered at build time with the same JSX used later
- * by white-label-view in the browser. JavaScript adds behavior; it does not
- * need to invent the initial document.
- */
-export default function LiveExampleSection() {
-    const state = createInitialTaskState();
-    return (
-        <section className="section" id="example" aria-labelledby="example-title">
-            <div className="container">
-                <div className="section-intro">
-                    <p className="eyebrow">Live example</p>
-                    <h2 id="example-title">Four packages. One small application.</h2>
-                    <p>Add a task, toggle its state, or change the filter. Router translates the URL into intent, Mediator coordinates actions, Model owns state, and View keeps the interface in sync.</p>
-                </div>
-                <div className="demo" data-task-example>
-                    <TaskExample state={state} />
-                    <p className="visually-hidden" role="status" aria-live="polite" aria-atomic="true" data-task-status>
-                        {describeTaskStatus(state)}
-                    </p>
-                </div>
-            </div>
-        </section>
-    );
-}

package/app/assets/view/sections/PackageDocsSection.tsx DELETED Viewed

@@ -1,69 +0,0 @@
-import CodeBlock, {syntax} from '../CodeBlock.js';
-const repositories = {
-    mediator: 'https://github.com/bshack/white-label-mediator',
-    model: 'https://github.com/bshack/white-label-model',
-    router: 'https://github.com/bshack/white-label-router',
-    view: 'https://github.com/bshack/white-label-view'
-};
-/** Package documentation stays close to the example it describes. */
-export default function PackageDocsSection() {
-    return (
-        <section className="section" id="packages" aria-labelledby="packages-title">
-            <div className="container">
-                <div className="section-intro">
-                    <p className="eyebrow">Documentation</p>
-                    <h2 id="packages-title">The core flow stays explicit.</h2>
-                    <p>Each package has one job, can be used independently, and stays easy to replace or test because application concerns are not hidden behind a framework.</p>
-                </div>
-                <div className="architecture"><ol>
-                    <li><strong>Router</strong><span>turns a URL into application intent</span></li>
-                    <li><strong>Mediator</strong><span>coordinates that intent between modules</span></li>
-                    <li><strong>Model</strong><span>stores and publishes application state</span></li>
-                    <li><strong>View</strong><span>renders the resulting interface</span></li>
-                </ol></div>
-                <div className="docs-grid">
-                    <article>
-                        <p className="eyebrow">Model</p><h3>State is observable, not magical.</h3>
-                        <CodeBlock lines={[
-                            <><span className={syntax.keyword}>const</span> model = <span className={syntax.keyword}>new</span> <span className={syntax.type}>Model</span>({'{'}count: 0{'}'});</>,
-                            <>model.addEventListener(<span className={syntax.value}>'change'</span>, event =&gt; render(event.detail));</>,
-                            <>model.update({'{'}count: 1{'}'});</>
-                        ]} />
-                        <p><a href={repositories.model}>Model documentation</a></p>
-                    </article>
-                    <article>
-                        <p className="eyebrow">View</p><h3>JSX renders through White Label.</h3>
-                        <CodeBlock lines={[
-                            <><span className={syntax.keyword}>const</span> view = <span className={syntax.keyword}>new</span> <span className={syntax.type}>View</span>({'{'}</>,
-                            <>  model,</>,
-                            <>  template: state =&gt; &lt;p&gt;{'{'}state.count{'}'}&lt;/p&gt;</>,
-                            <>{'}'}).initialize();</>
-                        ]} />
-                        <p><a href={repositories.view}>View documentation</a></p>
-                    </article>
-                    <article>
-                        <p className="eyebrow">Mediator</p><h3>Modules communicate through events.</h3>
-                        <CodeBlock lines={[
-                            <>mediator.addEventListener(<span className={syntax.value}>'counter:increment'</span>, increment);</>,
-                            <>mediator.dispatchEvent(<span className={syntax.keyword}>new</span> <span className={syntax.type}>CustomEvent</span>(<span className={syntax.value}>'counter:increment'</span>));</>
-                        ]} />
-                        <p><a href={repositories.mediator}>Mediator documentation</a></p>
-                    </article>
-                    <article>
-                        <p className="eyebrow">Router</p><h3>Routes describe intent.</h3>
-                        <CodeBlock lines={[
-                            <>router.routes = {'{'}</>,
-                            <>  <span className={syntax.value}>'/'</span>: (_scope, location) =&gt; {'{'}</>,
-                            <>    mediator.dispatchEvent(<span className={syntax.keyword}>new</span> <span className={syntax.type}>CustomEvent</span>(<span className={syntax.value}>'filter:set'</span>, {'{'}detail: location.data.query.filter{'}'}));</>,
-                            <>  {'}'}</>,
-                            <>{'}'};</>
-                        ]} />
-                        <p><a href={repositories.router}>Router documentation</a></p>
-                    </article>
-                </div>
-            </div>
-        </section>
-    );
-}

package/app/index.tsx DELETED Viewed

@@ -1,54 +0,0 @@
-import {raw} from 'white-label-view/jsx-runtime';
-import SiteFooter from './assets/view/layout/SiteFooter.js';
-import SiteHeader from './assets/view/layout/SiteHeader.js';
-import type {PageData} from './assets/view/page-data.js';
-import GettingStartedSection from './assets/view/sections/GettingStartedSection.js';
-import HeroSection from './assets/view/sections/HeroSection.js';
-import LiveExampleSection from './assets/view/sections/LiveExampleSection.js';
-import PackageDocsSection from './assets/view/sections/PackageDocsSection.js';
-import SourceGuideSection from './assets/view/sections/SourceGuideSection.js';
-/**
- * The page template is intentionally thin.
- *
- * Developers learning White Label can start here to see the complete page at
- * a glance, then follow each import into a focused example. Build-time data is
- * kept at this boundary while individual views stay reusable and easy to read.
- */
-export default function IndexPage(data: Record<string, unknown>) {
-    const page = data as unknown as PageData;
-    const structuredData = JSON.stringify(page.structuredData).replaceAll('<', '\\u003c');
-    return (
-        <html id="index" lang="en-US" dir="ltr">
-            <head>
-                <meta charset="utf-8" />
-                <meta name="viewport" content="width=device-width, initial-scale=1" />
-                <title>{page.title}</title>
-                <meta name="description" content={page.meta.description} />
-                <meta name="robots" content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1" />
-                <link rel="canonical" href={`${page.siteUrl}/`} />
-                <meta property="og:title" content={page.title} />
-                <meta property="og:description" content={page.meta.description} />
-                <meta property="og:type" content="website" />
-                <meta property="og:url" content={`${page.siteUrl}/`} />
-                <link rel="stylesheet" href={`${page.cdn}release/${page.version}/assets/style/global.css`} media="all" />
-                <link rel="stylesheet" href={`${page.cdn}release/${page.version}/assets/style/print.css`} media="print" />
-                <script type="application/ld+json">{raw(structuredData)}</script>
-            </head>
-            <body itemscope itemtype="https://schema.org/WebPage">
-                <a className="skip-link" href="#main">Skip to content</a>
-                <SiteHeader />
-                <main id="main" tabindex="-1">
-                    <HeroSection />
-                    <LiveExampleSection />
-                    <PackageDocsSection />
-                    <SourceGuideSection />
-                    <GettingStartedSection />
-                </main>
-                <SiteFooter />
-                <script src={`${page.cdn}release/${page.version}/assets/script/index.compiled.js`} defer />
-            </body>
-        </html>
-    );
-}

package/scaffold/no-jsx/README.md DELETED Viewed

@@ -1,73 +0,0 @@
-# White Label generated site
-This project was generated with the **plain TypeScript / no-JSX** template option.
-- Pages and views are `.ts` files.
-- Templates return HTML strings instead of using JSX/TSX syntax.
-- React is not required.
-- White Label Model, View, Router, and Mediator are used the same way as in the JSX template.
-- npm, Yarn, and pnpm are supported.
-This scaffold is also the right starting point when you want a third-party template engine. Install the renderer your application uses, then call it from the View `template` function instead of returning a hand-built string. White Label does not require a renderer adapter or change the rest of the application architecture.
-See [Template engines and JSX options](https://whitelabeljs.org/docs/view/#template-engines) for the tested third-party engines, examples, rendering contract, and escaping/security guidance.
-## Commands
-Use the package manager you prefer:
-```sh
-npm install
-npm run build
-npm test
-```
-```sh
-yarn install
-yarn build
-yarn test
-```
-```sh
-pnpm install
-pnpm build
-pnpm test
-```
-## Simple View click event
-View lifecycle hooks can own a browser listener directly:
-```ts
-import View from 'white-label-view';
-class ButtonView extends View {
-    handleClick = () => {
-        console.log('Clicked');
-    };
-    addListeners() {
-        this.element.addEventListener('click', this.handleClick);
-        return this;
-    }
-    removeListeners() {
-        this.element.removeEventListener('click', this.handleClick);
-        return this;
-    }
-}
-```
-The same callback reference is used for both registration and cleanup. View calls `removeListeners()` before replacement or destruction.
-## Serverless / function runtimes
-`server/handler.ts` is the same provider-neutral serverless example included in the JSX scaffold. It uses Web `Request` and `Response`, request-scoped Model/View/Router/Mediator instances, and the server View entrypoint; it does not require JSX or a provider SDK.
-Keep immutable configuration at module scope when useful, but create mutable White Label instances per request unless shared state is explicitly intended. Warm serverless processes may handle many requests, so module-level mutable application state can leak data between invocations.
-Use a thin cloud adapter around the handler when a platform does not expose Web `Request`/`Response` directly. The generated tests exercise repeated and concurrent requests, browser-global absence, Web-target bundling, and serverless bundle/startup budgets.
-The Web-target bundle check is a portability smoke test, not a blanket claim of compatibility with every edge runtime. Verify the provider runtime you deploy to.
-If you prefer JSX syntax for templates, generate a new project with `--jsx` or answer **Yes** to the generator's JSX question. JSX and no-JSX projects provide equivalent White Label functionality; the choice is about template syntax and renderer ownership.

package/scaffold/no-jsx/app/404.ts DELETED Viewed

@@ -1,10 +0,0 @@
-interface PageData {cdn: string; siteUrl: string; title: string; version: string}
-function escapeHtml(value: unknown): string {
-    return String(value).replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#39;');
-}
-export default function NotFoundPage(data: Record<string, unknown>): string {
-    const page = data as unknown as PageData;
-    return `<html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Page not found | ${escapeHtml(page.title)}</title><meta name="robots" content="noindex,follow"><link rel="stylesheet" href="${escapeHtml(page.cdn)}release/${escapeHtml(page.version)}/assets/style/global.css"></head><body><a class="skip-link" href="#main">Skip to the message</a><main id="main" tabindex="-1"><h1>Page not found</h1><p>The requested page could not be found.</p><p><a href="${escapeHtml(page.siteUrl)}/">Return home</a></p></main></body></html>`;
-}

package/scaffold/no-jsx/app/assets/view/examples/tasks/TaskExample.ts DELETED Viewed

@@ -1,39 +0,0 @@
-import {getVisibleTasks, type TaskFilter, type TaskState} from './task-state.js';
-const filters: TaskFilter[] = ['all', 'active', 'completed'];
-function escapeHtml(value: unknown): string {
-    return String(value)
-        .replaceAll('&', '&amp;')
-        .replaceAll('<', '&lt;')
-        .replaceAll('>', '&gt;')
-        .replaceAll('"', '&quot;')
-        .replaceAll("'", '&#39;');
-}
-/** Render the task example with plain TypeScript and HTML strings. */
-export default function TaskExample({state}: {state: TaskState}): string {
-    const visibleTasks = getVisibleTasks(state);
-    const completed = state.tasks.filter(task => task.complete).length;
-    const filterLinks = filters.map(filter => `
-        <a href="/?tasks=${filter}#example" data-task-filter="${filter}" data-pushstate aria-current="${state.filter === filter ? 'page' : 'false'}">${filter.charAt(0).toUpperCase()}${filter.slice(1)}</a>
-    `).join('');
-    const tasks = visibleTasks.map(task => `
-        <li><label><input type="checkbox" ${task.complete ? 'checked ' : ''}data-task-toggle data-task-id="${task.id}"><span>${escapeHtml(task.title)}</span></label></li>
-    `).join('');
-    return `<section class="task-app" data-task-app aria-label="Interactive task example">
-        <form class="task-form" data-task-form action="#example" method="get">
-            <label for="task-title">New task</label>
-            <div class="task-form__controls"><input id="task-title" name="task" type="text" autocomplete="off" required><button type="submit">Add task</button></div>
-        </form>
-        <nav class="task-filters" aria-label="Filter tasks">${filterLinks}</nav>
-        <ul class="task-list">${tasks}</ul>
-        <dl class="demo__trace">
-            <div><dt>Router</dt><dd>/?tasks=${state.filter}</dd></div>
-            <div><dt>Mediator</dt><dd>task:* application events</dd></div>
-            <div><dt>Model</dt><dd>${state.tasks.length} tasks · ${completed} complete</dd></div>
-            <div><dt>View</dt><dd>${visibleTasks.length} tasks rendered</dd></div>
-        </dl>
-    </section>`;
-}

package/scaffold/no-jsx/app/index.ts DELETED Viewed

@@ -1,58 +0,0 @@
-import TaskExample from './assets/view/examples/tasks/TaskExample.js';
-import {createInitialTaskState, describeTaskStatus} from './assets/view/examples/tasks/task-state.js';
-interface PageData {
-    cdn: string;
-    meta: {description: string};
-    siteUrl: string;
-    structuredData: Record<string, unknown>;
-    title: string;
-    version: string;
-}
-function escapeHtml(value: unknown): string {
-    return String(value)
-        .replaceAll('&', '&amp;')
-        .replaceAll('<', '&lt;')
-        .replaceAll('>', '&gt;')
-        .replaceAll('"', '&quot;')
-        .replaceAll("'", '&#39;');
-}
-/** Render the generated starter using plain TypeScript and HTML strings. */
-export default function IndexPage(data: Record<string, unknown>): string {
-    const page = data as unknown as PageData;
-    const taskState = createInitialTaskState();
-    const taskExample = TaskExample({state: taskState});
-    const taskStatus = describeTaskStatus(taskState);
-    const structuredData = JSON.stringify(page.structuredData).replaceAll('<', '\\u003c');
-    return `<html id="index" lang="en-US" dir="ltr">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>${escapeHtml(page.title)}</title>
-<meta name="description" content="${escapeHtml(page.meta.description)}">
-<meta name="robots" content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1">
-<link rel="canonical" href="${escapeHtml(page.siteUrl)}/">
-<meta property="og:title" content="${escapeHtml(page.title)}">
-<meta property="og:description" content="${escapeHtml(page.meta.description)}">
-<meta property="og:type" content="website">
-<meta property="og:url" content="${escapeHtml(page.siteUrl)}/">
-<link rel="stylesheet" href="${escapeHtml(page.cdn)}release/${escapeHtml(page.version)}/assets/style/global.css" media="all">
-<link rel="stylesheet" href="${escapeHtml(page.cdn)}release/${escapeHtml(page.version)}/assets/style/print.css" media="print">
-<script type="application/ld+json">${structuredData}</script>
-</head>
-<body itemscope itemtype="https://schema.org/WebPage">
-<a class="skip-link" href="#main">Skip to content</a>
-<header><nav aria-label="Primary"><a href="/">White Label</a></nav></header>
-<main id="main" tabindex="-1">
-<section class="hero"><p class="eyebrow">White Label starter</p><h1>Composable web primitives without a framework lock-in.</h1><p>State, rendering, routing, and application events stay small, explicit, and independently understandable.</p></section>
-<section id="example" data-task-example><h2>Interactive task example</h2>${taskExample}<p class="visually-hidden" role="status" aria-live="polite" aria-atomic="true" data-task-status>${escapeHtml(taskStatus)}</p></section>
-<section><h2>Plain TypeScript templates</h2><p>This project was generated without JSX. Pages and views return HTML strings from ordinary TypeScript functions.</p></section>
-</main>
-<footer><p>Built with White Label.</p></footer>
-<script src="${escapeHtml(page.cdn)}release/${escapeHtml(page.version)}/assets/script/index.compiled.js" defer></script>
-</body>
-</html>`;
-}

package/tsconfig.site.no-jsx.json DELETED Viewed

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "strict": true,
-    "esModuleInterop": true,
-    "declaration": true,
-    "sourceMap": true,
-    "inlineSources": true,
-    "outDir": "dist",
-    "rootDir": ".",
-    "resolveJsonModule": true,
-    "types": [
-      "node"
-    ],
-    "noEmitOnError": true
-  },
-  "include": [
-    "scripts/**/*.ts",
-    "server/**/*.ts",
-    "app/**/*.ts"
-  ]
-}