@scaffold-ui-kit/preview 0.0.0-stage → 2.3.0

package/package.json

@@ -1,6 +1,126 @@
 {
   "name": "@scaffold-ui-kit/preview",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "2.3.0",
+  "description": "Preview for scaffold-ui-kit kits: a Vite host with native per-framework preview iframes, a composable slot editor, scenarios, and live regeneration - configured through the preview block of the kit's configuration.",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./types": {
+      "types": "./dist/lib/types.d.ts",
+      "import": "./dist/lib/types.js"
+    },
+    "./options": {
+      "types": "./dist/options.d.ts",
+      "import": "./dist/options.js"
+    },
+    "./views": {
+      "types": "./dist/views.d.ts",
+      "import": "./dist/views.js"
+    },
+    "./shell": {
+      "types": "./dist/shell.d.ts",
+      "default": "./dist/shell.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "default": "./dist/react.js"
+    },
+    "./shells/charcell": {
+      "types": "./dist/declarations/application/shells/charcell/index.d.ts",
+      "default": "./application/shells/charcell/index.tsx"
+    },
+    "./shells/charcell/page": {
+      "types": "./dist/shells/charcell/page.d.ts",
+      "default": "./dist/shells/charcell/page.js"
+    },
+    "./testing": {
+      "types": "./dist/testing.d.ts",
+      "default": "./dist/testing.js"
+    }
+  },
+  "files": [
+    "dist",
+    "application",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "bin": {
+    "scaffold-ui-kit-preview": "./dist/cli.js"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "dependencies": {
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@vitejs/plugin-react": "^5.2.0",
+    "@vitejs/plugin-vue": "^6.0.9",
+    "commander": "^12.1.0",
+    "jiti": "^2.4.2",
+    "markdown-to-jsx": "^9.10.3",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "svelte": "^5.56.3",
+    "typescript": "^5.4.5",
+    "vite": "^7.3.5",
+    "vue": "^3.5.38",
+    "@js-template-engine/core": "^2.3.0",
+    "@js-template-engine/extension-react": "^2.3.0",
+    "@js-template-engine/extension-bem": "^2.3.0",
+    "@js-template-engine/extension-tailwind": "^2.3.0",
+    "scaffold-ui-kit": "^2.3.0",
+    "@js-template-engine/types": "^2.3.0"
+  },
+  "peerDependencies": {
+    "@zag-js/react": "^1.44.0",
+    "charcell": "^0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@zag-js/react": {
+      "optional": true
+    },
+    "charcell": {
+      "optional": true
+    }
+  },
+  "author": "Björn Djurnamn <bjorn@djurnamn.co>",
+  "license": "MIT",
+  "devDependencies": {
+    "@playwright/test": "1.62.1",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@zag-js/react": "^1.44.0",
+    "charcell": "^0.1.0",
+    "happy-dom": "^20.14.5",
+    "rimraf": "^5.0.5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/djurnamn/scaffold-ui-kit.git",
+    "directory": "packages/preview"
+  },
+  "keywords": [
+    "scaffold-ui-kit",
+    "ui-kit",
+    "component-library",
+    "preview"
+  ],
+  "bugs": {
+    "url": "https://github.com/djurnamn/scaffold-ui-kit/issues"
+  },
+  "homepage": "https://github.com/djurnamn/scaffold-ui-kit/tree/main/packages/preview#readme",
+  "scripts": {
+    "build": "rimraf dist && tsc && tsc -p tsconfig.shell-declarations.json",
+    "clean": "rimraf dist",
+    "test": "vitest run",
+    "test:e2e": "playwright test --config tests/browser/playwright.config.ts",
+    "test:package": "playwright test --config tests/browser/playwright.package.config.ts",
+    "typecheck": "tsc --noEmit -p tsconfig.type-check.json && tsc -p tsconfig.app.json",
+    "typecheck:app": "tsc -p tsconfig.app.json"
+  }
 }

package/src/build.ts

@@ -0,0 +1,51 @@
+// The static build, as `scaffold-ui-kit-preview build` runs it: check the
+// story files and manual specs first, then generate and build the preview into
+// the kit's static root. A check error stops the build, as it would leave a
+// story the preview shows wrong or not at all.
+
+import { rmSync } from 'node:fs';
+import type { ConfigurationLookupOptions } from 'scaffold-ui-kit';
+import type { InlineConfig } from 'vite';
+import { checkPreview } from './check.js';
+import { loadPreviewContext } from './context.js';
+import { generatePreview } from './generate.js';
+import { buildViteConfiguration } from './vite-configuration.js';
+
+/** What a static build did. */
+export interface PreviewBuildResult {
+  /** Whether the preview was built: false when the check found errors. */
+  built: boolean;
+  /** The check's errors, each a line naming its component. */
+  errors: string[];
+  /** The check's warnings, which do not stop the build. */
+  warnings: string[];
+}
+
+/**
+ * Builds a kit's static preview: removes the previous build, checks the
+ * kit's story files and manual specs, and, when the check finds no errors,
+ * generates the preview with every story's html and builds it with Vite.
+ *
+ * @param kitRoot - The kit root (where its package.json lives).
+ * @param build - The Vite build to run; Vite's own by default.
+ * @param options - The kit configuration file, when it is not the one the
+ *   kit root gives.
+ * @returns Whether it built, the check's errors that stopped it, and its
+ *   warnings.
+ */
+export async function buildPreview(
+  kitRoot: string,
+  build?: (configuration: InlineConfig) => Promise<unknown>,
+  options: ConfigurationLookupOptions = {}
+): Promise<PreviewBuildResult> {
+  const context = loadPreviewContext(kitRoot, options);
+  // The previous build goes first, so a build that fails leaves no output
+  // behind that looks current.
+  rmSync(context.staticRoot, { recursive: true, force: true });
+  const { errors, warnings } = await checkPreview(kitRoot, options);
+  if (errors.length > 0) return { built: false, errors, warnings };
+  await generatePreview(context, { htmlSources: true });
+  const runBuild = build ?? (await import('vite')).build;
+  await runBuild(buildViteConfiguration(context));
+  return { built: true, errors, warnings };
+}