Merge pull request #29301 from storybookjs/jeppe/prebundle-addon-docs

Addon-docs, blocks: Prebundle dependencies
storybookjs · Oct 9, 2024 · 5659e1b · 5659e1b
2 parents bc07da7 + de2b9b4
commit 5659e1b
Show file tree

Hide file tree

Showing 30 changed files with 25 additions and 82 deletions.
diff --git a/code/addons/docs/angular/index.js b/code/addons/docs/angular/index.js
@@ -1,7 +1,6 @@
 /* eslint-disable no-underscore-dangle */
-import { global } from '@storybook/global';
 
 export const setCompodocJson = (compodocJson) => {
  // @ts-expect-error (Converted from ts-ignore)
- global.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
+ globalThis.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
 };
diff --git a/code/addons/docs/ember/index.js b/code/addons/docs/ember/index.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import { global } from '@storybook/global';
 
 export const setJSONDoc = (jsondoc) => {
- global.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
+ globalThis.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
 };
diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
@@ -100,20 +100,19 @@
  "@mdx-js/react": "^3.0.0",
  "@storybook/blocks": "workspace:*",
  "@storybook/csf-plugin": "workspace:*",
- "@storybook/global": "^5.0.0",
  "@storybook/react-dom-shim": "workspace:*",
- "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
- "rehype-external-links": "^3.0.0",
- "rehype-slug": "^6.0.0",
  "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
  "@mdx-js/mdx": "^3.0.0",
  "@rollup/pluginutils": "^5.0.2",
+ "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
+ "rehype-external-links": "^3.0.0",
+ "rehype-slug": "^6.0.0",
  "typescript": "^5.3.2",
  "vite": "^4.0.4"
  },

diff --git a/code/addons/docs/src/preview.ts b/code/addons/docs/src/preview.ts
@@ -1,8 +1,6 @@
 import type { PreparedStory } from 'storybook/internal/types';
 
