diff --git a/addons/storyshots/storyshots-core/README.md b/addons/storyshots/storyshots-core/README.md index af3d314c30d6..41d248af7af9 100644 --- a/addons/storyshots/storyshots-core/README.md +++ b/addons/storyshots/storyshots-core/README.md @@ -235,11 +235,11 @@ module.exports = { ### Configure Jest for Preact -StoryShots addon for Preact is dependent on [preact-render-to-json](https://github.com/nathancahill/preact-render-to-json), but +StoryShots addon for Preact is dependent on [preact-render-to-string](https://github.com/preactjs/preact-render-to-string), but [doesn't](#deps-issue) install it, so you need to install it separately. ```sh -yarn add preact-render-to-json --dev +yarn add preact-render-to-string --dev ``` ### Configure Jest for Web Components @@ -325,19 +325,18 @@ By design, [`react-test-renderer` doesn't use a browser environment or JSDOM](ht #### Example with React Testing Library ```js -import initStoryshots from "@storybook/addon-storyshots"; -import { render } from "@testing-library/react"; +import initStoryshots from '@storybook/addon-storyshots'; +import { render } from '@testing-library/react'; const reactTestingLibrarySerializer = { print: (val, serialize, indent) => serialize(val.container.firstChild), - test: val => val && val.hasOwnProperty("container") + test: (val) => val && val.hasOwnProperty('container'), }; initStoryshots({ renderer: render, - snapshotSerializers: [reactTestingLibrarySerializer] + snapshotSerializers: [reactTestingLibrarySerializer], }); - ``` #### Example with Enzyme @@ -584,9 +583,10 @@ initStoryshots({ ### `framework` -If you are running tests from outside of your app's directory, storyshots' detection of which framework you are using may fail. Pass `"react"` or `"react-native"` to short-circuit this. +If you are running tests from outside of your app's directory, storyshots' detection of which framework you are using may fail. Pass `"react"` or `"react-native"` to short-circuit this. For example: + ```js // storybook.test.js @@ -604,12 +604,11 @@ initStoryshots({ Use this table as a reference for manually specifying the framework. | angular | html | preact | -|----------------|------|--------------| +| -------------- | ---- | ------------ | | react | riot | react-native | | svelte | vue | vue3 | | web-components | rax | | - ### `test` Run a custom test function for each story, rather than the default (a vanilla snapshot test). @@ -634,7 +633,6 @@ This may be necessary if you want to use React features that are not supported b such as **ref** or **Portals**. Note that setting `test` overrides `renderer`. - ### `snapshotSerializers` Pass an array of snapshotSerializers to the jest runtime that serializes your story (such as enzyme-to-json). diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index 68407949408e..ecf1547a19d6 100644 --- a/addons/storyshots/storyshots-core/package.json +++ b/addons/storyshots/storyshots-core/package.json @@ -53,6 +53,7 @@ "glob": "^7.1.6", "global": "^4.4.0", "jest-specific-snapshot": "^4.0.0", + "preact-render-to-string": "^5.1.19", "pretty-format": "^26.6.2", "react-test-renderer": "^16.8.0 || ^17.0.0", "read-pkg-up": "^7.0.1", @@ -85,6 +86,7 @@ "@storybook/vue3": "*", "jest-preset-angular": "*", "jest-vue-preprocessor": "*", + "preact": "^10.5.13", "react": "^16.8.0 || ^17.0.0", "react-dom": "^16.8.0 || ^17.0.0", "rxjs": "*", @@ -114,6 +116,9 @@ "jest-vue-preprocessor": { "optional": true }, + "preact": { + "optional": true + }, "react": { "optional": true }, diff --git a/addons/storyshots/storyshots-core/src/frameworks/preact/renderTree.ts b/addons/storyshots/storyshots-core/src/frameworks/preact/renderTree.ts index bc6daf6a9e6f..5e95dbe95920 100644 --- a/addons/storyshots/storyshots-core/src/frameworks/preact/renderTree.ts +++ b/addons/storyshots/storyshots-core/src/frameworks/preact/renderTree.ts @@ -1,12 +1,13 @@ /** @jsx h */ +import { h } from 'preact'; +import preactRenderer from 'preact-render-to-string/jsx'; -// eslint-disable-next-line import/no-extraneous-dependencies -import preactRenderer from 'preact-render-to-json'; +const boundRenderer = (_storyElement: any, _rendererOptions: any) => + preactRenderer(_storyElement, null, { pretty: ' ' }); function getRenderedTree(story: any, context: any, { renderer, ...rendererOptions }: any) { - const storyElement = story.render(); - const currentRenderer = renderer || preactRenderer; - const tree = currentRenderer(storyElement, rendererOptions); + const currentRenderer = renderer || boundRenderer; + const tree = currentRenderer(h(story.render, null), rendererOptions); return tree; } diff --git a/addons/storyshots/storyshots-core/src/typings.d.ts b/addons/storyshots/storyshots-core/src/typings.d.ts index 48a542a81ef5..8184210fd20a 100644 --- a/addons/storyshots/storyshots-core/src/typings.d.ts +++ b/addons/storyshots/storyshots-core/src/typings.d.ts @@ -1,6 +1,6 @@ declare module 'global'; declare module 'jest-preset-angular/*'; -declare module 'preact-render-to-json'; +declare module 'preact-render-to-string/jsx'; declare module 'react-test-renderer*'; declare module 'rax-test-renderer*'; declare module 'babel-plugin-require-context-hook/register'; diff --git a/app/preact/package.json b/app/preact/package.json index 8148eb594185..61b58a3ae280 100644 --- a/app/preact/package.json +++ b/app/preact/package.json @@ -55,7 +55,7 @@ "ts-dedent": "^2.0.0" }, "devDependencies": { - "preact": "^10.5.9" + "preact": "^10.5.13" }, "peerDependencies": { "@babel/core": "*", diff --git a/app/preact/src/client/preview/render.tsx b/app/preact/src/client/preview/render.tsx index cf4f855c1afc..1db691b3d7cb 100644 --- a/app/preact/src/client/preview/render.tsx +++ b/app/preact/src/client/preview/render.tsx @@ -7,28 +7,23 @@ const rootElement = document ? document.getElementById('root') : null; let renderedStory: Element; -function preactRender(element: StoryFnPreactReturnType | null): void { - if ((preact as any).Fragment) { +function preactRender(story: StoryFnPreactReturnType): void { + if (preact.Fragment) { // Preact 10 only: - preact.render(element, rootElement); - } else if (element) { - renderedStory = (preact.render(element, rootElement) as unknown) as Element; + preact.render(story, rootElement); } else { - preact.render(element, rootElement, renderedStory); + renderedStory = (preact.render(story, rootElement, renderedStory) as unknown) as Element; } } -export default function renderMain({ - storyFn, - kind, - name, - showMain, - showError, - forceRender, -}: RenderContext) { - const element = storyFn(); - - if (!element) { +const StoryHarness: preact.FunctionalComponent<{ + name: string; + kind: string; + showError: RenderContext['showError']; + storyFn: () => any; +}> = ({ showError, name, kind, storyFn }) => { + const content = preact.h(storyFn as any, null); + if (!content) { showError({ title: `Expecting a Preact element from the story: "${name}" of "${kind}".`, description: dedent` @@ -36,9 +31,19 @@ export default function renderMain({ Use "() => ()" or "() => { return ; }" when defining the story. `, }); - return; + return null; } + return content; +}; +export default function renderMain({ + storyFn, + kind, + name, + showMain, + showError, + forceRender, +}: RenderContext) { // But forceRender means that it's the same story, so we want to keep the state in that case. if (!forceRender) { preactRender(null); @@ -46,5 +51,5 @@ export default function renderMain({ showMain(); - preactRender(element); + preactRender(preact.h(StoryHarness, { name, kind, showError, storyFn })); } diff --git a/examples/preact-kitchen-sink/.storybook/main.js b/examples/preact-kitchen-sink/.storybook/main.js index 085d8c93075b..f76c000b5653 100644 --- a/examples/preact-kitchen-sink/.storybook/main.js +++ b/examples/preact-kitchen-sink/.storybook/main.js @@ -6,6 +6,7 @@ module.exports = { addons: [ '@storybook/addon-storysource', '@storybook/addon-actions', + '@storybook/addon-docs', '@storybook/addon-links', '@storybook/addon-knobs', '@storybook/addon-viewport', diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json index fc3f28892b69..0f69dae6e6a6 100644 --- a/examples/preact-kitchen-sink/package.json +++ b/examples/preact-kitchen-sink/package.json @@ -10,7 +10,7 @@ }, "dependencies": { "global": "^4.4.0", - "preact": "^8.5.3" + "preact": "^10.5.13" }, "devDependencies": { "@babel/core": "^7.12.10", @@ -29,7 +29,7 @@ "babel-loader": "^8.2.2", "cross-env": "^7.0.3", "file-loader": "^6.2.0", - "preact-render-to-json": "^3.6.6", + "preact-render-to-string": "^5.1.19", "raw-loader": "^4.0.2", "svg-url-loader": "^7.1.1", "webpack": "4", diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot index c15dfb282f78..e34bf6d9f176 100644 --- a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot +++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot @@ -1,39 +1,39 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Addons/Actions Action and method 1`] = ` - +" `; exports[`Storyshots Addons/Actions Action only 1`] = ` - + Click me to log the action +" `; exports[`Storyshots Addons/Actions Multiple actions 1`] = ` - +" `; exports[`Storyshots Addons/Actions Multiple actions, object 1`] = ` - +" `; diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot index 4530aab71bff..1772b691a29d 100644 --- a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot +++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot @@ -1,17 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Addons/Backgrounds Example 1 1`] = ` - +" `; -exports[`Storyshots Addons/Backgrounds Example 2 1`] = ` - -`; +exports[`Storyshots Addons/Backgrounds Example 2 1`] = `""`; diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot index 6cf5d96d48f1..cb1837b984cc 100644 --- a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot +++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot @@ -1,40 +1,20 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Addons/Knobs All knobs 1`] = ` -
-

- My name is Jane, -

-

- today is January 20, 2017 -

+"
+

My name is Jane,

+

today is January 20, 2017

- I have a stock of 20 apples, costing $2.25 each. -

-

- Also, I have: + I have a stock of 20 apples, costing &dollar;2.25 each.

+

Also, I have:

    -
  • - Laptop -
    • -
  • - Book -
    • -
  • - Whiskey -
    • +
  • Laptop
    • +
  • Book
    • +
  • Whiskey
-

- Nice to meet you! -

-
+

Nice to meet you!

+
" `; -exports[`Storyshots Addons/Knobs Simple 1`] = ` -
- I am John Doe and I'm 44 years old. -
-`; +exports[`Storyshots Addons/Knobs Simple 1`] = `"
I am John Doe and I'm 44 years old.
"`; diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot index 256585be5d55..a57fa1a3a993 100644 --- a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot +++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot @@ -1,10 +1,10 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Addons/Links Go to welcome 1`] = ` - +" `; diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/button.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/button.stories.storyshot index 171bfa989e67..c9a2c36d7580 100644 --- a/examples/preact-kitchen-sink/src/stories/__snapshots__/button.stories.storyshot +++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/button.stories.storyshot @@ -1,24 +1,24 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Button with some emoji 1`] = ` - +" `; exports[`Storyshots Button with text 1`] = ` - +" `; diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/welcome.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/welcome.stories.storyshot index 5d740bb097a3..80e80479664b 100644 --- a/examples/preact-kitchen-sink/src/stories/__snapshots__/welcome.stories.storyshot +++ b/examples/preact-kitchen-sink/src/stories/__snapshots__/welcome.stories.storyshot @@ -1,51 +1,19 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Welcome to Storybook 1`] = ` -
-

