react-native-bootsplash 6.0.0-beta.8 → 6.0.0

package/src/generate.ts

@@ -1,14 +1,11 @@
-import { getConfig as getExpoConfig } from "@expo/config";
 import * as Expo from "@expo/config-plugins";
-import { assignColorValue } from "@expo/config-plugins/build/android/Colors";
-import { addImports } from "@expo/config-plugins/build/android/codeMod";
-import { mergeContents } from "@expo/config-plugins/build/utils/generateCode";
 import plist from "@expo/plist";
 import { findProjectRoot } from "@react-native-community/cli-tools";
 import {
   AndroidProjectConfig,
   IOSProjectConfig,
 } from "@react-native-community/cli-types";
+import childProcess from "child_process";
 import crypto from "crypto";
 import detectIndent from "detect-indent";
 import fs from "fs-extra";
@@ -19,8 +16,10 @@ import { Options as PrettierOptions } from "prettier";
 import * as htmlPlugin from "prettier/plugins/html";
 import * as cssPlugin from "prettier/plugins/postcss";
 import * as prettier from "prettier/standalone";
+import semver from "semver";
 import sharp, { Sharp } from "sharp";
 import { dedent } from "ts-dedent";
+import util from "util";
 import formatXml, { XMLFormatterOptions } from "xml-formatter";
 import { Manifest } from ".";
 
@@ -40,6 +39,11 @@ type Color = {
   rgb: RGBColor;
 };
 
