fix: types was included in the .js file output using the useJs op…

…tion in `sb-rn-get-stories` (#567)
storybookjs · Apr 17, 2024 · e64d644 · e64d644
1 parent b4f0b9b
commit e64d644
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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' });