@valancex/cli 0.12.0 → 0.13.0

package/templates/desktop/README.md

@@ -0,0 +1,14 @@
+# {{name}}
+
+A VALANCE application for the desktop, made with `vlx init --desktop`.
+
+```console
+$ {{run}} dev      # open the window, and update it as you edit
+$ {{run}} build    # write the engine to dist/desktop/
+$ {{run}} check    # find mistakes in your files without building
+```
+
+- `content/` is Markdown: a page's path is its address.
+- `src/layout.mprx` is the window around a page; `src/main.ts` declares it, the state and the commands.
+- `valance.desktop.json` marks the project as a desktop one; `valance.json` names the application.
+- The window is the Desktop PORT's (`valancex-port-desktop`); `vlx build` writes the engine it runs, `dist/desktop/engine.mjs`.

package/templates/desktop/content/404.md

@@ -0,0 +1,7 @@
+---
+title: Not found
+---
+
+# Not found
+
+There is no page at that address. Go back to the [first page](/).

package/templates/desktop/content/guide/getting-started.md

@@ -0,0 +1,15 @@
+---
+title: Getting started
+description: Create the project, run it, change a page.
+order: 1
+---
+
+# Getting started
+
+Edit `content/index.md` and save: the window shows it.
+
+> A link is an address. In a window, following one is the application's own navigation, the same command the web uses.
+
+1. Add a page: a Markdown file under `content/`.
+2. Change the window: `src/layout.mprx`, with the components `column`, `row`, `heading`, `text`, `button`, `checkbox` and `textfield`.
+3. Add state or a command: `src/main.ts`.

package/templates/desktop/content/index.md

@@ -0,0 +1,14 @@
+---
+title: {{name}}
+description: A desktop application, written the way a VALANCE application is written.
+---
+
+# {{name}}
+
+This is a **VALANCE application** in a window. Everything you are reading is a Markdown file in `content/`; the window around it is `src/layout.mprx`.
+
+- Pages are Markdown files. Their path is their address.
+- The layout is a template, drawn with the Desktop PORT's components.
+- `vlx dev` opens the window and updates it as you edit.
+
+Start with [Getting started](/guide/getting-started).

package/templates/desktop/gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.valance
+.work*

package/templates/desktop/src/layout.mprx

