@wix/zero-config-implementation 1.77.0 → 1.79.0

package/dist/{index-CuKmaUAA.js → index-DCJue8M7.js}

@@ -1,4 +1,4 @@
-import { g as x } from "./index-DRWoSsTZ.js";
+import { g as x } from "./index-CoU1WRYf.js";
 function h(r, a) {
   for (var i = 0; i < a.length; i++) {
     const o = a[i];

package/dist/index.js

@@ -1,4 +1,4 @@
-import { B as t, D as e, E as o, I as n, N as c, P as l, R as i, a as p, V as E, b as m, c as x, d as f, e as d, f as u, h as C, i as I, j as k, k as y, l as A, m as D, n as P, o as R, p as h, q as B, r as M, s as T, t as b, w } from "./index-DRWoSsTZ.js";
+import { B as t, D as e, E as o, I as n, N as c, P as l, R as i, a as p, V as E, b as m, c as x, d as f, e as d, f as u, h as C, i as I, j as k, k as y, l as A, m as D, n as P, o as R, p as h, q as B, r as M, s as T, t as b, w } from "./index-CoU1WRYf.js";
 import "react";
 export {
   t as BaseError,

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.77.0",
+  "version": "1.79.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -39,7 +39,7 @@
     }
   },
   "dependencies": {
-    "@wix/builder-services-wrapper": "^1.42.0",
+    "@wix/builder-services-wrapper": "^1.56.0",
     "@wix/react-component-schema": "1.7.0"
   },
   "devDependencies": {
@@ -82,5 +82,5 @@
       ]
     }
   },
-  "falconPackageHash": "29046e5eac674ef42dc21f8449f7f0b5c99691e835215a1133464500"
+  "falconPackageHash": "95a755e580164c3acabbf27f3813514e4fcdb56b90214e7b830134af"
 }

package/src/component-renderer.ts

@@ -76,6 +76,7 @@ import {
   setCreateElementInterceptor,
   setJsxInterceptors,
 } from './react-runtime-interceptor'
+import { getActiveReactModule, setActiveReactModule } from './react-runtime-loader'
 
 export const TRACE_ATTR = 'data-trace-id'
 
