@stackable-labs/cli-app-extension 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 +71 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,9 +1,77 @@
|
|
|
1
1
|
# @stackable-labs/cli-app-extension
|
|
2
2
|
|
|
3
|
-
CLI for scaffolding Stackable extension projects
|
|
3
|
+
CLI for scaffolding new [Stackable](https://www.npmjs.com/package/@stackable-labs/sdk-extension-react) extension projects.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Quick Start
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
|
|
8
|
+
npx @stackable-labs/cli-app-extension my-extension
|
|
9
9
|
```
|
|
10
|
+
|
|
11
|
+
Or run interactively with no arguments:
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npx @stackable-labs/cli-app-extension
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Interactive Mode
|
|
18
|
+
|
|
19
|
+
When run without all required flags, the CLI guides you through a step-by-step prompt flow:
|
|
20
|
+
|
|
21
|
+
| Step | Prompt | Description |
|
|
22
|
+
|---|---|---|
|
|
23
|
+
| 1 | **Name** | Display name for your extension (e.g. `My Commerce Extension`) |
|
|
24
|
+
| 2 | **ID** | Unique extension ID, auto-derived as kebab-case from name (e.g. `my-commerce-extension`) |
|
|
25
|
+
| 3 | **Targets** | Multiselect slot targets: `slot.header`, `slot.content`, `slot.footer`, `slot.footer-links` |
|
|
26
|
+
| 4 | **Extension Port** | Dev server port for the extension (default: `5173`) |
|
|
27
|
+
| 5 | **Preview Port** | Dev server port for the preview host (default: extension port + 1) |
|
|
28
|
+
| 6 | **Directory** | Output directory path (default: kebab-case of name) |
|
|
29
|
+
| 7 | **Confirm** | Review all selections before scaffolding |
|
|
30
|
+
|
|
31
|
+
## CLI Flags
|
|
32
|
+
|
|
33
|
+
```
|
|
34
|
+
Usage: create-extension [name] [options]
|
|
35
|
+
|
|
36
|
+
Options:
|
|
37
|
+
--id <id> Extension ID (skips ID prompt)
|
|
38
|
+
--targets <targets> Comma-separated slot targets (skips targets prompt)
|
|
39
|
+
--extension-port <port> Extension dev server port (skips port prompt)
|
|
40
|
+
--preview-port <port> Preview host dev server port (skips port prompt)
|
|
41
|
+
--skip-install Skip package manager install after scaffolding
|
|
42
|
+
--skip-git Skip git initialization
|
|
43
|
+
-h, --help Display help
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Scaffolded Project Structure
|
|
47
|
+
|
|
48
|
+
```
|
|
49
|
+
my-extension/
|
|
50
|
+
├── packages/
|
|
51
|
+
│ ├── extension/ ← Extension source (Vite + React)
|
|
52
|
+
│ │ ├── src/
|
|
53
|
+
│ │ │ ├── index.tsx ← Extension entry point
|
|
54
|
+
│ │ │ └── surfaces/ ← One component per selected target slot
|
|
55
|
+
│ │ ├── manifest.json ← Extension manifest (id, targets, permissions)
|
|
56
|
+
│ │ └── .env ← EXTENSION_PORT, PREVIEW_PORT
|
|
57
|
+
│ └── preview/ ← Preview host app (Vite + React)
|
|
58
|
+
│ └── src/
|
|
59
|
+
│ └── App.tsx ← Host app wiring up the extension
|
|
60
|
+
├── turbo.json
|
|
61
|
+
└── package.json
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## Development Workflow
|
|
65
|
+
|
|
66
|
+
```bash
|
|
67
|
+
cd my-extension
|
|
68
|
+
pnpm install # if --skip-install was used
|
|
69
|
+
pnpm dev # starts both extension + preview with hot-reload
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
The preview host runs at the configured preview port and hot-reloads whenever the extension changes.
|
|
73
|
+
|
|
74
|
+
## Requirements
|
|
75
|
+
|
|
76
|
+
- Node 20+
|
|
77
|
+
- pnpm (recommended) or npm/yarn
|