@sourcescape/ds-cli 0.1.0 → 0.3.0
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/dist/chunk-U44UTENA.js +492 -0
- package/dist/cli.js +494 -712
- package/dist/index.d.ts +127 -0
- package/dist/index.js +47 -0
- package/package.json +11 -2
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* One-shot rendering convenience.
|
|
3
|
+
*
|
|
4
|
+
* Collapses the full pipeline (buildRegistry → resolveMarkup → bundleJs → buildPreviewHtml)
|
|
5
|
+
* into a single async call.
|
|
6
|
+
*/
|
|
7
|
+
interface RenderResult {
|
|
8
|
+
html: string;
|
|
9
|
+
unmatchedTags: string[];
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Render design-system markup to a complete HTML document.
|
|
13
|
+
*
|
|
14
|
+
* @param system - Design system name (e.g. "fw-prd")
|
|
15
|
+
* @param markup - Raw HTML/XML markup containing custom elements
|
|
16
|
+
* @returns Rendered HTML and any unmatched custom element tags
|
|
17
|
+
*/
|
|
18
|
+
declare function renderMarkup(system: string, markup: string): Promise<RenderResult>;
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Dependency resolution for raw markup rendering.
|
|
22
|
+
*
|
|
23
|
+
* Scans component directories to build a tag→component registry,
|
|
24
|
+
* then resolves which CSS/JS files a given markup document needs.
|
|
25
|
+
*/
|
|
26
|
+
interface ComponentEntry {
|
|
27
|
+
name: string;
|
|
28
|
+
kind: "molecules" | "cells";
|
|
29
|
+
dir: string;
|
|
30
|
+
tags: string[];
|
|
31
|
+
dynamicTags: string[];
|
|
32
|
+
hasCss: boolean;
|
|
33
|
+
hasJs: boolean;
|
|
34
|
+
}
|
|
35
|
+
interface ComponentRegistry {
|
|
36
|
+
tagMap: Map<string, ComponentEntry>;
|
|
37
|
+
entries: ComponentEntry[];
|
|
38
|
+
}
|
|
39
|
+
interface ResolvedDeps {
|
|
40
|
+
cssFiles: string[];
|
|
41
|
+
jsFiles: string[];
|
|
42
|
+
unmatchedTags: string[];
|
|
43
|
+
}
|
|
44
|
+
/** Scan all component directories and build a tag-to-component map. */
|
|
45
|
+
declare function buildRegistry(system: string): ComponentRegistry;
|
|
46
|
+
/** Resolve which components are needed for the given markup. */
|
|
47
|
+
declare function resolveMarkup(registry: ComponentRegistry, markup: string): ResolvedDeps;
|
|
48
|
+
/** Bundle the system's JS entry point in memory using esbuild. */
|
|
49
|
+
declare function bundleJs(system: string): Promise<string | null>;
|
|
50
|
+
/** Assemble a complete HTML document with inlined CSS and module script tags. */
|
|
51
|
+
declare function buildPreviewHtml(system: string, markup: string, deps: ResolvedDeps, bundledJs?: string): string;
|
|
52
|
+
|
|
53
|
+
/**
|
|
54
|
+
* Token loading and CSS generation.
|
|
55
|
+
*
|
|
56
|
+
* Reads W3C Design Token format JSON files and generates CSS custom properties.
|
|
57
|
+
*/
|
|
58
|
+
interface TokenLeaf {
|
|
59
|
+
path: string[];
|
|
60
|
+
type: string;
|
|
61
|
+
value: unknown;
|
|
62
|
+
}
|
|
63
|
+
/** Load all token JSON files for a design system. */
|
|
64
|
+
declare function loadTokens(system: string): {
|
|
65
|
+
name: string;
|
|
66
|
+
data: Record<string, unknown>;
|
|
67
|
+
}[];
|
|
68
|
+
/** Recursively walk a W3C token tree, returning flat leaf tokens. */
|
|
69
|
+
declare function walkTokens(obj: Record<string, unknown>, path?: string[]): TokenLeaf[];
|
|
70
|
+
/** Convert a path array to a CSS custom property name. */
|
|
71
|
+
declare function toCssVarName(path: string[]): string;
|
|
72
|
+
/** Format a token value for CSS output. Returns null for composite types that should be skipped. */
|
|
73
|
+
declare function formatValue(type: string, value: unknown): string | null;
|
|
74
|
+
/** Generate complete _tokens.css content from a system's token files. */
|
|
75
|
+
declare function generateTokensCss(system: string): string;
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Filesystem operations for reading design system data.
|
|
79
|
+
*/
|
|
80
|
+
interface SystemInfo {
|
|
81
|
+
name: string;
|
|
82
|
+
description: string;
|
|
83
|
+
}
|
|
84
|
+
interface ComponentInfo {
|
|
85
|
+
name: string;
|
|
86
|
+
kind: "molecules" | "cells";
|
|
87
|
+
description: string;
|
|
88
|
+
tag?: string;
|
|
89
|
+
example?: string;
|
|
90
|
+
}
|
|
91
|
+
/** List all design system names */
|
|
92
|
+
declare function listSystems(): string[];
|
|
93
|
+
/** Get the root directory for a specific system */
|
|
94
|
+
declare function systemDir(system: string): string;
|
|
95
|
+
/** Check if a system exists */
|
|
96
|
+
declare function systemExists(system: string): boolean;
|
|
97
|
+
/** List components for a system, grouped by kind */
|
|
98
|
+
declare function listComponents(system: string): ComponentInfo[];
|
|
99
|
+
/** Find a component by name, searching both molecules and cells */
|
|
100
|
+
declare function findComponent(system: string, name: string): {
|
|
101
|
+
kind: "molecules" | "cells";
|
|
102
|
+
dir: string;
|
|
103
|
+
} | null;
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* Static file preview server via node:http.
|
|
107
|
+
*
|
|
108
|
+
* Serves the entire system directory so that relative font paths
|
|
109
|
+
* (e.g. assets/fonts/...) resolve correctly.
|
|
110
|
+
*/
|
|
111
|
+
interface PreviewServer {
|
|
112
|
+
url: string;
|
|
113
|
+
stop: () => void;
|
|
114
|
+
}
|
|
115
|
+
interface PreviewServerOpts {
|
|
116
|
+
/** Pre-rendered HTML string to serve at GET / */
|
|
117
|
+
html?: string;
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* Start a preview server rooted at `systemDir`.
|
|
121
|
+
*
|
|
122
|
+
* When `opts.html` is provided, GET / returns that HTML string directly;
|
|
123
|
+
* all other paths serve static files from systemDir (fonts, images, etc.).
|
|
124
|
+
*/
|
|
125
|
+
declare function startPreviewServer(systemDir: string, opts: PreviewServerOpts): Promise<PreviewServer>;
|
|
126
|
+
|
|
127
|
+
export { type ComponentEntry, type ComponentInfo, type ComponentRegistry, type PreviewServer, type PreviewServerOpts, type RenderResult, type ResolvedDeps, type SystemInfo, buildPreviewHtml, buildRegistry, bundleJs, findComponent, formatValue, generateTokensCss, listComponents, listSystems, loadTokens, renderMarkup, resolveMarkup, startPreviewServer, systemDir, systemExists, toCssVarName, walkTokens };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import {
|
|
2
|
+
buildPreviewHtml,
|
|
3
|
+
buildRegistry,
|
|
4
|
+
bundleJs,
|
|
5
|
+
findComponent,
|
|
6
|
+
formatValue,
|
|
7
|
+
generateTokensCss,
|
|
8
|
+
listComponents,
|
|
9
|
+
listSystems,
|
|
10
|
+
loadTokens,
|
|
11
|
+
resolveMarkup,
|
|
12
|
+
startPreviewServer,
|
|
13
|
+
systemDir,
|
|
14
|
+
systemExists,
|
|
15
|
+
toCssVarName,
|
|
16
|
+
walkTokens
|
|
17
|
+
} from "./chunk-U44UTENA.js";
|
|
18
|
+
|
|
19
|
+
// src/render.ts
|
|
20
|
+
async function renderMarkup(system, markup) {
|
|
21
|
+
const registry = buildRegistry(system);
|
|
22
|
+
const deps = resolveMarkup(registry, markup);
|
|
23
|
+
const js = await bundleJs(system);
|
|
24
|
+
const html = buildPreviewHtml(system, markup, deps, js ?? void 0);
|
|
25
|
+
return {
|
|
26
|
+
html,
|
|
27
|
+
unmatchedTags: deps.unmatchedTags
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
export {
|
|
31
|
+
buildPreviewHtml,
|
|
32
|
+
buildRegistry,
|
|
33
|
+
bundleJs,
|
|
34
|
+
findComponent,
|
|
35
|
+
formatValue,
|
|
36
|
+
generateTokensCss,
|
|
37
|
+
listComponents,
|
|
38
|
+
listSystems,
|
|
39
|
+
loadTokens,
|
|
40
|
+
renderMarkup,
|
|
41
|
+
resolveMarkup,
|
|
42
|
+
startPreviewServer,
|
|
43
|
+
systemDir,
|
|
44
|
+
systemExists,
|
|
45
|
+
toCssVarName,
|
|
46
|
+
walkTokens
|
|
47
|
+
};
|
package/package.json
CHANGED
|
@@ -1,20 +1,29 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sourcescape/ds-cli",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "CLI for browsing design system definitions",
|
|
6
6
|
"license": "MIT",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./dist/index.js",
|
|
10
|
+
"types": "./dist/index.d.ts"
|
|
11
|
+
}
|
|
12
|
+
},
|
|
7
13
|
"bin": {
|
|
8
14
|
"design-system": "./dist/cli.js"
|
|
9
15
|
},
|
|
10
16
|
"files": ["dist"],
|
|
11
17
|
"scripts": {
|
|
12
|
-
"build": "tsup src/cli.ts --format esm --dts --clean",
|
|
18
|
+
"build": "tsup src/cli.ts src/index.ts --format esm --dts --clean",
|
|
13
19
|
"prepublishOnly": "npm run build"
|
|
14
20
|
},
|
|
15
21
|
"engines": {
|
|
16
22
|
"node": ">=18"
|
|
17
23
|
},
|
|
24
|
+
"dependencies": {
|
|
25
|
+
"esbuild": "^0.25.0"
|
|
26
|
+
},
|
|
18
27
|
"devDependencies": {
|
|
19
28
|
"tsup": "^8.0.0",
|
|
20
29
|
"typescript": "^5.0.0"
|