react wrapper dynamic outdir

[brianchristopherbrady]

Summary

This PR introduces the ability to set dynamic output directories for the React wrappers generated by the custom-element-react-wrappers plugin. The implementation ensures backward compatibility by allowing the outDir property to accept both a static string and a dynamic function.

Changes

Core Changes

1. Dynamic outDir Handling:

   • Modified the outDir property in Options to accept either a static string or a function.
   • Updated the generateReactWrappers function to handle dynamic output directories.

2. Common Root Directory Calculation:

   • Added logic to determine the common root directory when dynamic paths are provided.
   • Ensured that the barrel file and utility files (ScopeProvider, react-utils) are output to this common root directory.

Detailed Changes

1. Updated Interfaces:

   • Updated the Options interface to support dynamic outDir.
   • Ensured backward compatibility with static string outDir.

2. Normalization of outDir:

   • Added a normalizeOutdir function to handle both string and function types for outDir.

3. Barrel File Generation:

   • Updated the logic in getManifestContentTemplate to correctly handle the export paths for ScopeProvider and other components based on the common root directory.
   • Ensured that ScopeProvider is always exported from the common root level.

4. Utility File Generation:

   • Adjusted paths for react-utils and ScopeProvider to ensure correct import paths based on the calculated common root directory.

Examples

Example 1: dynamic outDir

config:

    customElementReactWrapperPlugin({
    outdir: (className, tagName) => `./dist/react/${tagName}`,
    modulePath: (className, tagName) => `../../../${tagName}/${tagName}.js`,
    reactProps: true,
    scopedTags: true,
    ssrSafe: true
  }),

directory structure:

barrel:

dynamic imports:

Example 2: complex dynamic outDir

config:

    customElementReactWrapperPlugin({
      outdir: (className, tagName) => `./dist/react/components/${tagName}/component`,
      modulePath: (className, tagName) => `../../../${tagName}/${tagName}.js`,
      reactProps: true,
      scopedTags: true,
      ssrSafe: true
    }),

directory structure:

barrel:

dynamic imports:

Example 3: outDir as string

config:

    customElementReactWrapperPlugin({
      outdir: "./dist/react",
      modulePath: (className, tagName) => `../${tagName}/${tagName}.js`,
      reactProps: true,
      scopedTags: true,
      ssrSafe: true
    }),

directory structure:

barrel:

Example 4: default

config:

    customElementReactWrapperPlugin({
      modulePath: (className, tagName) => `../${tagName}/${tagName}.js`,
      reactProps: true,
      scopedTags: true,
      ssrSafe: true
    }),

directory structure:

barrel:

[break-stuff]

The challenge with this is that this would be an issue for non-component-specific components like ScopeContext. What you could do instead is export the generated file in an alternative directory.

For example, if your components are generated in a dist/react directory, you can create a file in an alternative direct and export the generated component.

// src/my-button//MyButton.js
export * from '../../dist/MyButton.js'