@@ -0,0 +1,23 @@
+<column>
+  <row>
+    <button disabled={!canGoBack} on.click={back()}>Back</button>
+    <button disabled={!canGoForward} on.click={forward()}>Forward</button>
+    <link href={home}>{site}</link>
+    <button on.click={toggleNavigation()}>{#if navigation}Hide pages{:else}Show pages{/if}</button>
+  </row>
+  {#if navigation}
+    {#each sections as s (s.id)}
+      <column>
+        {#if s.title != ""}<text>{s.title}</text>{/if}
+        <list ordered={false}>
+          {#each s.items as n (n.id)}<listitem><link href={n.href}>{n.label}</link></listitem>{/each}
+        </list>
+      </column>
+    {/each}
+  {/if}
+  <blocks items={blocks} />
+  <row>
+    {#if prev.href != ""}<link href={prev.href}>{prev.label}</link>{/if}
+    {#if next.href != ""}<link href={next.href}>{next.label}</link>{/if}
+  </row>
+</column>

package/templates/desktop/src/main.ts

@@ -0,0 +1,15 @@
+import { component, defineApp, field } from "@valancex/common";
+import { Schema } from "effect";
+import layout from "./layout.mprx";
+
+// The application, from the top. `layout` is the window's content around a page; the Markdown in content/ is what goes in `<blocks>`. The state is the application's own, beyond "which page is
+// shown": each field is its type and its default, together. A field is a name the layout can read (`navigation`), and the commands below are names it can run (`toggleNavigation()`).
+export default defineApp({
+  layout: component(layout),
+  state: {
+    navigation: field(Schema.Boolean, true),
+  },
+  commands: (command) => ({
+    toggleNavigation: command((state) => ({ ...state, navigation: !state.navigation })),
+  }),
+});

package/templates/desktop/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "types": ["node"],
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "lib": ["ES2022"],
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "allowArbitraryExtensions": true,
+    "rootDirs": ["src", ".valance/types"]
+  },
+  "include": ["src"]
+}

package/templates/multi/README.md

@@ -0,0 +1,13 @@
+# {{name}}
+
+A VALANCE application for the web and the desktop, made with `vlx init --web --desktop`.
+
+```console
+$ {{run}} dev -- --web       # serve the site (--desktop opens the window instead)
+$ {{run}} build              # build every target: dist/web/ and dist/desktop/
+$ {{run}} check              # find mistakes in your files, for every target
+```
+
+- `content/` is Markdown, and the state and commands in `src/main.ts` are the application's: the same on every target.
+- Each target has its own templates, because each draws with its own vocabulary: `src/web/` and `src/desktop/`. `src/main.ts` says which is whose (`targets`).
+- `valance.web.json` and `valance.desktop.json` say which targets the project has; `valance.json` names the application.

package/templates/multi/content/404.md

@@ -0,0 +1,7 @@
+---
+title: Not found
+---
+
+# Not found
+
+There is no page at that address. Go back to the [first page](/).

package/templates/multi/content/guide/getting-started.md

@@ -0,0 +1,15 @@
+---
+title: Getting started
+description: Create the project, run it, change a page.
+order: 1
+---
+
+# Getting started
+
+Edit `content/index.md` and save: the window shows it.
+
+> A link is an address. In a window, following one is the application's own navigation, the same command the web uses.
+
+1. Add a page: a Markdown file under `content/`.
+2. Change the window: `src/layout.mprx`, with the components `column`, `row`, `heading`, `text`, `button`, `checkbox` and `textfield`.
+3. Add state or a command: `src/main.ts`.

package/templates/multi/content/index.md

@@ -0,0 +1,14 @@
+---
+title: {{name}}
+description: A desktop application, written the way a VALANCE application is written.
+---
+
+# {{name}}
+
+This is a **VALANCE application** in a window. Everything you are reading is a Markdown file in `content/`; the window around it is `src/layout.mprx`.
+
+- Pages are Markdown files. Their path is their address.
+- The layout is a template, drawn with the Desktop PORT's components.
+- `vlx dev --desktop` opens the window and updates it as you edit.
+
+Start with [Getting started](/guide/getting-started).

package/templates/multi/src/desktop/layout.mprx

@@ -0,0 +1,21 @@
+<column>
+  <row>
+    <link href={home}>{site}</link>
+    <button on.click={toggleNavigation()}>{#if navigation}Hide pages{:else}Show pages{/if}</button>
+  </row>
+  {#if navigation}
+    {#each sections as s (s.id)}
+      <column>
+        {#if s.title != ""}<text>{s.title}</text>{/if}
+        <list ordered={false}>
+          {#each s.items as n (n.id)}<listitem><link href={n.href}>{n.label}</link></listitem>{/each}
+        </list>
+      </column>
+    {/each}
+  {/if}
+  <blocks items={blocks} />
+  <row>
+    {#if prev.href != ""}<link href={prev.href}>{prev.label}</link>{/if}
+    {#if next.href != ""}<link href={next.href}>{next.label}</link>{/if}
+  </row>
+</column>

package/templates/multi/src/main.ts

@@ -0,0 +1,23 @@
+import { component, defineApp, field } from "@valancex/common";
+import { Schema } from "effect";
+import desktopLayout from "./desktop/layout.mprx";
+import themeToggle from "./web/theme-toggle.js";
+import webLayout from "./web/layout.mprx";
+
+// One application, built for each target the project has. What is shared is written once, here: the state (each field is its type and its default, together) and the commands, and the content in
+// content/. What differs is the templates, because each target draws with its own vocabulary: `targets` gives each its layout and its components. Nothing under src/ is part of the application
+// unless it is imported here and listed.
+export default defineApp({
+  state: {
+    theme: field(Schema.Literal("light", "dark"), "light"), // the web layout's
+    navigation: field(Schema.Boolean, true), // the desktop layout's
+  },
+  commands: (command) => ({
+    toggleTheme: command((state) => ({ ...state, theme: state.theme === "light" ? "dark" : "light" })),
+    toggleNavigation: command((state) => ({ ...state, navigation: !state.navigation })),
+  }),
+  targets: {
+    web: { layout: component(webLayout), components: [themeToggle] },
+    desktop: { layout: component(desktopLayout) },
+  },
+});

package/templates/multi/src/web/layout.mprx

@@ -0,0 +1,27 @@
+<shell class="layout" theme={theme}>
+  <header class="bar">
+    <link class="brand" href={home} current="false">{site}</link>
+    <theme-toggle theme={theme} on.toggle={toggleTheme()} />
+  </header>
+  <div class="frame">
+    <nav class="sidebar" label="Pages">
+      {#each sections as s (s.id)}
+        <section>
+          {#if s.title != ""}<para class="nav-title">{s.title}</para>{/if}
+          <list class="nav-list">
+            {#each s.items as n (n.id)}
+              <item><link class="nav-link" href={n.href} current={n.current}>{n.label}</link></item>
+            {/each}
+          </list>
+        </section>
+      {/each}
+    </nav>
+    <main id="content" tabindex="-1">
+      <blocks items={blocks} />
+      <nav class="pager" label="Previous and next page">
+        {#if prev.href != ""}<link class="pager-link" href={prev.href} current="false">{prev.label}</link>{/if}
+        {#if next.href != ""}<link class="pager-link" href={next.href} current="false">{next.label}</link>{/if}
+      </nav>
+    </main>
+  </div>
+</shell>

package/templates/multi/src/web/styles.css

@@ -0,0 +1,28 @@
+:root { --bg: #fff; --fg: #1d2330; --muted: #5c6578; --line: #e3e6ee; --accent: #5b3fd6; --code: #f4f5f9; }
+[data-theme="dark"] { --bg: #12141b; --fg: #e8eaf1; --muted: #9aa3b8; --line: #272b38; --accent: #a78bfa; --code: #1b1e29; }
+
+* { box-sizing: border-box; }
+body { margin: 0; font: 16px/1.6 system-ui, sans-serif; background: var(--bg); color: var(--fg); }
+.layout { min-height: 100vh; background: var(--bg); color: var(--fg); }
+
+.bar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--line); }
+.brand { font-weight: 700; color: var(--fg); text-decoration: none; }
+.theme-toggle { font: inherit; padding: 0.25rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; }
+
+.frame { display: grid; grid-template-columns: 14rem 1fr; gap: 2rem; max-width: 60rem; margin: 0 auto; padding: 1.5rem; }
+.sidebar { font-size: 0.95rem; }
+.nav-title { margin: 1rem 0 0.25rem; font-weight: 600; color: var(--muted); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }
+.nav-list { list-style: none; margin: 0; padding: 0; }
+.nav-link { display: block; padding: 0.15rem 0; color: var(--fg); text-decoration: none; }
+.nav-link[aria-current="page"] { color: var(--accent); font-weight: 600; }
+
+main { min-width: 0; }
+main h1 { margin-top: 0; }
+a { color: var(--accent); }
+.code { padding: 1rem; overflow-x: auto; background: var(--code); border-radius: 0.5rem; }
+code { font-family: ui-monospace, monospace; font-size: 0.9em; }
+.quote { margin: 1rem 0; padding-left: 1rem; border-left: 3px solid var(--accent); color: var(--muted); }
+.picture { max-width: 100%; }
+.pager { display: flex; justify-content: space-between; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); }
+
+@media (max-width: 40rem) { .frame { grid-template-columns: 1fr; } }

package/templates/multi/src/web/theme-toggle.mprx

@@ -0,0 +1 @@
+<button class="theme-toggle" pressed={theme == "dark" ? "true" : "false"} on.click={toggle()}>{theme == "dark" ? "Light" : "Dark"}</button>

package/templates/multi/src/web/theme-toggle.ts

@@ -0,0 +1,10 @@
+import { component } from "@valancex/common";
+import { Schema } from "effect";
+import template from "./theme-toggle.mprx";
+
+// The interface of `<theme-toggle>`, stated once, where it is defined: what the template reads (`theme`) and what it raises (`toggle`, which carries nothing). Whoever uses it names only that
+// they use it. `.valance/templates.d.ts` gives the template its keys as a type, so a contract that disagrees with the template is an error in the editor.
+export default component(template, {
+  props: { theme: Schema.Literal("light", "dark") },
+  events: { toggle: Schema.Void },
+});

package/templates/web/content/guide/getting-started.md

@@ -21,7 +21,7 @@ Open the address `vlx dev` prints. Edit this file and save: the page reloads wit
 pnpm build
 ```
 
-The finished site is in `dist/`. Anything that serves files can host it.
+The finished site is in `dist/web/`. Anything that serves files can host it.
 
 ## Where things are
 

package/views/block.mprx

@@ -1,3 +1,3 @@
 <mesh-fragment>
-  {#if b.kind == "heading"}<heading level={b.level} anchor={b.anchor} spans={b.spans} />{:else if b.kind == "list"}<list-block ordered={b.ordered} items={b.items} />{:else if b.kind == "code"}<pre class="code" tabindex="0"><code>{b.text}</code></pre>{:else if b.kind == "quote"}<quote class="quote"><runs spans={b.spans} /></quote>{:else if b.kind == "image"}<image class="picture" src={b.src} alt={b.alt} loading="lazy" />{:else}<para class="prose"><runs spans={b.spans} /></para>{/if}
+  {#if b.kind == "heading"}<heading-block level={b.level} anchor={b.anchor} spans={b.spans} />{:else if b.kind == "list"}<list-block ordered={b.ordered} items={b.items} />{:else if b.kind == "code"}<pre class="code" tabindex="0"><code>{b.text}</code></pre>{:else if b.kind == "quote"}<quote class="quote"><runs spans={b.spans} /></quote>{:else if b.kind == "image"}<image class="picture" src={b.src} alt={b.alt} loading="lazy" />{:else}<para class="prose"><runs spans={b.spans} /></para>{/if}
 </mesh-fragment>

package/views-desktop/block.mprx

@@ -0,0 +1,3 @@
+<mesh-fragment>
+  {#if b.kind == "heading"}<heading level={b.level}><runs spans={b.spans} /></heading>{:else if b.kind == "list"}<list-block ordered={b.ordered} items={b.items} />{:else if b.kind == "code"}<code>{b.text}</code>{:else if b.kind == "quote"}<blockquote><runs spans={b.spans} /></blockquote>{:else if b.kind == "image"}<image src={b.src} label={b.alt} />{:else}<paragraph><runs spans={b.spans} /></paragraph>{/if}
+</mesh-fragment>

package/views-desktop/blocks.mprx

@@ -0,0 +1,3 @@
+<mesh-fragment>
+  {#each items as b (b.id)}<block b={b} />{/each}
+</mesh-fragment>

package/views-desktop/inline.mprx

@@ -0,0 +1,3 @@
+<mesh-fragment>
+  {#if kind == "strong"}<strong>{text}</strong>{:else if kind == "emphasis"}<emphasis>{text}</emphasis>{:else if kind == "code"}<code>{text}</code>{:else if kind == "link"}<link href={href}>{text}</link>{:else}<mesh-fragment>{text}</mesh-fragment>{/if}
+</mesh-fragment>

package/views-desktop/layout.mprx

@@ -0,0 +1,20 @@
+<column>
+  <row>
+    <button disabled={!canGoBack} on.click={back()}>Back</button>
+    <button disabled={!canGoForward} on.click={forward()}>Forward</button>
+    <link href={home}>{site}</link>
+  </row>
+  {#each sections as s (s.id)}
+    <column>
+      {#if s.title != ""}<text>{s.title}</text>{/if}
+      <list ordered={false}>
+        {#each s.items as n (n.id)}<listitem><link href={n.href}>{n.label}</link></listitem>{/each}
+      </list>
+    </column>
+  {/each}
+  <blocks items={blocks} />
+  <row>
+    {#if prev.href != ""}<link href={prev.href}>{prev.label}</link>{/if}
+    {#if next.href != ""}<link href={next.href}>{next.label}</link>{/if}
+  </row>
+</column>

package/views-desktop/list-block.mprx

@@ -0,0 +1,3 @@
+<mesh-fragment>
+  <list ordered={ordered}><list-items items={items} /></list>
+</mesh-fragment>

package/views-desktop/list-items.mprx

@@ -0,0 +1,3 @@
+<mesh-fragment>
+  {#each items as i (i.id)}<listitem><runs spans={i.spans} /></listitem>{/each}
+</mesh-fragment>

package/views-desktop/runs.mprx

@@ -0,0 +1,3 @@
+<mesh-fragment>
+  {#each spans as s (s.id)}<inline kind={s.kind} text={s.text} href={s.href} />{/each}
+</mesh-fragment>