Merge pull request #1508 from belemaire/explode-generate-composite

Refactor generateComposite

ern-composite-gen/src/addRNDepToPjson.ts

@@ -0,0 +1,7 @@
+import { readPackageJson, writePackageJson } from 'ern-core'
+
+export async function addRNDepToPjson(dir: string, version: string) {
+  const compositePackageJson = await readPackageJson(dir)
+  compositePackageJson.dependencies['react-native'] = version
+  return writePackageJson(dir, compositePackageJson)
+}

ern-composite-gen/src/addRNStartScriptToPjson.ts

@@ -0,0 +1,9 @@
+import { readPackageJson, writePackageJson } from 'ern-core'
+
+export async function addRNStartScriptToPjson({ cwd }: { cwd: string }) {
+  const packageJson = await readPackageJson(cwd)
+  packageJson.scripts = packageJson.scripts ?? {}
+  packageJson.scripts.start =
+    'node node_modules/react-native/local-cli/cli.js start'
+  await writePackageJson(cwd, packageJson)
+}

ern-composite-gen/src/applyYarnResolutions.ts

@@ -0,0 +1,21 @@
+import { log, readPackageJson, shell, writePackageJson, yarn } from 'ern-core'
+
+export async function applyYarnResolutions({
+  cwd,
+  resolutions,
+}: {
+  cwd: string
+  resolutions: { [pkg: string]: string }
+}) {
+  log.debug('Adding yarn resolutions to package.json')
+  log.trace(`resolutions : ${JSON.stringify(resolutions, null, 2)}`)
+  const compositePackageJson = await readPackageJson(cwd)
+  compositePackageJson.resolutions = resolutions
+  await writePackageJson(cwd, compositePackageJson)
+  try {
+    shell.pushd(cwd)
+    await yarn.install()
+  } finally {
+    shell.popd()
+  }
+}

ern-composite-gen/src/createBabelRc.ts

@@ -0,0 +1,111 @@
+import fs from 'fs-extra'
+import path from 'path'
+import uuidv4 from 'uuid/v4'
+import semver from 'semver'
+import { log, readPackageJson, writePackageJson } from 'ern-core'
+import { getNodeModuleVersion } from './getNodeModuleVersion'
+
+export async function createBabelRc({ cwd }: { cwd: string }) {
+  log.debug('Creating top level composite .babelrc')
+  const compositePackageJson = await readPackageJson(cwd)
+  const compositeNodeModulesPath = path.join(cwd, 'node_modules')
+  const compositeReactNativeVersion = await getNodeModuleVersion({
+    cwd,
+    name: 'react-native',
+  })
+
+  const compositeBabelRc: { plugins: any[]; presets?: string[] } = {
+    plugins: [],
+  }
+
+  // Ugly hacky way of handling module-resolver babel plugin
+  // At least it has some guarantees to make it safer but its just a temporary
+  // solution until we figure out a more proper way of handling this plugin
+  log.debug(
+    'Taking care of potential Babel module-resolver plugins used by MiniApps'
+  )
+  let moduleResolverAliases: { [k: string]: any } = {}
+  for (const dependency of Object.keys(compositePackageJson.dependencies)) {
+    const miniAppPackagePath = path.join(compositeNodeModulesPath, dependency)
+    let miniAppPackageJson
+    try {
+      miniAppPackageJson = await readPackageJson(miniAppPackagePath)
+    } catch (e) {
+      // swallow (for test. to be fixed)
+      continue
+    }
+    const miniAppName = miniAppPackageJson.name
+    if (miniAppPackageJson.babel) {
+      if (miniAppPackageJson.babel.plugins) {
+        for (const babelPlugin of miniAppPackageJson.babel.plugins) {
+          if (Array.isArray(babelPlugin)) {
+            if (babelPlugin.includes('module-resolver')) {
+              // Add unique name to this composite top level module-resolver to avoid
+              // it messing with other module-resolver plugin configurations that could
+              // be defined in the .babelrc config of individual MiniApps
+              // https://babeljs.io/docs/en/options#plugin-preset-merging
+              babelPlugin.push(uuidv4())
+              // Copy over module-resolver plugin & config to top level composite .babelrc
+              log.debug(
+                `Taking care of module-resolver Babel plugin for ${miniAppName} MiniApp`
+              )
+              if (compositeBabelRc.plugins.length === 0) {
+                // First MiniApp to add module-resolver plugin & config
+                // easy enough, we just copy over the plugin & config
+                compositeBabelRc.plugins.push(<any>babelPlugin)
+                for (const x of babelPlugin) {
+                  if (x instanceof Object && x.alias) {
+                    moduleResolverAliases = x.alias
+                    break
+                  }
+                }
+              } else {
+                // Another MiniApp  has already declared module-resolver
+                // plugin & config. If we have conflicts for aliases, we'll just abort
+                // bundling as of now to avoid generating a potentially unstable bundle
+                for (const item of babelPlugin) {
+                  if (item instanceof Object && item.alias) {
+                    for (const aliasKey of Object.keys(item.alias)) {
+                      if (
+                        moduleResolverAliases[aliasKey] &&
+                        moduleResolverAliases[aliasKey] !== item.alias[aliasKey]
+                      ) {
+                        throw new Error('Babel module-resolver alias conflict')
+                      } else if (!moduleResolverAliases[aliasKey]) {
+                        moduleResolverAliases[aliasKey] = item.alias[aliasKey]
+                      }
+                    }
+                  }
+                }
+              }
+            } else {
+              log.warn(
+                `Unsupported Babel plugin type ${babelPlugin.toString()} in ${miniAppName} MiniApp`
+              )
+            }
+          } else {
+            log.warn(
+              `Unsupported Babel plugin type ${babelPlugin.toString()} in ${miniAppName} MiniApp`
+            )
+          }
+        }
+      }
+      log.debug(
+        `Removing babel object from ${miniAppName} MiniApp package.json`
+      )
+      delete miniAppPackageJson.babel
+      await writePackageJson(miniAppPackagePath, miniAppPackageJson)
+    }
+  }
+
+  if (semver.gte(compositeReactNativeVersion, '0.57.0')) {
+    compositeBabelRc.presets = ['module:metro-react-native-babel-preset']
+  } else {
+    compositeBabelRc.presets = ['react-native']
+  }
+
+  return fs.writeFile(
+    path.join(cwd, '.babelrc'),
+    JSON.stringify(compositeBabelRc, null, 2)
+  )
+}

