@onlook/storybook-plugin 0.4.0-beta.16 → 0.4.0-beta.18

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { E as EnvContainmentOptions, a as EnvContainmentSubstitution, O as OnlookPluginOptions, e as envContainmentPlugin, s as storybookOnlookPlugin } from './storybook-onlook-plugin-B9Eo_OIq.js';
+export { E as EnvContainmentOptions, a as EnvContainmentSubstitution, O as OnlookPluginOptions, e as envContainmentPlugin, s as storybookOnlookPlugin } from './storybook-onlook-plugin-J4qj72mN.js';
 import { Plugin } from 'vite';
 import { Indexer } from 'storybook/internal/types';
 

package/dist/index.js

@@ -857,6 +857,199 @@ function handleStoryFileChange({ file, modules }) {
   }
 }
 
+// src/package-mock/clerk-mock.ts
+var VALID_IDENT_RE2 = /^[A-Za-z_$][\w$]*$/;
+var RESERVED_HELPER_NAMES = /* @__PURE__ */ new Set([
+  "__user",
+  "__pass",
+  "__null",
+  "__clerk",
+  "__sessionId",
+  "__asyncNoop",
+  "__noop",
+  "createElement",
+  "Fragment"
+]);
+var BUILDERS = {
+  "@clerk/nextjs": buildClerkMockSource,
+  "@clerk/clerk-react": buildClerkMockSource
+};
+function isKnownMockPackage(pkg) {
+  return pkg in BUILDERS;
+}
+function buildPackageMockSource(pkg, usedExports) {
+  const build = BUILDERS[pkg];
+  if (!build) throw new Error(`no package mock for '${pkg}'`);
+  return build(usedExports);
+}
+var CLERK_KNOWN_HOOKS = {
+  useAuth: "({ isLoaded: true, isSignedIn: true, userId: __user.id, sessionId: __sessionId, actor: null, orgId: null, orgRole: null, orgSlug: null, has: () => true, signOut: __asyncNoop, getToken: async () => null })",
+  useUser: "({ isLoaded: true, isSignedIn: true, user: __user })",
+  useSession: '({ isLoaded: true, isSignedIn: true, session: { id: __sessionId, status: "active", user: __user } })',
+  useSessionList: "({ isLoaded: true, sessions: [], setActive: __asyncNoop })",
+  useClerk: "__clerk",
+  useOrganization: "({ isLoaded: true, organization: null, membership: null, memberships: undefined })",
+  useOrganizationList: "({ isLoaded: true, userMemberships: undefined, setActive: __asyncNoop })",
+  useSignIn: "({ isLoaded: true, signIn: undefined, setActive: __asyncNoop })",
+  useSignUp: "({ isLoaded: true, signUp: undefined, setActive: __asyncNoop })"
+};
+var CLERK_CHILDREN_COMPONENTS = /* @__PURE__ */ new Set([
+  "ClerkProvider",
+  "ClerkLoaded",
+  "SignedIn",
+  "Protect",
+  "SignInButton",
+  "SignUpButton",
+  "SignOutButton",
+  "SignInWithMetamaskButton"
+]);
+var CLERK_NULL_COMPONENTS = /* @__PURE__ */ new Set([
+  "SignedOut",
+  "ClerkLoading",
+  "RedirectToSignIn",
+  "RedirectToSignUp",
+  "RedirectToUserProfile",
+  "RedirectToOrganizationProfile",
+  "RedirectToCreateOrganization",
+  "AuthenticateWithRedirectCallback",
+  "UserButton",
+  "UserProfile",
+  "OrganizationSwitcher",
+  "OrganizationProfile",
+  "OrganizationList",
+  "CreateOrganization",
+  "SignIn",
+  "SignUp",
+  "Waitlist",
+  "GoogleOneTap"
+]);
+var CLERK_PREAMBLE = [
+  "// Auto-generated by @onlook/storybook-plugin (package mock). Zero-backend,",
+  "// signed-in Clerk stand-in so components that call useUser()/useAuth() render",
+  "// authenticated content in the canvas without a publishable key, clerk-js, or",
+  "// a network round-trip. Swap back to the real @clerk/* package for live data.",
+  "import { createElement, Fragment } from 'react';",
+  "const __asyncNoop = async () => {};",
+  "const __noop = () => {};",
+  // No `: any` param annotation: the virtual module is served extensionless
+  // (see header) so Vite parses it as PLAIN JS — a TS type annotation here is a
+  // runtime `Unexpected token ':'` that breaks every story importing the package.
+  "const __pass = (props) => createElement(Fragment, null, props ? props.children : undefined);",
+  "const __null = () => null;",
+  "const __sessionId = 'sess_onlookMock';",
+  "// A plausible signed-in Clerk user. Fields cover the common UserResource",
+  "// surface components read at render; no image URL (avoids a network fetch).",
+  "const __user = {",
+  "  id: 'user_onlookMock',",
+  "  firstName: 'Ada',",
+  "  lastName: 'Lovelace',",
+  "  fullName: 'Ada Lovelace',",
+  "  username: 'ada',",
+  "  imageUrl: '',",
+  "  hasImage: false,",
+  "  primaryEmailAddressId: 'idn_onlookMock',",
+  "  primaryEmailAddress: { id: 'idn_onlookMock', emailAddress: 'ada@example.com' },",
+  "  emailAddresses: [{ id: 'idn_onlookMock', emailAddress: 'ada@example.com' }],",
+  "  primaryPhoneNumber: null,",
+  "  phoneNumbers: [],",
+  "  externalAccounts: [],",
+  "  organizationMemberships: [],",
+  "  publicMetadata: {},",
+  "  unsafeMetadata: {},",
+  "  reload: __asyncNoop,",
+  "  update: __asyncNoop,",
+  "};",
+  "const __clerk = {",
+  "  loaded: true,",
+  "  user: __user,",
+  "  session: { id: __sessionId, status: 'active', user: __user },",
+  "  organization: null,",
+  "  openSignIn: __noop,",
+  "  openSignUp: __noop,",
+  "  openUserProfile: __noop,",
+  "  openOrganizationProfile: __noop,",
+  "  closeSignIn: __noop,",
+  "  closeSignUp: __noop,",
+  "  signOut: __asyncNoop,",
+  "  setActive: __asyncNoop,",
+  "};"
+];
+function clerkExportLine(name) {
+  if (name in CLERK_KNOWN_HOOKS) {
+    return `export const ${name} = () => ${CLERK_KNOWN_HOOKS[name]};`;
+  }
+  if (CLERK_CHILDREN_COMPONENTS.has(name)) {
+    return `export const ${name} = __pass;`;
+  }
+  if (CLERK_NULL_COMPONENTS.has(name)) {
+    return `export const ${name} = __null;`;
+  }
+  if (/^use[A-Z]/.test(name)) {
+    return `export const ${name} = () => ({ isLoaded: true, isSignedIn: true });`;
+  }
+  if (/^[A-Z]/.test(name)) {
+    return `export const ${name} = __pass;`;
+  }
+  return `export const ${name} = undefined;`;
+}
+function buildClerkMockSource(usedExports) {
+  const names = Array.from(
+    new Set(
+      usedExports.filter(
+        (n) => VALID_IDENT_RE2.test(n) && n !== "default" && !RESERVED_HELPER_NAMES.has(n)
+      )
+    )
+  ).sort();
+  const lines = [
+    ...CLERK_PREAMBLE,
+    "",
+    ...names.map(clerkExportLine),
+    "",
+    "// Rarely used, but `import Clerk from ...` must not fail: an inert object.",
+    "export default {};",
+    ""
+  ];
+  return lines.join("\n");
+}
+
+// src/package-mock/package-mock.ts
+var PACKAGE_MOCK_PLUGIN_NAME = "onlook-package-mock";
+var PACKAGE_MOCK_VIRTUAL_PREFIX = "\0onlook-package-mock:";
+function stripQuery2(id) {
+  const q = id.indexOf("?");
+  return q === -1 ? id : id.slice(0, q);
+}
+function packageMockPlugin(options) {
+  const entries = (options?.packages ?? []).filter(
+    (e) => e && typeof e.package === "string" && e.package.length > 0 && // Only known auth packages get a functional mock — an unknown package
+    // has no source builder, so silently drop it (honest skip) rather than
+    // intercept it into a broken module.
+    isKnownMockPackage(e.package)
+  );
+  if (entries.length === 0) return null;
+  const usedByPackage = /* @__PURE__ */ new Map();
+  for (const e of entries) usedByPackage.set(e.package, e.usedExports ?? []);
+  return {
+    name: PACKAGE_MOCK_PLUGIN_NAME,
+    // `pre` so we intercept the specifier before Vite's resolve pipeline (and
+    // before tsconfig-paths / node resolution) claims it.
+    enforce: "pre",
+    resolveId(source) {
+      if (source.startsWith("\0")) return null;
+      const cleaned = stripQuery2(source);
+      if (!usedByPackage.has(cleaned)) return null;
+      return PACKAGE_MOCK_VIRTUAL_PREFIX + cleaned;
+    },
+    load(id) {
+      if (!id.startsWith(PACKAGE_MOCK_VIRTUAL_PREFIX)) return null;
+      const pkg = id.slice(PACKAGE_MOCK_VIRTUAL_PREFIX.length);
+      const used = usedByPackage.get(pkg);
+      if (used === void 0) return null;
+      return buildPackageMockSource(pkg, used);
+    }
+  };
+}
+
 // src/screenshot-service/utils/console-logs/console-logs.ts
 async function captureConsoleLogs(storyId, theme = "light", storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   const browser = await getBrowser();
@@ -1669,10 +1862,12 @@ function storybookOnlookPlugin(options = {}) {
     handleHotUpdate: handleStoryFileChange
   };
   const envContainment = envContainmentPlugin(options.envContainment);
+  const packageMock = packageMockPlugin(options.packageMock);
   const moduleLoadCatchAll = options.moduleLoadCatchAll === false ? null : moduleLoadCatchAllPlugin();
   return withDedupeApply(
     [
       ...envContainment ? [envContainment] : [],
+      ...packageMock ? [packageMock] : [],
       ...moduleLoadCatchAll ? [moduleLoadCatchAll] : [],
       componentLocPlugin(),
       mainPlugin,

package/dist/preset/index.d.ts

@@ -1,4 +1,4 @@
-import { O as OnlookPluginOptions } from '../storybook-onlook-plugin-B9Eo_OIq.js';
+import { O as OnlookPluginOptions } from '../storybook-onlook-plugin-J4qj72mN.js';
 import 'vite';
 
 declare function pluginOptionsFromPresetOptions(options: Record<string, unknown> | undefined): OnlookPluginOptions;

package/dist/preset/index.js

@@ -853,6 +853,199 @@ function moduleLoadCatchAllPlugin() {
   };
 }
 
+// src/package-mock/clerk-mock.ts
+var VALID_IDENT_RE2 = /^[A-Za-z_$][\w$]*$/;
+var RESERVED_HELPER_NAMES = /* @__PURE__ */ new Set([
+  "__user",
+  "__pass",
+  "__null",
+  "__clerk",
+  "__sessionId",
+  "__asyncNoop",
+  "__noop",
+  "createElement",
+  "Fragment"
+]);
+var BUILDERS = {
+  "@clerk/nextjs": buildClerkMockSource,
+  "@clerk/clerk-react": buildClerkMockSource
+};
+function isKnownMockPackage(pkg) {
+  return pkg in BUILDERS;
+}
+function buildPackageMockSource(pkg, usedExports) {
+  const build = BUILDERS[pkg];
+  if (!build) throw new Error(`no package mock for '${pkg}'`);
+  return build(usedExports);
+}
+var CLERK_KNOWN_HOOKS = {
+  useAuth: "({ isLoaded: true, isSignedIn: true, userId: __user.id, sessionId: __sessionId, actor: null, orgId: null, orgRole: null, orgSlug: null, has: () => true, signOut: __asyncNoop, getToken: async () => null })",
+  useUser: "({ isLoaded: true, isSignedIn: true, user: __user })",
+  useSession: '({ isLoaded: true, isSignedIn: true, session: { id: __sessionId, status: "active", user: __user } })',
+  useSessionList: "({ isLoaded: true, sessions: [], setActive: __asyncNoop })",
+  useClerk: "__clerk",
+  useOrganization: "({ isLoaded: true, organization: null, membership: null, memberships: undefined })",
+  useOrganizationList: "({ isLoaded: true, userMemberships: undefined, setActive: __asyncNoop })",
+  useSignIn: "({ isLoaded: true, signIn: undefined, setActive: __asyncNoop })",
+  useSignUp: "({ isLoaded: true, signUp: undefined, setActive: __asyncNoop })"
+};
+var CLERK_CHILDREN_COMPONENTS = /* @__PURE__ */ new Set([
+  "ClerkProvider",
+  "ClerkLoaded",
+  "SignedIn",
+  "Protect",
+  "SignInButton",
+  "SignUpButton",
+  "SignOutButton",
+  "SignInWithMetamaskButton"
+]);
+var CLERK_NULL_COMPONENTS = /* @__PURE__ */ new Set([
+  "SignedOut",
+  "ClerkLoading",
+  "RedirectToSignIn",
+  "RedirectToSignUp",
+  "RedirectToUserProfile",
+  "RedirectToOrganizationProfile",
+  "RedirectToCreateOrganization",
+  "AuthenticateWithRedirectCallback",
+  "UserButton",
+  "UserProfile",
+  "OrganizationSwitcher",
+  "OrganizationProfile",
+  "OrganizationList",
+  "CreateOrganization",
+  "SignIn",
+  "SignUp",
+  "Waitlist",
+  "GoogleOneTap"
+]);
+var CLERK_PREAMBLE = [
+  "// Auto-generated by @onlook/storybook-plugin (package mock). Zero-backend,",
+  "// signed-in Clerk stand-in so components that call useUser()/useAuth() render",
+  "// authenticated content in the canvas without a publishable key, clerk-js, or",
+  "// a network round-trip. Swap back to the real @clerk/* package for live data.",
+  "import { createElement, Fragment } from 'react';",
+  "const __asyncNoop = async () => {};",
+  "const __noop = () => {};",
+  // No `: any` param annotation: the virtual module is served extensionless
+  // (see header) so Vite parses it as PLAIN JS — a TS type annotation here is a
+  // runtime `Unexpected token ':'` that breaks every story importing the package.
+  "const __pass = (props) => createElement(Fragment, null, props ? props.children : undefined);",
+  "const __null = () => null;",
+  "const __sessionId = 'sess_onlookMock';",
+  "// A plausible signed-in Clerk user. Fields cover the common UserResource",
+  "// surface components read at render; no image URL (avoids a network fetch).",
+  "const __user = {",
+  "  id: 'user_onlookMock',",
+  "  firstName: 'Ada',",
+  "  lastName: 'Lovelace',",
+  "  fullName: 'Ada Lovelace',",
+  "  username: 'ada',",
+  "  imageUrl: '',",
+  "  hasImage: false,",
+  "  primaryEmailAddressId: 'idn_onlookMock',",
+  "  primaryEmailAddress: { id: 'idn_onlookMock', emailAddress: 'ada@example.com' },",
+  "  emailAddresses: [{ id: 'idn_onlookMock', emailAddress: 'ada@example.com' }],",
+  "  primaryPhoneNumber: null,",
+  "  phoneNumbers: [],",
+  "  externalAccounts: [],",
+  "  organizationMemberships: [],",
+  "  publicMetadata: {},",
+  "  unsafeMetadata: {},",
+  "  reload: __asyncNoop,",
+  "  update: __asyncNoop,",
+  "};",
+  "const __clerk = {",
+  "  loaded: true,",
+  "  user: __user,",
+  "  session: { id: __sessionId, status: 'active', user: __user },",
+  "  organization: null,",
+  "  openSignIn: __noop,",
+  "  openSignUp: __noop,",
+  "  openUserProfile: __noop,",
+  "  openOrganizationProfile: __noop,",
+  "  closeSignIn: __noop,",
+  "  closeSignUp: __noop,",
+  "  signOut: __asyncNoop,",
+  "  setActive: __asyncNoop,",
+  "};"
+];
+function clerkExportLine(name) {
+  if (name in CLERK_KNOWN_HOOKS) {
+    return `export const ${name} = () => ${CLERK_KNOWN_HOOKS[name]};`;
+  }
+  if (CLERK_CHILDREN_COMPONENTS.has(name)) {
+    return `export const ${name} = __pass;`;
+  }
+  if (CLERK_NULL_COMPONENTS.has(name)) {
+    return `export const ${name} = __null;`;
+  }
+  if (/^use[A-Z]/.test(name)) {
+    return `export const ${name} = () => ({ isLoaded: true, isSignedIn: true });`;
+  }
+  if (/^[A-Z]/.test(name)) {
+    return `export const ${name} = __pass;`;
+  }
+  return `export const ${name} = undefined;`;
+}
+function buildClerkMockSource(usedExports) {
+  const names = Array.from(
+    new Set(
+      usedExports.filter(
+        (n) => VALID_IDENT_RE2.test(n) && n !== "default" && !RESERVED_HELPER_NAMES.has(n)
+      )
+    )
+  ).sort();
+  const lines = [
+    ...CLERK_PREAMBLE,
+    "",
+    ...names.map(clerkExportLine),
+    "",
+    "// Rarely used, but `import Clerk from ...` must not fail: an inert object.",
+    "export default {};",
+    ""
+  ];
+  return lines.join("\n");
+}
+
+// src/package-mock/package-mock.ts
+var PACKAGE_MOCK_PLUGIN_NAME = "onlook-package-mock";
+var PACKAGE_MOCK_VIRTUAL_PREFIX = "\0onlook-package-mock:";
+function stripQuery2(id) {
+  const q = id.indexOf("?");
+  return q === -1 ? id : id.slice(0, q);
+}
+function packageMockPlugin(options) {
+  const entries = (options?.packages ?? []).filter(
+    (e) => e && typeof e.package === "string" && e.package.length > 0 && // Only known auth packages get a functional mock — an unknown package
+    // has no source builder, so silently drop it (honest skip) rather than
+    // intercept it into a broken module.
+    isKnownMockPackage(e.package)
+  );
+  if (entries.length === 0) return null;
+  const usedByPackage = /* @__PURE__ */ new Map();
+  for (const e of entries) usedByPackage.set(e.package, e.usedExports ?? []);
+  return {
+    name: PACKAGE_MOCK_PLUGIN_NAME,
+    // `pre` so we intercept the specifier before Vite's resolve pipeline (and
+    // before tsconfig-paths / node resolution) claims it.
+    enforce: "pre",
+    resolveId(source) {
+      if (source.startsWith("\0")) return null;
+      const cleaned = stripQuery2(source);
+      if (!usedByPackage.has(cleaned)) return null;
+      return PACKAGE_MOCK_VIRTUAL_PREFIX + cleaned;
+    },
+    load(id) {
+      if (!id.startsWith(PACKAGE_MOCK_VIRTUAL_PREFIX)) return null;
+      const pkg = id.slice(PACKAGE_MOCK_VIRTUAL_PREFIX.length);
+      const used = usedByPackage.get(pkg);
+      if (used === void 0) return null;
+      return buildPackageMockSource(pkg, used);
+    }
+  };
+}
+
 // src/screenshot-service/utils/console-logs/console-logs.ts
 async function captureConsoleLogs(storyId, theme = "light", storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   const browser = await getBrowser();
@@ -1665,10 +1858,12 @@ function storybookOnlookPlugin(options = {}) {
     handleHotUpdate: handleStoryFileChange
   };
   const envContainment = envContainmentPlugin(options.envContainment);
+  const packageMock = packageMockPlugin(options.packageMock);
   const moduleLoadCatchAll = options.moduleLoadCatchAll === false ? null : moduleLoadCatchAllPlugin();
   return withDedupeApply(
     [
       ...envContainment ? [envContainment] : [],
+      ...packageMock ? [packageMock] : [],
       ...moduleLoadCatchAll ? [moduleLoadCatchAll] : [],
       componentLocPlugin(),
       mainPlugin,
@@ -1749,6 +1944,7 @@ var OPTION_KEY_MAP = {
   storyGlobs: true,
   tailwindEntryCss: true,
   envContainment: true,
+  packageMock: true,
   moduleLoadCatchAll: true,
   resolveAliases: true
 };

package/dist/{storybook-onlook-plugin-B9Eo_OIq.d.ts → storybook-onlook-plugin-J4qj72mN.d.ts}

@@ -42,6 +42,28 @@ type EnvContainmentOptions = {
  */
 declare function envContainmentPlugin(options: EnvContainmentOptions | undefined): Plugin | null;
 
+/** One package to replace with a functional zero-backend mock. */
+interface PackageMockEntry {
+    /** Bare npm specifier to intercept, e.g. `@clerk/nextjs`. */
+    package: string;
+    /**
+     * Named exports the customer actually imports from the package (the union
+     * across story-reachable component sources). The generated mock provides a
+     * stand-in for each so no `import { X } from '@clerk/nextjs'` produces a
+     * Vite "no matching export" build error. Optional on the wire — the plugin
+     * treats an absent list as empty (a customer-edited config may omit it).
+     */
+    usedExports?: string[];
+}
+/**
+ * The `packageMock` plugin-options surface. Written by the preflight engine
+ * into `.storybook/main.*` (`storybookOnlookPlugin({ packageMock })`) and read
+ * by the plugin's package-mock Vite plugin factory.
+ */
+interface PackageMockOptions {
+    packages?: PackageMockEntry[];
+}
+
 type OnlookPluginOptions = {
     /** Storybook port (default: 6006) */
     port?: number;
@@ -54,6 +76,7 @@ type OnlookPluginOptions = {
     storyGlobs?: string[];
     tailwindEntryCss?: string | false;
     envContainment?: EnvContainmentOptions;
+    packageMock?: PackageMockOptions;
     moduleLoadCatchAll?: boolean;
     resolveAliases?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlook/storybook-plugin",
-  "version": "0.4.0-beta.16",
+  "version": "0.4.0-beta.18",
   "type": "module",
   "bin": {
     "onlook-storybook": "./dist/cli/index.js"
@@ -52,7 +52,8 @@
     "storybook": "^10.1.11"
   },
   "devDependencies": {
-    "@onbook/tsconfig": "workspace:*",
+    "@onbook/shared": "0.1.0",
+    "@onbook/tsconfig": "0.1.0",
     "@types/babel__generator": "^7.6.8",
     "@types/babel__traverse": "^7.20.6",
     "@types/node": "^22.15.32",