- Welcome to storybook for Preact -

+"
+

Welcome to storybook for Preact

Preact logo + alt=\\"Preact logo\\" + src=\\"./logo.png\\" + style=\\"text-align: center; height: 150px; display: block; margin: 0 auto;\\" + />

This is a UI component dev environment for your Preact app.

We've added some basic stories inside the - - src/stories - + src/stories directory.
A story is a single state of one or more UI components. You can have as many stories as you want. @@ -55,42 +23,14 @@ exports[`Storyshots Welcome to Storybook 1`] = `

See these sample for a component called  - - Button - + Button .

@@ -99,37 +39,9 @@ exports[`Storyshots Welcome to Storybook 1`] = ` You can also edit those components and see changes right away.
(Try editing the - - Button - + Button stories located at  - - src/stories/1-Button.stories.js - + src/stories/1-Button.stories.js .)

@@ -137,50 +49,21 @@ exports[`Storyshots Welcome to Storybook 1`] = `
Have a look at the  Writing Stories  section in our documentation.

-

- - NOTE: - +

+ NOTE:
Have a look at the - - .storybook/webpack.config.js - + .storybook/webpack.config.js to add webpack loaders and plugins you are using in this project.

-
+
" `; diff --git a/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js b/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js index 0d1547737d65..cda44817a87b 100644 --- a/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js +++ b/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js @@ -1,6 +1,7 @@ /** @jsx h */ import { h } from 'preact'; +import { useState } from 'preact/hooks'; import { action, actions } from '@storybook/addon-actions'; import Button from '../Button'; @@ -9,7 +10,22 @@ export default { title: 'Addons/Actions', }; -export const ActionOnly = () => ; +export const ActionOnly = () => { + const [clicks, setClicks] = useState(0); + const log = action('log'); + return ( + + ); +}; ActionOnly.storyName = 'Action only'; diff --git a/yarn.lock b/yarn.lock index f21212b94c18..8d2dd37599da 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6375,6 +6375,7 @@ __metadata: jest-preset-angular: ^8.3.2 jest-specific-snapshot: ^4.0.0 jest-vue-preprocessor: ^1.7.1 + preact-render-to-string: ^5.1.19 pretty-format: ^26.6.2 react-test-renderer: ^16.8.0 || ^17.0.0 read-pkg-up: ^7.0.1 @@ -6391,6 +6392,7 @@ __metadata: "@storybook/vue3": "*" jest-preset-angular: "*" jest-vue-preprocessor: "*" + preact: ^10.5.13 react: ^16.8.0 || ^17.0.0 react-dom: ^16.8.0 || ^17.0.0 rxjs: "*" @@ -6412,6 +6414,8 @@ __metadata: optional: true jest-vue-preprocessor: optional: true + preact: + optional: true react: optional: true react-dom: @@ -7546,7 +7550,7 @@ __metadata: "@types/webpack-env": ^1.16.0 core-js: ^3.8.2 global: ^4.4.0 - preact: ^10.5.9 + preact: ^10.5.13 react: 16.14.0 react-dom: 16.14.0 read-pkg-up: ^7.0.1 @@ -36758,8 +36762,8 @@ fsevents@2.1.2: cross-env: ^7.0.3 file-loader: ^6.2.0 global: ^4.4.0 - preact: ^8.5.3 - preact-render-to-json: ^3.6.6 + preact: ^10.5.13 + preact-render-to-string: ^5.1.19 raw-loader: ^4.0.2 svg-url-loader: ^7.1.1 webpack: 4 @@ -36767,26 +36771,21 @@ fsevents@2.1.2: languageName: unknown linkType: soft -"preact-render-to-json@npm:^3.6.6": - version: 3.6.6 - resolution: "preact-render-to-json@npm:3.6.6" +"preact-render-to-string@npm:^5.1.19": + version: 5.1.19 + resolution: "preact-render-to-string@npm:5.1.19" + dependencies: + pretty-format: ^3.8.0 peerDependencies: - preact: "*" - checksum: 8d37bd0d9203a6401ac2076cbe8c1749cdc80407b0b24e8622c58e4fc1fc2b490aa19637982abe22dc6183e1fa0e09a4d256bec615756a6b1e273ae0bd5781c3 - languageName: node - linkType: hard - -"preact@npm:^10.5.9": - version: 10.5.12 - resolution: "preact@npm:10.5.12" - checksum: ae4f3e7f8f2134df925b5142cee5014ba18c329c0db488fa9f2e550ece91dbac702c08b0dbf8adbe84496c3ccdf9db581e4f09320258246915a804a51c64eb0f + preact: ">=10" + checksum: 560670ad725fc22ef80c37f38b2b2959313f53b9b52e988260365d7be158fbaebb24ddee391f41e4c353365b2c59a36e27e3e5c84cb692016c5adbb4c9a7a055 languageName: node linkType: hard -"preact@npm:^8.5.3": - version: 8.5.3 - resolution: "preact@npm:8.5.3" - checksum: 4db04521a654e7897d13f8c3106d9cb113585f4c13e914d5de92aa65772841cefcd98b0e2485ef902c8af8174f700c19071eb83111b44e01de00bdc12add3894 +"preact@npm:^10.5.13": + version: 10.5.13 + resolution: "preact@npm:10.5.13" + checksum: 5e75e70287b30545e28b73b58db2064b3e09bfa444067c4ae1c065071d1c93adce7d48bd64a6266a38cfe7c9c2464b52616926335a43817816582c73037b4eba languageName: node linkType: hard @@ -36912,6 +36911,13 @@ fsevents@2.1.2: languageName: node linkType: hard +"pretty-format@npm:^3.8.0": + version: 3.8.0 + resolution: "pretty-format@npm:3.8.0" + checksum: 69f12937bfb7b2a537a7463b9f875a16322401f1e44d7702d643faa0d21991126c24c093217ef6da403b54c15942a834174fa1c016b72e2cb9edaae6bb3729b6 + languageName: node + linkType: hard + "pretty-hrtime@npm:^1.0.3": version: 1.0.3 resolution: "pretty-hrtime@npm:1.0.3"