openpencil/tools/checks/architecture
Danila Poyarkov 7e9e293305
feat(storybook): generate Reka UI components for Vue stories (#969)
* feat(emit): print Vue templates and single-file components

Generated Vue components need a template printer alongside the TypeScript and JSX ones. vue builds elements, text, static and bound attributes, and v-model, and prints a single-file component with script setup, template, and scoped style. Text escapes &, <, and { and attribute values escape & and ", which Vue decodes only after it parses interpolations and attributes; tests render printed templates with Vue's own compiler and server renderer. objectType takes optional members for defineProps.

* feat(storybook): generate Reka UI components for Vue stories

A component set whose behaviour is a Button, Switch, Checkbox, Toggle, or Collapsible now exports with --framework vue as a single-file component on Reka UI: its parts become Reka components, its variants become a scoped stylesheet from its state styles, its value a defineModel, and every other variant property a prop set as a data attribute. Its stories render the component, with a play function that clicks the control and checks its state. The native button reset moves to dom-css so preview and generated components share it.

* test: run generated Vue components in a browser

Exports a Switch and a Collapsible to Vue stories, serves each generated component with Vite and Vue's plugin, and checks in Chromium that clicking flips Reka's state, the state styles move the thumb and change the fill, a disabled switch ignores clicks, and a collapsible shows its content when opened.

* refactor(emit): escape Vue templates with entities

Text and attribute values are escaped as HTML by entities' escapeText and escapeAttribute, which follow the HTML spec, instead of hand-written tables. Text still writes { as an entity, since Vue reads {{ as an interpolation before it decodes entities.

* fix(emit): keep Vue text adjacent and raw blocks closed where they end

An element with text content printed each child on its own line, which Vue renders as a space between text and an element. It now prints its children inline. A closing tag inside a script string or a style value, which can come from an imported design, ended the block early; it is written <\/, which JavaScript strings and CSS read back as </.
2026-10-08 10:13:52 +00:00
..
src/steiger-rules feat(storybook): generate Reka UI components for Vue stories (#969) 2026-10-08 10:13:52 +00:00
tests feat(app): follow people and agents from the toolbar avatars (#807) 2026-10-04 00:09:40 +04:00
package.json build(tools): group tools by role and gate them like the rest of the repo (#791) 2026-09-30 05:00:31 +04:00