Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/next' into feat/v8
Browse files Browse the repository at this point in the history
  • Loading branch information
@dannyhw
dannyhw committed Mar 7, 2024
2 parents 1865884 + 4864c24 commit 0d5e5b6
Show file tree
Hide file tree
Showing 7 changed files with 254 additions and 76 deletions.
47 changes: 37 additions & 10 deletions examples/expo-example/.storybook/storybook.requires.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
/* do not change this file, it is auto generated by storybook. */

import { start } from "@storybook/react-native";
import {
start,
prepareStories,
getProjectAnnotations,
} from "@storybook/react-native";

import "@storybook/addon-ondevice-notes/register";
import "@storybook/addon-ondevice-controls/register";
Expand Down Expand Up @@ -36,14 +40,37 @@ const normalizedStories = [
},
];

// @ts-ignore
declare global {
var view: ReturnType<typeof start>;
var STORIES: typeof normalizedStories;
}

const annotations = [
require("./preview"),
require("@storybook/react-native/dist/preview"),
require("@storybook/addon-actions/preview"),
];

global.STORIES = normalizedStories;

export const view = start({
annotations: [
require("./preview"),
require("@storybook/react-native/dist/preview"),
require("@storybook/addon-actions/preview"),
],
storyEntries: normalizedStories,
});
// @ts-ignore
module?.hot?.accept?.();

if (!global.view) {
global.view = start({
annotations,
storyEntries: normalizedStories,
});
} else {
const { importMap } = prepareStories({ storyEntries: normalizedStories });

global.view._preview.onStoriesChanged({
importFn: async (importPath: string) => importMap[importPath],
});

global.view._preview.onGetProjectAnnotationsChanged({
getProjectAnnotations: getProjectAnnotations(global.view, annotations),
});
}

export const view = global.view;
4 changes: 2 additions & 2 deletions examples/expo-example/components/ControlExamples/Color/Color.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import { ColorValue, StyleSheet, Text, View } from 'react-native';
import { StyleSheet, Text, View } from 'react-native';

interface ButtonProps {
color: ColorValue;
color: string;
}

