@svgrid/studio 0.6.1 → 0.8.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.
Files changed (4) hide show
  1. package/LICENSE +10 -3
  2. package/README.md +126 -123
  3. package/dist/cli.js +75 -71
  4. package/package.json +2 -2
package/LICENSE CHANGED
@@ -26,9 +26,16 @@ a non-exclusive, non-transferable, non-sublicensable license to:
26
26
  that all copyright notices and license terms are preserved.
27
27
 
28
28
  The number of developer seats covered is determined by the
29
- Subscriber's SvGrid Pro / Enterprise order. A "developer" is any
30
- individual who runs the Software, or who writes or modifies source
31
- code it generated.
29
+ Subscriber's SvGrid Enterprise order, and the Software is covered by
30
+ the Suite Developer License edition of that order. A Grid Developer
31
+ License does not cover the Software. A "developer" is any individual
32
+ who runs the Software, or who writes or modifies source code it
33
+ generated.
34
+
35
+ Section 1A of the `@svgrid/enterprise` license applies to the Software
36
+ as well: shipping it, or what it generates, to third parties as a
37
+ component, an SDK, or an application builder they build with needs an
38
+ OEM License.
32
39
 
33
40
  Code generated by the Software is owned by the Subscriber and is not
34
41
  subject to Section 2, except that generated code which imports
