refactor: migrate legacy wire namespace to wrn
This commit is contained in:
@@ -9,7 +9,7 @@ definition, and local styles on every component. The core reactive runtime is
|
||||
The §4.1 ownership migration is complete: `ui.css` contains global and
|
||||
cross-cutting primitives only. Shared component foundations are carried by
|
||||
three internal style-only components and render on demand; the former global
|
||||
component families and standalone `wire-next` generation class are absent.
|
||||
component families and standalone `wrn-next` generation class are absent.
|
||||
|
||||
Final validation passed the production, package, example, service, editor,
|
||||
showcase-generation, typecheck, lint, formatting, public-API, visual-contract,
|
||||
@@ -60,7 +60,7 @@ Practical rules:
|
||||
|
||||
- CSS comments in a `style {}` block are `/* */` only. `//` is not a CSS comment
|
||||
and silently swallows the rule that follows it.
|
||||
- Style the component's own BEM classes (`wire-thing`, `wire-thing__part`).
|
||||
- Style the component's own BEM classes (`wrn-thing`, `wrn-thing__part`).
|
||||
Variants are data attributes: `[data-variant="soft"]`, not a class explosion.
|
||||
- No Tailwind utility classes in component markup. See §4.3.
|
||||
|
||||
@@ -141,7 +141,7 @@ positives because most tokens are generated per palette, so any such check must
|
||||
read the **rendered** CSS; and the semantic spread must sit _before_ the
|
||||
primary/secondary palette entries or it overrides them.
|
||||
|
||||
**How to test.** Load a page, then in the console collect every `var(--wire-*)`
|
||||
**How to test.** Load a page, then in the console collect every `var(--wrn-*)`
|
||||
referenced by stylesheet rules and check each against
|
||||
`getComputedStyle(document.documentElement)`. Expect 38 referenced, 0 undefined.
|
||||
|
||||
@@ -197,7 +197,7 @@ builds. It should warn on at least:
|
||||
the event — include the registry keys actually present, which is exactly what
|
||||
would have made §1.1 a five-minute bug.
|
||||
2. A `@binding` naming a function that does not exist in scope.
|
||||
3. A `var(--wire-*)` referenced by a component but absent from the rendered
|
||||
3. A `var(--wrn-*)` referenced by a component but absent from the rendered
|
||||
theme.
|
||||
4. A state write discarded because it happened after the client function
|
||||
returned (see §2.2).
|
||||
@@ -331,9 +331,9 @@ done, what is left, and which disposition each remaining component takes.
|
||||
#### 3.1.1 Already done in 0.8.6 — do not redo
|
||||
|
||||
Fifteen components were fixed. Ten had outputs that were **declared but
|
||||
miswired** — they dispatched a hand-built `CustomEvent` instead of calling
|
||||
incorrectly connected** — they dispatched a hand-built `CustomEvent` instead of calling
|
||||
`output.*`, so the declaration was right and only the emit was wrong. Nothing
|
||||
was added to these; they were rewired:
|
||||
was added to these; they were reconnected:
|
||||
|
||||
> Card, Footer, Breadcrumb, Accordion, alert, Badge, AnnouncementBar,
|
||||
> AvatarGroup, ToggleCount, InputNumber
|
||||
@@ -351,13 +351,13 @@ through `output.*`:
|
||||
| `Timeline` | `select` | item pressed |
|
||||
|
||||
Verified firing in a browser: `SearchBox`, `Marquee`, `List`, `Timeline`, plus
|
||||
all ten rewired components. **`Map` was not verified** — its three outputs were
|
||||
all ten reconnected components. **`Map` was not verified** — its three outputs were
|
||||
converted by the same mechanical change and the build passes, but no Map was on
|
||||
the probe page. Put one on a page and confirm before treating it as done.
|
||||
|
||||
#### 3.1.2 Original remaining work — resolved
|
||||
|
||||
**Original issue.** These were not miswired. All nine were **pure scaffolds**: roughly 25
|
||||
**Original issue.** These were not incorrectly connected. All nine were **pure scaffolds**: roughly 25
|
||||
lines each, zero state, zero functions, no style block, no event handlers. They
|
||||
are markup shells that declare outputs. "Add an emitter" is not the work — there
|
||||
is nothing to emit from.
|
||||
@@ -447,9 +447,9 @@ AdvancedRangeSlider, Chart, Confetti, CopyMarkup, FileUpload, Toast,
|
||||
ToastNotifications, TreeView. Do §3.1 first and this list drops to 19 without
|
||||
any extra work. Do not plan the two items separately.
|
||||
|
||||
Separately, 58 components carried the standalone `wire-next` scaffold class in
|
||||
Separately, 58 components carried the standalone `wrn-next` scaffold class in
|
||||
the original audit; **zero retain it now**. Component-specific BEM identifiers
|
||||
such as `wire-next--alert` remain locally owned implementation details, but no
|
||||
such as `wrn-next--alert` remain locally owned implementation details, but no
|
||||
component is bound to a global stylesheet through the generation artefact.
|
||||
|
||||
**Change.** Rebuild them under §0.1, or remove them. Note that several are
|
||||
@@ -474,10 +474,10 @@ bun run build && gzip -c examples/basic-app/dist/ui.css | wc -c
|
||||
`TextLink` (14), `Map` (12), `SearchBox` (8), `Timeline` (8) still style
|
||||
themselves with utility classes in markup.
|
||||
|
||||
All seven now use local `wire-*` BEM styles. `InputNumber` styles are emitted as
|
||||
All seven now use local `wrn-*` BEM styles. `InputNumber` styles are emitted as
|
||||
component-scoped CSS and therefore do not appear in the global `ui.css` file.
|
||||
|
||||
**Change.** Migrate to `wire-*` BEM classes in the component's own `style {}`
|
||||
**Change.** Migrate to `wrn-*` BEM classes in the component's own `style {}`
|
||||
block, per §0.1. Note this changes the rendered class list, so application CSS
|
||||
selecting on those utilities stops matching — it needs a migration note, exactly
|
||||
as the layout group did in 0.8.6.
|
||||
@@ -512,14 +512,14 @@ whichever behaviour was chosen.
|
||||
every page. Only **42 of 108** components had a local `style {}` block.
|
||||
|
||||
**Result.** The maintained library now has **102 of 102** components with local
|
||||
styles. Built `ui.css` is **15,927 bytes / 3,762 gzipped**. The `.wire-next`,
|
||||
`.wire-btn`, `.wire-dropdown`, `.wire-alert`, `.wire-card`, `.wire-footer`,
|
||||
`.wire-metric-card`, and `.wire-segmented-group` global families are gone.
|
||||
styles. Built `ui.css` is **15,927 bytes / 3,762 gzipped**. The `.wrn-next`,
|
||||
`.wrn-btn`, `.wrn-dropdown`, `.wrn-alert`, `.wrn-card`, `.wrn-footer`,
|
||||
`.wrn-metric-card`, and `.wrn-segmented-group` global families are gone.
|
||||
Reusable field, select, color, and size foundations live in three internal
|
||||
style-only components; the renderer emits and deduplicates them only when a
|
||||
component that needs them renders. An example-app SSR guard verifies that
|
||||
on-demand path, while the UI suite prevents the global families or standalone
|
||||
`wire-next` class from returning.
|
||||
`wrn-next` class from returning.
|
||||
|
||||
**Change.** Done in groups with the visual contract regenerated after each
|
||||
migration.
|
||||
@@ -542,7 +542,7 @@ cannot silently regress.
|
||||
change this session needed a full server restart, which is the single biggest
|
||||
drag on the edit loop.
|
||||
|
||||
**Evidence, and what is _not_ yet proven.** The watcher is wired correctly:
|
||||
**Evidence, and what is _not_ yet proven.** The watcher is connected correctly:
|
||||
`componentDirs` includes `uiComponentsDir()` and is passed as `extraDirs`
|
||||
(`packages/dev-server/src/index.ts:706-723`), external paths arrive absolute
|
||||
(`packages/dev-server/src/watch.ts:104`), and `hotUpdate` calls
|
||||
@@ -706,7 +706,7 @@ context.state.topLinks; ...` — the full state-restore prologue.
|
||||
After hoisting and closure deduplication, the page is **101,253 decoded bytes**;
|
||||
the largest module is **51,946 bytes** with **2.4% duplicated lines**.
|
||||
|
||||
Gzip hides this on the wire, but **parse and compile cost scales with decoded
|
||||
Gzip hides this on the wrn, but **parse and compile cost scales with decoded
|
||||
bytes, not transferred bytes**. Half a megabyte of JavaScript is parsed to run
|
||||
one page.
|
||||
|
||||
@@ -792,7 +792,7 @@ a case-sensitive filesystem the same script produces duplicate files instead.
|
||||
**Change.** Pick one:
|
||||
|
||||
- **Delete it.** `generate-ui-component-reference.mjs` is the maintained
|
||||
generator, it is wired into `release:prepare`, and it works. If this script is
|
||||
generator, it is connected into `release:prepare`, and it works. If this script is
|
||||
redundant, it is a loaded gun in the repo for no benefit.
|
||||
- **Or fix and gate it**: make it write to a temp directory and swap atomically
|
||||
only on success, so a mid-run crash cannot leave a partial library. Then add
|
||||
|
||||
Reference in New Issue
Block a user