-import { global } from '@storybook/global';
-
-const excludeTags = Object.entries(global.TAGS_OPTIONS ?? {}).reduce(
+const excludeTags = Object.entries(globalThis.TAGS_OPTIONS ?? {}).reduce(
  (acc, entry) => {
  const [tag, option] = entry;
  if ((option as any).excludeFromDocsStories) {

diff --git a/code/addons/docs/template/stories/docs2/button.stories.ts b/code/addons/docs/template/stories/docs2/button.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
  component: globalThis.Components.Button,
  tags: ['autodocs'],

diff --git a/code/addons/docs/template/stories/docs2/multiple-csf-files-a.stories.ts b/code/addons/docs/template/stories/docs2/multiple-csf-files-a.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
  title: 'Multiple CSF Files Same Title',
  component: globalThis.Components.Html,

diff --git a/code/addons/docs/template/stories/docs2/multiple-csf-files-b.stories.ts b/code/addons/docs/template/stories/docs2/multiple-csf-files-b.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
  title: 'Multiple CSF Files Same Title',
  component: globalThis.Components.Html,

diff --git a/code/addons/docs/template/stories/docspage/autoplay.stories.ts b/code/addons/docs/template/stories/docspage/autoplay.stories.ts
@@ -1,4 +1,3 @@
-import { global as globalThis } from '@storybook/global';
 import { expect, within } from '@storybook/test';
 
 export default {

diff --git a/code/addons/docs/template/stories/docspage/basic.stories.ts b/code/addons/docs/template/stories/docspage/basic.stories.ts
@@ -1,4 +1,3 @@
-import { global as globalThis } from '@storybook/global';
 import { fn } from '@storybook/test';
 
 export default {

diff --git a/code/addons/docs/template/stories/docspage/description.stories.ts b/code/addons/docs/template/stories/docspage/description.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
  component: globalThis.Components.Button,
  subcomponents: {

diff --git a/code/addons/docs/template/stories/docspage/error.stories.ts b/code/addons/docs/template/stories/docspage/error.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
  component: globalThis.Components.Button,
  tags: ['autodocs', '!test', '!vitest'],

diff --git a/code/addons/docs/template/stories/docspage/extract-description.stories.ts b/code/addons/docs/template/stories/docspage/extract-description.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
  component: globalThis.Components.Button,
  tags: ['autodocs'],

diff --git a/code/addons/docs/template/stories/docspage/iframe.stories.ts b/code/addons/docs/template/stories/docspage/iframe.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
  component: globalThis.Components.Button,
  tags: ['autodocs'],

diff --git a/code/addons/docs/template/stories/docspage/overflow.stories.ts b/code/addons/docs/template/stories/docspage/overflow.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
  component: globalThis.Components.Pre,
  tags: ['autodocs'],

diff --git a/code/addons/docs/template/stories/docspage/override.stories.ts b/code/addons/docs/template/stories/docspage/override.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 // FIXME: do this using basic React functions for multi-framework
 // once sandbox linking is working
 //

diff --git a/code/addons/docs/template/stories/docspage/source.stories.ts b/code/addons/docs/template/stories/docspage/source.stories.ts
@@ -1,7 +1,5 @@
 import type { StoryContext } from 'storybook/internal/types';
 
-import { global as globalThis } from '@storybook/global';
-
 import { dedent } from 'ts-dedent';
 
 export default {

diff --git a/code/addons/docs/template/stories/toc/basic.stories.ts b/code/addons/docs/template/stories/toc/basic.stories.ts
@@ -1,6 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-import { fn } from '@storybook/test';
-
 export default {
  component: globalThis.Components.Button,
  tags: ['autodocs'],

diff --git a/code/addons/docs/template/stories/toc/custom-selector.stories.ts b/code/addons/docs/template/stories/toc/custom-selector.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
  component: globalThis.Components.Button,
  tags: ['autodocs'],

diff --git a/code/addons/docs/template/stories/toc/custom-title.stories.ts b/code/addons/docs/template/stories/toc/custom-title.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
  component: globalThis.Components.Button,
  tags: ['autodocs'],

diff --git a/code/addons/docs/template/stories/toc/ignore-selector.stories.ts b/code/addons/docs/template/stories/toc/ignore-selector.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
  component: globalThis.Components.Button,
  tags: ['autodocs'],

diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json
@@ -44,24 +44,21 @@
  },
  "dependencies": {
  "@storybook/csf": "^0.1.11",
- "@storybook/global": "^5.0.0",
  "@storybook/icons": "^1.2.10",
- "color-convert": "^2.0.1",
- "dequal": "^2.0.2",
- "markdown-to-jsx": "^7.4.5",
- "memoizerific": "^1.11.3",
- "polished": "^4.2.2",
- "react-colorful": "^5.1.2",
- "telejson": "^7.2.0",
- "ts-dedent": "^2.0.0",
- "util-deprecate": "^1.0.2"
+ "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
  "@storybook/addon-actions": "workspace:*",
  "@storybook/react": "workspace:*",
  "@storybook/test": "workspace:*",
  "@types/color-convert": "^2.0.0",
+ "color-convert": "^2.0.1",
  "es-toolkit": "^1.21.0",
+ "markdown-to-jsx": "^7.4.5",
+ "memoizerific": "^1.11.3",
+ "polished": "^4.2.2",
+ "react-colorful": "^5.1.2",
+ "telejson": "^7.2.0",
  "tocbot": "^4.20.1"
  },
  "peerDependencies": {

diff --git a/code/lib/blocks/src/blocks/DocsContainer.tsx b/code/lib/blocks/src/blocks/DocsContainer.tsx
@@ -5,16 +5,14 @@ import type { ThemeVars } from 'storybook/internal/theming';
 import { ThemeProvider, ensure as ensureTheme } from 'storybook/internal/theming';
 import type { Renderer } from 'storybook/internal/types';
 
-import { global } from '@storybook/global';
-
 import { DocsPageWrapper } from '../components';
 import { TableOfContents } from '../components/TableOfContents';
 import type { DocsContextProps } from './DocsContext';
 import { DocsContext } from './DocsContext';
 import { SourceContainer } from './SourceContainer';
 import { scrollToElement } from './utils';
 
-const { document, window: globalWindow } = global;
+const { document, window: globalWindow } = globalThis;
 
 export interface DocsContainerProps<TFramework extends Renderer = Renderer> {
  context: DocsContextProps<TFramework>;

diff --git a/code/lib/blocks/src/blocks/DocsContext.ts b/code/lib/blocks/src/blocks/DocsContext.ts
@@ -4,20 +4,18 @@ import { createContext } from 'react';
 
 import type { DocsContextProps, Renderer } from 'storybook/internal/types';
 
-import { global } from '@storybook/global';
-
 export type { DocsContextProps };
 
 // We add DocsContext to window. The reason is that in case DocsContext.ts is
 // imported multiple times (maybe once directly, and another time from a minified bundle)
 // we will have multiple DocsContext definitions - leading to lost context in
 // the React component tree.
 // This was specifically a problem with the Vite builder.
-if (global && global.__DOCS_CONTEXT__ === undefined) {
- global.__DOCS_CONTEXT__ = createContext(null);
- global.__DOCS_CONTEXT__.displayName = 'DocsContext';
+if (globalThis && globalThis.__DOCS_CONTEXT__ === undefined) {
+ globalThis.__DOCS_CONTEXT__ = createContext(null);
+ globalThis.__DOCS_CONTEXT__.displayName = 'DocsContext';
 }
 
-export const DocsContext: Context<DocsContextProps<Renderer>> = global
- ? global.__DOCS_CONTEXT__
+export const DocsContext: Context<DocsContextProps<Renderer>> = globalThis
+ ? globalThis.__DOCS_CONTEXT__
  : createContext(null);
diff --git a/code/lib/blocks/src/blocks/mdx.tsx b/code/lib/blocks/src/blocks/mdx.tsx
@@ -6,14 +6,13 @@ import { Code, components, nameSpaceClassNames } from 'storybook/internal/compon
 import { NAVIGATE_URL } from 'storybook/internal/core-events';
 import { styled } from 'storybook/internal/theming';
 
-import { global } from '@storybook/global';
 import { LinkIcon } from '@storybook/icons';
 
 import { Source } from '../components';
 import type { DocsContextProps } from './DocsContext';
 import { DocsContext } from './DocsContext';
 
-const { document } = global;
+const { document } = globalThis;
 
 // Hacky utility for asserting identifiers in MDX Story elements
 export const assertIsFn = (val: any) => {

diff --git a/code/lib/blocks/src/components/IFrame.tsx b/code/lib/blocks/src/components/IFrame.tsx
@@ -1,8 +1,6 @@
 import React, { Component } from 'react';
 
-import { global } from '@storybook/global';
-
-const { window: globalWindow } = global;
+const { window: globalWindow } = globalThis;
 
 interface IFrameProps {
  id: string;

diff --git a/code/lib/blocks/src/components/Preview.stories.tsx b/code/lib/blocks/src/components/Preview.stories.tsx
@@ -5,8 +5,6 @@ import { Button, Spaced } from 'storybook/internal/components';
 import { styled } from 'storybook/internal/theming';
 import type { DocsContextProps, ModuleExport } from 'storybook/internal/types';
 
-import { global } from '@storybook/global';
-
 import * as ButtonStories from '../examples/Button.stories';
 import { Preview, PreviewSkeleton } from './Preview';
 import * as sourceStories from './Source.stories';
@@ -251,7 +249,7 @@ export const WithAdditionalActions = (
  {
  title: 'Open on GitHub',
  onClick: () => {
- global.location.href =
+ globalThis.location.href =
  'https://github.com/storybookjs/storybook/blob/next/code/lib/blocks/src/components/Preview.stories.tsx#L165-L186';
  },
  },

diff --git a/code/lib/blocks/src/components/Preview.tsx b/code/lib/blocks/src/components/Preview.tsx
@@ -5,8 +5,6 @@ import { ActionBar, Zoom } from 'storybook/internal/components';
 import type { ActionItem } from 'storybook/internal/components';
 import { styled } from 'storybook/internal/theming';
 
-import { global } from '@storybook/global';
-
 import { darken } from 'polished';
 
 import type { SourceProps } from '.';
@@ -204,7 +202,7 @@ export const Preview: FC<PreviewProps> = ({
  );
  const actionItems = [...defaultActionItems, ...additionalActionItems];
 
- const { window: globalWindow } = global;
+ const { window: globalWindow } = globalThis;
 
  const copyToClipboard = useCallback(async (text: string) => {
  const { createCopyToClipboardFunction } = await import('storybook/internal/components');

diff --git a/code/lib/blocks/src/components/Story.tsx b/code/lib/blocks/src/components/Story.tsx
@@ -6,12 +6,10 @@ import { ErrorFormatter, Loader, getStoryHref } from 'storybook/internal/compone
 import { styled } from 'storybook/internal/theming';
 import type { DocsContextProps, PreparedStory } from 'storybook/internal/types';
 
-import { global } from '@storybook/global';
-
 import { IFrame } from './IFrame';
 import { ZoomContext } from './ZoomContext';
 
-const { PREVIEW_URL } = global;
+const { PREVIEW_URL } = globalThis;
 const BASE_URL = PREVIEW_URL || 'iframe.html';
 
 interface CommonProps {

diff --git a/code/lib/blocks/src/controls/Object.tsx b/code/lib/blocks/src/controls/Object.tsx
@@ -4,7 +4,6 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Button, Form, IconButton } from 'storybook/internal/components';
 import { type Theme, styled, useTheme } from 'storybook/internal/theming';
 
-import { global } from '@storybook/global';
 import { AddIcon, EyeCloseIcon, EyeIcon, SubtractIcon } from '@storybook/icons';
 
 import { cloneDeep } from 'es-toolkit/compat';
@@ -13,7 +12,7 @@ import { getControlId, getControlSetterButtonId } from './helpers';
 import { JsonTree } from './react-editable-json-tree';
 import type { ControlProps, ObjectConfig, ObjectValue } from './types';
 
-const { window: globalWindow } = global;
+const { window: globalWindow } = globalThis;
 
 type JsonTreeProps = ComponentProps<typeof JsonTree>;
 

diff --git a/code/yarn.lock b/code/yarn.lock
@@ -5446,7 +5446,6 @@ __metadata:
  "@rollup/pluginutils": "npm:^5.0.2"
  "@storybook/blocks": "workspace:*"
  "@storybook/csf-plugin": "workspace:*"
- "@storybook/global": "npm:^5.0.0"
  "@storybook/react-dom-shim": "workspace:*"
  "@types/react": "npm:^16.8.0 || ^17.0.0 || ^18.0.0"
  react: "npm:^18.2.0"
@@ -5764,13 +5763,11 @@ __metadata:
  dependencies:
  "@storybook/addon-actions": "workspace:*"
  "@storybook/csf": "npm:^0.1.11"
- "@storybook/global": "npm:^5.0.0"
  "@storybook/icons": "npm:^1.2.10"
  "@storybook/react": "workspace:*"
  "@storybook/test": "workspace:*"
  "@types/color-convert": "npm:^2.0.0"
  color-convert: "npm:^2.0.1"
- dequal: "npm:^2.0.2"
  es-toolkit: "npm:^1.21.0"
  markdown-to-jsx: "npm:^7.4.5"
  memoizerific: "npm:^1.11.3"
@@ -5779,7 +5776,6 @@ __metadata:
  telejson: "npm:^7.2.0"
  tocbot: "npm:^4.20.1"
  ts-dedent: "npm:^2.0.0"
- util-deprecate: "npm:^1.0.2"
  peerDependencies:
  react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
  react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta