From 19251823fc670acc4b7025807cd27ab565a2a960 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 1 Dec 2022 18:33:25 +0100 Subject: [PATCH 01/26] some fixes, need more work --- .../builder-vite/src/codegen-iframe-script.ts | 19 ++++++++++--------- code/lib/instrumenter/src/instrumenter.ts | 2 +- .../src/modules/core-client/start.ts | 2 +- .../src/components/preview/preview.tsx | 7 +++++-- 4 files changed, 17 insertions(+), 13 deletions(-) diff --git a/code/lib/builder-vite/src/codegen-iframe-script.ts b/code/lib/builder-vite/src/codegen-iframe-script.ts index 8f986e9ca26a..9cae4e246e60 100644 --- a/code/lib/builder-vite/src/codegen-iframe-script.ts +++ b/code/lib/builder-vite/src/codegen-iframe-script.ts @@ -29,14 +29,9 @@ export async function generateIframeScriptCode(options: ExtendedOptions) { // is loaded. That way our client-apis can assume the existence of the API+store import { configure } from '${rendererName}'; + import { logger } from '@storybook/client-logger'; - import * as clientApi from "@storybook/preview-api"; - ${filesToImport(configEntries, 'config')} - - import * as preview from '${virtualPreviewFile}'; - import { configStories } from '${virtualStoriesFile}'; - - const { + import { addDecorator, addParameters, addLoader, @@ -46,8 +41,14 @@ export async function generateIframeScriptCode(options: ExtendedOptions) { addArgTypesEnhancer, addArgsEnhancer, setGlobalRender, - } = previewApi; - + } from "@storybook/preview-api"; + ${filesToImport(configEntries, 'config')} + + import * as preview from '${virtualPreviewFile}'; + import { configStories } from '${virtualStoriesFile}'; + + console.log('${rendererName}'); + const configs = [${importArray('config', configEntries.length) .concat('preview.default') .join(',')}].filter(Boolean) diff --git a/code/lib/instrumenter/src/instrumenter.ts b/code/lib/instrumenter/src/instrumenter.ts index c29b1a6fbd9b..69d4b4eb2a9c 100644 --- a/code/lib/instrumenter/src/instrumenter.ts +++ b/code/lib/instrumenter/src/instrumenter.ts @@ -334,7 +334,7 @@ export class Instrumenter { track(method: string, fn: Function, args: any[], options: Options) { const storyId: StoryId = args?.[0]?.__storyId__ || - global.window.__STORYBOOK_PREVIEW__.selectionStore.selection.storyId; + global.window.__STORYBOOK_PREVIEW__.selectionStore?.selection?.storyId; const { cursor, ancestors } = this.getState(storyId); this.setState(storyId, { cursor: cursor + 1 }); const id = `${ancestors.slice(-1)[0] || storyId} [${cursor}] ${method}`; diff --git a/code/lib/preview-api/src/modules/core-client/start.ts b/code/lib/preview-api/src/modules/core-client/start.ts index bdfb5698ae3f..bd5c1c22df11 100644 --- a/code/lib/preview-api/src/modules/core-client/start.ts +++ b/code/lib/preview-api/src/modules/core-client/start.ts @@ -3,7 +3,7 @@ import global from 'global'; import type { Renderer, ArgsStoryFn, Path, ProjectAnnotations } from '@storybook/types'; import { createChannel } from '@storybook/channel-postmessage'; import { FORCE_RE_RENDER } from '@storybook/core-events'; -import { addons } from '../addons'; +import { addons } from '../../addons'; import { PreviewWeb } from '../../preview-web'; import { ClientApi } from '../../client-api'; diff --git a/code/ui/manager/src/components/preview/preview.tsx b/code/ui/manager/src/components/preview/preview.tsx index 41f3f64dcc7e..5ee0cc07f5c8 100644 --- a/code/ui/manager/src/components/preview/preview.tsx +++ b/code/ui/manager/src/components/preview/preview.tsx @@ -1,6 +1,7 @@ +import global from 'global'; + import React, { Fragment, useMemo, useEffect, useRef, useState } from 'react'; import { Helmet } from 'react-helmet-async'; -import global from 'global'; import { type API, @@ -24,6 +25,8 @@ import { FramesRenderer } from './FramesRenderer'; import type { PreviewProps } from './utils/types'; +const { FEATURES } = global; + const getWrappers = (getFn: API['getElements']) => Object.values(getFn(types.PREVIEW)); const getTabs = (getFn: API['getElements']) => Object.values(getFn(types.TAB)); @@ -70,7 +73,7 @@ const createCanvas = (id: string, baseUrl = 'iframe.html', withLoader = true): A const [progress, setProgress] = useState(undefined); useEffect(() => { - if (global.CONFIG_TYPE === 'DEVELOPMENT') { + if (FEATURES?.storyStoreV7 && global.CONFIG_TYPE === 'DEVELOPMENT') { const channel = addons.getServerChannel(); channel.on(PREVIEW_BUILDER_PROGRESS, (options) => { From f8d5551d79187539d9521ea30f8365aecf88d541 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 2 Dec 2022 17:46:56 +0100 Subject: [PATCH 02/26] try to make builder-manager prefer mjs, for tree-shaking --- code/lib/builder-manager/src/index.ts | 2 ++ code/lib/core-common/src/presets.ts | 24 +++++++++++++++++++----- 2 files changed, 21 insertions(+), 5 deletions(-) diff --git a/code/lib/builder-manager/src/index.ts b/code/lib/builder-manager/src/index.ts index cda53d1161d3..edce7b739602 100644 --- a/code/lib/builder-manager/src/index.ts +++ b/code/lib/builder-manager/src/index.ts @@ -41,6 +41,7 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => { outdir: join(options.outputDir || './', 'sb-addons'), format: 'esm', write: false, + resolveExtensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'], outExtension: { '.js': '.mjs' }, loader: { '.js': 'jsx', @@ -57,6 +58,7 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => { bundle: true, minify: false, sourcemap: true, + conditions: ['browser', 'module', 'default'], jsxFactory: 'React.createElement', jsxFragment: 'React.Fragment', diff --git a/code/lib/core-common/src/presets.ts b/code/lib/core-common/src/presets.ts index c17f8c17d41a..12a7b2d23d69 100644 --- a/code/lib/core-common/src/presets.ts +++ b/code/lib/core-common/src/presets.ts @@ -10,6 +10,7 @@ import type { PresetConfig, Presets, } from '@storybook/types'; +import { join, parse } from 'path'; import { loadCustomPresets } from './utils/load-custom-presets'; import { safeResolve, safeResolveFrom } from './utils/safeResolve'; import { interopRequireDefault } from './utils/interpret-require'; @@ -66,14 +67,19 @@ export const resolveAddonName = ( const resolved = resolve(name); if (resolved) { - if (name.match(/\/(manager|register(-panel)?)(\.(js|ts|tsx|jsx))?$/)) { + const { dir: fdir, name: fname } = parse(resolved); + + if (name.match(/\/(manager|register(-panel)?)(\.(js|mjs|ts|tsx|jsx))?$/)) { return { type: 'virtual', name, - managerEntries: [resolved], + // we remove the extension + // this is a bit of a hack to try en be able to find .mjs files + // node can only ever resolve .js files; it does not look at the exports field in package.json + managerEntries: [join(fdir, fname)], }; } - if (name.match(/\/(preset)(\.(js|ts|tsx|jsx))?$/)) { + if (name.match(/\/(preset)(\.(js|mjs|ts|tsx|jsx))?$/)) { return { type: 'presets', name: resolved, @@ -113,11 +119,19 @@ export const resolveAddonName = ( const managerEntries = []; if (managerFile) { - managerEntries.push(managerFile); + // we remove the extension + // this is a bit of a hack to try en be able to find .mjs files + // node can only ever resolve .js files; it does not look at the exports field in package.json + const { dir: fdir, name: fname } = parse(managerFile); + managerEntries.push(join(fdir, fname)); } // register file is the old way of registering addons if (!managerFile && registerFile && !presetFile) { - managerEntries.push(registerFile); + // we remove the extension + // this is a bit of a hack to try en be able to find .mjs files + // node can only ever resolve .js files; it does not look at the exports field in package.json + const { dir: fdir, name: fname } = parse(registerFile); + managerEntries.push(join(fdir, fname)); } return { From b6f3d29d6af5a6c7dbf455834fefe5813f5da17f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 2 Dec 2022 17:48:54 +0100 Subject: [PATCH 03/26] trying to debug the vite-builder problem The issue is vite doesn't pass certain files throw the transform plugin, this causes the globalization to not be complete, causing multiple version of the same module, which is designed to be a singleton. me and Ian looked at it, we need to investigate further. Co-authored-by: Ian VanSchooten --- .../builder-vite/src/codegen-iframe-script.ts | 46 ++++++++----------- code/lib/builder-vite/src/vite-config.ts | 14 +++++- .../src/modules/client-api/ClientApi.ts | 4 ++ code/renderers/react/src/public-api.tsx | 4 ++ 4 files changed, 41 insertions(+), 27 deletions(-) diff --git a/code/lib/builder-vite/src/codegen-iframe-script.ts b/code/lib/builder-vite/src/codegen-iframe-script.ts index 9cae4e246e60..ea39e056c7e7 100644 --- a/code/lib/builder-vite/src/codegen-iframe-script.ts +++ b/code/lib/builder-vite/src/codegen-iframe-script.ts @@ -21,34 +21,28 @@ export async function generateIframeScriptCode(options: ExtendedOptions) { const importArray = (name: string, length: number) => new Array(length).fill(0).map((_, i) => `${name}_${i}`); + // the "__DO_NOT_USE_OR_YOU_WILL_BE_FIRED_STORYSTOREV6_API__" is a experiment I tried to fix the vite-builder in dev mode. + // it should be removed, if this is the only way to make things work (oof), then it likely mean we have to add more, and add it to all renderers + // but I'm really hoping we do not have to do that. + // noinspection UnnecessaryLocalVariableJS /** @todo Inline variable and remove `noinspection` */ // language=JavaScript const code = ` // Ensure that the client API is initialized by the framework before any other iframe code // is loaded. That way our client-apis can assume the existence of the API+store - import { configure } from '${rendererName}'; - + import { configure, __DO_NOT_USE_OR_YOU_WILL_BE_FIRED_STORYSTOREV6_API__ } from '${rendererName}'; import { logger } from '@storybook/client-logger'; - import { - addDecorator, - addParameters, - addLoader, - addArgs, - addArgTypes, - addStepRunner, - addArgTypesEnhancer, - addArgsEnhancer, - setGlobalRender, - } from "@storybook/preview-api"; + + const { clientApi } = __DO_NOT_USE_OR_YOU_WILL_BE_FIRED_STORYSTOREV6_API__; + ${filesToImport(configEntries, 'config')} import * as preview from '${virtualPreviewFile}'; + import * as previewApi from '@storybook/preview-api'; import { configStories } from '${virtualStoriesFile}'; - - console.log('${rendererName}'); - + const configs = [${importArray('config', configEntries.length) .concat('preview.default') .join(',')}].filter(Boolean) @@ -58,34 +52,34 @@ export async function generateIframeScriptCode(options: ExtendedOptions) { const value = config[key]; switch (key) { case 'args': { - return addArgs(value); + return clientApi.addArgs(value); } case 'argTypes': { - return addArgTypes(value); + return clientApi.addArgTypes(value); } case 'decorators': { - return value.forEach((decorator) => addDecorator(decorator, false)); + return value.forEach((decorator) => clientApi.addDecorator(decorator, false)); } case 'loaders': { - return value.forEach((loader) => addLoader(loader, false)); + return value.forEach((loader) => clientApi.addLoader(loader, false)); } case 'parameters': { - return addParameters({ ...value }, false); + return clientApi.addParameters({ ...value }, false); } case 'argTypesEnhancers': { - return value.forEach((enhancer) => addArgTypesEnhancer(enhancer)); + return value.forEach((enhancer) => clientApi.addArgTypesEnhancer(enhancer)); } case 'argsEnhancers': { - return value.forEach((enhancer) => addArgsEnhancer(enhancer)) + return value.forEach((enhancer) => clientApi.addArgsEnhancer(enhancer)) } case 'render': { - return setGlobalRender(value) + return previewApi.setGlobalRender(value) } case 'globals': case 'globalTypes': { const v = {}; v[key] = value; - return addParameters(v, false); + return clientApi.addParameters(v, false); } case 'decorateStory': case 'applyDecorators': @@ -94,7 +88,7 @@ export async function generateIframeScriptCode(options: ExtendedOptions) { return null; // This key is not handled directly in v6 mode. } case 'runStep': { - return addStepRunner(value); + return previewApi.addStepRunner(value); } default: { // eslint-disable-next-line prefer-template diff --git a/code/lib/builder-vite/src/vite-config.ts b/code/lib/builder-vite/src/vite-config.ts index 464373b6f7cd..1451d08041dc 100644 --- a/code/lib/builder-vite/src/vite-config.ts +++ b/code/lib/builder-vite/src/vite-config.ts @@ -19,6 +19,10 @@ import { } from './plugins'; import type { ExtendedOptions } from './types'; +const globalPluginInstance = externalGlobals(globals); + +console.log({ globalPluginInstance, fn: globalPluginInstance.transform.toString() }); + export type PluginConfigType = 'build' | 'development'; const configEnvServe: ConfigEnv = { @@ -74,6 +78,14 @@ export async function pluginConfig(options: ExtendedOptions) { const plugins = [ codeGeneratorPlugin(options), + { + name: 'ians-cool-plugin', + enforce: 'post', + transform: (code, id) => { + console.log({ id }); + return code; + }, + }, // sourceLoaderPlugin(options), mdxPlugin(), injectExportOrderPlugin, @@ -91,7 +103,7 @@ export async function pluginConfig(options: ExtendedOptions) { } }, }, - externalGlobals(globals), + globalPluginInstance, ] as PluginOption[]; // We need the react plugin here to support MDX in non-react projects. diff --git a/code/lib/preview-api/src/modules/client-api/ClientApi.ts b/code/lib/preview-api/src/modules/client-api/ClientApi.ts index f2d8eb358748..22af05618ebb 100644 --- a/code/lib/preview-api/src/modules/client-api/ClientApi.ts +++ b/code/lib/preview-api/src/modules/client-api/ClientApi.ts @@ -29,6 +29,10 @@ import { combineParameters, composeStepRunners, normalizeInputTypes } from '../. import { StoryStoreFacade } from './StoryStoreFacade'; +console.log( + 'CLIENT_API_MODULE, you should only see this log, exactly ONCE, in the browser console' +); + // ClientApi (and StoreStore) are really singletons. However they are not created until the // relevant framework instanciates them via `start.js`. The good news is this happens right away. let singleton: ClientApi; diff --git a/code/renderers/react/src/public-api.tsx b/code/renderers/react/src/public-api.tsx index 05540a0fb82d..e0ccb470a754 100644 --- a/code/renderers/react/src/public-api.tsx +++ b/code/renderers/react/src/public-api.tsx @@ -23,3 +23,7 @@ export const storiesOf: ClientApi['storiesOf'] = (kind, m) => { export const configure: ClientApi['configure'] = (...args) => api.configure(FRAMEWORK, ...args); export const forceReRender: ClientApi['forceReRender'] = api.forceReRender; export const raw: ClientApi['raw'] = api.clientApi.raw; + +// I added this temporarily, it should be removed, I only added it to debug the vite singleton module problem when running storybook in dev-mode +// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention +export const __DO_NOT_USE_OR_YOU_WILL_BE_FIRED_STORYSTOREV6_API__ = api; From db36af9306393d23e01500eb7c94b6473f16f18a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 2 Dec 2022 17:57:07 +0100 Subject: [PATCH 04/26] unsupported temp api that's not supposed to be there, doesn't need types --- code/renderers/react/src/public-api.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/renderers/react/src/public-api.tsx b/code/renderers/react/src/public-api.tsx index e0ccb470a754..ce0d90c8af40 100644 --- a/code/renderers/react/src/public-api.tsx +++ b/code/renderers/react/src/public-api.tsx @@ -26,4 +26,4 @@ export const raw: ClientApi['raw'] = api.clientApi.raw; // I added this temporarily, it should be removed, I only added it to debug the vite singleton module problem when running storybook in dev-mode // eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention -export const __DO_NOT_USE_OR_YOU_WILL_BE_FIRED_STORYSTOREV6_API__ = api; +export const __DO_NOT_USE_OR_YOU_WILL_BE_FIRED_STORYSTOREV6_API__ = api as any; From 501dce1f43da3b0795c695f91a4382cc94f0f284 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 9 Dec 2022 14:52:46 +0100 Subject: [PATCH 05/26] strong typing for globals, fix issues resulting from strong global types, enforce clientApi singleton via global --- code/addons/a11y/src/typings.d.ts | 4 +- code/addons/actions/src/typings.d.ts | 4 +- code/addons/backgrounds/src/typings.d.ts | 4 +- code/addons/docs/src/typings.d.ts | 4 +- code/addons/highlight/src/typings.d.ts | 4 +- code/addons/interactions/src/typings.d.ts | 4 +- code/addons/jest/src/typings.d.ts | 5 ++- code/addons/links/src/typings.d.ts | 4 +- code/addons/measure/src/typings.d.ts | 4 +- code/addons/outline/src/typings.d.ts | 4 +- .../storyshots-core/src/typings.d.ts | 5 ++- code/frameworks/angular/src/client/globals.ts | 4 +- code/frameworks/angular/src/typings.d.ts | 22 ++++++++- code/frameworks/angular/tsconfig.build.json | 2 +- code/frameworks/ember/src/typings.d.ts | 5 ++- .../frameworks/html-webpack5/src/typings.d.ts | 4 +- .../preact-webpack5/src/typings.d.ts | 4 +- .../react-webpack5/src/typings.d.ts | 4 +- .../svelte-webpack5/src/typings.d.ts | 5 ++- code/frameworks/vue-webpack5/src/typings.d.ts | 6 ++- .../frameworks/vue3-webpack5/src/typings.d.ts | 6 ++- .../web-components-webpack5/src/typings.d.ts | 4 +- code/lib/builder-webpack5/typings.d.ts | 5 ++- code/lib/channel-postmessage/src/index.ts | 24 +++++----- code/lib/channel-postmessage/src/typings.d.ts | 6 ++- code/lib/channel-postmessage/tsconfig.json | 3 ++ code/lib/channel-websocket/src/typings.d.ts | 5 ++- code/lib/client-logger/src/index.ts | 32 +++++++------ code/lib/client-logger/src/typings.d.ts | 6 ++- code/lib/core-server/src/typings.d.ts | 5 ++- code/lib/instrumenter/src/typings.d.ts | 4 +- code/lib/manager-api/src/typings.d.ts | 5 ++- .../src/modules/client-api/ClientApi.ts | 45 ++++++++----------- .../src/modules/client-api/typings.d.ts | 1 - .../src/modules/core-client/start.ts | 26 +++++------ .../src/modules/core-client/typings.d.ts | 7 --- .../src/modules/preview-web/Preview.tsx | 4 +- .../src/modules/preview-web/PreviewWeb.tsx | 4 ++ .../src/modules/preview-web/typings.d.ts | 8 ---- .../src/modules/store/csf/prepareStory.ts | 1 + .../src/modules/store/typings.d.ts | 1 - code/lib/preview-api/src/typings.d.ts | 41 +++++++++++++++++ code/lib/router/src/typings.d.ts | 5 ++- code/lib/theming/src/typings.d.ts | 1 - code/lib/types/src/typings.d.ts | 4 +- code/presets/react-webpack/src/typings.d.ts | 4 +- code/presets/server-webpack/src/typings.d.ts | 4 +- code/presets/vue3-webpack/src/typings.d.ts | 4 +- code/renderers/svelte/src/typings.d.ts | 4 +- .../renderers/web-components/src/typings.d.ts | 4 +- code/ui/blocks/src/typings.d.ts | 5 ++- code/ui/components/src/typings.d.ts | 1 - code/ui/manager/src/settings/typings.d.ts | 5 ++- code/ui/manager/src/typings.d.ts | 5 ++- 54 files changed, 262 insertions(+), 129 deletions(-) delete mode 100644 code/lib/preview-api/src/modules/client-api/typings.d.ts delete mode 100644 code/lib/preview-api/src/modules/core-client/typings.d.ts delete mode 100644 code/lib/preview-api/src/modules/preview-web/typings.d.ts delete mode 100644 code/lib/preview-api/src/modules/store/typings.d.ts create mode 100644 code/lib/preview-api/src/typings.d.ts diff --git a/code/addons/a11y/src/typings.d.ts b/code/addons/a11y/src/typings.d.ts index 2f4eb9cf4fd9..4748265af4d5 100644 --- a/code/addons/a11y/src/typings.d.ts +++ b/code/addons/a11y/src/typings.d.ts @@ -1 +1,3 @@ -declare module 'global'; +declare module 'global' { + export default globalThis; +} diff --git a/code/addons/actions/src/typings.d.ts b/code/addons/actions/src/typings.d.ts index 74f6623d4787..360afd0d6154 100644 --- a/code/addons/actions/src/typings.d.ts +++ b/code/addons/actions/src/typings.d.ts @@ -1,3 +1,5 @@ // TODO: following packages need definition files or a TS migration -declare module 'global'; +declare module 'global' { + export default globalThis; +} declare module 'uuid-browser/v4'; diff --git a/code/addons/backgrounds/src/typings.d.ts b/code/addons/backgrounds/src/typings.d.ts index 2f4eb9cf4fd9..4748265af4d5 100644 --- a/code/addons/backgrounds/src/typings.d.ts +++ b/code/addons/backgrounds/src/typings.d.ts @@ -1 +1,3 @@ -declare module 'global'; +declare module 'global' { + export default globalThis; +} diff --git a/code/addons/docs/src/typings.d.ts b/code/addons/docs/src/typings.d.ts index 09cc7e5fa21a..28e0338c4d74 100644 --- a/code/addons/docs/src/typings.d.ts +++ b/code/addons/docs/src/typings.d.ts @@ -1,4 +1,3 @@ -declare module 'global'; declare module '@egoist/vue-to-react'; declare module 'remark-slug'; declare module 'remark-external-links'; @@ -9,3 +8,6 @@ declare module 'vue/dist/vue'; declare module 'sveltedoc-parser' { export function parse(options: any): Promise; } +declare module 'global' { + export default globalThis; +} diff --git a/code/addons/highlight/src/typings.d.ts b/code/addons/highlight/src/typings.d.ts index 2f4eb9cf4fd9..4748265af4d5 100644 --- a/code/addons/highlight/src/typings.d.ts +++ b/code/addons/highlight/src/typings.d.ts @@ -1 +1,3 @@ -declare module 'global'; +declare module 'global' { + export default globalThis; +} diff --git a/code/addons/interactions/src/typings.d.ts b/code/addons/interactions/src/typings.d.ts index 2f4eb9cf4fd9..4748265af4d5 100644 --- a/code/addons/interactions/src/typings.d.ts +++ b/code/addons/interactions/src/typings.d.ts @@ -1 +1,3 @@ -declare module 'global'; +declare module 'global' { + export default globalThis; +} diff --git a/code/addons/jest/src/typings.d.ts b/code/addons/jest/src/typings.d.ts index a41bf8a45b79..4748265af4d5 100644 --- a/code/addons/jest/src/typings.d.ts +++ b/code/addons/jest/src/typings.d.ts @@ -1,2 +1,3 @@ -// TODO: following packages need definition files or a TS migration -declare module 'global'; +declare module 'global' { + export default globalThis; +} diff --git a/code/addons/links/src/typings.d.ts b/code/addons/links/src/typings.d.ts index 2f4eb9cf4fd9..4748265af4d5 100644 --- a/code/addons/links/src/typings.d.ts +++ b/code/addons/links/src/typings.d.ts @@ -1 +1,3 @@ -declare module 'global'; +declare module 'global' { + export default globalThis; +} diff --git a/code/addons/measure/src/typings.d.ts b/code/addons/measure/src/typings.d.ts index 4a8ad58bf897..b7be66285527 100644 --- a/code/addons/measure/src/typings.d.ts +++ b/code/addons/measure/src/typings.d.ts @@ -1,4 +1,6 @@ -declare module 'global'; +declare module 'global' { + export default globalThis; +} interface Margin { top: number; diff --git a/code/addons/outline/src/typings.d.ts b/code/addons/outline/src/typings.d.ts index 2f4eb9cf4fd9..4748265af4d5 100644 --- a/code/addons/outline/src/typings.d.ts +++ b/code/addons/outline/src/typings.d.ts @@ -1 +1,3 @@ -declare module 'global'; +declare module 'global' { + export default globalThis; +} diff --git a/code/addons/storyshots/storyshots-core/src/typings.d.ts b/code/addons/storyshots/storyshots-core/src/typings.d.ts index 03f1a3f1a323..38d1910c0221 100644 --- a/code/addons/storyshots/storyshots-core/src/typings.d.ts +++ b/code/addons/storyshots/storyshots-core/src/typings.d.ts @@ -1,7 +1,10 @@ -declare module 'global'; declare module 'jest-preset-angular/*'; declare module 'preact-render-to-string/jsx'; declare module 'react-test-renderer*'; declare module 'rax-test-renderer*'; declare module '@storybook/babel-plugin-require-context-hook/register'; + +declare module 'global' { + export default globalThis; +} diff --git a/code/frameworks/angular/src/client/globals.ts b/code/frameworks/angular/src/client/globals.ts index e6e55cbf924d..d8b312785941 100644 --- a/code/frameworks/angular/src/client/globals.ts +++ b/code/frameworks/angular/src/client/globals.ts @@ -68,6 +68,4 @@ import 'zone.js/dist/zone'; // Included with Angular CLI. */ // import 'intl/locale-data/jsonp/en'; -const { window: globalWindow } = global; - -globalWindow.STORYBOOK_ENV = 'angular'; +global.STORYBOOK_ENV = 'angular'; diff --git a/code/frameworks/angular/src/typings.d.ts b/code/frameworks/angular/src/typings.d.ts index d8f7c6f660ad..3f6f8a56efef 100644 --- a/code/frameworks/angular/src/typings.d.ts +++ b/code/frameworks/angular/src/typings.d.ts @@ -1,4 +1,24 @@ -declare module 'global'; +/* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */ // will be provided by the webpack define plugin declare var NODE_ENV: string | undefined; + +declare var STORYBOOK_ENV: 'angular'; +declare var FEATURES: any; +declare var STORIES: any; +declare var LOGLEVEL: any; +declare var CHANNEL_OPTIONS: any; +declare var STORYBOOK_HOOKS_CONTEXT: any; +declare var DOCS_OPTIONS: any; +declare var IS_STORYBOOK: any; +declare var __STORYBOOK_ADDONS_PREVIEW: any; +declare var __STORYBOOK_PREVIEW__: any; +declare var __STORYBOOK_STORY_STORE__: any; +declare var __STORYBOOK_ADDONS_CHANNEL__: any; +declare var __STORYBOOK_PREVIEWWEB_INSTANCE__: any; +declare var __STORYBOOK_CLIENTAPI_INSTANCE__: any; +declare var __STORYBOOK_CLIENT_API__: any; + +declare module 'global' { + export default globalThis; +} diff --git a/code/frameworks/angular/tsconfig.build.json b/code/frameworks/angular/tsconfig.build.json index 6aa09e55adac..75efd9abab35 100644 --- a/code/frameworks/angular/tsconfig.build.json +++ b/code/frameworks/angular/tsconfig.build.json @@ -4,7 +4,7 @@ "compilerOptions": { "target": "ES2020", "module": "CommonJS", - "lib": ["es2020", "dom"], + "lib": ["es2020", "dom", "dom.iterable"], "experimentalDecorators": true, "emitDecoratorMetadata": true, "declaration": true, diff --git a/code/frameworks/ember/src/typings.d.ts b/code/frameworks/ember/src/typings.d.ts index e05c56b846e3..6dcfba238c39 100644 --- a/code/frameworks/ember/src/typings.d.ts +++ b/code/frameworks/ember/src/typings.d.ts @@ -1,2 +1,5 @@ declare module 'ember-source/dist/ember-template-compiler'; -declare module 'global'; + +declare module 'global' { + export default globalThis; +} diff --git a/code/frameworks/html-webpack5/src/typings.d.ts b/code/frameworks/html-webpack5/src/typings.d.ts index d8f7c6f660ad..eddff6bbb3ab 100644 --- a/code/frameworks/html-webpack5/src/typings.d.ts +++ b/code/frameworks/html-webpack5/src/typings.d.ts @@ -1,4 +1,6 @@ -declare module 'global'; +declare module 'global' { + export default globalThis; +} // will be provided by the webpack define plugin declare var NODE_ENV: string | undefined; diff --git a/code/frameworks/preact-webpack5/src/typings.d.ts b/code/frameworks/preact-webpack5/src/typings.d.ts index 2f4eb9cf4fd9..4748265af4d5 100644 --- a/code/frameworks/preact-webpack5/src/typings.d.ts +++ b/code/frameworks/preact-webpack5/src/typings.d.ts @@ -1 +1,3 @@ -declare module 'global'; +declare module 'global' { + export default globalThis; +} diff --git a/code/frameworks/react-webpack5/src/typings.d.ts b/code/frameworks/react-webpack5/src/typings.d.ts index ce0c26f59d0a..2c82a91afe5e 100644 --- a/code/frameworks/react-webpack5/src/typings.d.ts +++ b/code/frameworks/react-webpack5/src/typings.d.ts @@ -1,4 +1,6 @@ -declare module 'global'; +declare module 'global' { + export default globalThis; +} // TODO: Replace, as soon as @types/react-dom 17.0.14 is used // Source: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/fb0f14b7a35cde26ffaa82e7536c062e593e9ae6/types/react-dom/client.d.ts diff --git a/code/frameworks/svelte-webpack5/src/typings.d.ts b/code/frameworks/svelte-webpack5/src/typings.d.ts index 153074abe8ca..9367a54d4664 100644 --- a/code/frameworks/svelte-webpack5/src/typings.d.ts +++ b/code/frameworks/svelte-webpack5/src/typings.d.ts @@ -1,4 +1,7 @@ -declare module 'global'; declare module '@storybook/svelte/templates/SlotDecorator.svelte'; declare module '@storybook/svelte/templates/PreviewRender.svelte'; declare module '@storybook/svelte/templates/HOC.svelte'; + +declare module 'global' { + export default globalThis; +} diff --git a/code/frameworks/vue-webpack5/src/typings.d.ts b/code/frameworks/vue-webpack5/src/typings.d.ts index b3f023454b60..102b17b3df34 100644 --- a/code/frameworks/vue-webpack5/src/typings.d.ts +++ b/code/frameworks/vue-webpack5/src/typings.d.ts @@ -1,3 +1,5 @@ -declare module 'global'; - declare module 'vue-loader/lib/plugin'; + +declare module 'global' { + export default globalThis; +} diff --git a/code/frameworks/vue3-webpack5/src/typings.d.ts b/code/frameworks/vue3-webpack5/src/typings.d.ts index 3229acac0222..af53cf111c8f 100644 --- a/code/frameworks/vue3-webpack5/src/typings.d.ts +++ b/code/frameworks/vue3-webpack5/src/typings.d.ts @@ -1,5 +1,7 @@ -declare module 'global'; - declare module 'vue-loader' { export const VueLoaderPlugin: any; } + +declare module 'global' { + export default globalThis; +} diff --git a/code/frameworks/web-components-webpack5/src/typings.d.ts b/code/frameworks/web-components-webpack5/src/typings.d.ts index d8f7c6f660ad..eddff6bbb3ab 100644 --- a/code/frameworks/web-components-webpack5/src/typings.d.ts +++ b/code/frameworks/web-components-webpack5/src/typings.d.ts @@ -1,4 +1,6 @@ -declare module 'global'; +declare module 'global' { + export default globalThis; +} // will be provided by the webpack define plugin declare var NODE_ENV: string | undefined; diff --git a/code/lib/builder-webpack5/typings.d.ts b/code/lib/builder-webpack5/typings.d.ts index 53e966a9d29e..2474c816bbba 100644 --- a/code/lib/builder-webpack5/typings.d.ts +++ b/code/lib/builder-webpack5/typings.d.ts @@ -1,3 +1,6 @@ declare module 'lazy-universal-dotenv'; declare module '@storybook/theming/paths'; -declare module 'global'; + +declare module 'global' { + export default globalThis; +} diff --git a/code/lib/channel-postmessage/src/index.ts b/code/lib/channel-postmessage/src/index.ts index 2d697ddf6908..1666e7c274be 100644 --- a/code/lib/channel-postmessage/src/index.ts +++ b/code/lib/channel-postmessage/src/index.ts @@ -141,9 +141,9 @@ export class PostmsgTransport { private getFrames(target?: string): Window[] { if (this.config.page === 'manager') { - const nodes: HTMLIFrameElement[] = [ - ...document.querySelectorAll('iframe[data-is-storybook][data-is-loaded]'), - ]; + const nodes: HTMLIFrameElement[] = Array.from( + document.querySelectorAll('iframe[data-is-storybook][data-is-loaded]') + ); const list = nodes .filter((e) => { @@ -166,9 +166,9 @@ export class PostmsgTransport { private getCurrentFrames(): Window[] { if (this.config.page === 'manager') { - const list: HTMLIFrameElement[] = [ - ...document.querySelectorAll('[data-is-storybook="true"]'), - ]; + const list: HTMLIFrameElement[] = Array.from( + document.querySelectorAll('[data-is-storybook="true"]') + ); return list.map((e) => e.contentWindow); } if (globalWindow && globalWindow.parent) { @@ -180,7 +180,9 @@ export class PostmsgTransport { private getLocalFrame(): Window[] { if (this.config.page === 'manager') { - const list: HTMLIFrameElement[] = [...document.querySelectorAll('#storybook-preview-iframe')]; + const list: HTMLIFrameElement[] = Array.from( + document.querySelectorAll('#storybook-preview-iframe') + ); return list.map((e) => e.contentWindow); } if (globalWindow && globalWindow.parent) { @@ -237,7 +239,9 @@ export class PostmsgTransport { } const getEventSourceUrl = (event: MessageEvent) => { - const frames = [...document.querySelectorAll('iframe[data-is-storybook]')]; + const frames: HTMLIFrameElement[] = Array.from( + document.querySelectorAll('iframe[data-is-storybook]') + ); // try to find the originating iframe by matching it's contentWindow // This might not be cross-origin safe const [frame, ...remainder] = frames.filter((element) => { @@ -251,7 +255,7 @@ const getEventSourceUrl = (event: MessageEvent) => { let origin; try { - ({ origin } = new URL(src, document.location)); + ({ origin } = new URL(src, document.location.toString())); } catch (err) { return false; } @@ -260,7 +264,7 @@ const getEventSourceUrl = (event: MessageEvent) => { if (frame && remainder.length === 0) { const src = frame.getAttribute('src'); - const { protocol, host, pathname } = new URL(src, document.location); + const { protocol, host, pathname } = new URL(src, document.location.toString()); return `${protocol}//${host}${pathname}`; } diff --git a/code/lib/channel-postmessage/src/typings.d.ts b/code/lib/channel-postmessage/src/typings.d.ts index 2f4eb9cf4fd9..3470be81c85f 100644 --- a/code/lib/channel-postmessage/src/typings.d.ts +++ b/code/lib/channel-postmessage/src/typings.d.ts @@ -1 +1,5 @@ -declare module 'global'; +declare var CHANNEL_OPTIONS: any; + +declare module 'global' { + export default globalThis; +} diff --git a/code/lib/channel-postmessage/tsconfig.json b/code/lib/channel-postmessage/tsconfig.json index 52d43eaaa9b9..dec167c02d5f 100644 --- a/code/lib/channel-postmessage/tsconfig.json +++ b/code/lib/channel-postmessage/tsconfig.json @@ -1,4 +1,7 @@ { "extends": "../../tsconfig.json", + "compilerOptions": { + "lib": ["dom", "dom.iterable"] + }, "include": ["src/**/*"] } diff --git a/code/lib/channel-websocket/src/typings.d.ts b/code/lib/channel-websocket/src/typings.d.ts index 8f141185b8ae..106a94b03f2f 100644 --- a/code/lib/channel-websocket/src/typings.d.ts +++ b/code/lib/channel-websocket/src/typings.d.ts @@ -1,2 +1,5 @@ -declare module 'global'; declare module 'json-fn'; + +declare module 'global' { + export default globalThis; +} diff --git a/code/lib/client-logger/src/index.ts b/code/lib/client-logger/src/index.ts index eceebe077c87..e6ca8731c3b9 100644 --- a/code/lib/client-logger/src/index.ts +++ b/code/lib/client-logger/src/index.ts @@ -1,6 +1,6 @@ import global from 'global'; -const { LOGLEVEL, console } = global; +const { LOGLEVEL } = global; type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent'; @@ -19,18 +19,24 @@ const currentLogLevelNumber: number = levels[currentLogLevelString] || levels.in type LoggingFn = (message: any, ...args: any[]) => void; export const logger = { - trace: (message: any, ...rest: any[]): void => - currentLogLevelNumber <= levels.trace && console.trace(message, ...rest), - debug: (message: any, ...rest: any[]): void => - currentLogLevelNumber <= levels.debug && console.debug(message, ...rest), - info: (message: any, ...rest: any[]): void => - currentLogLevelNumber <= levels.info && console.info(message, ...rest), - warn: (message: any, ...rest: any[]): void => - currentLogLevelNumber <= levels.warn && console.warn(message, ...rest), - error: (message: any, ...rest: any[]): void => - currentLogLevelNumber <= levels.error && console.error(message, ...rest), - log: (message: any, ...rest: any[]): void => - currentLogLevelNumber < levels.silent && console.log(message, ...rest), + trace: (message: any, ...rest: any[]): void => { + if (currentLogLevelNumber <= levels.trace) console.trace(message, ...rest); + }, + debug: (message: any, ...rest: any[]): void => { + if (currentLogLevelNumber <= levels.debug) console.debug(message, ...rest); + }, + info: (message: any, ...rest: any[]): void => { + if (currentLogLevelNumber <= levels.info) console.info(message, ...rest); + }, + warn: (message: any, ...rest: any[]): void => { + if (currentLogLevelNumber <= levels.warn) console.warn(message, ...rest); + }, + error: (message: any, ...rest: any[]): void => { + if (currentLogLevelNumber <= levels.error) console.error(message, ...rest); + }, + log: (message: any, ...rest: any[]): void => { + if (currentLogLevelNumber < levels.silent) console.log(message, ...rest); + }, } as const; const logged = new Set(); diff --git a/code/lib/client-logger/src/typings.d.ts b/code/lib/client-logger/src/typings.d.ts index 2f4eb9cf4fd9..6b3ff6ea5378 100644 --- a/code/lib/client-logger/src/typings.d.ts +++ b/code/lib/client-logger/src/typings.d.ts @@ -1 +1,5 @@ -declare module 'global'; +declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined; + +declare module 'global' { + export default globalThis; +} diff --git a/code/lib/core-server/src/typings.d.ts b/code/lib/core-server/src/typings.d.ts index b566e70257c4..b3e6a40836c0 100644 --- a/code/lib/core-server/src/typings.d.ts +++ b/code/lib/core-server/src/typings.d.ts @@ -1,4 +1,3 @@ -declare module 'global'; declare module 'lazy-universal-dotenv'; declare module 'pnp-webpack-plugin'; declare module '@storybook/theming/paths'; @@ -9,3 +8,7 @@ declare module '@aw-web-design/x-default-browser'; declare module '@storybook/manager'; declare module '@discoveryjs/json-ext'; declare module 'watchpack'; + +declare module 'global' { + export default globalThis; +} diff --git a/code/lib/instrumenter/src/typings.d.ts b/code/lib/instrumenter/src/typings.d.ts index 2f4eb9cf4fd9..4748265af4d5 100644 --- a/code/lib/instrumenter/src/typings.d.ts +++ b/code/lib/instrumenter/src/typings.d.ts @@ -1 +1,3 @@ -declare module 'global'; +declare module 'global' { + export default globalThis; +} diff --git a/code/lib/manager-api/src/typings.d.ts b/code/lib/manager-api/src/typings.d.ts index 120e82d8e42f..4748265af4d5 100644 --- a/code/lib/manager-api/src/typings.d.ts +++ b/code/lib/manager-api/src/typings.d.ts @@ -1,2 +1,3 @@ -declare module 'global'; -declare module 'preval.macro'; +declare module 'global' { + export default globalThis; +} diff --git a/code/lib/preview-api/src/modules/client-api/ClientApi.ts b/code/lib/preview-api/src/modules/client-api/ClientApi.ts index f2d8eb358748..7c15359f0b58 100644 --- a/code/lib/preview-api/src/modules/client-api/ClientApi.ts +++ b/code/lib/preview-api/src/modules/client-api/ClientApi.ts @@ -1,3 +1,4 @@ +/* eslint-disable no-underscore-dangle */ /// import { dedent } from 'ts-dedent'; @@ -29,10 +30,6 @@ import { combineParameters, composeStepRunners, normalizeInputTypes } from '../. import { StoryStoreFacade } from './StoryStoreFacade'; -// ClientApi (and StoreStore) are really singletons. However they are not created until the -// relevant framework instanciates them via `start.js`. The good news is this happens right away. -let singleton: ClientApi; - const warningAlternatives = { addDecorator: `Instead, use \`export const decorators = [];\` in your \`preview.js\`.`, addParameters: `Instead, use \`export const parameters = {};\` in your \`preview.js\`.`, @@ -55,61 +52,61 @@ const checkMethod = (method: keyof typeof warningAlternatives) => { ); } - if (!singleton) { + if (!global.__STORYBOOK_CLIENTAPI_INSTANCE__) { throw new Error(`Singleton client API not yet initialized, cannot call \`${method}\`.`); } }; export const addDecorator = (decorator: DecoratorFunction) => { checkMethod('addDecorator'); - singleton.addDecorator(decorator); + global.__STORYBOOK_CLIENTAPI_INSTANCE__?.addDecorator(decorator); }; export const addParameters = (parameters: Parameters) => { checkMethod('addParameters'); - singleton.addParameters(parameters); + global.__STORYBOOK_CLIENTAPI_INSTANCE__?.addParameters(parameters); }; export const addLoader = (loader: LoaderFunction) => { checkMethod('addLoader'); - singleton.addLoader(loader); + global.__STORYBOOK_CLIENTAPI_INSTANCE__?.addLoader(loader); }; export const addArgs = (args: Args) => { checkMethod('addArgs'); - singleton.addArgs(args); + global.__STORYBOOK_CLIENTAPI_INSTANCE__?.addArgs(args); }; export const addArgTypes = (argTypes: ArgTypes) => { checkMethod('addArgTypes'); - singleton.addArgTypes(argTypes); + global.__STORYBOOK_CLIENTAPI_INSTANCE__?.addArgTypes(argTypes); }; export const addArgsEnhancer = (enhancer: ArgsEnhancer) => { checkMethod('addArgsEnhancer'); - singleton.addArgsEnhancer(enhancer); + global.__STORYBOOK_CLIENTAPI_INSTANCE__?.addArgsEnhancer(enhancer); }; export const addArgTypesEnhancer = (enhancer: ArgTypesEnhancer) => { checkMethod('addArgTypesEnhancer'); - singleton.addArgTypesEnhancer(enhancer); + global.__STORYBOOK_CLIENTAPI_INSTANCE__?.addArgTypesEnhancer(enhancer); }; export const addStepRunner = (stepRunner: StepRunner) => { checkMethod('addStepRunner'); - singleton.addStepRunner(stepRunner); + global.__STORYBOOK_CLIENTAPI_INSTANCE__?.addStepRunner(stepRunner); }; export const getGlobalRender = () => { checkMethod('getGlobalRender'); - return singleton.facade.projectAnnotations.render; + return global.__STORYBOOK_CLIENTAPI_INSTANCE__?.facade.projectAnnotations.render; }; -export const setGlobalRender = ( - render: typeof singleton['facade']['projectAnnotations']['render'] -) => { +export const setGlobalRender = (render: StoryStoreFacade['projectAnnotations']['render']) => { checkMethod('setGlobalRender'); - singleton.facade.projectAnnotations.render = render; + if (global.__STORYBOOK_CLIENTAPI_INSTANCE__) { + global.__STORYBOOK_CLIENTAPI_INSTANCE__.facade.projectAnnotations.render = render; + } }; const invalidStoryTypes = new Set(['string', 'number', 'boolean', 'symbol']); @@ -133,7 +130,7 @@ export class ClientApi { this.storyStore = storyStore; - singleton = this as any; + global.__STORYBOOK_CLIENTAPI_INSTANCE__ = this; } importFn(path: Path) { @@ -213,7 +210,6 @@ export class ClientApi { _addedExports = {} as Record; _loadAddedExports() { - // eslint-disable-next-line no-underscore-dangle Object.entries(this._addedExports).forEach(([fileName, fileExports]) => this.facade.addStoriesFromExports(fileName, fileExports) ); @@ -247,7 +243,7 @@ export class ClientApi { let i = 1; // Deal with `storiesOf()` being called twice in the same file. // On HMR, we clear _addedExports[fileName] below. - // eslint-disable-next-line no-underscore-dangle + while (this._addedExports[fileName]) { i += 1; fileName = `${baseFilename}-${i}`; @@ -259,7 +255,7 @@ export class ClientApi { m.hot.accept(); m.hot.dispose(() => { this.facade.clearFilenameExports(fileName); - // eslint-disable-next-line no-underscore-dangle + delete this._addedExports[fileName]; // We need to update the importFn as soon as the module re-evaluates @@ -268,7 +264,6 @@ export class ClientApi { // debounce it somehow for initial startup. Instead, we'll take advantage of // the fact that the evaluation of the module happens immediately in the same tick setTimeout(() => { - // eslint-disable-next-line no-underscore-dangle this._loadAddedExports(); this.onImportFnChanged?.({ importFn: this.importFn.bind(this) }); }, 0); @@ -301,7 +296,7 @@ export class ClientApi { parameters: {}, }; // We map these back to a simple default export, even though we have type guarantees at this point - // eslint-disable-next-line no-underscore-dangle + this._addedExports[fileName] = { default: meta }; let counter = 0; @@ -320,10 +315,8 @@ export class ClientApi { const { decorators, loaders, component, args, argTypes, ...storyParameters } = parameters; - // eslint-disable-next-line no-underscore-dangle const storyId = parameters.__id || toId(kind, storyName); - // eslint-disable-next-line no-underscore-dangle const csfExports = this._addedExports[fileName]; // Whack a _ on the front incase it is "default" csfExports[`story${counter}`] = { diff --git a/code/lib/preview-api/src/modules/client-api/typings.d.ts b/code/lib/preview-api/src/modules/client-api/typings.d.ts deleted file mode 100644 index 2f4eb9cf4fd9..000000000000 --- a/code/lib/preview-api/src/modules/client-api/typings.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module 'global'; diff --git a/code/lib/preview-api/src/modules/core-client/start.ts b/code/lib/preview-api/src/modules/core-client/start.ts index bdfb5698ae3f..9aa2b6d65050 100644 --- a/code/lib/preview-api/src/modules/core-client/start.ts +++ b/code/lib/preview-api/src/modules/core-client/start.ts @@ -1,4 +1,4 @@ -/* eslint-disable @typescript-eslint/naming-convention */ +/* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */ import global from 'global'; import type { Renderer, ArgsStoryFn, Path, ProjectAnnotations } from '@storybook/types'; import { createChannel } from '@storybook/channel-postmessage'; @@ -10,12 +10,12 @@ import { ClientApi } from '../../client-api'; import { executeLoadableForChanges } from './executeLoadable'; import type { Loadable } from './executeLoadable'; -const { window: globalWindow, FEATURES } = global; - const removedApi = (name: string) => () => { throw new Error(`@storybook/client-api:${name} was removed in storyStoreV7.`); }; +const { FEATURES } = global; + interface CoreClient_RendererImplementation { decorateStory?: ProjectAnnotations['applyDecorators']; render?: ArgsStoryFn; @@ -41,9 +41,9 @@ export function start( renderToCanvas: ProjectAnnotations['renderToCanvas'], { decorateStory, render }: CoreClient_RendererImplementation = {} ): CoreClient_StartReturnValue { - if (globalWindow) { + if (global.window) { // To enable user code to detect if it is running in Storybook - globalWindow.IS_STORYBOOK = true; + global.IS_STORYBOOK = true; } if (FEATURES?.storyStoreV7) { @@ -60,8 +60,8 @@ export function start( const channel = createChannel({ page: 'preview' }); addons.setChannel(channel); - const clientApi = new ClientApi(); - const preview = new PreviewWeb(); + const clientApi = global.__STORYBOOK_CLIENTAPI_INSTANCE__ || new ClientApi(); + const preview = global.__STORYBOOK_PREVIEWWEB_INSTANCE__ || new PreviewWeb(); let initialized = false; const importFn = (path: Path) => clientApi.importFn(path); @@ -75,12 +75,11 @@ export function start( clientApi.onImportFnChanged = onStoriesChanged; clientApi.storyStore = preview.storyStore; - if (globalWindow) { - globalWindow.__STORYBOOK_CLIENT_API__ = clientApi; - globalWindow.__STORYBOOK_ADDONS_CHANNEL__ = channel; - // eslint-disable-next-line no-underscore-dangle - globalWindow.__STORYBOOK_PREVIEW__ = preview; - globalWindow.__STORYBOOK_STORY_STORE__ = preview.storyStore; + if (global.window) { + global.window.__STORYBOOK_CLIENT_API__ = clientApi; + global.window.__STORYBOOK_ADDONS_CHANNEL__ = channel; + global.window.__STORYBOOK_PREVIEW__ = preview; + global.window.__STORYBOOK_STORY_STORE__ = preview.storyStore; } return { @@ -105,7 +104,6 @@ export function start( // function in case it throws. So we also need to process its output there also const getProjectAnnotations = () => { const { added, removed } = executeLoadableForChanges(loadable, m); - // eslint-disable-next-line no-underscore-dangle clientApi._loadAddedExports(); Array.from(added.entries()).forEach(([fileName, fileExports]) => diff --git a/code/lib/preview-api/src/modules/core-client/typings.d.ts b/code/lib/preview-api/src/modules/core-client/typings.d.ts deleted file mode 100644 index 8353021fb03d..000000000000 --- a/code/lib/preview-api/src/modules/core-client/typings.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -declare module 'global'; -declare module 'lazy-universal-dotenv'; -declare module 'pnp-webpack-plugin'; -declare module '@storybook/manager/paths'; -declare module 'better-opn'; -declare module 'open'; -declare module '@aw-web-design/x-default-browser'; diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx index c2d7b7930bdc..96c5fa7fa4e2 100644 --- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx +++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx @@ -174,7 +174,9 @@ export class Preview { async getStoryIndexFromServer() { const result = await fetch(STORY_INDEX_PATH); - if (result.status === 200) return result.json() as StoryIndex; + if (result.status === 200) { + return result.json() as any as StoryIndex; + } throw new Error(await result.text()); } diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.tsx index a1ed45f445c9..313effc49134 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.tsx +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.tsx @@ -1,3 +1,5 @@ +/* eslint-disable no-underscore-dangle */ +import global from 'global'; import type { Renderer } from '@storybook/types'; import { PreviewWithSelection } from './PreviewWithSelection'; @@ -7,5 +9,7 @@ import { WebView } from './WebView'; export class PreviewWeb extends PreviewWithSelection { constructor() { super(new UrlStore(), new WebView()); + + global.__STORYBOOK_PREVIEWWEB_INSTANCE__ = this; } } diff --git a/code/lib/preview-api/src/modules/preview-web/typings.d.ts b/code/lib/preview-api/src/modules/preview-web/typings.d.ts deleted file mode 100644 index 08f7a767bfef..000000000000 --- a/code/lib/preview-api/src/modules/preview-web/typings.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -declare module 'global'; - -declare module 'ansi-to-html'; -declare class AnsiToHtml { - constructor(options: { escapeHtml: boolean }); - - toHtml: (ansi: string) => string; -} diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts index b23183110dc1..5aab8a88ef92 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts @@ -150,6 +150,7 @@ export function prepareStory( ); // Add some of our metadata into parameters as we used to do this in 6.x and users may be relying on it + if (!global.FEATURES?.breakingChangesV7) { contextForEnhancers.parameters = { ...contextForEnhancers.parameters, diff --git a/code/lib/preview-api/src/modules/store/typings.d.ts b/code/lib/preview-api/src/modules/store/typings.d.ts deleted file mode 100644 index 2f4eb9cf4fd9..000000000000 --- a/code/lib/preview-api/src/modules/store/typings.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module 'global'; diff --git a/code/lib/preview-api/src/typings.d.ts b/code/lib/preview-api/src/typings.d.ts new file mode 100644 index 000000000000..c698a6a823b7 --- /dev/null +++ b/code/lib/preview-api/src/typings.d.ts @@ -0,0 +1,41 @@ +/* eslint-disable no-underscore-dangle */ +/* eslint-disable @typescript-eslint/naming-convention */ +declare module 'lazy-universal-dotenv'; +declare module 'pnp-webpack-plugin'; +declare module '@storybook/manager/paths'; +declare module 'better-opn'; +declare module 'open'; +declare module '@aw-web-design/x-default-browser'; + +type Features = { + storyStoreV7?: boolean; + breakingChangesV7?: boolean; + argTypeTargetsV7?: boolean; +}; + +var FEATURES: Features | undefined; + +// ClientApi (and StoreStore) are really singletons. However they are not created until the +// relevant framework instantiates them via `start.js`. The good news is this happens right away. +var __STORYBOOK_CLIENTAPI_INSTANCE__: import('./modules/client-api/ClientApi').ClientApi; +var __STORYBOOK_PREVIEWWEB_INSTANCE__: import('./modules/preview-web/PreviewWeb').PreviewWeb; + +// To enable user code to detect if it is running in Storybook +var IS_STORYBOOK: boolean; + +var __STORYBOOK_CLIENT_API__: any; +var __STORYBOOK_ADDONS_CHANNEL__: any; +var __STORYBOOK_PREVIEW__: any; +var __STORYBOOK_STORY_STORE__: any; +var __STORYBOOK_ADDONS_PREVIEW: any; + +declare module 'global' { + export default globalThis; +} + +declare module 'ansi-to-html'; +declare class AnsiToHtml { + constructor(options: { escapeHtml: boolean }); + + toHtml: (ansi: string) => string; +} diff --git a/code/lib/router/src/typings.d.ts b/code/lib/router/src/typings.d.ts index 556e4042c702..4748265af4d5 100644 --- a/code/lib/router/src/typings.d.ts +++ b/code/lib/router/src/typings.d.ts @@ -1,2 +1,3 @@ -// todo the following packages need definition files or a TS migration -declare module 'global'; +declare module 'global' { + export default globalThis; +} diff --git a/code/lib/theming/src/typings.d.ts b/code/lib/theming/src/typings.d.ts index ab568e12c7ac..151bb56deda3 100644 --- a/code/lib/theming/src/typings.d.ts +++ b/code/lib/theming/src/typings.d.ts @@ -1,3 +1,2 @@ // todo the following packages need definition files or a TS migration declare module 'react-inspector'; -declare module 'global'; diff --git a/code/lib/types/src/typings.d.ts b/code/lib/types/src/typings.d.ts index 2f4eb9cf4fd9..4748265af4d5 100644 --- a/code/lib/types/src/typings.d.ts +++ b/code/lib/types/src/typings.d.ts @@ -1 +1,3 @@ -declare module 'global'; +declare module 'global' { + export default globalThis; +} diff --git a/code/presets/react-webpack/src/typings.d.ts b/code/presets/react-webpack/src/typings.d.ts index ce0c26f59d0a..2c82a91afe5e 100644 --- a/code/presets/react-webpack/src/typings.d.ts +++ b/code/presets/react-webpack/src/typings.d.ts @@ -1,4 +1,6 @@ -declare module 'global'; +declare module 'global' { + export default globalThis; +} // TODO: Replace, as soon as @types/react-dom 17.0.14 is used // Source: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/fb0f14b7a35cde26ffaa82e7536c062e593e9ae6/types/react-dom/client.d.ts diff --git a/code/presets/server-webpack/src/typings.d.ts b/code/presets/server-webpack/src/typings.d.ts index d8f7c6f660ad..eddff6bbb3ab 100644 --- a/code/presets/server-webpack/src/typings.d.ts +++ b/code/presets/server-webpack/src/typings.d.ts @@ -1,4 +1,6 @@ -declare module 'global'; +declare module 'global' { + export default globalThis; +} // will be provided by the webpack define plugin declare var NODE_ENV: string | undefined; diff --git a/code/presets/vue3-webpack/src/typings.d.ts b/code/presets/vue3-webpack/src/typings.d.ts index 3229acac0222..7f0d82120c96 100644 --- a/code/presets/vue3-webpack/src/typings.d.ts +++ b/code/presets/vue3-webpack/src/typings.d.ts @@ -1,4 +1,6 @@ -declare module 'global'; +declare module 'global' { + export default globalThis; +} declare module 'vue-loader' { export const VueLoaderPlugin: any; diff --git a/code/renderers/svelte/src/typings.d.ts b/code/renderers/svelte/src/typings.d.ts index 2f4eb9cf4fd9..4748265af4d5 100644 --- a/code/renderers/svelte/src/typings.d.ts +++ b/code/renderers/svelte/src/typings.d.ts @@ -1 +1,3 @@ -declare module 'global'; +declare module 'global' { + export default globalThis; +} diff --git a/code/renderers/web-components/src/typings.d.ts b/code/renderers/web-components/src/typings.d.ts index 2f4eb9cf4fd9..4748265af4d5 100644 --- a/code/renderers/web-components/src/typings.d.ts +++ b/code/renderers/web-components/src/typings.d.ts @@ -1 +1,3 @@ -declare module 'global'; +declare module 'global' { + export default globalThis; +} diff --git a/code/ui/blocks/src/typings.d.ts b/code/ui/blocks/src/typings.d.ts index 22352f1c3419..b91f9ebe6f52 100644 --- a/code/ui/blocks/src/typings.d.ts +++ b/code/ui/blocks/src/typings.d.ts @@ -1,3 +1,6 @@ -declare module 'global'; declare module 'markdown-to-jsx'; declare module '*.md'; + +declare module 'global' { + export default globalThis; +} diff --git a/code/ui/components/src/typings.d.ts b/code/ui/components/src/typings.d.ts index 68610ec76e0a..78f750cebdde 100644 --- a/code/ui/components/src/typings.d.ts +++ b/code/ui/components/src/typings.d.ts @@ -1,4 +1,3 @@ -declare module 'global'; declare module 'markdown-to-jsx'; declare module '*.md'; declare module '*.mdx'; diff --git a/code/ui/manager/src/settings/typings.d.ts b/code/ui/manager/src/settings/typings.d.ts index e388e48d9c30..71d273d5acf7 100644 --- a/code/ui/manager/src/settings/typings.d.ts +++ b/code/ui/manager/src/settings/typings.d.ts @@ -1,2 +1,5 @@ -declare module 'global'; declare module '@storybook/components/src/treeview/utils'; + +declare module 'global' { + export default globalThis; +} diff --git a/code/ui/manager/src/typings.d.ts b/code/ui/manager/src/typings.d.ts index 8666686fa2ae..468ba60c0cf5 100644 --- a/code/ui/manager/src/typings.d.ts +++ b/code/ui/manager/src/typings.d.ts @@ -1,2 +1,5 @@ -declare module 'global'; declare module 'chromatic/isChromatic'; + +declare module 'global' { + export default globalThis; +} From 42bf76e2f7b054d39efe50fc2dd747046380e2e5 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 9 Dec 2022 16:38:54 +0100 Subject: [PATCH 06/26] add "dom.iterable" and use global as window --- code/lib/channel-postmessage/src/index.ts | 18 +++++++++--------- code/lib/channel-postmessage/tsconfig.json | 3 --- code/tsconfig.json | 2 +- 3 files changed, 10 insertions(+), 13 deletions(-) diff --git a/code/lib/channel-postmessage/src/index.ts b/code/lib/channel-postmessage/src/index.ts index 1666e7c274be..e403de199149 100644 --- a/code/lib/channel-postmessage/src/index.ts +++ b/code/lib/channel-postmessage/src/index.ts @@ -6,7 +6,7 @@ import { logger, pretty } from '@storybook/client-logger'; import { isJSON, parse, stringify } from 'telejson'; import qs from 'qs'; -const { window: globalWindow, document, location } = global; +const { document, location } = global; interface Config { page: 'manager' | 'preview'; @@ -36,8 +36,8 @@ export class PostmsgTransport { constructor(private readonly config: Config) { this.buffer = []; this.handler = null; - if (globalWindow) { - globalWindow.addEventListener('message', this.handleEvent.bind(this), false); + if (global) { + global.addEventListener('message', this.handleEvent.bind(this), false); } // Check whether the config.page parameter has a valid value @@ -157,8 +157,8 @@ export class PostmsgTransport { return list.length ? list : this.getCurrentFrames(); } - if (globalWindow && globalWindow.parent && globalWindow.parent !== globalWindow) { - return [globalWindow.parent]; + if (global && global.parent && global.parent !== global.self) { + return [global.parent]; } return []; @@ -171,8 +171,8 @@ export class PostmsgTransport { ); return list.map((e) => e.contentWindow); } - if (globalWindow && globalWindow.parent) { - return [globalWindow.parent]; + if (global && global.parent) { + return [global.parent]; } return []; @@ -185,8 +185,8 @@ export class PostmsgTransport { ); return list.map((e) => e.contentWindow); } - if (globalWindow && globalWindow.parent) { - return [globalWindow.parent]; + if (global && global.parent) { + return [global.parent]; } return []; diff --git a/code/lib/channel-postmessage/tsconfig.json b/code/lib/channel-postmessage/tsconfig.json index dec167c02d5f..52d43eaaa9b9 100644 --- a/code/lib/channel-postmessage/tsconfig.json +++ b/code/lib/channel-postmessage/tsconfig.json @@ -1,7 +1,4 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "lib": ["dom", "dom.iterable"] - }, "include": ["src/**/*"] } diff --git a/code/tsconfig.json b/code/tsconfig.json index 4dbd32b042c3..48e4547af69b 100644 --- a/code/tsconfig.json +++ b/code/tsconfig.json @@ -14,7 +14,7 @@ "esModuleInterop": true, "isolatedModules": true, "strictBindCallApply": true, - "lib": ["dom", "esnext"], + "lib": ["dom", "dom.iterable", "esnext"], "noUnusedLocals": true, "types": ["jest"] }, From 3659babd10a4e67fb87a55ea236babff9716ca70 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 9 Dec 2022 17:10:07 +0100 Subject: [PATCH 07/26] fix all the global typings --- code/addons/a11y/src/a11yRunner.ts | 7 ++++++- code/addons/a11y/src/typings.d.ts | 3 +++ .../storyshots/storyshots-core/src/typings.d.ts | 4 +--- .../ember/src/client/preview/globals.ts | 6 ++---- .../ember/src/client/preview/render.ts | 6 +++--- code/frameworks/ember/src/typings.d.ts | 3 +++ code/lib/core-server/src/typings.d.ts | 2 ++ code/lib/instrumenter/src/instrumenter.ts | 3 +++ code/lib/instrumenter/src/typings.d.ts | 6 ++++++ code/lib/manager-api/src/modules/layout.ts | 4 +++- code/lib/manager-api/src/modules/refs.ts | 11 +++++++++-- code/lib/manager-api/src/modules/shortcuts.ts | 2 +- code/lib/manager-api/src/typings.d.ts | 7 +++++++ code/lib/preview-api/src/typings.d.ts | 3 +++ code/lib/theming/src/typings.d.ts | 4 ++++ code/renderers/svelte/src/typings.d.ts | 2 ++ code/renderers/web-components/src/typings.d.ts | 2 ++ code/ui/blocks/src/blocks/DocsContainer.tsx | 2 +- code/ui/blocks/src/blocks/DocsContext.ts | 12 ++++++------ code/ui/blocks/src/typings.d.ts | 5 +++++ .../src/syntaxhighlighter/syntaxhighlighter.tsx | 4 ++-- code/ui/components/src/typings.d.ts | 4 ++++ code/ui/manager/src/settings/typings.d.ts | 16 ++++++++++++++++ code/ui/manager/src/typings.d.ts | 2 ++ 24 files changed, 96 insertions(+), 24 deletions(-) diff --git a/code/addons/a11y/src/a11yRunner.ts b/code/addons/a11y/src/a11yRunner.ts index 88dd78a64660..6caca5a966f7 100644 --- a/code/addons/a11y/src/a11yRunner.ts +++ b/code/addons/a11y/src/a11yRunner.ts @@ -37,7 +37,12 @@ const run = async (storyId: string) => { const axe = (await import('axe-core')).default; const { element = '#storybook-root', config, options = {} } = input; - const htmlElement = document.querySelector(element); + const htmlElement = document.querySelector(element as string); + + if (!htmlElement) { + return; + } + axe.reset(); if (config) { axe.configure(config); diff --git a/code/addons/a11y/src/typings.d.ts b/code/addons/a11y/src/typings.d.ts index 4748265af4d5..d133af4d0864 100644 --- a/code/addons/a11y/src/typings.d.ts +++ b/code/addons/a11y/src/typings.d.ts @@ -1,3 +1,6 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +declare var __STORYBOOK_STORY_STORE__: any; + declare module 'global' { export default globalThis; } diff --git a/code/addons/storyshots/storyshots-core/src/typings.d.ts b/code/addons/storyshots/storyshots-core/src/typings.d.ts index 38d1910c0221..616c95f38e3a 100644 --- a/code/addons/storyshots/storyshots-core/src/typings.d.ts +++ b/code/addons/storyshots/storyshots-core/src/typings.d.ts @@ -5,6 +5,4 @@ declare module 'rax-test-renderer*'; declare module '@storybook/babel-plugin-require-context-hook/register'; -declare module 'global' { - export default globalThis; -} +declare module 'global'; diff --git a/code/frameworks/ember/src/client/preview/globals.ts b/code/frameworks/ember/src/client/preview/globals.ts index 5bb968d5c148..65a7ed9531e8 100644 --- a/code/frameworks/ember/src/client/preview/globals.ts +++ b/code/frameworks/ember/src/client/preview/globals.ts @@ -1,6 +1,4 @@ import global from 'global'; -const { window: globalWindow } = global; - -globalWindow.STORYBOOK_NAME = process.env.STORYBOOK_NAME; -globalWindow.STORYBOOK_ENV = 'ember'; +global.STORYBOOK_NAME = process.env.STORYBOOK_NAME; +global.STORYBOOK_ENV = 'ember'; diff --git a/code/frameworks/ember/src/client/preview/render.ts b/code/frameworks/ember/src/client/preview/render.ts index 9c9a61d96933..7ff7965bfa1b 100644 --- a/code/frameworks/ember/src/client/preview/render.ts +++ b/code/frameworks/ember/src/client/preview/render.ts @@ -5,12 +5,12 @@ import type { RenderContext } from '@storybook/types'; import Component from '@ember/component'; // eslint-disable-line import/no-unresolved import type { OptionsArgs, EmberRenderer } from './types'; -const { window: globalWindow, document } = global; +const { document } = global; const rootEl = document.getElementById('storybook-root'); -const config = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/config/environment`); -const app = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/app`).default.create({ +const config = global.require(`${global.STORYBOOK_NAME}/config/environment`); +const app = global.require(`${global.STORYBOOK_NAME}/app`).default.create({ autoboot: false, rootElement: rootEl, ...config.APP, diff --git a/code/frameworks/ember/src/typings.d.ts b/code/frameworks/ember/src/typings.d.ts index 6dcfba238c39..264e39613ed1 100644 --- a/code/frameworks/ember/src/typings.d.ts +++ b/code/frameworks/ember/src/typings.d.ts @@ -1,5 +1,8 @@ declare module 'ember-source/dist/ember-template-compiler'; +declare var STORYBOOK_ENV: 'ember'; +declare var STORYBOOK_NAME: any; + declare module 'global' { export default globalThis; } diff --git a/code/lib/core-server/src/typings.d.ts b/code/lib/core-server/src/typings.d.ts index b3e6a40836c0..0c3652576a53 100644 --- a/code/lib/core-server/src/typings.d.ts +++ b/code/lib/core-server/src/typings.d.ts @@ -9,6 +9,8 @@ declare module '@storybook/manager'; declare module '@discoveryjs/json-ext'; declare module 'watchpack'; +declare var FEATURES: any; + declare module 'global' { export default globalThis; } diff --git a/code/lib/instrumenter/src/instrumenter.ts b/code/lib/instrumenter/src/instrumenter.ts index c29b1a6fbd9b..5c3ef0f54380 100644 --- a/code/lib/instrumenter/src/instrumenter.ts +++ b/code/lib/instrumenter/src/instrumenter.ts @@ -101,6 +101,7 @@ export class Instrumenter { this.channel = addons.getChannel(); // Restore state from the parent window in case the iframe was reloaded. + // @ts-expect-error (TS doesn't know about this global variable) this.state = global.window.parent.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ || {}; // When called from `start`, isDebugging will be true. @@ -241,6 +242,7 @@ export class Instrumenter { const patch = typeof update === 'function' ? update(state) : update; this.state = { ...this.state, [storyId]: { ...state, ...patch } }; // Track state on the parent window so we can reload the iframe without losing state. + // @ts-expect-error (TS doesn't know about this global variable) global.window.parent.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ = this.state; } @@ -254,6 +256,7 @@ export class Instrumenter { }, {} as Record); const payload: SyncPayload = { controlStates: controlsDisabled, logItems: [] }; this.channel.emit(EVENTS.SYNC, payload); + // @ts-expect-error (TS doesn't know about this global variable) global.window.parent.__STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__ = this.state; } diff --git a/code/lib/instrumenter/src/typings.d.ts b/code/lib/instrumenter/src/typings.d.ts index 4748265af4d5..88fc2f4f5000 100644 --- a/code/lib/instrumenter/src/typings.d.ts +++ b/code/lib/instrumenter/src/typings.d.ts @@ -1,3 +1,9 @@ +/* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */ +declare var FEATURES: any; +declare var __STORYBOOK_PREVIEW__: any; +declare var __STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__: any; +declare var __STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER__: any; + declare module 'global' { export default globalThis; } diff --git a/code/lib/manager-api/src/modules/layout.ts b/code/lib/manager-api/src/modules/layout.ts index 1f33ebe2c3c0..12da99d96181 100644 --- a/code/lib/manager-api/src/modules/layout.ts +++ b/code/lib/manager-api/src/modules/layout.ts @@ -184,7 +184,9 @@ export const init: ModuleFn = ({ store, provider, singleStory, fullAPI }) => { const element = document.getElementById(elementId); if (element) { element.focus(); - if (select) element.select(); + if (select) { + (element as any).select(); + } } }, diff --git a/code/lib/manager-api/src/modules/refs.ts b/code/lib/manager-api/src/modules/refs.ts index 39a525c5683c..56f471b9483f 100644 --- a/code/lib/manager-api/src/modules/refs.ts +++ b/code/lib/manager-api/src/modules/refs.ts @@ -62,12 +62,19 @@ const addRefIds = (input: API_StoriesHash, ref: API_ComposedRef): API_StoriesHas }, {} as API_StoriesHash); }; -async function handleRequest(request: Response | false): Promise { +async function handleRequest( + request: Response | Promise | boolean +): Promise { if (!request) return {}; try { const response = await request; - if (!response.ok) return {}; + if (response === false || response === true) { + return {}; + } + if (!response.ok) { + return {}; + } const json = await response.json(); diff --git a/code/lib/manager-api/src/modules/shortcuts.ts b/code/lib/manager-api/src/modules/shortcuts.ts index 94007b27adfe..7266a8a290a1 100644 --- a/code/lib/manager-api/src/modules/shortcuts.ts +++ b/code/lib/manager-api/src/modules/shortcuts.ts @@ -217,7 +217,7 @@ export const init: ModuleFn = ({ store, fullAPI }) => { } case 'focusIframe': { - const element = document.getElementById('storybook-preview-iframe'); + const element = document.getElementById('storybook-preview-iframe') as HTMLIFrameElement; if (element) { try { diff --git a/code/lib/manager-api/src/typings.d.ts b/code/lib/manager-api/src/typings.d.ts index 4748265af4d5..3db06703ba90 100644 --- a/code/lib/manager-api/src/typings.d.ts +++ b/code/lib/manager-api/src/typings.d.ts @@ -1,3 +1,10 @@ +/* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */ +declare var RELEASE_NOTES_DATA: any; +declare var __STORYBOOK_ADDONS_MANAGER: any; +declare var FEATURES: { storyStoreV7?: boolean } | undefined; +declare var REFS: any; +declare var VERSIONCHECK: any; + declare module 'global' { export default globalThis; } diff --git a/code/lib/preview-api/src/typings.d.ts b/code/lib/preview-api/src/typings.d.ts index c698a6a823b7..a772e5d9a51d 100644 --- a/code/lib/preview-api/src/typings.d.ts +++ b/code/lib/preview-api/src/typings.d.ts @@ -14,6 +14,8 @@ type Features = { }; var FEATURES: Features | undefined; +var STORIES: any; +var DOCS_OPTIONS: any; // ClientApi (and StoreStore) are really singletons. However they are not created until the // relevant framework instantiates them via `start.js`. The good news is this happens right away. @@ -28,6 +30,7 @@ var __STORYBOOK_ADDONS_CHANNEL__: any; var __STORYBOOK_PREVIEW__: any; var __STORYBOOK_STORY_STORE__: any; var __STORYBOOK_ADDONS_PREVIEW: any; +var STORYBOOK_HOOKS_CONTEXT: any; declare module 'global' { export default globalThis; diff --git a/code/lib/theming/src/typings.d.ts b/code/lib/theming/src/typings.d.ts index 151bb56deda3..433b49ce5005 100644 --- a/code/lib/theming/src/typings.d.ts +++ b/code/lib/theming/src/typings.d.ts @@ -1,2 +1,6 @@ // todo the following packages need definition files or a TS migration declare module 'react-inspector'; + +declare module 'global' { + export default globalThis; +} diff --git a/code/renderers/svelte/src/typings.d.ts b/code/renderers/svelte/src/typings.d.ts index 4748265af4d5..4e401156f1ea 100644 --- a/code/renderers/svelte/src/typings.d.ts +++ b/code/renderers/svelte/src/typings.d.ts @@ -1,3 +1,5 @@ +declare var STORYBOOK_ENV: 'svelte'; + declare module 'global' { export default globalThis; } diff --git a/code/renderers/web-components/src/typings.d.ts b/code/renderers/web-components/src/typings.d.ts index 4748265af4d5..eaddf16ae8ec 100644 --- a/code/renderers/web-components/src/typings.d.ts +++ b/code/renderers/web-components/src/typings.d.ts @@ -1,3 +1,5 @@ +declare var STORYBOOK_ENV: 'web-components'; + declare module 'global' { export default globalThis; } diff --git a/code/ui/blocks/src/blocks/DocsContainer.tsx b/code/ui/blocks/src/blocks/DocsContainer.tsx index f80dc3e42dd4..377f6946e786 100644 --- a/code/ui/blocks/src/blocks/DocsContainer.tsx +++ b/code/ui/blocks/src/blocks/DocsContainer.tsx @@ -26,7 +26,7 @@ export const DocsContainer: FunctionComponent = ({ useEffect(() => { let url; try { - url = new URL(globalWindow.parent.location); + url = new URL(globalWindow.parent.location.toString()); if (url.hash) { const element = document.getElementById(url.hash.substring(1)); if (element) { diff --git a/code/ui/blocks/src/blocks/DocsContext.ts b/code/ui/blocks/src/blocks/DocsContext.ts index 17069f1727da..30a21fa90226 100644 --- a/code/ui/blocks/src/blocks/DocsContext.ts +++ b/code/ui/blocks/src/blocks/DocsContext.ts @@ -1,7 +1,7 @@ /* eslint-disable no-underscore-dangle */ import type { Context } from 'react'; import { createContext } from 'react'; -import { window as globalWindow } from 'global'; +import global from 'global'; import type { DocsContextProps, Renderer } from '@storybook/types'; @@ -12,11 +12,11 @@ export type { DocsContextProps }; // 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 (globalWindow && globalWindow.__DOCS_CONTEXT__ === undefined) { - globalWindow.__DOCS_CONTEXT__ = createContext(null); - globalWindow.__DOCS_CONTEXT__.displayName = 'DocsContext'; +if (global && global.__DOCS_CONTEXT__ === undefined) { + global.__DOCS_CONTEXT__ = createContext(null); + global.__DOCS_CONTEXT__.displayName = 'DocsContext'; } -export const DocsContext: Context> = globalWindow - ? globalWindow.__DOCS_CONTEXT__ +export const DocsContext: Context> = global + ? global.__DOCS_CONTEXT__ : createContext(null); diff --git a/code/ui/blocks/src/typings.d.ts b/code/ui/blocks/src/typings.d.ts index b91f9ebe6f52..96364c823bea 100644 --- a/code/ui/blocks/src/typings.d.ts +++ b/code/ui/blocks/src/typings.d.ts @@ -1,6 +1,11 @@ +/* eslint-disable no-underscore-dangle */ +/* eslint-disable @typescript-eslint/naming-convention */ declare module 'markdown-to-jsx'; declare module '*.md'; +declare var __DOCS_CONTEXT__: any; +declare var PREVIEW_URL: any; + declare module 'global' { export default globalThis; } diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx index 4d29727d340b..f8dce9b18f5c 100644 --- a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx +++ b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx @@ -56,8 +56,8 @@ export function createCopyToClipboardFunction() { return (text: string) => navigator.clipboard.writeText(text); } return async (text: string) => { - const tmp = document.createElement('TEXTAREA'); - const focus = document.activeElement; + const tmp = document.createElement('TEXTAREA') as HTMLTextAreaElement; + const focus = document.activeElement as HTMLTextAreaElement; tmp.value = text; diff --git a/code/ui/components/src/typings.d.ts b/code/ui/components/src/typings.d.ts index 78f750cebdde..b4914ea849fa 100644 --- a/code/ui/components/src/typings.d.ts +++ b/code/ui/components/src/typings.d.ts @@ -1,3 +1,7 @@ declare module 'markdown-to-jsx'; declare module '*.md'; declare module '*.mdx'; + +declare module 'global' { + export default globalThis; +} diff --git a/code/ui/manager/src/settings/typings.d.ts b/code/ui/manager/src/settings/typings.d.ts index 71d273d5acf7..925f7ef2b612 100644 --- a/code/ui/manager/src/settings/typings.d.ts +++ b/code/ui/manager/src/settings/typings.d.ts @@ -1,5 +1,21 @@ +/* eslint-disable no-underscore-dangle */ +/* eslint-disable @typescript-eslint/naming-convention */ declare module '@storybook/components/src/treeview/utils'; +declare var FEATURES: any; +declare var SERVER_CHANNEL_URL: any; + +declare var __REACT__: any; +declare var __REACTDOM__: any; +declare var __STORYBOOKCOMPONENTS__: any; +declare var __STORYBOOKCHANNELS__: any; +declare var __STORYBOOKCOREEVENTS__: any; +declare var __STORYBOOKROUTER__: any; +declare var __STORYBOOKTHEMING__: any; +declare var __STORYBOOKAPI__: any; +declare var __STORYBOOKADDONS__: any; +declare var __STORYBOOKCLIENTLOGGER__: any; + declare module 'global' { export default globalThis; } diff --git a/code/ui/manager/src/typings.d.ts b/code/ui/manager/src/typings.d.ts index 468ba60c0cf5..897d8e60c1d1 100644 --- a/code/ui/manager/src/typings.d.ts +++ b/code/ui/manager/src/typings.d.ts @@ -1,5 +1,7 @@ declare module 'chromatic/isChromatic'; +declare var DOCS_OPTIONS: any; + declare module 'global' { export default globalThis; } From e5b664857cb7a14160c1c560623835a91f10244f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 9 Dec 2022 17:42:05 +0100 Subject: [PATCH 08/26] fix start test --- .../src/modules/core-client/start.test.ts | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/code/lib/preview-api/src/modules/core-client/start.test.ts b/code/lib/preview-api/src/modules/core-client/start.test.ts index 96158c8e92a4..8b87a1fd40d2 100644 --- a/code/lib/preview-api/src/modules/core-client/start.test.ts +++ b/code/lib/preview-api/src/modules/core-client/start.test.ts @@ -1,8 +1,10 @@ +/* eslint-disable no-underscore-dangle */ /** * @jest-environment jsdom */ /* global window */ +// import { describe, it, beforeAll, beforeEach, afterAll, afterEach, jest } from '@jest/globals'; import { STORY_RENDERED, STORY_UNCHANGED, SET_INDEX } from '@storybook/core-events'; import type { ModuleExports, Path } from '@storybook/types'; @@ -20,7 +22,9 @@ import { start as realStart } from './start'; import type { Loadable } from './executeLoadable'; jest.mock('global', () => ({ - ...jest.requireActual('global'), + ...globalThis, + // ...jest.requireActual('global'), + window: globalThis, history: { replaceState: jest.fn() }, document: { location: { @@ -36,6 +40,8 @@ jest.mock('global', () => ({ }, })); +// console.log(global); + jest.mock('@storybook/channel-postmessage', () => ({ createChannel: () => mockChannel })); jest.mock('react-dom'); @@ -106,6 +112,12 @@ function makeRequireContext(importMap: Record) { describe('start', () => { beforeEach(() => { global.DOCS_OPTIONS = { enabled: false }; + // @ts-expect-error (setting this to undefined is indeed what we want to do) + global.__STORYBOOK_CLIENTAPI_INSTANCE__ = undefined; + // @ts-expect-error (setting this to undefined is indeed what we want to do) + global.__STORYBOOK_PREVIEWWEB_INSTANCE__ = undefined; + // @ts-expect-error (setting this to undefined is indeed what we want to do) + global.IS_STORYBOOK = undefined; }); describe('when configure is called with storiesOf only', () => { it('loads and renders the first story correctly', async () => { @@ -325,7 +337,7 @@ describe('start', () => { 'story-root' ); - expect((window as any).IS_STORYBOOK).toBe(true); + expect(global.IS_STORYBOOK).toBe(true); }); it('supports forceRerender()', async () => { From f5260920ca318ec9b87cb710835b3448ba382090 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 9 Dec 2022 20:44:55 +0100 Subject: [PATCH 09/26] fixing typings issues --- code/addons/a11y/package.json | 2 +- code/addons/a11y/src/a11yRunner.ts | 2 +- code/addons/a11y/src/typings.d.ts | 4 - code/addons/actions/package.json | 2 +- code/addons/actions/src/decorator.ts | 2 +- code/addons/actions/src/typings.d.ts | 3 - code/addons/backgrounds/package.json | 2 +- code/addons/backgrounds/src/helpers/index.ts | 2 +- code/addons/backgrounds/src/typings.d.ts | 3 - code/addons/controls/package.json | 1 - code/addons/docs/package.json | 2 +- code/addons/docs/src/typings.d.ts | 3 - code/addons/highlight/package.json | 4 +- code/addons/highlight/src/preview.ts | 2 +- code/addons/highlight/src/typings.d.ts | 3 - code/addons/interactions/package.json | 2 +- code/addons/interactions/src/Panel.tsx | 2 +- code/addons/interactions/src/typings.d.ts | 3 - code/addons/jest/package.json | 2 +- code/addons/jest/src/typings.d.ts | 3 - code/addons/links/package.json | 2 +- .../links/src/react/components/link.test.tsx | 2 +- code/addons/links/src/typings.d.ts | 3 - code/addons/links/src/utils.test.ts | 2 +- code/addons/links/src/utils.ts | 2 +- code/addons/measure/package.json | 4 +- code/addons/measure/src/box-model/canvas.ts | 2 +- .../measure/src/box-model/visualizer.ts | 2 +- code/addons/measure/src/typings.d.ts | 4 - code/addons/measure/src/util.ts | 6 +- code/addons/outline/package.json | 2 +- code/addons/outline/src/helpers.ts | 5 +- code/addons/outline/src/typings.d.ts | 3 - .../storyshots/storyshots-core/package.json | 2 +- .../storyshots-core/src/api/index.ts | 3 +- .../src/api/integrityTestTemplate.ts | 2 +- .../src/api/snapshotsTestsTemplate.ts | 2 +- .../src/frameworks/configure.ts | 2 +- .../src/frameworks/html/loader.ts | 2 +- .../src/frameworks/html/renderTree.ts | 2 +- .../src/frameworks/preact/loader.ts | 2 +- .../src/frameworks/rax/loader.ts | 2 +- .../src/frameworks/riot/loader.ts | 2 +- .../src/frameworks/riot/renderTree.ts | 2 +- .../src/frameworks/svelte/loader.ts | 2 +- .../src/frameworks/svelte/renderTree.ts | 2 +- .../src/frameworks/vue/loader.ts | 2 +- .../src/frameworks/vue3/loader.ts | 2 +- .../src/frameworks/vue3/renderTree.ts | 2 +- .../src/frameworks/web-components/loader.ts | 2 +- .../storyshots-core/src/typings.d.ts | 8 +- code/addons/viewport/package.json | 2 +- code/frameworks/angular/package.json | 2 +- .../angular/src/client/angular/helpers.ts | 2 +- code/frameworks/angular/src/client/globals.ts | 2 +- code/frameworks/angular/src/typings.d.ts | 4 - .../angular/template/components/index.js | 4 +- code/frameworks/ember/package.json | 2 +- .../ember/src/client/preview/globals.ts | 2 +- .../ember/src/client/preview/render.ts | 2 +- code/frameworks/ember/src/typings.d.ts | 4 - code/frameworks/html-webpack5/package.json | 4 +- .../frameworks/html-webpack5/src/typings.d.ts | 4 - .../preact-webpack5/src/typings.d.ts | 3 - .../react-webpack5/src/typings.d.ts | 4 - .../svelte-webpack5/src/typings.d.ts | 4 - code/frameworks/vue-webpack5/src/typings.d.ts | 4 - .../frameworks/vue3-webpack5/src/typings.d.ts | 4 - .../web-components-webpack5/src/typings.d.ts | 4 - code/lib/builder-vite/src/optimizeDeps.ts | 1 + code/lib/builder-webpack5/package.json | 2 +- .../src/preview/iframe-webpack.config.ts | 3 + .../virtualModuleModernEntry.js.handlebars | 2 +- code/lib/builder-webpack5/typings.d.ts | 4 - code/lib/channel-postmessage/package.json | 2 +- code/lib/channel-postmessage/src/index.ts | 2 +- code/lib/channel-postmessage/src/typings.d.ts | 4 - code/lib/channel-websocket/package.json | 2 +- code/lib/channel-websocket/src/index.ts | 2 +- code/lib/channel-websocket/src/typings.d.ts | 4 - code/lib/client-logger/package.json | 2 +- code/lib/client-logger/src/index.test.ts | 2 +- code/lib/client-logger/src/index.ts | 2 +- code/lib/client-logger/src/typings.d.ts | 4 - .../csf-to-mdx/story-function.input.js | 2 +- code/lib/core-server/package.json | 2 +- code/lib/core-server/src/build-dev.ts | 2 +- code/lib/core-server/src/build-static.ts | 2 +- code/lib/core-server/src/typings.d.ts | 4 - code/lib/instrumenter/package.json | 4 +- .../lib/instrumenter/src/instrumenter.test.ts | 2 +- code/lib/instrumenter/src/instrumenter.ts | 2 +- code/lib/instrumenter/src/typings.d.ts | 4 - code/lib/manager-api/package.json | 2 +- code/lib/manager-api/src/lib/addons.ts | 2 +- code/lib/manager-api/src/lib/shortcut.ts | 2 +- code/lib/manager-api/src/modules/layout.ts | 2 +- code/lib/manager-api/src/modules/refs.ts | 2 +- .../manager-api/src/modules/release-notes.ts | 2 +- code/lib/manager-api/src/modules/shortcuts.ts | 2 +- code/lib/manager-api/src/modules/stories.ts | 2 +- code/lib/manager-api/src/modules/url.ts | 2 +- code/lib/manager-api/src/modules/versions.ts | 2 +- code/lib/manager-api/src/tests/events.test.ts | 2 +- code/lib/manager-api/src/tests/refs.test.js | 4 +- .../manager-api/src/tests/shortcut.test.js | 2 +- .../lib/manager-api/src/tests/stories.test.ts | 6 +- .../manager-api/src/tests/versions.test.js | 2 +- code/lib/manager-api/src/typings.d.ts | 4 - code/lib/preview-api/package.json | 2 +- code/lib/preview-api/src/addons.ts | 3 + code/lib/preview-api/src/client-api.ts | 3 + code/lib/preview-api/src/core-client.ts | 3 + code/lib/preview-api/src/index.ts | 3 + .../preview-api/src/modules/addons/hooks.ts | 2 +- .../preview-api/src/modules/addons/main.ts | 2 +- .../src/modules/client-api/ClientApi.ts | 5 +- .../modules/client-api/StoryStoreFacade.ts | 2 +- .../src/modules/client-api/queryparams.ts | 2 +- .../src/modules/core-client/start.test.ts | 5 +- .../src/modules/core-client/start.ts | 2 +- .../src/modules/preview-web/Preview.tsx | 2 +- .../PreviewWeb.integration.test.ts | 10 +-- .../modules/preview-web/PreviewWeb.test.ts | 6 +- .../src/modules/preview-web/PreviewWeb.tsx | 2 +- .../preview-web/PreviewWithSelection.tsx | 2 +- .../src/modules/preview-web/UrlStore.test.ts | 4 +- .../src/modules/preview-web/UrlStore.ts | 2 +- .../src/modules/preview-web/WebView.ts | 14 ++-- .../preview-web/simulate-pageload.test.ts | 2 +- .../modules/preview-web/simulate-pageload.ts | 2 +- .../src/modules/store/StoryStore.test.ts | 10 +-- .../modules/store/csf/prepareStory.test.ts | 6 +- .../src/modules/store/csf/prepareStory.ts | 2 +- code/lib/preview-api/src/preview-web.ts | 3 + code/lib/preview-api/src/store.ts | 3 + code/lib/preview-api/src/typings.d.ts | 4 - code/lib/router/package.json | 2 +- code/lib/router/src/router.tsx | 2 +- code/lib/router/src/typings.d.ts | 3 - code/lib/theming/package.json | 2 +- code/lib/theming/src/tests/util.test.js | 4 +- code/lib/theming/src/typings.d.ts | 4 - code/lib/theming/src/utils.ts | 2 +- code/lib/types/src/typings.d.ts | 3 - code/package.json | 2 +- code/presets/react-webpack/src/typings.d.ts | 4 - code/presets/server-webpack/package.json | 2 +- code/presets/server-webpack/src/typings.d.ts | 4 - code/presets/vue3-webpack/src/typings.d.ts | 4 - code/renderers/html/package.json | 2 +- code/renderers/html/src/globals.ts | 4 +- code/renderers/html/src/render.ts | 3 +- code/renderers/html/src/typings.d.ts | 1 + .../html/template/components/index.js | 2 +- code/renderers/preact/package.json | 2 +- code/renderers/preact/src/globals.ts | 3 +- code/renderers/preact/src/typings.d.ts | 1 + .../preact/template/components/index.js | 2 +- code/renderers/react/package.json | 2 +- code/renderers/react/src/globals.ts | 3 +- code/renderers/react/src/render.tsx | 3 +- code/renderers/react/src/typings.d.ts | 2 + .../react/template/components/index.js | 2 +- code/renderers/server/package.json | 2 +- code/renderers/server/src/globals.ts | 3 +- code/renderers/server/src/render.ts | 3 +- code/renderers/server/src/typings.d.ts | 1 + code/renderers/svelte/package.json | 2 +- code/renderers/svelte/src/globals.ts | 2 +- code/renderers/svelte/src/typings.d.ts | 4 - .../svelte/template/components/index.js | 2 +- .../template/stories/views/ButtonView.svelte | 2 +- code/renderers/vue/package.json | 2 +- code/renderers/vue/src/globals.ts | 3 +- code/renderers/vue/src/typings.d.ts | 1 + .../vue/template/components/index.js | 2 +- code/renderers/vue3/package.json | 2 +- code/renderers/vue3/src/globals.ts | 3 +- code/renderers/vue3/src/typings.d.ts | 1 + .../vue3/template/components/index.js | 2 +- .../vue3/template/stories/preview.js | 2 +- code/renderers/web-components/package.json | 2 +- .../lit-element-demo-card/input.js | 3 +- .../src/docs/custom-elements.test.ts | 2 +- .../web-components/src/framework-api.ts | 12 ++- code/renderers/web-components/src/globals.ts | 2 +- code/renderers/web-components/src/index.ts | 2 +- code/renderers/web-components/src/render.ts | 2 +- .../renderers/web-components/src/typings.d.ts | 7 +- .../template/components/Button.js | 2 +- .../template/components/Form.js | 2 +- .../template/components/Html.js | 2 +- .../web-components/template/components/Pre.js | 2 +- .../template/components/index.js | 2 +- .../stories/demo-wc-card/DemoWcCard.js | 2 +- code/ui/.storybook/preview.tsx | 2 +- code/ui/blocks/package.json | 2 +- code/ui/blocks/src/blocks/DocsContainer.tsx | 2 +- code/ui/blocks/src/blocks/DocsContext.ts | 2 +- code/ui/blocks/src/blocks/mdx.tsx | 2 +- code/ui/blocks/src/components/IFrame.tsx | 2 +- code/ui/blocks/src/components/Preview.tsx | 2 +- code/ui/blocks/src/components/Story.tsx | 2 +- code/ui/blocks/src/controls/Object.tsx | 2 +- code/ui/blocks/src/typings.d.ts | 4 - code/ui/components/package.json | 2 +- code/ui/components/scripts/writeCssScript.js | 2 +- .../src/Zoom/browserSupportsCssZoom.ts | 2 +- .../syntaxhighlighter/syntaxhighlighter.tsx | 2 +- .../ui/components/src/tooltip/WithTooltip.tsx | 2 +- code/ui/components/src/typings.d.ts | 4 - code/ui/manager/package.json | 2 +- .../src/components/layout/app.mockdata.tsx | 2 +- .../src/components/preview/preview.tsx | 2 +- .../src/components/preview/tools/copy.tsx | 2 +- .../src/components/preview/tools/eject.tsx | 2 +- .../src/components/sidebar/RefBlocks.tsx | 2 +- .../src/components/sidebar/RefIndicator.tsx | 2 +- .../manager/src/components/sidebar/Search.tsx | 2 +- .../src/components/sidebar/SearchResults.tsx | 2 +- .../src/components/sidebar/useExpanded.ts | 2 +- .../src/components/sidebar/useHighlighted.ts | 2 +- .../manager/src/components/sidebar/utils.ts | 2 +- code/ui/manager/src/containers/preview.tsx | 2 +- code/ui/manager/src/index.tsx | 2 +- code/ui/manager/src/runtime.ts | 2 +- code/ui/manager/src/settings/index.tsx | 2 +- code/ui/manager/src/settings/typings.d.ts | 4 - code/ui/manager/src/typings.d.ts | 4 - code/yarn.lock | 84 ++++++++++--------- ...orybook-client-globals-example-file.ts.mdx | 2 +- 232 files changed, 300 insertions(+), 413 deletions(-) create mode 100644 code/renderers/html/src/typings.d.ts create mode 100644 code/renderers/preact/src/typings.d.ts create mode 100644 code/renderers/server/src/typings.d.ts create mode 100644 code/renderers/vue/src/typings.d.ts create mode 100644 code/renderers/vue3/src/typings.d.ts diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 434d55c6aee0..db8d1997eb05 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -67,12 +67,12 @@ "@storybook/client-logger": "7.0.0-beta.2", "@storybook/components": "7.0.0-beta.2", "@storybook/core-events": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/manager-api": "7.0.0-beta.2", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/theming": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", "axe-core": "^4.2.0", - "global": "^4.4.0", "lodash": "^4.17.21", "react-sizeme": "^3.0.1" }, diff --git a/code/addons/a11y/src/a11yRunner.ts b/code/addons/a11y/src/a11yRunner.ts index 6caca5a966f7..5a71adee35e1 100644 --- a/code/addons/a11y/src/a11yRunner.ts +++ b/code/addons/a11y/src/a11yRunner.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { addons } from '@storybook/preview-api'; import { EVENTS } from './constants'; import type { A11yParameters } from './params'; diff --git a/code/addons/a11y/src/typings.d.ts b/code/addons/a11y/src/typings.d.ts index d133af4d0864..f2db962c4d60 100644 --- a/code/addons/a11y/src/typings.d.ts +++ b/code/addons/a11y/src/typings.d.ts @@ -1,6 +1,2 @@ /* eslint-disable @typescript-eslint/naming-convention */ declare var __STORYBOOK_STORY_STORE__: any; - -declare module 'global' { - export default globalThis; -} diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 8228252ab38d..4b6c602e4cf0 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -79,12 +79,12 @@ "@storybook/client-logger": "7.0.0-beta.2", "@storybook/components": "7.0.0-beta.2", "@storybook/core-events": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/manager-api": "7.0.0-beta.2", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/theming": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", "dequal": "^2.0.2", - "global": "^4.4.0", "lodash": "^4.17.21", "polished": "^4.2.2", "prop-types": "^15.7.2", diff --git a/code/addons/actions/src/decorator.ts b/code/addons/actions/src/decorator.ts index 1400f15ab250..4851a1bfad85 100644 --- a/code/addons/actions/src/decorator.ts +++ b/code/addons/actions/src/decorator.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { useEffect, makeDecorator } from '@storybook/preview-api'; import { actions } from './runtime/actions'; diff --git a/code/addons/actions/src/typings.d.ts b/code/addons/actions/src/typings.d.ts index 360afd0d6154..331fb83df5f4 100644 --- a/code/addons/actions/src/typings.d.ts +++ b/code/addons/actions/src/typings.d.ts @@ -1,5 +1,2 @@ // TODO: following packages need definition files or a TS migration -declare module 'global' { - export default globalThis; -} declare module 'uuid-browser/v4'; diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 8cd34ab293f2..02ccaba95dd0 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -78,11 +78,11 @@ "@storybook/client-logger": "7.0.0-beta.2", "@storybook/components": "7.0.0-beta.2", "@storybook/core-events": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/manager-api": "7.0.0-beta.2", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/theming": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", - "global": "^4.4.0", "memoizerific": "^1.11.3", "ts-dedent": "^2.0.0" }, diff --git a/code/addons/backgrounds/src/helpers/index.ts b/code/addons/backgrounds/src/helpers/index.ts index e56b147ffc35..39065eec6648 100644 --- a/code/addons/backgrounds/src/helpers/index.ts +++ b/code/addons/backgrounds/src/helpers/index.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { dedent } from 'ts-dedent'; import { logger } from '@storybook/client-logger'; diff --git a/code/addons/backgrounds/src/typings.d.ts b/code/addons/backgrounds/src/typings.d.ts index 4748265af4d5..e69de29bb2d1 100644 --- a/code/addons/backgrounds/src/typings.d.ts +++ b/code/addons/backgrounds/src/typings.d.ts @@ -1,3 +0,0 @@ -declare module 'global' { - export default globalThis; -} diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index c645c3afbbfa..0ff7dbfd49b4 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -73,7 +73,6 @@ "@storybook/core-common": "7.0.0-beta.2", "@storybook/manager-api": "7.0.0-beta.2", "@storybook/node-logger": "7.0.0-beta.2", - "@storybook/preview-api": "7.0.0-beta.2", "@storybook/theming": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", "lodash": "^4.17.21", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 07ac82cec65e..c671b4190b90 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -103,6 +103,7 @@ "@storybook/components": "7.0.0-beta.2", "@storybook/csf-plugin": "7.0.0-beta.2", "@storybook/csf-tools": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/mdx2-csf": "next", "@storybook/node-logger": "7.0.0-beta.2", "@storybook/postinstall": "7.0.0-beta.2", @@ -110,7 +111,6 @@ "@storybook/theming": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", "fs-extra": "^9.0.1", - "global": "^4.4.0", "remark-external-links": "^8.0.0", "remark-slug": "^6.0.0", "ts-dedent": "^2.0.0" diff --git a/code/addons/docs/src/typings.d.ts b/code/addons/docs/src/typings.d.ts index 28e0338c4d74..5528b7d9f1c6 100644 --- a/code/addons/docs/src/typings.d.ts +++ b/code/addons/docs/src/typings.d.ts @@ -8,6 +8,3 @@ declare module 'vue/dist/vue'; declare module 'sveltedoc-parser' { export function parse(options: any): Promise; } -declare module 'global' { - export default globalThis; -} diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 4503d85dbc84..5438c49ffeef 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -61,8 +61,8 @@ }, "dependencies": { "@storybook/core-events": "7.0.0-beta.2", - "@storybook/preview-api": "7.0.0-beta.2", - "global": "^4.4.0" + "@storybook/global": "^5.0.0", + "@storybook/preview-api": "7.0.0-beta.2" }, "devDependencies": { "@types/webpack-env": "^1.16.0", diff --git a/code/addons/highlight/src/preview.ts b/code/addons/highlight/src/preview.ts index 36e486b90f78..9b90e6224122 100644 --- a/code/addons/highlight/src/preview.ts +++ b/code/addons/highlight/src/preview.ts @@ -1,5 +1,5 @@ /* eslint-env browser */ -import global from 'global'; +import { global } from '@storybook/global'; import { addons } from '@storybook/preview-api'; import { STORY_CHANGED } from '@storybook/core-events'; import { HIGHLIGHT, RESET_HIGHLIGHT, HIGHLIGHT_STYLE_ID } from './constants'; diff --git a/code/addons/highlight/src/typings.d.ts b/code/addons/highlight/src/typings.d.ts index 4748265af4d5..e69de29bb2d1 100644 --- a/code/addons/highlight/src/typings.d.ts +++ b/code/addons/highlight/src/typings.d.ts @@ -1,3 +0,0 @@ -declare module 'global' { - export default globalThis; -} diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 75838edafe69..997eaf47c94f 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -75,12 +75,12 @@ "@storybook/components": "7.0.0-beta.2", "@storybook/core-common": "7.0.0-beta.2", "@storybook/core-events": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/instrumenter": "7.0.0-beta.2", "@storybook/manager-api": "7.0.0-beta.2", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/theming": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", - "global": "^4.4.0", "jest-mock": "^27.0.6", "polished": "^4.2.2", "ts-dedent": "^2.2.0" diff --git a/code/addons/interactions/src/Panel.tsx b/code/addons/interactions/src/Panel.tsx index e4df36d5474c..d34e4e6a2adc 100644 --- a/code/addons/interactions/src/Panel.tsx +++ b/code/addons/interactions/src/Panel.tsx @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import * as React from 'react'; import { useChannel, useParameter } from '@storybook/manager-api'; import { diff --git a/code/addons/interactions/src/typings.d.ts b/code/addons/interactions/src/typings.d.ts index 4748265af4d5..e69de29bb2d1 100644 --- a/code/addons/interactions/src/typings.d.ts +++ b/code/addons/interactions/src/typings.d.ts @@ -1,3 +0,0 @@ -declare module 'global' { - export default globalThis; -} diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 3b8e5e6d43ab..e0468584081d 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -72,10 +72,10 @@ "@storybook/client-logger": "7.0.0-beta.2", "@storybook/components": "7.0.0-beta.2", "@storybook/core-events": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/manager-api": "7.0.0-beta.2", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/theming": "7.0.0-beta.2", - "global": "^4.4.0", "react-sizeme": "^3.0.1", "upath": "^1.2.0" }, diff --git a/code/addons/jest/src/typings.d.ts b/code/addons/jest/src/typings.d.ts index 4748265af4d5..e69de29bb2d1 100644 --- a/code/addons/jest/src/typings.d.ts +++ b/code/addons/jest/src/typings.d.ts @@ -1,3 +0,0 @@ -declare module 'global' { - export default globalThis; -} diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 1e51b574d2fa..9f73ff913ed0 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -79,11 +79,11 @@ "@storybook/client-logger": "7.0.0-beta.2", "@storybook/core-events": "7.0.0-beta.2", "@storybook/csf": "next", + "@storybook/global": "^5.0.0", "@storybook/manager-api": "7.0.0-beta.2", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/router": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", - "global": "^4.4.0", "prop-types": "^15.7.2", "ts-dedent": "^2.0.0" }, diff --git a/code/addons/links/src/react/components/link.test.tsx b/code/addons/links/src/react/components/link.test.tsx index 87796da7aca9..8c0c819b3f31 100644 --- a/code/addons/links/src/react/components/link.test.tsx +++ b/code/addons/links/src/react/components/link.test.tsx @@ -6,7 +6,7 @@ import { SELECT_STORY } from '@storybook/core-events'; import LinkTo from './link'; jest.mock('@storybook/preview-api'); -jest.mock('global', () => ({ +jest.mock('@storybook/global', () => ({ document: { location: { origin: 'origin', diff --git a/code/addons/links/src/typings.d.ts b/code/addons/links/src/typings.d.ts index 4748265af4d5..e69de29bb2d1 100644 --- a/code/addons/links/src/typings.d.ts +++ b/code/addons/links/src/typings.d.ts @@ -1,3 +0,0 @@ -declare module 'global' { - export default globalThis; -} diff --git a/code/addons/links/src/utils.test.ts b/code/addons/links/src/utils.test.ts index 0a77f40bd419..0bd114075ebe 100644 --- a/code/addons/links/src/utils.test.ts +++ b/code/addons/links/src/utils.test.ts @@ -4,7 +4,7 @@ import { SELECT_STORY } from '@storybook/core-events'; import { linkTo, hrefTo } from './utils'; jest.mock('@storybook/preview-api'); -jest.mock('global', () => ({ +jest.mock('@storybook/global', () => ({ document: global.document, window: global, })); diff --git a/code/addons/links/src/utils.ts b/code/addons/links/src/utils.ts index 14d1fcde1ca3..21c04a469ae2 100644 --- a/code/addons/links/src/utils.ts +++ b/code/addons/links/src/utils.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { addons, makeDecorator } from '@storybook/preview-api'; import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events'; import type { StoryId, StoryName, ComponentTitle } from '@storybook/types'; diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index ac83eb564ffe..7c9eefb59371 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -77,10 +77,10 @@ "@storybook/client-logger": "7.0.0-beta.2", "@storybook/components": "7.0.0-beta.2", "@storybook/core-events": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/manager-api": "7.0.0-beta.2", "@storybook/preview-api": "7.0.0-beta.2", - "@storybook/types": "7.0.0-beta.2", - "global": "^4.4.0" + "@storybook/types": "7.0.0-beta.2" }, "devDependencies": { "typescript": "~4.9.3" diff --git a/code/addons/measure/src/box-model/canvas.ts b/code/addons/measure/src/box-model/canvas.ts index e35ee8a6eac8..653e3f005ac1 100644 --- a/code/addons/measure/src/box-model/canvas.ts +++ b/code/addons/measure/src/box-model/canvas.ts @@ -1,5 +1,5 @@ /* eslint-disable no-param-reassign */ -import global from 'global'; +import { global } from '@storybook/global'; interface Size { width: number; diff --git a/code/addons/measure/src/box-model/visualizer.ts b/code/addons/measure/src/box-model/visualizer.ts index 59904860948c..eba2de27573b 100644 --- a/code/addons/measure/src/box-model/visualizer.ts +++ b/code/addons/measure/src/box-model/visualizer.ts @@ -2,7 +2,7 @@ /** * Based on https://gist.github.com/awestbro/e668c12662ad354f02a413205b65fce7 */ -import global from 'global'; +import { global } from '@storybook/global'; import { draw } from './canvas'; import type { Label, LabelStack } from './labels'; import { labelStacks } from './labels'; diff --git a/code/addons/measure/src/typings.d.ts b/code/addons/measure/src/typings.d.ts index b7be66285527..19bb66f5544f 100644 --- a/code/addons/measure/src/typings.d.ts +++ b/code/addons/measure/src/typings.d.ts @@ -1,7 +1,3 @@ -declare module 'global' { - export default globalThis; -} - interface Margin { top: number; bottom: number; diff --git a/code/addons/measure/src/util.ts b/code/addons/measure/src/util.ts index f4017c41dff7..6ad580df97e8 100644 --- a/code/addons/measure/src/util.ts +++ b/code/addons/measure/src/util.ts @@ -1,9 +1,9 @@ -import global from 'global'; +import { global } from '@storybook/global'; export const deepElementFromPoint = (x: number, y: number) => { - const element = global.document.elementFromPoint(x, y); + const element = global.document.elementFromPoint(x, y) as HTMLElement; - const crawlShadows = (node: Element): Element => { + const crawlShadows = (node: HTMLElement): HTMLElement => { if (node && node.shadowRoot) { // elementFromPoint() doesn't exist in ShadowRoot type const nestedElement = (node.shadowRoot as any).elementFromPoint(x, y); diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 50694261366f..32b1e4b37d26 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -80,10 +80,10 @@ "@storybook/client-logger": "7.0.0-beta.2", "@storybook/components": "7.0.0-beta.2", "@storybook/core-events": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/manager-api": "7.0.0-beta.2", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", - "global": "^4.4.0", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/addons/outline/src/helpers.ts b/code/addons/outline/src/helpers.ts index 569a80e21d7b..d427db2fa0b4 100644 --- a/code/addons/outline/src/helpers.ts +++ b/code/addons/outline/src/helpers.ts @@ -1,11 +1,12 @@ -import global from 'global'; +import { global } from '@storybook/global'; export const clearStyles = (selector: string | string[]) => { const selectors = Array.isArray(selector) ? selector : [selector]; selectors.forEach(clearStyle); }; -const clearStyle = (selector: string | string[]) => { +const clearStyle = (input: string | string[]) => { + const selector = typeof input === 'string' ? input : input.join(''); const element = global.document.getElementById(selector); if (element && element.parentElement) { element.parentElement.removeChild(element); diff --git a/code/addons/outline/src/typings.d.ts b/code/addons/outline/src/typings.d.ts index 4748265af4d5..e69de29bb2d1 100644 --- a/code/addons/outline/src/typings.d.ts +++ b/code/addons/outline/src/typings.d.ts @@ -1,3 +0,0 @@ -declare module 'global' { - export default globalThis; -} diff --git a/code/addons/storyshots/storyshots-core/package.json b/code/addons/storyshots/storyshots-core/package.json index c97ff54d1676..faf665921cdd 100644 --- a/code/addons/storyshots/storyshots-core/package.json +++ b/code/addons/storyshots/storyshots-core/package.json @@ -42,13 +42,13 @@ "@storybook/client-api": "7.0.0-beta.2", "@storybook/core-common": "7.0.0-beta.2", "@storybook/core-webpack": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", "@types/glob": "^7.1.3", "@types/jest-specific-snapshot": "^0.5.6", "core-js": "^3.8.2", "glob": "^7.1.6", - "global": "^4.4.0", "jest-specific-snapshot": "^7.0.0", "preact-render-to-string": "^5.1.19", "pretty-format": "^29.0.0", diff --git a/code/addons/storyshots/storyshots-core/src/api/index.ts b/code/addons/storyshots/storyshots-core/src/api/index.ts index c05c2f23a210..301d5cbf8c36 100644 --- a/code/addons/storyshots/storyshots-core/src/api/index.ts +++ b/code/addons/storyshots/storyshots-core/src/api/index.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { addons, mockChannel } from '@storybook/preview-api'; import ensureOptionsDefaults from './ensureOptionsDefaults'; import snapshotsTests from './snapshotsTestsTemplate'; @@ -16,6 +16,7 @@ function callTestMethodGlobals( ) { methods.forEach((method) => { if (typeof testMethod[method] === 'function') { + // @ts-expect-error (ignore) global[method](testMethod[method], testMethod[method].timeout); } }); diff --git a/code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts b/code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts index d52260268104..b27a8d086f76 100644 --- a/code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts +++ b/code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts @@ -1,7 +1,7 @@ /* eslint-disable jest/no-export */ import fs from 'fs'; import glob from 'glob'; -import global from 'global'; +import { global } from '@storybook/global'; import { dedent } from 'ts-dedent'; const { describe, it } = global; diff --git a/code/addons/storyshots/storyshots-core/src/api/snapshotsTestsTemplate.ts b/code/addons/storyshots/storyshots-core/src/api/snapshotsTestsTemplate.ts index c22679a11a83..1e2ee8cbf9f4 100644 --- a/code/addons/storyshots/storyshots-core/src/api/snapshotsTestsTemplate.ts +++ b/code/addons/storyshots/storyshots-core/src/api/snapshotsTestsTemplate.ts @@ -1,6 +1,6 @@ /* eslint-disable jest/no-export */ /* eslint-disable jest/expect-expect */ -import global from 'global'; +import { global } from '@storybook/global'; import { addSerializer } from 'jest-specific-snapshot'; const { describe, it } = global; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/configure.ts b/code/addons/storyshots/storyshots-core/src/frameworks/configure.ts index d2a029c27a44..ec54eedab1e7 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/configure.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/configure.ts @@ -11,7 +11,7 @@ import type { import { toRequireContext } from '@storybook/core-webpack'; import { normalizeStoriesEntry } from '@storybook/core-common'; import registerRequireContextHook from '@storybook/babel-plugin-require-context-hook/register'; -import global from 'global'; +import { global } from '@storybook/global'; import type { ClientApi } from './Loader'; import type { StoryshotsOptions } from '../api/StoryshotsOptions'; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts index d75c563eef2b..df86afc1961e 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import configure from '../configure'; import type { Loader } from '../Loader'; import type { StoryshotsOptions } from '../../api/StoryshotsOptions'; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/html/renderTree.ts b/code/addons/storyshots/storyshots-core/src/frameworks/html/renderTree.ts index 102d18e82bcf..2347acb15867 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/html/renderTree.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/html/renderTree.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; const { document, Node } = global; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts index b02ccaf30412..b938dac3f928 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts @@ -1,7 +1,7 @@ /** @jsxRuntime classic */ /** @jsx h */ -import global from 'global'; +import { global } from '@storybook/global'; import configure from '../configure'; import hasDependency from '../hasDependency'; import type { Loader } from '../Loader'; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts index ffe67f771544..178ef3c1d7b5 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import configure from '../configure'; import hasDependency from '../hasDependency'; import type { Loader } from '../Loader'; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts index 8a174ee11af8..598bfc300601 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import hasDependency from '../hasDependency'; import configure from '../configure'; import type { Loader } from '../Loader'; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts b/code/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts index c4f1ce24419d..085065635acf 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/riot/renderTree.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; const { document } = global; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts index 0135af40b649..5bd09594013c 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import hasDependency from '../hasDependency'; import configure from '../configure'; import type { Loader } from '../Loader'; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.ts b/code/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.ts index 9d75b8b31f59..78c19bd1ab66 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { set_current_component } from 'svelte/internal'; const { document } = global; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts index 02ef63c066d5..a29a88a2d98b 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import hasDependency from '../hasDependency'; import configure from '../configure'; import type { Loader } from '../Loader'; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/vue3/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/vue3/loader.ts index 91d40dd35d7c..3fed6869e1a2 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/vue3/loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/vue3/loader.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import hasDependency from '../hasDependency'; import configure from '../configure'; import type { Loader } from '../Loader'; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/vue3/renderTree.ts b/code/addons/storyshots/storyshots-core/src/frameworks/vue3/renderTree.ts index bcc8b5b3b165..854cb485b3c1 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/vue3/renderTree.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/vue3/renderTree.ts @@ -1,5 +1,5 @@ import * as Vue from 'vue'; -import global from 'global'; +import { global } from '@storybook/global'; const { document } = global; diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/web-components/loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/web-components/loader.ts index 41ac97a75117..e3536d85d99d 100644 --- a/code/addons/storyshots/storyshots-core/src/frameworks/web-components/loader.ts +++ b/code/addons/storyshots/storyshots-core/src/frameworks/web-components/loader.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import configure from '../configure'; import type { Loader } from '../Loader'; import type { StoryshotsOptions } from '../../api/StoryshotsOptions'; diff --git a/code/addons/storyshots/storyshots-core/src/typings.d.ts b/code/addons/storyshots/storyshots-core/src/typings.d.ts index 616c95f38e3a..8a3b5786945d 100644 --- a/code/addons/storyshots/storyshots-core/src/typings.d.ts +++ b/code/addons/storyshots/storyshots-core/src/typings.d.ts @@ -1,3 +1,5 @@ +/* eslint-disable no-underscore-dangle */ +/* eslint-disable @typescript-eslint/naming-convention */ declare module 'jest-preset-angular/*'; declare module 'preact-render-to-string/jsx'; declare module 'react-test-renderer*'; @@ -5,4 +7,8 @@ declare module 'rax-test-renderer*'; declare module '@storybook/babel-plugin-require-context-hook/register'; -declare module 'global'; +declare var STORYBOOK_ENV: any; +declare var STORIES: any; +declare var FEATURES: any; +declare var __STORYBOOK_STORY_STORE__: any; +declare var __requireContext: any; diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 51ae3e8e973b..f922a60e9534 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -75,10 +75,10 @@ "@storybook/client-logger": "7.0.0-beta.2", "@storybook/components": "7.0.0-beta.2", "@storybook/core-events": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/manager-api": "7.0.0-beta.2", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/theming": "7.0.0-beta.2", - "global": "^4.4.0", "memoizerific": "^1.11.3", "prop-types": "^15.7.2" }, diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 9da8cd031bd4..3c4931212108 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -42,6 +42,7 @@ "@storybook/core-server": "7.0.0-beta.2", "@storybook/core-webpack": "7.0.0-beta.2", "@storybook/docs-tools": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/manager-api": "7.0.0-beta.2", "@storybook/node-logger": "7.0.0-beta.2", "@storybook/preview-api": "7.0.0-beta.2", @@ -53,7 +54,6 @@ "@types/webpack-env": "^1.18.0", "core-js": "^3.8.2", "find-up": "^5.0.0", - "global": "^4.4.0", "read-pkg-up": "^7.0.1", "semver": "^7.3.7", "telejson": "^7.0.3", diff --git a/code/frameworks/angular/src/client/angular/helpers.ts b/code/frameworks/angular/src/client/angular/helpers.ts index 10ce71718090..009a02298f9c 100644 --- a/code/frameworks/angular/src/client/angular/helpers.ts +++ b/code/frameworks/angular/src/client/angular/helpers.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { NgModuleRef, Type, enableProdMode, NgModule, Component, NgZone } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; diff --git a/code/frameworks/angular/src/client/globals.ts b/code/frameworks/angular/src/client/globals.ts index d8b312785941..9e5f1fcfb9cb 100644 --- a/code/frameworks/angular/src/client/globals.ts +++ b/code/frameworks/angular/src/client/globals.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; /** * This file includes polyfills needed by Angular and is loaded before the app. diff --git a/code/frameworks/angular/src/typings.d.ts b/code/frameworks/angular/src/typings.d.ts index 3f6f8a56efef..384ec66c55e8 100644 --- a/code/frameworks/angular/src/typings.d.ts +++ b/code/frameworks/angular/src/typings.d.ts @@ -18,7 +18,3 @@ declare var __STORYBOOK_ADDONS_CHANNEL__: any; declare var __STORYBOOK_PREVIEWWEB_INSTANCE__: any; declare var __STORYBOOK_CLIENTAPI_INSTANCE__: any; declare var __STORYBOOK_CLIENT_API__: any; - -declare module 'global' { - export default globalThis; -} diff --git a/code/frameworks/angular/template/components/index.js b/code/frameworks/angular/template/components/index.js index 11d1c72443bf..71aafe7204fc 100644 --- a/code/frameworks/angular/template/components/index.js +++ b/code/frameworks/angular/template/components/index.js @@ -1,8 +1,8 @@ -import globalThis from 'global'; +import { global } from '@storybook/global'; import Button from './button.component'; import Html from './html.component'; import Pre from './pre.component'; import Form from './form.component'; -globalThis.Components = { Button, Html, Pre, Form }; +global.Components = { Button, Html, Pre, Form }; diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 31ca3cd2c1b7..2718bbcb9716 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -34,9 +34,9 @@ "@storybook/builder-webpack5": "7.0.0-beta.2", "@storybook/core-common": "7.0.0-beta.2", "@storybook/docs-tools": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", - "global": "^4.4.0", "read-pkg-up": "^7.0.1", "ts-dedent": "^2.0.0" }, diff --git a/code/frameworks/ember/src/client/preview/globals.ts b/code/frameworks/ember/src/client/preview/globals.ts index 65a7ed9531e8..7291f2881442 100644 --- a/code/frameworks/ember/src/client/preview/globals.ts +++ b/code/frameworks/ember/src/client/preview/globals.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; global.STORYBOOK_NAME = process.env.STORYBOOK_NAME; global.STORYBOOK_ENV = 'ember'; diff --git a/code/frameworks/ember/src/client/preview/render.ts b/code/frameworks/ember/src/client/preview/render.ts index 7ff7965bfa1b..84121a6cd7bf 100644 --- a/code/frameworks/ember/src/client/preview/render.ts +++ b/code/frameworks/ember/src/client/preview/render.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { dedent } from 'ts-dedent'; import type { RenderContext } from '@storybook/types'; // @ts-expect-error (Converted from ts-ignore) diff --git a/code/frameworks/ember/src/typings.d.ts b/code/frameworks/ember/src/typings.d.ts index 264e39613ed1..06750cef4597 100644 --- a/code/frameworks/ember/src/typings.d.ts +++ b/code/frameworks/ember/src/typings.d.ts @@ -2,7 +2,3 @@ declare module 'ember-source/dist/ember-template-compiler'; declare var STORYBOOK_ENV: 'ember'; declare var STORYBOOK_NAME: any; - -declare module 'global' { - export default globalThis; -} diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 3f1fdf78f81c..a856015a6a86 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -52,10 +52,10 @@ "dependencies": { "@storybook/builder-webpack5": "7.0.0-beta.2", "@storybook/core-common": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/html": "7.0.0-beta.2", "@storybook/preset-html-webpack": "7.0.0-beta.2", - "@types/node": "^16.0.0", - "global": "^4.4.0" + "@types/node": "^16.0.0" }, "devDependencies": { "typescript": "~4.9.3" diff --git a/code/frameworks/html-webpack5/src/typings.d.ts b/code/frameworks/html-webpack5/src/typings.d.ts index eddff6bbb3ab..cbeccdbb15f7 100644 --- a/code/frameworks/html-webpack5/src/typings.d.ts +++ b/code/frameworks/html-webpack5/src/typings.d.ts @@ -1,6 +1,2 @@ -declare module 'global' { - export default globalThis; -} - // will be provided by the webpack define plugin declare var NODE_ENV: string | undefined; diff --git a/code/frameworks/preact-webpack5/src/typings.d.ts b/code/frameworks/preact-webpack5/src/typings.d.ts index 4748265af4d5..e69de29bb2d1 100644 --- a/code/frameworks/preact-webpack5/src/typings.d.ts +++ b/code/frameworks/preact-webpack5/src/typings.d.ts @@ -1,3 +0,0 @@ -declare module 'global' { - export default globalThis; -} diff --git a/code/frameworks/react-webpack5/src/typings.d.ts b/code/frameworks/react-webpack5/src/typings.d.ts index 2c82a91afe5e..53aa2b04a775 100644 --- a/code/frameworks/react-webpack5/src/typings.d.ts +++ b/code/frameworks/react-webpack5/src/typings.d.ts @@ -1,7 +1,3 @@ -declare module 'global' { - export default globalThis; -} - // TODO: Replace, as soon as @types/react-dom 17.0.14 is used // Source: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/fb0f14b7a35cde26ffaa82e7536c062e593e9ae6/types/react-dom/client.d.ts declare module 'react-dom/client' { diff --git a/code/frameworks/svelte-webpack5/src/typings.d.ts b/code/frameworks/svelte-webpack5/src/typings.d.ts index 9367a54d4664..48e7ba6228fd 100644 --- a/code/frameworks/svelte-webpack5/src/typings.d.ts +++ b/code/frameworks/svelte-webpack5/src/typings.d.ts @@ -1,7 +1,3 @@ declare module '@storybook/svelte/templates/SlotDecorator.svelte'; declare module '@storybook/svelte/templates/PreviewRender.svelte'; declare module '@storybook/svelte/templates/HOC.svelte'; - -declare module 'global' { - export default globalThis; -} diff --git a/code/frameworks/vue-webpack5/src/typings.d.ts b/code/frameworks/vue-webpack5/src/typings.d.ts index 102b17b3df34..45d6411e8736 100644 --- a/code/frameworks/vue-webpack5/src/typings.d.ts +++ b/code/frameworks/vue-webpack5/src/typings.d.ts @@ -1,5 +1 @@ declare module 'vue-loader/lib/plugin'; - -declare module 'global' { - export default globalThis; -} diff --git a/code/frameworks/vue3-webpack5/src/typings.d.ts b/code/frameworks/vue3-webpack5/src/typings.d.ts index af53cf111c8f..a045728260a0 100644 --- a/code/frameworks/vue3-webpack5/src/typings.d.ts +++ b/code/frameworks/vue3-webpack5/src/typings.d.ts @@ -1,7 +1,3 @@ declare module 'vue-loader' { export const VueLoaderPlugin: any; } - -declare module 'global' { - export default globalThis; -} diff --git a/code/frameworks/web-components-webpack5/src/typings.d.ts b/code/frameworks/web-components-webpack5/src/typings.d.ts index eddff6bbb3ab..cbeccdbb15f7 100644 --- a/code/frameworks/web-components-webpack5/src/typings.d.ts +++ b/code/frameworks/web-components-webpack5/src/typings.d.ts @@ -1,6 +1,2 @@ -declare module 'global' { - export default globalThis; -} - // will be provided by the webpack define plugin declare var NODE_ENV: string | undefined; diff --git a/code/lib/builder-vite/src/optimizeDeps.ts b/code/lib/builder-vite/src/optimizeDeps.ts index 7cc35166433a..0ea4583aa819 100644 --- a/code/lib/builder-vite/src/optimizeDeps.ts +++ b/code/lib/builder-vite/src/optimizeDeps.ts @@ -39,6 +39,7 @@ const INCLUDE_CANDIDATES = [ 'estraverse', 'fast-deep-equal', 'global', + '@storybook/global', 'html-tags', 'isobject', 'jest-mock', diff --git a/code/lib/builder-webpack5/package.json b/code/lib/builder-webpack5/package.json index 5a5b176bf212..c53531993334 100644 --- a/code/lib/builder-webpack5/package.json +++ b/code/lib/builder-webpack5/package.json @@ -65,6 +65,7 @@ "@storybook/core-common": "7.0.0-beta.2", "@storybook/core-events": "7.0.0-beta.2", "@storybook/core-webpack": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/manager-api": "7.0.0-beta.2", "@storybook/node-logger": "7.0.0-beta.2", "@storybook/preview": "7.0.0-beta.2", @@ -82,7 +83,6 @@ "express": "^4.17.3", "fork-ts-checker-webpack-plugin": "^7.2.8", "fs-extra": "^9.0.1", - "global": "^4.4.0", "html-webpack-plugin": "^5.5.0", "path-browserify": "^1.0.1", "process": "^0.11.10", diff --git a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts index a8de0de4baa0..2fbb45eb6061 100644 --- a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -215,6 +215,9 @@ export default async ( { message: /export '\S+' was not found in 'global'/, }, + { + message: /export '\S+' was not found in '@storybook\/global'/, + }, ], plugins: [ Object.keys(virtualModuleMapping).length > 0 diff --git a/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars b/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars index 62b3fe1d603c..3f77a83eeca0 100644 --- a/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars +++ b/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { ClientApi, PreviewWeb, addons, composeConfigs } from '@storybook/preview-api'; import { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage'; diff --git a/code/lib/builder-webpack5/typings.d.ts b/code/lib/builder-webpack5/typings.d.ts index 2474c816bbba..df888b533e90 100644 --- a/code/lib/builder-webpack5/typings.d.ts +++ b/code/lib/builder-webpack5/typings.d.ts @@ -1,6 +1,2 @@ declare module 'lazy-universal-dotenv'; declare module '@storybook/theming/paths'; - -declare module 'global' { - export default globalThis; -} diff --git a/code/lib/channel-postmessage/package.json b/code/lib/channel-postmessage/package.json index 98b74013bcd7..930408e80332 100644 --- a/code/lib/channel-postmessage/package.json +++ b/code/lib/channel-postmessage/package.json @@ -45,7 +45,7 @@ "@storybook/channels": "7.0.0-beta.2", "@storybook/client-logger": "7.0.0-beta.2", "@storybook/core-events": "7.0.0-beta.2", - "global": "^4.4.0", + "@storybook/global": "^5.0.0", "qs": "^6.10.0", "telejson": "^7.0.3" }, diff --git a/code/lib/channel-postmessage/src/index.ts b/code/lib/channel-postmessage/src/index.ts index e403de199149..34596a8d4adf 100644 --- a/code/lib/channel-postmessage/src/index.ts +++ b/code/lib/channel-postmessage/src/index.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import * as EVENTS from '@storybook/core-events'; import { Channel } from '@storybook/channels'; import type { ChannelHandler, ChannelEvent } from '@storybook/channels'; diff --git a/code/lib/channel-postmessage/src/typings.d.ts b/code/lib/channel-postmessage/src/typings.d.ts index 3470be81c85f..5c3e4f56f641 100644 --- a/code/lib/channel-postmessage/src/typings.d.ts +++ b/code/lib/channel-postmessage/src/typings.d.ts @@ -1,5 +1 @@ declare var CHANNEL_OPTIONS: any; - -declare module 'global' { - export default globalThis; -} diff --git a/code/lib/channel-websocket/package.json b/code/lib/channel-websocket/package.json index 091e41c7cf7c..6ef63bdafd45 100644 --- a/code/lib/channel-websocket/package.json +++ b/code/lib/channel-websocket/package.json @@ -44,7 +44,7 @@ "dependencies": { "@storybook/channels": "7.0.0-beta.2", "@storybook/client-logger": "7.0.0-beta.2", - "global": "^4.4.0", + "@storybook/global": "^5.0.0", "telejson": "^7.0.3" }, "devDependencies": { diff --git a/code/lib/channel-websocket/src/index.ts b/code/lib/channel-websocket/src/index.ts index fb5628be5032..c92f857c0cb1 100644 --- a/code/lib/channel-websocket/src/index.ts +++ b/code/lib/channel-websocket/src/index.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { Channel } from '@storybook/channels'; import type { ChannelHandler } from '@storybook/channels'; import { logger } from '@storybook/client-logger'; diff --git a/code/lib/channel-websocket/src/typings.d.ts b/code/lib/channel-websocket/src/typings.d.ts index 106a94b03f2f..36dadd3de8aa 100644 --- a/code/lib/channel-websocket/src/typings.d.ts +++ b/code/lib/channel-websocket/src/typings.d.ts @@ -1,5 +1 @@ declare module 'json-fn'; - -declare module 'global' { - export default globalThis; -} diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json index 09288354ef2b..ce69e3dc1dca 100644 --- a/code/lib/client-logger/package.json +++ b/code/lib/client-logger/package.json @@ -42,7 +42,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "global": "^4.4.0" + "@storybook/global": "^5.0.0" }, "devDependencies": { "typescript": "~4.9.3" diff --git a/code/lib/client-logger/src/index.test.ts b/code/lib/client-logger/src/index.test.ts index f9004a47e7b9..cf67fe47705c 100644 --- a/code/lib/client-logger/src/index.test.ts +++ b/code/lib/client-logger/src/index.test.ts @@ -1,6 +1,6 @@ import { logger } from '.'; -jest.mock('global', () => ({ ...global, LOGLEVEL: 'debug' })); +jest.mock('@storybook/global', () => ({ ...global, LOGLEVEL: 'debug' })); describe('client-logger default LOGLEVEL', () => { const initialConsole = { ...global.console }; diff --git a/code/lib/client-logger/src/index.ts b/code/lib/client-logger/src/index.ts index e6ca8731c3b9..51d61ba5da2b 100644 --- a/code/lib/client-logger/src/index.ts +++ b/code/lib/client-logger/src/index.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; const { LOGLEVEL } = global; diff --git a/code/lib/client-logger/src/typings.d.ts b/code/lib/client-logger/src/typings.d.ts index 6b3ff6ea5378..bfd9e55123ff 100644 --- a/code/lib/client-logger/src/typings.d.ts +++ b/code/lib/client-logger/src/typings.d.ts @@ -1,5 +1 @@ declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined; - -declare module 'global' { - export default globalThis; -} diff --git a/code/lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/story-function.input.js b/code/lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/story-function.input.js index 252c25e46667..886691243404 100644 --- a/code/lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/story-function.input.js +++ b/code/lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/story-function.input.js @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; const { document } = global; diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 6e025a9b9cab..8c21a1761840 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -41,6 +41,7 @@ "@storybook/csf": "next", "@storybook/csf-tools": "7.0.0-beta.2", "@storybook/docs-mdx": "next", + "@storybook/global": "^5.0.0", "@storybook/node-logger": "7.0.0-beta.2", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/telemetry": "7.0.0-beta.2", @@ -57,7 +58,6 @@ "detect-port": "^1.3.0", "express": "^4.17.3", "fs-extra": "^9.0.1", - "global": "^4.4.0", "globby": "^11.0.2", "ip": "^2.0.0", "lodash": "^4.17.21", diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts index 8296ae245361..309a5747d827 100644 --- a/code/lib/core-server/src/build-dev.ts +++ b/code/lib/core-server/src/build-dev.ts @@ -15,7 +15,7 @@ import { validateFrameworkName, } from '@storybook/core-common'; import prompts from 'prompts'; -import global from 'global'; +import { global } from '@storybook/global'; import { telemetry } from '@storybook/telemetry'; import { join, resolve } from 'path'; diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts index 7c444c4ae6fa..58834e7cac80 100644 --- a/code/lib/core-server/src/build-static.ts +++ b/code/lib/core-server/src/build-static.ts @@ -2,7 +2,7 @@ import chalk from 'chalk'; import { copy, emptyDir, ensureDir } from 'fs-extra'; import { dirname, isAbsolute, join, resolve } from 'path'; import { dedent } from 'ts-dedent'; -import global from 'global'; +import { global } from '@storybook/global'; import { logger } from '@storybook/node-logger'; import { telemetry, getPrecedingUpgrade } from '@storybook/telemetry'; diff --git a/code/lib/core-server/src/typings.d.ts b/code/lib/core-server/src/typings.d.ts index 0c3652576a53..5ba2b96e7559 100644 --- a/code/lib/core-server/src/typings.d.ts +++ b/code/lib/core-server/src/typings.d.ts @@ -10,7 +10,3 @@ declare module '@discoveryjs/json-ext'; declare module 'watchpack'; declare var FEATURES: any; - -declare module 'global' { - export default globalThis; -} diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index a5a7c2b16dbb..5c80f5f8183c 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -45,9 +45,9 @@ "@storybook/channels": "7.0.0-beta.2", "@storybook/client-logger": "7.0.0-beta.2", "@storybook/core-events": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/preview-api": "7.0.0-beta.2", - "core-js": "^3.8.2", - "global": "^4.4.0" + "core-js": "^3.8.2" }, "devDependencies": { "typescript": "~4.9.3" diff --git a/code/lib/instrumenter/src/instrumenter.test.ts b/code/lib/instrumenter/src/instrumenter.test.ts index cb4cc645c14b..b8ce10aec590 100644 --- a/code/lib/instrumenter/src/instrumenter.test.ts +++ b/code/lib/instrumenter/src/instrumenter.test.ts @@ -8,7 +8,7 @@ import { SET_CURRENT_STORY, STORY_RENDER_PHASE_CHANGED, } from '@storybook/core-events'; -import global from 'global'; +import { global } from '@storybook/global'; import { EVENTS, Instrumenter } from './instrumenter'; import type { Options } from './types'; diff --git a/code/lib/instrumenter/src/instrumenter.ts b/code/lib/instrumenter/src/instrumenter.ts index 5c3ef0f54380..db80473af4f0 100644 --- a/code/lib/instrumenter/src/instrumenter.ts +++ b/code/lib/instrumenter/src/instrumenter.ts @@ -9,7 +9,7 @@ import { SET_CURRENT_STORY, STORY_RENDER_PHASE_CHANGED, } from '@storybook/core-events'; -import global from 'global'; +import { global } from '@storybook/global'; import type { Call, CallRef, ControlStates, LogItem, Options, State, SyncPayload } from './types'; import { CallStates } from './types'; diff --git a/code/lib/instrumenter/src/typings.d.ts b/code/lib/instrumenter/src/typings.d.ts index 88fc2f4f5000..2f4fd5fee113 100644 --- a/code/lib/instrumenter/src/typings.d.ts +++ b/code/lib/instrumenter/src/typings.d.ts @@ -3,7 +3,3 @@ declare var FEATURES: any; declare var __STORYBOOK_PREVIEW__: any; declare var __STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER_STATE__: any; declare var __STORYBOOK_ADDON_INTERACTIONS_INSTRUMENTER__: any; - -declare module 'global' { - export default globalThis; -} diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 34050d6c3e27..aab1dbe08e24 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -45,11 +45,11 @@ "@storybook/client-logger": "7.0.0-beta.2", "@storybook/core-events": "7.0.0-beta.2", "@storybook/csf": "next", + "@storybook/global": "^5.0.0", "@storybook/router": "7.0.0-beta.2", "@storybook/theming": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", "dequal": "^2.0.2", - "global": "^4.4.0", "lodash": "^4.17.21", "memoizerific": "^1.11.3", "semver": "^7.3.7", diff --git a/code/lib/manager-api/src/lib/addons.ts b/code/lib/manager-api/src/lib/addons.ts index fa3c202ebbc8..78411959b197 100644 --- a/code/lib/manager-api/src/lib/addons.ts +++ b/code/lib/manager-api/src/lib/addons.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import type { Channel } from '@storybook/channels'; import { SET_CONFIG } from '@storybook/core-events'; diff --git a/code/lib/manager-api/src/lib/shortcut.ts b/code/lib/manager-api/src/lib/shortcut.ts index 6830ac223435..e61b1cc159f7 100644 --- a/code/lib/manager-api/src/lib/shortcut.ts +++ b/code/lib/manager-api/src/lib/shortcut.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import type { API_KeyCollection } from '../modules/shortcuts'; const { navigator } = global; diff --git a/code/lib/manager-api/src/modules/layout.ts b/code/lib/manager-api/src/modules/layout.ts index 12da99d96181..798b6788bbad 100644 --- a/code/lib/manager-api/src/modules/layout.ts +++ b/code/lib/manager-api/src/modules/layout.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import pick from 'lodash/pick'; import { dequal as deepEqual } from 'dequal'; import { create } from '@storybook/theming/create'; diff --git a/code/lib/manager-api/src/modules/refs.ts b/code/lib/manager-api/src/modules/refs.ts index 56f471b9483f..166994b956e6 100644 --- a/code/lib/manager-api/src/modules/refs.ts +++ b/code/lib/manager-api/src/modules/refs.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { dedent } from 'ts-dedent'; import type { API_ComposedRef, diff --git a/code/lib/manager-api/src/modules/release-notes.ts b/code/lib/manager-api/src/modules/release-notes.ts index f8c3da8abd8b..d1546a6f47ce 100644 --- a/code/lib/manager-api/src/modules/release-notes.ts +++ b/code/lib/manager-api/src/modules/release-notes.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import type { API_ReleaseNotes } from '@storybook/types'; import memoize from 'memoizerific'; diff --git a/code/lib/manager-api/src/modules/shortcuts.ts b/code/lib/manager-api/src/modules/shortcuts.ts index 7266a8a290a1..1e623123bde8 100644 --- a/code/lib/manager-api/src/modules/shortcuts.ts +++ b/code/lib/manager-api/src/modules/shortcuts.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import global from 'global'; +import { global } from '@storybook/global'; import { PREVIEW_KEYDOWN } from '@storybook/core-events'; import type { ModuleFn } from '../index'; diff --git a/code/lib/manager-api/src/modules/stories.ts b/code/lib/manager-api/src/modules/stories.ts index cbf2ac59c6c9..d9a70c6c56da 100644 --- a/code/lib/manager-api/src/modules/stories.ts +++ b/code/lib/manager-api/src/modules/stories.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { toId, sanitize } from '@storybook/csf'; import { PRELOAD_ENTRIES, diff --git a/code/lib/manager-api/src/modules/url.ts b/code/lib/manager-api/src/modules/url.ts index c55899ff136c..7dc77ecec077 100644 --- a/code/lib/manager-api/src/modules/url.ts +++ b/code/lib/manager-api/src/modules/url.ts @@ -8,7 +8,7 @@ import { import type { NavigateOptions } from '@storybook/router'; import { queryFromLocation, buildArgsParam } from '@storybook/router'; import { dequal as deepEqual } from 'dequal'; -import global from 'global'; +import { global } from '@storybook/global'; import type { API_Layout, API_UI } from '@storybook/types'; import type { ModuleArgs, ModuleFn } from '../index'; diff --git a/code/lib/manager-api/src/modules/versions.ts b/code/lib/manager-api/src/modules/versions.ts index 07493156b6bd..0ea85ae6d919 100644 --- a/code/lib/manager-api/src/modules/versions.ts +++ b/code/lib/manager-api/src/modules/versions.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import semver from 'semver'; import memoize from 'memoizerific'; diff --git a/code/lib/manager-api/src/tests/events.test.ts b/code/lib/manager-api/src/tests/events.test.ts index f0a582d4d05f..900ad791fc14 100644 --- a/code/lib/manager-api/src/tests/events.test.ts +++ b/code/lib/manager-api/src/tests/events.test.ts @@ -1,7 +1,7 @@ import { getEventMetadata } from '../lib/events'; import type { API } from '../index'; -jest.mock('global', () => ({ +jest.mock('@storybook/global', () => ({ location: { origin: 'http://localhost:6006', pathname: '/' }, })); diff --git a/code/lib/manager-api/src/tests/refs.test.js b/code/lib/manager-api/src/tests/refs.test.js index ad25f718ec49..5d8df57a4426 100644 --- a/code/lib/manager-api/src/tests/refs.test.js +++ b/code/lib/manager-api/src/tests/refs.test.js @@ -1,9 +1,9 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { getSourceType, init as initRefs } from '../modules/refs'; const { fetch } = global; -jest.mock('global', () => { +jest.mock('@storybook/global', () => { const globalMock = { fetch: jest.fn(() => Promise.resolve({})), REFS: { diff --git a/code/lib/manager-api/src/tests/shortcut.test.js b/code/lib/manager-api/src/tests/shortcut.test.js index 23aeb049236e..982f74856fb8 100644 --- a/code/lib/manager-api/src/tests/shortcut.test.js +++ b/code/lib/manager-api/src/tests/shortcut.test.js @@ -2,7 +2,7 @@ * @jest-environment jsdom */ -import global from 'global'; +import { global } from '@storybook/global'; import { eventToShortcut, keyToSymbol } from '../lib/shortcut'; const { KeyboardEvent } = global; diff --git a/code/lib/manager-api/src/tests/stories.test.ts b/code/lib/manager-api/src/tests/stories.test.ts index 072527e8eb50..b638a7837452 100644 --- a/code/lib/manager-api/src/tests/stories.test.ts +++ b/code/lib/manager-api/src/tests/stories.test.ts @@ -14,7 +14,7 @@ import { SET_INDEX, } from '@storybook/core-events'; import { EventEmitter } from 'events'; -import global from 'global'; +import { global } from '@storybook/global'; import { Channel } from '@storybook/channels'; @@ -37,8 +37,8 @@ function mockChannel() { const mockGetEntries = jest.fn<() => StoryIndex['entries']>(); jest.mock('../lib/events'); -jest.mock('global', () => ({ - ...(mockJest.requireActual('global') as Record), +jest.mock('@storybook/global', () => ({ + ...(mockJest.requireActual('@storybook/global') as Record), fetch: mockJest.fn(() => ({ json: () => ({ v: 4, entries: mockGetEntries() }) })), FEATURES: { storyStoreV7: true }, CONFIG_TYPE: 'DEVELOPMENT', diff --git a/code/lib/manager-api/src/tests/versions.test.js b/code/lib/manager-api/src/tests/versions.test.js index 272bd5cc340f..4b2d87663e99 100644 --- a/code/lib/manager-api/src/tests/versions.test.js +++ b/code/lib/manager-api/src/tests/versions.test.js @@ -4,7 +4,7 @@ jest.mock('../version', () => ({ version: '3.0.0', })); -jest.mock('global', () => ({ +jest.mock('@storybook/global', () => ({ VERSIONCHECK: JSON.stringify({ success: true, data: { diff --git a/code/lib/manager-api/src/typings.d.ts b/code/lib/manager-api/src/typings.d.ts index 3db06703ba90..6c531d799db0 100644 --- a/code/lib/manager-api/src/typings.d.ts +++ b/code/lib/manager-api/src/typings.d.ts @@ -4,7 +4,3 @@ declare var __STORYBOOK_ADDONS_MANAGER: any; declare var FEATURES: { storyStoreV7?: boolean } | undefined; declare var REFS: any; declare var VERSIONCHECK: any; - -declare module 'global' { - export default globalThis; -} diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index f54b410dcecc..d505ba7ebc1e 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -72,10 +72,10 @@ "@storybook/client-logger": "7.0.0-beta.2", "@storybook/core-events": "7.0.0-beta.2", "@storybook/csf": "next", + "@storybook/global": "^5.0.0", "@storybook/types": "7.0.0-beta.2", "@types/qs": "^6.9.5", "dequal": "^2.0.2", - "global": "^4.4.0", "lodash": "^4.17.21", "memoizerific": "^1.11.3", "qs": "^6.10.0", diff --git a/code/lib/preview-api/src/addons.ts b/code/lib/preview-api/src/addons.ts index eab6cf52d111..abff53a4dd10 100644 --- a/code/lib/preview-api/src/addons.ts +++ b/code/lib/preview-api/src/addons.ts @@ -1 +1,4 @@ +/* eslint-disable @typescript-eslint/triple-slash-reference */ +/// + export * from './modules/addons'; diff --git a/code/lib/preview-api/src/client-api.ts b/code/lib/preview-api/src/client-api.ts index 0ba8fe19999d..c133a47e3570 100644 --- a/code/lib/preview-api/src/client-api.ts +++ b/code/lib/preview-api/src/client-api.ts @@ -1 +1,4 @@ +/* eslint-disable @typescript-eslint/triple-slash-reference */ +/// + export * from './modules/client-api'; diff --git a/code/lib/preview-api/src/core-client.ts b/code/lib/preview-api/src/core-client.ts index 86513ed4b7f3..18db05321a65 100644 --- a/code/lib/preview-api/src/core-client.ts +++ b/code/lib/preview-api/src/core-client.ts @@ -1 +1,4 @@ +/* eslint-disable @typescript-eslint/triple-slash-reference */ +/// + export * from './modules/core-client'; diff --git a/code/lib/preview-api/src/index.ts b/code/lib/preview-api/src/index.ts index 29f6d8cd56e1..dc1fa93034d3 100644 --- a/code/lib/preview-api/src/index.ts +++ b/code/lib/preview-api/src/index.ts @@ -1,3 +1,6 @@ +/* eslint-disable @typescript-eslint/triple-slash-reference */ +/// + /** * HOOKS API */ diff --git a/code/lib/preview-api/src/modules/addons/hooks.ts b/code/lib/preview-api/src/modules/addons/hooks.ts index 1135c25bf9b2..6c1c7847bbc8 100644 --- a/code/lib/preview-api/src/modules/addons/hooks.ts +++ b/code/lib/preview-api/src/modules/addons/hooks.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { logger } from '@storybook/client-logger'; import type { Renderer, diff --git a/code/lib/preview-api/src/modules/addons/main.ts b/code/lib/preview-api/src/modules/addons/main.ts index d312af273af1..dec90e0f2ab7 100644 --- a/code/lib/preview-api/src/modules/addons/main.ts +++ b/code/lib/preview-api/src/modules/addons/main.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import type { Channel } from '@storybook/channels'; import { mockChannel } from './storybook-channel-mock'; diff --git a/code/lib/preview-api/src/modules/client-api/ClientApi.ts b/code/lib/preview-api/src/modules/client-api/ClientApi.ts index 7c15359f0b58..368c48383019 100644 --- a/code/lib/preview-api/src/modules/client-api/ClientApi.ts +++ b/code/lib/preview-api/src/modules/client-api/ClientApi.ts @@ -1,8 +1,9 @@ /* eslint-disable no-underscore-dangle */ -/// +/* eslint-disable @typescript-eslint/triple-slash-reference */ +/// import { dedent } from 'ts-dedent'; -import global from 'global'; +import { global } from '@storybook/global'; import { logger } from '@storybook/client-logger'; import { toId, sanitize } from '@storybook/csf'; import type { diff --git a/code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts b/code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts index d65e6aaca534..3dcdb605f707 100644 --- a/code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts +++ b/code/lib/preview-api/src/modules/client-api/StoryStoreFacade.ts @@ -1,5 +1,5 @@ /* eslint-disable no-underscore-dangle */ -import global from 'global'; +import { global } from '@storybook/global'; import { dedent } from 'ts-dedent'; import { SynchronousPromise } from 'synchronous-promise'; import { toId, isExportStory, storyNameFromExport } from '@storybook/csf'; diff --git a/code/lib/preview-api/src/modules/client-api/queryparams.ts b/code/lib/preview-api/src/modules/client-api/queryparams.ts index be0c29f201f6..ccaa7193e407 100644 --- a/code/lib/preview-api/src/modules/client-api/queryparams.ts +++ b/code/lib/preview-api/src/modules/client-api/queryparams.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { parse } from 'qs'; export const getQueryParams = () => { diff --git a/code/lib/preview-api/src/modules/core-client/start.test.ts b/code/lib/preview-api/src/modules/core-client/start.test.ts index 8b87a1fd40d2..04cb0fc6e8c5 100644 --- a/code/lib/preview-api/src/modules/core-client/start.test.ts +++ b/code/lib/preview-api/src/modules/core-client/start.test.ts @@ -8,7 +8,7 @@ import { STORY_RENDERED, STORY_UNCHANGED, SET_INDEX } from '@storybook/core-events'; import type { ModuleExports, Path } from '@storybook/types'; -import global from 'global'; +import { global } from '@storybook/global'; import { setGlobalRender } from '../../client-api'; import { waitForRender, @@ -21,9 +21,8 @@ import { import { start as realStart } from './start'; import type { Loadable } from './executeLoadable'; -jest.mock('global', () => ({ +jest.mock('@storybook/global', () => ({ ...globalThis, - // ...jest.requireActual('global'), window: globalThis, history: { replaceState: jest.fn() }, document: { diff --git a/code/lib/preview-api/src/modules/core-client/start.ts b/code/lib/preview-api/src/modules/core-client/start.ts index 9aa2b6d65050..ce76a4a5b627 100644 --- a/code/lib/preview-api/src/modules/core-client/start.ts +++ b/code/lib/preview-api/src/modules/core-client/start.ts @@ -1,5 +1,5 @@ /* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */ -import global from 'global'; +import { global } from '@storybook/global'; import type { Renderer, ArgsStoryFn, Path, ProjectAnnotations } from '@storybook/types'; import { createChannel } from '@storybook/channel-postmessage'; import { FORCE_RE_RENDER } from '@storybook/core-events'; diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx index 96c5fa7fa4e2..4864dfd8c200 100644 --- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx +++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx @@ -1,5 +1,5 @@ import { dedent } from 'ts-dedent'; -import global from 'global'; +import { global } from '@storybook/global'; import { SynchronousPromise } from 'synchronous-promise'; import { CONFIG_ERROR, diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts index a6bebfec9ea5..a8ec32cdf3ab 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts @@ -3,7 +3,7 @@ */ import React from 'react'; -import global from 'global'; +import { global } from '@storybook/global'; import type { RenderContext } from '@storybook/types'; import { expect } from '@jest/globals'; import { addons, mockChannel as createMockChannel } from '../addons'; @@ -30,11 +30,11 @@ jest.mock('@storybook/channel-postmessage', () => ({ createChannel: () => mockCh jest.mock('./WebView'); const { window, document } = global; -jest.mock('global', () => ({ - ...jest.requireActual('global'), +jest.mock('@storybook/global', () => ({ + ...jest.requireActual('@storybook/global'), history: { replaceState: jest.fn() }, document: { - ...jest.requireActual('global').document, + ...jest.requireActual('@storybook/global').document, location: { pathname: 'pathname', search: '?id=*', @@ -96,7 +96,7 @@ describe('PreviewWeb', () => { const docsRoot = window.document.createElement('div'); ( preview.view.prepareForDocs as any as jest.Mock - ).mockReturnValue(docsRoot); + ).mockReturnValue(docsRoot as any); componentOneExports.default.parameters.docs.container.mockImplementationOnce(() => React.createElement('div', {}, 'INSIDE') ); diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index 79e9769c728d..3cc839c642a4 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -3,7 +3,7 @@ */ import { jest, jest as mockJest, it, describe, beforeEach, afterEach, expect } from '@jest/globals'; -import global from 'global'; +import { global } from '@storybook/global'; import merge from 'lodash/merge'; import { CONFIG_ERROR, @@ -59,8 +59,8 @@ const { history, document } = global; const mockStoryIndex = jest.fn(() => storyIndex); let mockFetchResult: any; -jest.mock('global', () => ({ - ...(mockJest.requireActual('global') as any), +jest.mock('@storybook/global', () => ({ + ...(mockJest.requireActual('@storybook/global') as any), history: { replaceState: mockJest.fn() }, document: { location: { diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.tsx index 313effc49134..ae82afb6212a 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.tsx +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.tsx @@ -1,5 +1,5 @@ /* eslint-disable no-underscore-dangle */ -import global from 'global'; +import { global } from '@storybook/global'; import type { Renderer } from '@storybook/types'; import { PreviewWithSelection } from './PreviewWithSelection'; diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx index 069d10758d84..20fe1c96397b 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx @@ -1,5 +1,5 @@ import { dedent } from 'ts-dedent'; -import global from 'global'; +import { global } from '@storybook/global'; import { CURRENT_STORY_WAS_SET, PRELOAD_ENTRIES, diff --git a/code/lib/preview-api/src/modules/preview-web/UrlStore.test.ts b/code/lib/preview-api/src/modules/preview-web/UrlStore.test.ts index 9abba8f7c0e2..95c397e83a03 100644 --- a/code/lib/preview-api/src/modules/preview-web/UrlStore.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/UrlStore.test.ts @@ -1,10 +1,10 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { pathToId, setPath, getSelectionSpecifierFromPath } from './UrlStore'; const { history, document } = global; -jest.mock('global', () => ({ +jest.mock('@storybook/global', () => ({ history: { replaceState: jest.fn() }, document: { location: { diff --git a/code/lib/preview-api/src/modules/preview-web/UrlStore.ts b/code/lib/preview-api/src/modules/preview-web/UrlStore.ts index d0e692011da5..16d66ba7f6b6 100644 --- a/code/lib/preview-api/src/modules/preview-web/UrlStore.ts +++ b/code/lib/preview-api/src/modules/preview-web/UrlStore.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import qs from 'qs'; import type { ViewMode } from '@storybook/types'; diff --git a/code/lib/preview-api/src/modules/preview-web/WebView.ts b/code/lib/preview-api/src/modules/preview-web/WebView.ts index 2ce3c6ecabab..5d038e5230b4 100644 --- a/code/lib/preview-api/src/modules/preview-web/WebView.ts +++ b/code/lib/preview-api/src/modules/preview-web/WebView.ts @@ -1,5 +1,5 @@ /* eslint-disable import/no-extraneous-dependencies */ -import global from 'global'; +import { global } from '@storybook/global'; import { logger } from '@storybook/client-logger'; import AnsiToHtml from 'ansi-to-html'; import { dedent } from 'ts-dedent'; @@ -78,7 +78,7 @@ export class WebView implements View { } storyRoot(): HTMLElement { - return document.getElementById('storybook-root'); + return document.getElementById('storybook-root')!; } prepareForDocs() { @@ -89,12 +89,12 @@ export class WebView implements View { } docsRoot(): HTMLElement { - return document.getElementById('storybook-docs'); + return document.getElementById('storybook-docs')!; } applyLayout(layout: Layout = 'padded') { if (layout === 'none') { - document.body.classList.remove(this.currentLayoutClass); + document.body.classList.remove(this.currentLayoutClass!); this.currentLayoutClass = null; return; } @@ -103,7 +103,7 @@ export class WebView implements View { const layoutClass = layoutClassMap[layout]; - document.body.classList.remove(this.currentLayoutClass); + document.body.classList.remove(this.currentLayoutClass!); document.body.classList.add(layoutClass); this.currentLayoutClass = layoutClass; } @@ -137,8 +137,8 @@ export class WebView implements View { detail = parts.slice(1).join('\n'); } - document.getElementById('error-message').innerHTML = ansiConverter.toHtml(header); - document.getElementById('error-stack').innerHTML = ansiConverter.toHtml(detail); + document.getElementById('error-message')!.innerHTML = ansiConverter.toHtml(header); + document.getElementById('error-stack')!.innerHTML = ansiConverter.toHtml(detail); this.showMode(Mode.ERROR); } diff --git a/code/lib/preview-api/src/modules/preview-web/simulate-pageload.test.ts b/code/lib/preview-api/src/modules/preview-web/simulate-pageload.test.ts index 12076059ceec..ec5f2051958d 100644 --- a/code/lib/preview-api/src/modules/preview-web/simulate-pageload.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/simulate-pageload.test.ts @@ -2,7 +2,7 @@ * @jest-environment jsdom */ -import global from 'global'; +import { global } from '@storybook/global'; import { simulatePageLoad } from './simulate-pageload'; const { document } = global; diff --git a/code/lib/preview-api/src/modules/preview-web/simulate-pageload.ts b/code/lib/preview-api/src/modules/preview-web/simulate-pageload.ts index 23d40a994ce4..0914968b45f5 100644 --- a/code/lib/preview-api/src/modules/preview-web/simulate-pageload.ts +++ b/code/lib/preview-api/src/modules/preview-web/simulate-pageload.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; const { document } = global; diff --git a/code/lib/preview-api/src/modules/store/StoryStore.test.ts b/code/lib/preview-api/src/modules/store/StoryStore.test.ts index 7f538cc8ee7c..bb1ebcaedec8 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.test.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.test.ts @@ -1,5 +1,5 @@ import type { Renderer, ProjectAnnotations, StoryIndex } from '@storybook/types'; -import global from 'global'; +import { global } from '@storybook/global'; import { expect } from '@jest/globals'; import { prepareStory } from './csf/prepareStory'; @@ -15,8 +15,8 @@ jest.mock('./csf/processCSFFile', () => ({ processCSFFile: jest.fn(jest.requireActual('./csf/processCSFFile').processCSFFile), })); -jest.mock('global', () => ({ - ...(jest.requireActual('global') as any), +jest.mock('@storybook/global', () => ({ + ...(jest.requireActual('@storybook/global') as any), FEATURES: { breakingChangesV7: true, }, @@ -985,10 +985,10 @@ describe('StoryStore', () => { describe('getStoriesJsonData', () => { describe('in back-compat mode', () => { beforeEach(() => { - global.FEATURES.breakingChangesV7 = false; + global.FEATURES!.breakingChangesV7 = false; }); afterEach(() => { - global.FEATURES.breakingChangesV7 = true; + global.FEATURES!.breakingChangesV7 = true; }); it('maps stories list to payload correctly', async () => { const store = new StoryStore(); diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts index bccf030a7bba..fe22d8a38d45 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts @@ -1,6 +1,6 @@ /// ; -import global from 'global'; +import { global } from '@storybook/global'; import { expect } from '@jest/globals'; import type { Renderer, @@ -14,8 +14,8 @@ import { addons, HooksContext } from '../../addons'; import { NO_TARGET_NAME } from '../args'; import { prepareStory } from './prepareStory'; -jest.mock('global', () => ({ - ...(jest.requireActual('global') as any), +jest.mock('@storybook/global', () => ({ + ...(jest.requireActual('@storybook/global') as any), FEATURES: { breakingChangesV7: true, }, diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts index 5aab8a88ef92..7e65a6010426 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts @@ -1,6 +1,6 @@ import { dedent } from 'ts-dedent'; import deprecate from 'util-deprecate'; -import global from 'global'; +import { global } from '@storybook/global'; import type { Renderer, diff --git a/code/lib/preview-api/src/preview-web.ts b/code/lib/preview-api/src/preview-web.ts index 1f0814fb7af6..a22e9cb03234 100644 --- a/code/lib/preview-api/src/preview-web.ts +++ b/code/lib/preview-api/src/preview-web.ts @@ -1 +1,4 @@ +/* eslint-disable @typescript-eslint/triple-slash-reference */ +/// + export * from './modules/preview-web'; diff --git a/code/lib/preview-api/src/store.ts b/code/lib/preview-api/src/store.ts index 33f273a96034..fa89863e406e 100644 --- a/code/lib/preview-api/src/store.ts +++ b/code/lib/preview-api/src/store.ts @@ -1 +1,4 @@ +/* eslint-disable @typescript-eslint/triple-slash-reference */ +/// + export * from './modules/store'; diff --git a/code/lib/preview-api/src/typings.d.ts b/code/lib/preview-api/src/typings.d.ts index a772e5d9a51d..372d59d1ca4c 100644 --- a/code/lib/preview-api/src/typings.d.ts +++ b/code/lib/preview-api/src/typings.d.ts @@ -32,10 +32,6 @@ var __STORYBOOK_STORY_STORE__: any; var __STORYBOOK_ADDONS_PREVIEW: any; var STORYBOOK_HOOKS_CONTEXT: any; -declare module 'global' { - export default globalThis; -} - declare module 'ansi-to-html'; declare class AnsiToHtml { constructor(options: { escapeHtml: boolean }); diff --git a/code/lib/router/package.json b/code/lib/router/package.json index dd55a817333e..5690b43d1a2e 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -52,8 +52,8 @@ "qs": "^6.10.0" }, "devDependencies": { + "@storybook/global": "^5.0.0", "dequal": "^2.0.2", - "global": "^4.4.0", "lodash": "^4.17.21", "react-router-dom": "6.0.2", "ts-dedent": "^2.0.0", diff --git a/code/lib/router/src/router.tsx b/code/lib/router/src/router.tsx index 413ed5aba6cc..4005dc4b7804 100644 --- a/code/lib/router/src/router.tsx +++ b/code/lib/router/src/router.tsx @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import React, { useCallback } from 'react'; import type { ReactNode } from 'react'; diff --git a/code/lib/router/src/typings.d.ts b/code/lib/router/src/typings.d.ts index 4748265af4d5..e69de29bb2d1 100644 --- a/code/lib/router/src/typings.d.ts +++ b/code/lib/router/src/typings.d.ts @@ -1,3 +0,0 @@ -declare module 'global' { - export default globalThis; -} diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index 5ad2a0ec8d3d..59cab727b266 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -50,6 +50,7 @@ "dependencies": { "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", "@storybook/client-logger": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "memoizerific": "^1.11.3" }, "devDependencies": { @@ -61,7 +62,6 @@ "@types/node": "^16.0.0", "deep-object-diff": "^1.1.0", "fs-extra": "^9.0.1", - "global": "^4.4.0", "polished": "^4.2.2", "ts-dedent": "^2.0.0", "typescript": "~4.9.3" diff --git a/code/lib/theming/src/tests/util.test.js b/code/lib/theming/src/tests/util.test.js index 521cefbfe9df..32afbb7c737e 100644 --- a/code/lib/theming/src/tests/util.test.js +++ b/code/lib/theming/src/tests/util.test.js @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { lightenColor as lighten, darkenColor as darken, getPreferredColorScheme } from '../utils'; const { window: globalWindow } = global; @@ -80,7 +80,7 @@ describe('utils', () => { describe('getPreferredColorScheme', () => { it('should return "light" if "window" is unavailable', () => { - jest.mock('global', () => ({ window: undefined })); + jest.mock('@storybook/global', () => ({ window: undefined })); const colorScheme = getPreferredColorScheme(); expect(colorScheme).toBe('light'); diff --git a/code/lib/theming/src/typings.d.ts b/code/lib/theming/src/typings.d.ts index 433b49ce5005..151bb56deda3 100644 --- a/code/lib/theming/src/typings.d.ts +++ b/code/lib/theming/src/typings.d.ts @@ -1,6 +1,2 @@ // todo the following packages need definition files or a TS migration declare module 'react-inspector'; - -declare module 'global' { - export default globalThis; -} diff --git a/code/lib/theming/src/utils.ts b/code/lib/theming/src/utils.ts index 2c94ea94e8ce..cbb5d7a2cf07 100644 --- a/code/lib/theming/src/utils.ts +++ b/code/lib/theming/src/utils.ts @@ -1,5 +1,5 @@ import { rgba, lighten, darken } from 'polished'; -import global from 'global'; +import { global } from '@storybook/global'; import { logger } from '@storybook/client-logger'; diff --git a/code/lib/types/src/typings.d.ts b/code/lib/types/src/typings.d.ts index 4748265af4d5..e69de29bb2d1 100644 --- a/code/lib/types/src/typings.d.ts +++ b/code/lib/types/src/typings.d.ts @@ -1,3 +0,0 @@ -declare module 'global' { - export default globalThis; -} diff --git a/code/package.json b/code/package.json index 3f1e32f9a221..017a01d31365 100644 --- a/code/package.json +++ b/code/package.json @@ -190,6 +190,7 @@ "@storybook/docs-tools": "workspace:*", "@storybook/ember": "workspace:*", "@storybook/eslint-config-storybook": "^3.1.2", + "@storybook/global": "^5.0.0", "@storybook/html": "workspace:*", "@storybook/html-vite": "workspace:*", "@storybook/html-webpack5": "workspace:*", @@ -293,7 +294,6 @@ "fs-extra": "^9.0.1", "github-release-from-changelog": "^2.1.1", "glob": "^7.1.6", - "global": "^4.4.0", "http-server": "^0.12.3", "husky": "^4.3.7", "jest": "^29.3.1", diff --git a/code/presets/react-webpack/src/typings.d.ts b/code/presets/react-webpack/src/typings.d.ts index 2c82a91afe5e..53aa2b04a775 100644 --- a/code/presets/react-webpack/src/typings.d.ts +++ b/code/presets/react-webpack/src/typings.d.ts @@ -1,7 +1,3 @@ -declare module 'global' { - export default globalThis; -} - // TODO: Replace, as soon as @types/react-dom 17.0.14 is used // Source: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/fb0f14b7a35cde26ffaa82e7536c062e593e9ae6/types/react-dom/client.d.ts declare module 'react-dom/client' { diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 5d8eeccc2878..ea75ab32736f 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -57,9 +57,9 @@ "dependencies": { "@storybook/core-server": "7.0.0-beta.2", "@storybook/core-webpack": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/server": "7.0.0-beta.2", "@types/node": "^16.0.0", - "global": "^4.4.0", "safe-identifier": "^0.4.1", "ts-dedent": "^2.0.0", "yaml-loader": "^0.8.0" diff --git a/code/presets/server-webpack/src/typings.d.ts b/code/presets/server-webpack/src/typings.d.ts index eddff6bbb3ab..cbeccdbb15f7 100644 --- a/code/presets/server-webpack/src/typings.d.ts +++ b/code/presets/server-webpack/src/typings.d.ts @@ -1,6 +1,2 @@ -declare module 'global' { - export default globalThis; -} - // will be provided by the webpack define plugin declare var NODE_ENV: string | undefined; diff --git a/code/presets/vue3-webpack/src/typings.d.ts b/code/presets/vue3-webpack/src/typings.d.ts index 7f0d82120c96..a045728260a0 100644 --- a/code/presets/vue3-webpack/src/typings.d.ts +++ b/code/presets/vue3-webpack/src/typings.d.ts @@ -1,7 +1,3 @@ -declare module 'global' { - export default globalThis; -} - declare module 'vue-loader' { export const VueLoaderPlugin: any; } diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 9bb330c47717..8a3bfad1c38b 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -53,9 +53,9 @@ "dependencies": { "@storybook/core-client": "7.0.0-beta.2", "@storybook/docs-tools": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", - "global": "^4.4.0", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/renderers/html/src/globals.ts b/code/renderers/html/src/globals.ts index 7d924c74dd19..ae50d238fbf9 100644 --- a/code/renderers/html/src/globals.ts +++ b/code/renderers/html/src/globals.ts @@ -1,6 +1,4 @@ -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore - use ts-ignore instead of ts-expect-error to fix type issues in Angular sandbox -import global from 'global'; +import { global } from '@storybook/global'; const { window: globalWindow } = global; diff --git a/code/renderers/html/src/render.ts b/code/renderers/html/src/render.ts index 752e2283aeda..a15f9b860276 100644 --- a/code/renderers/html/src/render.ts +++ b/code/renderers/html/src/render.ts @@ -1,6 +1,5 @@ /* eslint-disable no-param-reassign */ -// @ts-expect-error (Converted from ts-ignore) -import global from 'global'; +import { global } from '@storybook/global'; import { dedent } from 'ts-dedent'; import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-api'; diff --git a/code/renderers/html/src/typings.d.ts b/code/renderers/html/src/typings.d.ts new file mode 100644 index 000000000000..cdcf9483c5fc --- /dev/null +++ b/code/renderers/html/src/typings.d.ts @@ -0,0 +1 @@ +declare var STORYBOOK_ENV: 'HTML'; diff --git a/code/renderers/html/template/components/index.js b/code/renderers/html/template/components/index.js index 4d08c9813587..45c91d5c8a71 100644 --- a/code/renderers/html/template/components/index.js +++ b/code/renderers/html/template/components/index.js @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { Button } from './Button'; import { Pre } from './Pre'; diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index a8b1f3d04b01..5a968aff845a 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -52,9 +52,9 @@ }, "dependencies": { "@storybook/core-client": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", - "global": "^4.4.0", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/renderers/preact/src/globals.ts b/code/renderers/preact/src/globals.ts index 02a952c2aac0..2d0b4060e445 100644 --- a/code/renderers/preact/src/globals.ts +++ b/code/renderers/preact/src/globals.ts @@ -1,5 +1,4 @@ -// @ts-expect-error (Converted from ts-ignore) -import global from 'global'; +import { global } from '@storybook/global'; const { window: globalWindow } = global; diff --git a/code/renderers/preact/src/typings.d.ts b/code/renderers/preact/src/typings.d.ts new file mode 100644 index 000000000000..b091271db976 --- /dev/null +++ b/code/renderers/preact/src/typings.d.ts @@ -0,0 +1 @@ +declare var STORYBOOK_ENV: 'preact'; diff --git a/code/renderers/preact/template/components/index.js b/code/renderers/preact/template/components/index.js index d952d26f9b1f..e487348995ff 100644 --- a/code/renderers/preact/template/components/index.js +++ b/code/renderers/preact/template/components/index.js @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { Button } from './Button.jsx'; import { Pre } from './Pre.jsx'; diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index b482d78d295b..c45c1e6c4c00 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -55,6 +55,7 @@ "@storybook/client-logger": "7.0.0-beta.2", "@storybook/core-client": "7.0.0-beta.2", "@storybook/docs-tools": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", "@types/estree": "^0.0.51", @@ -63,7 +64,6 @@ "acorn-jsx": "^5.3.1", "acorn-walk": "^7.2.0", "escodegen": "^2.0.0", - "global": "^4.4.0", "html-tags": "^3.1.0", "lodash": "^4.17.21", "prop-types": "^15.7.2", diff --git a/code/renderers/react/src/globals.ts b/code/renderers/react/src/globals.ts index e50560a3c9fe..9df06c57f368 100644 --- a/code/renderers/react/src/globals.ts +++ b/code/renderers/react/src/globals.ts @@ -1,5 +1,4 @@ -// @ts-expect-error (Converted from ts-ignore) -import global from 'global'; +import { global } from '@storybook/global'; const { window: globalWindow } = global; diff --git a/code/renderers/react/src/render.tsx b/code/renderers/react/src/render.tsx index cc3f07f3e2c4..383aad4a5313 100644 --- a/code/renderers/react/src/render.tsx +++ b/code/renderers/react/src/render.tsx @@ -1,5 +1,4 @@ -// @ts-expect-error (Converted from ts-ignore) -import global from 'global'; +import { global } from '@storybook/global'; import type { FC, ReactElement } from 'react'; import React, { diff --git a/code/renderers/react/src/typings.d.ts b/code/renderers/react/src/typings.d.ts index 53aa2b04a775..46735514c54e 100644 --- a/code/renderers/react/src/typings.d.ts +++ b/code/renderers/react/src/typings.d.ts @@ -42,3 +42,5 @@ declare module 'react-dom/client' { options?: HydrationOptions ): Root; } +declare var STORYBOOK_ENV: 'react'; +declare var FRAMEWORK_OPTIONS: any; diff --git a/code/renderers/react/template/components/index.js b/code/renderers/react/template/components/index.js index dd5fc33a43bc..88212aaa952b 100644 --- a/code/renderers/react/template/components/index.js +++ b/code/renderers/react/template/components/index.js @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { Button } from './Button.jsx'; import { Pre } from './Pre.jsx'; diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index c5944505b1e1..693529f5395b 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -52,9 +52,9 @@ }, "dependencies": { "@storybook/core-client": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", - "global": "^4.4.0", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/renderers/server/src/globals.ts b/code/renderers/server/src/globals.ts index 58f494cf5e56..f207a23048bd 100644 --- a/code/renderers/server/src/globals.ts +++ b/code/renderers/server/src/globals.ts @@ -1,5 +1,4 @@ -// @ts-expect-error (Converted from ts-ignore) -import global from 'global'; +import { global } from '@storybook/global'; const { window: globalWindow } = global; diff --git a/code/renderers/server/src/render.ts b/code/renderers/server/src/render.ts index d72538e3ae72..b0276f377013 100644 --- a/code/renderers/server/src/render.ts +++ b/code/renderers/server/src/render.ts @@ -1,6 +1,5 @@ /* eslint-disable no-param-reassign */ -// @ts-expect-error (Converted from ts-ignore) -import global from 'global'; +import { global } from '@storybook/global'; import { dedent } from 'ts-dedent'; import type { RenderContext } from '@storybook/types'; diff --git a/code/renderers/server/src/typings.d.ts b/code/renderers/server/src/typings.d.ts new file mode 100644 index 000000000000..2517fab3c095 --- /dev/null +++ b/code/renderers/server/src/typings.d.ts @@ -0,0 +1 @@ +declare var STORYBOOK_ENV: 'SERVER'; diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 98da0f48e0e3..462479723397 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -58,9 +58,9 @@ "@storybook/client-logger": "7.0.0-beta.2", "@storybook/core-client": "7.0.0-beta.2", "@storybook/docs-tools": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", - "global": "^4.4.0", "sveltedoc-parser": "^4.2.1", "type-fest": "2.19.0" }, diff --git a/code/renderers/svelte/src/globals.ts b/code/renderers/svelte/src/globals.ts index a2fb5c9dad10..a9adc16b0908 100644 --- a/code/renderers/svelte/src/globals.ts +++ b/code/renderers/svelte/src/globals.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; const { window: globalWindow } = global; diff --git a/code/renderers/svelte/src/typings.d.ts b/code/renderers/svelte/src/typings.d.ts index 4e401156f1ea..09aff65be53a 100644 --- a/code/renderers/svelte/src/typings.d.ts +++ b/code/renderers/svelte/src/typings.d.ts @@ -1,5 +1 @@ declare var STORYBOOK_ENV: 'svelte'; - -declare module 'global' { - export default globalThis; -} diff --git a/code/renderers/svelte/template/components/index.js b/code/renderers/svelte/template/components/index.js index e01d07856369..5eb0b63bc7a4 100644 --- a/code/renderers/svelte/template/components/index.js +++ b/code/renderers/svelte/template/components/index.js @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import Button from './Button.svelte'; import Pre from './Pre.svelte'; diff --git a/code/renderers/svelte/template/stories/views/ButtonView.svelte b/code/renderers/svelte/template/stories/views/ButtonView.svelte index d957e58b21cf..02d21e532347 100644 --- a/code/renderers/svelte/template/stories/views/ButtonView.svelte +++ b/code/renderers/svelte/template/stories/views/ButtonView.svelte @@ -3,7 +3,7 @@ * @component Button View * @wrapper */ - import globalThis from 'global'; + import { global as globalThis } from '@storybook/global'; const Button = globalThis.Components.Button; /** diff --git a/code/renderers/vue/package.json b/code/renderers/vue/package.json index 4abac4c39dd7..c88d6485ca05 100644 --- a/code/renderers/vue/package.json +++ b/code/renderers/vue/package.json @@ -54,9 +54,9 @@ "@storybook/client-logger": "7.0.0-beta.2", "@storybook/core-client": "7.0.0-beta.2", "@storybook/docs-tools": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", - "global": "^4.4.0", "ts-dedent": "^2.0.0", "type-fest": "2.19.0" }, diff --git a/code/renderers/vue/src/globals.ts b/code/renderers/vue/src/globals.ts index 2fec84f69602..f91a342510a2 100644 --- a/code/renderers/vue/src/globals.ts +++ b/code/renderers/vue/src/globals.ts @@ -1,5 +1,4 @@ -// @ts-expect-error (Converted from ts-ignore) -import global from 'global'; +import { global } from '@storybook/global'; const { window: globalWindow } = global; diff --git a/code/renderers/vue/src/typings.d.ts b/code/renderers/vue/src/typings.d.ts new file mode 100644 index 000000000000..437680c4e974 --- /dev/null +++ b/code/renderers/vue/src/typings.d.ts @@ -0,0 +1 @@ +declare var STORYBOOK_ENV: 'vue'; diff --git a/code/renderers/vue/template/components/index.js b/code/renderers/vue/template/components/index.js index bc9a1b67a30b..342dc4a7a988 100644 --- a/code/renderers/vue/template/components/index.js +++ b/code/renderers/vue/template/components/index.js @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import Vue from 'vue'; import Button from './Button.vue'; diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index f4c259145e48..0dccc74be778 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -53,9 +53,9 @@ "dependencies": { "@storybook/core-client": "7.0.0-beta.2", "@storybook/docs-tools": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", - "global": "^4.4.0", "ts-dedent": "^2.0.0", "type-fest": "2.19.0" }, diff --git a/code/renderers/vue3/src/globals.ts b/code/renderers/vue3/src/globals.ts index 5a17ebf65326..58d62a43b4b6 100644 --- a/code/renderers/vue3/src/globals.ts +++ b/code/renderers/vue3/src/globals.ts @@ -1,5 +1,4 @@ -// @ts-expect-error (Converted from ts-ignore) -import global from 'global'; +import { global } from '@storybook/global'; const { window: globalWindow } = global; diff --git a/code/renderers/vue3/src/typings.d.ts b/code/renderers/vue3/src/typings.d.ts new file mode 100644 index 000000000000..f4beceae1d63 --- /dev/null +++ b/code/renderers/vue3/src/typings.d.ts @@ -0,0 +1 @@ +declare var STORYBOOK_ENV: 'vue3'; diff --git a/code/renderers/vue3/template/components/index.js b/code/renderers/vue3/template/components/index.js index af1301e7e2ae..6ecc6f3997c1 100644 --- a/code/renderers/vue3/template/components/index.js +++ b/code/renderers/vue3/template/components/index.js @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import Button from './Button.vue'; import Pre from './Pre.vue'; diff --git a/code/renderers/vue3/template/stories/preview.js b/code/renderers/vue3/template/stories/preview.js index 1b2cbeae203b..c57ed02a172a 100644 --- a/code/renderers/vue3/template/stories/preview.js +++ b/code/renderers/vue3/template/stories/preview.js @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; // eslint-disable-next-line import/no-extraneous-dependencies import { setup } from '@storybook/vue3'; diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 20e3e420004f..be4f32653963 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -56,10 +56,10 @@ "@storybook/client-logger": "7.0.0-beta.2", "@storybook/core-client": "7.0.0-beta.2", "@storybook/docs-tools": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/manager-api": "7.0.0-beta.2", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", - "global": "^4.4.0", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/input.js b/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/input.js index 0631666f8714..68087cf9aa09 100644 --- a/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/input.js +++ b/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/input.js @@ -1,5 +1,4 @@ -// @ts-expect-error (Converted from ts-ignore) -import global from 'global'; +import { global } from '@storybook/global'; import { LitElement, html, css } from 'lit-element'; diff --git a/code/renderers/web-components/src/docs/custom-elements.test.ts b/code/renderers/web-components/src/docs/custom-elements.test.ts index e8ba140e7a54..7ad642756d32 100644 --- a/code/renderers/web-components/src/docs/custom-elements.test.ts +++ b/code/renderers/web-components/src/docs/custom-elements.test.ts @@ -1,5 +1,5 @@ /* eslint-disable no-underscore-dangle */ -import global from 'global'; +import { global } from '@storybook/global'; import { extractArgTypes } from './custom-elements'; import customElementsManifest from './__testfixtures__/custom-elements.json'; diff --git a/code/renderers/web-components/src/framework-api.ts b/code/renderers/web-components/src/framework-api.ts index 3f1d6c37385a..f1791641b2c6 100644 --- a/code/renderers/web-components/src/framework-api.ts +++ b/code/renderers/web-components/src/framework-api.ts @@ -1,5 +1,6 @@ /* eslint-disable no-underscore-dangle */ -/* global window */ + +import { global } from '@storybook/global'; export function isValidComponent(tagName: string) { if (!tagName) { @@ -30,16 +31,13 @@ export function isValidMetaData(customElements: any) { * @param customElements any for now as spec is not super stable yet */ export function setCustomElements(customElements: any) { - // @ts-expect-error (Converted from ts-ignore) - window.__STORYBOOK_CUSTOM_ELEMENTS__ = customElements; + global.__STORYBOOK_CUSTOM_ELEMENTS__ = customElements; } export function setCustomElementsManifest(customElements: any) { - // @ts-expect-error (Converted from ts-ignore) - window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__ = customElements; + global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__ = customElements; } export function getCustomElements() { - // @ts-expect-error (Converted from ts-ignore) - return window.__STORYBOOK_CUSTOM_ELEMENTS__ || window.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__; + return global.__STORYBOOK_CUSTOM_ELEMENTS__ || global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__; } diff --git a/code/renderers/web-components/src/globals.ts b/code/renderers/web-components/src/globals.ts index 3a96cebeb784..7f8f0ff9b35e 100644 --- a/code/renderers/web-components/src/globals.ts +++ b/code/renderers/web-components/src/globals.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; const { window: globalWindow } = global; diff --git a/code/renderers/web-components/src/index.ts b/code/renderers/web-components/src/index.ts index ffa29ea28b6d..4234d00e0726 100644 --- a/code/renderers/web-components/src/index.ts +++ b/code/renderers/web-components/src/index.ts @@ -1,6 +1,6 @@ /// -import global from 'global'; +import { global } from '@storybook/global'; import './globals'; diff --git a/code/renderers/web-components/src/render.ts b/code/renderers/web-components/src/render.ts index cf8b24546ef5..350128dcd8d2 100644 --- a/code/renderers/web-components/src/render.ts +++ b/code/renderers/web-components/src/render.ts @@ -1,7 +1,7 @@ /* eslint-disable no-param-reassign */ /* eslint-disable @typescript-eslint/ban-ts-comment */ -import global from 'global'; +import { global } from '@storybook/global'; import { dedent } from 'ts-dedent'; import { render as litRender } from 'lit-html'; diff --git a/code/renderers/web-components/src/typings.d.ts b/code/renderers/web-components/src/typings.d.ts index eaddf16ae8ec..5563d6cc27a6 100644 --- a/code/renderers/web-components/src/typings.d.ts +++ b/code/renderers/web-components/src/typings.d.ts @@ -1,5 +1,4 @@ +/* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */ declare var STORYBOOK_ENV: 'web-components'; - -declare module 'global' { - export default globalThis; -} +declare var __STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__: any; +declare var __STORYBOOK_CUSTOM_ELEMENTS__: any; diff --git a/code/renderers/web-components/template/components/Button.js b/code/renderers/web-components/template/components/Button.js index 6baef52d5cc0..b52a4cdc24d2 100644 --- a/code/renderers/web-components/template/components/Button.js +++ b/code/renderers/web-components/template/components/Button.js @@ -1,5 +1,5 @@ /* eslint-disable import/no-extraneous-dependencies */ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { html, LitElement } from 'lit'; const { CustomEvent, customElements } = globalThis; diff --git a/code/renderers/web-components/template/components/Form.js b/code/renderers/web-components/template/components/Form.js index fe49e5174042..6e5136389610 100644 --- a/code/renderers/web-components/template/components/Form.js +++ b/code/renderers/web-components/template/components/Form.js @@ -1,5 +1,5 @@ /* eslint-disable import/no-extraneous-dependencies */ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { html, LitElement } from 'lit'; const { CustomEvent, customElements } = globalThis; diff --git a/code/renderers/web-components/template/components/Html.js b/code/renderers/web-components/template/components/Html.js index e32977aafda9..857883c122fb 100644 --- a/code/renderers/web-components/template/components/Html.js +++ b/code/renderers/web-components/template/components/Html.js @@ -1,5 +1,5 @@ /* eslint-disable import/no-extraneous-dependencies */ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { LitElement } from 'lit'; const { customElements } = globalThis; diff --git a/code/renderers/web-components/template/components/Pre.js b/code/renderers/web-components/template/components/Pre.js index c1a4d11422d1..26da52299801 100644 --- a/code/renderers/web-components/template/components/Pre.js +++ b/code/renderers/web-components/template/components/Pre.js @@ -1,5 +1,5 @@ /* eslint-disable import/extensions, import/no-extraneous-dependencies */ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { html, LitElement } from 'lit'; import { styleMap } from 'lit-html/directives/style-map.js'; diff --git a/code/renderers/web-components/template/components/index.js b/code/renderers/web-components/template/components/index.js index d41925728dd3..98d95bdd8817 100644 --- a/code/renderers/web-components/template/components/index.js +++ b/code/renderers/web-components/template/components/index.js @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { ButtonTag } from './Button'; import { FormTag } from './Form'; diff --git a/code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js b/code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js index d8ef04350983..6be796a5fa4e 100644 --- a/code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js +++ b/code/renderers/web-components/template/stories/demo-wc-card/DemoWcCard.js @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { LitElement, html } from 'lit'; // eslint-disable-next-line import/extensions import { demoWcCardStyle } from './demoWcCardStyle.css.js'; diff --git a/code/ui/.storybook/preview.tsx b/code/ui/.storybook/preview.tsx index 76f2ec0d4901..f033b0e62ab5 100644 --- a/code/ui/.storybook/preview.tsx +++ b/code/ui/.storybook/preview.tsx @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import React, { Fragment, useEffect } from 'react'; import isChromatic from 'chromatic/isChromatic'; import { diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 7e1c072a0d29..0b7a5a7312f2 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -49,6 +49,7 @@ "@storybook/core-events": "7.0.0-beta.2", "@storybook/csf": "next", "@storybook/docs-tools": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/manager-api": "7.0.0-beta.2", "@storybook/preview-api": "7.0.0-beta.2", "@storybook/theming": "7.0.0-beta.2", @@ -56,7 +57,6 @@ "@types/lodash": "^4.14.167", "color-convert": "^2.0.1", "dequal": "^2.0.2", - "global": "^4.4.0", "lodash": "^4.17.21", "markdown-to-jsx": "^7.1.3", "memoizerific": "^1.11.3", diff --git a/code/ui/blocks/src/blocks/DocsContainer.tsx b/code/ui/blocks/src/blocks/DocsContainer.tsx index 377f6946e786..2885838ac926 100644 --- a/code/ui/blocks/src/blocks/DocsContainer.tsx +++ b/code/ui/blocks/src/blocks/DocsContainer.tsx @@ -1,6 +1,6 @@ import type { FunctionComponent, ReactNode } from 'react'; import React, { useEffect } from 'react'; -import global from 'global'; +import { global } from '@storybook/global'; import type { ThemeVars } from '@storybook/theming'; import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming'; import type { Renderer } from '@storybook/types'; diff --git a/code/ui/blocks/src/blocks/DocsContext.ts b/code/ui/blocks/src/blocks/DocsContext.ts index 30a21fa90226..b9cd251d3f13 100644 --- a/code/ui/blocks/src/blocks/DocsContext.ts +++ b/code/ui/blocks/src/blocks/DocsContext.ts @@ -1,7 +1,7 @@ /* eslint-disable no-underscore-dangle */ import type { Context } from 'react'; import { createContext } from 'react'; -import global from 'global'; +import { global } from '@storybook/global'; import type { DocsContextProps, Renderer } from '@storybook/types'; diff --git a/code/ui/blocks/src/blocks/mdx.tsx b/code/ui/blocks/src/blocks/mdx.tsx index c7e14328a6ac..1f62dab2bc1a 100644 --- a/code/ui/blocks/src/blocks/mdx.tsx +++ b/code/ui/blocks/src/blocks/mdx.tsx @@ -2,7 +2,7 @@ import type { FC, SyntheticEvent } from 'react'; import React, { useContext } from 'react'; import { NAVIGATE_URL } from '@storybook/core-events'; import { Code, components } from '@storybook/components'; -import global from 'global'; +import { global } from '@storybook/global'; import { styled } from '@storybook/theming'; import { Source } from '../components'; import type { DocsContextProps } from './DocsContext'; diff --git a/code/ui/blocks/src/components/IFrame.tsx b/code/ui/blocks/src/components/IFrame.tsx index be3460cb7f7b..d3f3dfc0c749 100644 --- a/code/ui/blocks/src/components/IFrame.tsx +++ b/code/ui/blocks/src/components/IFrame.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import global from 'global'; +import { global } from '@storybook/global'; const { window: globalWindow } = global; diff --git a/code/ui/blocks/src/components/Preview.tsx b/code/ui/blocks/src/components/Preview.tsx index f93ba28cdf2f..a7fa5d298fd0 100644 --- a/code/ui/blocks/src/components/Preview.tsx +++ b/code/ui/blocks/src/components/Preview.tsx @@ -3,7 +3,7 @@ import React, { Children, useCallback, useState } from 'react'; import { darken } from 'polished'; import { styled } from '@storybook/theming'; -import global from 'global'; +import { global } from '@storybook/global'; import { ActionBar, Zoom } from '@storybook/components'; import type { ActionItem } from '@storybook/components'; diff --git a/code/ui/blocks/src/components/Story.tsx b/code/ui/blocks/src/components/Story.tsx index 4719a8ab6f4f..01b677ae6a96 100644 --- a/code/ui/blocks/src/components/Story.tsx +++ b/code/ui/blocks/src/components/Story.tsx @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import type { ElementType, FunctionComponent } from 'react'; import React, { createElement, Fragment } from 'react'; import type { Parameters } from '@storybook/types'; diff --git a/code/ui/blocks/src/controls/Object.tsx b/code/ui/blocks/src/controls/Object.tsx index fbd0a91ab9ad..e82dffba166c 100644 --- a/code/ui/blocks/src/controls/Object.tsx +++ b/code/ui/blocks/src/controls/Object.tsx @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import cloneDeep from 'lodash/cloneDeep'; import type { ComponentProps, SyntheticEvent, FC, FocusEvent } from 'react'; import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react'; diff --git a/code/ui/blocks/src/typings.d.ts b/code/ui/blocks/src/typings.d.ts index 96364c823bea..da56fcf64777 100644 --- a/code/ui/blocks/src/typings.d.ts +++ b/code/ui/blocks/src/typings.d.ts @@ -5,7 +5,3 @@ declare module '*.md'; declare var __DOCS_CONTEXT__: any; declare var PREVIEW_URL: any; - -declare module 'global' { - export default globalThis; -} diff --git a/code/ui/components/package.json b/code/ui/components/package.json index ce4766fa805c..559551bc0fa6 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -53,6 +53,7 @@ "dependencies": { "@storybook/client-logger": "7.0.0-beta.2", "@storybook/csf": "next", + "@storybook/global": "^5.0.0", "@storybook/theming": "7.0.0-beta.2", "@storybook/types": "7.0.0-beta.2", "memoizerific": "^1.11.3", @@ -64,7 +65,6 @@ "@types/react-syntax-highlighter": "11.0.5", "@types/util-deprecate": "^1.0.0", "css": "^3.0.0", - "global": "^4.4.0", "overlayscrollbars": "^1.13.1", "polished": "^4.2.2", "prettier": "^2.8.0", diff --git a/code/ui/components/scripts/writeCssScript.js b/code/ui/components/scripts/writeCssScript.js index 011c1e5543e5..4392c6ad3158 100644 --- a/code/ui/components/scripts/writeCssScript.js +++ b/code/ui/components/scripts/writeCssScript.js @@ -6,7 +6,7 @@ const fs = require('fs'); const { parse } = require('css'); -const { isNaN } = require('global'); +const { isNaN } = require('@storybook/global'); const INPUT = require.resolve('overlayscrollbars/css/OverlayScrollbars.min.css'); const OUTPUT = `${__dirname}/../src/ScrollArea/ScrollAreaStyles.ts`; diff --git a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts index 93b62ac6c0e8..29c214fe2dd6 100644 --- a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts +++ b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; const { window: globalWindow } = global; diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx index f8dce9b18f5c..4a84d4bda34f 100644 --- a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx +++ b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx @@ -2,7 +2,7 @@ import type { ComponentProps, FC, MouseEvent } from 'react'; import React, { useCallback, useState } from 'react'; import { logger } from '@storybook/client-logger'; import { styled } from '@storybook/theming'; -import global from 'global'; +import { global } from '@storybook/global'; import memoize from 'memoizerific'; import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx'; diff --git a/code/ui/components/src/tooltip/WithTooltip.tsx b/code/ui/components/src/tooltip/WithTooltip.tsx index 0d7bf1c3fdb5..78c909e8ecf9 100644 --- a/code/ui/components/src/tooltip/WithTooltip.tsx +++ b/code/ui/components/src/tooltip/WithTooltip.tsx @@ -1,7 +1,7 @@ import type { FC, ReactNode } from 'react'; import React, { useCallback, useState, useEffect } from 'react'; import { styled } from '@storybook/theming'; -import global from 'global'; +import { global } from '@storybook/global'; import TooltipTrigger from 'react-popper-tooltip'; import type { Modifier, Placement } from '@popperjs/core'; diff --git a/code/ui/components/src/typings.d.ts b/code/ui/components/src/typings.d.ts index b4914ea849fa..78f750cebdde 100644 --- a/code/ui/components/src/typings.d.ts +++ b/code/ui/components/src/typings.d.ts @@ -1,7 +1,3 @@ declare module 'markdown-to-jsx'; declare module '*.md'; declare module '*.mdx'; - -declare module 'global' { - export default globalThis; -} diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index 15dd5cba369b..754d2416cdb9 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -61,6 +61,7 @@ "@storybook/client-logger": "7.0.0-beta.2", "@storybook/components": "7.0.0-beta.2", "@storybook/core-events": "7.0.0-beta.2", + "@storybook/global": "^5.0.0", "@storybook/manager-api": "7.0.0-beta.2", "@storybook/router": "7.0.0-beta.2", "@storybook/theming": "7.0.0-beta.2", @@ -72,7 +73,6 @@ "enzyme": "^3.11.0", "fs-extra": "^9.0.1", "fuse.js": "^3.6.1", - "global": "^4.4.0", "lodash": "^4.17.21", "markdown-to-jsx": "^7.1.3", "memoizerific": "^1.11.3", diff --git a/code/ui/manager/src/components/layout/app.mockdata.tsx b/code/ui/manager/src/components/layout/app.mockdata.tsx index cb40a43eb1d2..505b1ffeee4c 100644 --- a/code/ui/manager/src/components/layout/app.mockdata.tsx +++ b/code/ui/manager/src/components/layout/app.mockdata.tsx @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import type { FC } from 'react'; import React, { Component } from 'react'; import { styled } from '@storybook/theming'; diff --git a/code/ui/manager/src/components/preview/preview.tsx b/code/ui/manager/src/components/preview/preview.tsx index 41f3f64dcc7e..a0328b32a32f 100644 --- a/code/ui/manager/src/components/preview/preview.tsx +++ b/code/ui/manager/src/components/preview/preview.tsx @@ -1,6 +1,6 @@ import React, { Fragment, useMemo, useEffect, useRef, useState } from 'react'; import { Helmet } from 'react-helmet-async'; -import global from 'global'; +import { global } from '@storybook/global'; import { type API, diff --git a/code/ui/manager/src/components/preview/tools/copy.tsx b/code/ui/manager/src/components/preview/tools/copy.tsx index 82b42596faba..a86d9e03a900 100644 --- a/code/ui/manager/src/components/preview/tools/copy.tsx +++ b/code/ui/manager/src/components/preview/tools/copy.tsx @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import React from 'react'; import copy from 'copy-to-clipboard'; import { getStoryHref, IconButton, Icons } from '@storybook/components'; diff --git a/code/ui/manager/src/components/preview/tools/eject.tsx b/code/ui/manager/src/components/preview/tools/eject.tsx index 2c638e219e7d..c95aa8a9d666 100644 --- a/code/ui/manager/src/components/preview/tools/eject.tsx +++ b/code/ui/manager/src/components/preview/tools/eject.tsx @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import React from 'react'; import { getStoryHref, IconButton, Icons } from '@storybook/components'; import { Consumer, type Combo } from '@storybook/manager-api'; diff --git a/code/ui/manager/src/components/sidebar/RefBlocks.tsx b/code/ui/manager/src/components/sidebar/RefBlocks.tsx index 20258736d384..ca3ce0113688 100644 --- a/code/ui/manager/src/components/sidebar/RefBlocks.tsx +++ b/code/ui/manager/src/components/sidebar/RefBlocks.tsx @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import type { FC } from 'react'; import React, { useState, useCallback, Fragment } from 'react'; diff --git a/code/ui/manager/src/components/sidebar/RefIndicator.tsx b/code/ui/manager/src/components/sidebar/RefIndicator.tsx index bb06fa3d4f6d..fad585fabd4c 100644 --- a/code/ui/manager/src/components/sidebar/RefIndicator.tsx +++ b/code/ui/manager/src/components/sidebar/RefIndicator.tsx @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import type { FC, ComponentProps } from 'react'; import React, { useMemo, useCallback, forwardRef } from 'react'; diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 3206745634b7..c8fe29fa3d2e 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -5,7 +5,7 @@ import type { DownshiftState, StateChangeOptions } from 'downshift'; import Downshift from 'downshift'; import type { FuseOptions } from 'fuse.js'; import Fuse from 'fuse.js'; -import global from 'global'; +import { global } from '@storybook/global'; import React, { useMemo, useRef, useState, useCallback } from 'react'; // eslint-disable-next-line import/no-cycle diff --git a/code/ui/manager/src/components/sidebar/SearchResults.tsx b/code/ui/manager/src/components/sidebar/SearchResults.tsx index 709001340953..a6f6abb507fb 100644 --- a/code/ui/manager/src/components/sidebar/SearchResults.tsx +++ b/code/ui/manager/src/components/sidebar/SearchResults.tsx @@ -1,6 +1,6 @@ import { styled } from '@storybook/theming'; import { Icons } from '@storybook/components'; -import global from 'global'; +import { global } from '@storybook/global'; import type { FC, MouseEventHandler, ReactNode } from 'react'; import React, { useCallback, useEffect } from 'react'; import type { ControllerStateAndHelpers } from 'downshift'; diff --git a/code/ui/manager/src/components/sidebar/useExpanded.ts b/code/ui/manager/src/components/sidebar/useExpanded.ts index eaded1d38fc2..1d7bd6d91ad5 100644 --- a/code/ui/manager/src/components/sidebar/useExpanded.ts +++ b/code/ui/manager/src/components/sidebar/useExpanded.ts @@ -1,7 +1,7 @@ import type { StoriesHash } from '@storybook/manager-api'; import { useStorybookApi } from '@storybook/manager-api'; import { STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL } from '@storybook/core-events'; -import global from 'global'; +import { global } from '@storybook/global'; import throttle from 'lodash/throttle'; import type { Dispatch, MutableRefObject } from 'react'; import type React from 'react'; diff --git a/code/ui/manager/src/components/sidebar/useHighlighted.ts b/code/ui/manager/src/components/sidebar/useHighlighted.ts index 6a23bbf19259..5ee649081a61 100644 --- a/code/ui/manager/src/components/sidebar/useHighlighted.ts +++ b/code/ui/manager/src/components/sidebar/useHighlighted.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import type { Dispatch, MutableRefObject, SetStateAction } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react'; import { useStorybookApi } from '@storybook/manager-api'; diff --git a/code/ui/manager/src/components/sidebar/utils.ts b/code/ui/manager/src/components/sidebar/utils.ts index ea1d250cfe84..5406989df10d 100644 --- a/code/ui/manager/src/components/sidebar/utils.ts +++ b/code/ui/manager/src/components/sidebar/utils.ts @@ -1,5 +1,5 @@ import memoize from 'memoizerific'; -import global from 'global'; +import { global } from '@storybook/global'; import type { SyntheticEvent } from 'react'; import type { HashEntry, StoriesHash } from '@storybook/manager-api'; diff --git a/code/ui/manager/src/containers/preview.tsx b/code/ui/manager/src/containers/preview.tsx index 54e6a978ca0c..2b77e97db60d 100644 --- a/code/ui/manager/src/containers/preview.tsx +++ b/code/ui/manager/src/containers/preview.tsx @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import React from 'react'; import type { Combo, StoriesHash } from '@storybook/manager-api'; diff --git a/code/ui/manager/src/index.tsx b/code/ui/manager/src/index.tsx index dff5953f68a1..bc4a6262dbc4 100644 --- a/code/ui/manager/src/index.tsx +++ b/code/ui/manager/src/index.tsx @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import type { FC } from 'react'; import React from 'react'; import ReactDOM from 'react-dom'; diff --git a/code/ui/manager/src/runtime.ts b/code/ui/manager/src/runtime.ts index ebe5f040457f..7524649c7749 100644 --- a/code/ui/manager/src/runtime.ts +++ b/code/ui/manager/src/runtime.ts @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import type { Channel } from '@storybook/channels'; import type { AddonStore } from '@storybook/manager-api'; diff --git a/code/ui/manager/src/settings/index.tsx b/code/ui/manager/src/settings/index.tsx index 6af005aa3c56..9136bd9411c6 100644 --- a/code/ui/manager/src/settings/index.tsx +++ b/code/ui/manager/src/settings/index.tsx @@ -2,7 +2,7 @@ import { useStorybookApi, useStorybookState } from '@storybook/manager-api'; import { IconButton, Icons, FlexBar, TabBar, TabButton, ScrollArea } from '@storybook/components'; import { Location, Route } from '@storybook/router'; import { styled } from '@storybook/theming'; -import global from 'global'; +import { global } from '@storybook/global'; import type { FC, SyntheticEvent } from 'react'; import React, { Fragment } from 'react'; diff --git a/code/ui/manager/src/settings/typings.d.ts b/code/ui/manager/src/settings/typings.d.ts index 925f7ef2b612..176b5f3d014a 100644 --- a/code/ui/manager/src/settings/typings.d.ts +++ b/code/ui/manager/src/settings/typings.d.ts @@ -15,7 +15,3 @@ declare var __STORYBOOKTHEMING__: any; declare var __STORYBOOKAPI__: any; declare var __STORYBOOKADDONS__: any; declare var __STORYBOOKCLIENTLOGGER__: any; - -declare module 'global' { - export default globalThis; -} diff --git a/code/ui/manager/src/typings.d.ts b/code/ui/manager/src/typings.d.ts index 897d8e60c1d1..16db24e8059b 100644 --- a/code/ui/manager/src/typings.d.ts +++ b/code/ui/manager/src/typings.d.ts @@ -1,7 +1,3 @@ declare module 'chromatic/isChromatic'; declare var DOCS_OPTIONS: any; - -declare module 'global' { - export default globalThis; -} diff --git a/code/yarn.lock b/code/yarn.lock index ffa44e777780..587d649107f1 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5144,13 +5144,13 @@ __metadata: "@storybook/client-logger": 7.0.0-beta.2 "@storybook/components": 7.0.0-beta.2 "@storybook/core-events": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/manager-api": 7.0.0-beta.2 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/theming": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 "@testing-library/react": ^11.2.2 axe-core: ^4.2.0 - global: ^4.4.0 lodash: ^4.17.21 react-sizeme: ^3.0.1 typescript: ~4.9.3 @@ -5172,13 +5172,13 @@ __metadata: "@storybook/client-logger": 7.0.0-beta.2 "@storybook/components": 7.0.0-beta.2 "@storybook/core-events": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/manager-api": 7.0.0-beta.2 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/theming": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 "@types/lodash": ^4.14.167 dequal: ^2.0.2 - global: ^4.4.0 lodash: ^4.17.21 polished: ^4.2.2 prop-types: ^15.7.2 @@ -5205,11 +5205,11 @@ __metadata: "@storybook/client-logger": 7.0.0-beta.2 "@storybook/components": 7.0.0-beta.2 "@storybook/core-events": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/manager-api": 7.0.0-beta.2 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/theming": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 - global: ^4.4.0 memoizerific: ^1.11.3 ts-dedent: ^2.0.0 typescript: ~4.9.3 @@ -5234,7 +5234,6 @@ __metadata: "@storybook/core-common": 7.0.0-beta.2 "@storybook/manager-api": 7.0.0-beta.2 "@storybook/node-logger": 7.0.0-beta.2 - "@storybook/preview-api": 7.0.0-beta.2 "@storybook/theming": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 lodash: ^4.17.21 @@ -5262,6 +5261,7 @@ __metadata: "@storybook/components": 7.0.0-beta.2 "@storybook/csf-plugin": 7.0.0-beta.2 "@storybook/csf-tools": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/mdx2-csf": next "@storybook/node-logger": 7.0.0-beta.2 "@storybook/postinstall": 7.0.0-beta.2 @@ -5269,7 +5269,6 @@ __metadata: "@storybook/theming": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 fs-extra: ^9.0.1 - global: ^4.4.0 react: ^16.14.0 react-dom: ^16.8.0 remark-external-links: ^8.0.0 @@ -5313,9 +5312,9 @@ __metadata: resolution: "@storybook/addon-highlight@workspace:addons/highlight" dependencies: "@storybook/core-events": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/preview-api": 7.0.0-beta.2 "@types/webpack-env": ^1.16.0 - global: ^4.4.0 typescript: ~4.9.3 languageName: unknown linkType: soft @@ -5329,6 +5328,7 @@ __metadata: "@storybook/components": 7.0.0-beta.2 "@storybook/core-common": 7.0.0-beta.2 "@storybook/core-events": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/instrumenter": 7.0.0-beta.2 "@storybook/jest": ^0.0.10 "@storybook/manager-api": 7.0.0-beta.2 @@ -5338,7 +5338,6 @@ __metadata: "@storybook/types": 7.0.0-beta.2 "@types/node": ^16.0.0 formik: ^2.2.9 - global: ^4.4.0 jest-mock: ^27.0.6 polished: ^4.2.2 ts-dedent: ^2.2.0 @@ -5361,10 +5360,10 @@ __metadata: "@storybook/client-logger": 7.0.0-beta.2 "@storybook/components": 7.0.0-beta.2 "@storybook/core-events": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/manager-api": 7.0.0-beta.2 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/theming": 7.0.0-beta.2 - global: ^4.4.0 react-sizeme: ^3.0.1 typescript: ~4.9.3 upath: ^1.2.0 @@ -5386,11 +5385,11 @@ __metadata: "@storybook/client-logger": 7.0.0-beta.2 "@storybook/core-events": 7.0.0-beta.2 "@storybook/csf": next + "@storybook/global": ^5.0.0 "@storybook/manager-api": 7.0.0-beta.2 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/router": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 - global: ^4.4.0 prop-types: ^15.7.2 ts-dedent: ^2.0.0 typescript: ~4.9.3 @@ -5412,10 +5411,10 @@ __metadata: "@storybook/client-logger": 7.0.0-beta.2 "@storybook/components": 7.0.0-beta.2 "@storybook/core-events": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/manager-api": 7.0.0-beta.2 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 - global: ^4.4.0 typescript: ~4.9.3 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -5435,10 +5434,10 @@ __metadata: "@storybook/client-logger": 7.0.0-beta.2 "@storybook/components": 7.0.0-beta.2 "@storybook/core-events": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/manager-api": 7.0.0-beta.2 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 - global: ^4.4.0 ts-dedent: ^2.0.0 typescript: ~4.9.3 peerDependencies: @@ -5487,6 +5486,7 @@ __metadata: "@storybook/client-api": 7.0.0-beta.2 "@storybook/core-common": 7.0.0-beta.2 "@storybook/core-webpack": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/react": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 @@ -5499,7 +5499,6 @@ __metadata: enzyme: ^3.11.0 enzyme-to-json: ^3.6.1 glob: ^7.1.6 - global: ^4.4.0 jest-preset-angular: ^8.3.2 jest-specific-snapshot: ^7.0.0 jest-vue-preprocessor: ^1.7.1 @@ -5633,10 +5632,10 @@ __metadata: "@storybook/client-logger": 7.0.0-beta.2 "@storybook/components": 7.0.0-beta.2 "@storybook/core-events": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/manager-api": 7.0.0-beta.2 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/theming": 7.0.0-beta.2 - global: ^4.4.0 memoizerific: ^1.11.3 prop-types: ^15.7.2 typescript: ~4.9.3 @@ -5710,6 +5709,7 @@ __metadata: "@storybook/core-server": 7.0.0-beta.2 "@storybook/core-webpack": 7.0.0-beta.2 "@storybook/docs-tools": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/manager-api": 7.0.0-beta.2 "@storybook/node-logger": 7.0.0-beta.2 "@storybook/preview-api": 7.0.0-beta.2 @@ -5724,7 +5724,6 @@ __metadata: core-js: ^3.8.2 cross-spawn: ^7.0.3 find-up: ^5.0.0 - global: ^4.4.0 jest: ^29.3.1 jest-preset-angular: ^12.0.0 jest-specific-snapshot: ^7.0.0 @@ -5821,6 +5820,7 @@ __metadata: "@storybook/core-events": 7.0.0-beta.2 "@storybook/csf": next "@storybook/docs-tools": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/manager-api": 7.0.0-beta.2 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/theming": 7.0.0-beta.2 @@ -5829,7 +5829,6 @@ __metadata: "@types/lodash": ^4.14.167 color-convert: ^2.0.1 dequal: ^2.0.2 - global: ^4.4.0 lodash: ^4.17.21 markdown-to-jsx: ^7.1.3 memoizerific: ^1.11.3 @@ -5921,6 +5920,7 @@ __metadata: "@storybook/core-common": 7.0.0-beta.2 "@storybook/core-events": 7.0.0-beta.2 "@storybook/core-webpack": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/manager-api": 7.0.0-beta.2 "@storybook/node-logger": 7.0.0-beta.2 "@storybook/preview": 7.0.0-beta.2 @@ -5943,7 +5943,6 @@ __metadata: express: ^4.17.3 fork-ts-checker-webpack-plugin: ^7.2.8 fs-extra: ^9.0.1 - global: ^4.4.0 html-webpack-plugin: ^5.5.0 path-browserify: ^1.0.1 pretty-hrtime: ^1.0.3 @@ -5975,7 +5974,7 @@ __metadata: "@storybook/channels": 7.0.0-beta.2 "@storybook/client-logger": 7.0.0-beta.2 "@storybook/core-events": 7.0.0-beta.2 - global: ^4.4.0 + "@storybook/global": ^5.0.0 qs: ^6.10.0 telejson: ^7.0.3 typescript: ~4.9.3 @@ -5988,7 +5987,7 @@ __metadata: dependencies: "@storybook/channels": 7.0.0-beta.2 "@storybook/client-logger": 7.0.0-beta.2 - global: ^4.4.0 + "@storybook/global": ^5.0.0 telejson: ^7.0.3 typescript: ~4.9.3 languageName: unknown @@ -6078,7 +6077,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/client-logger@workspace:lib/client-logger" dependencies: - global: ^4.4.0 + "@storybook/global": ^5.0.0 typescript: ~4.9.3 languageName: unknown linkType: soft @@ -6122,13 +6121,13 @@ __metadata: "@popperjs/core": ^2.6.0 "@storybook/client-logger": 7.0.0-beta.2 "@storybook/csf": next + "@storybook/global": ^5.0.0 "@storybook/theming": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 "@types/overlayscrollbars": ^1.12.0 "@types/react-syntax-highlighter": 11.0.5 "@types/util-deprecate": ^1.0.0 css: ^3.0.0 - global: ^4.4.0 memoizerific: ^1.11.3 overlayscrollbars: ^1.13.1 polished: ^4.2.2 @@ -6222,6 +6221,7 @@ __metadata: "@storybook/csf": next "@storybook/csf-tools": 7.0.0-beta.2 "@storybook/docs-mdx": next + "@storybook/global": ^5.0.0 "@storybook/node-logger": 7.0.0-beta.2 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/telemetry": 7.0.0-beta.2 @@ -6242,7 +6242,6 @@ __metadata: detect-port: ^1.3.0 express: ^4.17.3 fs-extra: ^9.0.1 - global: ^4.4.0 globby: ^11.0.2 ip: ^2.0.0 jest-os-detection: ^1.3.1 @@ -6375,10 +6374,10 @@ __metadata: "@storybook/builder-webpack5": 7.0.0-beta.2 "@storybook/core-common": 7.0.0-beta.2 "@storybook/docs-tools": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 ember-source: ~3.28.1 - global: ^4.4.0 read-pkg-up: ^7.0.1 ts-dedent: ^2.0.0 typescript: ~4.9.3 @@ -6411,6 +6410,13 @@ __metadata: languageName: node linkType: hard +"@storybook/global@npm:^5.0.0": + version: 5.0.0 + resolution: "@storybook/global@npm:5.0.0" + checksum: 8f1b61dcdd3a89584540896e659af2ecc700bc740c16909a7be24ac19127ea213324de144a141f7caf8affaed017d064fea0618d453afbe027cf60f54b4a6d0b + languageName: node + linkType: hard + "@storybook/html-vite@workspace:*, @storybook/html-vite@workspace:frameworks/html-vite": version: 0.0.0-use.local resolution: "@storybook/html-vite@workspace:frameworks/html-vite" @@ -6436,10 +6442,10 @@ __metadata: dependencies: "@storybook/builder-webpack5": 7.0.0-beta.2 "@storybook/core-common": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/html": 7.0.0-beta.2 "@storybook/preset-html-webpack": 7.0.0-beta.2 "@types/node": ^16.0.0 - global: ^4.4.0 typescript: ~4.9.3 peerDependencies: "@babel/core": "*" @@ -6454,9 +6460,9 @@ __metadata: dependencies: "@storybook/core-client": 7.0.0-beta.2 "@storybook/docs-tools": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 - global: ^4.4.0 ts-dedent: ^2.0.0 typescript: ~4.9.3 peerDependencies: @@ -6471,9 +6477,9 @@ __metadata: "@storybook/channels": 7.0.0-beta.2 "@storybook/client-logger": 7.0.0-beta.2 "@storybook/core-events": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/preview-api": 7.0.0-beta.2 core-js: ^3.8.2 - global: ^4.4.0 typescript: ~4.9.3 languageName: unknown linkType: soft @@ -6567,6 +6573,7 @@ __metadata: "@storybook/client-logger": 7.0.0-beta.2 "@storybook/core-events": 7.0.0-beta.2 "@storybook/csf": next + "@storybook/global": ^5.0.0 "@storybook/router": 7.0.0-beta.2 "@storybook/theming": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 @@ -6574,7 +6581,6 @@ __metadata: "@types/qs": ^6 dequal: ^2.0.2 flush-promises: ^1.0.2 - global: ^4.4.0 lodash: ^4.17.21 memoizerific: ^1.11.3 qs: ^6.10.0 @@ -6602,6 +6608,7 @@ __metadata: "@storybook/client-logger": 7.0.0-beta.2 "@storybook/components": 7.0.0-beta.2 "@storybook/core-events": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/manager-api": 7.0.0-beta.2 "@storybook/router": 7.0.0-beta.2 "@storybook/theming": 7.0.0-beta.2 @@ -6613,7 +6620,6 @@ __metadata: enzyme: ^3.11.0 fs-extra: ^9.0.1 fuse.js: ^3.6.1 - global: ^4.4.0 lodash: ^4.17.21 markdown-to-jsx: ^7.1.3 memoizerific: ^1.11.3 @@ -6733,9 +6739,9 @@ __metadata: resolution: "@storybook/preact@workspace:renderers/preact" dependencies: "@storybook/core-client": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 - global: ^4.4.0 preact: ^10.5.13 ts-dedent: ^2.0.0 typescript: ~4.9.3 @@ -6812,10 +6818,10 @@ __metadata: dependencies: "@storybook/core-server": 7.0.0-beta.2 "@storybook/core-webpack": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/server": 7.0.0-beta.2 "@types/node": ^16.0.0 fs-extra: ^9.0.1 - global: ^4.4.0 jest-specific-snapshot: ^7.0.0 safe-identifier: ^0.4.1 ts-dedent: ^2.0.0 @@ -6920,11 +6926,11 @@ __metadata: "@storybook/core-common": 7.0.0-beta.2 "@storybook/core-events": 7.0.0-beta.2 "@storybook/csf": next + "@storybook/global": ^5.0.0 "@storybook/types": 7.0.0-beta.2 "@types/qs": ^6.9.5 ansi-to-html: ^0.6.11 dequal: ^2.0.2 - global: ^4.4.0 lodash: ^4.17.21 memoizerific: ^1.11.3 qs: ^6.10.0 @@ -7028,6 +7034,7 @@ __metadata: "@storybook/client-logger": 7.0.0-beta.2 "@storybook/core-client": 7.0.0-beta.2 "@storybook/docs-tools": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 "@types/estree": ^0.0.51 @@ -7038,7 +7045,6 @@ __metadata: acorn-walk: ^7.2.0 escodegen: ^2.0.0 expect-type: ^0.14.2 - global: ^4.4.0 html-tags: ^3.1.0 jest-specific-snapshot: ^7.0.0 lodash: ^4.17.21 @@ -7132,6 +7138,7 @@ __metadata: "@storybook/docs-tools": "workspace:*" "@storybook/ember": "workspace:*" "@storybook/eslint-config-storybook": ^3.1.2 + "@storybook/global": ^5.0.0 "@storybook/html": "workspace:*" "@storybook/html-vite": "workspace:*" "@storybook/html-webpack5": "workspace:*" @@ -7237,7 +7244,6 @@ __metadata: fs-extra: ^9.0.1 github-release-from-changelog: ^2.1.1 glob: ^7.1.6 - global: ^4.4.0 http-server: ^0.12.3 husky: ^4.3.7 jest: ^29.3.1 @@ -7328,8 +7334,8 @@ __metadata: resolution: "@storybook/router@workspace:lib/router" dependencies: "@storybook/client-logger": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 dequal: ^2.0.2 - global: ^4.4.0 lodash: ^4.17.21 memoizerific: ^1.11.3 qs: ^6.10.0 @@ -7392,9 +7398,9 @@ __metadata: resolution: "@storybook/server@workspace:renderers/server" dependencies: "@storybook/core-client": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 - global: ^4.4.0 ts-dedent: ^2.0.0 typescript: ~4.9.3 languageName: unknown @@ -7478,10 +7484,10 @@ __metadata: "@storybook/client-logger": 7.0.0-beta.2 "@storybook/core-client": 7.0.0-beta.2 "@storybook/docs-tools": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 expect-type: ^0.14.2 - global: ^4.4.0 svelte: ^3.31.2 svelte-check: ^2.9.2 sveltedoc-parser: ^4.2.1 @@ -7549,11 +7555,11 @@ __metadata: "@emotion/styled": ^11.10.4 "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0 "@storybook/client-logger": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@types/fs-extra": ^9.0.6 "@types/node": ^16.0.0 deep-object-diff: ^1.1.0 fs-extra: ^9.0.1 - global: ^4.4.0 memoizerific: ^1.11.3 polished: ^4.2.2 ts-dedent: ^2.0.0 @@ -7688,10 +7694,10 @@ __metadata: "@digitak/esrun": ^3.2.2 "@storybook/core-client": 7.0.0-beta.2 "@storybook/docs-tools": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 "@vue/vue3-jest": 29 - global: ^4.4.0 ts-dedent: ^2.0.0 type-fest: 2.19.0 typescript: ~4.9.3 @@ -7709,9 +7715,9 @@ __metadata: "@storybook/client-logger": 7.0.0-beta.2 "@storybook/core-client": 7.0.0-beta.2 "@storybook/docs-tools": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 - global: ^4.4.0 ts-dedent: ^2.0.0 type-fest: 2.19.0 typescript: ~4.9.3 @@ -7771,10 +7777,10 @@ __metadata: "@storybook/client-logger": 7.0.0-beta.2 "@storybook/core-client": 7.0.0-beta.2 "@storybook/docs-tools": 7.0.0-beta.2 + "@storybook/global": ^5.0.0 "@storybook/manager-api": 7.0.0-beta.2 "@storybook/preview-api": 7.0.0-beta.2 "@storybook/types": 7.0.0-beta.2 - global: ^4.4.0 lit: 2.3.1 lit-html: 2.0.2 ts-dedent: ^2.0.0 diff --git a/docs/snippets/common/storybook-client-globals-example-file.ts.mdx b/docs/snippets/common/storybook-client-globals-example-file.ts.mdx index 2acf4a679ce3..4d240f124ceb 100644 --- a/docs/snippets/common/storybook-client-globals-example-file.ts.mdx +++ b/docs/snippets/common/storybook-client-globals-example-file.ts.mdx @@ -1,7 +1,7 @@ ```ts // vue/src/client/preview/globals.ts -import global from 'global'; +import { global } from '@storybook/global'; const { window: globalWindow } = global; From a94e7e87ec9ae0cf1e31d911a425946b94327561 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 9 Dec 2022 21:20:45 +0100 Subject: [PATCH 10/26] fixing tests --- code/addons/interactions/src/Panel.tsx | 6 ++-- .../links/src/react/components/link.test.tsx | 20 +++++++------ code/addons/links/src/utils.test.ts | 6 ++-- code/lib/client-logger/src/index.test.ts | 2 +- .../csf-to-mdx/story-function.output.snapshot | 2 +- code/lib/manager-api/src/tests/events.test.ts | 4 ++- code/lib/manager-api/src/tests/refs.test.js | 2 +- .../lib/manager-api/src/tests/stories.test.ts | 10 ++++--- .../manager-api/src/tests/versions.test.js | 24 ++++++++-------- .../src/modules/core-client/start.test.ts | 28 ++++++++++--------- .../PreviewWeb.integration.test.ts | 28 ++++++++++--------- .../modules/preview-web/PreviewWeb.test.ts | 26 +++++++++-------- .../src/modules/preview-web/UrlStore.test.ts | 12 ++++---- .../src/modules/store/StoryStore.test.ts | 8 ++++-- .../modules/store/csf/prepareStory.test.ts | 8 ++++-- code/lib/theming/src/tests/util.test.js | 2 +- 16 files changed, 105 insertions(+), 83 deletions(-) diff --git a/code/addons/interactions/src/Panel.tsx b/code/addons/interactions/src/Panel.tsx index d34e4e6a2adc..b0eaf8c1d093 100644 --- a/code/addons/interactions/src/Panel.tsx +++ b/code/addons/interactions/src/Panel.tsx @@ -102,10 +102,10 @@ export const Panel: React.FC<{ active: boolean }> = (props) => { const endRef = React.useRef(); React.useEffect(() => { let observer: IntersectionObserver; - if (global.window.IntersectionObserver) { - observer = new global.window.IntersectionObserver( + if (global.IntersectionObserver) { + observer = new global.IntersectionObserver( ([end]: any) => setScrollTarget(end.isIntersecting ? undefined : end.target), - { root: global.window.document.querySelector('#panel-tab-content') } + { root: global.document.querySelector('#panel-tab-content') } ); if (endRef.current) observer.observe(endRef.current); } diff --git a/code/addons/links/src/react/components/link.test.tsx b/code/addons/links/src/react/components/link.test.tsx index 8c0c819b3f31..b5d444a5ffc6 100644 --- a/code/addons/links/src/react/components/link.test.tsx +++ b/code/addons/links/src/react/components/link.test.tsx @@ -7,16 +7,18 @@ import LinkTo from './link'; jest.mock('@storybook/preview-api'); jest.mock('@storybook/global', () => ({ - document: { - location: { - origin: 'origin', - pathname: 'pathname', - search: 'search', + global: { + document: { + location: { + origin: 'origin', + pathname: 'pathname', + search: 'search', + }, + }, + window: global, + __STORYBOOK_STORY_STORE__: { + fromId: jest.fn(() => ({})), }, - }, - window: global, - __STORYBOOK_STORY_STORE__: { - fromId: jest.fn(() => ({})), }, })); diff --git a/code/addons/links/src/utils.test.ts b/code/addons/links/src/utils.test.ts index 0bd114075ebe..1adbdf329aed 100644 --- a/code/addons/links/src/utils.test.ts +++ b/code/addons/links/src/utils.test.ts @@ -5,8 +5,10 @@ import { linkTo, hrefTo } from './utils'; jest.mock('@storybook/preview-api'); jest.mock('@storybook/global', () => ({ - document: global.document, - window: global, + global: { + document: global.document, + window: global, + }, })); const mockAddons = addons as unknown as jest.Mocked; diff --git a/code/lib/client-logger/src/index.test.ts b/code/lib/client-logger/src/index.test.ts index cf67fe47705c..be6b3f74b3e2 100644 --- a/code/lib/client-logger/src/index.test.ts +++ b/code/lib/client-logger/src/index.test.ts @@ -1,6 +1,6 @@ import { logger } from '.'; -jest.mock('@storybook/global', () => ({ ...global, LOGLEVEL: 'debug' })); +jest.mock('@storybook/global', () => ({ global: { ...global, LOGLEVEL: 'debug' } })); describe('client-logger default LOGLEVEL', () => { const initialConsole = { ...global.console }; diff --git a/code/lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/story-function.output.snapshot b/code/lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/story-function.output.snapshot index af8fa0a24eb8..3e3458a0f080 100644 --- a/code/lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/story-function.output.snapshot +++ b/code/lib/codemod/src/transforms/__testfixtures__/csf-to-mdx/story-function.output.snapshot @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`csf-to-mdx transforms correctly using "story-function.input.js" data 1`] = ` -"import global from 'global'; +"import { global } from '@storybook/global'; import { Meta, Story } from '@storybook/addon-docs'; const { diff --git a/code/lib/manager-api/src/tests/events.test.ts b/code/lib/manager-api/src/tests/events.test.ts index 900ad791fc14..ee1c354c2f66 100644 --- a/code/lib/manager-api/src/tests/events.test.ts +++ b/code/lib/manager-api/src/tests/events.test.ts @@ -2,7 +2,9 @@ import { getEventMetadata } from '../lib/events'; import type { API } from '../index'; jest.mock('@storybook/global', () => ({ - location: { origin: 'http://localhost:6006', pathname: '/' }, + global: { + location: { origin: 'http://localhost:6006', pathname: '/' }, + }, })); describe('getEventMetadata', () => { diff --git a/code/lib/manager-api/src/tests/refs.test.js b/code/lib/manager-api/src/tests/refs.test.js index 5d8df57a4426..17a7abe9bf90 100644 --- a/code/lib/manager-api/src/tests/refs.test.js +++ b/code/lib/manager-api/src/tests/refs.test.js @@ -29,7 +29,7 @@ jest.mock('@storybook/global', () => { .mockReturnValue(lastLocation), }, }); - return globalMock; + return { global: globalMock }; }); const provider = { diff --git a/code/lib/manager-api/src/tests/stories.test.ts b/code/lib/manager-api/src/tests/stories.test.ts index b638a7837452..3e2672c43db0 100644 --- a/code/lib/manager-api/src/tests/stories.test.ts +++ b/code/lib/manager-api/src/tests/stories.test.ts @@ -38,10 +38,12 @@ const mockGetEntries = jest.fn<() => StoryIndex['entries']>(); jest.mock('../lib/events'); jest.mock('@storybook/global', () => ({ - ...(mockJest.requireActual('@storybook/global') as Record), - fetch: mockJest.fn(() => ({ json: () => ({ v: 4, entries: mockGetEntries() }) })), - FEATURES: { storyStoreV7: true }, - CONFIG_TYPE: 'DEVELOPMENT', + global: { + ...(mockJest.requireActual('@storybook/global') as Record), + fetch: mockJest.fn(() => ({ json: () => ({ v: 4, entries: mockGetEntries() }) })), + FEATURES: { storyStoreV7: true }, + CONFIG_TYPE: 'DEVELOPMENT', + }, })); const getEventMetadataMock = getEventMetadata as ReturnType; diff --git a/code/lib/manager-api/src/tests/versions.test.js b/code/lib/manager-api/src/tests/versions.test.js index 4b2d87663e99..d92809ab65a1 100644 --- a/code/lib/manager-api/src/tests/versions.test.js +++ b/code/lib/manager-api/src/tests/versions.test.js @@ -5,18 +5,20 @@ jest.mock('../version', () => ({ })); jest.mock('@storybook/global', () => ({ - VERSIONCHECK: JSON.stringify({ - success: true, - data: { - latest: { - version: '5.2.3', - }, - next: { - version: '5.3.0-alpha.15', + global: { + VERSIONCHECK: JSON.stringify({ + success: true, + data: { + latest: { + version: '5.2.3', + }, + next: { + version: '5.3.0-alpha.15', + }, }, - }, - time: 1571565216284, - }), + time: 1571565216284, + }), + }, })); jest.mock('@storybook/client-logger'); diff --git a/code/lib/preview-api/src/modules/core-client/start.test.ts b/code/lib/preview-api/src/modules/core-client/start.test.ts index 04cb0fc6e8c5..c85370e2921b 100644 --- a/code/lib/preview-api/src/modules/core-client/start.test.ts +++ b/code/lib/preview-api/src/modules/core-client/start.test.ts @@ -22,20 +22,22 @@ import { start as realStart } from './start'; import type { Loadable } from './executeLoadable'; jest.mock('@storybook/global', () => ({ - ...globalThis, - window: globalThis, - history: { replaceState: jest.fn() }, - document: { - location: { - pathname: 'pathname', - search: '?id=*', + global: { + ...globalThis, + window: globalThis, + history: { replaceState: jest.fn() }, + document: { + location: { + pathname: 'pathname', + search: '?id=*', + }, + }, + FEATURES: { + breakingChangesV7: true, + }, + DOCS_OPTIONS: { + enabled: true, }, - }, - FEATURES: { - breakingChangesV7: true, - }, - DOCS_OPTIONS: { - enabled: true, }, })); diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts index a8ec32cdf3ab..ecfcd58af4c0 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts @@ -29,21 +29,23 @@ jest.mock('@storybook/channel-postmessage', () => ({ createChannel: () => mockCh jest.mock('./WebView'); -const { window, document } = global; +const { document } = global; jest.mock('@storybook/global', () => ({ - ...jest.requireActual('@storybook/global'), - history: { replaceState: jest.fn() }, - document: { - ...jest.requireActual('@storybook/global').document, - location: { - pathname: 'pathname', - search: '?id=*', + global: { + ...globalThis, + history: { replaceState: jest.fn() }, + document: { + createElement: globalThis.document.createElement.bind(globalThis.document), + location: { + pathname: 'pathname', + search: '?id=*', + }, }, + FEATURES: { + storyStoreV7: true, + }, + fetch: async () => ({ status: 200, json: async () => mockStoryIndex }), }, - FEATURES: { - storyStoreV7: true, - }, - fetch: async () => ({ status: 200, json: async () => mockStoryIndex }), })); beforeEach(() => { @@ -93,7 +95,7 @@ describe('PreviewWeb', () => { document.location.search = '?id=component-one--docs&viewMode=docs'; const preview = new PreviewWeb(); - const docsRoot = window.document.createElement('div'); + const docsRoot = document.createElement('div'); ( preview.view.prepareForDocs as any as jest.Mock ).mockReturnValue(docsRoot as any); diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index 3cc839c642a4..9503858ac003 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -60,20 +60,22 @@ const mockStoryIndex = jest.fn(() => storyIndex); let mockFetchResult: any; jest.mock('@storybook/global', () => ({ - ...(mockJest.requireActual('@storybook/global') as any), - history: { replaceState: mockJest.fn() }, - document: { - location: { - pathname: 'pathname', - search: '?id=*', + global: { + ...(mockJest.requireActual('@storybook/global') as any), + history: { replaceState: mockJest.fn() }, + document: { + location: { + pathname: 'pathname', + search: '?id=*', + }, }, + FEATURES: { + storyStoreV7: true, + breakingChangesV7: true, + // xxx + }, + fetch: async () => mockFetchResult, }, - FEATURES: { - storyStoreV7: true, - breakingChangesV7: true, - // xxx - }, - fetch: async () => mockFetchResult, })); jest.mock('@storybook/client-logger'); diff --git a/code/lib/preview-api/src/modules/preview-web/UrlStore.test.ts b/code/lib/preview-api/src/modules/preview-web/UrlStore.test.ts index 95c397e83a03..58784329913c 100644 --- a/code/lib/preview-api/src/modules/preview-web/UrlStore.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/UrlStore.test.ts @@ -5,11 +5,13 @@ import { pathToId, setPath, getSelectionSpecifierFromPath } from './UrlStore'; const { history, document } = global; jest.mock('@storybook/global', () => ({ - history: { replaceState: jest.fn() }, - document: { - location: { - pathname: 'pathname', - search: '', + global: { + history: { replaceState: jest.fn() }, + document: { + location: { + pathname: 'pathname', + search: '', + }, }, }, })); diff --git a/code/lib/preview-api/src/modules/store/StoryStore.test.ts b/code/lib/preview-api/src/modules/store/StoryStore.test.ts index bb1ebcaedec8..3bbf2f970906 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.test.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.test.ts @@ -16,9 +16,11 @@ jest.mock('./csf/processCSFFile', () => ({ })); jest.mock('@storybook/global', () => ({ - ...(jest.requireActual('@storybook/global') as any), - FEATURES: { - breakingChangesV7: true, + global: { + ...(jest.requireActual('@storybook/global') as any), + FEATURES: { + breakingChangesV7: true, + }, }, })); diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts index fe22d8a38d45..a2d069d70239 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts @@ -15,9 +15,11 @@ import { NO_TARGET_NAME } from '../args'; import { prepareStory } from './prepareStory'; jest.mock('@storybook/global', () => ({ - ...(jest.requireActual('@storybook/global') as any), - FEATURES: { - breakingChangesV7: true, + global: { + ...(jest.requireActual('@storybook/global') as any), + FEATURES: { + breakingChangesV7: true, + }, }, })); diff --git a/code/lib/theming/src/tests/util.test.js b/code/lib/theming/src/tests/util.test.js index 32afbb7c737e..6580f7458fbf 100644 --- a/code/lib/theming/src/tests/util.test.js +++ b/code/lib/theming/src/tests/util.test.js @@ -80,7 +80,7 @@ describe('utils', () => { describe('getPreferredColorScheme', () => { it('should return "light" if "window" is unavailable', () => { - jest.mock('@storybook/global', () => ({ window: undefined })); + jest.mock('@storybook/global', () => ({ global: { window: undefined } })); const colorScheme = getPreferredColorScheme(); expect(colorScheme).toBe('light'); From 5be6d2554681b2ad2ac3dadc99fa578d34dec8cb Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 9 Dec 2022 21:39:43 +0100 Subject: [PATCH 11/26] fixes --- .../lib/instrumenter/src/instrumenter.test.ts | 8 +++-- .../lib/manager-api/src/tests/stories.test.ts | 32 +++++++++++++------ .../blocks/src/components/Preview.stories.tsx | 6 ++-- .../src/Zoom/browserSupportsCssZoom.ts | 7 ++-- code/ui/manager/src/typings.d.ts | 2 ++ 5 files changed, 33 insertions(+), 22 deletions(-) diff --git a/code/lib/instrumenter/src/instrumenter.test.ts b/code/lib/instrumenter/src/instrumenter.test.ts index b8ce10aec590..c15d5516fd1c 100644 --- a/code/lib/instrumenter/src/instrumenter.test.ts +++ b/code/lib/instrumenter/src/instrumenter.test.ts @@ -29,9 +29,11 @@ class HTMLElement { } } -delete global.window.location; -global.window.location = { reload: jest.fn() }; -global.window.HTMLElement = HTMLElement; +delete global.location; +// @ts-expect-error (global scope type conflicts) +global.location = { reload: jest.fn() }; +// @ts-expect-error (global scope type conflicts) +global.HTMLElement = HTMLElement; const storyId = 'kind--story'; global.window.__STORYBOOK_PREVIEW__ = { selectionStore: { selection: { storyId } } }; diff --git a/code/lib/manager-api/src/tests/stories.test.ts b/code/lib/manager-api/src/tests/stories.test.ts index 3e2672c43db0..02ec87a6800c 100644 --- a/code/lib/manager-api/src/tests/stories.test.ts +++ b/code/lib/manager-api/src/tests/stories.test.ts @@ -1,6 +1,6 @@ /// ; // Need to import jest as mockJest for annoying jest reasons. Is there a better way? -import { jest, jest as mockJest, it, describe, expect, beforeEach } from '@jest/globals'; +import { jest, it, describe, expect, beforeEach } from '@jest/globals'; import { STORY_ARGS_UPDATED, @@ -39,8 +39,8 @@ const mockGetEntries = jest.fn<() => StoryIndex['entries']>(); jest.mock('../lib/events'); jest.mock('@storybook/global', () => ({ global: { - ...(mockJest.requireActual('@storybook/global') as Record), - fetch: mockJest.fn(() => ({ json: () => ({ v: 4, entries: mockGetEntries() }) })), + ...globalThis, + fetch: jest.fn(() => ({ json: () => ({ v: 4, entries: mockGetEntries() }) })), FEATURES: { storyStoreV7: true }, CONFIG_TYPE: 'DEVELOPMENT', }, @@ -89,9 +89,14 @@ beforeEach(() => { provider.getConfig.mockReset().mockReturnValue({}); provider.serverChannel = mockChannel(); mockGetEntries.mockReset().mockReturnValue(mockEntries); - global.fetch - .mockReset() - .mockReturnValue({ status: 200, json: () => ({ v: 4, entries: mockGetEntries() }) }); + + (global.fetch as ReturnType>).mockReset().mockReturnValue( + Promise.resolve({ + status: 200, + ok: true, + json: () => ({ v: 4, entries: mockGetEntries() }), + } as any as Response) + ); getEventMetadataMock.mockReturnValue({ sourceType: 'local' } as any); getEventMetadataMock.mockReturnValue({ sourceType: 'local' } as any); @@ -562,7 +567,12 @@ describe('stories API', () => { const store = createMockStore({}); const fullAPI = Object.assign(new EventEmitter(), {}); - global.fetch.mockReturnValue({ status: 500, text: async () => new Error('sorting error') }); + (global.fetch as ReturnType>).mockReturnValue( + Promise.resolve({ + status: 500, + text: async () => new Error('sorting error'), + } as any as Response) + ); const { api, init } = initStories({ store, navigate, provider, fullAPI } as any); Object.assign(fullAPI, api); @@ -583,11 +593,13 @@ describe('stories API', () => { const { api, init } = initStories({ store, navigate, provider, fullAPI } as any); Object.assign(fullAPI, api); - global.fetch.mockClear(); + (global.fetch as ReturnType>).mockClear(); await init(); - expect(global.fetch).toHaveBeenCalledTimes(1); + expect(global.fetch as ReturnType>).toHaveBeenCalledTimes( + 1 + ); - global.fetch.mockClear(); + (global.fetch as ReturnType>).mockClear(); mockGetEntries.mockReturnValueOnce({ 'component-a--story-1': { type: 'story', diff --git a/code/ui/blocks/src/components/Preview.stories.tsx b/code/ui/blocks/src/components/Preview.stories.tsx index baa4bb70f50c..96dceac65f52 100644 --- a/code/ui/blocks/src/components/Preview.stories.tsx +++ b/code/ui/blocks/src/components/Preview.stories.tsx @@ -1,14 +1,12 @@ import type { ComponentProps } from 'react'; import React from 'react'; import { styled } from '@storybook/theming'; -import global from 'global'; +import { global } from '@storybook/global'; import { Spaced, Button } from '@storybook/components'; import { Preview, PreviewSkeleton } from './Preview'; import { Story } from './Story'; import * as sourceStories from './Source.stories'; -const { window: globalWindow } = global; - export default { component: Preview, }; @@ -194,7 +192,7 @@ export const WithAdditionalActions = () => ( { title: 'Open on GitHub', onClick: () => { - globalWindow.location.href = + global.location.href = 'https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/components/Preview.stories.tsx#L165-L186'; }, }, diff --git a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts index 29c214fe2dd6..2c8e2e7168e0 100644 --- a/code/ui/components/src/Zoom/browserSupportsCssZoom.ts +++ b/code/ui/components/src/Zoom/browserSupportsCssZoom.ts @@ -1,12 +1,9 @@ import { global } from '@storybook/global'; -const { window: globalWindow } = global; - export function browserSupportsCssZoom(): boolean { try { - return ( - globalWindow.document.implementation.createHTMLDocument('').body.style.zoom !== undefined - ); + // @ts-expect-error (we're testing for browser support) + return global.document.implementation.createHTMLDocument('').body.style.zoom !== undefined; } catch (error) { return false; } diff --git a/code/ui/manager/src/typings.d.ts b/code/ui/manager/src/typings.d.ts index 16db24e8059b..6919b2826ee3 100644 --- a/code/ui/manager/src/typings.d.ts +++ b/code/ui/manager/src/typings.d.ts @@ -1,3 +1,5 @@ declare module 'chromatic/isChromatic'; declare var DOCS_OPTIONS: any; +declare var CONFIG_TYPE: any; +declare var PREVIEW_URL: any; From 141dec1308cc8529a5f7e8ebcdf764c8dc02d49f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 9 Dec 2022 21:42:07 +0100 Subject: [PATCH 12/26] add new storybook scoped package to verdaccio config --- scripts/verdaccio.yaml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/scripts/verdaccio.yaml b/scripts/verdaccio.yaml index 92011f313490..128a29b5baf3 100644 --- a/scripts/verdaccio.yaml +++ b/scripts/verdaccio.yaml @@ -31,6 +31,10 @@ packages: access: $all publish: $all proxy: npmjs + '@storybook/global': + access: $all + publish: $all + proxy: npmjs '@storybook/design-system': access: $all publish: $all From 33427763207bef92d0f4a81d8c132a381d0b8a07 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 9 Dec 2022 22:03:35 +0100 Subject: [PATCH 13/26] fix references to global in template dirs --- code/addons/a11y/template/stories/parameters.stories.ts | 2 +- code/addons/a11y/template/stories/tests.stories.ts | 2 +- code/addons/actions/template/stories/argtype.stories.ts | 2 +- code/addons/actions/template/stories/basics.stories.ts | 2 +- code/addons/actions/template/stories/configs.stories.ts | 2 +- code/addons/actions/template/stories/parameters.stories.ts | 2 +- code/addons/backgrounds/template/stories/grid.stories.ts | 2 +- code/addons/backgrounds/template/stories/parameters.stories.ts | 2 +- code/addons/controls/template/stories/basics.stories.ts | 2 +- code/addons/controls/template/stories/conditional.stories.ts | 2 +- code/addons/controls/template/stories/disable.stories.ts | 2 +- code/addons/controls/template/stories/filters.stories.ts | 2 +- code/addons/controls/template/stories/issues.stories.ts | 2 +- code/addons/controls/template/stories/matchers.stories.ts | 2 +- code/addons/controls/template/stories/sorting.stories.ts | 2 +- code/addons/docs/template/stories/docs2/button.stories.ts | 2 +- code/addons/docs/template/stories/docspage/autoplay.stories.ts | 2 +- code/addons/docs/template/stories/docspage/basic.stories.ts | 2 +- .../docs/template/stories/docspage/description.stories.ts | 2 +- .../template/stories/docspage/extract-description.stories.ts | 2 +- code/addons/docs/template/stories/docspage/iframe.stories.ts | 2 +- code/addons/docs/template/stories/docspage/overflow.stories.ts | 2 +- code/addons/docs/template/stories/docspage/override.stories.ts | 2 +- code/addons/docs/template/stories/docspage/source.stories.ts | 2 +- code/addons/docs/template/stories/stories-mdx/basic.stories.mdx | 2 +- .../docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx | 2 +- .../addons/docs/template/stories/stories-mdx/iframe.stories.mdx | 2 +- .../template/stories/stories-mdx/play-functions.stories.mdx | 2 +- code/addons/interactions/template/stories/basics.stories.ts | 2 +- code/addons/links/template/stories/decorator.stories.ts | 2 +- code/addons/links/template/stories/linkto.stories.ts | 2 +- code/addons/links/template/stories/scroll.stories.ts | 2 +- code/addons/toolbars/template/stories/globals.stories.ts | 2 +- code/addons/viewport/template/stories/parameters.stories.ts | 2 +- .../frameworks/angular/template/stories/angular-mdx.stories.mdx | 2 +- code/lib/store/template/stories/argTypes.stories.ts | 2 +- code/lib/store/template/stories/args.stories.ts | 2 +- code/lib/store/template/stories/autotitle.stories.ts | 2 +- code/lib/store/template/stories/decorators.stories.ts | 2 +- code/lib/store/template/stories/exportOrder.stories.ts | 2 +- code/lib/store/template/stories/globals.stories.ts | 2 +- code/lib/store/template/stories/hooks.stories.ts | 2 +- code/lib/store/template/stories/interleavedExports.stories.ts | 2 +- code/lib/store/template/stories/layout.stories.ts | 2 +- code/lib/store/template/stories/loaders.stories.ts | 2 +- code/lib/store/template/stories/names.stories.ts | 2 +- code/lib/store/template/stories/parameters.stories.ts | 2 +- code/lib/store/template/stories/rendering.stories.ts | 2 +- code/lib/store/template/stories/shortcuts.stories.ts | 2 +- code/lib/store/template/stories/tags.stories.ts | 2 +- code/lib/store/template/stories/title.stories.ts | 2 +- code/lib/store/template/stories/unicode.stories.ts | 2 +- code/renderers/react/template/stories/react-mdx.stories.mdx | 2 +- code/renderers/svelte/template/stories/svelte-mdx.stories.mdx | 2 +- .../renderers/vue/template/stories/custom-decorators.stories.js | 2 +- code/renderers/vue/template/stories/custom-rendering.stories.js | 2 +- code/renderers/vue/template/stories/vue-mdx.stories.mdx | 2 +- code/renderers/vue3/template/stories/decorators.stories.js | 2 +- code/renderers/vue3/template/stories/vue3-mdx.stories.mdx | 2 +- 59 files changed, 59 insertions(+), 59 deletions(-) diff --git a/code/addons/a11y/template/stories/parameters.stories.ts b/code/addons/a11y/template/stories/parameters.stories.ts index 5b692bf9f87b..0b7f5dcad5b9 100644 --- a/code/addons/a11y/template/stories/parameters.stories.ts +++ b/code/addons/a11y/template/stories/parameters.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; export default { component: globalThis.Components.Html, diff --git a/code/addons/a11y/template/stories/tests.stories.ts b/code/addons/a11y/template/stories/tests.stories.ts index 03346296518a..407c77bd19f8 100644 --- a/code/addons/a11y/template/stories/tests.stories.ts +++ b/code/addons/a11y/template/stories/tests.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; export default { component: globalThis.Components.Html, diff --git a/code/addons/actions/template/stories/argtype.stories.ts b/code/addons/actions/template/stories/argtype.stories.ts index 1f04316f7dff..352bc74f1311 100644 --- a/code/addons/actions/template/stories/argtype.stories.ts +++ b/code/addons/actions/template/stories/argtype.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; export default { component: globalThis.Components.Button, diff --git a/code/addons/actions/template/stories/basics.stories.ts b/code/addons/actions/template/stories/basics.stories.ts index 86523878728e..4b6eba0ae430 100644 --- a/code/addons/actions/template/stories/basics.stories.ts +++ b/code/addons/actions/template/stories/basics.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { action } from '@storybook/addon-actions'; diff --git a/code/addons/actions/template/stories/configs.stories.ts b/code/addons/actions/template/stories/configs.stories.ts index 51ccac3b0084..e52c17606bb6 100644 --- a/code/addons/actions/template/stories/configs.stories.ts +++ b/code/addons/actions/template/stories/configs.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { actions, configureActions } from '@storybook/addon-actions'; diff --git a/code/addons/actions/template/stories/parameters.stories.ts b/code/addons/actions/template/stories/parameters.stories.ts index 5848c25b8375..e4a5bf0ef9dd 100644 --- a/code/addons/actions/template/stories/parameters.stories.ts +++ b/code/addons/actions/template/stories/parameters.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { withActions } from '@storybook/addon-actions/decorator'; export default { diff --git a/code/addons/backgrounds/template/stories/grid.stories.ts b/code/addons/backgrounds/template/stories/grid.stories.ts index e6a75a1dba76..361c18752ebb 100644 --- a/code/addons/backgrounds/template/stories/grid.stories.ts +++ b/code/addons/backgrounds/template/stories/grid.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; export default { component: globalThis.Components.Button, diff --git a/code/addons/backgrounds/template/stories/parameters.stories.ts b/code/addons/backgrounds/template/stories/parameters.stories.ts index 1d57ea959143..e6085424b99e 100644 --- a/code/addons/backgrounds/template/stories/parameters.stories.ts +++ b/code/addons/backgrounds/template/stories/parameters.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; const COLORS = [ { name: 'red', value: '#FB001D' }, diff --git a/code/addons/controls/template/stories/basics.stories.ts b/code/addons/controls/template/stories/basics.stories.ts index f5151890fdda..8b7bbebe665f 100644 --- a/code/addons/controls/template/stories/basics.stories.ts +++ b/code/addons/controls/template/stories/basics.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, StoryContext } from '@storybook/types'; export default { diff --git a/code/addons/controls/template/stories/conditional.stories.ts b/code/addons/controls/template/stories/conditional.stories.ts index b08b63f13138..7df82610f16a 100644 --- a/code/addons/controls/template/stories/conditional.stories.ts +++ b/code/addons/controls/template/stories/conditional.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, StoryContext } from '@storybook/types'; export default { diff --git a/code/addons/controls/template/stories/disable.stories.ts b/code/addons/controls/template/stories/disable.stories.ts index f95160a034c9..3d717eca352d 100644 --- a/code/addons/controls/template/stories/disable.stories.ts +++ b/code/addons/controls/template/stories/disable.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, StoryContext } from '@storybook/types'; export default { diff --git a/code/addons/controls/template/stories/filters.stories.ts b/code/addons/controls/template/stories/filters.stories.ts index 4ea5c36316dd..4bc7904aa89a 100644 --- a/code/addons/controls/template/stories/filters.stories.ts +++ b/code/addons/controls/template/stories/filters.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, StoryContext } from '@storybook/types'; export default { diff --git a/code/addons/controls/template/stories/issues.stories.ts b/code/addons/controls/template/stories/issues.stories.ts index 0b9cb463309c..462718633c1a 100644 --- a/code/addons/controls/template/stories/issues.stories.ts +++ b/code/addons/controls/template/stories/issues.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, StoryContext } from '@storybook/types'; export default { diff --git a/code/addons/controls/template/stories/matchers.stories.ts b/code/addons/controls/template/stories/matchers.stories.ts index b17b614cc396..266debeff71c 100644 --- a/code/addons/controls/template/stories/matchers.stories.ts +++ b/code/addons/controls/template/stories/matchers.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, StoryContext } from '@storybook/types'; export default { diff --git a/code/addons/controls/template/stories/sorting.stories.ts b/code/addons/controls/template/stories/sorting.stories.ts index 510314bceca1..fad557c3ee47 100644 --- a/code/addons/controls/template/stories/sorting.stories.ts +++ b/code/addons/controls/template/stories/sorting.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, StoryContext } from '@storybook/types'; export default { diff --git a/code/addons/docs/template/stories/docs2/button.stories.ts b/code/addons/docs/template/stories/docs2/button.stories.ts index 5119c70b7e61..14f45cee42df 100644 --- a/code/addons/docs/template/stories/docs2/button.stories.ts +++ b/code/addons/docs/template/stories/docs2/button.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; export default { component: globalThis.Components.Button, diff --git a/code/addons/docs/template/stories/docspage/autoplay.stories.ts b/code/addons/docs/template/stories/docspage/autoplay.stories.ts index 974837b582c4..50b01ae74504 100644 --- a/code/addons/docs/template/stories/docspage/autoplay.stories.ts +++ b/code/addons/docs/template/stories/docspage/autoplay.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { expect } from '@storybook/jest'; import { within } from '@storybook/testing-library'; diff --git a/code/addons/docs/template/stories/docspage/basic.stories.ts b/code/addons/docs/template/stories/docspage/basic.stories.ts index 58a24a2eb472..cf8768751607 100644 --- a/code/addons/docs/template/stories/docspage/basic.stories.ts +++ b/code/addons/docs/template/stories/docspage/basic.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; export default { component: globalThis.Components.Button, diff --git a/code/addons/docs/template/stories/docspage/description.stories.ts b/code/addons/docs/template/stories/docspage/description.stories.ts index 7eb04413a94a..98ed1de51473 100644 --- a/code/addons/docs/template/stories/docspage/description.stories.ts +++ b/code/addons/docs/template/stories/docspage/description.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; export default { component: globalThis.Components.Button, diff --git a/code/addons/docs/template/stories/docspage/extract-description.stories.ts b/code/addons/docs/template/stories/docspage/extract-description.stories.ts index 51ab3513c58d..bc9033127f68 100644 --- a/code/addons/docs/template/stories/docspage/extract-description.stories.ts +++ b/code/addons/docs/template/stories/docspage/extract-description.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; export default { component: globalThis.Components.Button, diff --git a/code/addons/docs/template/stories/docspage/iframe.stories.ts b/code/addons/docs/template/stories/docspage/iframe.stories.ts index df9cf977c9fc..8a087afca04a 100644 --- a/code/addons/docs/template/stories/docspage/iframe.stories.ts +++ b/code/addons/docs/template/stories/docspage/iframe.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; export default { component: globalThis.Components.Button, diff --git a/code/addons/docs/template/stories/docspage/overflow.stories.ts b/code/addons/docs/template/stories/docspage/overflow.stories.ts index a281100c8854..9c3c7f7b70d9 100644 --- a/code/addons/docs/template/stories/docspage/overflow.stories.ts +++ b/code/addons/docs/template/stories/docspage/overflow.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; export default { component: globalThis.Components.Pre, diff --git a/code/addons/docs/template/stories/docspage/override.stories.ts b/code/addons/docs/template/stories/docspage/override.stories.ts index b96dde24c07a..0f46a108c325 100644 --- a/code/addons/docs/template/stories/docspage/override.stories.ts +++ b/code/addons/docs/template/stories/docspage/override.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +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 index 62eb646c6a00..84d12fe56f1c 100644 --- a/code/addons/docs/template/stories/docspage/source.stories.ts +++ b/code/addons/docs/template/stories/docspage/source.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; export default { component: globalThis.Components.Button, diff --git a/code/addons/docs/template/stories/stories-mdx/basic.stories.mdx b/code/addons/docs/template/stories/stories-mdx/basic.stories.mdx index a8e6ea8ff07a..7aec7745397d 100644 --- a/code/addons/docs/template/stories/stories-mdx/basic.stories.mdx +++ b/code/addons/docs/template/stories/stories-mdx/basic.stories.mdx @@ -1,5 +1,5 @@ import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; diff --git a/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx b/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx index 8984faa476b9..fda87f38fd6b 100644 --- a/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx +++ b/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx @@ -1,5 +1,5 @@ import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import * as Csf from './csf-in-mdx.stories.js'; diff --git a/code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx b/code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx index d77b4d5972a8..f947df3b35cf 100644 --- a/code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx +++ b/code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx @@ -1,5 +1,5 @@ import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; diff --git a/code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx b/code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx index 3b194432193b..aef8fe5df0ba 100644 --- a/code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx +++ b/code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx @@ -1,5 +1,5 @@ import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'; -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; console.log('component play')} /> diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts index 08de4183d9c1..c8ddea0b6ea3 100644 --- a/code/addons/interactions/template/stories/basics.stories.ts +++ b/code/addons/interactions/template/stories/basics.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { within, waitFor, diff --git a/code/addons/links/template/stories/decorator.stories.ts b/code/addons/links/template/stories/decorator.stories.ts index 562633320441..218833a75800 100644 --- a/code/addons/links/template/stories/decorator.stories.ts +++ b/code/addons/links/template/stories/decorator.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { withLinks } from '@storybook/addon-links'; export default { diff --git a/code/addons/links/template/stories/linkto.stories.ts b/code/addons/links/template/stories/linkto.stories.ts index 09066ccfc86a..bdc752c2ae17 100644 --- a/code/addons/links/template/stories/linkto.stories.ts +++ b/code/addons/links/template/stories/linkto.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { linkTo } from '@storybook/addon-links'; export default { diff --git a/code/addons/links/template/stories/scroll.stories.ts b/code/addons/links/template/stories/scroll.stories.ts index 0445506d1a99..a7d6a3937763 100644 --- a/code/addons/links/template/stories/scroll.stories.ts +++ b/code/addons/links/template/stories/scroll.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { withLinks } from '@storybook/addon-links'; export default { diff --git a/code/addons/toolbars/template/stories/globals.stories.ts b/code/addons/toolbars/template/stories/globals.stories.ts index e5567bcb1513..1a99081dd9c0 100644 --- a/code/addons/toolbars/template/stories/globals.stories.ts +++ b/code/addons/toolbars/template/stories/globals.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, StoryContext } from '@storybook/types'; const greetingForLocale = (locale: string) => { diff --git a/code/addons/viewport/template/stories/parameters.stories.ts b/code/addons/viewport/template/stories/parameters.stories.ts index 03b2b9e264c9..8ea3a1bbc4dc 100644 --- a/code/addons/viewport/template/stories/parameters.stories.ts +++ b/code/addons/viewport/template/stories/parameters.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport'; export default { diff --git a/code/frameworks/angular/template/stories/angular-mdx.stories.mdx b/code/frameworks/angular/template/stories/angular-mdx.stories.mdx index 025f8c0663fc..afe20c14379b 100644 --- a/code/frameworks/angular/template/stories/angular-mdx.stories.mdx +++ b/code/frameworks/angular/template/stories/angular-mdx.stories.mdx @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { moduleMetadata } from '@storybook/angular'; import { Meta, Story, Canvas } from '@storybook/addon-docs'; diff --git a/code/lib/store/template/stories/argTypes.stories.ts b/code/lib/store/template/stories/argTypes.stories.ts index 409e20212a59..2c72888297c8 100644 --- a/code/lib/store/template/stories/argTypes.stories.ts +++ b/code/lib/store/template/stories/argTypes.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types'; import { within } from '@storybook/testing-library'; import { expect } from '@storybook/jest'; diff --git a/code/lib/store/template/stories/args.stories.ts b/code/lib/store/template/stories/args.stories.ts index 5b39fa61e509..80a4e8f26320 100644 --- a/code/lib/store/template/stories/args.stories.ts +++ b/code/lib/store/template/stories/args.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types'; import { within } from '@storybook/testing-library'; import { expect } from '@storybook/jest'; diff --git a/code/lib/store/template/stories/autotitle.stories.ts b/code/lib/store/template/stories/autotitle.stories.ts index dacdc7c7e025..0859431330ae 100644 --- a/code/lib/store/template/stories/autotitle.stories.ts +++ b/code/lib/store/template/stories/autotitle.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { expect } from '@storybook/jest'; import type { PlayFunctionContext } from '@storybook/types'; diff --git a/code/lib/store/template/stories/decorators.stories.ts b/code/lib/store/template/stories/decorators.stories.ts index 7eb325160788..5dc104ded1a5 100644 --- a/code/lib/store/template/stories/decorators.stories.ts +++ b/code/lib/store/template/stories/decorators.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types'; import { within } from '@storybook/testing-library'; import { expect } from '@storybook/jest'; diff --git a/code/lib/store/template/stories/exportOrder.stories.ts b/code/lib/store/template/stories/exportOrder.stories.ts index 51cbb77a63fb..cb6221bf5e33 100644 --- a/code/lib/store/template/stories/exportOrder.stories.ts +++ b/code/lib/store/template/stories/exportOrder.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; export default { component: globalThis.Components.Pre, diff --git a/code/lib/store/template/stories/globals.stories.ts b/code/lib/store/template/stories/globals.stories.ts index f0556452d0a1..a1cdd3224099 100644 --- a/code/lib/store/template/stories/globals.stories.ts +++ b/code/lib/store/template/stories/globals.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types'; import { within } from '@storybook/testing-library'; import { expect } from '@storybook/jest'; diff --git a/code/lib/store/template/stories/hooks.stories.ts b/code/lib/store/template/stories/hooks.stories.ts index d09c21af2115..55e134f4008a 100644 --- a/code/lib/store/template/stories/hooks.stories.ts +++ b/code/lib/store/template/stories/hooks.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, PlayFunctionContext } from '@storybook/types'; import { useEffect, useState } from '@storybook/preview-api'; import { within, userEvent } from '@storybook/testing-library'; diff --git a/code/lib/store/template/stories/interleavedExports.stories.ts b/code/lib/store/template/stories/interleavedExports.stories.ts index 8fb77a77be3a..58b3e6eb055e 100644 --- a/code/lib/store/template/stories/interleavedExports.stories.ts +++ b/code/lib/store/template/stories/interleavedExports.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; export default { component: globalThis.Components.Pre, diff --git a/code/lib/store/template/stories/layout.stories.ts b/code/lib/store/template/stories/layout.stories.ts index 1bc7c0c207e5..b7e45a83de6c 100644 --- a/code/lib/store/template/stories/layout.stories.ts +++ b/code/lib/store/template/stories/layout.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; const style = { display: 'block', diff --git a/code/lib/store/template/stories/loaders.stories.ts b/code/lib/store/template/stories/loaders.stories.ts index 0067ef218cb9..1cd71d65771c 100644 --- a/code/lib/store/template/stories/loaders.stories.ts +++ b/code/lib/store/template/stories/loaders.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types'; import { within } from '@storybook/testing-library'; import { expect } from '@storybook/jest'; diff --git a/code/lib/store/template/stories/names.stories.ts b/code/lib/store/template/stories/names.stories.ts index 82900557b715..b840cbb1e8c8 100644 --- a/code/lib/store/template/stories/names.stories.ts +++ b/code/lib/store/template/stories/names.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { expect } from '@storybook/jest'; import type { PlayFunctionContext } from '@storybook/types'; diff --git a/code/lib/store/template/stories/parameters.stories.ts b/code/lib/store/template/stories/parameters.stories.ts index 99d92ae71be2..fc15f7bb3d61 100644 --- a/code/lib/store/template/stories/parameters.stories.ts +++ b/code/lib/store/template/stories/parameters.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types'; import { within } from '@storybook/testing-library'; import { expect } from '@storybook/jest'; diff --git a/code/lib/store/template/stories/rendering.stories.ts b/code/lib/store/template/stories/rendering.stories.ts index d79f1a3fb0cc..58b7ca91d8f8 100644 --- a/code/lib/store/template/stories/rendering.stories.ts +++ b/code/lib/store/template/stories/rendering.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import type { PlayFunctionContext } from '@storybook/types'; import { within, waitFor } from '@storybook/testing-library'; import { expect } from '@storybook/jest'; diff --git a/code/lib/store/template/stories/shortcuts.stories.ts b/code/lib/store/template/stories/shortcuts.stories.ts index 6a0ffec340bc..a55abe8a9a8f 100644 --- a/code/lib/store/template/stories/shortcuts.stories.ts +++ b/code/lib/store/template/stories/shortcuts.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { userEvent, within } from '@storybook/testing-library'; import { PREVIEW_KEYDOWN } from '@storybook/core-events'; import { jest, expect } from '@storybook/jest'; diff --git a/code/lib/store/template/stories/tags.stories.ts b/code/lib/store/template/stories/tags.stories.ts index 57d7b73c80f7..8f0a15a5648e 100644 --- a/code/lib/store/template/stories/tags.stories.ts +++ b/code/lib/store/template/stories/tags.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types'; import { within } from '@storybook/testing-library'; import { expect } from '@storybook/jest'; diff --git a/code/lib/store/template/stories/title.stories.ts b/code/lib/store/template/stories/title.stories.ts index 49b5288d732f..8e87740d1bf7 100644 --- a/code/lib/store/template/stories/title.stories.ts +++ b/code/lib/store/template/stories/title.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { expect } from '@storybook/jest'; import type { PlayFunctionContext } from '@storybook/types'; diff --git a/code/lib/store/template/stories/unicode.stories.ts b/code/lib/store/template/stories/unicode.stories.ts index 387896d3f234..71282e62f3b2 100644 --- a/code/lib/store/template/stories/unicode.stories.ts +++ b/code/lib/store/template/stories/unicode.stories.ts @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; export default { component: globalThis.Components.Button, diff --git a/code/renderers/react/template/stories/react-mdx.stories.mdx b/code/renderers/react/template/stories/react-mdx.stories.mdx index 8591bc513b25..e8676a0e22d8 100644 --- a/code/renderers/react/template/stories/react-mdx.stories.mdx +++ b/code/renderers/react/template/stories/react-mdx.stories.mdx @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { Meta, Story, Canvas } from '@storybook/addon-docs'; diff --git a/code/renderers/svelte/template/stories/svelte-mdx.stories.mdx b/code/renderers/svelte/template/stories/svelte-mdx.stories.mdx index b8b3cabb51b0..652714619c95 100644 --- a/code/renderers/svelte/template/stories/svelte-mdx.stories.mdx +++ b/code/renderers/svelte/template/stories/svelte-mdx.stories.mdx @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { Meta, Story, Canvas } from '@storybook/addon-docs'; import ButtonView from './views/ButtonView.svelte'; import BorderDecoratorRed from './views/BorderDecoratorRed.svelte'; diff --git a/code/renderers/vue/template/stories/custom-decorators.stories.js b/code/renderers/vue/template/stories/custom-decorators.stories.js index 3b061ab7d375..1415f6987614 100644 --- a/code/renderers/vue/template/stories/custom-decorators.stories.js +++ b/code/renderers/vue/template/stories/custom-decorators.stories.js @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; const MyButton = globalThis.Components.Button; diff --git a/code/renderers/vue/template/stories/custom-rendering.stories.js b/code/renderers/vue/template/stories/custom-rendering.stories.js index 895df94d9d85..39032b05f8f7 100644 --- a/code/renderers/vue/template/stories/custom-rendering.stories.js +++ b/code/renderers/vue/template/stories/custom-rendering.stories.js @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; const MyButton = globalThis.Components.Button; diff --git a/code/renderers/vue/template/stories/vue-mdx.stories.mdx b/code/renderers/vue/template/stories/vue-mdx.stories.mdx index 8a65cb358062..067d9af4eb6b 100644 --- a/code/renderers/vue/template/stories/vue-mdx.stories.mdx +++ b/code/renderers/vue/template/stories/vue-mdx.stories.mdx @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { Meta, Story, Canvas } from '@storybook/addon-docs'; diff --git a/code/renderers/vue3/template/stories/decorators.stories.js b/code/renderers/vue3/template/stories/decorators.stories.js index 5835f38eea13..53d64ae0f076 100644 --- a/code/renderers/vue3/template/stories/decorators.stories.js +++ b/code/renderers/vue3/template/stories/decorators.stories.js @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { h } from 'vue'; const { Button, Pre } = globalThis.Components; diff --git a/code/renderers/vue3/template/stories/vue3-mdx.stories.mdx b/code/renderers/vue3/template/stories/vue3-mdx.stories.mdx index 1656236cf39f..e84f893819d5 100644 --- a/code/renderers/vue3/template/stories/vue3-mdx.stories.mdx +++ b/code/renderers/vue3/template/stories/vue3-mdx.stories.mdx @@ -1,4 +1,4 @@ -import globalThis from 'global'; +import { global as globalThis } from '@storybook/global'; import { Meta, Story, Canvas } from '@storybook/addon-docs'; From 43aca90a3d3bd29731521964d3b90a47ea94dcc5 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 9 Dec 2022 22:25:28 +0100 Subject: [PATCH 14/26] fixes --- code/lib/builder-vite/src/optimizeDeps.ts | 3 +-- .../lib/builder-webpack5/src/preview/iframe-webpack.config.ts | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/code/lib/builder-vite/src/optimizeDeps.ts b/code/lib/builder-vite/src/optimizeDeps.ts index 0ea4583aa819..099e8005f0cf 100644 --- a/code/lib/builder-vite/src/optimizeDeps.ts +++ b/code/lib/builder-vite/src/optimizeDeps.ts @@ -18,6 +18,7 @@ const INCLUDE_CANDIDATES = [ '@storybook/client-api', '@storybook/client-logger', '@storybook/core/client', + '@storybook/global', '@storybook/preview-api', '@storybook/preview-web', '@storybook/react > acorn-jsx', @@ -38,8 +39,6 @@ const INCLUDE_CANDIDATES = [ 'escodegen', 'estraverse', 'fast-deep-equal', - 'global', - '@storybook/global', 'html-tags', 'isobject', 'jest-mock', diff --git a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts index 2fbb45eb6061..09ab604b79e1 100644 --- a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -25,12 +25,12 @@ import type { BuilderOptions, TypescriptOptions } from '../types'; import { createBabelLoader } from './babel-loader-preview'; const storybookPaths: Record = { - global: dirname(require.resolve(`global/package.json`)), ...[ // these packages are not pre-bundled because of react dependencies 'api', - 'manager-api', 'components', + 'global', + 'manager-api', 'router', 'theming', ].reduce( From d9f736a0d0048ad7b5b5875f6690cb50f69dc8f0 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 9 Dec 2022 23:00:38 +0100 Subject: [PATCH 15/26] cleanup --- code/addons/backgrounds/src/typings.d.ts | 0 code/addons/highlight/src/typings.d.ts | 0 code/addons/interactions/src/typings.d.ts | 0 code/addons/jest/src/typings.d.ts | 0 code/addons/links/src/typings.d.ts | 0 code/addons/outline/src/typings.d.ts | 0 code/frameworks/preact-webpack5/src/typings.d.ts | 0 code/lib/router/src/index.ts | 3 --- code/lib/router/src/typings.d.ts | 0 code/lib/types/src/index.ts | 3 --- code/lib/types/src/typings.d.ts | 0 code/renderers/react/src/typings.d.ts | 1 + 12 files changed, 1 insertion(+), 6 deletions(-) delete mode 100644 code/addons/backgrounds/src/typings.d.ts delete mode 100644 code/addons/highlight/src/typings.d.ts delete mode 100644 code/addons/interactions/src/typings.d.ts delete mode 100644 code/addons/jest/src/typings.d.ts delete mode 100644 code/addons/links/src/typings.d.ts delete mode 100644 code/addons/outline/src/typings.d.ts delete mode 100644 code/frameworks/preact-webpack5/src/typings.d.ts delete mode 100644 code/lib/router/src/typings.d.ts delete mode 100644 code/lib/types/src/typings.d.ts diff --git a/code/addons/backgrounds/src/typings.d.ts b/code/addons/backgrounds/src/typings.d.ts deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/code/addons/highlight/src/typings.d.ts b/code/addons/highlight/src/typings.d.ts deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/code/addons/interactions/src/typings.d.ts b/code/addons/interactions/src/typings.d.ts deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/code/addons/jest/src/typings.d.ts b/code/addons/jest/src/typings.d.ts deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/code/addons/links/src/typings.d.ts b/code/addons/links/src/typings.d.ts deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/code/addons/outline/src/typings.d.ts b/code/addons/outline/src/typings.d.ts deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/code/frameworks/preact-webpack5/src/typings.d.ts b/code/frameworks/preact-webpack5/src/typings.d.ts deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/code/lib/router/src/index.ts b/code/lib/router/src/index.ts index 1026ffcf03e2..a185eddbd096 100644 --- a/code/lib/router/src/index.ts +++ b/code/lib/router/src/index.ts @@ -1,6 +1,3 @@ -// eslint-disable-next-line @typescript-eslint/triple-slash-reference -/// - export * from './utils'; export * from './router'; export * from './types'; diff --git a/code/lib/router/src/typings.d.ts b/code/lib/router/src/typings.d.ts deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/code/lib/types/src/index.ts b/code/lib/types/src/index.ts index a4b31735daa5..dadfe53704a4 100644 --- a/code/lib/types/src/index.ts +++ b/code/lib/types/src/index.ts @@ -1,6 +1,3 @@ -// eslint-disable-next-line @typescript-eslint/triple-slash-reference -/// - export * from './modules/csf'; export * from './modules/addons'; export * from './modules/story'; diff --git a/code/lib/types/src/typings.d.ts b/code/lib/types/src/typings.d.ts deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/code/renderers/react/src/typings.d.ts b/code/renderers/react/src/typings.d.ts index 46735514c54e..440b5a4e24a4 100644 --- a/code/renderers/react/src/typings.d.ts +++ b/code/renderers/react/src/typings.d.ts @@ -42,5 +42,6 @@ declare module 'react-dom/client' { options?: HydrationOptions ): Root; } + declare var STORYBOOK_ENV: 'react'; declare var FRAMEWORK_OPTIONS: any; From b04120907abc60c46d1794b10071ce62f486d2ad Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 12 Dec 2022 14:31:06 +0100 Subject: [PATCH 16/26] simplify globals --- code/frameworks/angular/src/typings.d.ts | 22 +++++++--------- .../src/codegen-modern-iframe-script.ts | 15 ++++++----- .../src/modules/client-api/ClientApi.ts | 26 +++++++++---------- .../src/modules/core-client/start.test.ts | 4 +-- .../src/modules/core-client/start.ts | 4 +-- .../src/modules/preview-web/PreviewWeb.tsx | 2 +- code/lib/preview-api/src/typings.d.ts | 13 ++++------ 7 files changed, 41 insertions(+), 45 deletions(-) diff --git a/code/frameworks/angular/src/typings.d.ts b/code/frameworks/angular/src/typings.d.ts index 384ec66c55e8..17eb26fa87d4 100644 --- a/code/frameworks/angular/src/typings.d.ts +++ b/code/frameworks/angular/src/typings.d.ts @@ -3,18 +3,16 @@ // will be provided by the webpack define plugin declare var NODE_ENV: string | undefined; -declare var STORYBOOK_ENV: 'angular'; -declare var FEATURES: any; -declare var STORIES: any; -declare var LOGLEVEL: any; -declare var CHANNEL_OPTIONS: any; -declare var STORYBOOK_HOOKS_CONTEXT: any; -declare var DOCS_OPTIONS: any; -declare var IS_STORYBOOK: any; +declare var __STORYBOOK_ADDONS_CHANNEL__: any; declare var __STORYBOOK_ADDONS_PREVIEW: any; +declare var __STORYBOOK_CLIENT_API__: any; declare var __STORYBOOK_PREVIEW__: any; declare var __STORYBOOK_STORY_STORE__: any; -declare var __STORYBOOK_ADDONS_CHANNEL__: any; -declare var __STORYBOOK_PREVIEWWEB_INSTANCE__: any; -declare var __STORYBOOK_CLIENTAPI_INSTANCE__: any; -declare var __STORYBOOK_CLIENT_API__: any; +declare var CHANNEL_OPTIONS: any; +declare var DOCS_OPTIONS: any; +declare var FEATURES: any; +declare var IS_STORYBOOK: any; +declare var LOGLEVEL: any; +declare var STORIES: any; +declare var STORYBOOK_ENV: 'angular'; +declare var STORYBOOK_HOOKS_CONTEXT: any; diff --git a/code/lib/builder-vite/src/codegen-modern-iframe-script.ts b/code/lib/builder-vite/src/codegen-modern-iframe-script.ts index 980ac874a9f7..9d6ee3bd67bd 100644 --- a/code/lib/builder-vite/src/codegen-modern-iframe-script.ts +++ b/code/lib/builder-vite/src/codegen-modern-iframe-script.ts @@ -32,7 +32,7 @@ export async function generateModernIframeScriptCode(options: ExtendedOptions) { if (import.meta.hot) { import.meta.hot.accept('${virtualStoriesFile}', (newModule) => { // importFn has changed so we need to patch the new one in - preview.onStoriesChanged({ importFn: newModule.importFn }); + window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn }); }); import.meta.hot.accept(${JSON.stringify( @@ -41,7 +41,7 @@ export async function generateModernIframeScriptCode(options: ExtendedOptions) { const newGetProjectAnnotations = () => composeConfigs(newConfigEntries); // getProjectAnnotations has changed so we need to patch the new one in - preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations }); + window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations }); }); }`.trim(); }; @@ -64,13 +64,14 @@ export async function generateModernIframeScriptCode(options: ExtendedOptions) { return composeConfigs(configs); } - const preview = new PreviewWeb(); - window.__STORYBOOK_PREVIEW__ = preview; - window.__STORYBOOK_STORY_STORE__ = preview.storyStore; - window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore }); + window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(); + + window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || preview; + window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || preview.storyStore; + window.__STORYBOOK_CLIENT_API__ = window.__STORYBOOK_CLIENT_API__ || new ClientApi({ storyStore: preview.storyStore }); - preview.initialize({ importFn, getProjectAnnotations }); + window.__STORYBOOK_PREVIEW__.initialize({ importFn, getProjectAnnotations }); ${generateHMRHandler(frameworkName)}; `.trim(); diff --git a/code/lib/preview-api/src/modules/client-api/ClientApi.ts b/code/lib/preview-api/src/modules/client-api/ClientApi.ts index c4b41fcc509a..53930d9a6733 100644 --- a/code/lib/preview-api/src/modules/client-api/ClientApi.ts +++ b/code/lib/preview-api/src/modules/client-api/ClientApi.ts @@ -53,60 +53,60 @@ const checkMethod = (method: keyof typeof warningAlternatives) => { ); } - if (!global.__STORYBOOK_CLIENTAPI_INSTANCE__) { + if (!global.__STORYBOOK_CLIENT_API__) { throw new Error(`Singleton client API not yet initialized, cannot call \`${method}\`.`); } }; export const addDecorator = (decorator: DecoratorFunction) => { checkMethod('addDecorator'); - global.__STORYBOOK_CLIENTAPI_INSTANCE__?.addDecorator(decorator); + global.__STORYBOOK_CLIENT_API__?.addDecorator(decorator); }; export const addParameters = (parameters: Parameters) => { checkMethod('addParameters'); - global.__STORYBOOK_CLIENTAPI_INSTANCE__?.addParameters(parameters); + global.__STORYBOOK_CLIENT_API__?.addParameters(parameters); }; export const addLoader = (loader: LoaderFunction) => { checkMethod('addLoader'); - global.__STORYBOOK_CLIENTAPI_INSTANCE__?.addLoader(loader); + global.__STORYBOOK_CLIENT_API__?.addLoader(loader); }; export const addArgs = (args: Args) => { checkMethod('addArgs'); - global.__STORYBOOK_CLIENTAPI_INSTANCE__?.addArgs(args); + global.__STORYBOOK_CLIENT_API__?.addArgs(args); }; export const addArgTypes = (argTypes: ArgTypes) => { checkMethod('addArgTypes'); - global.__STORYBOOK_CLIENTAPI_INSTANCE__?.addArgTypes(argTypes); + global.__STORYBOOK_CLIENT_API__?.addArgTypes(argTypes); }; export const addArgsEnhancer = (enhancer: ArgsEnhancer) => { checkMethod('addArgsEnhancer'); - global.__STORYBOOK_CLIENTAPI_INSTANCE__?.addArgsEnhancer(enhancer); + global.__STORYBOOK_CLIENT_API__?.addArgsEnhancer(enhancer); }; export const addArgTypesEnhancer = (enhancer: ArgTypesEnhancer) => { checkMethod('addArgTypesEnhancer'); - global.__STORYBOOK_CLIENTAPI_INSTANCE__?.addArgTypesEnhancer(enhancer); + global.__STORYBOOK_CLIENT_API__?.addArgTypesEnhancer(enhancer); }; export const addStepRunner = (stepRunner: StepRunner) => { checkMethod('addStepRunner'); - global.__STORYBOOK_CLIENTAPI_INSTANCE__?.addStepRunner(stepRunner); + global.__STORYBOOK_CLIENT_API__?.addStepRunner(stepRunner); }; export const getGlobalRender = () => { checkMethod('getGlobalRender'); - return global.__STORYBOOK_CLIENTAPI_INSTANCE__?.facade.projectAnnotations.render; + return global.__STORYBOOK_CLIENT_API__?.facade.projectAnnotations.render; }; export const setGlobalRender = (render: StoryStoreFacade['projectAnnotations']['render']) => { checkMethod('setGlobalRender'); - if (global.__STORYBOOK_CLIENTAPI_INSTANCE__) { - global.__STORYBOOK_CLIENTAPI_INSTANCE__.facade.projectAnnotations.render = render; + if (global.__STORYBOOK_CLIENT_API__) { + global.__STORYBOOK_CLIENT_API__.facade.projectAnnotations.render = render; } }; @@ -135,7 +135,7 @@ export class ClientApi { this.storyStore = storyStore; - global.__STORYBOOK_CLIENTAPI_INSTANCE__ = this; + global.__STORYBOOK_CLIENT_API__ = this; } importFn(path: Path) { diff --git a/code/lib/preview-api/src/modules/core-client/start.test.ts b/code/lib/preview-api/src/modules/core-client/start.test.ts index c85370e2921b..3b5b1716c5be 100644 --- a/code/lib/preview-api/src/modules/core-client/start.test.ts +++ b/code/lib/preview-api/src/modules/core-client/start.test.ts @@ -114,9 +114,9 @@ describe('start', () => { beforeEach(() => { global.DOCS_OPTIONS = { enabled: false }; // @ts-expect-error (setting this to undefined is indeed what we want to do) - global.__STORYBOOK_CLIENTAPI_INSTANCE__ = undefined; + global.__STORYBOOK_CLIENT_API__ = undefined; // @ts-expect-error (setting this to undefined is indeed what we want to do) - global.__STORYBOOK_PREVIEWWEB_INSTANCE__ = undefined; + global.__STORYBOOK_PREVIEW__ = undefined; // @ts-expect-error (setting this to undefined is indeed what we want to do) global.IS_STORYBOOK = undefined; }); diff --git a/code/lib/preview-api/src/modules/core-client/start.ts b/code/lib/preview-api/src/modules/core-client/start.ts index 9421e0fa918e..3e7bd14155db 100644 --- a/code/lib/preview-api/src/modules/core-client/start.ts +++ b/code/lib/preview-api/src/modules/core-client/start.ts @@ -60,8 +60,8 @@ export function start( const channel = createChannel({ page: 'preview' }); addons.setChannel(channel); - const clientApi = global.__STORYBOOK_CLIENTAPI_INSTANCE__ || new ClientApi(); - const preview = global.__STORYBOOK_PREVIEWWEB_INSTANCE__ || new PreviewWeb(); + const clientApi = global.__STORYBOOK_CLIENT_API__ || new ClientApi(); + const preview = global.__STORYBOOK_PREVIEW__ || new PreviewWeb(); let initialized = false; const importFn = (path: Path) => clientApi.importFn(path); diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.tsx index ae82afb6212a..e945320a0f0c 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.tsx +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.tsx @@ -10,6 +10,6 @@ export class PreviewWeb extends PreviewWithSelectio constructor() { super(new UrlStore(), new WebView()); - global.__STORYBOOK_PREVIEWWEB_INSTANCE__ = this; + global.__STORYBOOK_PREVIEW__ = this; } } diff --git a/code/lib/preview-api/src/typings.d.ts b/code/lib/preview-api/src/typings.d.ts index 372d59d1ca4c..2c963acb62c8 100644 --- a/code/lib/preview-api/src/typings.d.ts +++ b/code/lib/preview-api/src/typings.d.ts @@ -17,19 +17,16 @@ var FEATURES: Features | undefined; var STORIES: any; var DOCS_OPTIONS: any; -// ClientApi (and StoreStore) are really singletons. However they are not created until the -// relevant framework instantiates them via `start.js`. The good news is this happens right away. -var __STORYBOOK_CLIENTAPI_INSTANCE__: import('./modules/client-api/ClientApi').ClientApi; -var __STORYBOOK_PREVIEWWEB_INSTANCE__: import('./modules/preview-web/PreviewWeb').PreviewWeb; - // To enable user code to detect if it is running in Storybook var IS_STORYBOOK: boolean; -var __STORYBOOK_CLIENT_API__: any; +// ClientApi (and StoreStore) are really singletons. However they are not created until the +// relevant framework instantiates them via `start.js`. The good news is this happens right away. var __STORYBOOK_ADDONS_CHANNEL__: any; -var __STORYBOOK_PREVIEW__: any; -var __STORYBOOK_STORY_STORE__: any; var __STORYBOOK_ADDONS_PREVIEW: any; +var __STORYBOOK_CLIENT_API__: import('./modules/client-api/ClientApi').ClientApi; +var __STORYBOOK_PREVIEW__: import('./modules/preview-web/PreviewWeb').PreviewWeb; +var __STORYBOOK_STORY_STORE__: any; var STORYBOOK_HOOKS_CONTEXT: any; declare module 'ansi-to-html'; From 0761c1501766644b3e3806e32cd17dec0d8f1195 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 12 Dec 2022 14:54:34 +0100 Subject: [PATCH 17/26] fix --- code/lib/builder-vite/src/codegen-modern-iframe-script.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/code/lib/builder-vite/src/codegen-modern-iframe-script.ts b/code/lib/builder-vite/src/codegen-modern-iframe-script.ts index 9d6ee3bd67bd..53061f175d81 100644 --- a/code/lib/builder-vite/src/codegen-modern-iframe-script.ts +++ b/code/lib/builder-vite/src/codegen-modern-iframe-script.ts @@ -67,10 +67,8 @@ export async function generateModernIframeScriptCode(options: ExtendedOptions) { window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(); - window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || preview; - window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || preview.storyStore; - window.__STORYBOOK_CLIENT_API__ = window.__STORYBOOK_CLIENT_API__ || new ClientApi({ storyStore: preview.storyStore }); - + window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || window.__STORYBOOK_PREVIEW__.storyStore; + window.__STORYBOOK_CLIENT_API__ = window.__STORYBOOK_CLIENT_API__ || new ClientApi({ storyStore: window.__STORYBOOK_PREVIEW__.storyStore }); window.__STORYBOOK_PREVIEW__.initialize({ importFn, getProjectAnnotations }); ${generateHMRHandler(frameworkName)}; From c1a62a24f646c4c573ec67328ee4436e7e1c0d5e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 12 Dec 2022 15:18:48 +0100 Subject: [PATCH 18/26] fix --- code/lib/builder-vite/src/codegen-iframe-script.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/builder-vite/src/codegen-iframe-script.ts b/code/lib/builder-vite/src/codegen-iframe-script.ts index 8f986e9ca26a..a5818c1a170b 100644 --- a/code/lib/builder-vite/src/codegen-iframe-script.ts +++ b/code/lib/builder-vite/src/codegen-iframe-script.ts @@ -30,7 +30,7 @@ export async function generateIframeScriptCode(options: ExtendedOptions) { import { configure } from '${rendererName}'; import { logger } from '@storybook/client-logger'; - import * as clientApi from "@storybook/preview-api"; + import * as previewApi from "@storybook/preview-api"; ${filesToImport(configEntries, 'config')} import * as preview from '${virtualPreviewFile}'; From 1263ac852660c25c2a2ffca785f599a57e2acc68 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 12 Dec 2022 16:39:24 +0100 Subject: [PATCH 19/26] ensure singleton via global --- .../builder-vite/src/codegen-iframe-script.ts | 2 +- .../src/codegen-modern-iframe-script.ts | 15 +++--- .../virtualModuleModernEntry.js.handlebars | 30 +++++------ .../src/modules/client-api/ClientApi.ts | 50 +++++++++---------- .../src/modules/core-client/start.ts | 7 ++- .../src/modules/preview-web/PreviewWeb.tsx | 4 ++ 6 files changed, 53 insertions(+), 55 deletions(-) diff --git a/code/lib/builder-vite/src/codegen-iframe-script.ts b/code/lib/builder-vite/src/codegen-iframe-script.ts index 8f986e9ca26a..a5818c1a170b 100644 --- a/code/lib/builder-vite/src/codegen-iframe-script.ts +++ b/code/lib/builder-vite/src/codegen-iframe-script.ts @@ -30,7 +30,7 @@ export async function generateIframeScriptCode(options: ExtendedOptions) { import { configure } from '${rendererName}'; import { logger } from '@storybook/client-logger'; - import * as clientApi from "@storybook/preview-api"; + import * as previewApi from "@storybook/preview-api"; ${filesToImport(configEntries, 'config')} import * as preview from '${virtualPreviewFile}'; diff --git a/code/lib/builder-vite/src/codegen-modern-iframe-script.ts b/code/lib/builder-vite/src/codegen-modern-iframe-script.ts index 980ac874a9f7..53061f175d81 100644 --- a/code/lib/builder-vite/src/codegen-modern-iframe-script.ts +++ b/code/lib/builder-vite/src/codegen-modern-iframe-script.ts @@ -32,7 +32,7 @@ export async function generateModernIframeScriptCode(options: ExtendedOptions) { if (import.meta.hot) { import.meta.hot.accept('${virtualStoriesFile}', (newModule) => { // importFn has changed so we need to patch the new one in - preview.onStoriesChanged({ importFn: newModule.importFn }); + window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn }); }); import.meta.hot.accept(${JSON.stringify( @@ -41,7 +41,7 @@ export async function generateModernIframeScriptCode(options: ExtendedOptions) { const newGetProjectAnnotations = () => composeConfigs(newConfigEntries); // getProjectAnnotations has changed so we need to patch the new one in - preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations }); + window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations }); }); }`.trim(); }; @@ -64,13 +64,12 @@ export async function generateModernIframeScriptCode(options: ExtendedOptions) { return composeConfigs(configs); } - const preview = new PreviewWeb(); - window.__STORYBOOK_PREVIEW__ = preview; - window.__STORYBOOK_STORY_STORE__ = preview.storyStore; - window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore }); - - preview.initialize({ importFn, getProjectAnnotations }); + window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(); + + window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || window.__STORYBOOK_PREVIEW__.storyStore; + window.__STORYBOOK_CLIENT_API__ = window.__STORYBOOK_CLIENT_API__ || new ClientApi({ storyStore: window.__STORYBOOK_PREVIEW__.storyStore }); + window.__STORYBOOK_PREVIEW__.initialize({ importFn, getProjectAnnotations }); ${generateHMRHandler(frameworkName)}; `.trim(); diff --git a/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars b/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars index 62b3fe1d603c..2d8cab200832 100644 --- a/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars +++ b/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars @@ -9,34 +9,34 @@ import { importFn } from './{{storiesFilename}}'; const { SERVER_CHANNEL_URL } = global; const getProjectAnnotations = () => - composeConfigs([{{#each previewAnnotations}}require('{{this}}'),{{/each}}]); +composeConfigs([{{#each previewAnnotations}}require('{{this}}'),{{/each}}]); const channel = createPostMessageChannel({ page: 'preview' }); addons.setChannel(channel); if (SERVER_CHANNEL_URL) { - const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL, }); - addons.setServerChannel(serverChannel); - window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel; +const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL, }); +addons.setServerChannel(serverChannel); +window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel; } -const preview = new PreviewWeb(); +const preview = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(); window.__STORYBOOK_PREVIEW__ = preview; window.__STORYBOOK_STORY_STORE__ = preview.storyStore; window.__STORYBOOK_ADDONS_CHANNEL__ = channel; -window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore }); +window.__STORYBOOK_CLIENT_API__ = window.__STORYBOOK_CLIENT_API__ || new ClientApi({ storyStore: preview.storyStore }); preview.initialize({ importFn, getProjectAnnotations }); if (import.meta.webpackHot) { - import.meta.webpackHot.accept('./{{storiesFilename}}', () => { - // importFn has changed so we need to patch the new one in - preview.onStoriesChanged({ importFn }); - }); - - import.meta.webpackHot.accept([{{#each previewAnnotations}}'{{this}}',{{/each}}], () => { - // getProjectAnnotations has changed so we need to patch the new one in - preview.onGetProjectAnnotationsChanged({ getProjectAnnotations }); - }); +import.meta.webpackHot.accept('./{{storiesFilename}}', () => { +// importFn has changed so we need to patch the new one in +preview.onStoriesChanged({ importFn }); +}); + +import.meta.webpackHot.accept([{{#each previewAnnotations}}'{{this}}',{{/each}}], () => { +// getProjectAnnotations has changed so we need to patch the new one in +preview.onGetProjectAnnotationsChanged({ getProjectAnnotations }); +}); } \ No newline at end of file diff --git a/code/lib/preview-api/src/modules/client-api/ClientApi.ts b/code/lib/preview-api/src/modules/client-api/ClientApi.ts index f2d8eb358748..61d917bddbb4 100644 --- a/code/lib/preview-api/src/modules/client-api/ClientApi.ts +++ b/code/lib/preview-api/src/modules/client-api/ClientApi.ts @@ -1,4 +1,4 @@ -/// +/* eslint-disable no-underscore-dangle */ import { dedent } from 'ts-dedent'; import global from 'global'; @@ -29,10 +29,6 @@ import { combineParameters, composeStepRunners, normalizeInputTypes } from '../. import { StoryStoreFacade } from './StoryStoreFacade'; -// ClientApi (and StoreStore) are really singletons. However they are not created until the -// relevant framework instanciates them via `start.js`. The good news is this happens right away. -let singleton: ClientApi; - const warningAlternatives = { addDecorator: `Instead, use \`export const decorators = [];\` in your \`preview.js\`.`, addParameters: `Instead, use \`export const parameters = {};\` in your \`preview.js\`.`, @@ -55,61 +51,61 @@ const checkMethod = (method: keyof typeof warningAlternatives) => { ); } - if (!singleton) { + if (!global.__STORYBOOK_CLIENT_API__) { throw new Error(`Singleton client API not yet initialized, cannot call \`${method}\`.`); } }; export const addDecorator = (decorator: DecoratorFunction) => { checkMethod('addDecorator'); - singleton.addDecorator(decorator); + global.__STORYBOOK_CLIENT_API__?.addDecorator(decorator); }; export const addParameters = (parameters: Parameters) => { checkMethod('addParameters'); - singleton.addParameters(parameters); + global.__STORYBOOK_CLIENT_API__?.addParameters(parameters); }; export const addLoader = (loader: LoaderFunction) => { checkMethod('addLoader'); - singleton.addLoader(loader); + global.__STORYBOOK_CLIENT_API__?.addLoader(loader); }; export const addArgs = (args: Args) => { checkMethod('addArgs'); - singleton.addArgs(args); + global.__STORYBOOK_CLIENT_API__?.addArgs(args); }; export const addArgTypes = (argTypes: ArgTypes) => { checkMethod('addArgTypes'); - singleton.addArgTypes(argTypes); + global.__STORYBOOK_CLIENT_API__?.addArgTypes(argTypes); }; export const addArgsEnhancer = (enhancer: ArgsEnhancer) => { checkMethod('addArgsEnhancer'); - singleton.addArgsEnhancer(enhancer); + global.__STORYBOOK_CLIENT_API__?.addArgsEnhancer(enhancer); }; export const addArgTypesEnhancer = (enhancer: ArgTypesEnhancer) => { checkMethod('addArgTypesEnhancer'); - singleton.addArgTypesEnhancer(enhancer); + global.__STORYBOOK_CLIENT_API__?.addArgTypesEnhancer(enhancer); }; export const addStepRunner = (stepRunner: StepRunner) => { checkMethod('addStepRunner'); - singleton.addStepRunner(stepRunner); + global.__STORYBOOK_CLIENT_API__?.addStepRunner(stepRunner); }; export const getGlobalRender = () => { checkMethod('getGlobalRender'); - return singleton.facade.projectAnnotations.render; + return global.__STORYBOOK_CLIENT_API__?.facade.projectAnnotations.render; }; -export const setGlobalRender = ( - render: typeof singleton['facade']['projectAnnotations']['render'] -) => { +export const setGlobalRender = (render: StoryStoreFacade['projectAnnotations']['render']) => { checkMethod('setGlobalRender'); - singleton.facade.projectAnnotations.render = render; + if (global.__STORYBOOK_CLIENT_API__) { + global.__STORYBOOK_CLIENT_API__.facade.projectAnnotations.render = render; + } }; const invalidStoryTypes = new Set(['string', 'number', 'boolean', 'symbol']); @@ -127,13 +123,17 @@ export class ClientApi { private lastFileName = 0; constructor({ storyStore }: { storyStore?: StoryStore } = {}) { + console.log( + 'CLIENT_API_MODULE, you should only see this log, exactly ONCE, in the browser console' + ); + this.facade = new StoryStoreFacade(); this.addons = {}; this.storyStore = storyStore; - singleton = this as any; + global.__STORYBOOK_CLIENT_API__ = this; } importFn(path: Path) { @@ -213,7 +213,6 @@ export class ClientApi { _addedExports = {} as Record; _loadAddedExports() { - // eslint-disable-next-line no-underscore-dangle Object.entries(this._addedExports).forEach(([fileName, fileExports]) => this.facade.addStoriesFromExports(fileName, fileExports) ); @@ -247,7 +246,7 @@ export class ClientApi { let i = 1; // Deal with `storiesOf()` being called twice in the same file. // On HMR, we clear _addedExports[fileName] below. - // eslint-disable-next-line no-underscore-dangle + while (this._addedExports[fileName]) { i += 1; fileName = `${baseFilename}-${i}`; @@ -259,7 +258,7 @@ export class ClientApi { m.hot.accept(); m.hot.dispose(() => { this.facade.clearFilenameExports(fileName); - // eslint-disable-next-line no-underscore-dangle + delete this._addedExports[fileName]; // We need to update the importFn as soon as the module re-evaluates @@ -268,7 +267,6 @@ export class ClientApi { // debounce it somehow for initial startup. Instead, we'll take advantage of // the fact that the evaluation of the module happens immediately in the same tick setTimeout(() => { - // eslint-disable-next-line no-underscore-dangle this._loadAddedExports(); this.onImportFnChanged?.({ importFn: this.importFn.bind(this) }); }, 0); @@ -301,7 +299,7 @@ export class ClientApi { parameters: {}, }; // We map these back to a simple default export, even though we have type guarantees at this point - // eslint-disable-next-line no-underscore-dangle + this._addedExports[fileName] = { default: meta }; let counter = 0; @@ -320,10 +318,8 @@ export class ClientApi { const { decorators, loaders, component, args, argTypes, ...storyParameters } = parameters; - // eslint-disable-next-line no-underscore-dangle const storyId = parameters.__id || toId(kind, storyName); - // eslint-disable-next-line no-underscore-dangle const csfExports = this._addedExports[fileName]; // Whack a _ on the front incase it is "default" csfExports[`story${counter}`] = { diff --git a/code/lib/preview-api/src/modules/core-client/start.ts b/code/lib/preview-api/src/modules/core-client/start.ts index bdfb5698ae3f..0e7c0decc5f0 100644 --- a/code/lib/preview-api/src/modules/core-client/start.ts +++ b/code/lib/preview-api/src/modules/core-client/start.ts @@ -1,3 +1,4 @@ +/* eslint-disable no-underscore-dangle */ /* eslint-disable @typescript-eslint/naming-convention */ import global from 'global'; import type { Renderer, ArgsStoryFn, Path, ProjectAnnotations } from '@storybook/types'; @@ -60,8 +61,8 @@ export function start( const channel = createChannel({ page: 'preview' }); addons.setChannel(channel); - const clientApi = new ClientApi(); - const preview = new PreviewWeb(); + const clientApi = globalWindow?.__STORYBOOK_CLIENT_API__ || new ClientApi(); + const preview = globalWindow?.__STORYBOOK_PREVIEW__ || new PreviewWeb(); let initialized = false; const importFn = (path: Path) => clientApi.importFn(path); @@ -78,7 +79,6 @@ export function start( if (globalWindow) { globalWindow.__STORYBOOK_CLIENT_API__ = clientApi; globalWindow.__STORYBOOK_ADDONS_CHANNEL__ = channel; - // eslint-disable-next-line no-underscore-dangle globalWindow.__STORYBOOK_PREVIEW__ = preview; globalWindow.__STORYBOOK_STORY_STORE__ = preview.storyStore; } @@ -105,7 +105,6 @@ export function start( // function in case it throws. So we also need to process its output there also const getProjectAnnotations = () => { const { added, removed } = executeLoadableForChanges(loadable, m); - // eslint-disable-next-line no-underscore-dangle clientApi._loadAddedExports(); Array.from(added.entries()).forEach(([fileName, fileExports]) => diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.tsx index a1ed45f445c9..23d711760186 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.tsx +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.tsx @@ -1,3 +1,5 @@ +/* eslint-disable no-underscore-dangle */ +import global from 'global'; import type { Renderer } from '@storybook/types'; import { PreviewWithSelection } from './PreviewWithSelection'; @@ -7,5 +9,7 @@ import { WebView } from './WebView'; export class PreviewWeb extends PreviewWithSelection { constructor() { super(new UrlStore(), new WebView()); + + global.__STORYBOOK_PREVIEW__ = this; } } From a7c357a80b91b0c96abeee4d68de81989343819b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 12 Dec 2022 17:46:21 +0100 Subject: [PATCH 20/26] reset the global every time, to get a new version --- .../src/modules/client-api/ClientApi.ts | 4 ---- .../src/modules/core-client/start.test.ts | 6 +++++- .../src/modules/core-client/start.ts | 20 +++++++++---------- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/code/lib/preview-api/src/modules/client-api/ClientApi.ts b/code/lib/preview-api/src/modules/client-api/ClientApi.ts index 61d917bddbb4..d6e563bd9b2b 100644 --- a/code/lib/preview-api/src/modules/client-api/ClientApi.ts +++ b/code/lib/preview-api/src/modules/client-api/ClientApi.ts @@ -123,10 +123,6 @@ export class ClientApi { private lastFileName = 0; constructor({ storyStore }: { storyStore?: StoryStore } = {}) { - console.log( - 'CLIENT_API_MODULE, you should only see this log, exactly ONCE, in the browser console' - ); - this.facade = new StoryStoreFacade(); this.addons = {}; diff --git a/code/lib/preview-api/src/modules/core-client/start.test.ts b/code/lib/preview-api/src/modules/core-client/start.test.ts index 96158c8e92a4..e13838cd816c 100644 --- a/code/lib/preview-api/src/modules/core-client/start.test.ts +++ b/code/lib/preview-api/src/modules/core-client/start.test.ts @@ -1,3 +1,4 @@ +/* eslint-disable no-underscore-dangle */ /** * @jest-environment jsdom */ @@ -106,6 +107,9 @@ function makeRequireContext(importMap: Record) { describe('start', () => { beforeEach(() => { global.DOCS_OPTIONS = { enabled: false }; + global.__STORYBOOK_CLIENT_API__ = undefined; + global.__STORYBOOK_PREVIEW__ = undefined; + global.IS_STORYBOOK = undefined; }); describe('when configure is called with storiesOf only', () => { it('loads and renders the first story correctly', async () => { @@ -325,7 +329,7 @@ describe('start', () => { 'story-root' ); - expect((window as any).IS_STORYBOOK).toBe(true); + expect(global.IS_STORYBOOK).toBe(true); }); it('supports forceRerender()', async () => { diff --git a/code/lib/preview-api/src/modules/core-client/start.ts b/code/lib/preview-api/src/modules/core-client/start.ts index 0e7c0decc5f0..889032584e3d 100644 --- a/code/lib/preview-api/src/modules/core-client/start.ts +++ b/code/lib/preview-api/src/modules/core-client/start.ts @@ -11,7 +11,7 @@ import { ClientApi } from '../../client-api'; import { executeLoadableForChanges } from './executeLoadable'; import type { Loadable } from './executeLoadable'; -const { window: globalWindow, FEATURES } = global; +const { FEATURES } = global; const removedApi = (name: string) => () => { throw new Error(`@storybook/client-api:${name} was removed in storyStoreV7.`); @@ -42,9 +42,9 @@ export function start( renderToCanvas: ProjectAnnotations['renderToCanvas'], { decorateStory, render }: CoreClient_RendererImplementation = {} ): CoreClient_StartReturnValue { - if (globalWindow) { + if (global) { // To enable user code to detect if it is running in Storybook - globalWindow.IS_STORYBOOK = true; + global.IS_STORYBOOK = true; } if (FEATURES?.storyStoreV7) { @@ -61,8 +61,8 @@ export function start( const channel = createChannel({ page: 'preview' }); addons.setChannel(channel); - const clientApi = globalWindow?.__STORYBOOK_CLIENT_API__ || new ClientApi(); - const preview = globalWindow?.__STORYBOOK_PREVIEW__ || new PreviewWeb(); + const clientApi = global?.__STORYBOOK_CLIENT_API__ || new ClientApi(); + const preview = global?.__STORYBOOK_PREVIEW__ || new PreviewWeb(); let initialized = false; const importFn = (path: Path) => clientApi.importFn(path); @@ -76,11 +76,11 @@ export function start( clientApi.onImportFnChanged = onStoriesChanged; clientApi.storyStore = preview.storyStore; - if (globalWindow) { - globalWindow.__STORYBOOK_CLIENT_API__ = clientApi; - globalWindow.__STORYBOOK_ADDONS_CHANNEL__ = channel; - globalWindow.__STORYBOOK_PREVIEW__ = preview; - globalWindow.__STORYBOOK_STORY_STORE__ = preview.storyStore; + if (global) { + global.__STORYBOOK_CLIENT_API__ = clientApi; + global.__STORYBOOK_ADDONS_CHANNEL__ = channel; + global.__STORYBOOK_PREVIEW__ = preview; + global.__STORYBOOK_STORY_STORE__ = preview.storyStore; } return { From b0977b89c17669541da089ac822a6929968039ad Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 13 Dec 2022 08:57:05 +0100 Subject: [PATCH 21/26] remove the window as global definition --- .../inject-decorator.ts.ugly-comments-stories.txt | 1 - .../inject-decorator.ugly-comments-stories.txt | 1 - code/addons/docs/angular/index.js | 4 ++-- code/addons/docs/ember/index.js | 4 ++-- code/frameworks/angular/src/client/docs/compodoc.ts | 10 ++++------ code/frameworks/angular/src/typings.d.ts | 1 + code/frameworks/ember/src/client/docs/jsondoc.js | 6 +++--- .../ember/src/client/preview/docs/jsondoc.js | 6 +++--- .../preview-api/src/modules/core-client/start.test.ts | 1 - code/renderers/html/src/docs/sourceDecorator.ts | 2 +- .../web-components/src/docs/sourceDecorator.ts | 1 - 11 files changed, 16 insertions(+), 21 deletions(-) diff --git a/code/__mocks__/inject-decorator.ts.ugly-comments-stories.txt b/code/__mocks__/inject-decorator.ts.ugly-comments-stories.txt index ea3a9450889d..b1f6925fba78 100644 --- a/code/__mocks__/inject-decorator.ts.ugly-comments-stories.txt +++ b/code/__mocks__/inject-decorator.ts.ugly-comments-stories.txt @@ -1,4 +1,3 @@ -/* global window */ /* eslint-disable global-require, import/no-dynamic-require */ import React from 'react'; diff --git a/code/__mocks__/inject-decorator.ugly-comments-stories.txt b/code/__mocks__/inject-decorator.ugly-comments-stories.txt index 926e8cd5e97a..93f2875cc1c2 100644 --- a/code/__mocks__/inject-decorator.ugly-comments-stories.txt +++ b/code/__mocks__/inject-decorator.ugly-comments-stories.txt @@ -1,4 +1,3 @@ -/* global window */ /* eslint-disable global-require, import/no-dynamic-require */ import React from 'react'; diff --git a/code/addons/docs/angular/index.js b/code/addons/docs/angular/index.js index 0236c45fec3a..120597b47b00 100644 --- a/code/addons/docs/angular/index.js +++ b/code/addons/docs/angular/index.js @@ -1,7 +1,7 @@ /* eslint-disable no-underscore-dangle */ -/* global window */ +import { global } from '@storybook/global'; export const setCompodocJson = (compodocJson) => { // @ts-expect-error (Converted from ts-ignore) - window.__STORYBOOK_COMPODOC_JSON__ = compodocJson; + global.__STORYBOOK_COMPODOC_JSON__ = compodocJson; }; diff --git a/code/addons/docs/ember/index.js b/code/addons/docs/ember/index.js index b4ff874067cd..eab68763ab45 100644 --- a/code/addons/docs/ember/index.js +++ b/code/addons/docs/ember/index.js @@ -1,6 +1,6 @@ /* eslint-disable no-underscore-dangle */ -/* global window */ +import { global } from '@storybook/global'; export const setJSONDoc = (jsondoc) => { - window.__EMBER_GENERATED_DOC_JSON__ = jsondoc; + global.__EMBER_GENERATED_DOC_JSON__ = jsondoc; }; diff --git a/code/frameworks/angular/src/client/docs/compodoc.ts b/code/frameworks/angular/src/client/docs/compodoc.ts index 481367ddb704..9785842648d0 100644 --- a/code/frameworks/angular/src/client/docs/compodoc.ts +++ b/code/frameworks/angular/src/client/docs/compodoc.ts @@ -1,5 +1,5 @@ /* eslint-disable no-underscore-dangle */ -/* global window */ +import { global } from '@storybook/global'; import { InputType, ArgTypes, SBType } from '@storybook/types'; import { logger } from '@storybook/client-logger'; @@ -21,12 +21,10 @@ export const isMethod = (methodOrProp: Method | Property): methodOrProp is Metho }; export const setCompodocJson = (compodocJson: CompodocJson) => { - // @ts-expect-error (Converted from ts-ignore) - window.__STORYBOOK_COMPODOC_JSON__ = compodocJson; + global.__STORYBOOK_COMPODOC_JSON__ = compodocJson; }; -// @ts-expect-error (Converted from ts-ignore) -export const getCompodocJson = (): CompodocJson => window.__STORYBOOK_COMPODOC_JSON__; +export const getCompodocJson = (): CompodocJson => global.__STORYBOOK_COMPODOC_JSON__; export const checkValidComponentOrDirective = (component: Component | Directive) => { if (!component.name) { @@ -193,7 +191,7 @@ const extractDefaultValueFromComments = (property: Property, value: any) => { let commentValue = value; property.jsdoctags.forEach((tag: JsDocTag) => { if (['default', 'defaultvalue'].includes(tag.tagName.escapedText)) { - const dom = new window.DOMParser().parseFromString(tag.comment, 'text/html'); + const dom = new global.DOMParser().parseFromString(tag.comment, 'text/html'); commentValue = dom.body.textContent; } }); diff --git a/code/frameworks/angular/src/typings.d.ts b/code/frameworks/angular/src/typings.d.ts index 17eb26fa87d4..9af3b65be338 100644 --- a/code/frameworks/angular/src/typings.d.ts +++ b/code/frameworks/angular/src/typings.d.ts @@ -5,6 +5,7 @@ declare var NODE_ENV: string | undefined; declare var __STORYBOOK_ADDONS_CHANNEL__: any; declare var __STORYBOOK_ADDONS_PREVIEW: any; +declare var __STORYBOOK_COMPODOC_JSON__: any; declare var __STORYBOOK_CLIENT_API__: any; declare var __STORYBOOK_PREVIEW__: any; declare var __STORYBOOK_STORY_STORE__: any; diff --git a/code/frameworks/ember/src/client/docs/jsondoc.js b/code/frameworks/ember/src/client/docs/jsondoc.js index f9e648ebc21b..9e7269af8d45 100644 --- a/code/frameworks/ember/src/client/docs/jsondoc.js +++ b/code/frameworks/ember/src/client/docs/jsondoc.js @@ -1,11 +1,11 @@ /* eslint-disable no-underscore-dangle */ -/* global window */ +import { global } from '@storybook/global'; export const setJSONDoc = (jsondoc) => { - window.__EMBER_GENERATED_DOC_JSON__ = jsondoc; + global.__EMBER_GENERATED_DOC_JSON__ = jsondoc; }; export const getJSONDoc = () => { - return window.__EMBER_GENERATED_DOC_JSON__; + return global.__EMBER_GENERATED_DOC_JSON__; }; export const extractArgTypes = (componentName) => { diff --git a/code/frameworks/ember/src/client/preview/docs/jsondoc.js b/code/frameworks/ember/src/client/preview/docs/jsondoc.js index f9e648ebc21b..9e7269af8d45 100644 --- a/code/frameworks/ember/src/client/preview/docs/jsondoc.js +++ b/code/frameworks/ember/src/client/preview/docs/jsondoc.js @@ -1,11 +1,11 @@ /* eslint-disable no-underscore-dangle */ -/* global window */ +import { global } from '@storybook/global'; export const setJSONDoc = (jsondoc) => { - window.__EMBER_GENERATED_DOC_JSON__ = jsondoc; + global.__EMBER_GENERATED_DOC_JSON__ = jsondoc; }; export const getJSONDoc = () => { - return window.__EMBER_GENERATED_DOC_JSON__; + return global.__EMBER_GENERATED_DOC_JSON__; }; export const extractArgTypes = (componentName) => { diff --git a/code/lib/preview-api/src/modules/core-client/start.test.ts b/code/lib/preview-api/src/modules/core-client/start.test.ts index 3b5b1716c5be..5183f13c0775 100644 --- a/code/lib/preview-api/src/modules/core-client/start.test.ts +++ b/code/lib/preview-api/src/modules/core-client/start.test.ts @@ -3,7 +3,6 @@ * @jest-environment jsdom */ -/* global window */ // import { describe, it, beforeAll, beforeEach, afterAll, afterEach, jest } from '@jest/globals'; import { STORY_RENDERED, STORY_UNCHANGED, SET_INDEX } from '@storybook/core-events'; diff --git a/code/renderers/html/src/docs/sourceDecorator.ts b/code/renderers/html/src/docs/sourceDecorator.ts index 46d5e0642e3a..459ea267ce9f 100644 --- a/code/renderers/html/src/docs/sourceDecorator.ts +++ b/code/renderers/html/src/docs/sourceDecorator.ts @@ -1,5 +1,5 @@ /* eslint-disable no-underscore-dangle */ -/* global window */ + import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools'; import { addons, useEffect } from '@storybook/preview-api'; import type { PartialStoryFn } from '@storybook/types'; diff --git a/code/renderers/web-components/src/docs/sourceDecorator.ts b/code/renderers/web-components/src/docs/sourceDecorator.ts index adc1981f6235..ad9da01a9f8a 100644 --- a/code/renderers/web-components/src/docs/sourceDecorator.ts +++ b/code/renderers/web-components/src/docs/sourceDecorator.ts @@ -1,5 +1,4 @@ /* eslint-disable no-underscore-dangle */ -/* global window */ import { render } from 'lit-html'; import type { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/types'; import { addons, useEffect } from '@storybook/preview-api'; From 19f3ceb509ec0670adf6eae6e32892f3accbc1d3 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 13 Dec 2022 10:21:58 +0100 Subject: [PATCH 22/26] fix --- .../__snapshots__/inject-decorator.test.js.snap | 2 -- 1 file changed, 2 deletions(-) diff --git a/code/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap b/code/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap index fe9a7c7180fb..f1d57185b39b 100644 --- a/code/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap +++ b/code/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap @@ -827,7 +827,6 @@ storiesOf('Addons|Info.GitHub issues', module).addParameters({ storySource: { so exports[`inject-decorator stories with ugly comments in ts should delete ugly comments from the generated story source 1`] = ` " - import React from 'react'; @Component({ @@ -865,7 +864,6 @@ storiesOf('Foo', module) exports[`inject-decorator stories with ugly comments should delete ugly comments from the generated story source 1`] = ` " - import React from 'react'; From 4f3b666012dd5f0d998f5e4aff971c811811fe37 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 13 Dec 2022 10:25:35 +0100 Subject: [PATCH 23/26] cleanup --- code/lib/preview-api/src/modules/client-api/ClientApi.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/code/lib/preview-api/src/modules/client-api/ClientApi.ts b/code/lib/preview-api/src/modules/client-api/ClientApi.ts index ae3fbc93ab24..0ccbd31c677b 100644 --- a/code/lib/preview-api/src/modules/client-api/ClientApi.ts +++ b/code/lib/preview-api/src/modules/client-api/ClientApi.ts @@ -123,10 +123,6 @@ export class ClientApi { private lastFileName = 0; constructor({ storyStore }: { storyStore?: StoryStore } = {}) { - console.log( - 'CLIENT_API_MODULE, you should only see this log, exactly ONCE, in the browser console' - ); - this.facade = new StoryStoreFacade(); this.addons = {}; From a088aa48deb9b3f24f09aa395395e6ab1050b0ea Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 13 Dec 2022 19:13:17 +0100 Subject: [PATCH 24/26] use feature detection --- code/lib/channel-postmessage/src/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/lib/channel-postmessage/src/index.ts b/code/lib/channel-postmessage/src/index.ts index 34596a8d4adf..14caf77e13f8 100644 --- a/code/lib/channel-postmessage/src/index.ts +++ b/code/lib/channel-postmessage/src/index.ts @@ -36,7 +36,8 @@ export class PostmsgTransport { constructor(private readonly config: Config) { this.buffer = []; this.handler = null; - if (global) { + + if (typeof global?.addEventListener === 'function') { global.addEventListener('message', this.handleEvent.bind(this), false); } From fc357d7df69c8419723b0baef0185fea49e4036d Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 20 Dec 2022 13:16:10 +0100 Subject: [PATCH 25/26] Restore code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars --- .../virtualModuleModernEntry.js.handlebars | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars b/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars index 1e9a847ce3e9..62b3fe1d603c 100644 --- a/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars +++ b/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars @@ -1,4 +1,4 @@ -import { global } from '@storybook/global'; +import global from 'global'; import { ClientApi, PreviewWeb, addons, composeConfigs } from '@storybook/preview-api'; import { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage'; @@ -9,34 +9,34 @@ import { importFn } from './{{storiesFilename}}'; const { SERVER_CHANNEL_URL } = global; const getProjectAnnotations = () => -composeConfigs([{{#each previewAnnotations}}require('{{this}}'),{{/each}}]); + composeConfigs([{{#each previewAnnotations}}require('{{this}}'),{{/each}}]); const channel = createPostMessageChannel({ page: 'preview' }); addons.setChannel(channel); if (SERVER_CHANNEL_URL) { -const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL, }); -addons.setServerChannel(serverChannel); -window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel; + const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL, }); + addons.setServerChannel(serverChannel); + window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel; } -const preview = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(); +const preview = new PreviewWeb(); window.__STORYBOOK_PREVIEW__ = preview; window.__STORYBOOK_STORY_STORE__ = preview.storyStore; window.__STORYBOOK_ADDONS_CHANNEL__ = channel; -window.__STORYBOOK_CLIENT_API__ = window.__STORYBOOK_CLIENT_API__ || new ClientApi({ storyStore: preview.storyStore }); +window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore }); preview.initialize({ importFn, getProjectAnnotations }); if (import.meta.webpackHot) { -import.meta.webpackHot.accept('./{{storiesFilename}}', () => { -// importFn has changed so we need to patch the new one in -preview.onStoriesChanged({ importFn }); -}); - -import.meta.webpackHot.accept([{{#each previewAnnotations}}'{{this}}',{{/each}}], () => { -// getProjectAnnotations has changed so we need to patch the new one in -preview.onGetProjectAnnotationsChanged({ getProjectAnnotations }); -}); + import.meta.webpackHot.accept('./{{storiesFilename}}', () => { + // importFn has changed so we need to patch the new one in + preview.onStoriesChanged({ importFn }); + }); + + import.meta.webpackHot.accept([{{#each previewAnnotations}}'{{this}}',{{/each}}], () => { + // getProjectAnnotations has changed so we need to patch the new one in + preview.onGetProjectAnnotationsChanged({ getProjectAnnotations }); + }); } \ No newline at end of file From bb2e680cd7731ac74836b05559cf3200fa51530c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 20 Dec 2022 13:17:15 +0100 Subject: [PATCH 26/26] change to use @storybook/global in modern entry --- .../templates/virtualModuleModernEntry.js.handlebars | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars b/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars index 62b3fe1d603c..3f77a83eeca0 100644 --- a/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars +++ b/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars @@ -1,4 +1,4 @@ -import global from 'global'; +import { global } from '@storybook/global'; import { ClientApi, PreviewWeb, addons, composeConfigs } from '@storybook/preview-api'; import { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';