@@ -132,6 +133,84 @@ function createInterceptor(
   }
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Dispatcher bridge
+// ─────────────────────────────────────────────────────────────────────────────
+
+const REACT_18_INTERNALS_KEY = '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED'
+const REACT_19_INTERNALS_KEY = '__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE'
+
+function readReactInternals(reactModule: unknown): Record<string, unknown> | undefined {
+  if (typeof reactModule !== 'object' || reactModule === null) {
+    return undefined
+  }
+
+  const reactRecord = reactModule as Record<string, unknown>
+  const internals = reactRecord[REACT_18_INTERNALS_KEY] ?? reactRecord[REACT_19_INTERNALS_KEY]
+  return typeof internals === 'object' && internals !== null ? (internals as Record<string, unknown>) : undefined
+}
+
+/**
+ * Forwards the host React's hook dispatcher to the user React so host-bound hook
+ * callers (e.g. WixServicesWrapper) resolve the dispatcher the user's react-dom
+ * installs during SSR. Returns a function that restores the host React.
+ */
+function bridgeHostDispatcherToUserReact(hostReact: unknown, userReact: unknown): () => void {
+  const hostInternals = readReactInternals(hostReact)
+  const userInternals = readReactInternals(userReact)
+  if (!hostInternals || !userInternals) {
+    return () => {}
+  }
+
+  // React 18 exposes a `{ current }` holder captured by reference at load time, so
+  // forward its `current` to the user holder rather than swapping the holder itself.
+  if (hostInternals.ReactCurrentDispatcher && userInternals.ReactCurrentDispatcher) {
+    const hostDispatcherHolder = hostInternals.ReactCurrentDispatcher as Record<string, unknown>
+    const userDispatcherHolder = userInternals.ReactCurrentDispatcher as Record<string, unknown>
+    if (hostDispatcherHolder === userDispatcherHolder) {
+      return () => {}
+    }
+
+    const previousDescriptor = Object.getOwnPropertyDescriptor(hostDispatcherHolder, 'current')
+    Object.defineProperty(hostDispatcherHolder, 'current', {
+      configurable: true,
+      get: () => userDispatcherHolder.current,
+      set: (dispatcher) => {
+        userDispatcherHolder.current = dispatcher
+      },
+    })
+    return () => {
+      Object.defineProperty(
+        hostDispatcherHolder,
+        'current',
+        previousDescriptor ?? { configurable: true, enumerable: true, value: null, writable: true },
+      )
+    }
+  }
+
+  // React 19 keeps the dispatcher directly on the internals object as `H`, so
+  // forward that property to the user internals.
+  if ('H' in userInternals) {
+    const previousDescriptor = Object.getOwnPropertyDescriptor(hostInternals, 'H')
+    Object.defineProperty(hostInternals, 'H', {
+      configurable: true,
+      get: () => userInternals.H,
+      set: (dispatcher) => {
+        userInternals.H = dispatcher
+      },
+    })
+    return () => {
+      Object.defineProperty(
+        hostInternals,
+        'H',
+        previousDescriptor ?? { configurable: true, enumerable: true, value: undefined, writable: true },
+      )
+    }
+  }
+
+  return () => {}
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Renderer
 // ─────────────────────────────────────────────────────────────────────────────
@@ -248,6 +327,12 @@ export function renderWithExtractors(
   const interceptedJsxs = createInterceptor(originalJsxs as ElementCreator, listeners, getNextId, store)
   const interceptedJsxDEV = createInterceptor(originalJsxDEV as ElementCreator, listeners, getNextId, store)
 
+  // The shim reads globalThis[REACT_KEY] on every hook call, so pointing it at
+  // userReact ensures ESM hooks use the same dispatcher that SSR drives.
+  const previousActiveReactModule = getActiveReactModule()
+  // Restores the host React's hook dispatcher, bridged to the user React below.
+  let restoreHostDispatcher: () => void = () => {}
+
   try {
     // @ts-expect-error Monkey-patch createElement for default-import callers
     React.createElement = interceptedCreateElement
@@ -268,6 +353,9 @@ export function renderWithExtractors(
     // Patch user-bundle React modules when they are distinct instances
     if (userReact) {
       userReact.createElement = interceptedCreateElement
+      setActiveReactModule(userReact)
+      // Host-bound hook callers (e.g. WixServicesWrapper) need the user React's dispatcher too.
+      restoreHostDispatcher = bridgeHostDispatcherToUserReact(React, userReact)
     }
     if (userJsxRuntime) {
       userJsxRuntime.jsx = interceptedJsx
@@ -281,6 +369,8 @@ export function renderWithExtractors(
     const element = renderingReact.createElement(Component, componentProps as Record<string, unknown>)
     return (userRenderToStaticMarkup ?? renderToStaticMarkup)(element)
   } finally {
+    restoreHostDispatcher()
+    setActiveReactModule(previousActiveReactModule)
     // Restore originals
     // @ts-expect-error Restore monkey-patched createElement
     React.createElement = originalCreateElement

package/src/converters/to-editor-component.ts

@@ -11,6 +11,8 @@ import type {
 } from '@wix/react-component-schema'
 import { CSS_PROPERTIES, ELEMENTS } from '@wix/react-component-schema'
 import { camelCase } from 'case-anything'
+import { buildRefElementManifestKey } from '../extensions/ref-elements/path-utils'
+import type { RefElementMatch } from '../extensions/ref-elements/types'
 import type { ComponentInfoWithCss } from '../index'
 import type { MatchedCssData, RegisteredCustomProperty } from '../information-extractors/css/types'
 import type {
@@ -21,8 +23,6 @@ import type {
   TrackingStores,
 } from '../information-extractors/react'
 import { getDefaultDisplayForTag, resolveDisplayValue } from '../information-extractors/react'
-import { buildRefElementManifestKey } from '../ref-elements/path-utils'
-import type { RefElementMatch } from '../ref-elements/types'
 import { findPreferredSemanticClass, normalizeClassNames } from '../utils/css-class'
 import { resolveLonghand } from './css-longhand-resolver'
 import { type CustomClassTrigger, buildCustomStatesBlock } from './custom-states-builder'

package/src/extensions/context-providers/context.test.ts

@@ -0,0 +1,181 @@
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+import ts from 'typescript'
+import { afterEach, describe, expect, it } from 'vitest'
+
+import { resolveModuleUrlFromEntryPath } from '../shared/module-resolution'
+import { buildContextProviderModules } from './context'
+
+const temporaryDirectoryPaths: string[] = []
+
+afterEach(() => {
+  for (const temporaryDirectoryPath of temporaryDirectoryPaths.splice(0)) {
+    fs.rmSync(temporaryDirectoryPath, { force: true, recursive: true })
+  }
+})
+
+const FORMAT_A_CATALOG_ENTRY = {
+  type: 'GenericExtension',
+  options: {
+    compType: 'EDITOR_CONTEXT_PROVIDER',
+    compData: {
+      editorContextProvider: {
+        context: { items: { title: { dataType: 'text' } } },
+        resources: {
+          contextSpecifier: {
+            hook: 'useEventContext',
+            moduleSpecifier: 'my-context-package/context-provider',
+          },
+          dependencies: { contextDependencies: [] },
+        },
+      },
+    },
+  },
+}
+
+const FORMAT_B_CATALOG_ENTRY = {
+  context: { items: { title: { dataType: 'text' } } },
+  resources: {
+    contextSpecifier: {
+      hook: 'useEventContext',
+      moduleSpecifier: 'my-context-package/context-provider',
+    },
+    dependencies: { contextDependencies: [] },
+  },
+}
+
+function createPackageSetup(options: {
+  extensionsContent: string
+  importSpecifier?: string
+}): { compiledEntryPath: string; sourceFilePath: string } {
+  const temporaryDirectoryPath = fs.mkdtempSync(path.join(os.tmpdir(), 'zero-config-context-provider-'))
+  temporaryDirectoryPaths.push(temporaryDirectoryPath)
+
+  const sourceFilePath = path.join(temporaryDirectoryPath, 'Component.tsx')
+  const compiledEntryPath = path.join(temporaryDirectoryPath, 'dist', 'index.js')
+  const packageDirectoryPath = path.join(temporaryDirectoryPath, 'node_modules', 'my-context-package')
+
+  fs.mkdirSync(path.dirname(compiledEntryPath), { recursive: true })
+  fs.mkdirSync(packageDirectoryPath, { recursive: true })
+
+  fs.writeFileSync(
+    sourceFilePath,
+    `import { useEventContext } from '${options.importSpecifier ?? 'my-context-package/context-provider'}'\nexport default function Component() { return null }\n`,
+  )
+  fs.writeFileSync(compiledEntryPath, 'export {}\n')
+  fs.writeFileSync(path.join(packageDirectoryPath, 'context-provider.js'), 'export function useEventContext() {}\n')
+  fs.writeFileSync(path.join(packageDirectoryPath, 'extensions.js'), options.extensionsContent)
+  fs.writeFileSync(
+    path.join(packageDirectoryPath, 'package.json'),
+    JSON.stringify(
+      {
+        name: 'my-context-package',
+        type: 'module',
+        exports: {
+          '.': './context-provider.js',
+          './context-provider': './context-provider.js',
+          './extensions': './extensions.js',
+        },
+      },
+      null,
+      2,
+    ),
+  )
+
+  return { compiledEntryPath, sourceFilePath }
+}
+
+function createProgram(sourceFilePath: string): ts.Program {
+  return ts.createProgram({
+    rootNames: [sourceFilePath],
+    options: {
+      allowJs: true,
+      jsx: ts.JsxEmit.ReactJSX,
+    },
+  })
+}
+
+describe('buildContextProviderModules', () => {
+  it('returns empty when the import is a bare package with no sub-path', async () => {
+    const { compiledEntryPath, sourceFilePath } = createPackageSetup({
+      importSpecifier: 'my-context-package',
+      extensionsContent: `export default [${JSON.stringify(FORMAT_A_CATALOG_ENTRY)}]\n`,
+    })
+    const program = createProgram(sourceFilePath)
+
+    const modules = await buildContextProviderModules(program, sourceFilePath, compiledEntryPath)
+
+    expect(modules).toEqual([])
+  })
+
+  it('resolves a context provider from a Format A catalog entry (manifest nested under options.compData.editorContextProvider)', async () => {
+    const { compiledEntryPath, sourceFilePath } = createPackageSetup({
+      extensionsContent: `export default [${JSON.stringify(FORMAT_A_CATALOG_ENTRY)}]\n`,
+    })
+    const program = createProgram(sourceFilePath)
+
+    const modules = await buildContextProviderModules(program, sourceFilePath, compiledEntryPath)
+
+    expect(modules).toEqual([
+      {
+        hookName: 'useEventContext',
+        moduleSpecifier: 'my-context-package/context-provider',
+        resolvedModuleUrl: resolveModuleUrlFromEntryPath(compiledEntryPath, 'my-context-package/context-provider'),
+        contextSchema: { items: { title: { dataType: 'text' } } },
+        contextDependencies: [],
+      },
+    ])
+  })
+
+  it('resolves a context provider from a Format B catalog entry (manifest at root)', async () => {
+    const { compiledEntryPath, sourceFilePath } = createPackageSetup({
+      extensionsContent: `export default [${JSON.stringify(FORMAT_B_CATALOG_ENTRY)}]\n`,
+    })
+    const program = createProgram(sourceFilePath)
+
+    const modules = await buildContextProviderModules(program, sourceFilePath, compiledEntryPath)
+
+    expect(modules).toEqual([
+      {
+        hookName: 'useEventContext',
+        moduleSpecifier: 'my-context-package/context-provider',
+        resolvedModuleUrl: resolveModuleUrlFromEntryPath(compiledEntryPath, 'my-context-package/context-provider'),
+        contextSchema: { items: { title: { dataType: 'text' } } },
+        contextDependencies: [],
+      },
+    ])
+  })
+
+  it('returns empty when the imported specifier does not match any catalog entry moduleSpecifier', async () => {
+    const nonMatchingEntry = {
+      ...FORMAT_B_CATALOG_ENTRY,
+      resources: {
+        ...FORMAT_B_CATALOG_ENTRY.resources,
+        contextSpecifier: {
+          hook: 'useOtherContext',
+          moduleSpecifier: 'my-context-package/other-module',
+        },
+      },
+    }
+    const { compiledEntryPath, sourceFilePath } = createPackageSetup({
+      extensionsContent: `export default [${JSON.stringify(nonMatchingEntry)}]\n`,
+    })
+    const program = createProgram(sourceFilePath)
+
+    const modules = await buildContextProviderModules(program, sourceFilePath, compiledEntryPath)
+
+    expect(modules).toEqual([])
+  })
+
+  it('throws when the extensions catalog throws during loading', async () => {
+    const { compiledEntryPath, sourceFilePath } = createPackageSetup({
+      extensionsContent: "throw new Error('broken catalog')\n",
+    })
+    const program = createProgram(sourceFilePath)
+
+    await expect(buildContextProviderModules(program, sourceFilePath, compiledEntryPath)).rejects.toThrow(
+      'broken catalog',
+    )
+  })
+})

package/src/extensions/context-providers/context.ts

@@ -0,0 +1,83 @@
+import type ts from 'typescript'
+import { collectAllPackageImportSpecifiers } from '../shared/ast-scanner'
+import { loadNormalizedCatalogEntries } from '../shared/catalog-loader'
+import { resolveModuleUrlFromEntryPath } from '../shared/module-resolution'
+import type { ContextProviderModule, ContextSchema } from './types'
+
+interface NormalizedContextProviderCatalogEntry {
+  hookName: string
+  moduleSpecifier: string
+  contextSchema: ContextSchema
+  contextDependencies: string[]
+}
+
+export async function buildContextProviderModules(
+  program: ts.Program,
+  sourceFilePath: string,
+  compiledEntryPath: string,
+): Promise<ContextProviderModule[]> {
+  const allImportedSpecifiers = collectAllPackageImportSpecifiers(program, sourceFilePath)
+  if (allImportedSpecifiers.length === 0) {
+    return []
+  }
+
+  const catalogEntries = await loadNormalizedCatalogEntries(
+    allImportedSpecifiers,
+    compiledEntryPath,
+    normalizeContextProviderEntry,
+  )
+
+  const importedSpecifierSet = new Set(allImportedSpecifiers)
+  const contextProviderModules: ContextProviderModule[] = []
+
+  for (const catalogEntry of catalogEntries) {
+    if (!importedSpecifierSet.has(catalogEntry.moduleSpecifier)) {
+      continue
+    }
+
+    const resolvedModuleUrl = resolveModuleUrlFromEntryPath(compiledEntryPath, catalogEntry.moduleSpecifier)
+    if (!resolvedModuleUrl) {
+      continue
+    }
+
+    contextProviderModules.push({
+      hookName: catalogEntry.hookName,
+      moduleSpecifier: catalogEntry.moduleSpecifier,
+      resolvedModuleUrl,
+      contextSchema: catalogEntry.contextSchema,
+      contextDependencies: catalogEntry.contextDependencies,
+    })
+  }
+
+  return contextProviderModules
+}
+
+type UnknownObject = Record<string, unknown> | undefined
+
+function normalizeContextProviderEntry(rawEntry: unknown): NormalizedContextProviderCatalogEntry | undefined {
+  if (rawEntry === null || typeof rawEntry !== 'object') {
+    return undefined
+  }
+
+  const entry = rawEntry as Record<string, unknown>
+  // Format A wraps the manifest under options.compData.editorContextProvider; Format B exports it at the root.
+  const compData = (entry.options as UnknownObject)?.compData as UnknownObject
+  const normalizedEntry = (compData?.editorContextProvider ?? entry) as Record<string, unknown>
+
+  const resources = normalizedEntry.resources as UnknownObject
+  const contextSpecifier = resources?.contextSpecifier as { hook?: string; moduleSpecifier?: string } | undefined
+
+  if (!contextSpecifier?.hook || !contextSpecifier?.moduleSpecifier) {
+    return undefined
+  }
+
+  const dependencies = resources?.dependencies as { contextDependencies?: string[] } | undefined
+  return {
+    hookName: contextSpecifier.hook,
+    moduleSpecifier: contextSpecifier.moduleSpecifier,
+    contextSchema: {
+      items: (normalizedEntry.context as ContextSchema | undefined)?.items ?? {},
+    },
+    contextDependencies: dependencies?.contextDependencies ?? [],
+  }
+}

package/src/extensions/context-providers/mock-provider.test.ts

@@ -0,0 +1,44 @@
+import React, { type ComponentType } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { buildContextAwareWrapper } from './mock-provider'
+
+function makeProvider(label: string): ComponentType<{ children?: React.ReactNode }> {
+  const Provider = ({ children }: { children?: React.ReactNode }) =>
+    React.createElement('div', { 'data-provider': label }, children)
+  return Provider
+}
+
+describe('buildContextAwareWrapper', () => {
+  it('places dependency providers outermost (topological sort)', () => {
+    // ticketProvider depends on eventProvider — eventProvider must render outermost
+    const loadedProviders = [
+      { moduleSpecifier: 'pkg/ticket', contextDependencies: ['pkg/event'], Provider: makeProvider('ticket') },
+      { moduleSpecifier: 'pkg/event', contextDependencies: [], Provider: makeProvider('event') },
+    ]
+
+    const identityWrapper = (Component: ComponentType<unknown>): ComponentType<unknown> => Component
+    const wrap = buildContextAwareWrapper(loadedProviders, identityWrapper, React)
+    const Inner: ComponentType<unknown> = () => React.createElement('span', null, 'content')
+    const html = renderToStaticMarkup(React.createElement(wrap(Inner), {}))
+
+    // event (the dependency) must appear before ticket in the HTML — it's the outer wrapper
+    expect(html.indexOf('data-provider="event"')).toBeLessThan(html.indexOf('data-provider="ticket"'))
+  })
+
+  it('composes options.wrapper as the outermost layer when provided', () => {
+    const customWrapper =
+      (Component: ComponentType<unknown>): ComponentType<unknown> =>
+      (props) =>
+        React.createElement('div', { 'data-wrapper': 'custom' }, React.createElement(Component, props as object))
+
+    const loadedProviders = [{ moduleSpecifier: 'pkg/event', contextDependencies: [], Provider: makeProvider('event') }]
+
+    const wrap = buildContextAwareWrapper(loadedProviders, customWrapper, React)
+    const Inner: ComponentType<unknown> = () => React.createElement('span', null, 'content')
+    const html = renderToStaticMarkup(React.createElement(wrap(Inner), {}))
+
+    expect(html.indexOf('data-wrapper="custom"')).toBeLessThan(html.indexOf('data-provider="event"'))
+    expect(html.indexOf('data-provider="event"')).toBeLessThan(html.indexOf('<span>'))
+  })
+})