@pantoken/scaffold 0.3.0 → 0.4.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/bin/pantoken-scaffold.mjs +2 -31
- package/dist/cli.d.mts +12 -0
- package/dist/cli.mjs +84 -0
- package/dist/index.mjs +1 -194
- package/dist/src-BKAwxbXv.mjs +195 -0
- package/package.json +8 -7
|
@@ -1,33 +1,4 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
import {
|
|
2
|
+
import { runScaffoldCli } from "../dist/cli.mjs";
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const usage = () => `Usage: pantoken-scaffold <${SCAFFOLD_PLATFORMS.join("|")}> [--dir .]`;
|
|
7
|
-
|
|
8
|
-
const flag = (name) => {
|
|
9
|
-
const i = argv.indexOf(`--${name}`);
|
|
10
|
-
return i !== -1 ? argv[i + 1] : undefined;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
if (argv[0] === "--help" || argv[0] === "-h") {
|
|
14
|
-
console.log(usage());
|
|
15
|
-
process.exit(0);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
const platform = argv[0];
|
|
19
|
-
const dir = flag("dir") ?? ".";
|
|
20
|
-
if (!platform || !isScaffoldPlatform(platform)) {
|
|
21
|
-
console.error(`Unknown platform "${platform ?? ""}".`);
|
|
22
|
-
console.error(usage());
|
|
23
|
-
process.exit(1);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
try {
|
|
27
|
-
const written = await scaffoldProject(platform, dir);
|
|
28
|
-
for (const path of written) console.log(`✓ wrote ${path}`);
|
|
29
|
-
console.log(`\nNext: cd ${dir} && npm install (or pnpm/yarn/bun install)`);
|
|
30
|
-
} catch (err) {
|
|
31
|
-
console.error(`Error scaffolding project:`, err instanceof Error ? err.message : err);
|
|
32
|
-
process.exit(1);
|
|
33
|
-
}
|
|
4
|
+
await runScaffoldCli(process.argv.slice(2), { usageCommand: "pantoken-scaffold" });
|
package/dist/cli.d.mts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
//#region src/cli.d.ts
|
|
2
|
+
/** Options distinguishing the two bins that share this CLI. */
|
|
3
|
+
interface ScaffoldCliOptions {
|
|
4
|
+
/** How the invoking command reads in its own `--help` usage line, e.g. `"pantoken-scaffold"`. */
|
|
5
|
+
usageCommand: string;
|
|
6
|
+
}
|
|
7
|
+
/** Whether the directory prompt should run: no `--dir` flag was given, and stdin is an interactive TTY. */
|
|
8
|
+
declare function shouldPromptForDir(dirFlag: string | undefined, isTTY: boolean | undefined): boolean;
|
|
9
|
+
/** Run the scaffold CLI end to end: parse argv, prompt if needed, scaffold, and print next steps. */
|
|
10
|
+
declare function runScaffoldCli(argv: string[], options: ScaffoldCliOptions): Promise<void>;
|
|
11
|
+
//#endregion
|
|
12
|
+
export { ScaffoldCliOptions, runScaffoldCli, shouldPromptForDir };
|
package/dist/cli.mjs
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { n as isScaffoldPlatform, r as scaffoldProject, t as SCAFFOLD_PLATFORMS } from "./src-BKAwxbXv.mjs";
|
|
2
|
+
import { createInterface } from "node:readline/promises";
|
|
3
|
+
//#region src/cli.ts
|
|
4
|
+
/**
|
|
5
|
+
* Shared CLI implementation for `pantoken-scaffold` and `create-pantoken-app` — same argv contract,
|
|
6
|
+
* same interactive directory prompt, same post-scaffold instructions.
|
|
7
|
+
*
|
|
8
|
+
* @module
|
|
9
|
+
* @alpha
|
|
10
|
+
*/
|
|
11
|
+
/** Whether the directory prompt should run: no `--dir` flag was given, and stdin is an interactive TTY. */
|
|
12
|
+
function shouldPromptForDir(dirFlag, isTTY) {
|
|
13
|
+
return dirFlag === void 0 && isTTY === true;
|
|
14
|
+
}
|
|
15
|
+
async function promptForDir() {
|
|
16
|
+
const rl = createInterface({
|
|
17
|
+
input: process.stdin,
|
|
18
|
+
output: process.stdout
|
|
19
|
+
});
|
|
20
|
+
try {
|
|
21
|
+
return (await rl.question("Project directory (. for current folder): ")).trim() || ".";
|
|
22
|
+
} finally {
|
|
23
|
+
rl.close();
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
function parseArgs(argv) {
|
|
27
|
+
let platform;
|
|
28
|
+
let dirFlag;
|
|
29
|
+
for (let i = 0; i < argv.length; i += 1) {
|
|
30
|
+
const arg = argv[i];
|
|
31
|
+
if (arg === "--help" || arg === "-h") return {
|
|
32
|
+
help: true,
|
|
33
|
+
platform,
|
|
34
|
+
dirFlag
|
|
35
|
+
};
|
|
36
|
+
if (arg === "--dir") {
|
|
37
|
+
dirFlag = argv[i + 1];
|
|
38
|
+
i += 1;
|
|
39
|
+
continue;
|
|
40
|
+
}
|
|
41
|
+
if (!platform && !arg.startsWith("-")) {
|
|
42
|
+
platform = arg;
|
|
43
|
+
continue;
|
|
44
|
+
}
|
|
45
|
+
throw new Error(`Unknown option "${arg}".`);
|
|
46
|
+
}
|
|
47
|
+
return {
|
|
48
|
+
help: false,
|
|
49
|
+
platform,
|
|
50
|
+
dirFlag
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
/** Run the scaffold CLI end to end: parse argv, prompt if needed, scaffold, and print next steps. */
|
|
54
|
+
async function runScaffoldCli(argv, options) {
|
|
55
|
+
const usage = () => `Usage: ${options.usageCommand} <${SCAFFOLD_PLATFORMS.join("|")}> [--dir .]`;
|
|
56
|
+
let parsed;
|
|
57
|
+
try {
|
|
58
|
+
parsed = parseArgs(argv);
|
|
59
|
+
} catch (err) {
|
|
60
|
+
console.error(err instanceof Error ? err.message : String(err));
|
|
61
|
+
console.error(usage());
|
|
62
|
+
process.exit(1);
|
|
63
|
+
}
|
|
64
|
+
if (parsed.help) {
|
|
65
|
+
console.log(usage());
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
if (!parsed.platform || !isScaffoldPlatform(parsed.platform)) {
|
|
69
|
+
console.error(`Unknown platform "${parsed.platform ?? ""}".`);
|
|
70
|
+
console.error(usage());
|
|
71
|
+
process.exit(1);
|
|
72
|
+
}
|
|
73
|
+
const dir = shouldPromptForDir(parsed.dirFlag, process.stdin.isTTY) ? await promptForDir() : parsed.dirFlag ?? ".";
|
|
74
|
+
try {
|
|
75
|
+
const written = await scaffoldProject(parsed.platform, dir);
|
|
76
|
+
for (const path of written) console.log(`✓ wrote ${path}`);
|
|
77
|
+
console.log(`\nNext steps:\n cd ${dir}\n vp install (or npm/pnpm/yarn/bun install)`);
|
|
78
|
+
} catch (err) {
|
|
79
|
+
console.error(`Error scaffolding project:`, err instanceof Error ? err.message : err);
|
|
80
|
+
process.exit(1);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
//#endregion
|
|
84
|
+
export { runScaffoldCli, shouldPromptForDir };
|
package/dist/index.mjs
CHANGED
|
@@ -1,195 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { dirname, join } from "node:path";
|
|
3
|
-
import { producePreset } from "bingo-stratum";
|
|
4
|
-
import { presetComponents } from "@pantoken/components/scaffold-preset";
|
|
5
|
-
import { presetReact } from "@pantoken/react/scaffold-preset";
|
|
6
|
-
import { presetVue } from "@pantoken/vue/scaffold-preset";
|
|
7
|
-
import { presetWebComponents } from "@pantoken/web-components/scaffold-preset";
|
|
8
|
-
import { presetAngular } from "@pantoken/angular/scaffold-preset";
|
|
9
|
-
import { presetSvelte } from "@pantoken/svelte/scaffold-preset";
|
|
10
|
-
//#region generated/scaffolds.ts
|
|
11
|
-
const SCAFFOLDS = {
|
|
12
|
-
"angular": {
|
|
13
|
-
".gitignore": "node_modules\ndist\n",
|
|
14
|
-
"README.md": "# {{projectName}}\n\nScaffolded with `pantoken-scaffold angular` (or `pantoken-ai scaffold angular`) — a standalone\nAngular app (via Vite + `@analogjs/vite-plugin-angular`, no Angular CLI) styled with\n[`@pantoken/components`](https://www.npmjs.com/package/@pantoken/components) and\n[`@pantoken/angular`](https://www.npmjs.com/package/@pantoken/angular) (pantoken custom elements\nfor Angular).\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `src/main.ts` calls `registerPantokenElements()` (from `@pantoken/angular`) once at bootstrap so\n elements like `<instui-icon>` work in templates, and imports the token/component CSS plus\n `@pantoken/plugin-layouts/layouts.css`.\n- `src/app.component.ts` is a standalone component (`CUSTOM_ELEMENTS_SCHEMA` lets the template\n compiler accept pantoken's custom element tags) whose template follows the `wrapper` app-shell\n layout from `@pantoken/plugin-layouts` (`.container` / `.header` / `.content` parts).\n- Apply classes like `class=\"instui-button\"` to markup; see the\n [component reference](https://pantoken.iywahl.com/api/css) for the full class list.\n",
|
|
15
|
-
"index.html": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>{{projectName}}</title>\n </head>\n <body class=\"instui-display-flex\">\n <app-root></app-root>\n <script type=\"module\" src=\"/src/main.ts\"><\/script>\n </body>\n</html>\n",
|
|
16
|
-
"package.json": "{\n \"name\": \"{{projectName}}\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@angular/common\": \"^22.1.3\",\n \"@angular/compiler\": \"^22.1.3\",\n \"@angular/core\": \"^22.1.3\",\n \"@angular/platform-browser\": \"^22.1.3\",\n \"@pantoken/angular\": \"latest\",\n \"@pantoken/plugin-layouts\": \"latest\",\n \"rxjs\": \"^7.8.2\",\n \"zone.js\": \"^0.16.2\"\n },\n \"devDependencies\": {\n \"@analogjs/vite-plugin-angular\": \"^2.7.0\",\n \"@pantoken/pantoken\": \"latest\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\"\n }\n}\n",
|
|
17
|
-
"tsconfig.json": "{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"experimentalDecorators\": true,\n \"useDefineForClassFields\": false,\n \"strict\": true,\n \"skipLibCheck\": true\n },\n \"include\": [\"src\"]\n}\n",
|
|
18
|
-
"vite.config.ts": "import angular from \"@analogjs/vite-plugin-angular\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n plugins: [angular()],\n});\n",
|
|
19
|
-
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\", \"angular.ng-template\"]\n}\n",
|
|
20
|
-
".vscode/settings.json": "{\n \"html.customData\": [\"./node_modules/@pantoken/pantoken/dist/html-custom-data.json\"],\n \"css.customData\": [\"./node_modules/@pantoken/pantoken/dist/css-custom-data.json\"]\n}\n",
|
|
21
|
-
"src/app.component.ts": "import { CUSTOM_ELEMENTS_SCHEMA, Component } from \"@angular/core\";\n\n@Component({\n selector: \"app-root\",\n standalone: true,\n schemas: [CUSTOM_ELEMENTS_SCHEMA], // accepts pantoken custom elements like <instui-icon>\n template: `\n<div class=\"container\">\n <div class=\"header\">\n <div class=\"top\">\n <!-- breadcrumb -->\n <div class=\"utilities\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n </div>\n <div class=\"info\">\n <div class=\"title\">\n {{projectName}}\n </div>\n <div class=\"description\"> <!-- optional -->\n Styled with <code>@pantoken/components</code> and laid out with the <code>wrapper</code> layout from <code>@pantoken/plugin-layouts</code>.\n </div>\n </div>\n <slot name=\"header\"></slot> <!-- optional -->\n <div class=\"actions\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n <div class=\"tabs\"> <!-- optional -->\n <!-- tabs -->\n </div>\n <div class=\"filters\"> <!-- optional -->\n <slot name=\"filters\"></slot>\n </div>\n </div>\n <div class=\"content\">\n <div class=\"list\"></div> <!-- optional -->\n <slot name=\"content\">\n <p>Get started building with pantoken.</p>\n <button class=\"instui-button -color-primary\" type=\"button\">Get started</button>\n </slot>\n <slot name=\"trailing\"></slot> <!-- optional -->\n </div>\n </div>\n `,\n})\nexport class AppComponent {}\n",
|
|
22
|
-
"src/main.ts": "import \"zone.js\";\nimport { registerPantokenElements } from \"@pantoken/angular\";\nimport { bootstrapApplication } from \"@angular/platform-browser\";\n// Defines every --instui-* custom property this app can reference.\nimport \"@pantoken/components/base.css\";\nimport \"@pantoken/components/components.css\";\nimport \"@pantoken/plugin-layouts/layouts.css\";\nimport { AppComponent } from \"./app.component.ts\";\n\nregisterPantokenElements(); // registers <instui-icon> and friends for use in templates\nbootstrapApplication(AppComponent);\n",
|
|
23
|
-
"cssdoc.json": "{\n \"$schema\": \"https://cssdoc.dev/cssdoc.schema.json\",\n \"extends\": [\n \"./node_modules/@pantoken/pantoken/cssdoc-base.json\"\n ],\n \"modifierConvention\": \"rscss\",\n \"inlineComments\": \"ignore\",\n \"providers\": [\n {\n \"path\": \"./node_modules/@pantoken/pantoken/model.json\"\n }\n ]\n}"
|
|
24
|
-
},
|
|
25
|
-
"components": {
|
|
26
|
-
".gitignore": "node_modules\ndist\n",
|
|
27
|
-
"README.md": "# {{projectName}}\n\nScaffolded with `pantoken-scaffold components` (or `pantoken-ai scaffold components`) — a plain\nTypeScript app (via Vite) styled with\n[`@pantoken/components`](https://www.npmjs.com/package/@pantoken/components), Instructure's\ndesign tokens and icons.\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `src/main.ts` imports `@pantoken/components/base.css` (document defaults + focus ring),\n `components.css` (`.instui-*` classes), and `@pantoken/plugin-layouts/layouts.css`, then renders\n markup into `#app`.\n- The markup follows the `wrapper` app-shell layout from `@pantoken/plugin-layouts` (`.container` /\n `.header` / `.content` parts) — see that package's README for what each part is for.\n- Apply classes like `class=\"instui-button\"` to markup; see the\n [component reference](https://pantoken.iywahl.com/api/css) for the full class list.\n",
|
|
28
|
-
"index.html": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>{{projectName}}</title>\n </head>\n <body class=\"instui-display-flex\">\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.ts\"><\/script>\n </body>\n</html>\n",
|
|
29
|
-
"package.json": "{\n \"name\": \"{{projectName}}\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@pantoken/components\": \"latest\",\n \"@pantoken/plugin-layouts\": \"latest\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\"\n }\n}\n",
|
|
30
|
-
"tsconfig.json": "{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"strict\": true,\n \"skipLibCheck\": true\n },\n \"include\": [\"src\"]\n}\n",
|
|
31
|
-
"vite.config.ts": "import { defineConfig } from \"vite\";\n\nexport default defineConfig({});\n",
|
|
32
|
-
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\"]\n}\n",
|
|
33
|
-
".vscode/settings.json": "{\n \"html.customData\": [\"./node_modules/@pantoken/pantoken/dist/html-custom-data.json\"],\n \"css.customData\": [\"./node_modules/@pantoken/pantoken/dist/css-custom-data.json\"]\n}\n",
|
|
34
|
-
"src/main.ts": "// Defines every --instui-* custom property this app can reference.\nimport \"@pantoken/components/base.css\";\nimport \"@pantoken/components/components.css\";\nimport \"@pantoken/plugin-layouts/layouts.css\";\n\ndocument.querySelector<HTMLDivElement>(\"#app\")!.innerHTML = `\n<div class=\"container\">\n <div class=\"header\">\n <div class=\"top\">\n <!-- breadcrumb -->\n <div class=\"utilities\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n </div>\n <div class=\"info\">\n <div class=\"title\">\n {{projectName}}\n </div>\n <div class=\"description\"> <!-- optional -->\n Styled with <code>@pantoken/components</code> and laid out with the <code>wrapper</code> layout from <code>@pantoken/plugin-layouts</code>.\n </div>\n </div>\n <slot name=\"header\"></slot> <!-- optional -->\n <div class=\"actions\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n <div class=\"tabs\"> <!-- optional -->\n <!-- tabs -->\n </div>\n <div class=\"filters\"> <!-- optional -->\n <slot name=\"filters\"></slot>\n </div>\n </div>\n <div class=\"content\">\n <div class=\"list\"></div> <!-- optional -->\n <slot name=\"content\">\n <p>Get started building with pantoken.</p>\n <button class=\"instui-button -color-primary\" type=\"button\">Get started</button>\n </slot>\n <slot name=\"trailing\"></slot> <!-- optional -->\n </div>\n </div>\n`;\n",
|
|
35
|
-
"cssdoc.json": "{\n \"$schema\": \"https://cssdoc.dev/cssdoc.schema.json\",\n \"extends\": [\n \"./node_modules/@pantoken/pantoken/cssdoc-base.json\"\n ],\n \"modifierConvention\": \"rscss\",\n \"inlineComments\": \"ignore\",\n \"providers\": [\n {\n \"path\": \"./node_modules/@pantoken/pantoken/model.json\"\n }\n ]\n}"
|
|
36
|
-
},
|
|
37
|
-
"next": {
|
|
38
|
-
".gitignore": "node_modules\n.next\n",
|
|
39
|
-
"README.md": "# {{projectName}}\n\nScaffolded with `pantoken-scaffold next` (or `pantoken-ai scaffold next`) — a Next.js (App Router) app styled with\n[`@pantoken/next`](https://www.npmjs.com/package/@pantoken/next), Instructure's design tokens and\nicons.\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `next.config.mjs` wraps the config with `withPantoken(...)` (adds pantoken to\n `transpilePackages`).\n- `app/layout.tsx` imports `@pantoken/css/inject`, which defines every `--instui-*` custom\n property, at the root so it's available on every page, plus `@pantoken/plugin-layouts/layouts.css`\n and the `wrapper` layout's root class on `<body>`.\n- `app/page.tsx` renders markup following the `wrapper` app-shell layout from\n [`@pantoken/plugin-layouts`](https://www.npmjs.com/package/@pantoken/plugin-layouts)\n (`.container` / `.header` / `.content` parts) styled with `instui-*` classes.\n",
|
|
40
|
-
"next.config.mjs": "import { withPantoken } from \"@pantoken/next\";\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {};\n\nexport default withPantoken(nextConfig);\n",
|
|
41
|
-
"package.json": "{\n \"name\": \"{{projectName}}\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\"\n },\n \"dependencies\": {\n \"@pantoken/next\": \"latest\",\n \"@pantoken/plugin-layouts\": \"latest\",\n \"next\": \"^16.2.11\",\n \"react\": \"^19.2.8\",\n \"react-dom\": \"^19.2.8\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"typescript\": \"^7.0.2\"\n }\n}\n",
|
|
42
|
-
"tsconfig.json": "{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"jsx\": \"preserve\",\n \"strict\": true,\n \"skipLibCheck\": true,\n \"plugins\": [{ \"name\": \"next\" }]\n },\n \"include\": [\"app\", \"next-env.d.ts\"]\n}\n",
|
|
43
|
-
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\"]\n}\n",
|
|
44
|
-
".vscode/settings.json": "{\n \"html.customData\": [\"./node_modules/@pantoken/pantoken/dist/html-custom-data.json\"],\n \"css.customData\": [\"./node_modules/@pantoken/pantoken/dist/css-custom-data.json\"]\n}\n",
|
|
45
|
-
"app/layout.tsx": "import \"@pantoken/css/inject\";\nimport \"@pantoken/plugin-layouts/layouts.css\";\n\nexport const metadata = {\n title: \"{{projectName}}\",\n};\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n return (\n <html lang=\"en\">\n <body className=\"instui-display-flex\">{children}</body>\n </html>\n );\n}\n",
|
|
46
|
-
"app/page.tsx": "export default function Page() {\n return (\n<div className=\"container\">\n <div className=\"header\">\n <div className=\"top\">\n {/* breadcrumb */}\n <div className=\"utilities\"> {/* optional */}\n <button className=\"instui-button\"></button>\n </div>\n </div>\n <div className=\"info\">\n <div className=\"title\">\n {{projectName}}\n </div>\n <div className=\"description\"> {/* optional */}\n Styled with <code>@pantoken/components</code> and laid out with the <code>wrapper</code> layout from <code>@pantoken/plugin-layouts</code>.\n </div>\n </div>\n <slot name=\"header\"></slot> {/* optional */}\n <div className=\"actions\"> {/* optional */}\n <button className=\"instui-button\"></button>\n </div>\n <div className=\"tabs\"> {/* optional */}\n {/* tabs */}\n </div>\n <div className=\"filters\"> {/* optional */}\n <slot name=\"filters\"></slot>\n </div>\n </div>\n <div className=\"content\">\n <div className=\"list\"></div> {/* optional */}\n <slot name=\"content\">\n <p>Get started building with pantoken.</p>\n <button className=\"instui-button -color-primary\" type=\"button\">Get started</button>\n </slot>\n <slot name=\"trailing\"></slot> {/* optional */}\n </div>\n </div>\n );\n}\n",
|
|
47
|
-
"cssdoc.json": "{\n \"$schema\": \"https://cssdoc.dev/cssdoc.schema.json\",\n \"extends\": [\n \"./node_modules/@pantoken/pantoken/cssdoc-base.json\"\n ],\n \"modifierConvention\": \"rscss\",\n \"inlineComments\": \"ignore\",\n \"providers\": [\n {\n \"path\": \"./node_modules/@pantoken/pantoken/model.json\"\n }\n ]\n}"
|
|
48
|
-
},
|
|
49
|
-
"react": {
|
|
50
|
-
".gitignore": "node_modules\ndist\n",
|
|
51
|
-
"README.md": "# {{projectName}}\n\nScaffolded with `pantoken-scaffold react` (or `pantoken-ai scaffold react`) — a Vite + React app styled with\n[`@pantoken/react`](https://www.npmjs.com/package/@pantoken/react) and\n[`@pantoken/css`](https://www.npmjs.com/package/@pantoken/css), Instructure's design tokens and\nicons.\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `src/main.tsx` imports `@pantoken/css/inject`, which defines every `--instui-*` custom property.\n- `src/App.tsx` renders markup following the `wrapper` app-shell layout from\n [`@pantoken/plugin-layouts`](https://www.npmjs.com/package/@pantoken/plugin-layouts)\n (`.container` / `.header` / `.content` parts) styled with `instui-*` classes.\n- For InstUI's full React component library (buttons, modals, etc. — including `@pantoken/react`'s\n `<Icon>`), add the specific `@instructure/ui-*` packages you need — see <https://instructure.design>.\n",
|
|
52
|
-
"index.html": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>{{projectName}}</title>\n </head>\n <body>\n <div id=\"root\"></div>\n <script type=\"module\" src=\"/src/main.tsx\"><\/script>\n </body>\n</html>\n",
|
|
53
|
-
"package.json": "{\n \"name\": \"{{projectName}}\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@pantoken/css\": \"latest\",\n \"@pantoken/plugin-layouts\": \"latest\",\n \"@pantoken/react\": \"latest\",\n \"react\": \"^19.2.8\",\n \"react-dom\": \"^19.2.8\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"@types/react\": \"^19.2.18\",\n \"@types/react-dom\": \"^19.2.5\",\n \"@vitejs/plugin-react\": \"^6.1.0\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\"\n }\n}\n",
|
|
54
|
-
"tsconfig.json": "{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"jsx\": \"react-jsx\",\n \"strict\": true,\n \"skipLibCheck\": true\n },\n \"include\": [\"src\"]\n}\n",
|
|
55
|
-
"vite.config.ts": "import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({\n plugins: [react()],\n});\n",
|
|
56
|
-
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\"]\n}\n",
|
|
57
|
-
".vscode/settings.json": "{\n \"html.customData\": [\"./node_modules/@pantoken/pantoken/dist/html-custom-data.json\"],\n \"css.customData\": [\"./node_modules/@pantoken/pantoken/dist/css-custom-data.json\"]\n}\n",
|
|
58
|
-
"src/App.tsx": "import \"@pantoken/plugin-layouts/layouts.css\";\n\nexport function App() {\n return (\n <div className=\"instui-display-flex\">\n<div className=\"container\">\n <div className=\"header\">\n <div className=\"top\">\n {/* breadcrumb */}\n <div className=\"utilities\"> {/* optional */}\n <button className=\"instui-button\"></button>\n </div>\n </div>\n <div className=\"info\">\n <div className=\"title\">\n {{projectName}}\n </div>\n <div className=\"description\"> {/* optional */}\n Styled with <code>@pantoken/components</code> and laid out with the <code>wrapper</code> layout from <code>@pantoken/plugin-layouts</code>.\n </div>\n </div>\n <slot name=\"header\"></slot> {/* optional */}\n <div className=\"actions\"> {/* optional */}\n <button className=\"instui-button\"></button>\n </div>\n <div className=\"tabs\"> {/* optional */}\n {/* tabs */}\n </div>\n <div className=\"filters\"> {/* optional */}\n <slot name=\"filters\"></slot>\n </div>\n </div>\n <div className=\"content\">\n <div className=\"list\"></div> {/* optional */}\n <slot name=\"content\">\n <p>Get started building with pantoken.</p>\n <button className=\"instui-button -color-primary\" type=\"button\">Get started</button>\n </slot>\n <slot name=\"trailing\"></slot> {/* optional */}\n </div>\n </div>\n </div>\n );\n}\n",
|
|
59
|
-
"src/main.tsx": "import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\n// Defines every --instui-* custom property this app can reference.\nimport \"@pantoken/css/inject\";\nimport { App } from \"./App.tsx\";\n\ncreateRoot(document.getElementById(\"root\")!).render(\n <StrictMode>\n <App />\n </StrictMode>,\n);\n",
|
|
60
|
-
"cssdoc.json": "{\n \"$schema\": \"https://cssdoc.dev/cssdoc.schema.json\",\n \"extends\": [\n \"./node_modules/@pantoken/pantoken/cssdoc-base.json\"\n ],\n \"modifierConvention\": \"rscss\",\n \"inlineComments\": \"ignore\",\n \"providers\": [\n {\n \"path\": \"./node_modules/@pantoken/pantoken/model.json\"\n }\n ]\n}"
|
|
61
|
-
},
|
|
62
|
-
"svelte": {
|
|
63
|
-
".gitignore": "node_modules\ndist\n",
|
|
64
|
-
"README.md": "# {{projectName}}\n\nScaffolded with `pantoken-scaffold svelte` (or `pantoken-ai scaffold svelte`) — a Vite + Svelte app\nstyled with [`@pantoken/components`](https://www.npmjs.com/package/@pantoken/components) and\n[`@pantoken/svelte`](https://www.npmjs.com/package/@pantoken/svelte) (icon action + token reads).\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `src/main.ts` calls `register()` (from `@pantoken/svelte`) once at bootstrap so elements like\n `<instui-icon>` work in templates, and imports the token/component CSS plus\n `@pantoken/plugin-layouts/layouts.css`.\n- `src/App.svelte`'s markup follows the `wrapper` app-shell layout from\n `@pantoken/plugin-layouts` (`.container` / `.header` / `.content` parts).\n- Apply classes like `class=\"instui-button\"` to markup; see the\n [component reference](https://pantoken.iywahl.com/api/css) for the full class list.\n",
|
|
65
|
-
"index.html": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>{{projectName}}</title>\n </head>\n <body>\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.ts\"><\/script>\n </body>\n</html>\n",
|
|
66
|
-
"package.json": "{\n \"name\": \"{{projectName}}\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@pantoken/css\": \"latest\",\n \"@pantoken/plugin-layouts\": \"latest\",\n \"@pantoken/svelte\": \"latest\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"@sveltejs/vite-plugin-svelte\": \"^7.3.0\",\n \"svelte\": \"^5.56.10\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\"\n }\n}\n",
|
|
67
|
-
"tsconfig.json": "{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"strict\": true,\n \"skipLibCheck\": true\n },\n \"include\": [\"src\"]\n}\n",
|
|
68
|
-
"vite.config.ts": "import { defineConfig } from \"vite\";\nimport { svelte } from \"@sveltejs/vite-plugin-svelte\";\n\nexport default defineConfig({\n plugins: [svelte()],\n});\n",
|
|
69
|
-
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\", \"svelte.svelte-vscode\"]\n}\n",
|
|
70
|
-
".vscode/settings.json": "{\n \"html.customData\": [\"./node_modules/@pantoken/pantoken/dist/html-custom-data.json\"],\n \"css.customData\": [\"./node_modules/@pantoken/pantoken/dist/css-custom-data.json\"]\n}\n",
|
|
71
|
-
"src/App.svelte": "<div class=\"instui-display-flex\">\n<div class=\"container\">\n <div class=\"header\">\n <div class=\"top\">\n <!-- breadcrumb -->\n <div class=\"utilities\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n </div>\n <div class=\"info\">\n <div class=\"title\">\n {{projectName}}\n </div>\n <div class=\"description\"> <!-- optional -->\n Styled with <code>@pantoken/components</code> and laid out with the <code>wrapper</code> layout from <code>@pantoken/plugin-layouts</code>.\n </div>\n </div>\n <slot name=\"header\"></slot> <!-- optional -->\n <div class=\"actions\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n <div class=\"tabs\"> <!-- optional -->\n <!-- tabs -->\n </div>\n <div class=\"filters\"> <!-- optional -->\n <slot name=\"filters\"></slot>\n </div>\n </div>\n <div class=\"content\">\n <div class=\"list\"></div> <!-- optional -->\n <slot name=\"content\">\n <p>Get started building with pantoken.</p>\n <button class=\"instui-button -color-primary\" type=\"button\">Get started</button>\n </slot>\n <slot name=\"trailing\"></slot> <!-- optional -->\n </div>\n </div>\n</div>\n",
|
|
72
|
-
"src/main.ts": "import { mount } from \"svelte\";\nimport { register } from \"@pantoken/svelte\";\n// Defines every --instui-* custom property this app can reference.\nimport \"@pantoken/css\";\nimport \"@pantoken/plugin-layouts/layouts.css\";\nimport App from \"./App.svelte\";\n\nregister(); // auto-registers <instui-icon> and friends\n\nmount(App, { target: document.getElementById(\"app\")! });\n",
|
|
73
|
-
"cssdoc.json": "{\n \"$schema\": \"https://cssdoc.dev/cssdoc.schema.json\",\n \"extends\": [\n \"./node_modules/@pantoken/pantoken/cssdoc-base.json\"\n ],\n \"modifierConvention\": \"rscss\",\n \"inlineComments\": \"ignore\",\n \"providers\": [\n {\n \"path\": \"./node_modules/@pantoken/pantoken/model.json\"\n }\n ]\n}"
|
|
74
|
-
},
|
|
75
|
-
"vue": {
|
|
76
|
-
".gitignore": "node_modules\ndist\n",
|
|
77
|
-
"README.md": "# {{projectName}}\n\nScaffolded with `pantoken-scaffold vue` (or `pantoken-ai scaffold vue`) — a Vite + Vue 3 app styled\nwith [`@pantoken/components`](https://www.npmjs.com/package/@pantoken/components) and\n[`@pantoken/vue`](https://www.npmjs.com/package/@pantoken/vue) (the pantoken Vue plugin).\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `src/main.ts` calls `app.use(PantokenVue)` (from `@pantoken/vue`) so elements like\n `<instui-icon>` work in templates, and imports the token/component CSS plus\n `@pantoken/plugin-layouts/layouts.css`.\n- `src/App.vue`'s template follows the `wrapper` app-shell layout from\n `@pantoken/plugin-layouts` (`.container` / `.header` / `.content` parts).\n- Apply classes like `class=\"instui-button\"` to markup; see the\n [component reference](https://pantoken.iywahl.com/api/css) for the full class list.\n",
|
|
78
|
-
"index.html": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>{{projectName}}</title>\n </head>\n <body>\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.ts\"><\/script>\n </body>\n</html>\n",
|
|
79
|
-
"package.json": "{\n \"name\": \"{{projectName}}\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@pantoken/css\": \"latest\",\n \"@pantoken/plugin-layouts\": \"latest\",\n \"@pantoken/vue\": \"latest\",\n \"vue\": \"^3.5.41\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"@vitejs/plugin-vue\": \"^6.0.8\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\",\n \"vue-tsc\": \"^3.3.11\"\n }\n}\n",
|
|
80
|
-
"tsconfig.json": "{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"strict\": true,\n \"skipLibCheck\": true\n },\n \"include\": [\"src\"]\n}\n",
|
|
81
|
-
"vite.config.ts": "import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({\n plugins: [vue()],\n});\n",
|
|
82
|
-
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\", \"Vue.volar\"]\n}\n",
|
|
83
|
-
".vscode/settings.json": "{\n \"html.customData\": [\"./node_modules/@pantoken/pantoken/dist/html-custom-data.json\"],\n \"css.customData\": [\"./node_modules/@pantoken/pantoken/dist/css-custom-data.json\"]\n}\n",
|
|
84
|
-
"src/App.vue": "<script setup lang=\"ts\"><\/script>\n\n<template>\n <div class=\"instui-display-flex\">\n<div class=\"container\">\n <div class=\"header\">\n <div class=\"top\">\n <!-- breadcrumb -->\n <div class=\"utilities\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n </div>\n <div class=\"info\">\n <div class=\"title\">\n {{projectName}}\n </div>\n <div class=\"description\"> <!-- optional -->\n Styled with <code>@pantoken/components</code> and laid out with the <code>wrapper</code> layout from <code>@pantoken/plugin-layouts</code>.\n </div>\n </div>\n <slot name=\"header\"></slot> <!-- optional -->\n <div class=\"actions\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n <div class=\"tabs\"> <!-- optional -->\n <!-- tabs -->\n </div>\n <div class=\"filters\"> <!-- optional -->\n <slot name=\"filters\"></slot>\n </div>\n </div>\n <div class=\"content\">\n <div class=\"list\"></div> <!-- optional -->\n <slot name=\"content\">\n <p>Get started building with pantoken.</p>\n <button class=\"instui-button -color-primary\" type=\"button\">Get started</button>\n </slot>\n <slot name=\"trailing\"></slot> <!-- optional -->\n </div>\n </div>\n </div>\n</template>\n",
|
|
85
|
-
"src/main.ts": "import { createApp } from \"vue\";\nimport { PantokenVue } from \"@pantoken/vue\";\n// Defines every --instui-* custom property this app can reference.\nimport \"@pantoken/css\";\nimport \"@pantoken/plugin-layouts/layouts.css\";\nimport App from \"./App.vue\";\n\ncreateApp(App).use(PantokenVue).mount(\"#app\");\n",
|
|
86
|
-
"cssdoc.json": "{\n \"$schema\": \"https://cssdoc.dev/cssdoc.schema.json\",\n \"extends\": [\n \"./node_modules/@pantoken/pantoken/cssdoc-base.json\"\n ],\n \"modifierConvention\": \"rscss\",\n \"inlineComments\": \"ignore\",\n \"providers\": [\n {\n \"path\": \"./node_modules/@pantoken/pantoken/model.json\"\n }\n ]\n}"
|
|
87
|
-
},
|
|
88
|
-
"web-components": {
|
|
89
|
-
".gitignore": "node_modules\ndist\n",
|
|
90
|
-
"README.md": "# {{projectName}}\n\nScaffolded with `pantoken-scaffold web-components` (or `pantoken-ai scaffold web-components`) — a\nplain TypeScript app (via Vite) styled with\n[`@pantoken/components`](https://www.npmjs.com/package/@pantoken/components) and using framework-agnostic\ncustom elements from [`@pantoken/web-components`](https://www.npmjs.com/package/@pantoken/web-components).\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `src/main.ts` imports `@pantoken/components/base.css` + `components.css` (`.instui-*` classes),\n `@pantoken/plugin-layouts/layouts.css`, and `@pantoken/web-components` (auto-registers elements\n like `<instui-icon>`), then renders markup into `#app`.\n- The markup follows the `wrapper` app-shell layout from `@pantoken/plugin-layouts` (`.container` /\n `.header` / `.content` parts) — see that package's README for what each part is for.\n- Use custom elements directly in markup, e.g. `<instui-button>`, `<instui-alert variant=\"success\">` —\n see the [`@pantoken/web-components` README](https://www.npmjs.com/package/@pantoken/web-components)\n for the full element list.\n",
|
|
91
|
-
"index.html": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>{{projectName}}</title>\n </head>\n <body class=\"instui-display-flex\">\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.ts\"><\/script>\n </body>\n</html>\n",
|
|
92
|
-
"package.json": "{\n \"name\": \"{{projectName}}\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@pantoken/components\": \"latest\",\n \"@pantoken/plugin-layouts\": \"latest\",\n \"@pantoken/web-components\": \"latest\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\"\n }\n}\n",
|
|
93
|
-
"tsconfig.json": "{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"strict\": true,\n \"skipLibCheck\": true\n },\n \"include\": [\"src\"]\n}\n",
|
|
94
|
-
"vite.config.ts": "import { defineConfig } from \"vite\";\n\nexport default defineConfig({});\n",
|
|
95
|
-
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\"]\n}\n",
|
|
96
|
-
".vscode/settings.json": "{\n \"html.customData\": [\"./node_modules/@pantoken/pantoken/dist/html-custom-data.json\"],\n \"css.customData\": [\"./node_modules/@pantoken/pantoken/dist/css-custom-data.json\"]\n}\n",
|
|
97
|
-
"src/main.ts": "// Defines every --instui-* custom property this app can reference.\nimport \"@pantoken/components/base.css\";\nimport \"@pantoken/components/components.css\";\nimport \"@pantoken/plugin-layouts/layouts.css\";\nimport \"@pantoken/web-components\"; // auto-registers <instui-icon> and friends\n\ndocument.querySelector<HTMLDivElement>(\"#app\")!.innerHTML = `\n<div class=\"container\">\n <div class=\"header\">\n <div class=\"top\">\n <!-- breadcrumb -->\n <div class=\"utilities\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n </div>\n <div class=\"info\">\n <div class=\"title\">\n {{projectName}}\n </div>\n <div class=\"description\"> <!-- optional -->\n Styled with <code>@pantoken/components</code> and laid out with the <code>wrapper</code> layout from <code>@pantoken/plugin-layouts</code>.\n </div>\n </div>\n <slot name=\"header\"></slot> <!-- optional -->\n <div class=\"actions\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n <div class=\"tabs\"> <!-- optional -->\n <!-- tabs -->\n </div>\n <div class=\"filters\"> <!-- optional -->\n <slot name=\"filters\"></slot>\n </div>\n </div>\n <div class=\"content\">\n <div class=\"list\"></div> <!-- optional -->\n <slot name=\"content\">\n <p>Get started building with pantoken.</p>\n <button class=\"instui-button -color-primary\" type=\"button\">Get started</button>\n </slot>\n <slot name=\"trailing\"></slot> <!-- optional -->\n </div>\n </div>\n`;\n\n// Framework-agnostic custom elements work anywhere — no per-framework port required.\ndocument\n .querySelector('.content slot[name=\"content\"]')\n ?.insertAdjacentHTML(\"afterbegin\", '<instui-icon name=\"check-mark\"></instui-icon>\\n');\n",
|
|
98
|
-
"cssdoc.json": "{\n \"$schema\": \"https://cssdoc.dev/cssdoc.schema.json\",\n \"extends\": [\n \"./node_modules/@pantoken/pantoken/cssdoc-base.json\"\n ],\n \"modifierConvention\": \"rscss\",\n \"inlineComments\": \"ignore\",\n \"providers\": [\n {\n \"path\": \"./node_modules/@pantoken/pantoken/model.json\"\n }\n ]\n}"
|
|
99
|
-
}
|
|
100
|
-
};
|
|
101
|
-
//#endregion
|
|
102
|
-
//#region generated/preset-ledger.ts
|
|
103
|
-
/**
|
|
104
|
-
* Registry of all available pantoken scaffold presets, keyed by platform name.
|
|
105
|
-
*/
|
|
106
|
-
const PRESET_LEDGER = {
|
|
107
|
-
"components": presetComponents,
|
|
108
|
-
"react": presetReact,
|
|
109
|
-
"vue": presetVue,
|
|
110
|
-
"web-components": presetWebComponents,
|
|
111
|
-
"angular": presetAngular,
|
|
112
|
-
"svelte": presetSvelte
|
|
113
|
-
};
|
|
114
|
-
//#endregion
|
|
115
|
-
//#region src/index.ts
|
|
116
|
-
/**
|
|
117
|
-
* `@pantoken/scaffold` — scaffold a starter project for a platform, with pantoken already
|
|
118
|
-
* installed and wired in. Standalone; usable via `npx @pantoken/scaffold <platform>` without
|
|
119
|
-
* `@pantoken/ai`.
|
|
120
|
-
*
|
|
121
|
-
* Powered by Bingo presets: each platform exports a preset that defines its scaffold structure.
|
|
122
|
-
*
|
|
123
|
-
* @module
|
|
124
|
-
* @alpha
|
|
125
|
-
*/
|
|
126
|
-
/**
|
|
127
|
-
* Every scaffoldable platform key (discovered from available presets).
|
|
128
|
-
*
|
|
129
|
-
* @example List available platforms
|
|
130
|
-
* ```ts
|
|
131
|
-
* import { SCAFFOLD_PLATFORMS } from "@pantoken/scaffold";
|
|
132
|
-
*
|
|
133
|
-
* console.log(SCAFFOLD_PLATFORMS); // → ["components", "react", "vue", "web-components"]
|
|
134
|
-
* ```
|
|
135
|
-
*/
|
|
136
|
-
const SCAFFOLD_PLATFORMS = Object.keys(PRESET_LEDGER);
|
|
137
|
-
const SCAFFOLD_PLATFORM_SET = new Set(SCAFFOLD_PLATFORMS);
|
|
138
|
-
/** Alternate platform names accepted alongside the canonical preset key (e.g. the pre-Bingo `html`). */
|
|
139
|
-
const PLATFORM_ALIASES = { html: "components" };
|
|
140
|
-
/** Whether `platform` is a known {@link ScaffoldPlatform} or one of its aliases (e.g. `html`). */
|
|
141
|
-
function isScaffoldPlatform(platform) {
|
|
142
|
-
return SCAFFOLD_PLATFORM_SET.has(platform) || platform in PLATFORM_ALIASES;
|
|
143
|
-
}
|
|
144
|
-
function resolveScaffoldPlatform(platform) {
|
|
145
|
-
const resolved = PLATFORM_ALIASES[platform] ?? platform;
|
|
146
|
-
if (SCAFFOLD_PLATFORM_SET.has(resolved)) return resolved;
|
|
147
|
-
throw new Error(`Unknown platform "${platform}". Expected one of: ${SCAFFOLD_PLATFORMS.join(", ")}.`);
|
|
148
|
-
}
|
|
149
|
-
/**
|
|
150
|
-
* Scaffold a starter project for a platform, with pantoken already installed and wired in.
|
|
151
|
-
*
|
|
152
|
-
* @param platform - A {@link ScaffoldPlatform}.
|
|
153
|
-
* @param dir - The target directory (default `"."`). Its basename (or `"pantoken-app"` for `"."`)
|
|
154
|
-
* is substituted for `{{projectName}}` in the template files.
|
|
155
|
-
* @returns The paths written.
|
|
156
|
-
*
|
|
157
|
-
* @example Scaffold a React starter
|
|
158
|
-
* ```ts
|
|
159
|
-
* import { scaffoldProject } from "@pantoken/scaffold";
|
|
160
|
-
*
|
|
161
|
-
* scaffoldProject("react", "./my-app");
|
|
162
|
-
* ```
|
|
163
|
-
*/
|
|
164
|
-
async function scaffoldProject(platform, dir = ".") {
|
|
165
|
-
const resolvedPlatform = resolveScaffoldPlatform(platform);
|
|
166
|
-
const projectName = dir === "." ? "pantoken-app" : dir.split("/").pop() ?? "pantoken-app";
|
|
167
|
-
const written = [];
|
|
168
|
-
const preset = PRESET_LEDGER[resolvedPlatform];
|
|
169
|
-
try {
|
|
170
|
-
const creation = producePreset(preset, {
|
|
171
|
-
offline: true,
|
|
172
|
-
options: { name: projectName }
|
|
173
|
-
});
|
|
174
|
-
for (const [file, rawContent] of Object.entries(creation.files ?? {})) {
|
|
175
|
-
const path = join(dir, file);
|
|
176
|
-
mkdirSync(dirname(path), { recursive: true });
|
|
177
|
-
const content = rawContent instanceof ArrayBuffer ? Buffer.from(rawContent) : rawContent;
|
|
178
|
-
writeFileSync(path, content);
|
|
179
|
-
written.push(path);
|
|
180
|
-
}
|
|
181
|
-
} catch {}
|
|
182
|
-
if (written.length === 0) {
|
|
183
|
-
const templates = SCAFFOLDS[resolvedPlatform];
|
|
184
|
-
if (templates) for (const [file, content] of Object.entries(templates)) {
|
|
185
|
-
const substituted = content.replaceAll("{{projectName}}", projectName);
|
|
186
|
-
const path = join(dir, file);
|
|
187
|
-
mkdirSync(dirname(path), { recursive: true });
|
|
188
|
-
writeFileSync(path, substituted);
|
|
189
|
-
written.push(path);
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
return written;
|
|
193
|
-
}
|
|
194
|
-
//#endregion
|
|
1
|
+
import { n as isScaffoldPlatform, r as scaffoldProject, t as SCAFFOLD_PLATFORMS } from "./src-BKAwxbXv.mjs";
|
|
195
2
|
export { SCAFFOLD_PLATFORMS, isScaffoldPlatform, scaffoldProject };
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
import { mkdirSync, writeFileSync } from "node:fs";
|
|
2
|
+
import { dirname, join } from "node:path";
|
|
3
|
+
import { producePreset } from "bingo-stratum";
|
|
4
|
+
import { presetComponents } from "@pantoken/components/scaffold-preset";
|
|
5
|
+
import { presetReact } from "@pantoken/react/scaffold-preset";
|
|
6
|
+
import { presetVue } from "@pantoken/vue/scaffold-preset";
|
|
7
|
+
import { presetWebComponents } from "@pantoken/web-components/scaffold-preset";
|
|
8
|
+
import { presetAngular } from "@pantoken/angular/scaffold-preset";
|
|
9
|
+
import { presetSvelte } from "@pantoken/svelte/scaffold-preset";
|
|
10
|
+
//#region generated/scaffolds.ts
|
|
11
|
+
const SCAFFOLDS = {
|
|
12
|
+
"angular": {
|
|
13
|
+
".gitignore": "node_modules\ndist\n",
|
|
14
|
+
"README.md": "# {{projectName}}\n\nScaffolded with `pantoken-scaffold angular` (or `pantoken-ai scaffold angular`) — a standalone\nAngular app (via Vite + `@analogjs/vite-plugin-angular`, no Angular CLI) styled with\n[`@pantoken/components`](https://www.npmjs.com/package/@pantoken/components) and\n[`@pantoken/angular`](https://www.npmjs.com/package/@pantoken/angular) (pantoken custom elements\nfor Angular).\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `src/main.ts` calls `registerPantokenElements()` (from `@pantoken/angular`) once at bootstrap so\n elements like `<instui-icon>` work in templates, and imports the token/component CSS plus\n `@pantoken/plugin-layouts/layouts.css`.\n- `src/app.component.ts` is a standalone component (`CUSTOM_ELEMENTS_SCHEMA` lets the template\n compiler accept pantoken's custom element tags) whose template follows the `wrapper` app-shell\n layout from `@pantoken/plugin-layouts` (`.container` / `.header` / `.content` parts).\n- Apply classes like `class=\"instui-button\"` to markup; see the\n [component reference](https://pantoken.iywahl.com/api/css) for the full class list.\n",
|
|
15
|
+
"index.html": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>{{projectName}}</title>\n </head>\n <body class=\"instui-display-flex\">\n <app-root></app-root>\n <script type=\"module\" src=\"/src/main.ts\"><\/script>\n </body>\n</html>\n",
|
|
16
|
+
"package.json": "{\n \"name\": \"{{projectName}}\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@angular/common\": \"^22.1.3\",\n \"@angular/compiler\": \"^22.1.3\",\n \"@angular/core\": \"^22.1.3\",\n \"@angular/platform-browser\": \"^22.1.3\",\n \"@pantoken/angular\": \"latest\",\n \"@pantoken/plugin-layouts\": \"latest\",\n \"rxjs\": \"^7.8.2\",\n \"zone.js\": \"^0.16.2\"\n },\n \"devDependencies\": {\n \"@analogjs/vite-plugin-angular\": \"^2.7.0\",\n \"@pantoken/pantoken\": \"latest\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\"\n }\n}\n",
|
|
17
|
+
"tsconfig.json": "{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"experimentalDecorators\": true,\n \"useDefineForClassFields\": false,\n \"strict\": true,\n \"skipLibCheck\": true\n },\n \"include\": [\"src\"]\n}\n",
|
|
18
|
+
"vite.config.ts": "import angular from \"@analogjs/vite-plugin-angular\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n plugins: [angular()],\n});\n",
|
|
19
|
+
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\", \"angular.ng-template\"]\n}\n",
|
|
20
|
+
".vscode/settings.json": "{\n \"html.customData\": [\"./node_modules/@pantoken/pantoken/dist/html-custom-data.json\"],\n \"css.customData\": [\"./node_modules/@pantoken/pantoken/dist/css-custom-data.json\"]\n}\n",
|
|
21
|
+
"src/app.component.ts": "import { CUSTOM_ELEMENTS_SCHEMA, Component } from \"@angular/core\";\n\n@Component({\n selector: \"app-root\",\n standalone: true,\n schemas: [CUSTOM_ELEMENTS_SCHEMA], // accepts pantoken custom elements like <instui-icon>\n template: `\n<div class=\"container\">\n <div class=\"header\">\n <div class=\"top\">\n <!-- breadcrumb -->\n <div class=\"utilities\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n </div>\n <div class=\"info\">\n <div class=\"title\">\n {{projectName}}\n </div>\n <div class=\"description\"> <!-- optional -->\n Styled with <code>@pantoken/components</code> and laid out with the <code>wrapper</code> layout from <code>@pantoken/plugin-layouts</code>.\n </div>\n </div>\n <slot name=\"header\"></slot> <!-- optional -->\n <div class=\"actions\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n <div class=\"tabs\"> <!-- optional -->\n <!-- tabs -->\n </div>\n <div class=\"filters\"> <!-- optional -->\n <slot name=\"filters\"></slot>\n </div>\n </div>\n <div class=\"content\">\n <div class=\"list\"></div> <!-- optional -->\n <slot name=\"content\">\n <p>Get started building with pantoken.</p>\n <button class=\"instui-button -color-primary\" type=\"button\">Get started</button>\n </slot>\n <slot name=\"trailing\"></slot> <!-- optional -->\n </div>\n </div>\n `,\n})\nexport class AppComponent {}\n",
|
|
22
|
+
"src/main.ts": "import \"zone.js\";\nimport { registerPantokenElements } from \"@pantoken/angular\";\nimport { bootstrapApplication } from \"@angular/platform-browser\";\n// Defines every --instui-* custom property this app can reference.\nimport \"@pantoken/components/base.css\";\nimport \"@pantoken/components/components.css\";\nimport \"@pantoken/plugin-layouts/layouts.css\";\nimport { AppComponent } from \"./app.component.ts\";\n\nregisterPantokenElements(); // registers <instui-icon> and friends for use in templates\nbootstrapApplication(AppComponent);\n",
|
|
23
|
+
"cssdoc.json": "{\n \"$schema\": \"https://cssdoc.dev/cssdoc.schema.json\",\n \"extends\": [\n \"./node_modules/@pantoken/pantoken/cssdoc-base.json\"\n ],\n \"modifierConvention\": \"rscss\",\n \"inlineComments\": \"ignore\",\n \"providers\": [\n {\n \"path\": \"./node_modules/@pantoken/pantoken/model.json\"\n }\n ]\n}"
|
|
24
|
+
},
|
|
25
|
+
"components": {
|
|
26
|
+
".gitignore": "node_modules\ndist\n",
|
|
27
|
+
"README.md": "# {{projectName}}\n\nScaffolded with `pantoken-scaffold components` (or `pantoken-ai scaffold components`) — a plain\nTypeScript app (via Vite) styled with\n[`@pantoken/components`](https://www.npmjs.com/package/@pantoken/components), Instructure's\ndesign tokens and icons.\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `src/main.ts` imports `@pantoken/components/base.css` (document defaults + focus ring),\n `components.css` (`.instui-*` classes), and `@pantoken/plugin-layouts/layouts.css`, then renders\n markup into `#app`.\n- The markup follows the `wrapper` app-shell layout from `@pantoken/plugin-layouts` (`.container` /\n `.header` / `.content` parts) — see that package's README for what each part is for.\n- Apply classes like `class=\"instui-button\"` to markup; see the\n [component reference](https://pantoken.iywahl.com/api/css) for the full class list.\n",
|
|
28
|
+
"index.html": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>{{projectName}}</title>\n </head>\n <body class=\"instui-display-flex\">\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.ts\"><\/script>\n </body>\n</html>\n",
|
|
29
|
+
"package.json": "{\n \"name\": \"{{projectName}}\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@pantoken/components\": \"latest\",\n \"@pantoken/plugin-layouts\": \"latest\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\"\n }\n}\n",
|
|
30
|
+
"tsconfig.json": "{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"strict\": true,\n \"skipLibCheck\": true\n },\n \"include\": [\"src\"]\n}\n",
|
|
31
|
+
"vite.config.ts": "import { defineConfig } from \"vite\";\n\nexport default defineConfig({});\n",
|
|
32
|
+
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\"]\n}\n",
|
|
33
|
+
".vscode/settings.json": "{\n \"html.customData\": [\"./node_modules/@pantoken/pantoken/dist/html-custom-data.json\"],\n \"css.customData\": [\"./node_modules/@pantoken/pantoken/dist/css-custom-data.json\"]\n}\n",
|
|
34
|
+
"src/main.ts": "// Defines every --instui-* custom property this app can reference.\nimport \"@pantoken/components/base.css\";\nimport \"@pantoken/components/components.css\";\nimport \"@pantoken/plugin-layouts/layouts.css\";\n\ndocument.querySelector<HTMLDivElement>(\"#app\")!.innerHTML = `\n<div class=\"container\">\n <div class=\"header\">\n <div class=\"top\">\n <!-- breadcrumb -->\n <div class=\"utilities\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n </div>\n <div class=\"info\">\n <div class=\"title\">\n {{projectName}}\n </div>\n <div class=\"description\"> <!-- optional -->\n Styled with <code>@pantoken/components</code> and laid out with the <code>wrapper</code> layout from <code>@pantoken/plugin-layouts</code>.\n </div>\n </div>\n <slot name=\"header\"></slot> <!-- optional -->\n <div class=\"actions\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n <div class=\"tabs\"> <!-- optional -->\n <!-- tabs -->\n </div>\n <div class=\"filters\"> <!-- optional -->\n <slot name=\"filters\"></slot>\n </div>\n </div>\n <div class=\"content\">\n <div class=\"list\"></div> <!-- optional -->\n <slot name=\"content\">\n <p>Get started building with pantoken.</p>\n <button class=\"instui-button -color-primary\" type=\"button\">Get started</button>\n </slot>\n <slot name=\"trailing\"></slot> <!-- optional -->\n </div>\n </div>\n`;\n",
|
|
35
|
+
"cssdoc.json": "{\n \"$schema\": \"https://cssdoc.dev/cssdoc.schema.json\",\n \"extends\": [\n \"./node_modules/@pantoken/pantoken/cssdoc-base.json\"\n ],\n \"modifierConvention\": \"rscss\",\n \"inlineComments\": \"ignore\",\n \"providers\": [\n {\n \"path\": \"./node_modules/@pantoken/pantoken/model.json\"\n }\n ]\n}"
|
|
36
|
+
},
|
|
37
|
+
"next": {
|
|
38
|
+
".gitignore": "node_modules\n.next\n",
|
|
39
|
+
"README.md": "# {{projectName}}\n\nScaffolded with `pantoken-scaffold next` (or `pantoken-ai scaffold next`) — a Next.js (App Router) app styled with\n[`@pantoken/next`](https://www.npmjs.com/package/@pantoken/next), Instructure's design tokens and\nicons.\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `next.config.mjs` wraps the config with `withPantoken(...)` (adds pantoken to\n `transpilePackages`).\n- `app/layout.tsx` imports `@pantoken/css/inject`, which defines every `--instui-*` custom\n property, at the root so it's available on every page, plus `@pantoken/plugin-layouts/layouts.css`\n and the `wrapper` layout's root class on `<body>`.\n- `app/page.tsx` renders markup following the `wrapper` app-shell layout from\n [`@pantoken/plugin-layouts`](https://www.npmjs.com/package/@pantoken/plugin-layouts)\n (`.container` / `.header` / `.content` parts) styled with `instui-*` classes.\n",
|
|
40
|
+
"next.config.mjs": "import { withPantoken } from \"@pantoken/next\";\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {};\n\nexport default withPantoken(nextConfig);\n",
|
|
41
|
+
"package.json": "{\n \"name\": \"{{projectName}}\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\"\n },\n \"dependencies\": {\n \"@pantoken/next\": \"latest\",\n \"@pantoken/plugin-layouts\": \"latest\",\n \"next\": \"^16.2.11\",\n \"react\": \"^19.2.8\",\n \"react-dom\": \"^19.2.8\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"typescript\": \"^7.0.2\"\n }\n}\n",
|
|
42
|
+
"tsconfig.json": "{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"jsx\": \"preserve\",\n \"strict\": true,\n \"skipLibCheck\": true,\n \"plugins\": [{ \"name\": \"next\" }]\n },\n \"include\": [\"app\", \"next-env.d.ts\"]\n}\n",
|
|
43
|
+
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\"]\n}\n",
|
|
44
|
+
".vscode/settings.json": "{\n \"html.customData\": [\"./node_modules/@pantoken/pantoken/dist/html-custom-data.json\"],\n \"css.customData\": [\"./node_modules/@pantoken/pantoken/dist/css-custom-data.json\"]\n}\n",
|
|
45
|
+
"app/layout.tsx": "import \"@pantoken/css/inject\";\nimport \"@pantoken/plugin-layouts/layouts.css\";\n\nexport const metadata = {\n title: \"{{projectName}}\",\n};\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n return (\n <html lang=\"en\">\n <body className=\"instui-display-flex\">{children}</body>\n </html>\n );\n}\n",
|
|
46
|
+
"app/page.tsx": "export default function Page() {\n return (\n<div className=\"container\">\n <div className=\"header\">\n <div className=\"top\">\n {/* breadcrumb */}\n <div className=\"utilities\"> {/* optional */}\n <button className=\"instui-button\"></button>\n </div>\n </div>\n <div className=\"info\">\n <div className=\"title\">\n {{projectName}}\n </div>\n <div className=\"description\"> {/* optional */}\n Styled with <code>@pantoken/components</code> and laid out with the <code>wrapper</code> layout from <code>@pantoken/plugin-layouts</code>.\n </div>\n </div>\n <slot name=\"header\"></slot> {/* optional */}\n <div className=\"actions\"> {/* optional */}\n <button className=\"instui-button\"></button>\n </div>\n <div className=\"tabs\"> {/* optional */}\n {/* tabs */}\n </div>\n <div className=\"filters\"> {/* optional */}\n <slot name=\"filters\"></slot>\n </div>\n </div>\n <div className=\"content\">\n <div className=\"list\"></div> {/* optional */}\n <slot name=\"content\">\n <p>Get started building with pantoken.</p>\n <button className=\"instui-button -color-primary\" type=\"button\">Get started</button>\n </slot>\n <slot name=\"trailing\"></slot> {/* optional */}\n </div>\n </div>\n );\n}\n",
|
|
47
|
+
"cssdoc.json": "{\n \"$schema\": \"https://cssdoc.dev/cssdoc.schema.json\",\n \"extends\": [\n \"./node_modules/@pantoken/pantoken/cssdoc-base.json\"\n ],\n \"modifierConvention\": \"rscss\",\n \"inlineComments\": \"ignore\",\n \"providers\": [\n {\n \"path\": \"./node_modules/@pantoken/pantoken/model.json\"\n }\n ]\n}"
|
|
48
|
+
},
|
|
49
|
+
"react": {
|
|
50
|
+
".gitignore": "node_modules\ndist\n",
|
|
51
|
+
"README.md": "# {{projectName}}\n\nScaffolded with `pantoken-scaffold react` (or `pantoken-ai scaffold react`) — a Vite + React app styled with\n[`@pantoken/react`](https://www.npmjs.com/package/@pantoken/react) and\n[`@pantoken/css`](https://www.npmjs.com/package/@pantoken/css), Instructure's design tokens and\nicons.\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `src/main.tsx` imports `@pantoken/css/inject`, which defines every `--instui-*` custom property.\n- `src/App.tsx` renders markup following the `wrapper` app-shell layout from\n [`@pantoken/plugin-layouts`](https://www.npmjs.com/package/@pantoken/plugin-layouts)\n (`.container` / `.header` / `.content` parts) styled with `instui-*` classes.\n- For InstUI's full React component library (buttons, modals, etc. — including `@pantoken/react`'s\n `<Icon>`), add the specific `@instructure/ui-*` packages you need — see <https://instructure.design>.\n",
|
|
52
|
+
"index.html": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>{{projectName}}</title>\n </head>\n <body>\n <div id=\"root\"></div>\n <script type=\"module\" src=\"/src/main.tsx\"><\/script>\n </body>\n</html>\n",
|
|
53
|
+
"package.json": "{\n \"name\": \"{{projectName}}\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@pantoken/css\": \"latest\",\n \"@pantoken/plugin-layouts\": \"latest\",\n \"@pantoken/react\": \"latest\",\n \"react\": \"^19.2.8\",\n \"react-dom\": \"^19.2.8\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"@types/react\": \"^19.2.18\",\n \"@types/react-dom\": \"^19.2.5\",\n \"@vitejs/plugin-react\": \"^6.1.0\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\"\n }\n}\n",
|
|
54
|
+
"tsconfig.json": "{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"jsx\": \"react-jsx\",\n \"strict\": true,\n \"skipLibCheck\": true\n },\n \"include\": [\"src\"]\n}\n",
|
|
55
|
+
"vite.config.ts": "import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({\n plugins: [react()],\n});\n",
|
|
56
|
+
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\"]\n}\n",
|
|
57
|
+
".vscode/settings.json": "{\n \"html.customData\": [\"./node_modules/@pantoken/pantoken/dist/html-custom-data.json\"],\n \"css.customData\": [\"./node_modules/@pantoken/pantoken/dist/css-custom-data.json\"]\n}\n",
|
|
58
|
+
"src/App.tsx": "import \"@pantoken/plugin-layouts/layouts.css\";\n\nexport function App() {\n return (\n <div className=\"instui-display-flex\">\n<div className=\"container\">\n <div className=\"header\">\n <div className=\"top\">\n {/* breadcrumb */}\n <div className=\"utilities\"> {/* optional */}\n <button className=\"instui-button\"></button>\n </div>\n </div>\n <div className=\"info\">\n <div className=\"title\">\n {{projectName}}\n </div>\n <div className=\"description\"> {/* optional */}\n Styled with <code>@pantoken/components</code> and laid out with the <code>wrapper</code> layout from <code>@pantoken/plugin-layouts</code>.\n </div>\n </div>\n <slot name=\"header\"></slot> {/* optional */}\n <div className=\"actions\"> {/* optional */}\n <button className=\"instui-button\"></button>\n </div>\n <div className=\"tabs\"> {/* optional */}\n {/* tabs */}\n </div>\n <div className=\"filters\"> {/* optional */}\n <slot name=\"filters\"></slot>\n </div>\n </div>\n <div className=\"content\">\n <div className=\"list\"></div> {/* optional */}\n <slot name=\"content\">\n <p>Get started building with pantoken.</p>\n <button className=\"instui-button -color-primary\" type=\"button\">Get started</button>\n </slot>\n <slot name=\"trailing\"></slot> {/* optional */}\n </div>\n </div>\n </div>\n );\n}\n",
|
|
59
|
+
"src/main.tsx": "import { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\n// Defines every --instui-* custom property this app can reference.\nimport \"@pantoken/css/inject\";\nimport { App } from \"./App.tsx\";\n\ncreateRoot(document.getElementById(\"root\")!).render(\n <StrictMode>\n <App />\n </StrictMode>,\n);\n",
|
|
60
|
+
"cssdoc.json": "{\n \"$schema\": \"https://cssdoc.dev/cssdoc.schema.json\",\n \"extends\": [\n \"./node_modules/@pantoken/pantoken/cssdoc-base.json\"\n ],\n \"modifierConvention\": \"rscss\",\n \"inlineComments\": \"ignore\",\n \"providers\": [\n {\n \"path\": \"./node_modules/@pantoken/pantoken/model.json\"\n }\n ]\n}"
|
|
61
|
+
},
|
|
62
|
+
"svelte": {
|
|
63
|
+
".gitignore": "node_modules\ndist\n",
|
|
64
|
+
"README.md": "# {{projectName}}\n\nScaffolded with `pantoken-scaffold svelte` (or `pantoken-ai scaffold svelte`) — a Vite + Svelte app\nstyled with [`@pantoken/components`](https://www.npmjs.com/package/@pantoken/components) and\n[`@pantoken/svelte`](https://www.npmjs.com/package/@pantoken/svelte) (icon action + token reads).\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `src/main.ts` calls `register()` (from `@pantoken/svelte`) once at bootstrap so elements like\n `<instui-icon>` work in templates, and imports the token/component CSS plus\n `@pantoken/plugin-layouts/layouts.css`.\n- `src/App.svelte`'s markup follows the `wrapper` app-shell layout from\n `@pantoken/plugin-layouts` (`.container` / `.header` / `.content` parts).\n- Apply classes like `class=\"instui-button\"` to markup; see the\n [component reference](https://pantoken.iywahl.com/api/css) for the full class list.\n",
|
|
65
|
+
"index.html": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>{{projectName}}</title>\n </head>\n <body>\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.ts\"><\/script>\n </body>\n</html>\n",
|
|
66
|
+
"package.json": "{\n \"name\": \"{{projectName}}\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@pantoken/css\": \"latest\",\n \"@pantoken/plugin-layouts\": \"latest\",\n \"@pantoken/svelte\": \"latest\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"@sveltejs/vite-plugin-svelte\": \"^7.3.0\",\n \"svelte\": \"^5.56.10\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\"\n }\n}\n",
|
|
67
|
+
"tsconfig.json": "{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"strict\": true,\n \"skipLibCheck\": true\n },\n \"include\": [\"src\"]\n}\n",
|
|
68
|
+
"vite.config.ts": "import { defineConfig } from \"vite\";\nimport { svelte } from \"@sveltejs/vite-plugin-svelte\";\n\nexport default defineConfig({\n plugins: [svelte()],\n});\n",
|
|
69
|
+
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\", \"svelte.svelte-vscode\"]\n}\n",
|
|
70
|
+
".vscode/settings.json": "{\n \"html.customData\": [\"./node_modules/@pantoken/pantoken/dist/html-custom-data.json\"],\n \"css.customData\": [\"./node_modules/@pantoken/pantoken/dist/css-custom-data.json\"]\n}\n",
|
|
71
|
+
"src/App.svelte": "<div class=\"instui-display-flex\">\n<div class=\"container\">\n <div class=\"header\">\n <div class=\"top\">\n <!-- breadcrumb -->\n <div class=\"utilities\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n </div>\n <div class=\"info\">\n <div class=\"title\">\n {{projectName}}\n </div>\n <div class=\"description\"> <!-- optional -->\n Styled with <code>@pantoken/components</code> and laid out with the <code>wrapper</code> layout from <code>@pantoken/plugin-layouts</code>.\n </div>\n </div>\n <slot name=\"header\"></slot> <!-- optional -->\n <div class=\"actions\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n <div class=\"tabs\"> <!-- optional -->\n <!-- tabs -->\n </div>\n <div class=\"filters\"> <!-- optional -->\n <slot name=\"filters\"></slot>\n </div>\n </div>\n <div class=\"content\">\n <div class=\"list\"></div> <!-- optional -->\n <slot name=\"content\">\n <p>Get started building with pantoken.</p>\n <button class=\"instui-button -color-primary\" type=\"button\">Get started</button>\n </slot>\n <slot name=\"trailing\"></slot> <!-- optional -->\n </div>\n </div>\n</div>\n",
|
|
72
|
+
"src/main.ts": "import { mount } from \"svelte\";\nimport { register } from \"@pantoken/svelte\";\n// Defines every --instui-* custom property this app can reference.\nimport \"@pantoken/css\";\nimport \"@pantoken/plugin-layouts/layouts.css\";\nimport App from \"./App.svelte\";\n\nregister(); // auto-registers <instui-icon> and friends\n\nmount(App, { target: document.getElementById(\"app\")! });\n",
|
|
73
|
+
"cssdoc.json": "{\n \"$schema\": \"https://cssdoc.dev/cssdoc.schema.json\",\n \"extends\": [\n \"./node_modules/@pantoken/pantoken/cssdoc-base.json\"\n ],\n \"modifierConvention\": \"rscss\",\n \"inlineComments\": \"ignore\",\n \"providers\": [\n {\n \"path\": \"./node_modules/@pantoken/pantoken/model.json\"\n }\n ]\n}"
|
|
74
|
+
},
|
|
75
|
+
"vue": {
|
|
76
|
+
".gitignore": "node_modules\ndist\n",
|
|
77
|
+
"README.md": "# {{projectName}}\n\nScaffolded with `pantoken-scaffold vue` (or `pantoken-ai scaffold vue`) — a Vite + Vue 3 app styled\nwith [`@pantoken/components`](https://www.npmjs.com/package/@pantoken/components) and\n[`@pantoken/vue`](https://www.npmjs.com/package/@pantoken/vue) (the pantoken Vue plugin).\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `src/main.ts` calls `app.use(PantokenVue)` (from `@pantoken/vue`) so elements like\n `<instui-icon>` work in templates, and imports the token/component CSS plus\n `@pantoken/plugin-layouts/layouts.css`.\n- `src/App.vue`'s template follows the `wrapper` app-shell layout from\n `@pantoken/plugin-layouts` (`.container` / `.header` / `.content` parts).\n- Apply classes like `class=\"instui-button\"` to markup; see the\n [component reference](https://pantoken.iywahl.com/api/css) for the full class list.\n",
|
|
78
|
+
"index.html": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>{{projectName}}</title>\n </head>\n <body>\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.ts\"><\/script>\n </body>\n</html>\n",
|
|
79
|
+
"package.json": "{\n \"name\": \"{{projectName}}\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@pantoken/css\": \"latest\",\n \"@pantoken/plugin-layouts\": \"latest\",\n \"@pantoken/vue\": \"latest\",\n \"vue\": \"^3.5.41\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"@vitejs/plugin-vue\": \"^6.0.8\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\",\n \"vue-tsc\": \"^3.3.11\"\n }\n}\n",
|
|
80
|
+
"tsconfig.json": "{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"strict\": true,\n \"skipLibCheck\": true\n },\n \"include\": [\"src\"]\n}\n",
|
|
81
|
+
"vite.config.ts": "import { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\n\nexport default defineConfig({\n plugins: [vue()],\n});\n",
|
|
82
|
+
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\", \"Vue.volar\"]\n}\n",
|
|
83
|
+
".vscode/settings.json": "{\n \"html.customData\": [\"./node_modules/@pantoken/pantoken/dist/html-custom-data.json\"],\n \"css.customData\": [\"./node_modules/@pantoken/pantoken/dist/css-custom-data.json\"]\n}\n",
|
|
84
|
+
"src/App.vue": "<script setup lang=\"ts\"><\/script>\n\n<template>\n <div class=\"instui-display-flex\">\n<div class=\"container\">\n <div class=\"header\">\n <div class=\"top\">\n <!-- breadcrumb -->\n <div class=\"utilities\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n </div>\n <div class=\"info\">\n <div class=\"title\">\n {{projectName}}\n </div>\n <div class=\"description\"> <!-- optional -->\n Styled with <code>@pantoken/components</code> and laid out with the <code>wrapper</code> layout from <code>@pantoken/plugin-layouts</code>.\n </div>\n </div>\n <slot name=\"header\"></slot> <!-- optional -->\n <div class=\"actions\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n <div class=\"tabs\"> <!-- optional -->\n <!-- tabs -->\n </div>\n <div class=\"filters\"> <!-- optional -->\n <slot name=\"filters\"></slot>\n </div>\n </div>\n <div class=\"content\">\n <div class=\"list\"></div> <!-- optional -->\n <slot name=\"content\">\n <p>Get started building with pantoken.</p>\n <button class=\"instui-button -color-primary\" type=\"button\">Get started</button>\n </slot>\n <slot name=\"trailing\"></slot> <!-- optional -->\n </div>\n </div>\n </div>\n</template>\n",
|
|
85
|
+
"src/main.ts": "import { createApp } from \"vue\";\nimport { PantokenVue } from \"@pantoken/vue\";\n// Defines every --instui-* custom property this app can reference.\nimport \"@pantoken/css\";\nimport \"@pantoken/plugin-layouts/layouts.css\";\nimport App from \"./App.vue\";\n\ncreateApp(App).use(PantokenVue).mount(\"#app\");\n",
|
|
86
|
+
"cssdoc.json": "{\n \"$schema\": \"https://cssdoc.dev/cssdoc.schema.json\",\n \"extends\": [\n \"./node_modules/@pantoken/pantoken/cssdoc-base.json\"\n ],\n \"modifierConvention\": \"rscss\",\n \"inlineComments\": \"ignore\",\n \"providers\": [\n {\n \"path\": \"./node_modules/@pantoken/pantoken/model.json\"\n }\n ]\n}"
|
|
87
|
+
},
|
|
88
|
+
"web-components": {
|
|
89
|
+
".gitignore": "node_modules\ndist\n",
|
|
90
|
+
"README.md": "# {{projectName}}\n\nScaffolded with `pantoken-scaffold web-components` (or `pantoken-ai scaffold web-components`) — a\nplain TypeScript app (via Vite) styled with\n[`@pantoken/components`](https://www.npmjs.com/package/@pantoken/components) and using framework-agnostic\ncustom elements from [`@pantoken/web-components`](https://www.npmjs.com/package/@pantoken/web-components).\n\n## Develop\n\n```sh\nnpm install\nnpm run dev\n```\n\n## What's here\n\n- `src/main.ts` imports `@pantoken/components/base.css` + `components.css` (`.instui-*` classes),\n `@pantoken/plugin-layouts/layouts.css`, and `@pantoken/web-components` (auto-registers elements\n like `<instui-icon>`), then renders markup into `#app`.\n- The markup follows the `wrapper` app-shell layout from `@pantoken/plugin-layouts` (`.container` /\n `.header` / `.content` parts) — see that package's README for what each part is for.\n- Use custom elements directly in markup, e.g. `<instui-button>`, `<instui-alert variant=\"success\">` —\n see the [`@pantoken/web-components` README](https://www.npmjs.com/package/@pantoken/web-components)\n for the full element list.\n",
|
|
91
|
+
"index.html": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>{{projectName}}</title>\n </head>\n <body class=\"instui-display-flex\">\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.ts\"><\/script>\n </body>\n</html>\n",
|
|
92
|
+
"package.json": "{\n \"name\": \"{{projectName}}\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@pantoken/components\": \"latest\",\n \"@pantoken/plugin-layouts\": \"latest\",\n \"@pantoken/web-components\": \"latest\"\n },\n \"devDependencies\": {\n \"@pantoken/pantoken\": \"latest\",\n \"typescript\": \"^7.0.2\",\n \"vite\": \"^8.2.2\"\n }\n}\n",
|
|
93
|
+
"tsconfig.json": "{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"Bundler\",\n \"strict\": true,\n \"skipLibCheck\": true\n },\n \"include\": [\"src\"]\n}\n",
|
|
94
|
+
"vite.config.ts": "import { defineConfig } from \"vite\";\n\nexport default defineConfig({});\n",
|
|
95
|
+
".vscode/extensions.json": "{\n \"recommendations\": [\"cssdoc.cssdoc-vscode\"]\n}\n",
|
|
96
|
+
".vscode/settings.json": "{\n \"html.customData\": [\"./node_modules/@pantoken/pantoken/dist/html-custom-data.json\"],\n \"css.customData\": [\"./node_modules/@pantoken/pantoken/dist/css-custom-data.json\"]\n}\n",
|
|
97
|
+
"src/main.ts": "// Defines every --instui-* custom property this app can reference.\nimport \"@pantoken/components/base.css\";\nimport \"@pantoken/components/components.css\";\nimport \"@pantoken/plugin-layouts/layouts.css\";\nimport \"@pantoken/web-components\"; // auto-registers <instui-icon> and friends\n\ndocument.querySelector<HTMLDivElement>(\"#app\")!.innerHTML = `\n<div class=\"container\">\n <div class=\"header\">\n <div class=\"top\">\n <!-- breadcrumb -->\n <div class=\"utilities\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n </div>\n <div class=\"info\">\n <div class=\"title\">\n {{projectName}}\n </div>\n <div class=\"description\"> <!-- optional -->\n Styled with <code>@pantoken/components</code> and laid out with the <code>wrapper</code> layout from <code>@pantoken/plugin-layouts</code>.\n </div>\n </div>\n <slot name=\"header\"></slot> <!-- optional -->\n <div class=\"actions\"> <!-- optional -->\n <button class=\"instui-button\"></button>\n </div>\n <div class=\"tabs\"> <!-- optional -->\n <!-- tabs -->\n </div>\n <div class=\"filters\"> <!-- optional -->\n <slot name=\"filters\"></slot>\n </div>\n </div>\n <div class=\"content\">\n <div class=\"list\"></div> <!-- optional -->\n <slot name=\"content\">\n <p>Get started building with pantoken.</p>\n <button class=\"instui-button -color-primary\" type=\"button\">Get started</button>\n </slot>\n <slot name=\"trailing\"></slot> <!-- optional -->\n </div>\n </div>\n`;\n\n// Framework-agnostic custom elements work anywhere — no per-framework port required.\ndocument\n .querySelector('.content slot[name=\"content\"]')\n ?.insertAdjacentHTML(\"afterbegin\", '<instui-icon name=\"check-mark\"></instui-icon>\\n');\n",
|
|
98
|
+
"cssdoc.json": "{\n \"$schema\": \"https://cssdoc.dev/cssdoc.schema.json\",\n \"extends\": [\n \"./node_modules/@pantoken/pantoken/cssdoc-base.json\"\n ],\n \"modifierConvention\": \"rscss\",\n \"inlineComments\": \"ignore\",\n \"providers\": [\n {\n \"path\": \"./node_modules/@pantoken/pantoken/model.json\"\n }\n ]\n}"
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
//#endregion
|
|
102
|
+
//#region generated/preset-ledger.ts
|
|
103
|
+
/**
|
|
104
|
+
* Registry of all available pantoken scaffold presets, keyed by platform name.
|
|
105
|
+
*/
|
|
106
|
+
const PRESET_LEDGER = {
|
|
107
|
+
"components": presetComponents,
|
|
108
|
+
"react": presetReact,
|
|
109
|
+
"vue": presetVue,
|
|
110
|
+
"web-components": presetWebComponents,
|
|
111
|
+
"angular": presetAngular,
|
|
112
|
+
"svelte": presetSvelte
|
|
113
|
+
};
|
|
114
|
+
//#endregion
|
|
115
|
+
//#region src/index.ts
|
|
116
|
+
/**
|
|
117
|
+
* `@pantoken/scaffold` — scaffold a starter project for a platform, with pantoken already
|
|
118
|
+
* installed and wired in. Standalone; usable via `npx @pantoken/scaffold <platform>` without
|
|
119
|
+
* `@pantoken/ai`.
|
|
120
|
+
*
|
|
121
|
+
* Powered by Bingo presets: each platform exports a preset that defines its scaffold structure.
|
|
122
|
+
*
|
|
123
|
+
* @module
|
|
124
|
+
* @alpha
|
|
125
|
+
*/
|
|
126
|
+
/**
|
|
127
|
+
* Every scaffoldable platform key (discovered from available presets).
|
|
128
|
+
*
|
|
129
|
+
* @example List available platforms
|
|
130
|
+
* ```ts
|
|
131
|
+
* import { SCAFFOLD_PLATFORMS } from "@pantoken/scaffold";
|
|
132
|
+
*
|
|
133
|
+
* console.log(SCAFFOLD_PLATFORMS); // → ["components", "react", "vue", "web-components"]
|
|
134
|
+
* ```
|
|
135
|
+
*/
|
|
136
|
+
const SCAFFOLD_PLATFORMS = Object.keys(PRESET_LEDGER);
|
|
137
|
+
const SCAFFOLD_PLATFORM_SET = new Set(SCAFFOLD_PLATFORMS);
|
|
138
|
+
/** Alternate platform names accepted alongside the canonical preset key (e.g. the pre-Bingo `html`). */
|
|
139
|
+
const PLATFORM_ALIASES = { html: "components" };
|
|
140
|
+
/** Whether `platform` is a known {@link ScaffoldPlatform} or one of its aliases (e.g. `html`). */
|
|
141
|
+
function isScaffoldPlatform(platform) {
|
|
142
|
+
return SCAFFOLD_PLATFORM_SET.has(platform) || platform in PLATFORM_ALIASES;
|
|
143
|
+
}
|
|
144
|
+
function resolveScaffoldPlatform(platform) {
|
|
145
|
+
const resolved = PLATFORM_ALIASES[platform] ?? platform;
|
|
146
|
+
if (SCAFFOLD_PLATFORM_SET.has(resolved)) return resolved;
|
|
147
|
+
throw new Error(`Unknown platform "${platform}". Expected one of: ${SCAFFOLD_PLATFORMS.join(", ")}.`);
|
|
148
|
+
}
|
|
149
|
+
/**
|
|
150
|
+
* Scaffold a starter project for a platform, with pantoken already installed and wired in.
|
|
151
|
+
*
|
|
152
|
+
* @param platform - A {@link ScaffoldPlatform}.
|
|
153
|
+
* @param dir - The target directory (default `"."`). Its basename (or `"pantoken-app"` for `"."`)
|
|
154
|
+
* is substituted for `{{projectName}}` in the template files.
|
|
155
|
+
* @returns The paths written.
|
|
156
|
+
*
|
|
157
|
+
* @example Scaffold a React starter
|
|
158
|
+
* ```ts
|
|
159
|
+
* import { scaffoldProject } from "@pantoken/scaffold";
|
|
160
|
+
*
|
|
161
|
+
* scaffoldProject("react", "./my-app");
|
|
162
|
+
* ```
|
|
163
|
+
*/
|
|
164
|
+
async function scaffoldProject(platform, dir = ".") {
|
|
165
|
+
const resolvedPlatform = resolveScaffoldPlatform(platform);
|
|
166
|
+
const projectName = dir === "." ? "pantoken-app" : dir.split("/").pop() ?? "pantoken-app";
|
|
167
|
+
const written = [];
|
|
168
|
+
const preset = PRESET_LEDGER[resolvedPlatform];
|
|
169
|
+
try {
|
|
170
|
+
const creation = producePreset(preset, {
|
|
171
|
+
offline: true,
|
|
172
|
+
options: { name: projectName }
|
|
173
|
+
});
|
|
174
|
+
for (const [file, rawContent] of Object.entries(creation.files ?? {})) {
|
|
175
|
+
const path = join(dir, file);
|
|
176
|
+
mkdirSync(dirname(path), { recursive: true });
|
|
177
|
+
const content = rawContent instanceof ArrayBuffer ? Buffer.from(rawContent) : rawContent;
|
|
178
|
+
writeFileSync(path, content);
|
|
179
|
+
written.push(path);
|
|
180
|
+
}
|
|
181
|
+
} catch {}
|
|
182
|
+
if (written.length === 0) {
|
|
183
|
+
const templates = SCAFFOLDS[resolvedPlatform];
|
|
184
|
+
if (templates) for (const [file, content] of Object.entries(templates)) {
|
|
185
|
+
const substituted = content.replaceAll("{{projectName}}", projectName);
|
|
186
|
+
const path = join(dir, file);
|
|
187
|
+
mkdirSync(dirname(path), { recursive: true });
|
|
188
|
+
writeFileSync(path, substituted);
|
|
189
|
+
written.push(path);
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
return written;
|
|
193
|
+
}
|
|
194
|
+
//#endregion
|
|
195
|
+
export { isScaffoldPlatform as n, scaffoldProject as r, SCAFFOLD_PLATFORMS as t };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pantoken/scaffold",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.1",
|
|
4
4
|
"description": "npx @pantoken/scaffold <platform> — scaffold a starter project (html, react, next, angular, web-components, ...) with pantoken already installed and wired in.",
|
|
5
5
|
"homepage": "https://pantoken.iywahl.com",
|
|
6
6
|
"bugs": "https://github.com/thedannywahl/pantoken/issues",
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
"sideEffects": false,
|
|
22
22
|
"exports": {
|
|
23
23
|
".": "./dist/index.mjs",
|
|
24
|
+
"./cli": "./dist/cli.mjs",
|
|
24
25
|
"./package.json": "./package.json"
|
|
25
26
|
},
|
|
26
27
|
"publishConfig": {
|
|
@@ -28,13 +29,13 @@
|
|
|
28
29
|
"provenance": true
|
|
29
30
|
},
|
|
30
31
|
"dependencies": {
|
|
31
|
-
"@pantoken/angular": "0.1.
|
|
32
|
-
"@pantoken/components": "1.0.
|
|
33
|
-
"@pantoken/react": "0.1.
|
|
32
|
+
"@pantoken/angular": "0.1.27",
|
|
33
|
+
"@pantoken/components": "1.0.3",
|
|
34
|
+
"@pantoken/react": "0.1.28",
|
|
34
35
|
"@pantoken/scaffold-base": "0.2.0",
|
|
35
|
-
"@pantoken/svelte": "0.1.
|
|
36
|
-
"@pantoken/vue": "0.1.
|
|
37
|
-
"@pantoken/web-components": "0.5.
|
|
36
|
+
"@pantoken/svelte": "0.1.28",
|
|
37
|
+
"@pantoken/vue": "0.1.28",
|
|
38
|
+
"@pantoken/web-components": "0.5.8",
|
|
38
39
|
"bingo-stratum": "^0.5.13"
|
|
39
40
|
},
|
|
40
41
|
"devDependencies": {
|