From dc3a5c22d57affb3d9722583209c40a4d27bf892 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 11 Sep 2022 14:31:48 +0800 Subject: [PATCH 01/12] Vite: Add web-components/lit support --- .circleci/config.yml | 12 +-- code/frameworks/vue3-vite/preset.js | 1 - code/frameworks/web-components-vite/README.md | 1 + .../web-components-vite/package.json | 80 +++++++++++++++++++ code/frameworks/web-components-vite/preset.js | 1 + .../web-components-vite/src/index.ts | 2 + .../web-components-vite/src/preset.ts | 7 ++ .../web-components-vite/tsconfig.json | 10 +++ .../src/automigrate/fixes/new-frameworks.ts | 2 +- code/lib/cli/src/repro-templates.ts | 24 ++++++ code/lib/cli/src/versions.ts | 1 + code/workspace.json | 5 ++ code/yarn.lock | 15 ++++ 13 files changed, 153 insertions(+), 8 deletions(-) create mode 100644 code/frameworks/web-components-vite/README.md create mode 100644 code/frameworks/web-components-vite/package.json create mode 100644 code/frameworks/web-components-vite/preset.js create mode 100644 code/frameworks/web-components-vite/src/index.ts create mode 100644 code/frameworks/web-components-vite/src/preset.ts create mode 100644 code/frameworks/web-components-vite/tsconfig.json diff --git a/.circleci/config.yml b/.circleci/config.yml index aa88ad7d9723..25632227f0e6 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -477,7 +477,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 7 + parallelism: 9 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -497,7 +497,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 7 + parallelism: 9 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -513,7 +513,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 7 + parallelism: 9 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -533,7 +533,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 7 + parallelism: 9 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -549,7 +549,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 7 + parallelism: 9 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -565,7 +565,7 @@ jobs: executor: class: medium+ name: sb_playwright - parallelism: 7 + parallelism: 9 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' diff --git a/code/frameworks/vue3-vite/preset.js b/code/frameworks/vue3-vite/preset.js index 2e3d77f1dea6..a83f95279e7f 100644 --- a/code/frameworks/vue3-vite/preset.js +++ b/code/frameworks/vue3-vite/preset.js @@ -1,2 +1 @@ -console.log('vue3-vite preset!') module.exports = require('./dist/preset'); diff --git a/code/frameworks/web-components-vite/README.md b/code/frameworks/web-components-vite/README.md new file mode 100644 index 000000000000..9c68eca98041 --- /dev/null +++ b/code/frameworks/web-components-vite/README.md @@ -0,0 +1 @@ +# Storybook for Web components diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json new file mode 100644 index 000000000000..6239c51e28f3 --- /dev/null +++ b/code/frameworks/web-components-vite/package.json @@ -0,0 +1,80 @@ +{ + "name": "@storybook/web-components-vite", + "version": "7.0.0-alpha.31", + "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", + "keywords": [ + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/web-components-vite", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "frameworks/web-components-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", + "prep": "../../../scripts/prepare/bundle.ts" + }, + "dependencies": { + "@storybook/builder-vite": "7.0.0-alpha.31", + "@storybook/core-server": "7.0.0-alpha.31", + "@storybook/web-components": "7.0.0-alpha.31", + "@vitejs/plugin-vue": "^3.0.3", + "magic-string": "^0.26.1", + "vite": "3" + }, + "devDependencies": { + "@types/node": "^14.14.20 || ^16.0.0", + "typescript": "~4.6.3", + "vite": "^3.1.0" + }, + "engines": { + "node": "^14.18 || >=16" + }, + "publishConfig": { + "access": "public" + }, + "bundler": { + "entries": [ + "./src/index.ts", + "./src/preset.ts" + ], + "platform": "node" + }, + "gitHead": "02c013c33186479017098d532a18ff8654b91f1f" +} diff --git a/code/frameworks/web-components-vite/preset.js b/code/frameworks/web-components-vite/preset.js new file mode 100644 index 000000000000..a83f95279e7f --- /dev/null +++ b/code/frameworks/web-components-vite/preset.js @@ -0,0 +1 @@ +module.exports = require('./dist/preset'); diff --git a/code/frameworks/web-components-vite/src/index.ts b/code/frameworks/web-components-vite/src/index.ts new file mode 100644 index 000000000000..098e54d925d1 --- /dev/null +++ b/code/frameworks/web-components-vite/src/index.ts @@ -0,0 +1,2 @@ +export * from '@storybook/web-components'; +export type { StorybookConfig } from '@storybook/builder-vite'; diff --git a/code/frameworks/web-components-vite/src/preset.ts b/code/frameworks/web-components-vite/src/preset.ts new file mode 100644 index 000000000000..53f4bcd5479e --- /dev/null +++ b/code/frameworks/web-components-vite/src/preset.ts @@ -0,0 +1,7 @@ +import type { StorybookConfig } from '@storybook/builder-vite'; + +export const addons: StorybookConfig['addons'] = ['@storybook/web-components']; + +export const core: StorybookConfig['core'] = { + builder: '@storybook/builder-vite', +}; diff --git a/code/frameworks/web-components-vite/tsconfig.json b/code/frameworks/web-components-vite/tsconfig.json new file mode 100644 index 000000000000..534e4ddd108a --- /dev/null +++ b/code/frameworks/web-components-vite/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": ["node"], + "resolveJsonModule": true + }, + "include": ["src/**/*"], + "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"] +} diff --git a/code/lib/cli/src/automigrate/fixes/new-frameworks.ts b/code/lib/cli/src/automigrate/fixes/new-frameworks.ts index fae11338f7b4..eb55597b9f1d 100644 --- a/code/lib/cli/src/automigrate/fixes/new-frameworks.ts +++ b/code/lib/cli/src/automigrate/fixes/new-frameworks.ts @@ -35,11 +35,11 @@ const packagesMap: Record = { }, '@storybook/svelte': { webpack5: '@storybook/svelte-webpack5', - // TODO: bring this back once we have the svelte-vite package vite: '@storybook/svelte-vite', }, '@storybook/web-components': { webpack5: '@storybook/web-components-webpack5', + vite: '@storybook/web-components-vite', }, '@storybook/html': { webpack5: '@storybook/html-webpack5', diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts index 66b9a5835a6e..d25a78f07a30 100644 --- a/code/lib/cli/src/repro-templates.ts +++ b/code/lib/cli/src/repro-templates.ts @@ -94,11 +94,35 @@ const svelteViteTemplates = { // } }; +const webComponentsViteTemplates = { + 'web-components-vite/default-js': { + name: 'Lit Vite (JS)', + script: 'yarn create vite . --template lit', + cadence: ['ci', 'daily', 'weekly'], + expected: { + framework: '@storybook/web-components-vite', + renderer: '@storybook/web-components', + builder: '@storybook/builder-vite', + }, + }, + 'web-components-vite/default-ts': { + name: 'web-components Vite (TS)', + script: 'yarn create vite . --template lit-ts', + cadence: ['ci', 'daily', 'weekly'], + expected: { + framework: '@storybook/web-components-vite', + renderer: '@storybook/web-components', + builder: '@storybook/builder-vite', + }, + }, +}; + export default { ...craTemplates, ...reactViteTemplates, ...vue3ViteTemplates, ...svelteViteTemplates, + ...webComponentsViteTemplates, // FIXME: missing documentation.json // 'angular/latest': { // name: 'Angular (latest)', diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts index b632d0d4c496..c3de5aec979a 100644 --- a/code/lib/cli/src/versions.ts +++ b/code/lib/cli/src/versions.ts @@ -76,6 +76,7 @@ export default { '@storybook/vue3-vite': '7.0.0-alpha.31', '@storybook/vue3-webpack5': '7.0.0-alpha.31', '@storybook/web-components': '7.0.0-alpha.31', + '@storybook/web-components-vite': '7.0.0-alpha.31', '@storybook/web-components-webpack5': '7.0.0-alpha.31', sb: '7.0.0-alpha.31', storybook: '7.0.0-alpha.31', diff --git a/code/workspace.json b/code/workspace.json index 54ce50462e8e..9ee694ae5441 100644 --- a/code/workspace.json +++ b/code/workspace.json @@ -401,6 +401,11 @@ "type": "library", "implicitDependencies": [] }, + "@storybook/web-components-vite": { + "root": "frameworks/web-components-vite", + "type": "library", + "implicitDependencies": [] + }, "@storybook/web-components-webpack5": { "root": "frameworks/web-components-webpack5", "type": "library", diff --git a/code/yarn.lock b/code/yarn.lock index b0d4218fee01..2e392e7ae582 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -9675,6 +9675,21 @@ __metadata: languageName: unknown linkType: soft +"@storybook/web-components-vite@workspace:frameworks/web-components-vite": + version: 0.0.0-use.local + resolution: "@storybook/web-components-vite@workspace:frameworks/web-components-vite" + dependencies: + "@storybook/builder-vite": 7.0.0-alpha.31 + "@storybook/core-server": 7.0.0-alpha.31 + "@storybook/web-components": 7.0.0-alpha.31 + "@types/node": ^14.14.20 || ^16.0.0 + "@vitejs/plugin-vue": ^3.0.3 + magic-string: ^0.26.1 + typescript: ~4.6.3 + vite: ^3.1.0 + languageName: unknown + linkType: soft + "@storybook/web-components-webpack5@workspace:*, @storybook/web-components-webpack5@workspace:frameworks/web-components-webpack5": version: 0.0.0-use.local resolution: "@storybook/web-components-webpack5@workspace:frameworks/web-components-webpack5" From 8833fb42ab00cbab335bdcaf2ef113a5d73e3ce7 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 12 Sep 2022 11:25:11 +0800 Subject: [PATCH 02/12] Repro templates: web-components-vite => lit-vite --- code/lib/cli/src/repro-templates.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts index d25a78f07a30..ac2c23a1ba34 100644 --- a/code/lib/cli/src/repro-templates.ts +++ b/code/lib/cli/src/repro-templates.ts @@ -94,8 +94,8 @@ const svelteViteTemplates = { // } }; -const webComponentsViteTemplates = { - 'web-components-vite/default-js': { +const litViteTemplates = { + 'lit-vite/default-js': { name: 'Lit Vite (JS)', script: 'yarn create vite . --template lit', cadence: ['ci', 'daily', 'weekly'], @@ -105,7 +105,7 @@ const webComponentsViteTemplates = { builder: '@storybook/builder-vite', }, }, - 'web-components-vite/default-ts': { + 'lit-vite/default-ts': { name: 'web-components Vite (TS)', script: 'yarn create vite . --template lit-ts', cadence: ['ci', 'daily', 'weekly'], @@ -122,7 +122,7 @@ export default { ...reactViteTemplates, ...vue3ViteTemplates, ...svelteViteTemplates, - ...webComponentsViteTemplates, + ...litViteTemplates, // FIXME: missing documentation.json // 'angular/latest': { // name: 'Angular (latest)', From 57dbd756d53a9bcba0ab9b9a13d08cc41a6af20b Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 12 Sep 2022 12:15:19 +0800 Subject: [PATCH 03/12] Fix typo [skip ci] --- code/lib/cli/src/repro-templates.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts index ac2c23a1ba34..1112bf568a4c 100644 --- a/code/lib/cli/src/repro-templates.ts +++ b/code/lib/cli/src/repro-templates.ts @@ -106,7 +106,7 @@ const litViteTemplates = { }, }, 'lit-vite/default-ts': { - name: 'web-components Vite (TS)', + name: 'Lit Vite (TS)', script: 'yarn create vite . --template lit-ts', cadence: ['ci', 'daily', 'weekly'], expected: { From bf4ed2ed59faf432f889a61ee10c03e8e5a6b79e Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 12 Sep 2022 13:09:00 +0800 Subject: [PATCH 04/12] Web-components: Add template components --- .../template/components/Button.js | 21 +++++++++++++ .../web-components/template/components/Pre.js | 13 ++++++++ .../template/components/button.css | 30 +++++++++++++++++++ .../template/components/index.js | 6 ++++ 4 files changed, 70 insertions(+) create mode 100644 code/renderers/web-components/template/components/Button.js create mode 100644 code/renderers/web-components/template/components/Pre.js create mode 100644 code/renderers/web-components/template/components/button.css create mode 100644 code/renderers/web-components/template/components/index.js diff --git a/code/renderers/web-components/template/components/Button.js b/code/renderers/web-components/template/components/Button.js new file mode 100644 index 000000000000..8d3bc41a166c --- /dev/null +++ b/code/renderers/web-components/template/components/Button.js @@ -0,0 +1,21 @@ +import { html } from 'lit-html'; +import { styleMap } from 'lit-html/directives/style-map'; +import './button.css'; + +/** + * Primary UI component for user interaction + */ +export const Button = ({ primary, backgroundColor = null, size, label, onClick }) => { + const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; + + return html` + + `; +}; diff --git a/code/renderers/web-components/template/components/Pre.js b/code/renderers/web-components/template/components/Pre.js new file mode 100644 index 000000000000..ca5322095d95 --- /dev/null +++ b/code/renderers/web-components/template/components/Pre.js @@ -0,0 +1,13 @@ +import { html } from 'lit-html'; +import { styleMap } from 'lit-html/directives/style-map'; + +/** + * Helper component for rendering text or data + */ +export const Pre = ({ style, object, text }) => + html` + 
+      ${object ? JSON.stringify(object, null, 2) : text}
+
+ `; diff --git a/code/renderers/web-components/template/components/button.css b/code/renderers/web-components/template/components/button.css new file mode 100644 index 000000000000..dc91dc76370b --- /dev/null +++ b/code/renderers/web-components/template/components/button.css @@ -0,0 +1,30 @@ +.storybook-button { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} +.storybook-button--primary { + color: white; + background-color: #1ea7fd; +} +.storybook-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; +} +.storybook-button--small { + font-size: 12px; + padding: 10px 16px; +} +.storybook-button--medium { + font-size: 14px; + padding: 11px 20px; +} +.storybook-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/code/renderers/web-components/template/components/index.js b/code/renderers/web-components/template/components/index.js new file mode 100644 index 000000000000..45cb33280525 --- /dev/null +++ b/code/renderers/web-components/template/components/index.js @@ -0,0 +1,6 @@ +import globalThis from 'global'; + +import { Button } from './Button'; +import { Pre } from './Pre'; + +globalThis.Components = { Button, Pre }; From a5aba9e5b2eaa3947c99412680109a9f71c4b893 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 12 Sep 2022 15:46:23 +1000 Subject: [PATCH 05/12] Improve error messages --- scripts/sandbox.ts | 4 +--- scripts/utils/exec.ts | 5 ++--- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/scripts/sandbox.ts b/scripts/sandbox.ts index f0ac8cb4dc50..698fedf0a014 100644 --- a/scripts/sandbox.ts +++ b/scripts/sandbox.ts @@ -489,9 +489,7 @@ async function main() { if (require.main === module) { main().catch((err) => { - logger.error('🚨 An error occurred when executing "sandbox":'); - - logger.error(err); + logger.error(err.message); process.exit(1); }); } diff --git a/scripts/utils/exec.ts b/scripts/utils/exec.ts index b3e1af6c3129..16e30bc899b5 100644 --- a/scripts/utils/exec.ts +++ b/scripts/utils/exec.ts @@ -27,7 +27,7 @@ export const exec = async ( const defaultOptions: Options = { shell: true, - stdout: debug ? 'inherit' : 'ignore', + stdout: debug ? 'inherit' : 'pipe', }; let currentChild: ExecaChildProcess; @@ -51,8 +51,7 @@ export const exec = async ( } catch (err) { if (!err.killed) { logger.error(chalk.red(`An error occurred while executing: \`${command}\``)); - logger.error(err); - logger.log(errorMessage); + logger.log(`${errorMessage}\n`); } throw err; From 05fb196789d74ecfcb0b631805a969443fcb32d6 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 12 Sep 2022 15:58:53 +1000 Subject: [PATCH 06/12] Add `webcomponents-vite` to `package.json` --- code/package.json | 1 + code/yarn.lock | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/code/package.json b/code/package.json index b99a2372bd16..c25d42912ca8 100644 --- a/code/package.json +++ b/code/package.json @@ -240,6 +240,7 @@ "@storybook/vue3-vite": "workspace:*", "@storybook/vue3-webpack5": "workspace:*", "@storybook/web-components": "workspace:*", + "@storybook/web-components-vite": "workspace:*", "@storybook/web-components-webpack5": "workspace:*", "@testing-library/dom": "^7.29.4", "@testing-library/jest-dom": "^5.11.9", diff --git a/code/yarn.lock b/code/yarn.lock index 2e392e7ae582..0c1e5cdebc84 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -9101,6 +9101,7 @@ __metadata: "@storybook/vue3-vite": "workspace:*" "@storybook/vue3-webpack5": "workspace:*" "@storybook/web-components": "workspace:*" + "@storybook/web-components-vite": "workspace:*" "@storybook/web-components-webpack5": "workspace:*" "@testing-library/dom": ^7.29.4 "@testing-library/jest-dom": ^5.11.9 @@ -9675,7 +9676,7 @@ __metadata: languageName: unknown linkType: soft -"@storybook/web-components-vite@workspace:frameworks/web-components-vite": +"@storybook/web-components-vite@workspace:*, @storybook/web-components-vite@workspace:frameworks/web-components-vite": version: 0.0.0-use.local resolution: "@storybook/web-components-vite@workspace:frameworks/web-components-vite" dependencies: From ad29ddd2d9f838cbce16b66e529854ef3f4235da Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 13 Sep 2022 12:09:12 +0800 Subject: [PATCH 07/12] Fix bad imports --- code/renderers/web-components/src/docs/sourceDecorator.test.ts | 3 ++- code/renderers/web-components/template/components/Button.js | 3 ++- code/renderers/web-components/template/components/Pre.js | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/code/renderers/web-components/src/docs/sourceDecorator.test.ts b/code/renderers/web-components/src/docs/sourceDecorator.test.ts index e08f0f3dee55..e516b915000f 100644 --- a/code/renderers/web-components/src/docs/sourceDecorator.test.ts +++ b/code/renderers/web-components/src/docs/sourceDecorator.test.ts @@ -1,5 +1,6 @@ +/* eslint-disable import/extensions */ import { html } from 'lit-html'; -import { styleMap } from 'lit-html/directives/style-map'; +import { styleMap } from 'lit-html/directives/style-map.js'; import { addons, useEffect } from '@storybook/addons'; import { SNIPPET_RENDERED } from '@storybook/docs-tools'; import type { StoryContext } from '../types'; diff --git a/code/renderers/web-components/template/components/Button.js b/code/renderers/web-components/template/components/Button.js index 8d3bc41a166c..f8fa7f0eb27b 100644 --- a/code/renderers/web-components/template/components/Button.js +++ b/code/renderers/web-components/template/components/Button.js @@ -1,5 +1,6 @@ +/* eslint-disable import/extensions */ import { html } from 'lit-html'; -import { styleMap } from 'lit-html/directives/style-map'; +import { styleMap } from 'lit-html/directives/style-map.js'; import './button.css'; /** diff --git a/code/renderers/web-components/template/components/Pre.js b/code/renderers/web-components/template/components/Pre.js index ca5322095d95..6ef56f08d22a 100644 --- a/code/renderers/web-components/template/components/Pre.js +++ b/code/renderers/web-components/template/components/Pre.js @@ -1,5 +1,6 @@ +/* eslint-disable import/extensions */ import { html } from 'lit-html'; -import { styleMap } from 'lit-html/directives/style-map'; +import { styleMap } from 'lit-html/directives/style-map.js'; /** * Helper component for rendering text or data From c01bb7decd9b889e993fc276ade350d4488bcd94 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 18 Sep 2022 18:59:43 +0800 Subject: [PATCH 08/12] Web-components: Attempt default render function --- code/renderers/web-components/src/config.ts | 2 +- code/renderers/web-components/src/render.ts | 21 +++++++++++++++++-- .../web-components/template/stories/README.md | 1 + 3 files changed, 21 insertions(+), 3 deletions(-) create mode 100644 code/renderers/web-components/template/stories/README.md diff --git a/code/renderers/web-components/src/config.ts b/code/renderers/web-components/src/config.ts index 83d74fd4d9d9..db7cf8f12a34 100644 --- a/code/renderers/web-components/src/config.ts +++ b/code/renderers/web-components/src/config.ts @@ -2,4 +2,4 @@ import { parameters as docsParams } from './docs/config'; export const parameters = { framework: 'web-components' as const, ...docsParams }; export { decorators, argTypesEnhancers } from './docs/config'; -export { renderToDOM } from './render'; +export { render, renderToDOM } from './render'; diff --git a/code/renderers/web-components/src/render.ts b/code/renderers/web-components/src/render.ts index 8347d2002397..5696e983a2df 100644 --- a/code/renderers/web-components/src/render.ts +++ b/code/renderers/web-components/src/render.ts @@ -3,16 +3,33 @@ import global from 'global'; import { dedent } from 'ts-dedent'; -import { render } from 'lit-html'; +import { render as litRender, html } from 'lit-html'; // Keep `.js` extension to avoid issue with Webpack (related to export map?) // eslint-disable-next-line import/extensions import { isTemplateResult } from 'lit-html/directive-helpers.js'; import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web'; import type { RenderContext } from '@storybook/store'; +import { ArgsStoryFn } from '@storybook/csf'; import { WebComponentsFramework } from './types'; const { Node } = global; +export const render: ArgsStoryFn = (args, context) => { + const { id, component } = context; + if (!component) { + throw new Error( + `Unable to render story ${id} as the component annotation is missing from the default export` + ); + } + + // FIXME: replace by one of + // - https://github.com/lit/lit/pull/1960 + // - https://github.com/open-wc/open-wc/pull/2398 + const argProps = Object.entries(args).map(([key, val]) => `.${key}=${val}`); + + return html`<${component} ${argProps.join(' ')}>`; +}; + export function renderToDOM( { storyFn, kind, name, showMain, showError, forceRemount }: RenderContext, domElement: Element @@ -29,7 +46,7 @@ export function renderToDOM( } const renderTo = domElement.querySelector('[id="root-inner"]'); - render(element, renderTo); + litRender(element, renderTo); simulatePageLoad(domElement); } else if (typeof element === 'string') { domElement.innerHTML = element; diff --git a/code/renderers/web-components/template/stories/README.md b/code/renderers/web-components/template/stories/README.md new file mode 100644 index 000000000000..37d8743baec7 --- /dev/null +++ b/code/renderers/web-components/template/stories/README.md @@ -0,0 +1 @@ +Placeholder until we write some render-specific stories From 58aa1c2fd002f4b6fe76e1906d172b09f74dbd63 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 30 Sep 2022 01:26:57 +0800 Subject: [PATCH 09/12] Add partial pnpm support per vite frameworks --- code/frameworks/web-components-vite/package.json | 6 ++++++ code/frameworks/web-components-vite/src/index.ts | 7 +++++++ 2 files changed, 13 insertions(+) diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index afd490789488..d8285652806a 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -51,8 +51,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@storybook/addons": "7.0.0-alpha.34", "@storybook/builder-vite": "7.0.0-alpha.34", + "@storybook/channel-postmessage": "7.0.0-alpha.34", + "@storybook/channel-websocket": "7.0.0-alpha.34", + "@storybook/client-api": "7.0.0-alpha.34", "@storybook/core-server": "7.0.0-alpha.34", + "@storybook/node-logger": "7.0.0-alpha.34", + "@storybook/preview-web": "7.0.0-alpha.34", "@storybook/web-components": "7.0.0-alpha.34", "@vitejs/plugin-vue": "^3.0.3", "magic-string": "^0.26.1", diff --git a/code/frameworks/web-components-vite/src/index.ts b/code/frameworks/web-components-vite/src/index.ts index 098e54d925d1..535432f3e0d4 100644 --- a/code/frameworks/web-components-vite/src/index.ts +++ b/code/frameworks/web-components-vite/src/index.ts @@ -1,2 +1,9 @@ +// exports for builder-vite +export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage'; +export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket'; +export { addons } from '@storybook/addons'; +export { composeConfigs, PreviewWeb } from '@storybook/preview-web'; +export { ClientApi } from '@storybook/client-api'; + export * from '@storybook/web-components'; export type { StorybookConfig } from '@storybook/builder-vite'; From f106ea380b85790bf4c026617f24ae64464b415d Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 1 Oct 2022 17:44:38 +0800 Subject: [PATCH 10/12] Lit-vite: Don't run CI yet --- code/lib/cli/src/repro-templates.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts index 558a26b83422..fe49b9814420 100644 --- a/code/lib/cli/src/repro-templates.ts +++ b/code/lib/cli/src/repro-templates.ts @@ -98,7 +98,7 @@ const litViteTemplates = { 'lit-vite/default-js': { name: 'Lit Vite (JS)', script: 'yarn create vite . --template lit', - cadence: ['ci', 'daily', 'weekly'], + cadence: [] as any, expected: { framework: '@storybook/web-components-vite', renderer: '@storybook/web-components', @@ -108,7 +108,7 @@ const litViteTemplates = { 'lit-vite/default-ts': { name: 'Lit Vite (TS)', script: 'yarn create vite . --template lit-ts', - cadence: ['ci', 'daily', 'weekly'], + cadence: [] as any, expected: { framework: '@storybook/web-components-vite', renderer: '@storybook/web-components', From da1250ae0adb984223dac3336e392675f745004f Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 1 Oct 2022 17:47:49 +0800 Subject: [PATCH 11/12] Don't run lit-vite in CI yet --- .circleci/config.yml | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 84b76e29a9d9..93f1a3ae5562 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -477,7 +477,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 10 + parallelism: 8 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -497,7 +497,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 10 + parallelism: 8 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -513,7 +513,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 10 + parallelism: 8 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -533,7 +533,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 10 + parallelism: 8 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -549,7 +549,7 @@ jobs: executor: class: medium+ name: sb_node_14_browsers - parallelism: 10 + parallelism: 8 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' @@ -565,7 +565,7 @@ jobs: executor: class: medium+ name: sb_playwright - parallelism: 10 + parallelism: 8 steps: - git-shallow-clone/checkout_advanced: clone_options: '--depth 1 --verbose' From e72125d82cdc773a8e2abf842cef5c887939920e Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 1 Oct 2022 17:49:58 +0800 Subject: [PATCH 12/12] Update yarn.lock --- code/yarn.lock | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/code/yarn.lock b/code/yarn.lock index 58b9c2da9e4d..0a85b3209e85 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -9238,8 +9238,14 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/web-components-vite@workspace:frameworks/web-components-vite" dependencies: + "@storybook/addons": 7.0.0-alpha.34 "@storybook/builder-vite": 7.0.0-alpha.34 + "@storybook/channel-postmessage": 7.0.0-alpha.34 + "@storybook/channel-websocket": 7.0.0-alpha.34 + "@storybook/client-api": 7.0.0-alpha.34 "@storybook/core-server": 7.0.0-alpha.34 + "@storybook/node-logger": 7.0.0-alpha.34 + "@storybook/preview-web": 7.0.0-alpha.34 "@storybook/web-components": 7.0.0-alpha.34 "@types/node": ^14.14.20 || ^16.0.0 "@vitejs/plugin-vue": ^3.0.3