Skip to content

Commit 69c29ff

Browse files
castastrophecastastrophe
committed
chore: initial minimal upgrade step
1 parent c9eb6ec commit 69c29ff

File tree

7 files changed

+4454
-655
lines changed

7 files changed

+4454
-655
lines changed

Diff for: ‎.browserslistrc

-7
This file was deleted.

Diff for: ‎package.json

+35-19
Original file line numberDiff line numberDiff line change
@@ -113,32 +113,38 @@
113113
"@rollup/plugin-node-resolve": "^15.2.3",
114114
"@sindresorhus/slugify": "^2.1.1",
115115
"@spectrum-web-components/eslint-plugin": "file:./linters/eslint",
116-
"@storybook/addon-a11y": "^7.5.0",
117-
"@storybook/addon-designs": "^8.0.0",
118-
"@storybook/addon-essentials": "^7.5.0",
119-
"@storybook/addon-links": "^7.5.0",
120-
"@storybook/web-components": "^7.5.0",
116+
"@storybook/addon-a11y": "^8.6.11",
117+
"@storybook/addon-designs": "^8.2.1",
118+
"@storybook/addon-essentials": "^8.6.11",
119+
"@storybook/addon-interactions": "^8.6.11",
120+
"@storybook/addon-links": "^8.6.11",
121+
"@storybook/blocks": "^8.6.11",
122+
"@storybook/manager-api": "^8.6.11",
123+
"@storybook/theming": "^8.6.11",
124+
"@storybook/types": "^8.6.11",
125+
"@storybook/web-components-webpack5": "^8.6.11",
121126
"@types/chai": "^4.1.7",
122127
"@types/command-line-args": "^5.0.0",
123128
"@types/command-line-usage": "^5.0.1",
124129
"@types/common-tags": "^1.4.0",
125130
"@types/mocha": "^10.0.6",
126131
"@types/node": "^20.11.11",
127-
"@types/react": "^18.0.25",
132+
"@types/react": "^18.3.20",
128133
"@types/sinon": "^17.0.3",
129-
"@types/webpack": "^5.28.1",
130-
"@types/webpack-env": "^1.13.9",
134+
"@types/webpack": "^5.28.5",
135+
"@types/webpack-env": "^1.18.8",
131136
"@typescript-eslint/eslint-plugin": "^7.0.2",
132137
"@typescript-eslint/parser": "^7.0.2",
133-
"@web/dev-server": "^0.4.3",
134-
"@web/dev-server-rollup": "^0.6.1",
138+
"@web/dev-server": "^0.4.6",
139+
"@web/dev-server-rollup": "^0.6.4",
135140
"@web/rollup-plugin-copy": "^0.5.1",
136-
"@web/rollup-plugin-html": "^2.1.2",
137-
"@web/storybook-builder": "^0.1.7",
138-
"@web/storybook-framework-web-components": "^0.1.1",
139-
"@web/test-runner": "^0.18.0",
141+
"@web/rollup-plugin-html": "^2.3.0",
142+
"@web/rollup-plugin-import-meta-assets": "^1.0.8",
143+
"@web/storybook-builder": "^0.2.1",
144+
"@web/storybook-utils": "^1.1.1",
145+
"@web/test-runner": "^0.18.3",
140146
"@web/test-runner-commands": "^0.9.0",
141-
"@web/test-runner-junit-reporter": "^0.7.0",
147+
"@web/test-runner-junit-reporter": "^0.7.2",
142148
"@web/test-runner-playwright": "^0.11.0",
143149
"@web/test-runner-visual-regression": "^0.9.0",
144150
"@webcomponents/webcomponentsjs": "^2.8.0",
@@ -177,7 +183,7 @@
177183
"lit-html": "^2.4.0 || ^3.1.3",
178184
"mocha-junit-reporter": "^2.0.2",
179185
"netlify-cli": "^17.38.0",
180-
"next": "^14",
186+
"next": "^14.0.0",
181187
"node-fetch": "^3.1.0",
182188
"npm-run-all2": "^6.0.0",
183189
"patch-package": "^8.0.0",
@@ -187,19 +193,20 @@
187193
"pretty-bytes": "^6.1.1",
188194
"pretty-quick": "^4.1.1",
189195
"re-template-tag": "^2.0.1",
190-
"react": "^18.2.0",
191-
"react-dom": "^18.2.0",
196+
"react": "^18.3.1",
197+
"react-dom": "^18.3.1",
192198
"rimraf": "^5.0.1",
193199
"rollup": "^4.12.0",
194200
"sinon": "^17.0.1",
195-
"storybook": "^7.5.0",
201+
"storybook": "^8.6.11",
196202
"stylelint": "^16.15.0",
197203
"stylelint-config-standard": "^37.0.0",
198204
"stylelint-header": "^2.1.0",
199205
"tachometer": "^0.7.1",
200206
"tar-stream": "^3.0.0",
201207
"terser": "^4.8.1",
202208
"typescript": "^5.3.3",
209+
"webpack-merge": "^6.0.1",
203210
"wireit": "^0.14.3",
204211
"yargs": "^17.2.1"
205212
},
@@ -438,6 +445,15 @@
438445
"tools/*",
439446
"react/*"
440447
],
448+
"browserslist": [
449+
"defaults",
450+
"last 2 Edge versions",
451+
"last 2 Chrome versions",
452+
"last 2 Firefox versions",
453+
"last 2 Safari versions",
454+
"last 2 iOS versions",
455+
"not IE 11"
456+
],
441457
"packageManager": "yarn@4.6.0",
442458
"license": "Apache-2.0",
443459
"author": "Adobe",

