Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vite: Add builder, react, vue3 frameworks #18982

Closed
wants to merge 60 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
60 commits
Select commit Hold shift + click to select a range
b3c1f81
Move builder-vite files into monorepo
IanVS Aug 13, 2022
f80ef5f
Add storybook dependencies
IanVS Aug 13, 2022
bc4828a
Update package.json
IanVS Aug 13, 2022
ecfc444
Fix (most) linting errors
IanVS Aug 13, 2022
fe4c852
Add builder-vite to nx and workspace
IanVS Aug 13, 2022
01e3663
Vite core, react, and example app (WIP)
shilman Aug 14, 2022
aef0330
Use monorepo version of builder-vite in example
IanVS Aug 15, 2022
1f3c1f8
Move input files out of src
IanVS Aug 15, 2022
67456fd
Fix linting / typescript errors
IanVS Aug 15, 2022
aaedc2a
Remove plugins that moved to react-vite
IanVS Aug 15, 2022
b6908f7
Remove @vitejs/plugin-react, it's added in every framework
IanVS Aug 15, 2022
099771b
[hack] remove exports from package.json
IanVS Aug 15, 2022
c4f456d
Disable source loader plugin
IanVS Aug 15, 2022
49a3f87
Disable docs
IanVS Aug 15, 2022
da507a2
Merge branch 'next' into vite-frameworks
shilman Aug 15, 2022
2a9f89a
Fix react-vite builder dependency
shilman Aug 15, 2022
441a5c1
Add vite packages to CLI versions
shilman Aug 15, 2022
fd0de66
Merge branch 'next' into vite-frameworks
shilman Aug 17, 2022
7389a38
Add react-vite repros
shilman Aug 17, 2022
60819ff
Fix exports map for ESM
shilman Aug 17, 2022
1859ad6
CLI: Fix vite preview-head hack for SB7
shilman Aug 17, 2022
5e7299d
Fix react-vite preset
shilman Aug 17, 2022
47e39a2
Force repro generator to use yarn
shilman Aug 17, 2022
3a991b4
Add vue3-vite framework and repro template
shilman Aug 17, 2022
ef5917b
Clean up legacy typescript annotations
shilman Aug 18, 2022
ca839d0
clean up unused bin files
shilman Aug 18, 2022
a3cec55
Remove vue-specific code from vite builder
shilman Aug 18, 2022
1eb6339
Vue3-vite: Fix bad config merge
shilman Aug 22, 2022
a3b53da
CLI: Fix local repro publishing
shilman Aug 22, 2022
00465ba
Remove unnecessary file
shilman Aug 22, 2022
8a0029d
Merge branch 'next' into vite-frameworks
shilman Aug 22, 2022
0b9123b
Merge branch 'next' into vite-frameworks
shilman Aug 22, 2022
1671b46
Merge branch 'next' into vite-frameworks
shilman Aug 22, 2022
c9cffa0
Merge branch 'next' into vite-frameworks
shilman Aug 22, 2022
07f8ad4
Fix build errors
shilman Aug 22, 2022
69d62e4
Fix linting errors, take two
shilman Aug 22, 2022
eb24506
Fix parallelism
shilman Aug 22, 2022
71d7ee7
add missing core-vite ref in package.json
ndelangen Aug 22, 2022
495b75f
Merge branch 'vite-frameworks' of github.com:storybookjs/storybook in…
ndelangen Aug 22, 2022
6a4a0bd
Core: Fix null stats.toJson() for vite builder
shilman Aug 22, 2022
e53d6b2
Merge branch 'vite-frameworks' of github.com:storybookjs/storybook in…
shilman Aug 22, 2022
f194030
Trigger an update of the repro-templates-temp repo
shilman Aug 22, 2022
627a8cf
Merge branch 'next' into vite-frameworks
shilman Aug 23, 2022
9e0bd60
Try addUser to local registry
shilman Aug 23, 2022
2123331
Generate-repros: Run node14 on GH action to fix publish
shilman Aug 23, 2022
3184258
Tweak setup-node in GH action
shilman Aug 23, 2022
cfe1992
denug
shilman Aug 23, 2022
8778255
Merge branch 'next' into vite-frameworks
shilman Aug 23, 2022
88c244d
Generate-repros: run local registry outside of loop
shilman Aug 23, 2022
38df274
Debug publish
shilman Aug 23, 2022
704559a
Fix node14 for generate-repros-next
shilman Aug 23, 2022
e2c0677
Why is generate-repros-next GH action hanging?
shilman Aug 23, 2022
22d4ae1
Debugging
shilman Aug 23, 2022
baacfcd
More debugging
shilman Aug 23, 2022
bda22cb
Even more debugging
shilman Aug 23, 2022
57e8de6
Even more more debugging
shilman Aug 23, 2022
254736c
Generate-repros: Kill dangling processes
shilman Aug 23, 2022
61406a8
Why is node running?
shilman Aug 23, 2022
ca16737
Debug abort signal
shilman Aug 23, 2022
3248f9f
Always run addUser in the registry, cleanup
shilman Aug 23, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,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'
Expand Down Expand Up @@ -462,7 +462,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'
Expand All @@ -482,7 +482,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'
Expand All @@ -498,7 +498,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'
Expand All @@ -518,7 +518,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'
Expand All @@ -534,7 +534,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'
Expand All @@ -549,7 +549,7 @@ jobs:
e2e-sandboxes:
docker:
- image: mcr.microsoft.com/playwright:v1.24.0-focal
parallelism: 2
parallelism: 6
steps:
- git-shallow-clone/checkout_advanced:
clone_options: '--depth 1 --verbose'
Expand Down
5 changes: 4 additions & 1 deletion .github/workflows/generate-repros-next.yml
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,17 @@ on:
# To remove when the branch will be merged
push:
branches:
- shilman/add-angular-repro-template
- vite-frameworks

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: |
Expand Down
3 changes: 0 additions & 3 deletions .github/workflows/generate-repros.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,6 @@ jobs:
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: |
Expand Down
6 changes: 6 additions & 0 deletions code/.eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
},
},
],
};
3 changes: 3 additions & 0 deletions code/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"typescript.tsdk": "node_modules/typescript/lib"
}
4 changes: 2 additions & 2 deletions code/addons/a11y/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions code/addons/backgrounds/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion code/addons/controls/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion code/addons/jest/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions code/addons/links/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions code/addons/measure/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions code/addons/outline/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion code/addons/toolbars/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
11 changes: 11 additions & 0 deletions code/examples/vite-react-app/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
module.exports = {
extends: ['../../.eslintrc.js'],
env: {
browser: true,
},
rules: {
'import/extensions': [0],
'import/no-unresolved': [0],
'react/react-in-jsx-scope': [0],
},
};
24 changes: 24 additions & 0 deletions code/examples/vite-react-app/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
14 changes: 14 additions & 0 deletions code/examples/vite-react-app/.storybook/main.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
module.exports = {
stories: [
// '../src/**/*.stories.mdx',
'../src/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: ['@storybook/addon-essentials'],
framework: '@storybook/react-vite',
features: {
storyStoreV7: true,
},
docs: {
docsPage: false, // set to false to disable docs page entirely
},
};
3 changes: 3 additions & 0 deletions code/examples/vite-react-app/.storybook/preview-head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<script>
window.global = window;
</script>
9 changes: 9 additions & 0 deletions code/examples/vite-react-app/.storybook/preview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};
13 changes: 13 additions & 0 deletions code/examples/vite-react-app/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
27 changes: 27 additions & 0 deletions code/examples/vite-react-app/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"name": "@storybook/example-vite-react-app",
"version": "7.0.0-alpha.23",
"scripts": {
"build": "vite build",
"build-storybook": "STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb build",
"dev": "vite",
"preview": "vite preview",
"storybook": "STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb dev --no-manager-cache"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@mdx-js/preact": "^1.6.0",
"@mdx-js/react": "^1.6.0",
"@storybook/addon-essentials": "7.0.0-alpha.23",
"@storybook/builder-vite": "7.0.0-alpha.23",
"@storybook/react": "7.0.0-alpha.23",
"@storybook/react-vite": "7.0.0-alpha.23",
"@vitejs/plugin-react": "^1.0.7",
"prop-types": "^15.8.1",
"sb": "7.0.0-alpha.23",
"vite": "^2.9.0"
}
}
42 changes: 42 additions & 0 deletions code/examples/vite-react-app/src/App.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
.App {
text-align: center;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

button {
font-size: calc(10px + 2vmin);
}
Loading