@superblocksteam/sdk 2.0.141 → 2.0.142-next.0

package/src/dev-utils/optimize-deps-config.mts

@@ -1,5 +1,31 @@
 import type { UserConfig } from "vite";
 
+/**
+ * Deep-path prefix that `vite-plugin-optimize-lucide-imports` rewrites every
+ * `import { X } from "lucide-react"` into (`lucide-react/dist/esm/icons/x.js`).
+ * Shared between the rewrite plugin and the optimizeDeps include glob below so
+ * the pre-bundled paths can never drift from the paths the plugin emits.
+ */
+export const LUCIDE_ICON_DEEP_PATH_PREFIX = "lucide-react/dist/esm/icons/";
+
+/**
+ * Selection rule for the include list below: every dependency declared by BOTH
+ * live-edit templates is force-included, EXCEPT the packages listed here. Each
+ * exclusion needs a reason; the contract is enforced in both directions by
+ * `dev-server.optimize-deps.test.mts`.
+ */
+export const NOT_PRE_OPTIMIZED_TEMPLATE_DEPS: readonly string[] = [
+  // The hot-swapped Superblocks runtime: generated apps receive it through the
+  // SDK plugin pipeline, and a prebundled duplicate splits React context/hook
+  // state between the two copies. Only its `/jsx-dev-runtime` subpath (which
+  // the dep scan structurally cannot discover) is force-included.
+  "@superblocksteam/library",
+  // Node-side Vite build plugin, never imported by browser code. Bundling it
+  // drags in lightningcss/oxide native binaries and crashes the optimizer —
+  // the same reason `*.config.*` files are excluded from scan entries above.
+  "@tailwindcss/vite",
+];
+
 /**
  * Shared `optimizeDeps` config for both the pre-warm and activation Vite
  * servers (see `dev-server.mts`).
@@ -59,14 +85,86 @@ export const OPTIMIZE_DEPS_CONFIG: UserConfig["optimizeDeps"] = {
   // EE warm-pool box: without this, a freshly-generated app still reloads once
   // on first render for the JSX runtime — APPS-4576).
   //
-  // The scan's esbuild uses the DEFAULT (react) JSX runtime, so it emits
-  // `react/jsx-runtime` imports and pre-bundles those — but never
-  // `@superblocksteam/library/jsx-dev-runtime`, even though every generated app
-  // sets `jsxImportSource: "@superblocksteam/library"` and pulls that runtime in
-  // at serve time. Force-including it pre-bundles it up front. An unresolvable
-  // `include` entry is a no-op (Vite warns and skips), so an app that somehow
-  // lacks the library never fails cold-start over this.
-  include: ["@superblocksteam/library/jsx-dev-runtime"],
+  // Two kinds of entries live here:
+  //
+  // 1. `@superblocksteam/library/jsx-dev-runtime`: the scan's esbuild uses the
+  //    DEFAULT (react) JSX runtime, so it emits `react/jsx-runtime` imports and
+  //    pre-bundles those — but never the library runtime, even though every
+  //    generated app sets `jsxImportSource: "@superblocksteam/library"` and
+  //    pulls that runtime in at serve time. The scan can never see it.
+  //
+  // 2. The common live-edit template deps: the `entries` scan only pre-bundles
+  //    deps that *existing* app source imports, but a warm-pool box pre-warms
+  //    against the seeded template, and Clark's generated code routinely
+  //    imports template-declared deps the seed never touches (an unused Radix
+  //    primitive, `recharts` for the first dashboard). Each such first-time
+  //    import is a runtime discovery — a mid-generation re-optimize, worst
+  //    case the "optimized dependencies changed" reload. Force-including every
+  //    dep the templates declare (minus NOT_PRE_OPTIMIZED_TEMPLATE_DEPS above)
+  //    closes that gap.
+  //
+  // The list is deliberately STATIC (not derived from the app's package.json):
+  // `include` IS part of Vite's dep-cache config hash, so pre-warm and
+  // activation must see the exact same value or activation discards the
+  // pre-warmed cache and re-optimizes — the very reload this config removes.
+  // The two-way template contract (include ⊆ shared template deps, and every
+  // shared template dep is included or explicitly excluded above) is pinned in
+  // `dev-server.optimize-deps.test.mts`. An unresolvable `include` entry is a
+  // no-op (Vite warns and skips), so apps lacking one of these deps (e.g.
+  // older 2.0 apps) never fail cold-start over this.
+  //
+  // Keep sorted.
+  include: [
+    "@radix-ui/react-accordion",
+    "@radix-ui/react-aspect-ratio",
+    "@radix-ui/react-avatar",
+    "@radix-ui/react-checkbox",
+    "@radix-ui/react-dialog",
+    "@radix-ui/react-dropdown-menu",
+    "@radix-ui/react-hover-card",
+    "@radix-ui/react-label",
+    "@radix-ui/react-navigation-menu",
+    "@radix-ui/react-popover",
+    "@radix-ui/react-progress",
+    "@radix-ui/react-scroll-area",
+    "@radix-ui/react-select",
+    "@radix-ui/react-separator",
+    "@radix-ui/react-slider",
+    "@radix-ui/react-slot",
+    "@radix-ui/react-switch",
+    "@radix-ui/react-tabs",
+    "@radix-ui/react-toggle",
+    "@radix-ui/react-toggle-group",
+    "@radix-ui/react-tooltip",
+    "@superblocksteam/library/jsx-dev-runtime",
+    "class-variance-authority",
+    "clsx",
+    "date-fns",
+    "lucide-react",
+    // The icon deep paths, NOT just the bare package: the lucide import
+    // optimizer plugin rewrites every named lucide import into a per-icon deep
+    // path, so the dep optimizer never sees the bare specifier at serve time —
+    // a bare include alone leaves every first-time icon import as a runtime
+    // discovery. Vite expands this glob (`expandGlobIds`) against the installed
+    // package: ~1,850 icons, measured at ~+1.4s cold-start optimize on the real
+    // template — inside the warm-standby budget, and it covers any icon Clark
+    // picks instead of a top-N guess. On apps without lucide-react the glob
+    // matches nothing and is a no-op. Expanded entries are keyed with the `.js`
+    // extension, which is why the rewrite plugin emits `.js` ids (see
+    // `lucideIconModuleId`) — Vite matches optimized deps by exact id.
+    `${LUCIDE_ICON_DEEP_PATH_PREFIX}*`,
+    "react",
+    "react-day-picker",
+    "react-dom",
+    "react-dom/client",
+    "react-dropzone",
+    "react-router",
+    "react-syntax-highlighter",
+    "react/jsx-runtime",
+    "recharts",
+    "sonner",
+    "tailwind-merge",
+  ],
   // `@superblocksteam/sdk-api` is a VIRTUAL module the `sb-sdk-api-entry-point`
   // plugin serves (not a real package), imported by generated app code. Left to
   // the optimizer it gets discovered as a "new dependency" on first import and

package/src/index.ts

@@ -133,3 +133,10 @@ export {
   getTracer,
   isCloudPrem,
 } from "./telemetry/index.js";
+
+export {
+  applyStartupTraceCarrier,
+  startupTraceCarrierFromHeaders,
+  type StartupTraceCarrier,
+  withStartupTraceContext,
+} from "./telemetry/startup-context.js";

package/src/telemetry/startup-context.test.ts

@@ -0,0 +1,102 @@
+import { ROOT_CONTEXT, trace } from "@opentelemetry/api";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+
+import {
+  getTestTelemetryInstance,
+  getTestTracer,
+  initTestTelemetry,
+  resetTestTelemetry,
+} from "@superblocksteam/telemetry/testing";
+
+import {
+  applyStartupTraceCarrier,
+  extractStartupTraceContext,
+  startupTraceCarrierFromHeaders,
+  type StartupTraceCarrier,
+  withStartupTraceContext,
+} from "./startup-context.js";
+
+const TRACE_ID = "4bf92f3577b34da6a3ce929d0e0e4736";
+const TRACEPARENT = `00-${TRACE_ID}-00f067aa0ba902b7-01`;
+
+describe("sdk-dev-server startup trace context", () => {
+  beforeAll(() => {
+    initTestTelemetry();
+  });
+
+  afterAll(async () => {
+    await resetTestTelemetry();
+  });
+
+  it("extracts the SABS parent from cold-start environment values", () => {
+    const parentContext = extractStartupTraceContext({
+      TRACEPARENT,
+      TRACESTATE: "vendor=value",
+    });
+
+    expect(trace.getSpanContext(parentContext)).toMatchObject({
+      isRemote: true,
+      traceId: TRACE_ID,
+      traceFlags: 1,
+      traceState: expect.objectContaining({
+        serialize: expect.any(Function),
+      }),
+    });
+    expect(trace.getSpanContext(parentContext)?.traceState?.serialize()).toBe(
+      "vendor=value",
+    );
+  });
+
+  it("uses the root context when startup propagation is absent", () => {
+    expect(extractStartupTraceContext({})).toBe(ROOT_CONTEXT);
+  });
+
+  it("stores warm activation headers for the startup path without stale tracestate", () => {
+    const env: NodeJS.ProcessEnv = {
+      TRACEPARENT: "stale",
+      TRACESTATE: "stale=value",
+    };
+    const carrier: StartupTraceCarrier = { traceparent: TRACEPARENT };
+
+    applyStartupTraceCarrier(carrier, env);
+
+    expect(env.TRACEPARENT).toBe(TRACEPARENT);
+    expect(env.TRACESTATE).toBeUndefined();
+  });
+
+  it("captures inbound warm activation trace headers", () => {
+    expect(
+      startupTraceCarrierFromHeaders({
+        traceparent: TRACEPARENT,
+        tracestate: "vendor=value",
+      }),
+    ).toEqual({
+      traceparent: TRACEPARENT,
+      tracestate: "vendor=value",
+    });
+  });
+
+  it("parents the dev-server startup span to the propagated SABS context", async () => {
+    const environment = {
+      TRACEPARENT,
+      TRACESTATE: "vendor=value",
+    };
+
+    await withStartupTraceContext(environment, async () => {
+      await getTestTracer().startActiveSpan(
+        "devServerStartup",
+        async (span) => {
+          span.end();
+        },
+      );
+    });
+
+    const [startupSpan] = getTestTelemetryInstance()
+      .spanExporter.getSpans()
+      .filter((span) => span.name === "devServerStartup");
+    expect(startupSpan.spanContext().traceId).toBe(TRACE_ID);
+    expect(startupSpan.parentSpanContext?.spanId).toBe("00f067aa0ba902b7");
+    expect(environment.TRACEPARENT).toBeUndefined();
+    expect(environment.TRACESTATE).toBeUndefined();
+  });
+});

package/src/telemetry/startup-context.ts

@@ -0,0 +1,77 @@
+import {
+  type Context,
+  ROOT_CONTEXT,
+  context,
+  propagation,
+  trace,
+} from "@opentelemetry/api";
+
+export type StartupTraceCarrier = {
+  traceparent?: string;
+  tracestate?: string;
+};
+
+type StartupTraceEnvironment = {
+  [key: string]: string | undefined;
+  TRACEPARENT?: string;
+  TRACESTATE?: string;
+};
+
+export function startupTraceCarrierFromHeaders(
+  headers: Record<string, string | string[] | undefined>,
+): StartupTraceCarrier {
+  const traceparent = headers.traceparent;
+  const tracestate = headers.tracestate;
+  return {
+    traceparent: typeof traceparent === "string" ? traceparent : undefined,
+    tracestate: typeof tracestate === "string" ? tracestate : undefined,
+  };
+}
+
+export function extractStartupTraceContext(
+  environment: StartupTraceEnvironment = process.env,
+): Context {
+  if (!environment.TRACEPARENT) {
+    return ROOT_CONTEXT;
+  }
+
+  const extracted = propagation.extract(ROOT_CONTEXT, {
+    traceparent: environment.TRACEPARENT,
+    ...(environment.TRACESTATE ? { tracestate: environment.TRACESTATE } : {}),
+  });
+
+  return trace.getSpanContext(extracted)?.isRemote ? extracted : ROOT_CONTEXT;
+}
+
+export function applyStartupTraceCarrier(
+  carrier: StartupTraceCarrier,
+  environment: NodeJS.ProcessEnv = process.env,
+): void {
+  if (carrier.traceparent) {
+    environment.TRACEPARENT = carrier.traceparent;
+  } else {
+    delete environment.TRACEPARENT;
+  }
+
+  if (carrier.tracestate) {
+    environment.TRACESTATE = carrier.tracestate;
+  } else {
+    delete environment.TRACESTATE;
+  }
+}
+
+export function consumeStartupTraceContext(
+  environment: StartupTraceEnvironment,
+): Context {
+  const parentContext = extractStartupTraceContext(environment);
+  delete environment.TRACEPARENT;
+  delete environment.TRACESTATE;
+  return parentContext;
+}
+
+export function withStartupTraceContext<T>(
+  environment: StartupTraceEnvironment,
+  callback: () => T,
+): T {
+  return context.with(consumeStartupTraceContext(environment), callback);
+}

package/src/vite-plugin-optimize-lucide-imports.ts

@@ -1,5 +1,7 @@
 import type { TransformResult, Plugin } from "vite";
 
+import { LUCIDE_ICON_DEEP_PATH_PREFIX } from "./dev-utils/optimize-deps-config.mjs";
+
 // Pre-compile regex for better performance
 const LUCIDE_IMPORT_PATTERN =
   /([ \t]*)import\s+\{\s*([^}]+)\s*\}\s+from\s+['"]lucide-react['"]/g;
@@ -48,9 +50,11 @@ function isValidInput(code: string, id: string): boolean {
 }
 
 /**
- * Transforms lucide-react imports from destructured to individual imports
+ * Transforms lucide-react imports from destructured to individual imports.
+ * Exported so tests can pin the emitted import specifiers against the ids the
+ * dep optimizer registers.
  */