+const promisifiedExec = util.promisify(childProcess.exec);
+
+const exec = (cmd: string) =>
+  promisifiedExec(cmd).then(({ stdout, stderr }) => stdout || stderr);
+
 export const log = {
   error: (text: string) => {
     console.log(pc.red(`❌  ${text}`));
@@ -180,6 +184,25 @@ export const hfs = {
   },
 };
 
+export const getExpoConfig = (projectRoot: string): { isExpo: boolean } => {
+  try {
+    const pkg = hfs.json(
+      path.resolve(projectRoot, "node_modules", "expo", "package.json"),
+    ) as { version?: string };
+
+    const version = pkg.version;
+
+    if (version == null || semver.lt(version, "51.0.20")) {
+      log.error("Requires Expo 51.0.20 (or higher)");
+      process.exit(1);
+    }
+
+    return { isExpo: true };
+  } catch {
+    return { isExpo: false };
+  }
+};
+
 export const writeJson = (filePath: string, content: object) => {
   hfs.write(filePath, JSON.stringify(content, null, 2));
   log.write(filePath);
@@ -256,7 +279,7 @@ export const writeXmlLike = async (
   }
 };
 
-const cleanIOS = (dir: string) => {
+export const cleanIOSAssets = (dir: string) => {
   hfs
     .readDir(dir)
     .filter((file) => file === "Colors.xcassets" || file === "Images.xcassets")
@@ -458,10 +481,12 @@ const getIOSOutputPath = ({
   return iosOutputPath;
 };
 
-const getHtmlTemplatePath = ({
+const getHtmlTemplatePath = async ({
+  isExpo,
   html,
   platforms,
 }: {
+  isExpo: boolean;
   html: string;
   platforms: Platforms;
 }) => {
@@ -469,6 +494,24 @@ const getHtmlTemplatePath = ({
     return;
   }
 
+  if (isExpo) {
+    const htmlTemplatePath = path.resolve(workingPath, html);
+
+    const htmlTemplateRelativePath = path.relative(
+      workingPath,
+      htmlTemplatePath,
+    );
+
+    if (
+      htmlTemplateRelativePath === "public/index.html" &&
+      !hfs.exists(htmlTemplatePath)
+    ) {
+      const cmd = `npx expo customize ${htmlTemplateRelativePath}`;
+      console.log(pc.dim(`Running ${cmd}`));
+      await exec(cmd);
+    }
+  }
+
   const htmlTemplatePath = path.resolve(workingPath, html);
 
   if (!hfs.exists(htmlTemplatePath)) {
@@ -565,14 +608,9 @@ export const generate = async ({
   darkLogo?: string;
   darkBrand?: string;
 }) => {
-  const isExpo =
-    getExpoConfig(projectRoot, { skipSDKVersionRequirement: true }).exp
-      .sdkVersion != null;
+  const { isExpo } = getExpoConfig(workingPath);
 
-  const [nodeStringVersion = ""] = process.versions.node.split(".");
-  const nodeVersion = Number.parseInt(nodeStringVersion, 10);
-
-  if (!Number.isNaN(nodeVersion) && nodeVersion < 18) {
+  if (semver.lt(process.versions.node, "18.0.0")) {
     log.error("Requires Node 18 (or higher)");
     process.exit(1);
   }
@@ -687,7 +725,8 @@ export const generate = async ({
     platforms,
   });
 
-  const htmlTemplatePath = getHtmlTemplatePath({
+  const htmlTemplatePath = await getHtmlTemplatePath({
+    isExpo,
     html,
     platforms,
   });
@@ -849,10 +888,10 @@ export const generate = async ({
       ];
 
       const nextStyle = parseHtml(dedent`
-          <style name="BootTheme" parent="${parent}">
-            ${styleItems.join("\n")}
-          </style>
-        `);
+        <style name="BootTheme" parent="${parent}">
+          ${styleItems.join("\n")}
+        </style>
+      `);
 
       prevStyle?.remove(); // remove the existing style
       stylesXml.root.querySelector("resources")?.appendChild(nextStyle);
@@ -869,7 +908,7 @@ export const generate = async ({
     log.title("🍏", "iOS");
 
     hfs.ensureDir(iosOutputPath);
-    cleanIOS(iosOutputPath);
+    cleanIOSAssets(iosOutputPath);
 
     const storyboardPath = path.resolve(iosOutputPath, "BootSplash.storyboard");
 
@@ -1002,18 +1041,19 @@ export const generate = async ({
 
       const project = Expo.IOSConfig.XcodeUtils.getPbxproj(projectRoot);
       const projectName = path.basename(iosOutputPath);
+      const groupName = path.parse(xcodeProjectPath).name;
 
       Expo.IOSConfig.XcodeUtils.addResourceFileToGroup({
-        filepath: path.join(projectName, "BootSplash.storyboard"),
-        groupName: path.parse(xcodeProjectPath).name,
         project,
+        filepath: path.join(projectName, "BootSplash.storyboard"),
+        groupName,
         isBuildFile: true,
       });
 
       Expo.IOSConfig.XcodeUtils.addResourceFileToGroup({
-        filepath: path.join(projectName, "Colors.xcassets"),
-        groupName: path.parse(xcodeProjectPath).name,
         project,
+        filepath: path.join(projectName, "Colors.xcassets"),
+        groupName,
         isBuildFile: true,
       });
 
@@ -1170,345 +1210,3 @@ ${pc.blue("┗━━━━━━━━━━━━━━━━━━━━━━
     `\n💖  Thanks for using ${pc.underline("react-native-bootsplash")}`,
   );
 };
-
-type ExpoPlugin = Expo.ConfigPlugin<{
-  assetsDir?: string;
-  android?: {
-    parentTheme?: "TransparentStatus" | "EdgeToEdge";
-    darkContentBarsStyle?: boolean;
-  };
-}>;
-
-const withAndroidAssets: ExpoPlugin = (config, props) =>
-  Expo.withDangerousMod(config, [
-    "android",
-    (config) => {
-      const { assetsDir = "assets/bootsplash" } = props;
-      const { platformProjectRoot } = config.modRequest;
-
-      const srcDir = path.resolve(workingPath, assetsDir, "android");
-
-      const destDir = path.resolve(
-        platformProjectRoot,
-        "app",
-        "src",
-        "main",
-        "res",
-      );
-
-      for (const drawableDir of hfs.readDir(srcDir)) {
-        const srcDrawableDir = path.join(srcDir, drawableDir);
-        const destDrawableDir = path.join(destDir, drawableDir);
-
-        hfs.ensureDir(destDrawableDir);
-
-        for (const file of hfs.readDir(srcDrawableDir)) {
-          hfs.copy(
-            path.join(srcDrawableDir, file),
-            path.join(destDrawableDir, file),
-          );
-        }
-      }
-
-      return config;
-    },
-  ]);
-
-const withAndroidManifest: ExpoPlugin = (config) =>
-  Expo.withAndroidManifest(config, (config) => {
-    config.modResults.manifest.application?.forEach((application) => {
-      if (application.$["android:name"] === ".MainApplication") {
-        const { activity } = application;
-
-        activity?.forEach((activity) => {
-          if (activity.$["android:name"] === ".MainActivity") {
-            activity.$["android:theme"] = "@style/BootTheme";
-          }
-        });
-      }
-    });
-
-    return config;
-  });
-
-const withMainActivity: ExpoPlugin = (config) =>
-  Expo.withMainActivity(config, (config) => {
-    const { modResults } = config;
-    const { language } = modResults;
-
-    const withImports = addImports(
-      modResults.contents.replace(
-        /(\/\/ )?setTheme\(R\.style\.AppTheme\)/,
-        "// setTheme(R.style.AppTheme)",
-      ),
-      ["android.os.Bundle", "com.zoontek.rnbootsplash.RNBootSplash"],
-      language === "java",
-    );
-
-    // indented with 4 spaces
-    const withInit = mergeContents({
-      src: withImports,
-      comment: "    //",
-      tag: "bootsplash-init",
-      offset: 0,
-      anchor: /super\.onCreate\(null\)/,
-      newSrc:
-        "    RNBootSplash.init(this, R.style.BootTheme)" +
-        (language === "java" ? ";" : ""),
-    });
-
-    return {
-      ...config,
-      modResults: {
-        ...modResults,
-        contents: withInit.contents,
-      },
-    };
-  });
-
-const withAndroidStyles: ExpoPlugin = (config, props) =>
-  Expo.withAndroidStyles(config, async (config) => {
-    const { assetsDir = "assets/bootsplash", android = {} } = props;
-    const { parentTheme, darkContentBarsStyle } = android;
-
-    const { modResults } = config;
-    const { resources } = modResults;
-    const { style = [] } = resources;
-
-    const manifest = (await hfs.json(
-      path.resolve(workingPath, assetsDir, "manifest.json"),
-    )) as Manifest;
-
-    const item = [
-      {
-        $: { name: "postBootSplashTheme" },
-        _: "@style/AppTheme",
-      },
-      {
-        $: { name: "bootSplashBackground" },
-        _: "@color/bootsplash_background",
-      },
-      {
-        $: { name: "bootSplashLogo" },
-        _: "@drawable/bootsplash_logo",
-      },
-    ];
-
-    if (manifest.brand != null) {
-      item.push({
-        $: { name: "bootSplashBrand" },
-        _: "@drawable/bootsplash_brand",
-      });
-    }
-    if (darkContentBarsStyle != null) {
-      item.push({
-        $: { name: "darkContentBarsStyle" },
-        _: String(darkContentBarsStyle),
-      });
-    }
-
-    const withBootTheme = [
-      ...style.filter(({ $ }) => $.name !== "BootTheme"),
-      {
-        $: {
-          name: "BootTheme",
-          parent:
-            parentTheme === "TransparentStatus"
-              ? "Theme.BootSplash.TransparentStatus"
-              : parentTheme === "EdgeToEdge"
-                ? "Theme.BootSplash.EdgeToEdge"
-                : "Theme.BootSplash",
-        },
-        item,
-      },
-    ];
-
-    return {
-      ...config,
-      modResults: {
-        ...modResults,
-        resources: {
-          ...resources,
-          style: withBootTheme,
-        },
-      },
-    };
-  });
-
-const withAndroidColors: ExpoPlugin = (config, props) =>
-  Expo.withAndroidColors(config, async (config) => {
-    const { assetsDir = "assets/bootsplash" } = props;
-
-    const manifest = (await hfs.json(
-      path.resolve(workingPath, assetsDir, "manifest.json"),
-    )) as Manifest;
-
-    config.modResults = assignColorValue(config.modResults, {
-      name: "bootsplash_background",
-      value: manifest.background,
-    });
-
-    return config;
-  });
-
-const withAndroidColorsNight: ExpoPlugin = (config, props) =>
-  Expo.withAndroidColorsNight(config, async (config) => {
-    const { assetsDir = "assets/bootsplash" } = props;
-
-    const manifest = (await hfs.json(
-      path.resolve(workingPath, assetsDir, "manifest.json"),
-    )) as Manifest;
-
-    if (manifest.darkBackground != null) {
-      config.modResults = assignColorValue(config.modResults, {
-        name: "bootsplash_background",
-        value: manifest.darkBackground,
-      });
-    }
-
-    return config;
-  });
-
-const withIOSAssets: ExpoPlugin = (config, props) =>
-  Expo.withDangerousMod(config, [
-    "ios",
-    (config) => {
-      const { assetsDir = "assets/bootsplash" } = props;
-      const { platformProjectRoot, projectName = "" } = config.modRequest;
-
-      const srcDir = path.resolve(workingPath, assetsDir, "ios");
-      const destDir = path.resolve(platformProjectRoot, projectName);
-
-      cleanIOS(destDir);
-
-      hfs.copy(
-        path.join(srcDir, "BootSplash.storyboard"),
-        path.join(destDir, "BootSplash.storyboard"),
-      );
-
-      for (const xcassetsDir of ["Colors.xcassets", "Images.xcassets"]) {
-        const srcXcassetsDir = path.join(srcDir, xcassetsDir);
-        const destXcassetsDir = path.join(destDir, xcassetsDir);
-
-        hfs.ensureDir(destXcassetsDir);
-
-        for (const file of hfs.readDir(srcXcassetsDir)) {
-          hfs.copy(
-            path.join(srcXcassetsDir, file),
-            path.join(destXcassetsDir, file),
-          );
-        }
-      }
-
-      return config;
-    },
-  ]);
-
-const withAppDelegate: ExpoPlugin = (config) =>
-  Expo.withAppDelegate(config, (config) => {
-    const { modResults } = config;
-    const { language } = modResults;
-
-    if (language !== "objc" && language !== "objcpp") {
-      throw new Error(
-        `Cannot modify the project AppDelegate as it's not in a supported language: ${language}`,
-      );
-    }
-
-    const withHeader = mergeContents({
-      src: modResults.contents,
-      comment: "//",
-      tag: "bootsplash-header",
-      offset: 1,
-      anchor: /#import "AppDelegate\.h"/,
-      newSrc: '#import "RNBootSplash.h"',
-    });
-
-    const withRootView = mergeContents({
-      src: withHeader.contents,
-      comment: "//",
-      tag: "bootsplash-init",
-      offset: 0,
-      anchor: /@end/,
-      newSrc: dedent`
-        - (UIView *)createRootViewWithBridge:(RCTBridge *)bridge moduleName:(NSString *)moduleName initProps:(NSDictionary *)initProps {
-          UIView *rootView = [super createRootViewWithBridge:bridge moduleName:moduleName initProps:initProps];
-          [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];
-          return rootView;
-        }
-      `,
-    });
-
-    return {
-      ...config,
-      modResults: {
-        ...modResults,
-        contents: withRootView.contents,
-      },
-    };
-  });
-
-const withInfoPlist: ExpoPlugin = (config) =>
-  Expo.withInfoPlist(config, (config) => {
-    config.modResults["UILaunchStoryboardName"] = "BootSplash";
-    return config;
-  });
-
-const withXcodeProject: ExpoPlugin = (config) =>
-  Expo.withXcodeProject(config, (config) => {
-    const { projectName = "" } = config.modRequest;
-
-    Expo.IOSConfig.XcodeUtils.addResourceFileToGroup({
-      filepath: path.join(projectName, "BootSplash.storyboard"),
-      groupName: projectName,
-      project: config.modResults,
-      isBuildFile: true,
-    });
-
-    Expo.IOSConfig.XcodeUtils.addResourceFileToGroup({
-      filepath: path.join(projectName, "Colors.xcassets"),
-      groupName: projectName,
-      project: config.modResults,
-      isBuildFile: true,
-    });
-
-    return config;
-  });
-
-const withoutExpoSplashScreen: ExpoPlugin = Expo.createRunOncePlugin(
-  (config) => config,
-  "expo-splash-screen",
-  "skip",
-);
-
-export const withGenerate: ExpoPlugin = (config, props = {}) => {
-  const plugins: ExpoPlugin[] = [];
-  const { platforms = [] } = config;
-
-  plugins.push(withoutExpoSplashScreen);
-
-  if (platforms.includes("android")) {
-    plugins.push(
-      withAndroidAssets,
-      withAndroidManifest,
-      withMainActivity,
-      withAndroidStyles,
-      withAndroidColors,
-      withAndroidColorsNight,
-    );
-  }
-
-  if (platforms.includes("ios")) {
-    plugins.push(
-      withIOSAssets,
-      withAppDelegate,
-      withInfoPlist,
-      withXcodeProject,
-    );
-  }
-
-  return Expo.withPlugins(
-    config,
-    plugins.map((plugin) => [plugin, props]),
-  );
-};