@ethlete/cli 2.1.0-next.7 → 2.1.0-next.9

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @ethlete/cli
 
+## 2.1.0-next.9
+
+### Minor Changes
+
+- `et update` now writes the new range into every `package.json` in the repo, not only the root one, and refuses a dist tag that points at an older version than the repo is on.
+- `et design [checkout]` serves the design page of any repository that keeps a `.ethlete/design`
+  folder, and `et design check` says why a call does not render.
+
+### Patch Changes
+
+- `et release` now works with Changesets 3 and aborts when there are no pending changesets.
+- `et design` now rules a drawing with its own Tailwind 4 pipeline, so a repository on Tailwind 3, or none at all, can hold design calls.
+- `et design check --call` now reports `NO BROWSER` when neither the checkout nor the package
+  resolves `playwright`, instead of throwing the module loader's own error.
+
+## 2.1.0-next.8
+
+### Minor Changes
+
+- [#3075](https://github.com/ethlete-io/ethdk/pull/3075) [`004c32d`](https://github.com/ethlete-io/ethdk/commit/004c32d0ada3d7862947843dd6e8b204876160fe) Thanks [@github-actions](https://github.com/apps/github-actions)! - `doctorCommand` accepts an optional `composeTools` override for the container-engine check.
+
+- [#3075](https://github.com/ethlete-io/ethdk/pull/3075) [`1d38e7e`](https://github.com/ethlete-io/ethdk/commit/1d38e7e0a025769f065d8ca7d506cb75ad89139a) Thanks [@github-actions](https://github.com/apps/github-actions)! - `et update` moves the `@ethlete/*` packages to a newer version, runs the codemods those versions
+  declare in their own `migrations.json`, and reports what needs a decision or an agent.
+
 ## 2.1.0-next.7
 
 ### Patch Changes

package/README.md

@@ -34,6 +34,40 @@ The token is checked against the host first: once for the token itself, and once
 `403` there, and nothing is written. A token the file already holds for that host is replaced only
 after a question. `--force` skips both.
 
+## `et update`
+
+Moves this repo's `@ethlete/*` dependencies to a newer version and runs the migrations those versions
+ship.
+
+```bash
+yarn et update --check                    # what would change; exits 1 while an update is pending
+yarn et update                            # bump, install, run the codemods, report the rest
+yarn et update core                       # only @ethlete/core
+yarn et update --tag latest               # leave the prerelease line
+yarn et update core --to 5.0.0-next.55    # an exact version for the package you name
+yarn et update --continue                 # finish a run that stopped
+yarn et update --ai                       # hand every agent-assisted task to an agent
+```
+
+The target follows the dist tag the installed version is on, so a repo on a `-next` prerelease stays
+on `next`. The working tree must be clean, because the codemods rewrite files; `--force` skips that
+check.
+
+The install runs before the migrations are read, because the migrations of a version ship inside that
+version. A run that stops leaves `.ethlete/update/pending.json` behind, and `--continue` picks it up -
+starting over would skip every migration the stopped run had not reached.
+
+Everything a codemod cannot decide is written to `.ethlete/update`: `tasks.md` for you, `tasks.json`
+for an agent, and one file per task holding the instructions the package ships. A task is `manual` (it
+needs a decision), `assisted` (written as a prompt for an agent) or `unsupported` (a codemod this repo
+has no Nx to run, with the command to run it by hand).
+
+`--ai` hands each assisted task to the command in `updateAgentCommand` in
+`ethlete.config.local.json`, one run per task. No agent is detected automatically.
+
+A package declares its migrations in `migrations.json` at its own root, pointed at from `package.json`
+with `"ethlete": { "migrations": "./migrations.json" }`. The full format is on the docs site.
+
 ## `et api`
 
 Runs the API an app in this repo talks to, from a checkout on your own machine.
@@ -141,3 +175,4 @@ fallback with a warning. Add `ethlete.config.local.json` to your `.gitignore`.
 Full command reference on the docs site:
 
 - [Overview & usage](https://ethlete-sdk-docs.web.app/cli/)
+- [Updating the SDK](https://ethlete-sdk-docs.web.app/cli/update)

package/design/define-call.ts

@@ -0,0 +1,92 @@
+/**
+ * A value inside a template. An array joins with nothing between, and `null`, `undefined` and
+ * `false` write nothing, so `${rows.map(row)}` and `${isOn && html`…`}` both read as they look.
+ */
+const flatten = (value: unknown): string => {
+  if (Array.isArray(value)) return value.map(flatten).join('');
+  if (value === null || value === undefined || value === false) return '';
+
+  return String(value);
+};
+
+const join = (strings: TemplateStringsArray, values: unknown[]) =>
+  strings.reduce((out, part, index) => out + flatten(values[index - 1]) + part);
+
+/**
+ * Marks a template literal as HTML, so Prettier formats it and an editor highlights it. It escapes
+ * nothing: a drawing writes its own markup, and nothing a call draws comes from outside the
+ * repository.
+ */
+export const html = (strings: TemplateStringsArray, ...values: unknown[]) => join(strings, values);
+
+/** Marks a template literal as CSS, for the same reason `html` does it for markup. */
+export const css = (strings: TemplateStringsArray, ...values: unknown[]) => join(strings, values);
+
+/**
+ * One drawn answer, as the frame renders it: the markup that goes in the frame root, and the CSS
+ * that styles it. A drawing runs no logic, so it is a value the module builds when the frame
+ * imports it, not a component the frame has to instantiate.
+ */
+export type Drawing = {
+  body: string;
+  styles: string;
+};
+
+/** Types a drawing where it is written, so a mistake reads in its own file and not in `call.ts`. */
+export const drawing = (drawn: Drawing): Drawing => drawn;
+
+/**
+ * One drawn answer to a call. `load` resolves the module whose default export is the
+ * drawing that answers it, so a broken option breaks its own frame only.
+ */
+export type CallOption = {
+  key: string;
+  name: string;
+  /** Left out by a view: a single drawing answers no question, so it argues nothing. */
+  claim?: string;
+  cost?: string;
+  /** Left out while the call is open. The user sets it, never the drawing. */
+  verdict?: 'chosen' | 'rejected';
+  /** The `key` of the round that drew it. Left out by a call that runs no rounds. */
+  round?: string;
+  load: () => Promise<{ default: Drawing }>;
+};
+
+/**
+ * One pass over a call: the options drawn together, and what came out of them. A round
+ * whose options all carry a verdict is settled, and the page folds it down to its winner.
+ */
+export type CallRound = {
+  key: string;
+  /** What this pass asked, in a few words. */
+  title: string;
+  /** What it answered. Write it once the user has ruled, so the next round reads as a reply. */
+  note: string;
+};
+
+/**
+ * How a call is drawn. A wireframe shows the bare workflow with mocked values, and draws no
+ * logic and no interaction state. A design call draws the real thing.
+ */
+export type CallMode = 'wireframe' | 'design';
+
+/**
+ * One open question of an exploration, with every option drawn at the same geometry.
+ * A call with one option and no claim is a view: one reference picture, drawn full width.
+ */
+export type Call = {
+  /** The feature this call belongs to, for example 'the hour strip'. Left out by a loose call. */
+  feature?: string;
+  eyebrow: string;
+  headline: string;
+  intro: string;
+  /** The width every option frame gets, in px. The geometry the thing ships in. */
+  frameWidth: number;
+  /** Left out by a call that draws the real thing, which is what `design` means. */
+  mode?: CallMode;
+  /** Left out by a short call. With rounds, the intro says only what the call is about. */
+  rounds?: CallRound[];
+  options: CallOption[];
+};
+
+export const defineCall = (call: Call): Call => call;

package/design/web/env.d.ts

@@ -0,0 +1,11 @@
+declare module 'virtual:design-explore' {
+  import type { Call } from '@design-explore';
+
+  export const calls: Record<string, () => Promise<{ default: Call }>>;
+  export const defaultCall: string | null;
+}
+
+declare module 'virtual:design-explore/env' {
+  /** Loads the stylesheet the project draws under. A project the config names not draws bare. */
+  export const loadEnv: (project: string) => Promise<unknown>;
+}

package/design/web/frame.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <!--head-->
+    <style>
+      html,
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./frame.ts"></script>
+  </body>
+</html>

package/design/web/frame.ts

@@ -0,0 +1,38 @@
+import { calls } from 'virtual:design-explore';
+import { loadEnv } from 'virtual:design-explore/env';
+
+const params = new URLSearchParams(location.search);
+const slug = params.get('call') ?? '';
+const key = params.get('option') ?? '';
+
+await loadEnv(slug.split('/')[0] ?? '');
+
+const root = document.querySelector('#root') as HTMLElement;
+
+const fail = (message: string) => {
+  root.textContent = message;
+  root.setAttribute('style', 'padding:16px;font:14px monospace;color:#f0a0a0;background:#1a1414');
+};
+
+const call = calls[slug];
+if (!call) fail(`design-explore: no call "${slug}"`);
+else {
+  const option = (await call()).default.options.find((o) => o.key === key);
+  if (!option) fail(`design-explore: call "${slug}" has no option "${key}"`);
+  else {
+    const loaded = (await option.load()).default;
+    const style = document.createElement('style');
+
+    style.textContent = loaded.styles;
+    document.head.append(style);
+    root.innerHTML = loaded.body;
+  }
+}
+
+const report = () => {
+  const height = Math.ceil(document.documentElement.getBoundingClientRect().height);
+  parent.postMessage({ type: 'design-explore:height', option: key, height }, '*');
+};
+
+new ResizeObserver(report).observe(document.documentElement);
+report();