Vite: Add builder-vite, react-vite, and vue3-vite

.circleci/config.yml

@@ -270,7 +270,7 @@ jobs:
   #   executor:
   #     class: large
   #     name: sb_cypress_8_node_14
-  #   parallelism: 2
+  #   parallelism: 8
   #   steps:
   #     - git-shallow-clone/checkout_advanced:
   #         clone_options: '--depth 1 --verbose'
@@ -470,7 +470,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 2
+    parallelism: 6
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -490,7 +490,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 2
+    parallelism: 6
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -506,7 +506,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 2
+    parallelism: 6
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -526,7 +526,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 2
+    parallelism: 6
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -542,7 +542,7 @@ jobs:
     executor:
       class: medium+
       name: sb_node_14_browsers
-    parallelism: 2
+    parallelism: 6
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
@@ -558,7 +558,7 @@ jobs:
     executor:
       class: medium+
       name: sb_playwright
-    parallelism: 2
+    parallelism: 6
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

.github/workflows/generate-repros-next.yml

@@ -7,14 +7,17 @@ on:
   # To remove when the branch will be merged
   push:
     branches:
-      - shilman/add-angular-repro-template
+      - vite-frameworks-xyz
 
 jobs:
   generate:
     runs-on: ubuntu-latest
     env:
       YARN_ENABLE_IMMUTABLE_INSTALLS: false
     steps:
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 14
       - uses: actions/checkout@v2
       - name: Setup git user
         run: |

code/.eslintrc.js

@@ -101,5 +101,11 @@ module.exports = {
         'jest/no-test-callback': 'off', // These aren't jest tests
       },
     },
+    {
+      files: ['**/builder-vite/input/iframe.html'],
+      rules: {
+        'no-undef': 'off', // ignore "window" undef errors
+      },
+    },
   ],
 };

code/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

code/addons/a11y/package.json

@@ -31,12 +31,12 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./manager": {
+    "./manager.js": {
       "require": "./dist/manager.js",
       "import": "./dist/manager.mjs",
       "types": "./dist/manager.d.ts"
     },
