diff --git a/packages/react-native/scripts/__snapshots__/generate.test.js.snap b/packages/react-native/scripts/__snapshots__/generate.test.js.snap index 0cfcd257e8..3d4908d9a1 100644 --- a/packages/react-native/scripts/__snapshots__/generate.test.js.snap +++ b/packages/react-native/scripts/__snapshots__/generate.test.js.snap @@ -219,3 +219,53 @@ import "@storybook/addon-ondevice-actions/register"; export const view = global.view; " `; + +exports[`loader writeRequires when using js writes the story imports without types 1`] = ` +" + /* do not change this file, it is auto generated by storybook. */ + + import { start, prepareStories, getProjectAnnotations } from '@storybook/react-native'; + + import "@storybook/addon-ondevice-notes/register"; +import "@storybook/addon-ondevice-controls/register"; +import "@storybook/addon-ondevice-backgrounds/register"; +import "@storybook/addon-ondevice-actions/register"; + + const normalizedStories = [{ + titlePrefix: "", + directory: "./scripts/mocks/all-config-files", + files: "FakeStory.stories.tsx", + importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/, + + req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/) + }]; + + + + const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')]; + + global.STORIES = normalizedStories; + + + 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) => importMap[importPath], + }); + + global.view._preview.onGetProjectAnnotationsChanged({ + getProjectAnnotations: getProjectAnnotations(global.view, annotations), + }); + } + + export const view = global.view; +" +`; diff --git a/packages/react-native/scripts/generate.js b/packages/react-native/scripts/generate.js index 88732c09b5..67656ba74f 100644 --- a/packages/react-native/scripts/generate.js +++ b/packages/react-native/scripts/generate.js @@ -41,7 +41,7 @@ function generate({ configPath, absolute = false, useJs = false }) { directory: "${specifier.directory}", files: "${specifier.files}", importPathMatcher: /${reg.source}/, - // @ts-ignore + ${useJs ? '' : '// @ts-ignore'} req: require.context('${pathToStory}', ${r}, ${m}) }`; }); @@ -81,7 +81,7 @@ function generate({ configPath, absolute = false, useJs = false }) { global.STORIES = normalizedStories; - // @ts-ignore + ${useJs ? '' : '// @ts-ignore'} module?.hot?.accept?.(); if (!global.view) { @@ -93,7 +93,7 @@ function generate({ configPath, absolute = false, useJs = false }) { const { importMap } = prepareStories({ storyEntries: normalizedStories }); global.view._preview.onStoriesChanged({ - importFn: async (importPath: string) => importMap[importPath], + importFn: async (importPath${useJs ? '' : ': string'}) => importMap[importPath], }); global.view._preview.onGetProjectAnnotationsChanged({ diff --git a/packages/react-native/scripts/generate.test.js b/packages/react-native/scripts/generate.test.js index 46ea28cef5..03747101c1 100644 --- a/packages/react-native/scripts/generate.test.js +++ b/packages/react-native/scripts/generate.test.js @@ -30,6 +30,16 @@ describe('loader', () => { }); }); + describe('when using js', () => { + it('writes the story imports without types', () => { + generate({ configPath: 'scripts/mocks/all-config-files', useJs: true }); + expect(pathMock).toEqual( + path.resolve(__dirname, 'mocks/all-config-files/storybook.requires.js') + ); + expect(fileContentMock).toMatchSnapshot(); + }); + }); + describe('when there are different file extensions', () => { it('writes the story imports', () => { generate({ configPath: 'scripts/mocks/file-extensions' });