Diff for: ‎storybook/main.js

+25-55
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,11 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
99
OF ANY KIND, either express or implied. See the License for the specific language
1010
governing permissions and limitations under the License.
1111
*/
12-
import rollupJson from '@rollup/plugin-json';
13-
import { mergeConfigs } from '@web/dev-server';
14-
import { fromRollup } from '@web/dev-server-rollup';
15-
import rollupCommonjs from '@rollup/plugin-commonjs';
16-
import { watchSWC } from '../web-test-runner.utils.js';
1712

18-
/** @type { import('storybook-builder-wds').StorybookConfigWds } */
19-
const config = {
13+
import { merge } from 'webpack-merge';
14+
15+
/** @type { import('@storybook/web-components-webpack5').StorybookConfig } */
16+
export default {
2017
stories: [
2118
'../packages/*/stories/*.stories.js',
2219
'../tools/*/stories/*.stories.js',
@@ -34,56 +31,29 @@ const config = {
3431
'@geometricpanda/storybook-addon-badges',
3532
],
3633
framework: {
37-
name: '@web/storybook-framework-web-components',
34+
name: '@storybook/web-components-webpack5',
35+
options: {
36+
// builder: '@web/storybook-builder',
37+
fsCache: true,
38+
lazyCompilation: true,
39+
},
3840
},
39-
wdsFinal(config) {
40-
const json = fromRollup(rollupJson);
41-
return mergeConfigs(config, {
42-
nodeResolve: {
43-
exportConditions: ['browser', 'development'],
44-
moduleDirectories: [
45-
'node_modules',
46-
'packages',
47-
'projects',
48-
'tools',
49-
],
41+
async webpackFinal(config) {
42+
return merge(config, {
43+
resolve: {
44+
conditionNames: ['development', 'browser'],
45+
modules: ['node_modules', 'packages', 'projects', 'tools'],
5046
},
51-
clearTerminalOnReload: false,
52-
mimeTypes: {
53-
'**/*.json': 'js',
54-
},
55-
plugins: [json(), watchSWC()],
56-
http2: true,
57-
watch: true,
5847
});
5948
},
60-
rollupFinal(config) {
61-
// add a new plugin to the build
62-
config.plugins.push(rollupJson());
63-
config.plugins.push(
64-
rollupCommonjs({
65-
requireReturnsDefault: 'preferred',
66-
include: [
67-
'**/node_modules/react-dom/**/*.js',
68-
'**/node_modules/react/**/*.js',
69-
'**/node_modules/memoizerific/**/*.js',
70-
'**/node_modules/lodash/**/*.js',
71-
'**/node_modules/@storybook/blocks/**/*.js',
72-
],
73-
})
74-
);
75-
return config;
76-
},
49+
refs:
50+
process.env.NODE_ENV === 'development'
51+
? {
52+
'design-system': {
53+
title: 'Spectrum CSS',
54+
url: 'https://opensource.adobe.com/spectrum-css/preview/',
55+
expanded: false, // Optional, true by default
56+
},
57+
}
58+
: {},
7759
};
78-
79-
if (process.env.NODE_ENV === 'development') {
80-
config.refs = {
81-
'design-system': {
82-
title: 'Spectrum CSS',
83-
url: 'https://opensource.adobe.com/spectrum-css/preview/',
84-
expanded: false, // Optional, true by default
85-
},
86-
};
87-
}
88-
89-
export default config;

Diff for: ‎storybook/manager.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
99
OF ANY KIND, either express or implied. See the License for the specific language
1010
governing permissions and limitations under the License.
1111
*/
12-
import { addons } from '@storybook/addons';
13-
import yourTheme from './theme.js';
12+
13+
import { addons } from '@storybook/manager-api';
14+
import customTheme from './theme.js';
1415

1516
addons.setConfig({
16-
theme: yourTheme,
17+
theme: customTheme,
1718
sidebar: {
1819
showRoots: false,
1920
},

Diff for: ‎storybook/theme.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
99
OF ANY KIND, either express or implied. See the License for the specific language
1010
governing permissions and limitations under the License.
1111
*/
12-
import { create } from '@storybook/theming/create';
12+
13+
import { create } from '@storybook/theming';
1314

1415
export default create({
16+
base: 'light',
1517
brandTitle: 'Spectrum Web Components',
1618
brandUrl: 'https://opensource.adobe.com/spectrum-web-components',
1719
brandImage:

Diff for: ‎web-test-runner.utils.js

+4-32
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
99
OF ANY KIND, either express or implied. See the License for the specific language
1010
governing permissions and limitations under the License.
1111
*/
12-
import { playwrightLauncher } from '@web/test-runner-playwright';
13-
import { visualRegressionPlugin } from '@web/test-runner-visual-regression/plugin';
12+
1413
import fs from 'fs';
1514
import path from 'path';
16-
import fg from 'fast-glob';
15+
16+
import { playwrightLauncher } from '@web/test-runner-playwright';
17+
import { visualRegressionPlugin } from '@web/test-runner-visual-regression/plugin';
1718

1819
export const chromium = playwrightLauncher({
1920
product: 'chromium',
@@ -277,32 +278,3 @@ export const configuredVisualRegressionPlugin = () =>
277278
);
278279
},
279280
});
280-
281-
export function watchSWC() {
282-
return {
283-
name: 'watch-swc-plugin',
284-
async serverStart({ fileWatcher }) {
285-
// register SWC output files to be watched
286-
const files = await fg(
287-
[
288-
'{packages,projects,tools}/**/*.js',
289-
'{packages,projects,tools}/**/spectrum-*.css',
290-
],
291-
{
292-
ignore: [
293-
'**/*.map',
294-
'**/*.vrt.js',
295-
'**/spectrum-config.js',
296-
],
297-
}
298-
);
299-
for (const file of files) {
300-
fileWatcher.add(process.cwd() + file);
301-
}
302-
// Use the following for reviewing the file changes that are reacted to here...
303-
// fileWatcher.on('change', (path) => {
304-
// console.log(`Process change in: ${path}`);
305-
// });
306-
},
307-
};
308-
}

0 commit comments

Comments
 (0)