@design-embed/target-vue 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 +103 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,3 +1,105 @@
|
|
|
1
1
|
# @design-embed/target-vue
|
|
2
2
|
|
|
3
|
-
Vue target for design-embed.
|
|
3
|
+
Vue target for design-embed. Generates Vue SFC components from design HTML.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @design-embed/target-vue
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```typescript
|
|
14
|
+
import { defineConfig } from "design-embed";
|
|
15
|
+
import { VueTarget } from "@design-embed/target-vue";
|
|
16
|
+
|
|
17
|
+
export default defineConfig({
|
|
18
|
+
source: fromFile("./design.html"),
|
|
19
|
+
output: {
|
|
20
|
+
target: new VueTarget(),
|
|
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
|
+
});
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Options
|
|
36
|
+
|
|
37
|
+
`VueTarget` accepts an optional options object:
|
|
38
|
+
|
|
39
|
+
| Option | Type | Default | Description |
|
|
40
|
+
|--------|------|---------|-------------|
|
|
41
|
+
| `api` | `"composition" \| "options"` | `"composition"` | Vue API style used in generated files |
|
|
42
|
+
|
|
43
|
+
```typescript
|
|
44
|
+
new VueTarget({ api: "options" })
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Generated output
|
|
48
|
+
|
|
49
|
+
For the config above, design-embed produces one `.vue` file per view and one per mapped component:
|
|
50
|
+
|
|
51
|
+
```text
|
|
52
|
+
src/generated/views/
|
|
53
|
+
WelcomeHero.vue ← main view, imports Button locally
|
|
54
|
+
Button.vue ← Button component scaffold
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
**Composition API** (default) — `WelcomeHero.vue`:
|
|
58
|
+
```vue
|
|
59
|
+
<script setup lang="ts">
|
|
60
|
+
import Button from "./Button.vue";
|
|
61
|
+
</script>
|
|
62
|
+
|
|
63
|
+
<template>
|
|
64
|
+
<section>
|
|
65
|
+
<Button variant="primary">
|
|
66
|
+
<template #children>Continue</template>
|
|
67
|
+
</Button>
|
|
68
|
+
</section>
|
|
69
|
+
</template>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
**Options API** — `WelcomeHero.vue`:
|
|
73
|
+
```vue
|
|
74
|
+
<script lang="ts">
|
|
75
|
+
import { defineComponent } from "vue";
|
|
76
|
+
export default defineComponent({
|
|
77
|
+
components: { Button }
|
|
78
|
+
});
|
|
79
|
+
</script>
|
|
80
|
+
|
|
81
|
+
<template>
|
|
82
|
+
<section>
|
|
83
|
+
<Button variant="primary">
|
|
84
|
+
<template #children>Continue</template>
|
|
85
|
+
</Button>
|
|
86
|
+
</section>
|
|
87
|
+
</template>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
Inline styles from the source HTML are emitted as Vue's `:style` binding. Component children mapped via `$text` are passed through the named `#children` slot.
|
|
91
|
+
|
|
92
|
+
## Visual tests
|
|
93
|
+
|
|
94
|
+
When `generateTests: true` is passed to `embed()` (or via `generate-tests` CLI command), a Playwright test is generated for each output view:
|
|
95
|
+
|
|
96
|
+
```text
|
|
97
|
+
src/generated/views/tests/
|
|
98
|
+
WelcomeHero.reference.html ← source HTML snapshot
|
|
99
|
+
WelcomeHero.visual.spec.ts ← full view screenshot + layout test
|
|
100
|
+
Button.visual.spec.ts ← component-level test
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
The spec mounts the Vue component via `@playwright/experimental-ct-vue`, 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.
|
|
104
|
+
|
|
105
|
+
Requires `@playwright/experimental-ct-vue` in the consuming project.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@design-embed/target-vue",
|
|
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": [
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"vue": "^3.0.0"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"design-embed": "0.2.
|
|
28
|
+
"design-embed": "0.2.1"
|
|
29
29
|
},
|
|
30
30
|
"scripts": {
|
|
31
31
|
"test": "node --conditions=development --test src/**/*.test.ts"
|