Maybe easier swap between SB index and normal index root

[Grohden]

Thx for SB in RN, its really amazing!

I've been setting it up in an existing project (non expo), and, like some people, I'm trying to make it easier to swap what I'm bundling (while not accidentally shipping SB stories in my app)

After reading the linked blog posts, I came up with this idea and I think it might be worth mentioning it for discussion.

Our whole problem is that we need metro to pick a different entry file, but our nice friends at metro don't expose an option for that... However, we can explore a trick I've learned using detox: we can trick metro into picking a more specific file extension using the assetsExts field. Here's how my metro.config file looks like:

const { getDefaultConfig } = require('metro-config');

module.exports = async () => {
  const { resolver: { sourceExts, assetExts },  } = await getDefaultConfig();

  if (process.env. STORYBOOK_ENABLED) {
    return {
      transformer: {
        getTransformOptions: async () => ({
          transform: {
            experimentalImportSupport: false,
            inlineRequires: false,
          },
        }),
      },
      resolver: {
        resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'],
        // We do a little bit of tomfoolery and pick *.storybook.js instead of *.js files (if available)
        //  (this is how metro 'prefers' .android.js or .ios.js files)
        sourceExts: ['storybook.js'].concat(sourceExts),
      },
    };
  }

  return {
    // ... your standard configs
  };
};

With that, I can just add a index.storybook.js file + the needed env flag (STORYBOOK_ENABLED), then metro will pick the right root entry for me :D (btw, If I already have a index.android.js or index.ios.js I just need to add another level of indirection)

So, is that an idea to be considered? (cc @dannyhw since u wrote the blog post)

Btw, about the blog post I had problems with:

• import aliases (which I could solve with some babel.config.js file)
• due to that ^ fix I also had problems with components (in src) importing libs (from node modules) from the wrong path
• I also had to create a tsconfig extending the root so that ts recognized aliases

All of that was solved with the described approach since I'm not using metro/index inside another folder

[dannyhw]

Hey, yes I actually made a video about this before based on a comment I received on the blog post I wrote. It's totally doable to use the source extensions config option.

I was planning to add it in written form to the blog but didn't get around to it

https://youtu.be/t9yPiDeLc0E

Maybe you can write up your findings in a blog post?