React Native CSF support: update template, return required files from the loadStories() function

[MinskLeo]

What issue about? Asking for modifying template to return from the loadStories() function array of required files.

Motivation? For adding support for CSF format of stories. Here is an official example of RN application with CSF support. For achieving this need to pass a function that will return array of required story files.

I tried to add a separate branch and after open a PR, but I don't have access, so I'm opening an issue.

Note: Seems like there will be no troubles with changing function signature and backward compatibility, legacy storiesOf() will continue to work, but maybe someone else have some thoughts about it.

Example:

function loadStories() {
  return [
    require('../file1'),
    require('../sub/file2'),
    require('../../parent/file3'),
    require('./sub/file4'),
    require('./sub/sub/file5'),
  ];
}

[MinskLeo]

For everyone wondering how to better fix this issue until maintainer('s) will fix this: use patch-package and make a patch with such name and content: YOUR_PROJECT_ROOT/patches/react-native-storybook-loader+2.0.5.patch

diff --git a/node_modules/react-native-storybook-loader/out/template.js b/node_modules/react-native-storybook-loader/out/template.js
index 2b78d94..f96e030 100644
--- a/node_modules/react-native-storybook-loader/out/template.js
+++ b/node_modules/react-native-storybook-loader/out/template.js
@@ -65,7 +65,7 @@ exports.generateTemplate = function (loader) { return __awaiter(void 0, void 0,
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
-                template = "// Auto-generated file created by react-native-storybook-loader\n  // Do not edit.\n  //\n  // https://github.com/elderfo/react-native-storybook-loader.git\n  \n  function loadStories() {\n  " + formatter(loader.storyFiles, function (file) { return "require('" + file + "');"; }, '\n') + "\n  }\n  \n  const stories = [\n  " + formatter(loader.storyFiles, function (file) { return "'" + file + "'"; }, ',\n') + "\n  ];\n  \n  module.exports = {\n    loadStories,\n    stories,\n  };\n  ";
+                template = "// Auto-generated file created by react-native-storybook-loader\n  // Do not edit.\n  //\n  // https://github.com/elderfo/react-native-storybook-loader.git\n  \n  function loadStories() {\n  return [\n  " + formatter(loader.storyFiles, function (file) { return "require('" + file + "'),"; }, '\n') + "];\n  }\n  \n  const stories = [\n  " + formatter(loader.storyFiles, function (file) { return "'" + file + "'"; }, ',\n') + "\n  ];\n  \n  module.exports = {\n    loadStories,\n    stories,\n  };\n  ";
                 return [4 /*yield*/, makePrettier(template)];
             case 1: return [2 /*return*/, _a.sent()];
         }

[elderfo]

Hi @MinskLeo. To submit a PR, you will have to fork the repo and make the changes in the fork. Then you can create a PR back to this repo.

[xiongemi]

any update on this?