design-embed 0.1.1 → 0.2.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 +7 -2
- package/dist/cli.mjs +28 -224
- package/dist/core-DSlWqRBj.mjs +907 -0
- package/dist/index.d.mts +185 -312
- package/dist/index.mjs +2 -2
- package/package.json +2 -10
- package/src/cli.ts +7 -32
- package/src/commands/compile.ts +20 -88
- package/src/commands/generateTests.ts +9 -91
- package/src/commands/init.ts +5 -8
- package/src/commands/plugin.ts +3 -14
- package/src/config/index.ts +302 -0
- package/src/core/diagnostics/diagnostic.ts +18 -0
- package/src/core/diagnostics/jsonDiagnostic.ts +51 -0
- package/src/core/index.ts +581 -0
- package/src/core/nodes.ts +74 -0
- package/src/core/pipeline/checkMode.ts +46 -0
- package/src/core/plugins/pluginApi.ts +44 -0
- package/src/core/types.ts +120 -0
- package/src/index.ts +48 -2
- package/src/targets/html.ts +565 -12
- package/dist/src-D3fnqGCq.mjs +0 -511
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { resolve } from "node:path";
|
|
2
|
+
import type { Diagnostic } from "../diagnostics/diagnostic.ts";
|
|
3
|
+
import type { GeneratedFile } from "../index.ts";
|
|
4
|
+
|
|
5
|
+
export interface CheckModeInput {
|
|
6
|
+
files: GeneratedFile[];
|
|
7
|
+
cwd: string;
|
|
8
|
+
readFile(path: string): string | undefined;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export interface CheckModeResult {
|
|
12
|
+
ok: boolean;
|
|
13
|
+
diagnostics: Diagnostic[];
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export function checkGeneratedFiles(input: CheckModeInput): CheckModeResult {
|
|
17
|
+
const diagnostics: Diagnostic[] = [];
|
|
18
|
+
|
|
19
|
+
for (const file of input.files) {
|
|
20
|
+
const absolutePath = resolve(input.cwd, file.path);
|
|
21
|
+
const current = input.readFile(absolutePath);
|
|
22
|
+
if (current === undefined) {
|
|
23
|
+
diagnostics.push({
|
|
24
|
+
code: "CHECK_FILE_MISSING",
|
|
25
|
+
message: `Generated file is missing: ${file.path}`,
|
|
26
|
+
severity: "error",
|
|
27
|
+
file: file.path,
|
|
28
|
+
});
|
|
29
|
+
continue;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
if (current !== file.contents) {
|
|
33
|
+
diagnostics.push({
|
|
34
|
+
code: "CHECK_FILE_STALE",
|
|
35
|
+
message: `Generated file is stale: ${file.path}`,
|
|
36
|
+
severity: "error",
|
|
37
|
+
file: file.path,
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
return {
|
|
43
|
+
ok: diagnostics.length === 0,
|
|
44
|
+
diagnostics,
|
|
45
|
+
};
|
|
46
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import type { Diagnostic } from "../diagnostics/diagnostic.ts";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Represents a file generated by the compiler.
|
|
5
|
+
*/
|
|
6
|
+
export interface GeneratedFile {
|
|
7
|
+
/** Relative path from the output directory. */
|
|
8
|
+
path: string;
|
|
9
|
+
/** File content. */
|
|
10
|
+
contents: string;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export interface GeneratedAsset {
|
|
14
|
+
path: string;
|
|
15
|
+
contents?: string | Uint8Array;
|
|
16
|
+
sourceUrl?: string;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export interface SourcePlugin {
|
|
20
|
+
name: string;
|
|
21
|
+
run(input: SourcePluginInput): Promise<SourcePluginResult>;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export interface SourcePluginInput {
|
|
25
|
+
cwd: string;
|
|
26
|
+
config?: unknown;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export interface SourcePluginResult {
|
|
30
|
+
html?: string;
|
|
31
|
+
css?: string;
|
|
32
|
+
assets?: GeneratedAsset[];
|
|
33
|
+
files?: GeneratedFile[];
|
|
34
|
+
diagnostics: Diagnostic[];
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export interface TargetEmitResult {
|
|
38
|
+
files: GeneratedFile[];
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export interface TargetTestGenerateResult {
|
|
42
|
+
files: GeneratedFile[];
|
|
43
|
+
diagnostics: Diagnostic[];
|
|
44
|
+
}
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import type { Diagnostic } from "./diagnostics/diagnostic.ts";
|
|
2
|
+
import type { DesignNode } from "./nodes.ts";
|
|
3
|
+
import type {
|
|
4
|
+
SourcePlugin,
|
|
5
|
+
TargetEmitResult,
|
|
6
|
+
TargetTestGenerateResult,
|
|
7
|
+
} from "./plugins/pluginApi.ts";
|
|
8
|
+
|
|
9
|
+
// ---------------------------------------------------------------------------
|
|
10
|
+
// Target adapter interfaces
|
|
11
|
+
// ---------------------------------------------------------------------------
|
|
12
|
+
|
|
13
|
+
export interface TargetEmitInput {
|
|
14
|
+
nodes: DesignNode[];
|
|
15
|
+
css?: string;
|
|
16
|
+
config?: DesignEmbedConfig;
|
|
17
|
+
diagnostics: Diagnostic[];
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export interface TargetEmitter {
|
|
21
|
+
emit(input: TargetEmitInput): TargetEmitResult;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export interface TargetTestGenerateInput {
|
|
25
|
+
html: string;
|
|
26
|
+
css?: string;
|
|
27
|
+
config: DesignEmbedConfig;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
export interface TargetTestGenerator {
|
|
31
|
+
generateTests(input: TargetTestGenerateInput): TargetTestGenerateResult;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// ---------------------------------------------------------------------------
|
|
35
|
+
// Configuration types
|
|
36
|
+
// ---------------------------------------------------------------------------
|
|
37
|
+
|
|
38
|
+
export type StyleMode = "inline" | "css-modules" | "tailwind";
|
|
39
|
+
|
|
40
|
+
export interface ComponentMapping {
|
|
41
|
+
selector: string;
|
|
42
|
+
component: string;
|
|
43
|
+
props?: Record<string, string>;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export interface TokenConfig {
|
|
47
|
+
spacing?: {
|
|
48
|
+
unit?: "px" | "rem";
|
|
49
|
+
threshold?: number;
|
|
50
|
+
values?: Record<string, number>;
|
|
51
|
+
};
|
|
52
|
+
sizing?: NumericTokenGroup;
|
|
53
|
+
typography?: NumericTokenGroup;
|
|
54
|
+
radius?: Record<string, number>;
|
|
55
|
+
borderWidth?: Record<string, number>;
|
|
56
|
+
shadow?: Record<string, string>;
|
|
57
|
+
colors?: Record<string, string>;
|
|
58
|
+
colorThreshold?: number;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
export interface NumericTokenGroup {
|
|
62
|
+
unit?: "px" | "rem";
|
|
63
|
+
threshold?: number;
|
|
64
|
+
values?: Record<string, number>;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
export type StyleMappings = Record<string, Record<string, string>>;
|
|
68
|
+
|
|
69
|
+
export interface TestGenerationConfig {
|
|
70
|
+
outputDir?: string;
|
|
71
|
+
runner?: "playwright";
|
|
72
|
+
viewports?: TestViewport[];
|
|
73
|
+
states?: TestState[];
|
|
74
|
+
assertions?: TestAssertions;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
export interface TestViewport {
|
|
78
|
+
name?: string;
|
|
79
|
+
width: number;
|
|
80
|
+
height: number;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
export interface TestState {
|
|
84
|
+
name: string;
|
|
85
|
+
hover?: string;
|
|
86
|
+
focus?: string;
|
|
87
|
+
click?: string;
|
|
88
|
+
waitFor?: string;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
export interface TestAssertions {
|
|
92
|
+
screenshot?: boolean;
|
|
93
|
+
layout?: boolean;
|
|
94
|
+
layoutTolerance?: number;
|
|
95
|
+
selectors?: string[];
|
|
96
|
+
/**
|
|
97
|
+
* Per-pixel color sensitivity (0-1) for the screenshot comparison. Smaller
|
|
98
|
+
* is stricter. Defaults to 0.2.
|
|
99
|
+
*/
|
|
100
|
+
screenshotThreshold?: number;
|
|
101
|
+
/**
|
|
102
|
+
* Maximum number of differing pixels tolerated in the screenshot
|
|
103
|
+
* comparison. Defaults to 0 (byte-exact).
|
|
104
|
+
*/
|
|
105
|
+
screenshotMaxDiffPixels?: number;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
export interface DesignEmbedConfig {
|
|
109
|
+
output?: {
|
|
110
|
+
viewsDir?: string | URL;
|
|
111
|
+
target?: "html" | TargetEmitter;
|
|
112
|
+
viewName?: string;
|
|
113
|
+
styleMode?: StyleMode;
|
|
114
|
+
};
|
|
115
|
+
components?: ComponentMapping[];
|
|
116
|
+
tokens?: TokenConfig;
|
|
117
|
+
styleMappings?: StyleMappings;
|
|
118
|
+
source?: SourcePlugin;
|
|
119
|
+
tests?: TestGenerationConfig;
|
|
120
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -1,2 +1,48 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
// Config
|
|
2
|
+
|
|
3
|
+
export type { LoadConfigResult } from "./config/index.ts";
|
|
4
|
+
export {
|
|
5
|
+
defineConfig,
|
|
6
|
+
fromFile,
|
|
7
|
+
loadConfig,
|
|
8
|
+
validateConfig,
|
|
9
|
+
} from "./config/index.ts";
|
|
10
|
+
// Config schema types
|
|
11
|
+
// Diagnostics
|
|
12
|
+
// Extension types — for authoring source plugins and custom targets
|
|
13
|
+
export type {
|
|
14
|
+
ComponentMapping,
|
|
15
|
+
DesignEmbedConfig,
|
|
16
|
+
DesignEmbedInput,
|
|
17
|
+
DesignEmbedResult,
|
|
18
|
+
DesignNode,
|
|
19
|
+
Diagnostic,
|
|
20
|
+
DiagnosticSeverity,
|
|
21
|
+
GeneratedAsset,
|
|
22
|
+
GeneratedFile,
|
|
23
|
+
NumericTokenGroup,
|
|
24
|
+
PropValue,
|
|
25
|
+
SourceLocation,
|
|
26
|
+
SourcePlugin,
|
|
27
|
+
SourcePluginInput,
|
|
28
|
+
SourcePluginResult,
|
|
29
|
+
StyleMappings,
|
|
30
|
+
StyleMode,
|
|
31
|
+
TargetEmitInput,
|
|
32
|
+
TargetEmitResult,
|
|
33
|
+
TargetEmitter,
|
|
34
|
+
TargetTestGenerateInput,
|
|
35
|
+
TargetTestGenerateResult,
|
|
36
|
+
TargetTestGenerator,
|
|
37
|
+
TestAssertions,
|
|
38
|
+
TestGenerationConfig,
|
|
39
|
+
TestState,
|
|
40
|
+
TestViewport,
|
|
41
|
+
TokenConfig,
|
|
42
|
+
} from "./core/index.ts";
|
|
43
|
+
// Embed
|
|
44
|
+
// AST utilities and types — for custom target authors
|
|
45
|
+
export { applyComponentMappings, embed, parseHtml } from "./core/index.ts";
|
|
46
|
+
export type { HtmlTargetOptions } from "./targets/html.ts";
|
|
47
|
+
// Built-in HTML target
|
|
48
|
+
export { HtmlTarget, htmlTarget } from "./targets/html.ts";
|