const styles = StyleSheet.create({
Expand Down
172 changes: 136 additions & 36 deletions packages/react-native/scripts/__snapshots__/generate.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
exports[`loader writeRequires when there are different file extensions writes the story imports 1`] = `
"
/* do not change this file, it is auto generated by storybook. */
import { start } from '@storybook/react-native';
import { start, prepareStories, getProjectAnnotations } from '@storybook/react-native';
import "@storybook/addon-ondevice-notes/register";
import "@storybook/addon-ondevice-controls/register";
Expand All @@ -18,23 +18,48 @@ import "@storybook/addon-ondevice-actions/register";
importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
// @ts-ignore
req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
}]
}];
// @ts-ignore
global.STORIES = normalizedStories;
declare global {
var view: ReturnType<typeof start>;
var STORIES: typeof normalizedStories;
}
const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
export const view = start({
annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
storyEntries: normalizedStories
});
global.STORIES = normalizedStories;
// @ts-ignore
module?.hot?.accept?.();
if (!global.view) {
global.view = start({
annotations,
storyEntries: normalizedStories
});
} else {
const { importMap } = prepareStories({ storyEntries: normalizedStories });
global.view._preview.onStoriesChanged({
importFn: async (importPath: string) => importMap[importPath],
});
global.view._preview.onGetProjectAnnotationsChanged({
getProjectAnnotations: getProjectAnnotations(global.view, annotations),
});
}
export const view = global.view;
"
`;

exports[`loader writeRequires when there is a configuration object writes the story imports 1`] = `
"
/* do not change this file, it is auto generated by storybook. */
import { start } from '@storybook/react-native';
import { start, prepareStories, getProjectAnnotations } from '@storybook/react-native';
import "@storybook/addon-ondevice-notes/register";
import "@storybook/addon-ondevice-controls/register";
Expand All @@ -48,23 +73,48 @@ import "@storybook/addon-ondevice-actions/register";
importPathMatcher: /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/,
// @ts-ignore
req: require.context('./components', true, /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/)
}]
}];
// @ts-ignore
global.STORIES = normalizedStories;
declare global {
var view: ReturnType<typeof start>;
var STORIES: typeof normalizedStories;
}
const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
export const view = start({
annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
storyEntries: normalizedStories
});
global.STORIES = normalizedStories;
// @ts-ignore
module?.hot?.accept?.();
if (!global.view) {
global.view = start({
annotations,
storyEntries: normalizedStories
});
} else {
const { importMap } = prepareStories({ storyEntries: normalizedStories });
global.view._preview.onStoriesChanged({
importFn: async (importPath: string) => importMap[importPath],
});
global.view._preview.onGetProjectAnnotationsChanged({
getProjectAnnotations: getProjectAnnotations(global.view, annotations),
});
}
export const view = global.view;
"
`;

exports[`loader writeRequires when there is a story glob writes the story imports 1`] = `
"
/* do not change this file, it is auto generated by storybook. */
import { start } from '@storybook/react-native';
import { start, prepareStories, getProjectAnnotations } from '@storybook/react-native';
import "@storybook/addon-ondevice-notes/register";
import "@storybook/addon-ondevice-controls/register";
Expand All @@ -78,23 +128,48 @@ import "@storybook/addon-ondevice-actions/register";
importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
// @ts-ignore
req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
}]
}];
// @ts-ignore
global.STORIES = normalizedStories;
declare global {
var view: ReturnType<typeof start>;
var STORIES: typeof normalizedStories;
}
const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
export const view = start({
annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
storyEntries: normalizedStories
});
global.STORIES = normalizedStories;
// @ts-ignore
module?.hot?.accept?.();
if (!global.view) {
global.view = start({
annotations,
storyEntries: normalizedStories
});
} else {
const { importMap } = prepareStories({ storyEntries: normalizedStories });
global.view._preview.onStoriesChanged({
importFn: async (importPath: string) => importMap[importPath],
});
global.view._preview.onGetProjectAnnotationsChanged({
getProjectAnnotations: getProjectAnnotations(global.view, annotations),
});
}
export const view = global.view;
"
`;

exports[`loader writeRequires when there is no preview does not add preview related stuff 1`] = `
"
/* do not change this file, it is auto generated by storybook. */
import { start } from '@storybook/react-native';
import { start, prepareStories, getProjectAnnotations } from '@storybook/react-native';
import "@storybook/addon-ondevice-notes/register";
import "@storybook/addon-ondevice-controls/register";
Expand All @@ -108,14 +183,39 @@ import "@storybook/addon-ondevice-actions/register";
importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
// @ts-ignore
req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
}]
}];
// @ts-ignore
global.STORIES = normalizedStories;
declare global {
var view: ReturnType<typeof start>;
var STORIES: typeof normalizedStories;
}
const annotations = [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
export const view = start({
annotations: [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
storyEntries: normalizedStories
});
global.STORIES = normalizedStories;
// @ts-ignore
module?.hot?.accept?.();
if (!global.view) {
global.view = start({
annotations,
storyEntries: normalizedStories
});
} else {
const { importMap } = prepareStories({ storyEntries: normalizedStories });
global.view._preview.onStoriesChanged({
importFn: async (importPath: string) => importMap[importPath],
});
global.view._preview.onGetProjectAnnotationsChanged({
getProjectAnnotations: getProjectAnnotations(global.view, annotations),
});
}
export const view = global.view;
"
`;
60 changes: 37 additions & 23 deletions packages/react-native/scripts/generate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,25 +59,52 @@ function generate({ configPath, absolute = false, useJs = false }) {

const annotations = `[${previewExists ? "require('./preview')," : ''}${doctools}, ${enhancer}]`;

const globalTypes = `
declare global {
var view: ReturnType<typeof start>;
var STORIES: typeof normalizedStories;
}
`;

const fileContent = `
/* do not change this file, it is auto generated by storybook. */
import { start } from '@storybook/react-native';
import { start, prepareStories, getProjectAnnotations } from '@storybook/react-native';
${registerAddons}
const normalizedStories = [${normalizedStories.join(',')}]
const normalizedStories = [${normalizedStories.join(',')}];
// @ts-ignore
global.STORIES = normalizedStories;
${useJs ? '' : globalTypes}
export const view = start({
annotations: ${annotations},
storyEntries: normalizedStories
});
const annotations = ${annotations};
global.STORIES = normalizedStories;
// @ts-ignore
module?.hot?.accept?.();
if (!global.view) {
global.view = start({
annotations,
storyEntries: normalizedStories
});
} else {
const { importMap } = prepareStories({ storyEntries: normalizedStories });
global.view._preview.onStoriesChanged({
importFn: async (importPath: string) => importMap[importPath],
});
global.view._preview.onGetProjectAnnotationsChanged({
getProjectAnnotations: getProjectAnnotations(global.view, annotations),
});
}
export const view = global.view;
`;

const formattedFileContent = prettier.format(fileContent, { parser: 'babel' });
const formattedFileContent = prettier.format(fileContent, { parser: 'babel-ts' });

fs.writeFileSync(storybookRequiresLocation, formattedFileContent, {
encoding: 'utf8',
Expand All @@ -88,16 +115,3 @@ function generate({ configPath, absolute = false, useJs = false }) {
module.exports = {
generate,
};

// TODO evaluate if this is needed
// if (import.meta.webpackHot) {
// import.meta.webpackHot.accept('./{{storiesFilename}}', () => {
// // importFn has changed so we need to patch the new one in
// preview.onStoriesChanged({ importFn });
// });

// import.meta.webpackHot.accept([{{#each previewAnnotations}}'{{this}}',{{/each}}], () => {
// // getProjectAnnotations has changed so we need to patch the new one in
// preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
// });
// }
Loading

0 comments on commit 0d5e5b6

Please sign in to comment.