react-spectrum
d266cace - fix: broken tailwind starter (#9982)

Commit
13 days ago
fix: broken tailwind starter (#9982) * chore(sb10): bump storybook and related packages to ^10.0.0 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * chore(sb10): adopt S2 provider addon restructure and dark-mode rewrite from upgrade-sb-10 reference * chore(sb10): convert storybook-builder-parcel to ESM Rename .js -> .mjs, convert CJS require/exports to ESM import/export. Ports five-virtual-file split from upgrade-sb-10 reference branch. Uses createRequire for @parcel/utils (CJS-only package). * chore(sb10): declare @parcel/utils dep and mark broken preview helpers for Task 3.1 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * chore(sb10): convert storybook-react-parcel to ESM and resolve core.builder path * docs(sb10): note why core.renderer stays bare (not path-resolved) * chore(sb10): convert .storybook/main.js to ESM with resolved addon paths * fix(sb10): restore story globs dropped during main.mjs conversion * chore(sb10): resolve local addon path in .storybook-s2/main.ts * chore(sb10): convert .chromatic and .chromatic-fc main to ESM Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(sb10): emit valid ESM importers map in preview generator Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(sb10): rename register.js → manager.js for local addons, point main.mjs at folders Storybook 10's preset loader tries to import() any addon path that doesn't end in "preset" as a Node.js module. The custom-addons register.js files contain JSX and cannot be parsed by Node.js, causing CriticalPresetLoadError on startup. Fix: rename each register.js to manager.js so Storybook's resolveAddonName() finds a *manager* file and returns type:"virtual" with managerEntries — meaning Parcel bundles the file rather than Node.js importing it directly. Update main.mjs to reference the addon directories instead of the register.js paths. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(sb10): add missing useEffect deps and guard select value in S2 provider addon Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * chore: normalize storybook-react-parcel package.json formatting (yarn reformat) * chore(sb10): remove dead localAddon helpers and unused isPreview import * fix(sb10): disable FEATURES.highlight to avoid Parcel CJS circular-dep crash Parcel bundles storybook/internal/preview-api and chunk-SZQXB3JV.js into a CJS bundle with a circular dependency. During initialization, the chunk's top-level highlight/preview.ts runs `(_previewApi.addons)?.ready` before the preview-api chunk's lazy getter has resolved its internal chunk reference. Result: `TypeError: Cannot read properties of undefined (reading 'addons')` fires as an unhandled promise rejection and the preview never initializes. The line is guarded by `globalThis?.FEATURES?.highlight && ...` so setting features.highlight=false short-circuits the buggy codepath. Trade-off: disables the highlight feature used by addon-a11y for accessibility-violation visualization. This is a workaround; the underlying Parcel + SB10 bundling interaction should be investigated as a follow-up. * fix(sb10): patch preview-api lazy getters to use deferred init; restore FEATURES.highlight Root-cause fix replacing the previous symptom-workaround. Storybook's dist/csf/index.js has a circular dependency with dist/_browser-chunks/chunk-SZQXB3JV.js and dist/preview-api/index.js. When Parcel's CJS bundler initialises these modules, csf/index.js runs its highlight-addon preview.ts code (line 916) before the storybook/preview-api module's 'addons' export is fully resolved. The resulting getter access throws TypeError during the circular-dep init window. The fix defers the highlight initialisation one microtask tick using Promise.resolve().then(), wrapped in try/catch for belt-and-braces safety. By the time the callback fires all circular deps are resolved and 'addons' holds the live AddonStore instance. Highlights initialise correctly. Patch is applied via patch-package (already in postinstall). Restores FEATURES.highlight to its default true, preserving accessibility- violation visualisation that addon-a11y depends on. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(parcel-resolver-storybook): externalize storybook runtime modules to globals Match upstream Storybook 10 builders (@storybook/builder-vite, @storybook/builder-webpack5) by externalizing every module key in storybook/internal/preview/globals.js's globalsNameReferenceMap. For each specifier, the resolver returns a synthetic ESM cache file at node_modules/.cache/sb-parcel-externals/<key>.js with shape: const { addons, PreviewWeb, ... } = globalThis.__STORYBOOK_MODULE_*; export { addons, PreviewWeb, ... }; export default globalThis.__STORYBOOK_MODULE_*; The runtime bundle (storybook/internal/preview/runtime) populates these globals via its top-level setup() side effect; once Task 1.2 hoists the runtime import, externalized modules resolve to live bindings on the already-populated globals — eliminating the CJS circular-dep that the node_modules patch currently masks. This task adds the resolver only; preview-entry generator + iframe template alignment follow in Tasks 1.2 and 1.3, after which Task 1.4 removes the patch. * fix(storybook-builder-parcel): hoist runtime import, use public preview-api path Move `import { setup } from 'storybook/internal/preview/runtime'` to be the first import in the generated preview-main.js so runtime.js's top-level setup() call populates __STORYBOOK_MODULE_* globals before setup-addons.js (or any other externalized specifier) evaluates and tries to destructure those globals. Also switch `from 'storybook/internal/preview-api'` to the public `from 'storybook/preview-api'` to match the externalize map and upstream Vite/webpack5 ordering. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * refactor(storybook-builder-parcel): align iframe & preview entry with upstream After externalizing storybook runtime modules (Task 1.1) and hoisting the runtime import (Task 1.2), runtime.js's setup() populates every __STORYBOOK_MODULE_* global plus __STORYBOOK_ADDONS_PREVIEW and __STORYBOOK_ADDONS_CHANNEL__. Our hand-rolled init-addons IIFE and preview.js bootstrap entry exist only to mask the cycle that those populate-the-globals tasks now resolve at the source. - iframe.html: drop the inline init IIFE, add TAGS_OPTIONS / OTHER_GLOBALS placeholders, set window.module=undefined and window.global=window (matches upstream Vite); script tag now points at preview-main.js - gen-preview-modern.mjs: remove generatePreviewBootstrap and generateInitAddonsGlobal helpers and their exports - preset.mjs: stop emitting preview.js and init-addons-global.js to generated-entries; only setup-addons.js and preview-main.js are needed The patch (patches/storybook+10.3.5.patch) is still in place and removed in Task 1.4. * fix(sb10): remove highlight-init defer patch (no longer needed after externalize-runtime alignment) Tasks 1.1-1.3 ported the upstream Storybook 10 externalize-the-runtime pattern: storybook/preview-api and 9 sibling specifiers are now resolved to synthetic cache files reading from globalThis.__STORYBOOK_MODULE_*, populated by storybook/internal/preview/runtime's setup() side effect which runs first in the preview entry. The Parcel CJS circular-dep that motivated the patch (storybook/preview-api <-> chunk-SZQXB3JV.js through dist/csf/index.js) no longer exists in our bundle graph because storybook/preview-api is no longer bundled at all. FEATURES.highlight is restored to its default true; addon-a11y's violation visualization works again. Verified across all four config dirs (.storybook, .storybook-s2, .chromatic, .chromatic-fc) for both dev and build modes. * chore(storybook-builder-parcel): drop unused previewPresets export, fix top-level bail * chore(storybook-builder-parcel): move iframe template to standalone HTML file * chore(parcel-resolver-storybook): emit ESM for story: virtual modules * fix(sb10): wire dark/light mode switching in .storybook (v3/rac) preview The @vueless/storybook-dark-mode toolbar toggle was a no-op in the v3/rac Storybook because nothing in .storybook reacted to its DARK_MODE event. - preview.js: subscribe to DARK_MODE_EVENT_NAME on the addons channel and reflect the state on document.documentElement.dataset.colorScheme. Initial value reads from the addon's `sb-addon-themes-3` localStorage key so the first paint is correct (matches the .storybook-s2 pattern). - custom-addons/provider/index.js: consume useDarkMode() and feed isDark through to the React Spectrum Provider's `colorScheme` prop whenever the ProviderSwitcher dropdown is set to "Auto". An explicit dropdown choice still wins. * docs(builder): annotate key decisions with upstream references Add succinct comments at non-obvious decision points across the custom Parcel-based Storybook 10 builder, referencing the official Builder API docs (https://storybook.js.org/docs/builders/builder-api) and the upstream @storybook/builder-vite and @storybook/builder-webpack5 reference implementations. Highlights: - parcel-resolver-storybook: top-of-file block explaining the externalize-the-runtime pattern, the globalsNameReferenceMap source, the .cache layout, and the CJS-cycle issue it sidesteps; per-branch comments for externals / react-dom/client shim / story: pipeline. - storybook-builder-parcel/preset.mjs: Builder API contract summary, rationale for the 9003->3000 reverse proxy, list of the five generated files, and the bail() / module-scope watcher rationale. - gen-preview-modern.mjs: explicit ordering rationale for runtime -> setup-addons -> PreviewWeb, why processPreviewAnnotation needs toPackageExportSpecifier under Parcel, and why toImportFn uses static imports + Object.assign instead of Promise.all + spread. - gen-iframe-modern.mjs / templates/iframe.html: provenance from upstream Vite's input/iframe.html and the OTHER_GLOBALS placeholder workaround. - StoryTransformer.ts / StorybookMDXTransformer.mjs: brief headers describing what each transformer does and the IPC-based docgen optimization. No code logic changes; comments only. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> * Revert "Merge branch 'main' of github.com:adobe/react-spectrum into storybook-10-upgrade" This reverts commit bf62a86810b8e677fdd8c609bc923f9339e19213, reversing changes made to edc24b0ff9fdc9639fc062deb181f8ffc52c5331. * fix: Tailwind starter typescript * turn on verdaccio * Revert "turn on verdaccio" This reverts commit 3267daee1a5ce7ed7b0c3f7440d86e80bcccab96. --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Author
Parents
Loading