package/README.md CHANGED
@@ -1,123 +1,126 @@
1
- <p align="center">
2
- <img src="https://svgrid.com/brand/svgrid-logo-icon-1200.png" alt="SvGrid" width="100" height="100" />
3
- </p>
4
-
5
- <h1 align="center">@svgrid/studio</h1>
6
-
7
- <p align="center"><strong>Generate SvelteKit CRUD screens from your database schema.</strong></p>
8
-
9
- <p align="center">
10
- <a href="https://www.npmjs.com/package/@svgrid/studio"><img src="https://img.shields.io/npm/v/%40svgrid%2Fstudio.svg?label=%40svgrid%2Fstudio" alt="npm version" /></a>
11
- <a href="https://svgrid.com/pricing/"><img src="https://img.shields.io/badge/license-commercial-blue.svg" alt="Commercial license" /></a>
12
- </p>
13
-
14
- <p align="center">
15
- <a href="https://svgrid.com">Website</a> ·
16
- <a href="https://svgrid.com/docs/">Docs</a> ·
17
- <a href="https://svgrid.com/pricing/">Pricing</a>
18
- </p>
19
-
20
- ---
21
-
22
- Not sure where to start? Let it ask:
23
-
24
- ```bash
25
- npx @svgrid/studio init
26
- ```
27
-
28
- `init` walks you through it - where your data lives, which tables you want,
29
- which pages each gets - and writes a runnable SvelteKit app: a searchable list,
30
- an edit form and a record page per table, plus an overview dashboard. Point it
31
- straight at a database and it installs the driver for you:
32
-
33
- ```bash
34
- npx @svgrid/studio init --db postgres --url "$DATABASE_URL" --out my-app
35
- ```
36
-
37
- Or scaffold a single CRUD screen into an existing app from a **live database**
38
- or a **Drizzle / Prisma schema** in **one command**:
39
-
40
- ```bash
41
- # from a live database (PostgreSQL / Supabase / MySQL / SQL Server / SQLite)
42
- npx @svgrid/studio add customers --db postgres --url "$DATABASE_URL"
43
-
44
- # or from a schema file - a Drizzle schema.ts or a Prisma schema.prisma
45
- npx @svgrid/studio add customers --from src/lib/db/schema.ts
46
- npx @svgrid/studio add User --from prisma/schema.prisma
47
- ```
48
-
49
- That generates, into your SvelteKit app:
50
-
51
- - `src/lib/customers.schema.ts` - the entity schema + row type
52
- - `src/routes/api/customers/+server.ts` - the API route
53
- - `src/routes/customers/+page.svelte` - a working screen: grid + edit panel, with
54
- search, server sort, pagination, and multi-select (optimistic) delete
55
-
56
- Then:
57
-
58
- ```bash
59
- npm run dev # open /customers
60
- ```
61
-
62
- ## Connect to a database
63
-
64
- Install the driver for your database, then point `--db` / `--url` at it. The CLI
65
- reads the table's columns from the catalog and wires the generated route to that
66
- driver. No driver is bundled.
67
-
68
- | Database | Install | Flag |
69
- | --- | --- | --- |
70
- | PostgreSQL | `pg` | `--db postgres` |
71
- | Supabase | `pg` | `--db supabase` |
72
- | MySQL / MariaDB | `mysql2` | `--db mysql` |
73
- | SQL Server | `mssql` | `--db mssql` |
74
- | SQLite | `better-sqlite3` | `--db sqlite` |
75
-
76
- ```bash
77
- npm i pg
78
- npx @svgrid/studio add --all --db postgres --url "$DATABASE_URL" # every table
79
- npx @svgrid/studio add todos --db sqlite --url ./data.db # one table
80
- ```
81
-
82
- ## Scaffold the whole app from your schema
83
-
84
- `--all --from` reads **every** table/model in a schema file and generates a
85
- screen for each, plus a nav layout and home page. Foreign keys are followed
86
- across the file - a Drizzle `.references()` or a Prisma `@relation` becomes a
87
- searchable lookup, and enums become select fields:
88
-
89
- ```bash
90
- npx @svgrid/studio add --all --from src/lib/db/schema.ts # every Drizzle table
91
- npx @svgrid/studio add --all --from prisma/schema.prisma # every Prisma model
92
- ```
93
-
94
- ## Options
95
-
96
- ```
97
- svgrid-studio add <name> [--from <schema> | --db <dialect> --url <conn>] [options]
98
-
99
- --from <path> Drizzle (.ts) or Prisma (.prisma) schema file to introspect
100
- --db <dialect> Connect to a live database (postgres|supabase|mysql|mssql|sqlite)
101
- --url <conn> Connection string / file path for --db
102
- --all Scaffold a screen for every table/model (with --from or --db)
103
- --table <name> Which table/model to use (defaults to <name>)
104
- --sql Use createSqlDataSource with an execute() stub (instead of a driver)
105
- --route <seg> Route segment (default: <name> / table name)
106
- --api <path> API route path (default: /api/<route>)
107
- ```
108
-
109
- With `--db`, the generated route is fully connected to that driver via
110
- `process.env.DATABASE_URL`. With `--from` (no `--db`) it starts in-memory so the
111
- screen runs immediately; add `--sql` for a `createSqlDataSource` stub you fill
112
- in with any client (Drizzle `db.execute`, postgres.js, better-sqlite3, mysql2).
113
-
114
- ## Regeneration is safe
115
-
116
- Re-running `add` replaces only the `svgrid:managed` regions of each file - your
117
- edits outside those markers are preserved.
118
-
119
- ## Requires
120
-
121
- `@svgrid/grid` and `@svgrid/enterprise` in your project. The Studio is part of the
122
- **Enterprise** license (soft-gate: it works unlicensed, with a nudge). See
123
- [licensing](https://svgrid.com/pricing/).
1
+ <p align="center">
2
+ <img src="https://svgrid.com/brand/svgrid-logo-icon-1200.png" alt="SvGrid" width="100" height="100" />
3
+ </p>
4
+
5
+ <h1 align="center">@svgrid/studio</h1>
6
+
7
+ <p align="center"><strong>Generate SvelteKit CRUD screens from your database schema.</strong></p>
8
+
9
+ <p align="center">
10
+ <a href="https://www.npmjs.com/package/@svgrid/studio"><img src="https://img.shields.io/npm/v/%40svgrid%2Fstudio.svg?label=%40svgrid%2Fstudio" alt="npm version" /></a>
11
+ <a href="https://svgrid.com/pricing/"><img src="https://img.shields.io/badge/license-commercial-blue.svg" alt="Commercial license" /></a>
12
+ </p>
13
+
14
+ <p align="center">
15
+ <a href="https://svgrid.com">Website</a> ·
16
+ <a href="https://svgrid.com/docs/">Docs</a> ·
17
+ <a href="https://svgrid.com/pricing/">Pricing</a>
18
+ </p>
19
+
20
+ ---
21
+
22
+ Not sure where to start? Let it ask:
23
+
24
+ ```bash
25
+ npx @svgrid/studio init
26
+ ```
27
+
28
+ `init` walks you through it - where your data lives, which tables you want,
29
+ which pages each gets - and writes a runnable SvelteKit app: a searchable list,
30
+ an edit form and a record page per table, plus an overview dashboard. Point it
31
+ straight at a database and it installs the driver for you:
32
+
33
+ ```bash
34
+ npx @svgrid/studio init --db postgres --url "$DATABASE_URL" --out my-app
35
+ ```
36
+
37
+ Or scaffold a single CRUD screen into an existing app from a **live database**
38
+ or a **Drizzle / Prisma schema** in **one command**:
39
+
40
+ ```bash
41
+ # from a live database (PostgreSQL / Supabase / MySQL / SQL Server / SQLite)
42
+ npx @svgrid/studio add customers --db postgres --url "$DATABASE_URL"
43
+
44
+ # or from a schema file - a Drizzle schema.ts or a Prisma schema.prisma
45
+ npx @svgrid/studio add customers --from src/lib/db/schema.ts
46
+ npx @svgrid/studio add User --from prisma/schema.prisma
47
+ ```
48
+
49
+ That generates, into your SvelteKit app:
50
+
51
+ - `src/lib/customers.schema.ts` - the entity schema + row type
52
+ - `src/routes/api/customers/+server.ts` - the API route
53
+ - `src/routes/customers/+page.svelte` - a working screen: grid + edit panel, with
54
+ search, server sort, pagination, and multi-select (optimistic) delete
55
+
56
+ Then:
57
+
58
+ ```bash
59
+ npm run dev # open /customers
60
+ ```
61
+
62
+ ## Connect to a database
63
+
64
+ Install the driver for your database, then point `--db` / `--url` at it. The CLI
65
+ reads the table's columns from the catalog and wires the generated route to that
66
+ driver. No driver is bundled.
67
+
68
+ | Database | Install | Flag |
69
+ | --- | --- | --- |
70
+ | PostgreSQL | `pg` | `--db postgres` |
71
+ | Supabase | `pg` | `--db supabase` |
72
+ | MySQL / MariaDB | `mysql2` | `--db mysql` |
73
+ | SQL Server | `mssql` | `--db mssql` |
74
+ | SQLite | `better-sqlite3` | `--db sqlite` |
75
+
76
+ ```bash
77
+ npm i pg
78
+ npx @svgrid/studio add --all --db postgres --url "$DATABASE_URL" # every table
79
+ npx @svgrid/studio add todos --db sqlite --url ./data.db # one table
80
+ ```
81
+
82
+ ## Scaffold the whole app from your schema
83
+
84
+ `--all --from` reads **every** table/model in a schema file and generates a
85
+ screen for each, plus a nav layout and home page. Foreign keys are followed
86
+ across the file - a Drizzle `.references()` or a Prisma `@relation` becomes a
87
+ searchable lookup, and enums become select fields:
88
+
89
+ ```bash
90
+ npx @svgrid/studio add --all --from src/lib/db/schema.ts # every Drizzle table
91
+ npx @svgrid/studio add --all --from prisma/schema.prisma # every Prisma model
92
+ ```
93
+
94
+ ## Options
95
+
96
+ ```
97
+ svgrid-studio add <name> [--from <schema> | --db <dialect> --url <conn>] [options]
98
+
99
+ --from <path> Drizzle (.ts) or Prisma (.prisma) schema file to introspect
100
+ --db <dialect> Connect to a live database (postgres|supabase|mysql|mssql|sqlite)
101
+ --url <conn> Connection string / file path for --db
102
+ --all Scaffold a screen for every table/model (with --from or --db)
103
+ --table <name> Which table/model to use (defaults to <name>)
104
+ --sql Use createSqlDataSource with an execute() stub (instead of a driver)
105
+ --route <seg> Route segment (default: <name> / table name)
106
+ --api <path> API route path (default: /api/<route>)
107
+ ```
108
+
109
+ With `--db`, the generated route is fully connected to that driver via
110
+ `process.env.DATABASE_URL`. With `--from` (no `--db`) it starts in-memory so the
111
+ screen runs immediately; add `--sql` for a `createSqlDataSource` stub you fill
112
+ in with any client (Drizzle `db.execute`, postgres.js, better-sqlite3, mysql2).
113
+
114
+ ## Regeneration is safe
115
+
116
+ Re-running `add` replaces only the `svgrid:managed` regions of each file - your
117
+ edits outside those markers are preserved.
118
+
119
+ ## Requires
120
+
121
+ `@svgrid/grid` and `@svgrid/enterprise` in your project. The Studio is part of the
122
+ **Suite** edition of the Enterprise license; a Grid-edition key does not cover it.
123
+
124
+ The gate is soft either way: it works unlicensed, and under a Grid key, with a
125
+ watermark and a one-time console notice. Nothing is disabled, so you can build a
126
+ whole app with it before buying. See [licensing](https://svgrid.com/pricing/).
package/dist/cli.js CHANGED
@@ -139,75 +139,78 @@ function templateIds(width = 62) {
139
139
  lines.push(line);
140
140
  return lines.join('\n ');
141
141
  }
142
- const HELP = `svgrid-studio - scaffold CRUD screens from a schema file or a live database
143
-
144
- Usage:
145
- svgrid-studio init # guided: pick your data, get a working CRUD app
146
- svgrid-studio designer # open the visual designer in your browser
147
- svgrid-studio add <name> --from <schema> # one table/model from a schema file
148
- svgrid-studio add --all --from <schema> # every table/model, linked
149
- svgrid-studio add <name> --db <dialect> --url <conn> # one table from a live database
150
- svgrid-studio add --all --db <dialect> --url <conn> # every table from a live database
151
- svgrid-studio openapi <file|url> # import an OpenAPI (JSON) spec -> studio.config.json
152
- svgrid-studio eject [--fragment] # write the app (or a drop-in fragment) from studio.config.json
153
- svgrid-studio dev # designer + the RUNNING app, side by side (HMR)
154
- svgrid-studio deploy [--target <provider>] [--dry-run] # build + deploy via the provider CLI
155
-
156
- Guided setup (init) - asks where your data lives, which tables you want, and
157
- which pages each gets, then writes a runnable app + studio.config.json.
158
- Running \`svgrid-studio\` with no arguments starts it too.
159
- --db <dialect> --url <conn> skip the questions and read a live database
160
- --supabase-url <url> --supabase-key <anon> read a Supabase project over its
161
- REST API (no driver, works without a local database)
162
- --dataset <id> start from sample data (customers-orders, products-categories,
163
- projects-tasks, employees-departments, tickets-accounts)
164
- --title <name> app name
165
- --out <dir> folder to write the app into (default: .)
166
- --theme <id> design-system preset --dark dark mode
167
- -y, --yes take every default, ask nothing
168
- -f, --force write into a folder that already holds another app
169
-
170
- Deploy (build first, then the provider CLI; target from --target, else
171
- studio.config.json, else the adapter in svelte.config.js):
172
- --target <p> vercel | netlify | cloudflare | node
173
- --dry-run print the resolved commands without running anything
174
-
175
- Designer (visual app builder, auto-saves to studio.config.json):
176
- --template <id> open a ready-made sample app:
177
- ${templateIds()}
178
- --config <path> studio.config.json to load + auto-save (default: ./studio.config.json)
179
- --out <dir> folder to write the generated app into (default: .)
180
- --port <n> port to serve on (default: 4321)
181
- --no-open don't open the browser
182
- --ai enable the AI copilot (needs ANTHROPIC_API_KEY in the environment)
183
- --app-port <n> dev: port for the generated app's dev server (default: designer port + 1)
184
-
185
- Schema files: a Drizzle schema.ts or a Prisma schema.prisma (auto-detected).
186
- Foreign keys become searchable relation lookups; enums become select fields.
187
-
188
- Databases: postgres | supabase | mysql | mssql | sqlite
189
- (the matching driver - pg / mysql2 / mssql / better-sqlite3 - must be installed)
190
-
191
- Options:
192
- --from <path> Drizzle (.ts) or Prisma (.prisma) schema file to introspect
193
- --db <dialect> Connect to a live database and read its catalog
194
- --url <conn> Connection string / file path for --db
195
- --all Scaffold a screen for every table/model (+ nav & home)
196
- --table <name> Which table/model to use (defaults to <name>)
197
- --sql Wire a real SQL data source (default with --db)
198
- --route <seg> Route segment (default: <name> / table name)
199
- --api <path> API route path (default: /api/<route>)
200
- --theme <id> design-system preset (default: ember) - layered, so your own tokens win
201
- --dark start in dark mode
202
- -h, --help Show this help
203
-
204
- Examples:
205
- svgrid-studio init
206
- svgrid-studio init --db postgres --url $DATABASE_URL --out my-app
207
- svgrid-studio add customers --from src/lib/db/schema.ts
208
- svgrid-studio add --all --from prisma/schema.prisma
209
- svgrid-studio add customers --db postgres --url $DATABASE_URL --sql
210
- svgrid-studio add --all --db supabase --url $DATABASE_URL
142
+ const HELP = `svgrid-studio - scaffold CRUD screens from a schema file or a live database
143
+
144
+ Usage:
145
+ svgrid-studio init # guided: pick your data, get a working CRUD app
146
+ svgrid-studio designer # open the visual designer in your browser
147
+ svgrid-studio add <name> --from <schema> # one table/model from a schema file
148
+ svgrid-studio add --all --from <schema> # every table/model, linked
149
+ svgrid-studio add <name> --db <dialect> --url <conn> # one table from a live database
150
+ svgrid-studio add --all --db <dialect> --url <conn> # every table from a live database
151
+ svgrid-studio openapi <file|url> # import an OpenAPI (JSON) spec -> studio.config.json
152
+ svgrid-studio eject [--fragment] # write the app (or a drop-in fragment) from studio.config.json
153
+ svgrid-studio dev # designer + the RUNNING app, side by side (HMR)
154
+ svgrid-studio deploy [--target <provider>] [--dry-run] # build + deploy via the provider CLI
155
+
156
+ Guided setup (init) - asks where your data lives, which tables you want, and
157
+ which pages each gets, then writes a runnable app + studio.config.json.
158
+ Running \`svgrid-studio\` with no arguments starts it too.
159
+ --db <dialect> --url <conn> skip the questions and read a live database
160
+ --from <schema> build from a Drizzle (.ts) or Prisma (.prisma) schema file
161
+ (in-memory data with sample rows)
162
+ --supabase-url <url> --supabase-key <anon> read a Supabase project over its
163
+ REST API (no driver, works without a local database)
164
+ --dataset <id> start from sample data (customers-orders, products-categories,
165
+ projects-tasks, employees-departments, tickets-accounts)
166
+ --title <name> app name
167
+ --out <dir> folder to write the app into (default: .)
168
+ --theme <id> design-system preset --dark dark mode
169
+ -y, --yes take every default, ask nothing
170
+ -f, --force write into a folder that already holds another app
171
+
172
+ Deploy (build first, then the provider CLI; target from --target, else
173
+ studio.config.json, else the adapter in svelte.config.js):
174
+ --target <p> vercel | netlify | cloudflare | node
175
+ --dry-run print the resolved commands without running anything
176
+
177
+ Designer (visual app builder, auto-saves to studio.config.json):
178
+ --template <id> open a ready-made sample app:
179
+ ${templateIds()}
180
+ --config <path> studio.config.json to load + auto-save (default: ./studio.config.json)
181
+ --out <dir> folder to write the generated app into (default: .)
182
+ --port <n> port to serve on (default: 4321)
183
+ --no-open don't open the browser
184
+ --ai enable the AI copilot (needs ANTHROPIC_API_KEY in the environment)
185
+ --app-port <n> dev: port for the generated app's dev server (default: designer port + 1)
186
+
187
+ Schema files: a Drizzle schema.ts or a Prisma schema.prisma (auto-detected).
188
+ Foreign keys become searchable relation lookups; enums become select fields.
189
+
190
+ Databases: postgres | supabase | mysql | mssql | sqlite
191
+ (the matching driver - pg / mysql2 / mssql / better-sqlite3 - must be installed)
192
+
193
+ Options:
194
+ --from <path> Drizzle (.ts) or Prisma (.prisma) schema file to introspect
195
+ --db <dialect> Connect to a live database and read its catalog
196
+ --url <conn> Connection string / file path for --db
197
+ --all Scaffold a screen for every table/model (+ nav & home)
198
+ --table <name> Which table/model to use (defaults to <name>)
199
+ --sql Wire a real SQL data source (default with --db)
200
+ --route <seg> Route segment (default: <name> / table name)
201
+ --title <name> --all: app title (default: studio.config.json, else the current layout)
202
+ --api <path> API route path (default: /api/<route>)
203
+ --theme <id> design-system preset (default: ember) - layered, so your own tokens win
204
+ --dark start in dark mode
205
+ -h, --help Show this help
206
+
207
+ Examples:
208
+ svgrid-studio init
209
+ svgrid-studio init --db postgres --url $DATABASE_URL --out my-app
210
+ svgrid-studio add customers --from src/lib/db/schema.ts
211
+ svgrid-studio add --all --from prisma/schema.prisma
212
+ svgrid-studio add customers --db postgres --url $DATABASE_URL --sql
213
+ svgrid-studio add --all --db supabase --url $DATABASE_URL
211
214
  `;
212
215
  /**
213
216
  * Terminal prompts for the guided `init`.
@@ -291,6 +294,7 @@ async function main() {
291
294
  ...(opts.outDir ? { out: opts.outDir } : {}),
292
295
  ...(opts.db ? { db: opts.db } : {}),
293
296
  ...(opts.url ? { url: opts.url } : {}),
297
+ ...(opts.from ? { from: opts.from } : {}),
294
298
  ...(opts.supabaseUrl ? { supabaseUrl: opts.supabaseUrl } : {}),
295
299
  ...(opts.supabaseKey ? { supabaseKey: opts.supabaseKey } : {}),
296
300
  ...(opts.dataset ? { dataset: opts.dataset } : {}),
@@ -469,7 +473,7 @@ async function main() {
469
473
  for (const table of tables) {
470
474
  schemas.push(await introspectDatabase({ dialect: opts.db, table, execute }));
471
475
  }
472
- const res = await runStudioAddApp(schemas, { dataSource: ds, theme: opts.theme, dark: opts.dark }, io);
476
+ const res = await runStudioAddApp(schemas, { dataSource: ds, theme: opts.theme, dark: opts.dark, appTitle: opts.title }, io);
473
477
  report(`app (${schemas.length} entities)`, res.written, summarizeVerify(res.verify));
474
478
  process.stdout.write(`\nRun \`npm run dev\` and open /\n`);
475
479
  return;
@@ -493,7 +497,7 @@ async function main() {
493
497
  process.stderr.write('svgrid-studio: no tables/models found in ' + opts.from + '\n');
494
498
  process.exit(1);
495
499
  }
496
- const res = await runStudioAddApp(schemas, { dataSource: opts.dataSource, theme: opts.theme, dark: opts.dark }, io);
500
+ const res = await runStudioAddApp(schemas, { dataSource: opts.dataSource, theme: opts.theme, dark: opts.dark, appTitle: opts.title }, io);
497
501
  report(`app (${schemas.length} entities)`, res.written, summarizeVerify(res.verify));
498
502
  process.stdout.write(`\nRun \`npm run dev\` and open /\n`);
499
503
  return;
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "type": "commercial",
5
5
  "url": "https://svgrid.com/pricing"
6
6
  },
7
- "version": "0.6.1",
7
+ "version": "0.8.1",
8
8
  "description": "SvGrid Studio CLI: scaffold a full CRUD screen (grid + edit panel + SvelteKit API route) from a Drizzle schema in one command.",
9
9
  "license": "SEE LICENSE IN LICENSE",
10
10
  "author": "jQWidgets <sales@jqwidgets.com>",
@@ -27,7 +27,7 @@
27
27
  "access": "public"
28
28
  },
29
29
  "dependencies": {
30
- "@svgrid/enterprise": "^2.6.4"
30
+ "@svgrid/enterprise": "^3.1.1"
31
31
  },
32
32
  "devDependencies": {
33
33
  "@types/node": "^22.10.7",