-function transformLucideImports(sourceCode: string): {
+export function transformLucideImports(sourceCode: string): {
   transformedCode: string;
   hasChanges: boolean;
 } {
@@ -80,6 +84,20 @@ function transformLucideImports(sourceCode: string): {
   return { transformedCode, hasChanges };
 }
 
+/**
+ * The module id this plugin emits for a named lucide-react import. The `.js`
+ * extension is load-bearing: the dep optimizer's include glob registers each
+ * icon under its on-disk id (`…/icons/check.js`), and Vite's
+ * `tryOptimizedResolve` matches optimized deps by EXACT id — an extensionless
+ * import misses the optimized entry and is re-registered as a newly discovered
+ * dependency, re-running the optimizer (the reload this plugin + config
+ * combination exists to prevent). Exported so tests can assert the emitted ids
+ * and the optimized ids stay identical.
+ */
+export function lucideIconModuleId(importName: string): string {
+  return `${LUCIDE_ICON_DEEP_PATH_PREFIX}${convertToKebabCase(importName)}.js`;
+}
+
 /**
  * Converts a comma-separated list of imports to individual import statements
  */
@@ -93,9 +111,8 @@ function convertToIndividualImports(
     .map((name) => name.trim())
     .filter(Boolean)
     .map((name) => {
-      const kebabCasePath = convertToKebabCase(name);
       const semicolon = withSemicolon ? ";" : "";
-      return `${indentation}import ${name} from "lucide-react/dist/esm/icons/${kebabCasePath}"${semicolon}`;
+      return `${indentation}import ${name} from "${lucideIconModuleId(name)}"${semicolon}`;
     })
     .join("\n");
 }