@lerret/cli 0.1.0 → 0.1.2
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 +49 -0
- package/dist-studio/.bundle-stamp +1 -1
- package/package.json +11 -8
- package/src/dev.js +15 -0
package/README.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# lerret
|
|
2
|
+
|
|
3
|
+
> An open-source design canvas where a folder of plain React component files renders as a visual canvas.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@lerret/cli)
|
|
6
|
+
[](https://github.com/belikely-united/lerret/blob/main/LICENSE)
|
|
7
|
+
|
|
8
|
+
Lerret turns a folder of `.jsx`/`.tsx` components into a live, navigable canvas — pan-and-zoom artboards, sub-second hot reload on save, and headless export to image files. No proprietary format, no backend, no account required.
|
|
9
|
+
|
|
10
|
+
## Quick start
|
|
11
|
+
|
|
12
|
+
```sh
|
|
13
|
+
npx create-lerret my-canvas
|
|
14
|
+
cd my-canvas
|
|
15
|
+
npx @lerret/cli dev
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
The studio opens in your browser. Save any `.jsx` file under `.lerret/` and the canvas re-renders.
|
|
19
|
+
|
|
20
|
+
## What's in the package
|
|
21
|
+
|
|
22
|
+
This package ships the `lerret` binary:
|
|
23
|
+
|
|
24
|
+
- `lerret dev` — run the studio against a `.lerret/` folder (Vite dev server + bundled studio).
|
|
25
|
+
- `lerret export` — headlessly render a project (or page/group) to image files.
|
|
26
|
+
|
|
27
|
+
After installing globally (`npm install -g @lerret/cli`), the command is just `lerret`.
|
|
28
|
+
|
|
29
|
+
## Requirements
|
|
30
|
+
|
|
31
|
+
- Node.js ≥ 20.19
|
|
32
|
+
- A Chromium-based browser (Chrome, Edge, Brave, Arc) for the studio. The CLI itself works anywhere Node runs.
|
|
33
|
+
|
|
34
|
+
## Documentation
|
|
35
|
+
|
|
36
|
+
Full docs: **https://lerret-docs.web.app** *(custom domain `docs.lerret.belikely.com` coming soon)*
|
|
37
|
+
|
|
38
|
+
- [Getting Started](https://lerret-docs.web.app/getting-started/)
|
|
39
|
+
- [Concepts — the folder-canvas model](https://lerret-docs.web.app/concepts/)
|
|
40
|
+
- [Authoring Assets](https://lerret-docs.web.app/authoring/)
|
|
41
|
+
- [CLI Reference](https://lerret-docs.web.app/cli/)
|
|
42
|
+
|
|
43
|
+
## Source
|
|
44
|
+
|
|
45
|
+
[github.com/belikely-united/lerret](https://github.com/belikely-united/lerret) — issues, discussions, contributions welcome.
|
|
46
|
+
|
|
47
|
+
## License
|
|
48
|
+
|
|
49
|
+
[MIT](https://github.com/belikely-united/lerret/blob/main/LICENSE)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lerret/cli",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "The `lerret` design canvas CLI — a folder of plain React component files renders as a visual canvas. Includes the Vite dev server, headless export, and the bundled studio.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -34,18 +34,21 @@
|
|
|
34
34
|
"cli",
|
|
35
35
|
"local-first"
|
|
36
36
|
],
|
|
37
|
+
"scripts": {
|
|
38
|
+
"test": "vitest run",
|
|
39
|
+
"build": "pnpm --filter @lerret/studio build:cli && node scripts/bundle-studio.js",
|
|
40
|
+
"prepublishOnly": "pnpm --filter @lerret/studio build:cli && node scripts/bundle-studio.js"
|
|
41
|
+
},
|
|
37
42
|
"dependencies": {
|
|
43
|
+
"@lerret/core": "workspace:^",
|
|
38
44
|
"@vitejs/plugin-react": "^6.0.2",
|
|
39
45
|
"chokidar": "^5.0.0",
|
|
40
46
|
"playwright-core": "^1.60.0",
|
|
41
|
-
"
|
|
42
|
-
"
|
|
47
|
+
"react": "^19.2.0",
|
|
48
|
+
"react-dom": "^19.2.0",
|
|
49
|
+
"vite": "^8.0.0"
|
|
43
50
|
},
|
|
44
51
|
"devDependencies": {
|
|
45
52
|
"vitest": "^4.1.6"
|
|
46
|
-
},
|
|
47
|
-
"scripts": {
|
|
48
|
-
"test": "vitest run",
|
|
49
|
-
"build": "pnpm --filter @lerret/studio build:cli && node scripts/bundle-studio.js"
|
|
50
53
|
}
|
|
51
|
-
}
|
|
54
|
+
}
|
package/src/dev.js
CHANGED
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
import { parseArgs } from 'node:util';
|
|
32
32
|
import { dirname, resolve } from 'node:path';
|
|
33
33
|
import { fileURLToPath } from 'node:url';
|
|
34
|
+
import { createRequire } from 'node:module';
|
|
34
35
|
|
|
35
36
|
import { realpathOrSelf, pathExists } from './fs/node-backend.js';
|
|
36
37
|
import { resolveProject } from './resolve-project.js';
|
|
@@ -293,12 +294,26 @@ export async function runDev(argv) {
|
|
|
293
294
|
|
|
294
295
|
const workspaceRoot = searchForWorkspaceRoot(studioRoot);
|
|
295
296
|
|
|
297
|
+
// The user's `.jsx` assets get transformed by Vite/esbuild into imports
|
|
298
|
+
// of `react/jsx-dev-runtime`. The user's project has no `node_modules`,
|
|
299
|
+
// so those imports must resolve against the CLI's own React. Alias the
|
|
300
|
+
// bare specifiers to the CLI-bundled copy.
|
|
301
|
+
const cliRequire = createRequire(import.meta.url);
|
|
302
|
+
const reactAliases = [
|
|
303
|
+
{ find: 'react/jsx-dev-runtime', replacement: cliRequire.resolve('react/jsx-dev-runtime') },
|
|
304
|
+
{ find: 'react/jsx-runtime', replacement: cliRequire.resolve('react/jsx-runtime') },
|
|
305
|
+
{ find: 'react-dom/client', replacement: cliRequire.resolve('react-dom/client') },
|
|
306
|
+
{ find: /^react-dom$/, replacement: cliRequire.resolve('react-dom') },
|
|
307
|
+
{ find: /^react$/, replacement: cliRequire.resolve('react') },
|
|
308
|
+
];
|
|
309
|
+
|
|
296
310
|
const server = await createServer({
|
|
297
311
|
// Don't pick up the studio's own `vite.config.js` (it has a fixture
|
|
298
312
|
// alias the CLI doesn't want); we hand Vite a clean inline config.
|
|
299
313
|
configFile: false,
|
|
300
314
|
root: studioRoot,
|
|
301
315
|
plugins,
|
|
316
|
+
resolve: { alias: reactAliases },
|
|
302
317
|
server: {
|
|
303
318
|
port: flags.port,
|
|
304
319
|
open: flags.open,
|