-    "./preview": {
+    "./preview.js": {
       "require": "./dist/preview.js",
       "import": "./dist/preview.mjs",
       "types": "./dist/preview.d.ts"

code/addons/backgrounds/package.json

@@ -31,12 +31,12 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./manager": {
+    "./manager.js": {
       "require": "./dist/manager.js",
       "import": "./dist/manager.mjs",
       "types": "./dist/manager.d.ts"
     },
-    "./preview": {
+    "./preview.js": {
       "require": "./dist/preview.js",
       "import": "./dist/preview.mjs",
       "types": "./dist/preview.d.ts"

code/addons/controls/package.json

@@ -31,7 +31,7 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./manager": {
+    "./manager.js": {
       "require": "./dist/manager.js",
       "import": "./dist/manager.mjs",
       "types": "./dist/manager.d.ts"

code/addons/jest/package.json

@@ -33,7 +33,7 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./manager": {
+    "./manager.js": {
       "require": "./dist/manager.js",
       "import": "./dist/manager.mjs",
       "types": "./dist/manager.d.ts"

code/addons/links/package.json

@@ -27,12 +27,12 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./manager": {
+    "./manager.js": {
       "require": "./dist/manager.js",
       "import": "./dist/manager.mjs",
       "types": "./dist/manager.d.ts"
     },
-    "./preview": {
+    "./preview.js": {
       "require": "./dist/preview.js",
       "import": "./dist/preview.mjs",
       "types": "./dist/preview.d.ts"

code/addons/measure/package.json

@@ -30,12 +30,12 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./manager": {
+    "./manager.js": {
       "require": "./dist/manager.js",
       "import": "./dist/manager.mjs",
       "types": "./dist/manager.d.ts"
     },
-    "./preview": {
+    "./preview.js": {
       "require": "./dist/preview.js",
       "import": "./dist/preview.mjs",
       "types": "./dist/preview.d.ts"

code/addons/outline/package.json

@@ -33,12 +33,12 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./manager": {
+    "./manager.js": {
       "require": "./dist/manager.js",
       "import": "./dist/manager.mjs",
       "types": "./dist/manager.d.ts"
     },
-    "./preview": {
+    "./preview.js": {
       "require": "./dist/preset/preview.js",
       "import": "./dist/preset/preview.mjs",
       "types": "./dist/preview.d.ts"

code/addons/toolbars/package.json

@@ -31,7 +31,7 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./manager": {
+    "./manager.js": {
       "require": "./dist/manager.js",
       "import": "./dist/manager.mjs",
       "types": "./dist/manager.d.ts"

code/e2e-tests/addon-actions.spec.ts

@@ -7,6 +7,7 @@ const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 test.describe('addon-actions', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
+    await new SbPage(page).waitUntilLoaded();
   });
 
   test('should trigger an action', async ({ page }) => {

code/e2e-tests/addon-backgrounds.spec.ts

@@ -7,6 +7,7 @@ const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 test.describe('addon-backgrounds', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
+    await new SbPage(page).waitUntilLoaded();
   });
 
   test('should have a dark background', async ({ page }) => {

code/e2e-tests/addon-controls.spec.ts

@@ -8,6 +8,7 @@ test.describe('addon-controls', () => {
   test('should change component when changing controls', async ({ page }) => {
     await page.goto(storybookUrl);
     const sbPage = new SbPage(page);
+    await sbPage.waitUntilLoaded();
 
     await sbPage.navigateToStory('example-button', 'primary');
     await sbPage.viewAddonPanel('Controls');
@@ -62,6 +63,7 @@ test.describe('addon-controls', () => {
     await page.goto(`${storybookUrl}?path=/story/example-button--primary&args=label:Hello+world`);
 
     const sbPage = new SbPage(page);
+    await sbPage.waitUntilLoaded();
     await expect(sbPage.previewRoot().locator('button')).toContainText('Hello world');
 
     await sbPage.viewAddonPanel('Controls');

code/e2e-tests/addon-docs.spec.ts

@@ -10,6 +10,7 @@ const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
 test.describe('addon-docs', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
+    await new SbPage(page).waitUntilLoaded();
   });
 
   test('should provide source snippet', async ({ page }) => {

code/e2e-tests/addon-interactions.spec.ts

@@ -7,6 +7,7 @@ const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 test.describe('addon-interactions', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
+    await new SbPage(page).waitUntilLoaded();
   });
 
   // FIXME: skip xxx

code/e2e-tests/addon-viewport.spec.ts

@@ -7,6 +7,7 @@ const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 test.describe('addon-viewport', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
+    await new SbPage(page).waitUntilLoaded();
   });
 
   test('should have viewport button in the toolbar', async ({ page }) => {

code/e2e-tests/util.ts

@@ -32,6 +32,14 @@ export class SbPage {
     await expect(selected).toBe('true');
   }
 
+  async waitUntilLoaded() {
+    const root = this.previewRoot();
+    const docsLoadingPage = root.locator('.sb-preparing-docs');
+    const storyLoadingPage = root.locator('.sb-preparing-story');
+    await docsLoadingPage.waitFor({ state: 'hidden' });
+    await storyLoadingPage.waitFor({ state: 'hidden' });
+  }
+
   previewIframe() {
     return this.page.frameLocator('#storybook-preview-iframe');
   }

code/frameworks/react-vite/README.md

@@ -0,0 +1 @@
+# Storybook for React

code/frameworks/react-vite/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@storybook/react-vite",
+  "version": "7.0.0-alpha.24",
+  "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/react-vite",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "frameworks/react-vite"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./package.json": {
+      "require": "./package.json",
+      "import": "./package.json",
+      "types": "./package.json"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "types/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "tsc --noEmit",
+    "prepare": "../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@joshwooding/vite-plugin-react-docgen-typescript": "0.0.4",
+    "@rollup/pluginutils": "^4.2.0",
+    "@storybook/builder-vite": "7.0.0-alpha.24",
+    "@storybook/core-server": "7.0.0-alpha.24",
+    "@storybook/react": "7.0.0-alpha.24",
+    "@types/node": "^14.14.20 || ^16.0.0",
+    "@vitejs/plugin-react": "^1.0.8",
+    "ast-types": "^0.14.2",
+    "core-js": "^3.8.2",
+    "magic-string": "^0.26.1",
+    "react-docgen": "6.0.0-alpha.1",
+    "regenerator-runtime": "^0.13.7"
+  },
+  "devDependencies": {
+    "jest-specific-snapshot": "^4.0.0",
+    "typescript": "~4.6.3"
+  },
+  "peerDependencies": {
+    "@babel/core": "^7.11.5",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@babel/core": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=10.13.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "55247a8e36da7061bfced80c588a539d3fda3f04"
+}

code/frameworks/react-vite/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

code/frameworks/react-vite/src/index.ts

@@ -0,0 +1,2 @@
+export * from '@storybook/react';
+export type { StorybookConfig } from '@storybook/builder-vite';