Merge pull request #20184 from storybookjs/norbert/sb-1063-vite-in-de…

…v-mode-with-storystorev6

Tech: improve global types

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';

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';

code/addons/a11y/package.json

@@ -67,12 +67,12 @@
     "@storybook/client-logger": "7.0.0-beta.12",
     "@storybook/components": "7.0.0-beta.12",
     "@storybook/core-events": "7.0.0-beta.12",
+    "@storybook/global": "^5.0.0",
     "@storybook/manager-api": "7.0.0-beta.12",
     "@storybook/preview-api": "7.0.0-beta.12",
     "@storybook/theming": "7.0.0-beta.12",
     "@storybook/types": "7.0.0-beta.12",
     "axe-core": "^4.2.0",
-    "global": "^4.4.0",
     "lodash": "^4.17.21",
     "react-resize-detector": "^7.1.2"
   },

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';
@@ -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);

code/addons/a11y/src/typings.d.ts

@@ -1 +1,2 @@
-declare module 'global';
+/* eslint-disable @typescript-eslint/naming-convention */
+declare var __STORYBOOK_STORY_STORE__: any;

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,

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,

code/addons/actions/package.json

@@ -79,12 +79,12 @@
     "@storybook/client-logger": "7.0.0-beta.12",
     "@storybook/components": "7.0.0-beta.12",
     "@storybook/core-events": "7.0.0-beta.12",
+    "@storybook/global": "^5.0.0",
     "@storybook/manager-api": "7.0.0-beta.12",
     "@storybook/preview-api": "7.0.0-beta.12",
     "@storybook/theming": "7.0.0-beta.12",
     "@storybook/types": "7.0.0-beta.12",
     "dequal": "^2.0.2",
-    "global": "^4.4.0",
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
     "prop-types": "^15.7.2",

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';
 

code/addons/actions/src/typings.d.ts

@@ -1,3 +1,2 @@
 // TODO: following packages need definition files or a TS migration
-declare module 'global';
 declare module 'uuid-browser/v4';

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,

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';
 

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';
 

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 {

code/addons/backgrounds/package.json

@@ -78,11 +78,11 @@
     "@storybook/client-logger": "7.0.0-beta.12",
     "@storybook/components": "7.0.0-beta.12",
     "@storybook/core-events": "7.0.0-beta.12",
+    "@storybook/global": "^5.0.0",
     "@storybook/manager-api": "7.0.0-beta.12",
     "@storybook/preview-api": "7.0.0-beta.12",
     "@storybook/theming": "7.0.0-beta.12",
     "@storybook/types": "7.0.0-beta.12",
-    "global": "^4.4.0",
     "memoizerific": "^1.11.3",
     "ts-dedent": "^2.0.0"
   },

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';

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,

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' },

code/addons/controls/package.json

@@ -73,7 +73,7 @@
     "@storybook/core-common": "7.0.0-beta.12",
     "@storybook/manager-api": "7.0.0-beta.12",
     "@storybook/node-logger": "7.0.0-beta.12",
-    "@storybook/preview-api": "7.0.0-beta.12",
+    "@storybook/preview-api": "7.0.0-beta.8",
     "@storybook/theming": "7.0.0-beta.12",
     "@storybook/types": "7.0.0-beta.12",
     "lodash": "^4.17.21",

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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;
 };

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;
 };

code/addons/docs/package.json

@@ -108,14 +108,14 @@
     "@storybook/components": "7.0.0-beta.12",
     "@storybook/csf-plugin": "7.0.0-beta.12",
     "@storybook/csf-tools": "7.0.0-beta.12",
+    "@storybook/global": "^5.0.0",
     "@storybook/mdx2-csf": "next",
     "@storybook/node-logger": "7.0.0-beta.12",
     "@storybook/postinstall": "7.0.0-beta.12",
     "@storybook/preview-api": "7.0.0-beta.12",
     "@storybook/theming": "7.0.0-beta.12",
     "@storybook/types": "7.0.0-beta.12",
     "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"

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';

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,

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';
 

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,

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,

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,

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,

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,

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

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,

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';
 
 <Meta component={globalThis.Components.Button} />
 

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';
 
 <Meta component={globalThis.Components.Button} />

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';
 
 <Meta component={globalThis.Components.Button} />
 

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';
 
 <Meta component={globalThis.Components.Button} play={() => console.log('component play')} />
 

code/addons/highlight/package.json

@@ -61,8 +61,8 @@
   },
   "dependencies": {
     "@storybook/core-events": "7.0.0-beta.12",
-    "@storybook/preview-api": "7.0.0-beta.12",
-    "global": "^4.4.0"
+    "@storybook/global": "^5.0.0",
+    "@storybook/preview-api": "7.0.0-beta.12"
   },
   "devDependencies": {
     "@types/webpack-env": "^1.16.0",

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';

code/addons/interactions/package.json

@@ -75,12 +75,12 @@
     "@storybook/components": "7.0.0-beta.12",
     "@storybook/core-common": "7.0.0-beta.12",
     "@storybook/core-events": "7.0.0-beta.12",
+    "@storybook/global": "^5.0.0",
     "@storybook/instrumenter": "7.0.0-beta.12",
     "@storybook/manager-api": "7.0.0-beta.12",
     "@storybook/preview-api": "7.0.0-beta.12",
     "@storybook/theming": "7.0.0-beta.12",
     "@storybook/types": "7.0.0-beta.12",
-    "global": "^4.4.0",
     "jest-mock": "^27.0.6",
     "polished": "^4.2.2",
     "ts-dedent": "^2.2.0"

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 {
@@ -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);
     }

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,

code/addons/jest/package.json

@@ -72,10 +72,10 @@
     "@storybook/client-logger": "7.0.0-beta.12",
     "@storybook/components": "7.0.0-beta.12",
     "@storybook/core-events": "7.0.0-beta.12",
+    "@storybook/global": "^5.0.0",
     "@storybook/manager-api": "7.0.0-beta.12",
     "@storybook/preview-api": "7.0.0-beta.12",
     "@storybook/theming": "7.0.0-beta.12",
-    "global": "^4.4.0",
     "react-resize-detector": "^7.1.2",
     "upath": "^1.2.0"
   },