ern-composite-gen/src/createBaseCompositeImports.ts

@@ -0,0 +1,16 @@
+import fs from 'fs-extra'
+import path from 'path'
+import { readPackageJson } from 'ern-core'
+
+export async function createBaseCompositeImports({ cwd }: { cwd: string }) {
+  let content = ''
+
+  const dependencies: string[] = []
+  const compositePackageJson = await readPackageJson(cwd)
+  for (const dependency of Object.keys(compositePackageJson.dependencies)) {
+    content += `import '${dependency}'\n`
+    dependencies.push(dependency)
+  }
+
+  await fs.writeFile(path.join(cwd, 'composite-imports.js'), content)
+}

ern-composite-gen/src/createIndexJs.ts

@@ -0,0 +1,22 @@
+import path from 'path'
+import fs from 'fs-extra'
+import { readPackageJson } from 'ern-core'
+
+export async function createIndexJs({ cwd }: { cwd: string }) {
+  let entryIndexJsContent = ''
+
+  const dependencies: string[] = []
+  const compositePackageJson = await readPackageJson(cwd)
+  for (const dependency of Object.keys(compositePackageJson.dependencies)) {
+    entryIndexJsContent += `import '${dependency}'\n`
+    dependencies.push(dependency)
+  }
+
+  await fs.writeFile(path.join(cwd, 'index.js'), entryIndexJsContent)
+  // Still also generate index.android.js and index.ios.js for backward compatibility with
+  // Container generated with Electrode Native < 0.33.0, as these Containers are still
+  // looking for these files.
+  // TO BE REMOVED IN 0.40.0
+  await fs.writeFile(path.join(cwd, 'index.ios.js'), entryIndexJsContent)
+  await fs.writeFile(path.join(cwd, 'index.android.js'), entryIndexJsContent)
+}

ern-composite-gen/src/createMetroConfig.ts

@@ -0,0 +1,65 @@
+import fs from 'fs-extra'
+import path from 'path'
+
+export async function createMetroConfig({ cwd }: { cwd: string }) {
+  return fs.writeFile(
+    path.join(cwd, 'metro.config.js'),
+    `const blacklist = require('metro-config/src/defaults/blacklist');
+module.exports = {
+  resolver: {
+    sourceExts: ['jsx', 'js', 'ts', 'tsx', 'mjs'],
+    blacklistRE: blacklist([
+      // Ignore IntelliJ directories
+      /.*\\.idea\\/.*/,
+      // ignore git directories
+      /.*\\.git\\/.*/,
+      // Ignore android directories
+      /.*\\/app\\/build\\/.*/,
+    ]),
+    assetExts: [
+      // Image formats
+      "bmp",
+      "gif",
+      "jpg",
+      "jpeg",
+      "png",
+      "psd",
+      "svg",
+      "webp", 
+      // Video formats
+      "m4v",
+      "mov",
+      "mp4",
+      "mpeg",
+      "mpg",
+      "webm", 
+      // Audio formats
+      "aac",
+      "aiff",
+      "caf",
+      "m4a",
+      "mp3",
+      "wav", 
+      // Document formats
+      "html",
+      "pdf",
+      // Font formats
+      "otf",
+      "ttf", 
+      // Archives (virtual files)
+      "zip"
+    ]
+  },
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: false,
+      },
+    }),
+    assetPlugins: ['ern-bundle-store-metro-asset-plugin'],
+  },
+};
+`
+  )
+}

ern-composite-gen/src/createRNCliConfig.ts

@@ -0,0 +1,8 @@
+import fs from 'fs-extra'
+import path from 'path'
+
+export async function createRNCliConfig({ cwd }: { cwd: string }) {
+  const sourceExts =
+    "module.exports = { resolver: { sourceExts: ['jsx', 'js', 'ts', 'tsx', 'mjs'] } };"
+  await fs.writeFile(path.join(cwd, 'rn-cli.config.js'), sourceExts)
+}