react-native-bootsplash 6.0.0-beta.7 → 6.0.0-beta.9

package/src/generate.ts

@@ -9,6 +9,7 @@ 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";
@@ -21,6 +22,7 @@ import * as cssPlugin from "prettier/plugins/postcss";
 import * as prettier from "prettier/standalone";
 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 +42,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}`));
@@ -458,10 +465,12 @@ const getIOSOutputPath = ({
   return iosOutputPath;
 };
 
-const getHtmlTemplatePath = ({
+const getHtmlTemplatePath = async ({
+  isExpo,
   html,
   platforms,
 }: {
+  isExpo: boolean;
   html: string;
   platforms: Platforms;
 }) => {
@@ -469,6 +478,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)) {
@@ -687,7 +714,8 @@ export const generate = async ({
     platforms,
   });
 
-  const htmlTemplatePath = getHtmlTemplatePath({
+  const htmlTemplatePath = await getHtmlTemplatePath({
+    isExpo,
     html,
     platforms,
   });
@@ -752,6 +780,29 @@ export const generate = async ({
     );
 
     if (!isExpo) {
+      const manifestXmlPath = path.resolve(
+        androidOutputPath,
+        "..",
+        "AndroidManifest.xml",
+      );
+
+      const manifestXml = readXmlLike(manifestXmlPath);
+      const activities = manifestXml.root.querySelectorAll("activity");
+
+      for (const activity of activities) {
+        if (activity.getAttribute("android:name") === ".MainActivity") {
+          activity.setAttribute("android:theme", "@style/BootTheme");
+        }
+      }
+
+      await writeXmlLike(manifestXmlPath, manifestXml.root.toString(), {
+        ...manifestXml.formatOptions,
+        formatter: "prettier",
+        htmlWhitespaceSensitivity: "ignore",
+        selfClosingTags: true,
+        singleAttributePerLine: true,
+      });
+
       const valuesPath = path.resolve(androidOutputPath, "values");
       hfs.ensureDir(valuesPath);
 
@@ -759,21 +810,21 @@ export const generate = async ({
       const colorsXmlEntry = `<color name="bootsplash_background">${background.hex}</color>`;
 
       if (hfs.exists(colorsXmlPath)) {
-        const { root, formatOptions } = readXmlLike(colorsXmlPath);
+        const colorsXml = readXmlLike(colorsXmlPath);
         const nextColor = parseHtml(colorsXmlEntry);
 
-        const prevColor = root.querySelector(
+        const prevColor = colorsXml.root.querySelector(
           'color[name="bootsplash_background"]',
         );
 
         if (prevColor != null) {
           prevColor.replaceWith(nextColor);
         } else {
-          root.querySelector("resources")?.appendChild(nextColor);
+          colorsXml.root.querySelector("resources")?.appendChild(nextColor);
         }
 
-        await writeXmlLike(colorsXmlPath, root.toString(), {
-          ...formatOptions,
+        await writeXmlLike(colorsXmlPath, colorsXml.root.toString(), {
+          ...colorsXml.formatOptions,
           formatter: "xmlFormatter",
         });
       } else {
@@ -784,88 +835,61 @@ export const generate = async ({
         );
       }
 
-      {
-        const manifestXmlPath = path.resolve(
-          androidOutputPath,
-          "..",
-          "AndroidManifest.xml",
-        );
+      const stylesXmlPath = path.resolve(valuesPath, "styles.xml");
+      const stylesXml = readXmlLike(stylesXmlPath);
+
+      const prevStyle = stylesXml.root.querySelector('style[name="BootTheme"]');
+      const parent = prevStyle?.getAttribute("parent") ?? "Theme.BootSplash";
+
+      const extraItems = parseHtml(
+        prevStyle?.text
+          .split("\n")
+          .map((line) => line.trim())
+          .join("") ?? "",
+      )
+        .childNodes.filter((node) => {
+          if (!(node instanceof HTMLElement)) {
+            return true;
+          }
 
-        const { root, formatOptions } = readXmlLike(manifestXmlPath);
-        const activities = root.querySelectorAll("activity");
+          const name = node.getAttribute("name");
 
-        for (const activity of activities) {
-          if (activity.getAttribute("android:name") === ".MainActivity") {
-            activity.setAttribute("android:theme", "@style/BootTheme");
-          }
-        }
+          return (
+            name !== "bootSplashBackground" &&
+            name !== "bootSplashLogo" &&
+            name !== "bootSplashBrand" &&
+            name !== "postBootSplashTheme"
+          );
+        })
+        .map((node) => node.toString());
 
-        await writeXmlLike(manifestXmlPath, root.toString(), {
-          ...formatOptions,
-          formatter: "prettier",
-          htmlWhitespaceSensitivity: "ignore",
-          selfClosingTags: true,
-          singleAttributePerLine: true,
-        });
-      }
+      const styleItems: string[] = [
+        ...(extraItems.length > 0 ? [...extraItems, ""] : []),
 
-      {
-        const stylesXmlPath = path.resolve(valuesPath, "styles.xml");
-        const { root, formatOptions } = readXmlLike(stylesXmlPath);
-
-        const prevStyle = root.querySelector('style[name="BootTheme"]');
-        const parent = prevStyle?.getAttribute("parent") ?? "Theme.BootSplash";
-
-        const extraItems = parseHtml(
-          prevStyle?.text
-            .split("\n")
-            .map((line) => line.trim())
-            .join("") ?? "",
-        )
-          .childNodes.filter((node) => {
-            if (!(node instanceof HTMLElement)) {
-              return true;
-            }
-
-            const name = node.getAttribute("name");
-
-            return (
-              name !== "bootSplashBackground" &&
-              name !== "bootSplashLogo" &&
-              name !== "bootSplashBrand" &&
-              name !== "postBootSplashTheme"
-            );
-          })
-          .map((node) => node.toString());
-
-        const styleItems: string[] = [
-          ...(extraItems.length > 0 ? [...extraItems, ""] : []),
-
-          '<item name="bootSplashBackground">@color/bootsplash_background</item>',
-          '<item name="bootSplashLogo">@drawable/bootsplash_logo</item>',
-
-          ...(brand != null && brandPath != null
-            ? ['<item name="bootSplashBrand">@drawable/bootsplash_brand</item>']
-            : []),
-
-          '<item name="postBootSplashTheme">@style/AppTheme</item>',
-        ];
-
-        const nextStyle = parseHtml(dedent`
-          <style name="BootTheme" parent="${parent}">
-            ${styleItems.join("\n")}
-          </style>
-        `);
-
-        prevStyle?.remove(); // remove the existing style
-        root.querySelector("resources")?.appendChild(nextStyle);
-
-        await writeXmlLike(stylesXmlPath, root.toString(), {
-          ...formatOptions,
-          formatter: "prettier",
-          htmlWhitespaceSensitivity: "ignore",
-        });
-      }
+        '<item name="bootSplashBackground">@color/bootsplash_background</item>',
+        '<item name="bootSplashLogo">@drawable/bootsplash_logo</item>',
+
+        ...(brand != null && brandPath != null
+          ? ['<item name="bootSplashBrand">@drawable/bootsplash_brand</item>']
+          : []),
+
+        '<item name="postBootSplashTheme">@style/AppTheme</item>',
+      ];
+
+      const nextStyle = parseHtml(dedent`
+        <style name="BootTheme" parent="${parent}">
+          ${styleItems.join("\n")}
+        </style>
+      `);
+
+      prevStyle?.remove(); // remove the existing style
+      stylesXml.root.querySelector("resources")?.appendChild(nextStyle);
+
+      await writeXmlLike(stylesXmlPath, stylesXml.root.toString(), {
+        ...stylesXml.formatOptions,
+        formatter: "prettier",
+        htmlWhitespaceSensitivity: "ignore",
+      });
     }
   }
 
@@ -1006,18 +1030,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,
       });
 
@@ -1029,9 +1054,9 @@ export const generate = async ({
   if (htmlTemplatePath != null) {
     log.title("🌐", "Web");
 
-    const { root, formatOptions } = readXmlLike(htmlTemplatePath);
+    const htmlTemplate = readXmlLike(htmlTemplatePath);
     const { format } = await logo.metadata();
-    const prevStyle = root.querySelector("#bootsplash-style");
+    const prevStyle = htmlTemplate.root.querySelector("#bootsplash-style");
 
     const base64 = (
       format === "svg"
@@ -1070,10 +1095,10 @@ export const generate = async ({
     if (prevStyle != null) {
       prevStyle.replaceWith(nextStyle);
     } else {
-      root.querySelector("head")?.appendChild(nextStyle);
+      htmlTemplate.root.querySelector("head")?.appendChild(nextStyle);
     }
 
-    const prevDiv = root.querySelector("#bootsplash");
+    const prevDiv = htmlTemplate.root.querySelector("#bootsplash");
 
     const nextDiv = parseHtml(dedent`
       <div id="bootsplash">
@@ -1084,11 +1109,11 @@ export const generate = async ({
     if (prevDiv != null) {
       prevDiv.replaceWith(nextDiv);
     } else {
-      root.querySelector("body")?.appendChild(nextDiv);
+      htmlTemplate.root.querySelector("body")?.appendChild(nextDiv);
     }
 
-    await writeXmlLike(htmlTemplatePath, root.toString(), {
-      ...formatOptions,
+    await writeXmlLike(htmlTemplatePath, htmlTemplate.root.toString(), {
+      ...htmlTemplate.formatOptions,
       formatter: "prettier",
       useCssPlugin: true,
     });