Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
MinskLeo opened this issue May 6, 2022 · 3 comments

Comments

@MinskLeo
Copy link

MinskLeo commented May 6, 2022

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
Copy link
Author

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()];
         }

@MinskLeo MinskLeo changed the title Update template: return required files from the loadStories() function React Native CSF support: update template, return required files from the loadStories() function May 10, 2022
@elderfo
Copy link
Owner

elderfo commented May 10, 2022

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
Copy link

any update on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants