@design-embed/target-vanjs 1.0.0 → 1.0.1
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.
- package/README.md +71 -3
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @design-embed/target-vanjs
|
|
2
2
|
|
|
3
|
-
VanJS target for design-embed. Generates VanJS components from design
|
|
3
|
+
VanJS target for design-embed. Generates VanJS components from design HTML.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -11,8 +11,76 @@ npm install @design-embed/target-vanjs
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
13
|
```typescript
|
|
14
|
+
import { defineConfig, fromFile } from "design-embed";
|
|
14
15
|
import { VanJsTarget } from "@design-embed/target-vanjs";
|
|
15
16
|
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
export default defineConfig({
|
|
18
|
+
source: fromFile("./design.html"),
|
|
19
|
+
output: {
|
|
20
|
+
target: new VanJsTarget(),
|
|
21
|
+
viewName: "WelcomeHero",
|
|
22
|
+
viewsDir: "src/generated/views",
|
|
23
|
+
styleMode: "inline",
|
|
24
|
+
},
|
|
25
|
+
components: [
|
|
26
|
+
{
|
|
27
|
+
selector: "button[data-role='primary']",
|
|
28
|
+
component: "Button",
|
|
29
|
+
props: { variant: "primary", children: "$text" },
|
|
30
|
+
},
|
|
31
|
+
],
|
|
32
|
+
});
|
|
18
33
|
```
|
|
34
|
+
|
|
35
|
+
## Generated output
|
|
36
|
+
|
|
37
|
+
For the config above, design-embed produces one `.view.ts` file per view and one per mapped component:
|
|
38
|
+
|
|
39
|
+
```text
|
|
40
|
+
src/generated/views/
|
|
41
|
+
WelcomeHero.view.ts ← main view, imports Button locally
|
|
42
|
+
Button.view.ts ← Button component scaffold
|
|
43
|
+
WelcomeHero.mount.entry.ts ← browser entry point for visual tests
|
|
44
|
+
Button.mount.entry.ts
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
`WelcomeHero.view.ts`:
|
|
48
|
+
```typescript
|
|
49
|
+
import van from "vanjs-core";
|
|
50
|
+
import { Button } from "./Button.view";
|
|
51
|
+
|
|
52
|
+
const { article, h1, p } = van.tags;
|
|
53
|
+
|
|
54
|
+
export function WelcomeHero() {
|
|
55
|
+
return (
|
|
56
|
+
article({ class: "card", style: "background: #ffffff; padding: 16px;" },
|
|
57
|
+
h1({ "data-role": "title" },
|
|
58
|
+
"Phase One",
|
|
59
|
+
),
|
|
60
|
+
p(
|
|
61
|
+
"Local HTML compile path.",
|
|
62
|
+
),
|
|
63
|
+
Button({ variant: "primary" }, "Continue"),
|
|
64
|
+
)
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Each component mapping produces a separate `{ComponentName}.view.ts` file. The main view imports from those local files. Inline styles from the source HTML are emitted as a `style` string attribute on the van element.
|
|
70
|
+
|
|
71
|
+
The `.mount.entry.ts` files are thin entry points that call `van.add(document.body, Component())` — used by the visual test runner to render the component in a browser page.
|
|
72
|
+
|
|
73
|
+
## Visual tests
|
|
74
|
+
|
|
75
|
+
When `generateTests: true` is passed to `embed()` (or via `generate-tests` CLI command), a Playwright test is generated for each output view:
|
|
76
|
+
|
|
77
|
+
```text
|
|
78
|
+
src/generated/views/tests/
|
|
79
|
+
WelcomeHero.reference.html ← source HTML snapshot
|
|
80
|
+
WelcomeHero.visual.spec.ts ← full view screenshot + layout test
|
|
81
|
+
Button.visual.spec.ts ← component-level test
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
The spec loads the `.mount.entry.ts` bundle via `page.goto("file://...")`, screenshots it, and compares against the reference HTML snapshot. Re-running `embed` in CI updates the reference HTML — tests then fail for any component that no longer matches the updated design.
|
|
85
|
+
|
|
86
|
+
Requires `@playwright/test` and a bundler (e.g. Vite) to build the mount entry files before running tests.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@design-embed/target-vanjs",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"private": false,
|
|
6
6
|
"publishConfig": {
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
".": {
|
|
12
12
|
"types": "./src/index.ts",
|
|
13
13
|
"development": "./src/index.ts",
|
|
14
|
-
"default": "./dist/index.
|
|
14
|
+
"default": "./dist/index.mjs"
|
|
15
15
|
}
|
|
16
16
|
},
|
|
17
17
|
"files": [
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"design-embed": "*"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"design-embed": "0.2.
|
|
27
|
+
"design-embed": "0.2.1"
|
|
28
28
|
},
|
|
29
29
|
"scripts": {
|
|
30
30
|
"test": "node --conditions=development --test src/**/*.test.ts"
|