@pygmalionjs/pygmalion 0.6.20 → 0.6.22

package/dist-lib/testing.js

@@ -1,4 +1,4 @@
-import { F as s, N as a, e as r, s as i, a as t } from "./FrozenRoutePreview-B6UY1aLt.js";
+import { F as s, N as a, e as r, s as i, a as t } from "./FrozenRoutePreview-BQDZOtJG.js";
 export {
   s as FrozenRoutePreviewView,
   a as NodeModel,

package/dist-lib/types/editor/designImport.d.ts

@@ -190,6 +190,13 @@ export interface DesignImportPage {
     componentName?: string;
     gallery?: string[];
     route?: string;
+    /**
+     * Host-owned routed entry used only to reproduce this screen in previews.
+     * `route` remains the canonical product address shown in inventory and
+     * coverage. Use this for a development authentication or fixture gateway
+     * that lands on the same screen without exposing its mechanics to core.
+     */
+    previewRoute?: string;
     path?: string;
     publish?: boolean;
     width?: number;
@@ -314,6 +321,8 @@ export interface DesignImportInitialPage {
     componentName?: string;
     gallery?: string[];
     route?: string;
+    /** Routed host entry used to reproduce the canonical `route` in previews. */
+    previewRoute?: string;
     path?: string;
     publish?: boolean;
     width?: number;

package/dist-lib/types/editor/previewBootstrap.d.ts

@@ -10,7 +10,7 @@ export interface PreviewCacheNamespaceOptions {
     recipeVersion?: number;
     scope?: string;
 }
-export type StoryboardCaptureRecipeInput = Pick<DesignScreenCase, 'route' | 'path' | 'componentName' | 'gallery' | 'width' | 'height' | 'environment' | 'preset' | 'interactions' | 'assertions'>;
+export type StoryboardCaptureRecipeInput = Pick<DesignScreenCase, 'route' | 'previewRoute' | 'path' | 'componentName' | 'gallery' | 'width' | 'height' | 'environment' | 'preset' | 'interactions' | 'assertions'>;
 export interface PreviewArtifactExpectation {
     namespace: string;
     sourceRevision: string;
@@ -169,6 +169,7 @@ export declare function previewDependencyDigest(route: string): string | undefin
 export interface PreviewFramePage {
     canonicalId: string;
     route: string;
+    previewRoute?: string;
     width?: number;
     height?: number;
     environment?: StoryboardEnvironment;

package/dist-lib/types/editor/previewRoute.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The route that boots a screen preview.
+ *
+ * `route` remains the product's canonical address for inventory, coverage, and
+ * source identity. A host may expose a development-only routed entry that
+ * prepares authentication or fixture state before rendering the same screen;
+ * `previewRoute` names that entry without relabelling the product screen.
+ */
+export declare function resolvePreviewRoute(page: {
+    route?: string | null;
+    previewRoute?: string | null;
+}): string | null;

package/dist-lib/types/editor/previewWarmup.d.ts

@@ -8,6 +8,7 @@ export interface PreviewWarmupPage {
     importPageId?: string;
     session?: string;
     route?: string | null;
+    previewRoute?: string | null;
     width?: number;
     height?: number;
     heightMode?: DesignFrameHeightMode;

package/dist-lib/types/editor/routePreview.d.ts

@@ -48,6 +48,7 @@ export interface RoutePreviewShadowArtifact {
 export interface RoutePreviewArtifactPage {
     canonicalId: string;
     route: string;
+    previewRoute?: string;
     /** What this page's capture must have come from. Compared per frame. */
     fingerprint?: string;
     width?: number;

package/dist-lib/types/editor/screenFlows.d.ts

@@ -10,8 +10,10 @@ export interface ScreenFlowWaypoint {
 }
 export interface ScreenFlowPath {
     id: string;
-    /** Route the instance boots on. */
+    /** Canonical product route the instance starts from. */
     route: string;
+    /** Optional host-owned gateway used only to boot this flow in previews. */
+    previewRoute?: string;
     /**
      * Declarative browser environment of the whole instance, merged over the
      * storyboard baseline. Branch paths (error states, special fixtures)

package/dist-lib/types/editor/store.d.ts

@@ -174,6 +174,8 @@ export interface PageModel {
     section?: string;
     /** Actual app routes running (iframe referencing page — not editable, actual routing in preview). */
     route?: string;
+    /** Host-owned routed entry used to boot the canonical route in previews. */
+    previewRoute?: string;
     /** Whether the design importer replaces the first actual DOM render with the entire layer tree and the processing status. */
     importLayers?: boolean;
     layersImported?: boolean;
@@ -496,6 +498,7 @@ export declare class EditorStore {
         canvas?: string;
         section?: string;
         route?: string;
+        previewRoute?: string;
         width?: number;
         height?: number;
         frameSizeMode?: DesignFrameSizeMode;

package/dist-lib/types/editor/storyboardDiscovery.d.ts

@@ -43,6 +43,7 @@ export interface StoryboardResolvedPage {
     componentName?: string;
     gallery?: string[];
     route?: string;
+    previewRoute?: string;
     path?: string;
     publish?: boolean;
     width?: number;

package/node/inspect-plugin.mjs

@@ -183,7 +183,11 @@ function instrumentJsxInto(code, componentFile, magic) {
       }
       if (injected.length > 0) {
         // Insert as first properties. Afterwards, if there are spread/explicit properties, they follow React's general property priority.
-        magic.appendLeft(node.tagName.getEnd(), injected.join(''));
+        // A generic JSX component keeps its type arguments between the tag name
+        // and its props (`<List<Row> rows={rows} />`). The attributes position
+        // is after the type argument's closing `>`; the type-argument end itself
+        // is before that token and would still inject metadata inside `<Row>`.
+        magic.appendLeft(node.attributes.pos, injected.join(''));
       }
       const ownInjected = [];
       if (!hasOwnIdentity) {

package/node/runtime.mjs

@@ -0,0 +1,5 @@
+export {
+  PYGMALION_STORYBOARD_RUNTIME_ATTRIBUTE,
+  storyboardEnvironmentBootstrapSource,
+} from './storyboard-environment.mjs';
+

package/node/webpack-loader.cjs

@@ -1,4 +1,5 @@
 const path = require('node:path');
+const ts = require('typescript');
 
 const inspectPlugins = new Map();
 
@@ -27,6 +28,23 @@ function inspectPlugin(root, sourceDirectory) {
   return promise;
 }
 
+function transpileForJavaScriptLoader(code, resourcePath) {
+  const result = ts.transpileModule(code, {
+    fileName: resourcePath,
+    compilerOptions: {
+      target: ts.ScriptTarget.ESNext,
+      module: ts.ModuleKind.ESNext,
+      jsx: ts.JsxEmit.Preserve,
+      sourceMap: true,
+      inlineSources: true,
+    },
+  });
+  return {
+    code: result.outputText,
+    map: result.sourceMapText ? JSON.parse(result.sourceMapText) : null,
+  };
+}
+
 module.exports = function pygmalionWebpackLoader(source, inputMap) {
   const callback = this.async();
   const options = typeof this.getOptions === 'function' ? this.getOptions() : {};
@@ -50,9 +68,25 @@ module.exports = function pygmalionWebpackLoader(source, inputMap) {
     .then((plugin) => {
       const transformed = plugin.transform(String(source), this.resourcePath);
       if (!transformed) {
+        if (options.transpile === true) {
+          const transpiled = transpileForJavaScriptLoader(
+            String(source),
+            this.resourcePath,
+          );
+          callback(null, transpiled.code, transpiled.map);
+          return;
+        }
         callback(null, source, inputMap);
         return;
       }
+      if (options.transpile === true) {
+        const transpiled = transpileForJavaScriptLoader(
+          transformed.code,
+          this.resourcePath,
+        );
+        callback(null, transpiled.code, transpiled.map);
+        return;
+      }
       callback(null, transformed.code, transformed.map);
     })
     .catch((error) => callback(error));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pygmalionjs/pygmalion",
-  "version": "0.6.20",
+  "version": "0.6.22",
   "description": "Code-backed DOM design sandbox and visual QA editor",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -29,6 +29,10 @@
     },
     "./dev-view": "./node/dev-view.vite.mjs",
     "./webpack-loader": "./node/webpack-loader.cjs",
+    "./runtime": {
+      "types": "./runtime.d.ts",
+      "default": "./node/runtime.mjs"
+    },
     "./testing": {
       "types": "./dist-lib/types/testing.d.ts",
       "default": "./dist-lib/testing.js"
@@ -67,9 +71,11 @@
     "node/storyboard.mjs",
     "node/vite.mjs",
     "node/webpack-loader.cjs",
+    "node/runtime.mjs",
     "inspect.d.ts",
     "qa.d.ts",
     "storyboard.d.ts",
+    "runtime.d.ts",
     "vite.d.ts"
   ],
   "scripts": {

package/runtime.d.ts

@@ -0,0 +1,9 @@
+/** Attribute used to identify an installed Pygmalion pre-mount runtime. */
+export declare const PYGMALION_STORYBOARD_RUNTIME_ATTRIBUTE: string;
+
+/**
+ * Inline script source for hosts whose bundler cannot run the Pygmalion Vite
+ * HTML plugin. Render it before application scripts on every previewable route.
+ */
+export declare function storyboardEnvironmentBootstrapSource(): string;
+