@westopp/windo 0.1.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/LICENSE +21 -0
- package/README.md +146 -0
- package/dist/chunk-5RM2VYAM.js +150 -0
- package/dist/chunk-5RM2VYAM.js.map +1 -0
- package/dist/cli.cjs +303 -0
- package/dist/cli.cjs.map +1 -0
- package/dist/cli.d.cts +1 -0
- package/dist/cli.d.ts +1 -0
- package/dist/cli.js +138 -0
- package/dist/cli.js.map +1 -0
- package/dist/index.cjs +219 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +374 -0
- package/dist/index.d.ts +374 -0
- package/dist/index.js +182 -0
- package/dist/index.js.map +1 -0
- package/dist/plugin.cjs +185 -0
- package/dist/plugin.cjs.map +1 -0
- package/dist/plugin.d.cts +11 -0
- package/dist/plugin.d.ts +11 -0
- package/dist/plugin.js +11 -0
- package/dist/plugin.js.map +1 -0
- package/package.json +95 -0
- package/src/cli/index.ts +160 -0
- package/src/client/App.tsx +310 -0
- package/src/client/Canvas.tsx +358 -0
- package/src/client/Inspector.tsx +586 -0
- package/src/client/Sidebar.tsx +108 -0
- package/src/client/bridge.ts +124 -0
- package/src/client/chrome.css +1966 -0
- package/src/client/icons.tsx +110 -0
- package/src/client/index.ts +15 -0
- package/src/client/internal-types.ts +147 -0
- package/src/client/persist.ts +38 -0
- package/src/define-config.ts +54 -0
- package/src/descriptor.test.ts +59 -0
- package/src/descriptor.ts +185 -0
- package/src/globals.d.ts +9 -0
- package/src/index.ts +54 -0
- package/src/plugin/index.ts +181 -0
- package/src/preview/ctx.ts +43 -0
- package/src/preview/index.ts +283 -0
- package/src/preview/preview.css +81 -0
- package/src/preview/registry.ts +159 -0
- package/src/preview/render.tsx +90 -0
- package/src/preview/virtual.d.ts +8 -0
- package/src/protocol.ts +59 -0
- package/src/types.ts +319 -0
package/dist/plugin.cjs
ADDED
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/plugin/index.ts
|
|
31
|
+
var plugin_exports = {};
|
|
32
|
+
__export(plugin_exports, {
|
|
33
|
+
default: () => plugin_default,
|
|
34
|
+
windo: () => windo,
|
|
35
|
+
windoPlugin: () => windoPlugin
|
|
36
|
+
});
|
|
37
|
+
module.exports = __toCommonJS(plugin_exports);
|
|
38
|
+
var import_node_fs = require("fs");
|
|
39
|
+
var import_node_path = require("path");
|
|
40
|
+
var import_plugin_react = __toESM(require("@vitejs/plugin-react"), 1);
|
|
41
|
+
var VIRTUAL_ID = "virtual:windo-registry";
|
|
42
|
+
var RESOLVED_VIRTUAL_ID = `\0${VIRTUAL_ID}`;
|
|
43
|
+
var CONFIG_CANDIDATES = ["windo.config.ts", "windo.config.tsx", "windo.config.mts", "windo.config.js", "windo.config.mjs"];
|
|
44
|
+
function findConfig(root, configOpt) {
|
|
45
|
+
if (configOpt) return (0, import_node_path.isAbsolute)(configOpt) ? configOpt : (0, import_node_path.resolve)(root, configOpt);
|
|
46
|
+
for (const candidate of CONFIG_CANDIDATES) {
|
|
47
|
+
const full = (0, import_node_path.resolve)(root, candidate);
|
|
48
|
+
if ((0, import_node_fs.existsSync)(full)) return full;
|
|
49
|
+
}
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
function toGlob(include) {
|
|
53
|
+
const first = Array.isArray(include) ? include[0] : include;
|
|
54
|
+
const pattern = first ?? "**/*.windo.tsx";
|
|
55
|
+
return pattern.startsWith("/") ? pattern : `/${pattern}`;
|
|
56
|
+
}
|
|
57
|
+
var CHROME_HTML = `<!doctype html>
|
|
58
|
+
<html data-theme="light">
|
|
59
|
+
<head>
|
|
60
|
+
<meta charset="utf-8" />
|
|
61
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
62
|
+
<title>windo</title>
|
|
63
|
+
</head>
|
|
64
|
+
<body>
|
|
65
|
+
<div id="root"></div>
|
|
66
|
+
<script type="module">
|
|
67
|
+
import('@westopp/windo/client')
|
|
68
|
+
</script>
|
|
69
|
+
</body>
|
|
70
|
+
</html>
|
|
71
|
+
`;
|
|
72
|
+
var IFRAME_HTML = `<!doctype html>
|
|
73
|
+
<html>
|
|
74
|
+
<head>
|
|
75
|
+
<meta charset="utf-8" />
|
|
76
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
77
|
+
</head>
|
|
78
|
+
<body style="background: transparent">
|
|
79
|
+
<div id="root"></div>
|
|
80
|
+
<script type="module">
|
|
81
|
+
import('@westopp/windo/preview')
|
|
82
|
+
</script>
|
|
83
|
+
</body>
|
|
84
|
+
</html>
|
|
85
|
+
`;
|
|
86
|
+
function htmlIds(root) {
|
|
87
|
+
return {
|
|
88
|
+
index: (0, import_node_path.resolve)(root, "index.html"),
|
|
89
|
+
iframe: (0, import_node_path.resolve)(root, "__windo/iframe.html")
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
function windo(options = {}) {
|
|
93
|
+
let resolvedRoot = process.cwd();
|
|
94
|
+
let ids = htmlIds(resolvedRoot);
|
|
95
|
+
const registryModule = () => {
|
|
96
|
+
const root = options.root ?? resolvedRoot ?? process.cwd();
|
|
97
|
+
const configPath = findConfig(root, options.config);
|
|
98
|
+
const glob = toGlob(options.include);
|
|
99
|
+
const importPath = configPath ? JSON.stringify(configPath) : "null";
|
|
100
|
+
const globLiteral = JSON.stringify(glob);
|
|
101
|
+
return [
|
|
102
|
+
`import * as __cfg from ${importPath}`,
|
|
103
|
+
"const config = __cfg.config ?? (__cfg.default && __cfg.default.config) ?? __cfg.default",
|
|
104
|
+
"export { config }",
|
|
105
|
+
`export const modules = import.meta.glob(${globLiteral})`,
|
|
106
|
+
""
|
|
107
|
+
].join("\n");
|
|
108
|
+
};
|
|
109
|
+
const plugin = {
|
|
110
|
+
name: "windo",
|
|
111
|
+
// `pre` so our resolveId/load claim the virtual registry and the two HTML
|
|
112
|
+
// entries before Vite's filesystem fallback tries (and fails) to read them.
|
|
113
|
+
enforce: "pre",
|
|
114
|
+
config(userConfig, { command, isPreview }) {
|
|
115
|
+
const root = (0, import_node_path.resolve)(options.root ?? userConfig.root ?? ".");
|
|
116
|
+
ids = htmlIds(root);
|
|
117
|
+
const base = {
|
|
118
|
+
// Dev serves the chrome + iframe HTML from `configureServer`, so it runs
|
|
119
|
+
// headless (`custom`). Build and preview want the normal SPA behaviour so
|
|
120
|
+
// `/` resolves to the emitted index.html.
|
|
121
|
+
appType: command === "serve" && !isPreview ? "custom" : "spa",
|
|
122
|
+
define: {
|
|
123
|
+
__WINDO_IFRAME_SRC__: JSON.stringify(command === "build" ? "./__windo/iframe.html" : "./__windo/iframe")
|
|
124
|
+
},
|
|
125
|
+
resolve: {
|
|
126
|
+
dedupe: ["react", "react-dom"]
|
|
127
|
+
},
|
|
128
|
+
optimizeDeps: {
|
|
129
|
+
// Pre-bundle every React entrypoint in one pass so React's identity is
|
|
130
|
+
// fixed up front. If `react-dom/client` (the preview renderer) is
|
|
131
|
+
// discovered late, Vite re-optimizes and can split React across two
|
|
132
|
+
// instances — fine until a component calls a hook, then "invalid hook
|
|
133
|
+
// call". Keeping them all here prevents that re-optimize.
|
|
134
|
+
include: ["react", "react-dom", "react-dom/client", "react/jsx-runtime", "react/jsx-dev-runtime"]
|
|
135
|
+
}
|
|
136
|
+
};
|
|
137
|
+
if (command === "build" && !userConfig.build?.rollupOptions?.input) {
|
|
138
|
+
base.build = { rollupOptions: { input: { index: ids.index, iframe: ids.iframe } } };
|
|
139
|
+
}
|
|
140
|
+
return base;
|
|
141
|
+
},
|
|
142
|
+
configResolved(resolved) {
|
|
143
|
+
resolvedRoot = resolved.root;
|
|
144
|
+
ids = htmlIds(resolvedRoot);
|
|
145
|
+
},
|
|
146
|
+
resolveId(id) {
|
|
147
|
+
if (id === VIRTUAL_ID) return RESOLVED_VIRTUAL_ID;
|
|
148
|
+
if (id === ids.index || id === ids.iframe) return id;
|
|
149
|
+
return null;
|
|
150
|
+
},
|
|
151
|
+
load(id) {
|
|
152
|
+
if (id === RESOLVED_VIRTUAL_ID) return registryModule();
|
|
153
|
+
if (id === ids.index) return CHROME_HTML;
|
|
154
|
+
if (id === ids.iframe) return IFRAME_HTML;
|
|
155
|
+
return null;
|
|
156
|
+
},
|
|
157
|
+
configureServer(server) {
|
|
158
|
+
server.middlewares.use(async (req, res, next) => {
|
|
159
|
+
if (req.method !== "GET") return next();
|
|
160
|
+
const url = (req.url ?? "").split("?")[0];
|
|
161
|
+
let html = null;
|
|
162
|
+
if (url === "/" || url === "/index.html") html = CHROME_HTML;
|
|
163
|
+
else if (url.startsWith("/__windo/iframe")) html = IFRAME_HTML;
|
|
164
|
+
if (html === null) return next();
|
|
165
|
+
try {
|
|
166
|
+
const transformed = await server.transformIndexHtml(url, html);
|
|
167
|
+
res.statusCode = 200;
|
|
168
|
+
res.setHeader("Content-Type", "text/html");
|
|
169
|
+
res.end(transformed);
|
|
170
|
+
} catch (err) {
|
|
171
|
+
next(err);
|
|
172
|
+
}
|
|
173
|
+
});
|
|
174
|
+
}
|
|
175
|
+
};
|
|
176
|
+
return [(0, import_plugin_react.default)(), plugin];
|
|
177
|
+
}
|
|
178
|
+
var windoPlugin = windo;
|
|
179
|
+
var plugin_default = windo;
|
|
180
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
181
|
+
0 && (module.exports = {
|
|
182
|
+
windo,
|
|
183
|
+
windoPlugin
|
|
184
|
+
});
|
|
185
|
+
//# sourceMappingURL=plugin.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/plugin/index.ts"],"sourcesContent":["// Vite plugin (node side). Pairs `@vitejs/plugin-react` with the windo plugin:\n// serves the chrome + iframe HTML documents ourselves (appType custom) and\n// exposes a `virtual:windo-registry` module that re-exports the user config and\n// glob-imports every `*.windo.tsx` file.\n\nimport { existsSync } from 'node:fs'\nimport { isAbsolute, resolve as resolvePath } from 'node:path'\nimport reactPlugin from '@vitejs/plugin-react'\nimport type { Plugin, PluginOption, UserConfig, ViteDevServer } from 'vite'\n\nexport interface WindoPluginOptions {\n include?: string | string[]\n config?: string\n root?: string\n}\n\nconst VIRTUAL_ID = 'virtual:windo-registry'\nconst RESOLVED_VIRTUAL_ID = `\\0${VIRTUAL_ID}`\n\nconst CONFIG_CANDIDATES = ['windo.config.ts', 'windo.config.tsx', 'windo.config.mts', 'windo.config.js', 'windo.config.mjs'] as const\n\nfunction findConfig(root: string, configOpt?: string): string | null {\n if (configOpt) return isAbsolute(configOpt) ? configOpt : resolvePath(root, configOpt)\n for (const candidate of CONFIG_CANDIDATES) {\n const full = resolvePath(root, candidate)\n if (existsSync(full)) return full\n }\n return null\n}\n\nfunction toGlob(include?: string | string[]): string {\n const first = Array.isArray(include) ? include[0] : include\n const pattern = first ?? '**/*.windo.tsx'\n return pattern.startsWith('/') ? pattern : `/${pattern}`\n}\n\nconst CHROME_HTML = `<!doctype html>\n<html data-theme=\"light\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <title>windo</title>\n </head>\n <body>\n <div id=\"root\"></div>\n <script type=\"module\">\n import('@westopp/windo/client')\n </script>\n </body>\n</html>\n`\n\nconst IFRAME_HTML = `<!doctype html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n </head>\n <body style=\"background: transparent\">\n <div id=\"root\"></div>\n <script type=\"module\">\n import('@westopp/windo/preview')\n </script>\n </body>\n</html>\n`\n\n// Absolute ids for the two HTML entry documents, relative to the project root.\n// They are virtual — the files need not exist on disk; the plugin's `load`\n// returns their contents. Keeping them rooted at `<root>/index.html` and\n// `<root>/__windo/iframe.html` makes `vite build` emit them at the matching\n// paths in the output directory (Vite derives an HTML asset's output path from\n// the input id's path relative to root).\nfunction htmlIds(root: string) {\n return {\n index: resolvePath(root, 'index.html'),\n iframe: resolvePath(root, '__windo/iframe.html'),\n }\n}\n\nexport function windo(options: WindoPluginOptions = {}): PluginOption[] {\n let resolvedRoot = process.cwd()\n let ids = htmlIds(resolvedRoot)\n\n const registryModule = (): string => {\n const root = options.root ?? resolvedRoot ?? process.cwd()\n const configPath = findConfig(root, options.config)\n const glob = toGlob(options.include)\n const importPath = configPath ? JSON.stringify(configPath) : 'null'\n const globLiteral = JSON.stringify(glob)\n return [\n `import * as __cfg from ${importPath}`,\n 'const config = __cfg.config ?? (__cfg.default && __cfg.default.config) ?? __cfg.default',\n 'export { config }',\n `export const modules = import.meta.glob(${globLiteral})`,\n '',\n ].join('\\n')\n }\n\n const plugin: Plugin = {\n name: 'windo',\n // `pre` so our resolveId/load claim the virtual registry and the two HTML\n // entries before Vite's filesystem fallback tries (and fails) to read them.\n enforce: 'pre',\n\n config(userConfig: UserConfig, { command, isPreview }) {\n const root = resolvePath(options.root ?? userConfig.root ?? '.')\n ids = htmlIds(root)\n const base: UserConfig = {\n // Dev serves the chrome + iframe HTML from `configureServer`, so it runs\n // headless (`custom`). Build and preview want the normal SPA behaviour so\n // `/` resolves to the emitted index.html.\n appType: command === 'serve' && !isPreview ? 'custom' : 'spa',\n define: {\n __WINDO_IFRAME_SRC__: JSON.stringify(command === 'build' ? './__windo/iframe.html' : './__windo/iframe'),\n },\n resolve: {\n dedupe: ['react', 'react-dom'],\n },\n optimizeDeps: {\n // Pre-bundle every React entrypoint in one pass so React's identity is\n // fixed up front. If `react-dom/client` (the preview renderer) is\n // discovered late, Vite re-optimizes and can split React across two\n // instances — fine until a component calls a hook, then \"invalid hook\n // call\". Keeping them all here prevents that re-optimize.\n include: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime', 'react/jsx-dev-runtime'],\n },\n }\n\n // Wire the chrome + iframe as build inputs unless the user supplied their\n // own. Both are emitted as static HTML the canvas can be hosted from.\n if (command === 'build' && !userConfig.build?.rollupOptions?.input) {\n base.build = { rollupOptions: { input: { index: ids.index, iframe: ids.iframe } } }\n }\n return base\n },\n\n configResolved(resolved) {\n resolvedRoot = resolved.root\n ids = htmlIds(resolvedRoot)\n },\n\n resolveId(id) {\n if (id === VIRTUAL_ID) return RESOLVED_VIRTUAL_ID\n if (id === ids.index || id === ids.iframe) return id\n return null\n },\n\n load(id) {\n if (id === RESOLVED_VIRTUAL_ID) return registryModule()\n if (id === ids.index) return CHROME_HTML\n if (id === ids.iframe) return IFRAME_HTML\n return null\n },\n\n configureServer(server: ViteDevServer) {\n server.middlewares.use(async (req, res, next) => {\n if (req.method !== 'GET') return next()\n const url = (req.url ?? '').split('?')[0]\n let html: string | null = null\n if (url === '/' || url === '/index.html') html = CHROME_HTML\n else if (url.startsWith('/__windo/iframe')) html = IFRAME_HTML\n if (html === null) return next()\n try {\n const transformed = await server.transformIndexHtml(url, html)\n res.statusCode = 200\n res.setHeader('Content-Type', 'text/html')\n res.end(transformed)\n } catch (err) {\n next(err)\n }\n })\n },\n }\n\n return [reactPlugin(), plugin]\n}\n\nexport const windoPlugin = windo\n\nexport default windo\n"],"mappings":"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","names":["resolvePath","reactPlugin"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { PluginOption } from 'vite';
|
|
2
|
+
|
|
3
|
+
interface WindoPluginOptions {
|
|
4
|
+
include?: string | string[];
|
|
5
|
+
config?: string;
|
|
6
|
+
root?: string;
|
|
7
|
+
}
|
|
8
|
+
declare function windo(options?: WindoPluginOptions): PluginOption[];
|
|
9
|
+
declare const windoPlugin: typeof windo;
|
|
10
|
+
|
|
11
|
+
export { type WindoPluginOptions, windo as default, windo, windoPlugin };
|
package/dist/plugin.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { PluginOption } from 'vite';
|
|
2
|
+
|
|
3
|
+
interface WindoPluginOptions {
|
|
4
|
+
include?: string | string[];
|
|
5
|
+
config?: string;
|
|
6
|
+
root?: string;
|
|
7
|
+
}
|
|
8
|
+
declare function windo(options?: WindoPluginOptions): PluginOption[];
|
|
9
|
+
declare const windoPlugin: typeof windo;
|
|
10
|
+
|
|
11
|
+
export { type WindoPluginOptions, windo as default, windo, windoPlugin };
|
package/dist/plugin.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/package.json
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@westopp/windo",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Zero-infra component canvas — point it at *.windo.tsx files and get a resizable preview with live props, variants, and context",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/westopp/westopp-libraries.git",
|
|
10
|
+
"directory": "packages/windo"
|
|
11
|
+
},
|
|
12
|
+
"keywords": [
|
|
13
|
+
"react",
|
|
14
|
+
"storybook",
|
|
15
|
+
"component",
|
|
16
|
+
"workbench",
|
|
17
|
+
"canvas",
|
|
18
|
+
"vite",
|
|
19
|
+
"zod"
|
|
20
|
+
],
|
|
21
|
+
"publishConfig": {
|
|
22
|
+
"access": "public"
|
|
23
|
+
},
|
|
24
|
+
"bin": {
|
|
25
|
+
"windo": "./dist/cli.js"
|
|
26
|
+
},
|
|
27
|
+
"main": "./dist/index.cjs",
|
|
28
|
+
"module": "./dist/index.js",
|
|
29
|
+
"types": "./dist/index.d.ts",
|
|
30
|
+
"source": "./src/index.ts",
|
|
31
|
+
"exports": {
|
|
32
|
+
".": {
|
|
33
|
+
"source": "./src/index.ts",
|
|
34
|
+
"import": {
|
|
35
|
+
"types": "./dist/index.d.ts",
|
|
36
|
+
"default": "./dist/index.js"
|
|
37
|
+
},
|
|
38
|
+
"require": {
|
|
39
|
+
"types": "./dist/index.d.cts",
|
|
40
|
+
"default": "./dist/index.cjs"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
"./plugin": {
|
|
44
|
+
"source": "./src/plugin/index.ts",
|
|
45
|
+
"import": {
|
|
46
|
+
"types": "./dist/plugin.d.ts",
|
|
47
|
+
"default": "./dist/plugin.js"
|
|
48
|
+
},
|
|
49
|
+
"require": {
|
|
50
|
+
"types": "./dist/plugin.d.cts",
|
|
51
|
+
"default": "./dist/plugin.cjs"
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
"./client": "./src/client/index.ts",
|
|
55
|
+
"./preview": "./src/preview/index.ts",
|
|
56
|
+
"./package.json": "./package.json"
|
|
57
|
+
},
|
|
58
|
+
"files": [
|
|
59
|
+
"dist",
|
|
60
|
+
"src"
|
|
61
|
+
],
|
|
62
|
+
"scripts": {
|
|
63
|
+
"build": "tsup",
|
|
64
|
+
"dev": "tsup --watch",
|
|
65
|
+
"typecheck": "tsc -b",
|
|
66
|
+
"lint": "biome lint .",
|
|
67
|
+
"lint:fix": "biome lint --write .",
|
|
68
|
+
"format": "biome format --write .",
|
|
69
|
+
"format:check": "biome check .",
|
|
70
|
+
"test": "vitest",
|
|
71
|
+
"test:run": "vitest run"
|
|
72
|
+
},
|
|
73
|
+
"peerDependencies": {
|
|
74
|
+
"react": "^19.0.0",
|
|
75
|
+
"react-dom": "^19.0.0",
|
|
76
|
+
"vite": "^7.0.0",
|
|
77
|
+
"zod": "^4.0.0"
|
|
78
|
+
},
|
|
79
|
+
"dependencies": {
|
|
80
|
+
"@vitejs/plugin-react": "^5.0.0",
|
|
81
|
+
"picocolors": "^1.1.0"
|
|
82
|
+
},
|
|
83
|
+
"devDependencies": {
|
|
84
|
+
"@types/node": "^24.6.0",
|
|
85
|
+
"@types/react": "^19.1.16",
|
|
86
|
+
"@types/react-dom": "^19.1.9",
|
|
87
|
+
"react": "^19.0.0",
|
|
88
|
+
"react-dom": "^19.0.0",
|
|
89
|
+
"tsup": "^8.3.0",
|
|
90
|
+
"typescript": "~5.9.3",
|
|
91
|
+
"vite": "^7.1.7",
|
|
92
|
+
"vitest": "^4.0.15",
|
|
93
|
+
"zod": "^4.0.0"
|
|
94
|
+
}
|
|
95
|
+
}
|
package/src/cli/index.ts
ADDED
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
// The package bin. `windo [command] [root] [options]`:
|
|
4
|
+
// dev boot a Vite dev server wired with the windo plugin (default)
|
|
5
|
+
// build emit a static canvas to windo-static/ (drop on any static host)
|
|
6
|
+
// preview serve a built canvas locally
|
|
7
|
+
|
|
8
|
+
import { parseArgs } from 'node:util'
|
|
9
|
+
import pc from 'picocolors'
|
|
10
|
+
import { build, createServer, preview } from 'vite'
|
|
11
|
+
import { windoPlugin } from '../plugin'
|
|
12
|
+
|
|
13
|
+
const VERSION = '0.1.0'
|
|
14
|
+
|
|
15
|
+
const USAGE = `
|
|
16
|
+
${pc.bold('windo')} ${pc.dim(`v${VERSION}`)} — zero-infra component canvas
|
|
17
|
+
|
|
18
|
+
${pc.bold('Usage')}
|
|
19
|
+
windo [command] [root] [options]
|
|
20
|
+
|
|
21
|
+
${pc.bold('Commands')}
|
|
22
|
+
dev Start the dev server (default)
|
|
23
|
+
build Emit a static canvas to windo-static/
|
|
24
|
+
preview Serve a built canvas locally
|
|
25
|
+
|
|
26
|
+
${pc.bold('Options')}
|
|
27
|
+
-p, --port <n> Port to listen on (dev, preview)
|
|
28
|
+
--host [host] Expose on the network (dev, preview)
|
|
29
|
+
-o, --open Open the workbench in the browser (dev, preview)
|
|
30
|
+
-c, --config <p> Path to windo.config.ts (dev, build)
|
|
31
|
+
-d, --outDir <p> Output directory (build, preview) ${pc.dim('[windo-static]')}
|
|
32
|
+
-b, --base <p> Public base path for the build ${pc.dim('[./]')}
|
|
33
|
+
-h, --help Show this help
|
|
34
|
+
`
|
|
35
|
+
|
|
36
|
+
const COMMANDS = new Set(['dev', 'build', 'preview'])
|
|
37
|
+
|
|
38
|
+
async function main() {
|
|
39
|
+
const argv = process.argv.slice(2)
|
|
40
|
+
const first = argv[0]
|
|
41
|
+
|
|
42
|
+
if (first === '-h' || first === '--help') {
|
|
43
|
+
console.log(USAGE)
|
|
44
|
+
return
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// A leading token that names a command selects it; no token (or a flag)
|
|
48
|
+
// defaults to `dev`. Any other leading token is a mistyped command — fail
|
|
49
|
+
// loudly rather than silently treating it as a dev root.
|
|
50
|
+
let command = 'dev'
|
|
51
|
+
let rest = argv
|
|
52
|
+
if (first !== undefined && !first.startsWith('-')) {
|
|
53
|
+
if (!COMMANDS.has(first)) {
|
|
54
|
+
console.error(`${pc.red(`windo: unknown command "${first}".`)}\n${USAGE}`)
|
|
55
|
+
process.exitCode = 1
|
|
56
|
+
return
|
|
57
|
+
}
|
|
58
|
+
command = first
|
|
59
|
+
rest = argv.slice(1)
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
const { values, positionals } = parseArgs({
|
|
63
|
+
args: rest,
|
|
64
|
+
allowPositionals: true,
|
|
65
|
+
options: {
|
|
66
|
+
port: { type: 'string', short: 'p' },
|
|
67
|
+
host: { type: 'string' },
|
|
68
|
+
open: { type: 'boolean', short: 'o' },
|
|
69
|
+
config: { type: 'string', short: 'c' },
|
|
70
|
+
outDir: { type: 'string', short: 'd' },
|
|
71
|
+
base: { type: 'string', short: 'b' },
|
|
72
|
+
help: { type: 'boolean', short: 'h' },
|
|
73
|
+
},
|
|
74
|
+
})
|
|
75
|
+
|
|
76
|
+
if (values.help) {
|
|
77
|
+
console.log(USAGE)
|
|
78
|
+
return
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
// Each command accepts only its own flags; reject the rest so a misplaced
|
|
82
|
+
// `windo build --port` fails instead of silently doing nothing.
|
|
83
|
+
const ALLOWED: Record<string, Set<string>> = {
|
|
84
|
+
dev: new Set(['port', 'host', 'open', 'config', 'help']),
|
|
85
|
+
build: new Set(['config', 'outDir', 'base', 'help']),
|
|
86
|
+
preview: new Set(['port', 'host', 'open', 'outDir', 'help']),
|
|
87
|
+
}
|
|
88
|
+
const stray = Object.keys(values).filter(k => !ALLOWED[command].has(k))
|
|
89
|
+
if (stray.length > 0) {
|
|
90
|
+
console.error(`${pc.red(`windo ${command}: unsupported option${stray.length > 1 ? 's' : ''} ${stray.map(s => `--${s}`).join(', ')}.`)}\n${USAGE}`)
|
|
91
|
+
process.exitCode = 1
|
|
92
|
+
return
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
const root = positionals[0] ? String(positionals[0]) : process.cwd()
|
|
96
|
+
const config = values.config
|
|
97
|
+
|
|
98
|
+
if (command === 'build') {
|
|
99
|
+
const outDir = values.outDir ?? 'windo-static'
|
|
100
|
+
const base = values.base ?? './'
|
|
101
|
+
console.log()
|
|
102
|
+
console.log(` ${pc.bold(pc.cyan('windo'))} ${pc.dim(`v${VERSION}`)} ${pc.dim('build')}`)
|
|
103
|
+
console.log()
|
|
104
|
+
await build({
|
|
105
|
+
root,
|
|
106
|
+
base,
|
|
107
|
+
// Self-contained: don't merge an unrelated vite.config from the project.
|
|
108
|
+
configFile: false,
|
|
109
|
+
plugins: [windoPlugin({ config })],
|
|
110
|
+
build: { outDir, emptyOutDir: true },
|
|
111
|
+
})
|
|
112
|
+
console.log()
|
|
113
|
+
console.log(` ${pc.green('✓')} canvas written to ${pc.cyan(outDir)}`)
|
|
114
|
+
console.log(` ${pc.dim('preview it with')} ${pc.bold('windo preview')}${outDir === 'windo-static' ? '' : ` -d ${outDir}`}`)
|
|
115
|
+
console.log()
|
|
116
|
+
return
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
if (command === 'preview') {
|
|
120
|
+
const outDir = values.outDir ?? 'windo-static'
|
|
121
|
+
const port = values.port === undefined ? undefined : Number(values.port)
|
|
122
|
+
const host = values.host === '' ? true : values.host
|
|
123
|
+
const open = values.open ?? false
|
|
124
|
+
const server = await preview({
|
|
125
|
+
root,
|
|
126
|
+
configFile: false,
|
|
127
|
+
build: { outDir },
|
|
128
|
+
preview: { port, host, open },
|
|
129
|
+
})
|
|
130
|
+
console.log()
|
|
131
|
+
console.log(` ${pc.bold(pc.cyan('windo'))} ${pc.dim(`v${VERSION}`)} ${pc.dim('preview')}`)
|
|
132
|
+
console.log()
|
|
133
|
+
server.printUrls()
|
|
134
|
+
return
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
// dev
|
|
138
|
+
const port = values.port === undefined ? undefined : Number(values.port)
|
|
139
|
+
const host = values.host === '' ? true : values.host
|
|
140
|
+
const open = values.open ?? false
|
|
141
|
+
|
|
142
|
+
const server = await createServer({
|
|
143
|
+
root,
|
|
144
|
+
plugins: [windoPlugin({ config })],
|
|
145
|
+
server: { port, host, open },
|
|
146
|
+
})
|
|
147
|
+
|
|
148
|
+
await server.listen()
|
|
149
|
+
|
|
150
|
+
console.log()
|
|
151
|
+
console.log(` ${pc.bold(pc.cyan('windo'))} ${pc.dim(`v${VERSION}`)}`)
|
|
152
|
+
console.log()
|
|
153
|
+
server.printUrls()
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
main().catch(err => {
|
|
157
|
+
process.exitCode = 1
|
|
158
|
+
console.error(pc.red('windo: command failed.'))
|
|
159
|
+
console.error(err)
|
|
160
|
+
})
|