diff --git a/addons/docs/src/blocks/LegacyStory.tsx b/addons/docs/src/blocks/LegacyStory.tsx new file mode 100644 index 00000000000..ed4ecb16d48 --- /dev/null +++ b/addons/docs/src/blocks/LegacyStory.tsx @@ -0,0 +1,102 @@ +import React, { FunctionComponent, ReactNode, ElementType, ComponentProps } from 'react'; +import { MDXProvider } from '@mdx-js/react'; +import { resetComponents, Story as PureStory } from '@storybook/components'; +import { toId, storyNameFromExport } from '@storybook/csf'; +import { Args, BaseAnnotations } from '@storybook/addons'; +import { CURRENT_SELECTION } from './types'; + +import { DocsContext, DocsContextProps } from './DocsContext'; + +export const storyBlockIdFromId = (storyId: string) => `story--${storyId}`; + +type PureStoryProps = ComponentProps; + +type CommonProps = BaseAnnotations & { + height?: string; + inline?: boolean; +}; + +type StoryDefProps = { + name: string; + children: ReactNode; +}; + +type StoryRefProps = { + id?: string; +}; + +type StoryImportProps = { + name: string; + story: ElementType; +}; + +export type StoryProps = (StoryDefProps | StoryRefProps | StoryImportProps) & CommonProps; + +export const lookupStoryId = ( + storyName: string, + { mdxStoryNameToKey, mdxComponentMeta }: DocsContextProps +) => + toId( + mdxComponentMeta.id || mdxComponentMeta.title, + storyNameFromExport(mdxStoryNameToKey[storyName]) + ); + +export const getStoryProps = (props: StoryProps, context: DocsContextProps): PureStoryProps => { + const { id } = props as StoryRefProps; + const { name } = props as StoryDefProps; + const inputId = id === CURRENT_SELECTION ? context.id : id; + const previewId = inputId || lookupStoryId(name, context); + const data = context.storyStore.fromId(previewId) || {}; + + const { height, inline } = props; + const { storyFn = undefined, name: storyName = undefined, parameters = {} } = data; + const { docs = {} } = parameters; + + if (docs.disable) { + return null; + } + + // prefer block props, then story parameters defined by the framework-specific settings and optionally overridden by users + const { inlineStories = false, iframeHeight = 100, prepareForInline } = docs; + const storyIsInline = typeof inline === 'boolean' ? inline : inlineStories; + if (storyIsInline && !prepareForInline) { + throw new Error( + `Story '${storyName}' is set to render inline, but no 'prepareForInline' function is implemented in your docs configuration!` + ); + } + + return { + parameters, + inline: storyIsInline, + id: previewId, + storyFn: prepareForInline && storyFn ? () => prepareForInline(storyFn, data) : storyFn, + height: height || (storyIsInline ? undefined : iframeHeight), + title: storyName, + }; +}; + +const Story: FunctionComponent = (props) => ( + + {(context) => { + const storyProps = getStoryProps(props, context); + + if (!storyProps) { + return null; + } + return ( +
+ + + +
+ ); + }} + +); + +Story.defaultProps = { + children: null, + name: null, +}; + +export { Story }; diff --git a/addons/docs/src/blocks/ModernStory.tsx b/addons/docs/src/blocks/ModernStory.tsx new file mode 100644 index 00000000000..319519973b5 --- /dev/null +++ b/addons/docs/src/blocks/ModernStory.tsx @@ -0,0 +1,83 @@ +import React, { FunctionComponent, ReactNode, ElementType, useEffect } from 'react'; +import { MDXProvider } from '@mdx-js/react'; +import { resetComponents } from '@storybook/components'; +import { DOCS_TARGETTED_RENDER, DOCS_TARGETTED_DESTROY } from '@storybook/core-events'; +import { toId, storyNameFromExport } from '@storybook/csf'; +import { Args, BaseAnnotations, addons } from '@storybook/addons'; +import { CURRENT_SELECTION } from './types'; + +import { DocsContext, DocsContextProps } from './DocsContext'; + +export const storyBlockIdFromId = (storyId: string) => `story--${storyId}`; + +type CommonProps = BaseAnnotations & { + height?: string; + inline?: boolean; +}; + +type StoryDefProps = { + name: string; + children: ReactNode; +}; + +type StoryRefProps = { + id?: string; +}; + +type StoryImportProps = { + name: string; + story: ElementType; +}; + +export type StoryProps = (StoryDefProps | StoryRefProps | StoryImportProps) & CommonProps; + +export const lookupStoryId = ( + storyName: string, + { mdxStoryNameToKey, mdxComponentMeta }: DocsContextProps +) => + toId( + mdxComponentMeta.id || mdxComponentMeta.title, + storyNameFromExport(mdxStoryNameToKey[storyName]) + ); + +const Placeholder: FunctionComponent = ({ id, name }) => { + const channel = addons.getChannel(); + const identifier = storyBlockIdFromId(id); + useEffect(() => { + channel.emit(DOCS_TARGETTED_RENDER, { identifier, id, name }); + return () => { + channel.emit(DOCS_TARGETTED_DESTROY, { identifier, id, name }); + // TODO this does nothing, should it do something though? + }; + }); + + return ( +
+ loading story... +
+ ); +}; + +const Story: FunctionComponent = (props) => ( + + {(context) => { + const { id } = props as StoryRefProps; + const { name } = props as StoryDefProps; + const inputId = id === CURRENT_SELECTION ? context.id : id; + const previewId = inputId || lookupStoryId(name, context); + + return ( + + + + ); + }} + +); + +Story.defaultProps = { + children: null, + name: null, +}; + +export { Story }; diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx index 6e239f072ca..0fc4c912047 100644 --- a/addons/docs/src/blocks/Story.tsx +++ b/addons/docs/src/blocks/Story.tsx @@ -1,101 +1,8 @@ -import React, { FunctionComponent, ReactNode, ElementType, ComponentProps } from 'react'; -import { MDXProvider } from '@mdx-js/react'; -import { resetComponents, Story as PureStory } from '@storybook/components'; -import { toId, storyNameFromExport } from '@storybook/csf'; -import { Args, BaseAnnotations } from '@storybook/addons'; -import { CURRENT_SELECTION } from './types'; +import global from 'global'; +import { Story as LegacyStory } from './LegacyStory'; +import { Story as ModernStory } from './ModernStory'; -import { DocsContext, DocsContextProps } from './DocsContext'; +export const Story = global?.MODERN_INLINE_RENDER ? ModernStory : LegacyStory; -export const storyBlockIdFromId = (storyId: string) => `story--${storyId}`; - -type PureStoryProps = ComponentProps; - -type CommonProps = BaseAnnotations & { - height?: string; - inline?: boolean; -}; - -type StoryDefProps = { - name: string; - children: ReactNode; -}; - -type StoryRefProps = { - id?: string; -}; - -type StoryImportProps = { - name: string; - story: ElementType; -}; - -export type StoryProps = (StoryDefProps | StoryRefProps | StoryImportProps) & CommonProps; - -export const lookupStoryId = ( - storyName: string, - { mdxStoryNameToKey, mdxComponentMeta }: DocsContextProps -) => - toId( - mdxComponentMeta.id || mdxComponentMeta.title, - storyNameFromExport(mdxStoryNameToKey[storyName]) - ); - -export const getStoryProps = (props: StoryProps, context: DocsContextProps): PureStoryProps => { - const { id } = props as StoryRefProps; - const { name } = props as StoryDefProps; - const inputId = id === CURRENT_SELECTION ? context.id : id; - const previewId = inputId || lookupStoryId(name, context); - const data = context.storyStore.fromId(previewId) || {}; - - const { height, inline } = props; - const { storyFn = undefined, name: storyName = undefined, parameters = {} } = data; - const { docs = {} } = parameters; - - if (docs.disable) { - return null; - } - - // prefer block props, then story parameters defined by the framework-specific settings and optionally overridden by users - const { inlineStories = false, iframeHeight = 100, prepareForInline } = docs; - const storyIsInline = typeof inline === 'boolean' ? inline : inlineStories; - if (storyIsInline && !prepareForInline) { - throw new Error( - `Story '${storyName}' is set to render inline, but no 'prepareForInline' function is implemented in your docs configuration!` - ); - } - - return { - parameters, - inline: storyIsInline, - id: previewId, - storyFn: prepareForInline && storyFn ? () => prepareForInline(storyFn, data) : storyFn, - height: height || (storyIsInline ? undefined : iframeHeight), - title: storyName, - }; -}; - -const Story: FunctionComponent = (props) => ( - - {(context) => { - const storyProps = getStoryProps(props, context); - if (!storyProps) { - return null; - } - return ( -
- - - -
- ); - }} - -); - -Story.defaultProps = { - children: null, - name: null, -}; - -export { Story }; +// FIXME: refactor +export { storyBlockIdFromId, lookupStoryId } from './ModernStory'; diff --git a/app/ember/src/client/preview/render.ts b/app/ember/src/client/preview/render.ts index 97b2fa65407..ea5732cbe66 100644 --- a/app/ember/src/client/preview/render.ts +++ b/app/ember/src/client/preview/render.ts @@ -6,12 +6,12 @@ const { window: globalWindow, document } = global; declare let Ember: any; -const rootEl = document.getElementById('root'); +const rootElement = document.getElementById('root'); const config = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/config/environment`); const app = globalWindow.require(`${globalWindow.STORYBOOK_NAME}/app`).default.create({ autoboot: false, - rootElement: rootEl, + rootElement, ...config.APP, }); @@ -59,7 +59,13 @@ function render(options: OptionsArgs, el: ElementArgs) { }); } -export default function renderMain({ storyFn, kind, name, showMain, showError }: RenderContext) { +export default function renderMain({ + storyFn, + kind, + name, + showError, + targetDOMNode = rootElement, +}: RenderContext) { const element = storyFn(); if (!element) { @@ -75,6 +81,5 @@ export default function renderMain({ storyFn, kind, name, showMain, showError }: return; } - showMain(); - render(element, rootEl); + render(element, { el: targetDOMNode }); } diff --git a/app/html/src/client/preview/render.ts b/app/html/src/client/preview/render.ts index 11f9e04ec18..c6ea7c98eff 100644 --- a/app/html/src/client/preview/render.ts +++ b/app/html/src/client/preview/render.ts @@ -10,23 +10,22 @@ export default function renderMain({ storyFn, kind, name, - showMain, showError, forceRender, + targetDOMNode = rootElement, }: RenderContext) { const element = storyFn(); - showMain(); if (typeof element === 'string') { - rootElement.innerHTML = element; - simulatePageLoad(rootElement); + targetDOMNode.innerHTML = element; + simulatePageLoad(targetDOMNode); } else if (element instanceof Node) { // Don't re-mount the element if it didn't change and neither did the story - if (rootElement.firstChild === element && forceRender === true) { + if (targetDOMNode.firstChild === element && forceRender === true) { return; } - rootElement.innerHTML = ''; - rootElement.appendChild(element); + targetDOMNode.innerHTML = ''; + targetDOMNode.appendChild(element); simulateDOMContentLoaded(); } else { showError({ diff --git a/app/preact/src/client/preview/render.tsx b/app/preact/src/client/preview/render.tsx index 22944f43bb6..4dc43646217 100644 --- a/app/preact/src/client/preview/render.tsx +++ b/app/preact/src/client/preview/render.tsx @@ -8,12 +8,12 @@ const rootElement = document ? document.getElementById('root') : null; let renderedStory: Element; -function preactRender(story: StoryFnPreactReturnType): void { +function preactRender(story: StoryFnPreactReturnType, targetDOMNode: HTMLElement): void { if (preact.Fragment) { // Preact 10 only: - preact.render(story, rootElement); + preact.render(story, targetDOMNode); } else { - renderedStory = (preact.render(story, rootElement, renderedStory) as unknown) as Element; + renderedStory = (preact.render(story, targetDOMNode, renderedStory) as unknown) as Element; } } @@ -41,16 +41,14 @@ export default function renderMain({ storyFn, kind, name, - showMain, showError, forceRender, + targetDOMNode = rootElement, }: RenderContext) { // But forceRender means that it's the same story, so we want to keep the state in that case. if (!forceRender) { - preactRender(null); + preactRender(null, targetDOMNode); } - showMain(); - - preactRender(preact.h(StoryHarness, { name, kind, showError, storyFn })); + preactRender(preact.h(StoryHarness, { name, kind, showError, storyFn }), targetDOMNode); } diff --git a/app/react/src/client/preview/render.tsx b/app/react/src/client/preview/render.tsx index f7ba50dd21b..4c664003b9d 100644 --- a/app/react/src/client/preview/render.tsx +++ b/app/react/src/client/preview/render.tsx @@ -6,7 +6,7 @@ import { StoryContext, RenderContext } from './types'; const { document, FRAMEWORK_OPTIONS } = global; -const rootEl = document ? document.getElementById('root') : null; +const rootElement = document ? document.getElementById('root') : null; const render = (node: ReactElement, el: Element) => new Promise((resolve) => { @@ -53,6 +53,7 @@ export default async function renderMain({ showMain, showException, forceRender, + targetDOMNode = rootElement, }: RenderContext) { const Story = unboundStoryFn as FunctionComponent; @@ -71,8 +72,12 @@ export default async function renderMain({ // https://github.com/storybookjs/react-storybook/issues/81 // But forceRender means that it's the same story, so we want too keep the state in that case. if (!forceRender) { - ReactDOM.unmountComponentAtNode(rootEl); + try { + ReactDOM.unmountComponentAtNode(targetDOMNode); + } catch (e) { + // + } } - await render(element, rootEl); + await render(element, targetDOMNode); } diff --git a/app/server/src/client/preview/render.ts b/app/server/src/client/preview/render.ts index ce181783dfc..84d1dab73df 100644 --- a/app/server/src/client/preview/render.ts +++ b/app/server/src/client/preview/render.ts @@ -49,7 +49,6 @@ export async function renderMain({ id, kind, name, - showMain, showError, forceRender, parameters, @@ -57,6 +56,7 @@ export async function renderMain({ storyFn, args, argTypes, + targetDOMNode = rootElement, }: RenderContext) { // Some addons wrap the storyFn so we need to call it even though Server doesn't need the answer storyFn(); @@ -70,18 +70,17 @@ export async function renderMain({ const storyParams = { ...params, ...storyArgs }; const element = await fetchStoryHtml(url, fetchId, storyParams, storyContext); - showMain(); if (typeof element === 'string') { - rootElement.innerHTML = element; - simulatePageLoad(rootElement); + targetDOMNode.innerHTML = element; + simulatePageLoad(targetDOMNode); } else if (element instanceof Node) { // Don't re-mount the element if it didn't change and neither did the story - if (rootElement.firstChild === element && forceRender === true) { + if (targetDOMNode.firstChild === element && forceRender === true) { return; } - rootElement.innerHTML = ''; - rootElement.appendChild(element); + targetDOMNode.innerHTML = ''; + targetDOMNode.appendChild(element); simulateDOMContentLoaded(); } else { showError({ diff --git a/app/svelte/src/client/preview/render.ts b/app/svelte/src/client/preview/render.ts index 6758df790a5..02434d9abdf 100644 --- a/app/svelte/src/client/preview/render.ts +++ b/app/svelte/src/client/preview/render.ts @@ -7,31 +7,51 @@ const { document } = global; type Component = any; let previousComponent: Component = null; +const rootElement = document.getElementById('root'); function cleanUpPreviousStory() { if (!previousComponent) { return; } - previousComponent.$destroy(); + try { + previousComponent.$destroy(); + } catch (e) { + // + } previousComponent = null; } -export default function render({ storyFn, kind, name, showMain, showError }: RenderContext) { +export default function renderMain({ + storyFn, + kind, + name, + showError, + targetDOMNode = rootElement, +}: RenderContext) { cleanUpPreviousStory(); - const target = document.getElementById('root'); - - target.innerHTML = ''; - - previousComponent = new PreviewRender({ - target, - props: { - storyFn, - name, - kind, - showError, - }, - }); - - showMain(); + // targetDOMNode.innerHTML = ''; + + if (targetDOMNode === rootElement) { + previousComponent = new PreviewRender({ + targetDOMNode, + props: { + storyFn, + name, + kind, + showError, + }, + }); + } else { + // eslint-disable-next-line no-new + new PreviewRender({ + targetDOMNode, + props: { + storyFn, + name, + kind, + showError, + }, + }); + } } diff --git a/app/vue/src/client/preview/render.ts b/app/vue/src/client/preview/render.ts index 29c54bf00a2..92ddaaf3a2d 100644 --- a/app/vue/src/client/preview/render.ts +++ b/app/vue/src/client/preview/render.ts @@ -5,6 +5,8 @@ import { RenderContext } from './types'; export const COMPONENT = 'STORYBOOK_COMPONENT'; export const VALUES = 'STORYBOOK_VALUES'; +const rootElement = global.document.getElementById('root'); + const root = new Vue({ data() { return { @@ -18,15 +20,15 @@ const root = new Vue({ }, }); -export default function render({ +export default function renderMain({ storyFn, kind, name, args, - showMain, showError, showException, forceRender, + targetDOMNode = rootElement, }: RenderContext) { Vue.config.errorHandler = showException; @@ -46,17 +48,42 @@ export default function render({ return; } - showMain(); + if (!root.$el) { + // at component creation || refresh by HMR or switching stories + if (!root[COMPONENT] || !forceRender) { + root[COMPONENT] = element; + } + + // @ts-ignore https://github.com/storybookjs/storrybook/pull/7578#discussion_r307986139 + root[VALUES] = { ...element.options[VALUES], ...args }; - // at component creation || refresh by HMR or switching stories - if (!root[COMPONENT] || !forceRender) { - root[COMPONENT] = element; + root.$mount(rootElement); } - // @ts-ignore https://github.com/storybookjs/storrybook/pull/7578#discussion_r307986139 - root[VALUES] = { ...element.options[VALUES], ...args }; + if (targetDOMNode.id === 'root') { + // at component creation || refresh by HMR or switching stories + if (!root[COMPONENT] || !forceRender) { + root[COMPONENT] = element; + } - if (!root.$el) { - root.$mount('#root'); + // @ts-ignore https://github.com/storybookjs/storrybook/pull/7578#discussion_r307986139 + root[VALUES] = { ...element.options[VALUES], ...args }; + } else { + const component = storyFn(); + + // eslint-disable-next-line no-new + new Vue({ + el: targetDOMNode, + data() { + return { + [COMPONENT]: component, + [VALUES]: args, + }; + }, + render(h) { + const children = this[COMPONENT] ? [h(this[COMPONENT])] : undefined; + return h('div', { attrs: { id: 'root' } }, children); + }, + }); } } diff --git a/app/vue3/src/client/preview/render.ts b/app/vue3/src/client/preview/render.ts index 456c209ab04..1752d071675 100644 --- a/app/vue3/src/client/preview/render.ts +++ b/app/vue3/src/client/preview/render.ts @@ -1,9 +1,11 @@ +/* eslint-disable no-param-reassign */ import dedent from 'ts-dedent'; -import { createApp, h, shallowRef, ComponentPublicInstance } from 'vue'; +import { createApp, h, shallowRef, ComponentPublicInstance, render } from 'vue'; import { Args } from '@storybook/addons'; import { RenderContext, StoryFnVueReturnType } from './types'; const activeStoryComponent = shallowRef(null); +const rootElement = global.document.getElementById('root'); interface Root extends ComponentPublicInstance { storyArgs?: Args; @@ -32,15 +34,15 @@ export const storybookApp = createApp({ }, }); -export default function render({ +export default function renderMain({ storyFn, kind, name, args, - showMain, showError, showException, forceRender, + targetDOMNode = rootElement, }: RenderContext) { storybookApp.config.errorHandler = showException; @@ -57,14 +59,24 @@ export default function render({ return; } - showMain(); + if (!root) { + if (!forceRender) { + activeStoryComponent.value = element; + } + root = storybookApp.mount(`#root`); + } - if (!forceRender) { + if (targetDOMNode.id === 'root') { activeStoryComponent.value = element; - } + } else { + const vnode = h(element, args); + // By attaching the app context from `@storybook/vue3` to the vnode + // like this, these stoeis are able to access any app config stuff + // the end-user set inside `.storybook/preview.js` + vnode.appContext = storybookApp._context; // eslint-disable-line no-underscore-dangle - if (!root) { - root = storybookApp.mount('#root'); + targetDOMNode.innerHTML = ''; + render(vnode, targetDOMNode); } root.storyArgs = args; diff --git a/app/web-components/src/client/preview/render.ts b/app/web-components/src/client/preview/render.ts index 18f15e48531..7e04491c2e1 100644 --- a/app/web-components/src/client/preview/render.ts +++ b/app/web-components/src/client/preview/render.ts @@ -14,35 +14,34 @@ export default function renderMain({ storyFn, kind, name, - showMain, showError, forceRender, + targetDOMNode = rootElement, }: RenderContext) { const element = storyFn(); - showMain(); if (isTemplateResult(element)) { // `render` stores the TemplateInstance in the Node and tries to update based on that. // Since we reuse `rootElement` for all stories, remove the stored instance first. // But forceRender means that it's the same story, so we want too keep the state in that case. if (!forceRender || !rootElement.querySelector('[id="root-inner"]')) { - rootElement.innerHTML = '
'; + targetDOMNode.innerHTML = '
'; } - const renderTo = rootElement.querySelector('[id="root-inner"]'); + const renderTo = targetDOMNode.querySelector('[id="root-inner"]'); render(element, renderTo); - simulatePageLoad(rootElement); + simulatePageLoad(targetDOMNode); } else if (typeof element === 'string') { - rootElement.innerHTML = element; - simulatePageLoad(rootElement); + targetDOMNode.innerHTML = element; + simulatePageLoad(targetDOMNode); } else if (element instanceof Node) { // Don't re-mount the element if it didn't change and neither did the story - if (rootElement.firstChild === element && forceRender === true) { + if (targetDOMNode.firstChild === element && forceRender === true) { return; } - rootElement.innerHTML = ''; - rootElement.appendChild(element); + targetDOMNode.innerHTML = ''; + targetDOMNode.appendChild(element); simulateDOMContentLoaded(); } else { showError({ diff --git a/examples/react-ts/main.ts b/examples/react-ts/main.ts index 677f7382cd0..527c0170c01 100644 --- a/examples/react-ts/main.ts +++ b/examples/react-ts/main.ts @@ -31,6 +31,7 @@ const config: StorybookConfig = { features: { postcss: false, previewCsfV3: true, + modernInlineRender: true, }, }; diff --git a/examples/web-components-kitchen-sink/yarn.lock b/examples/web-components-kitchen-sink/yarn.lock index 08baefb57c5..a05d19741a2 100644 --- a/examples/web-components-kitchen-sink/yarn.lock +++ b/examples/web-components-kitchen-sink/yarn.lock @@ -2065,14 +2065,14 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-a11y@portal:../../addons/a11y::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.3.0-beta.12 - "@storybook/api": 6.3.0-beta.12 - "@storybook/channels": 6.3.0-beta.12 - "@storybook/client-api": 6.3.0-beta.12 - "@storybook/client-logger": 6.3.0-beta.12 - "@storybook/components": 6.3.0-beta.12 - "@storybook/core-events": 6.3.0-beta.12 - "@storybook/theming": 6.3.0-beta.12 + "@storybook/addons": 6.4.0-alpha.1 + "@storybook/api": 6.4.0-alpha.1 + "@storybook/channels": 6.4.0-alpha.1 + "@storybook/client-api": 6.4.0-alpha.1 + "@storybook/client-logger": 6.4.0-alpha.1 + "@storybook/components": 6.4.0-alpha.1 + "@storybook/core-events": 6.4.0-alpha.1 + "@storybook/theming": 6.4.0-alpha.1 axe-core: ^4.2.0 core-js: ^3.8.2 global: ^4.4.0 @@ -2096,12 +2096,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-actions@portal:../../addons/actions::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.3.0-beta.12 - "@storybook/api": 6.3.0-beta.12 - "@storybook/client-api": 6.3.0-beta.12 - "@storybook/components": 6.3.0-beta.12 - "@storybook/core-events": 6.3.0-beta.12 - "@storybook/theming": 6.3.0-beta.12 + "@storybook/addons": 6.4.0-alpha.1 + "@storybook/api": 6.4.0-alpha.1 + "@storybook/client-api": 6.4.0-alpha.1 + "@storybook/components": 6.4.0-alpha.1 + "@storybook/core-events": 6.4.0-alpha.1 + "@storybook/theming": 6.4.0-alpha.1 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 global: ^4.4.0 @@ -2128,12 +2128,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-backgrounds@portal:../../addons/backgrounds::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.3.0-beta.12 - "@storybook/api": 6.3.0-beta.12 - "@storybook/client-logger": 6.3.0-beta.12 - "@storybook/components": 6.3.0-beta.12 - "@storybook/core-events": 6.3.0-beta.12 - "@storybook/theming": 6.3.0-beta.12 + "@storybook/addons": 6.4.0-alpha.1 + "@storybook/api": 6.4.0-alpha.1 + "@storybook/client-logger": 6.4.0-alpha.1 + "@storybook/components": 6.4.0-alpha.1 + "@storybook/core-events": 6.4.0-alpha.1 + "@storybook/theming": 6.4.0-alpha.1 core-js: ^3.8.2 global: ^4.4.0 memoizerific: ^1.11.3 @@ -2155,12 +2155,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-controls@portal:../../addons/controls::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.3.0-beta.12 - "@storybook/api": 6.3.0-beta.12 - "@storybook/client-api": 6.3.0-beta.12 - "@storybook/components": 6.3.0-beta.12 - "@storybook/node-logger": 6.3.0-beta.12 - "@storybook/theming": 6.3.0-beta.12 + "@storybook/addons": 6.4.0-alpha.1 + "@storybook/api": 6.4.0-alpha.1 + "@storybook/client-api": 6.4.0-alpha.1 + "@storybook/components": 6.4.0-alpha.1 + "@storybook/node-logger": 6.4.0-alpha.1 + "@storybook/theming": 6.4.0-alpha.1 core-js: ^3.8.2 ts-dedent: ^2.0.0 peerDependencies: @@ -2187,19 +2187,20 @@ __metadata: "@mdx-js/loader": ^1.6.22 "@mdx-js/mdx": ^1.6.22 "@mdx-js/react": ^1.6.22 - "@storybook/addons": 6.3.0-beta.12 - "@storybook/api": 6.3.0-beta.12 - "@storybook/builder-webpack4": 6.3.0-beta.12 - "@storybook/client-api": 6.3.0-beta.12 - "@storybook/client-logger": 6.3.0-beta.12 - "@storybook/components": 6.3.0-beta.12 - "@storybook/core": 6.3.0-beta.12 - "@storybook/core-events": 6.3.0-beta.12 + "@storybook/addons": 6.4.0-alpha.1 + "@storybook/api": 6.4.0-alpha.1 + "@storybook/builder-webpack4": 6.4.0-alpha.1 + "@storybook/client-api": 6.4.0-alpha.1 + "@storybook/client-logger": 6.4.0-alpha.1 + "@storybook/components": 6.4.0-alpha.1 + "@storybook/core": 6.4.0-alpha.1 + "@storybook/core-events": 6.4.0-alpha.1 "@storybook/csf": 0.0.1 - "@storybook/node-logger": 6.3.0-beta.12 - "@storybook/postinstall": 6.3.0-beta.12 - "@storybook/source-loader": 6.3.0-beta.12 - "@storybook/theming": 6.3.0-beta.12 + "@storybook/csf-tools": 6.4.0-alpha.1 + "@storybook/node-logger": 6.4.0-alpha.1 + "@storybook/postinstall": 6.4.0-alpha.1 + "@storybook/source-loader": 6.4.0-alpha.1 + "@storybook/theming": 6.4.0-alpha.1 acorn: ^7.4.1 acorn-jsx: ^5.3.1 acorn-walk: ^7.2.0 @@ -2222,10 +2223,10 @@ __metadata: ts-dedent: ^2.0.0 util-deprecate: ^1.0.2 peerDependencies: - "@storybook/angular": 6.3.0-beta.12 - "@storybook/vue": 6.3.0-beta.12 - "@storybook/vue3": 6.3.0-beta.12 - "@storybook/web-components": 6.3.0-beta.12 + "@storybook/angular": 6.4.0-alpha.1 + "@storybook/vue": 6.4.0-alpha.1 + "@storybook/vue3": 6.4.0-alpha.1 + "@storybook/web-components": 6.4.0-alpha.1 lit: ^2.0.0-rc.1 lit-html: ^1.4.1 || ^2.0.0-rc.3 react: ^16.8.0 || ^17.0.0 @@ -2262,15 +2263,15 @@ __metadata: languageName: node linkType: soft -"@storybook/addon-jest@npm:*": - version: 6.2.9 - resolution: "@storybook/addon-jest@npm:6.2.9" +"@storybook/addon-jest@npm:6.4.0-alpha.1": + version: 6.4.0-alpha.1 + resolution: "@storybook/addon-jest@npm:6.4.0-alpha.1" dependencies: - "@storybook/addons": 6.2.9 - "@storybook/api": 6.2.9 - "@storybook/components": 6.2.9 - "@storybook/core-events": 6.2.9 - "@storybook/theming": 6.2.9 + "@storybook/addons": 6.4.0-alpha.1 + "@storybook/api": 6.4.0-alpha.1 + "@storybook/components": 6.4.0-alpha.1 + "@storybook/core-events": 6.4.0-alpha.1 + "@storybook/theming": 6.4.0-alpha.1 core-js: ^3.8.2 global: ^4.4.0 react-sizeme: ^3.0.1 @@ -2284,7 +2285,7 @@ __metadata: optional: true react-dom: optional: true - checksum: 17471fe649a19563d10820770f672c650dcd5ff3438ab794f7999f74889af3ebb92b86233ea418fe8bbca8045cdf4550551978687333707088ab3bc4b85a79c1 + checksum: 80dffe734ec888a4d62796cb20c4ee7e2f6d8ca7ba22cd386026a3a2330342511554e046f5ea8073091a55702f0d8450ad16b06c8037090ebe408e537671f111 languageName: node linkType: hard @@ -2292,11 +2293,11 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-links@portal:../../addons/links::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.3.0-beta.12 - "@storybook/client-logger": 6.3.0-beta.12 - "@storybook/core-events": 6.3.0-beta.12 + "@storybook/addons": 6.4.0-alpha.1 + "@storybook/client-logger": 6.4.0-alpha.1 + "@storybook/core-events": 6.4.0-alpha.1 "@storybook/csf": 0.0.1 - "@storybook/router": 6.3.0-beta.12 + "@storybook/router": 6.4.0-alpha.1 "@types/qs": ^6.9.5 core-js: ^3.8.2 global: ^4.4.0 @@ -2320,10 +2321,10 @@ __metadata: resolution: "@storybook/addon-storyshots@portal:../../addons/storyshots/storyshots-core::locator=web-components-kitchen-sink%40workspace%3A." dependencies: "@jest/transform": ^26.6.2 - "@storybook/addons": 6.3.0-beta.12 - "@storybook/client-api": 6.3.0-beta.12 - "@storybook/core": 6.3.0-beta.12 - "@storybook/core-common": 6.3.0-beta.12 + "@storybook/addons": 6.4.0-alpha.1 + "@storybook/client-api": 6.4.0-alpha.1 + "@storybook/core": 6.4.0-alpha.1 + "@storybook/core-common": 6.4.0-alpha.1 "@types/glob": ^7.1.3 "@types/jest": ^26.0.16 "@types/jest-specific-snapshot": ^0.5.3 @@ -2393,13 +2394,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-storysource@portal:../../addons/storysource::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.3.0-beta.12 - "@storybook/api": 6.3.0-beta.12 - "@storybook/client-logger": 6.3.0-beta.12 - "@storybook/components": 6.3.0-beta.12 - "@storybook/router": 6.3.0-beta.12 - "@storybook/source-loader": 6.3.0-beta.12 - "@storybook/theming": 6.3.0-beta.12 + "@storybook/addons": 6.4.0-alpha.1 + "@storybook/api": 6.4.0-alpha.1 + "@storybook/client-logger": 6.4.0-alpha.1 + "@storybook/components": 6.4.0-alpha.1 + "@storybook/router": 6.4.0-alpha.1 + "@storybook/source-loader": 6.4.0-alpha.1 + "@storybook/theming": 6.4.0-alpha.1 core-js: ^3.8.2 estraverse: ^5.2.0 loader-utils: ^2.0.0 @@ -2422,12 +2423,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-viewport@portal:../../addons/viewport::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.3.0-beta.12 - "@storybook/api": 6.3.0-beta.12 - "@storybook/client-logger": 6.3.0-beta.12 - "@storybook/components": 6.3.0-beta.12 - "@storybook/core-events": 6.3.0-beta.12 - "@storybook/theming": 6.3.0-beta.12 + "@storybook/addons": 6.4.0-alpha.1 + "@storybook/api": 6.4.0-alpha.1 + "@storybook/client-logger": 6.4.0-alpha.1 + "@storybook/components": 6.4.0-alpha.1 + "@storybook/core-events": 6.4.0-alpha.1 + "@storybook/theming": 6.4.0-alpha.1 core-js: ^3.8.2 global: ^4.4.0 memoizerific: ^1.11.3 @@ -2448,12 +2449,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addons@portal:../../lib/addons::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/api": 6.3.0-beta.12 - "@storybook/channels": 6.3.0-beta.12 - "@storybook/client-logger": 6.3.0-beta.12 - "@storybook/core-events": 6.3.0-beta.12 - "@storybook/router": 6.3.0-beta.12 - "@storybook/theming": 6.3.0-beta.12 + "@storybook/api": 6.4.0-alpha.1 + "@storybook/channels": 6.4.0-alpha.1 + "@storybook/client-logger": 6.4.0-alpha.1 + "@storybook/core-events": 6.4.0-alpha.1 + "@storybook/router": 6.4.0-alpha.1 + "@storybook/theming": 6.4.0-alpha.1 core-js: ^3.8.2 global: ^4.4.0 regenerator-runtime: ^0.13.7 @@ -2468,13 +2469,13 @@ __metadata: resolution: "@storybook/api@portal:../../lib/api::locator=web-components-kitchen-sink%40workspace%3A." dependencies: "@reach/router": ^1.3.4 - "@storybook/channels": 6.3.0-beta.12 - "@storybook/client-logger": 6.3.0-beta.12 - "@storybook/core-events": 6.3.0-beta.12 + "@storybook/channels": 6.4.0-alpha.1 + "@storybook/client-logger": 6.4.0-alpha.1 + "@storybook/core-events": 6.4.0-alpha.1 "@storybook/csf": 0.0.1 - "@storybook/router": 6.3.0-beta.12 + "@storybook/router": 6.4.0-alpha.1 "@storybook/semver": ^7.3.2 - "@storybook/theming": 6.3.0-beta.12 + "@storybook/theming": 6.4.0-alpha.1 "@types/reach__router": ^1.3.7 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 @@ -2518,20 +2519,20 @@ __metadata: "@babel/preset-env": ^7.12.11 "@babel/preset-react": ^7.12.10 "@babel/preset-typescript": ^7.12.7 - "@storybook/addons": 6.3.0-beta.12 - "@storybook/api": 6.3.0-beta.12 - "@storybook/channel-postmessage": 6.3.0-beta.12 - "@storybook/channels": 6.3.0-beta.12 - "@storybook/client-api": 6.3.0-beta.12 - "@storybook/client-logger": 6.3.0-beta.12 - "@storybook/components": 6.3.0-beta.12 - "@storybook/core-common": 6.3.0-beta.12 - "@storybook/core-events": 6.3.0-beta.12 - "@storybook/node-logger": 6.3.0-beta.12 - "@storybook/router": 6.3.0-beta.12 + "@storybook/addons": 6.4.0-alpha.1 + "@storybook/api": 6.4.0-alpha.1 + "@storybook/channel-postmessage": 6.4.0-alpha.1 + "@storybook/channels": 6.4.0-alpha.1 + "@storybook/client-api": 6.4.0-alpha.1 + "@storybook/client-logger": 6.4.0-alpha.1 + "@storybook/components": 6.4.0-alpha.1 + "@storybook/core-common": 6.4.0-alpha.1 + "@storybook/core-events": 6.4.0-alpha.1 + "@storybook/node-logger": 6.4.0-alpha.1 + "@storybook/router": 6.4.0-alpha.1 "@storybook/semver": ^7.3.2 - "@storybook/theming": 6.3.0-beta.12 - "@storybook/ui": 6.3.0-beta.12 + "@storybook/theming": 6.4.0-alpha.1 + "@storybook/ui": 6.4.0-alpha.1 "@types/node": ^14.0.10 "@types/webpack": ^4.41.26 autoprefixer: ^9.8.6 @@ -2551,7 +2552,7 @@ __metadata: global: ^4.4.0 html-webpack-plugin: ^4.0.0 pnp-webpack-plugin: 1.6.4 - postcss: ^7.0.35 + postcss: ^7.0.36 postcss-flexbugs-fixes: ^4.2.1 postcss-loader: ^4.2.0 raw-loader: ^4.0.2 @@ -2580,9 +2581,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/channel-postmessage@portal:../../lib/channel-postmessage::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/channels": 6.3.0-beta.12 - "@storybook/client-logger": 6.3.0-beta.12 - "@storybook/core-events": 6.3.0-beta.12 + "@storybook/channels": 6.4.0-alpha.1 + "@storybook/client-logger": 6.4.0-alpha.1 + "@storybook/core-events": 6.4.0-alpha.1 core-js: ^3.8.2 global: ^4.4.0 qs: ^6.10.0 @@ -2604,11 +2605,11 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/client-api@portal:../../lib/client-api::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.3.0-beta.12 - "@storybook/channel-postmessage": 6.3.0-beta.12 - "@storybook/channels": 6.3.0-beta.12 - "@storybook/client-logger": 6.3.0-beta.12 - "@storybook/core-events": 6.3.0-beta.12 + "@storybook/addons": 6.4.0-alpha.1 + "@storybook/channel-postmessage": 6.4.0-alpha.1 + "@storybook/channels": 6.4.0-alpha.1 + "@storybook/client-logger": 6.4.0-alpha.1 + "@storybook/core-events": 6.4.0-alpha.1 "@storybook/csf": 0.0.1 "@types/qs": ^6.9.5 "@types/webpack-env": ^1.16.0 @@ -2642,9 +2643,9 @@ __metadata: resolution: "@storybook/components@portal:../../lib/components::locator=web-components-kitchen-sink%40workspace%3A." dependencies: "@popperjs/core": ^2.6.0 - "@storybook/client-logger": 6.3.0-beta.12 + "@storybook/client-logger": 6.4.0-alpha.1 "@storybook/csf": 0.0.1 - "@storybook/theming": 6.3.0-beta.12 + "@storybook/theming": 6.4.0-alpha.1 "@types/color-convert": ^2.0.0 "@types/overlayscrollbars": ^1.12.0 "@types/react-syntax-highlighter": 11.0.5 @@ -2675,13 +2676,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core-client@portal:../../lib/core-client::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.3.0-beta.12 - "@storybook/channel-postmessage": 6.3.0-beta.12 - "@storybook/client-api": 6.3.0-beta.12 - "@storybook/client-logger": 6.3.0-beta.12 - "@storybook/core-events": 6.3.0-beta.12 + "@storybook/addons": 6.4.0-alpha.1 + "@storybook/channel-postmessage": 6.4.0-alpha.1 + "@storybook/client-api": 6.4.0-alpha.1 + "@storybook/client-logger": 6.4.0-alpha.1 + "@storybook/core-events": 6.4.0-alpha.1 "@storybook/csf": 0.0.1 - "@storybook/ui": 6.3.0-beta.12 + "@storybook/ui": 6.4.0-alpha.1 airbnb-js-shims: ^2.2.1 ansi-to-html: ^0.6.11 core-js: ^3.8.2 @@ -2727,7 +2728,7 @@ __metadata: "@babel/preset-react": ^7.12.10 "@babel/preset-typescript": ^7.12.7 "@babel/register": ^7.12.1 - "@storybook/node-logger": 6.3.0-beta.12 + "@storybook/node-logger": 6.4.0-alpha.1 "@storybook/semver": ^7.3.2 "@types/glob-base": ^0.3.0 "@types/micromatch": ^4.0.1 @@ -2775,12 +2776,12 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core-server@portal:../../lib/core-server::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/builder-webpack4": 6.3.0-beta.12 - "@storybook/core-client": 6.3.0-beta.12 - "@storybook/core-common": 6.3.0-beta.12 - "@storybook/csf-tools": 6.3.0-beta.12 - "@storybook/manager-webpack4": 6.3.0-beta.12 - "@storybook/node-logger": 6.3.0-beta.12 + "@storybook/builder-webpack4": 6.4.0-alpha.1 + "@storybook/core-client": 6.4.0-alpha.1 + "@storybook/core-common": 6.4.0-alpha.1 + "@storybook/csf-tools": 6.4.0-alpha.1 + "@storybook/manager-webpack4": 6.4.0-alpha.1 + "@storybook/node-logger": 6.4.0-alpha.1 "@storybook/semver": ^7.3.2 "@types/node": ^14.0.10 "@types/node-fetch": ^2.5.7 @@ -2809,8 +2810,8 @@ __metadata: util-deprecate: ^1.0.2 webpack: 4 peerDependencies: - "@storybook/builder-webpack5": 6.3.0-beta.12 - "@storybook/manager-webpack5": 6.3.0-beta.12 + "@storybook/builder-webpack5": 6.4.0-alpha.1 + "@storybook/manager-webpack5": 6.4.0-alpha.1 react: ^16.8.0 || ^17.0.0 react-dom: ^16.8.0 || ^17.0.0 peerDependenciesMeta: @@ -2827,10 +2828,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core@portal:../../lib/core::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/core-client": 6.3.0-beta.12 - "@storybook/core-server": 6.3.0-beta.12 + "@storybook/core-client": 6.4.0-alpha.1 + "@storybook/core-server": 6.4.0-alpha.1 peerDependencies: - "@storybook/builder-webpack5": 6.3.0-beta.12 + "@storybook/builder-webpack5": 6.4.0-alpha.1 react: ^16.8.0 || ^17.0.0 react-dom: ^16.8.0 || ^17.0.0 peerDependenciesMeta: @@ -2847,11 +2848,17 @@ __metadata: dependencies: "@babel/generator": ^7.12.11 "@babel/parser": ^7.12.11 + "@babel/plugin-transform-react-jsx": ^7.12.12 + "@babel/preset-env": ^7.12.11 "@babel/traverse": ^7.12.11 "@babel/types": ^7.12.11 + "@mdx-js/mdx": ^1.6.22 "@storybook/csf": ^0.0.1 core-js: ^3.8.2 fs-extra: ^9.0.1 + js-string-escape: ^1.0.1 + lodash: ^4.17.20 + prettier: ~2.2.1 regenerator-runtime: ^0.13.7 languageName: node linkType: soft @@ -2872,12 +2879,12 @@ __metadata: "@babel/core": ^7.12.10 "@babel/plugin-transform-template-literals": ^7.12.1 "@babel/preset-react": ^7.12.10 - "@storybook/addons": 6.3.0-beta.12 - "@storybook/core-client": 6.3.0-beta.12 - "@storybook/core-common": 6.3.0-beta.12 - "@storybook/node-logger": 6.3.0-beta.12 - "@storybook/theming": 6.3.0-beta.12 - "@storybook/ui": 6.3.0-beta.12 + "@storybook/addons": 6.4.0-alpha.1 + "@storybook/core-client": 6.4.0-alpha.1 + "@storybook/core-common": 6.4.0-alpha.1 + "@storybook/node-logger": 6.4.0-alpha.1 + "@storybook/theming": 6.4.0-alpha.1 + "@storybook/ui": 6.4.0-alpha.1 "@types/node": ^14.0.10 "@types/webpack": ^4.41.26 babel-loader: ^8.2.2 @@ -2940,7 +2947,7 @@ __metadata: resolution: "@storybook/router@portal:../../lib/router::locator=web-components-kitchen-sink%40workspace%3A." dependencies: "@reach/router": ^1.3.4 - "@storybook/client-logger": 6.3.0-beta.12 + "@storybook/client-logger": 6.4.0-alpha.1 "@types/reach__router": ^1.3.7 core-js: ^3.8.2 fast-deep-equal: ^3.1.3 @@ -2971,8 +2978,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@portal:../../lib/source-loader::locator=web-components-kitchen-sink%40workspace%3A." dependencies: - "@storybook/addons": 6.3.0-beta.12 - "@storybook/client-logger": 6.3.0-beta.12 + "@storybook/addons": 6.4.0-alpha.1 + "@storybook/client-logger": 6.4.0-alpha.1 "@storybook/csf": 0.0.1 core-js: ^3.8.2 estraverse: ^5.2.0 @@ -2994,7 +3001,7 @@ __metadata: "@emotion/core": ^10.1.1 "@emotion/is-prop-valid": ^0.8.6 "@emotion/styled": ^10.0.27 - "@storybook/client-logger": 6.3.0-beta.12 + "@storybook/client-logger": 6.4.0-alpha.1 core-js: ^3.8.2 deep-object-diff: ^1.1.0 emotion-theming: ^10.0.27 @@ -3014,15 +3021,15 @@ __metadata: resolution: "@storybook/ui@portal:../../lib/ui::locator=web-components-kitchen-sink%40workspace%3A." dependencies: "@emotion/core": ^10.1.1 - "@storybook/addons": 6.3.0-beta.12 - "@storybook/api": 6.3.0-beta.12 - "@storybook/channels": 6.3.0-beta.12 - "@storybook/client-logger": 6.3.0-beta.12 - "@storybook/components": 6.3.0-beta.12 - "@storybook/core-events": 6.3.0-beta.12 - "@storybook/router": 6.3.0-beta.12 + "@storybook/addons": 6.4.0-alpha.1 + "@storybook/api": 6.4.0-alpha.1 + "@storybook/channels": 6.4.0-alpha.1 + "@storybook/client-logger": 6.4.0-alpha.1 + "@storybook/components": 6.4.0-alpha.1 + "@storybook/core-events": 6.4.0-alpha.1 + "@storybook/router": 6.4.0-alpha.1 "@storybook/semver": ^7.3.2 - "@storybook/theming": 6.3.0-beta.12 + "@storybook/theming": 6.4.0-alpha.1 "@types/markdown-to-jsx": ^6.11.3 copy-to-clipboard: ^3.3.1 core-js: ^3.8.2 @@ -3055,10 +3062,10 @@ __metadata: "@babel/plugin-syntax-dynamic-import": ^7.8.3 "@babel/plugin-syntax-import-meta": ^7.10.4 "@babel/preset-env": ^7.12.11 - "@storybook/addons": 6.3.0-beta.12 - "@storybook/client-api": 6.3.0-beta.12 - "@storybook/core": 6.3.0-beta.12 - "@storybook/core-common": 6.3.0-beta.12 + "@storybook/addons": 6.4.0-alpha.1 + "@storybook/client-api": 6.4.0-alpha.1 + "@storybook/core": 6.4.0-alpha.1 + "@storybook/core-common": 6.4.0-alpha.1 "@types/webpack-env": ^1.16.0 babel-plugin-bundled-import-meta: ^0.3.1 core-js: ^3.8.2 @@ -11157,7 +11164,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"postcss@npm:^7.0.14, postcss@npm:^7.0.26, postcss@npm:^7.0.32, postcss@npm:^7.0.35, postcss@npm:^7.0.5, postcss@npm:^7.0.6": +"postcss@npm:^7.0.14, postcss@npm:^7.0.26, postcss@npm:^7.0.32, postcss@npm:^7.0.5, postcss@npm:^7.0.6": version: 7.0.35 resolution: "postcss@npm:7.0.35" dependencies: @@ -11168,6 +11175,17 @@ fsevents@^1.2.7: languageName: node linkType: hard +"postcss@npm:^7.0.36": + version: 7.0.36 + resolution: "postcss@npm:7.0.36" + dependencies: + chalk: ^2.4.2 + source-map: ^0.6.1 + supports-color: ^6.1.0 + checksum: 8e5dcaf9adf875a3ad9444227391979043958fc08f5a848a58bb716e41d1f7a1618cc3f884a7a19328d7ae341bbaa4f5a75063195dd43da168659688dffecbe1 + languageName: node + linkType: hard + "preact-render-to-string@npm:^5.1.19": version: 5.1.19 resolution: "preact-render-to-string@npm:5.1.19" @@ -14053,17 +14071,17 @@ fsevents@^1.2.7: version: 0.0.0-use.local resolution: "web-components-kitchen-sink@workspace:." dependencies: - "@storybook/addon-a11y": "*" - "@storybook/addon-actions": "*" - "@storybook/addon-backgrounds": "*" - "@storybook/addon-controls": "*" - "@storybook/addon-docs": "*" - "@storybook/addon-jest": "*" - "@storybook/addon-links": "*" - "@storybook/addon-storyshots": "*" - "@storybook/addon-storysource": "*" - "@storybook/addon-viewport": "*" - "@storybook/web-components": "*" + "@storybook/addon-a11y": 6.4.0-alpha.1 + "@storybook/addon-actions": 6.4.0-alpha.1 + "@storybook/addon-backgrounds": 6.4.0-alpha.1 + "@storybook/addon-controls": 6.4.0-alpha.1 + "@storybook/addon-docs": 6.4.0-alpha.1 + "@storybook/addon-jest": 6.4.0-alpha.1 + "@storybook/addon-links": 6.4.0-alpha.1 + "@storybook/addon-storyshots": 6.4.0-alpha.1 + "@storybook/addon-storysource": 6.4.0-alpha.1 + "@storybook/addon-viewport": 6.4.0-alpha.1 + "@storybook/web-components": 6.4.0-alpha.1 global: ^4.4.0 jest: ^27.0.1 lit: ^2.0.0-rc.2 diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts index 3bec5bc44b3..0aa99040b09 100644 --- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts @@ -65,6 +65,7 @@ export default async ({ typescriptOptions, modern, previewCsfV3, + modernInlineRender, }: Options & Record): Promise => { const logLevel = await presets.apply('logLevel', undefined); const frameworkOptions = await presets.apply(`${framework}Options`, {}); @@ -155,6 +156,7 @@ export default async ({ LOGLEVEL: logLevel, FRAMEWORK_OPTIONS: frameworkOptions, PREVIEW_CSF_V3: previewCsfV3, + MODERN_INLINE_RENDER: modernInlineRender, }, headHtmlSnippet, bodyHtmlSnippet, diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts index 15e22f7e272..17eacd1e6cf 100644 --- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -59,6 +59,8 @@ export default async ({ presets, typescriptOptions, modern, + previewCsfV3, + modernInlineRender, }: Options & Record): Promise => { const envs = await presets.apply>('env'); const logLevel = await presets.apply('logLevel', undefined); @@ -153,6 +155,8 @@ export default async ({ globals: { LOGLEVEL: logLevel, FRAMEWORK_OPTIONS: frameworkOptions, + PREVIEW_CSF_V3: previewCsfV3, + MODERN_INLINE_RENDER: modernInlineRender, }, headHtmlSnippet, bodyHtmlSnippet, diff --git a/lib/client-api/src/types.ts b/lib/client-api/src/types.ts index 131a6c30e02..c8780feb90e 100644 --- a/lib/client-api/src/types.ts +++ b/lib/client-api/src/types.ts @@ -113,6 +113,7 @@ export type RenderContextWithoutStoryContext = StoreItem & { showMain: () => void; showError: (error: { title: string; description: string }) => void; showException: (err: Error) => void; + targetDOMNode?: ReturnType; }; export type RenderContext = RenderContextWithoutStoryContext & { diff --git a/lib/components/src/bar/button.tsx b/lib/components/src/bar/button.tsx index b6474d53b84..a79b7afce8c 100644 --- a/lib/components/src/bar/button.tsx +++ b/lib/components/src/bar/button.tsx @@ -84,6 +84,7 @@ export const IconButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid color: 'inherit', padding: 0, cursor: 'pointer', + boxSizing: 'border-box', // Icon Buttons may have text depending on user preferences. // While we don't recommend having text for IconButtons, this style ensures that the text is the correct size. diff --git a/lib/core-client/src/manager/index.ts b/lib/core-client/src/manager/index.ts index b7672817eac..15ec76ee68e 100644 --- a/lib/core-client/src/manager/index.ts +++ b/lib/core-client/src/manager/index.ts @@ -6,6 +6,6 @@ import { importPolyfills } from './conditional-polyfills'; const { document } = global; importPolyfills().then(() => { - const rootEl = document.getElementById('root'); - renderStorybookUI(rootEl, new Provider()); + const rootElement = document.getElementById('root'); + renderStorybookUI(rootElement, new Provider()); }); diff --git a/lib/core-client/src/preview/StoryRenderer.tsx b/lib/core-client/src/preview/StoryRenderer.tsx index d76b7fa0993..fbb861d31f3 100644 --- a/lib/core-client/src/preview/StoryRenderer.tsx +++ b/lib/core-client/src/preview/StoryRenderer.tsx @@ -46,6 +46,8 @@ const ansiConverter = new AnsiToHtml({ * It is very much concerned with drawing to the screen and will do things like change classes * on the body etc. */ + +const cache: Record = {}; export class StoryRenderer { render: RenderStoryFunction; @@ -80,6 +82,11 @@ export class StoryRenderer { this.channel.on(Events.STORY_ARGS_UPDATED, () => this.forceReRender()); this.channel.on(Events.GLOBALS_UPDATED, () => this.forceReRender()); this.channel.on(Events.FORCE_RE_RENDER, () => this.forceReRender()); + this.channel.on(Events.DOCS_TARGETTED_RENDER, (data) => { + setTimeout(() => { + this.renderDocsStoryOutOfContext(data); + }, 1); + }); } } @@ -87,6 +94,62 @@ export class StoryRenderer { this.renderCurrentStory(true); } + async renderDocsStoryOutOfContext({ id, identifier, name }: Record) { + // TODO, the channel seems to invoke this twice + if (cache[id]) { + return; + } + cache[id] = true; + + const targetDOMNode = document.getElementById(identifier); + + if (!targetDOMNode) { + cache[id] = false; + return; + } + + const { + metadata, + context, + }: { + metadata: RenderMetadata; + context: RenderContextWithoutStoryContext; + } = this.getStoryMetadataAndContext(this.storyStore, id, 'docs', false); + + const { getDecorated } = metadata; + + if (getDecorated) { + try { + const { applyLoaders, unboundStoryFn } = context; + console.time(`applyLoaders_${id}`); + const storyContext = await applyLoaders(); + console.timeEnd(`applyLoaders_${id}`); + const storyFn = () => unboundStoryFn(storyContext); + + if (targetDOMNode.querySelector('[data-is-loadering-indicator="true"')) { + targetDOMNode.querySelector('[data-is-loadering-indicator="true"').remove(); + } + + console.time(`render_${id}`); + await this.render({ + ...context, + storyContext, + storyFn, + forceRender: true, + targetDOMNode, + }); + console.timeEnd(`render_${id}`); + + this.channel.emit(Events.STORY_RENDERED, id); + } catch (err) { + this.renderException(err); + } + } else { + console.error('could not find story to render', { id, name }); + } + cache[id] = false; + } + async renderCurrentStory(forceRender: boolean) { const { storyStore } = this; @@ -98,6 +161,23 @@ export class StoryRenderer { const { storyId, viewMode: urlViewMode } = storyStore.getSelection() || {}; + const { + metadata, + context, + }: { + metadata: RenderMetadata; + context: RenderContextWithoutStoryContext; + } = this.getStoryMetadataAndContext(storyStore, storyId, urlViewMode, forceRender); + + await this.renderStoryIfChanged({ metadata, context }); + } + + private getStoryMetadataAndContext( + storyStore: StoryStore, + storyId: string, + urlViewMode: string, + forceRender: boolean + ) { const data = storyStore.fromId(storyId); const { kind, id, parameters = {}, getDecorated } = data || {}; const { docsOnly, layout } = parameters; @@ -105,14 +185,14 @@ export class StoryRenderer { const metadata: RenderMetadata = { id, kind, - viewMode: docsOnly ? 'docs' : urlViewMode, + viewMode: (docsOnly ? 'docs' : urlViewMode) as RenderMetadata['viewMode'], getDecorated, }; this.applyLayout(metadata.viewMode === 'docs' ? 'fullscreen' : layout); const context: RenderContextWithoutStoryContext = { - id: storyId, // <- in case data is null, at least we'll know what we tried to render + id: storyId, ...data, forceRender, showMain: () => this.showMain(), @@ -120,8 +200,7 @@ export class StoryRenderer { this.renderError({ title, description }), showException: (err: Error) => this.renderException(err), }; - - await this.renderStoryIfChanged({ metadata, context }); + return { metadata, context }; } async renderStoryIfChanged({ @@ -161,6 +240,7 @@ export class StoryRenderer { case 'docs': if (kindChanged || viewModeChanged) { this.storyStore.cleanHooksForKind(previousMetadata.kind); + // debugger; ReactDOM.unmountComponentAtNode(document.getElementById('docs-root')); } break; @@ -168,6 +248,7 @@ export class StoryRenderer { default: if (previousMetadata && (storyChanged || viewModeChanged)) { this.storyStore.cleanHooks(previousMetadata.id); + // debugger; ReactDOM.unmountComponentAtNode(document.getElementById('root')); } } @@ -312,12 +393,14 @@ export class StoryRenderer { throw new Error('No `docs.container` set, did you run `addon-docs/preset`?'); } + // console.log('renderDocs', { context }); + const DocsContainer = docs.container || (({ children }: { children: Element }) => <>{children}); const Page = docs.page || NoDocs; // Docs context includes the storyStore. Probably it would be better if it didn't but that can be fixed in a later refactor ReactDOM.render( - + , document.getElementById('docs-root'), diff --git a/lib/core-common/src/types.ts b/lib/core-common/src/types.ts index b53ce4ea858..59ab5dcb2b0 100644 --- a/lib/core-common/src/types.ts +++ b/lib/core-common/src/types.ts @@ -156,6 +156,7 @@ export interface BuilderOptions { configDir: string; docsMode: boolean; previewCsfV3?: boolean; + modernInlineRender?: boolean; versionCheck?: VersionCheck; releaseNotesData?: ReleaseNotesData; disableWebpackDefaults?: boolean; @@ -251,6 +252,11 @@ export interface StorybookConfig { * Activate preview of CSF v3.0 */ previewCsfV3?: boolean; + + /** + * Activate modern inline rendering + */ + modernInlineRender?: boolean; }; /** * Tells Storybook where to find stories. diff --git a/lib/core-events/src/index.ts b/lib/core-events/src/index.ts index bf7850305b4..cbc17d4a583 100644 --- a/lib/core-events/src/index.ts +++ b/lib/core-events/src/index.ts @@ -34,6 +34,8 @@ enum events { STORIES_COLLAPSE_ALL = 'storiesCollapseAll', STORIES_EXPAND_ALL = 'storiesExpandAll', DOCS_RENDERED = 'docsRendered', + DOCS_TARGETTED_RENDER = 'docsTargettedRender', + DOCS_TARGETTED_DESTROY = 'docsTargettedRender', SHARED_STATE_CHANGED = 'sharedStateChanged', SHARED_STATE_SET = 'sharedStateSet', NAVIGATE_URL = 'navigateUrl', @@ -68,6 +70,8 @@ export const { STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL, DOCS_RENDERED, + DOCS_TARGETTED_RENDER, + DOCS_TARGETTED_DESTROY, SHARED_STATE_CHANGED, SHARED_STATE_SET, NAVIGATE_URL, diff --git a/lib/core-server/src/build-dev.ts b/lib/core-server/src/build-dev.ts index e205e8ad2ea..a393a07cb07 100644 --- a/lib/core-server/src/build-dev.ts +++ b/lib/core-server/src/build-dev.ts @@ -79,6 +79,7 @@ export async function buildDevStandalone(options: CLIOptions & LoadOptions & Bui ...options, presets, previewCsfV3: features?.previewCsfV3, + modernInlineRender: features?.modernInlineRender, }; const { address, networkAddress, managerResult, previewResult } = await storybookDevServer( diff --git a/lib/core-server/src/build-static.ts b/lib/core-server/src/build-static.ts index 4f38bdf0d57..c0da50f89ed 100644 --- a/lib/core-server/src/build-static.ts +++ b/lib/core-server/src/build-static.ts @@ -80,6 +80,7 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions & ...options, presets, previewCsfV3: features?.previewCsfV3, + modernInlineRender: features?.modernInlineRender, }; const core = await presets.apply<{ builder?: string }>('core');