react-native-bootsplash 5.2.2 → 5.4.0

package/src/generate.ts

@@ -1,10 +1,13 @@
+import murmurhash from "@emotion/hash";
+import { IOSConfig } from "@expo/config-plugins";
+import plist from "@expo/plist";
+import { findProjectRoot } from "@react-native-community/cli-tools";
 import {
   AndroidProjectConfig,
-  CommandFunction,
   IOSProjectConfig,
 } from "@react-native-community/cli-types";
 import detectIndent from "detect-indent";
-import fs from "fs-extra";
+import fs from "fs";
 import { parse as parseHtml } from "node-html-parser";
 import path from "path";
 import pc from "picocolors";
@@ -102,6 +105,42 @@ const getStoryboard = ({
 `;
 };
 
+export const addFileToXcodeProject = (filePath: string) => {
+  const projectRoot = findProjectRoot(workingPath);
+
+  const pbxprojectPath = IOSConfig.Paths.getPBXProjectPath(projectRoot);
+  const project = IOSConfig.XcodeUtils.getPbxproj(projectRoot);
+  const xcodeProjectPath = IOSConfig.Paths.getXcodeProjectPath(projectRoot);
+
+  IOSConfig.XcodeUtils.addResourceFileToGroup({
+    filepath: filePath,
+    groupName: path.parse(xcodeProjectPath).name,
+    project,
+  });
+
+  hfs.write(pbxprojectPath, project.writeSync());
+  logWrite(pbxprojectPath);
+};
+
+// Freely inspired by https://github.com/humanwhocodes/humanfs
+export const hfs = {
+  buffer: (path: string) => fs.readFileSync(path),
+  exists: (path: string) => fs.existsSync(path),
+  json: (path: string) => JSON.parse(fs.readFileSync(path, "utf-8")) as unknown,
+  readDir: (path: string) => fs.readdirSync(path, "utf-8"),
+  realPath: (path: string) => fs.realpathSync(path, "utf-8"),
+  rm: (path: string) => fs.rmSync(path, { force: true }),
+  text: (path: string) => fs.readFileSync(path, "utf-8"),
+
+  ensureDir: (dir: string) => {
+    fs.mkdirSync(dir, { recursive: true });
+  },
+  write: (file: string, data: string) => {
+    const trimmed = data.trim();
+    fs.writeFileSync(file, trimmed === "" ? trimmed : trimmed + "\n", "utf-8");
+  },
+};
+
 export const log = {
   error: (text: string) => console.log(pc.red(`❌  ${text}`)),
   text: (text: string) => console.log(text),
@@ -120,12 +159,12 @@ export const logWrite = (
   );
 
 export const writeJson = (file: string, json: object) => {
-  fs.writeFileSync(file, JSON.stringify(json, null, 2) + "\n", "utf-8");
+  hfs.write(file, JSON.stringify(json, null, 2));
   logWrite(file);
 };
 
 export const readXml = (file: string) => {
-  const xml = fs.readFileSync(file, "utf-8");
+  const xml = hfs.text(file);
   const { indent } = detectIndent(xml);
 
   const formatOptions: XMLFormatterOptions = {
@@ -149,12 +188,12 @@ export const writeXml = (
     ...options,
   });
 
-  fs.writeFileSync(file, formatted + "\n", "utf-8");
+  hfs.write(file, formatted);
   logWrite(file);
 };
 
 export const readHtml = (file: string) => {
-  const html = fs.readFileSync(file, "utf-8");
+  const html = hfs.text(file);
   const { type, amount } = detectIndent(html);
 
   const formatOptions: PrettierOptions = {
@@ -178,10 +217,37 @@ export const writeHtml = async (
     ...options,
   });
 
-  fs.writeFileSync(file, formatted, "utf-8");
+  hfs.write(file, formatted);
   logWrite(file);
 };
 
+export const cleanIOSAssets = (dir: string, prefix: string) => {
+  hfs
+    .readDir(dir)
+    .filter((file) => file.startsWith(prefix) && file.endsWith(".png"))
+    .map((file) => path.join(dir, file))
+    .forEach((file) => hfs.rm(file));
+};
+
+export const getIOSAssetFileName = async ({
+  name,
+  image,
+  width,
+}: {
+  name: string;
+  image: Sharp;
+  width: number;
+}) => {
+  const buffer = await image
+    .clone()
+    .resize(width)
+    .png({ quality: 100 })
+    .toBuffer();
+
+  const hash = murmurhash(buffer.toString("base64"));
+  return `${name}-${hash}`;
+};
+
 const ensureSupportedFormat = async (
   name: string,
   image: Sharp | undefined,
@@ -222,7 +288,7 @@ const getAndroidResPath = (
     "res",
   );
 
-  if (!fs.existsSync(androidResPath)) {
+  if (!hfs.exists(androidResPath)) {
     log.warn(
       `No ${path.relative(
         workingPath,
@@ -256,7 +322,7 @@ const getIOSProjectPath = (ios: IOSProjectConfig): string | undefined => {
     .resolve(ios.sourceDir, ios.xcodeProject.name)
     .replace(/\.(xcodeproj|xcworkspace)$/, "");
 
-  if (!fs.existsSync(iosProjectPath)) {
+  if (!hfs.exists(iosProjectPath)) {
     log.warn(
       `No ${path.relative(
         workingPath,
@@ -271,7 +337,7 @@ const getIOSProjectPath = (ios: IOSProjectConfig): string | undefined => {
 const getHtmlTemplatePath = (html: string): string | undefined => {
   const htmlTemplatePath = path.resolve(workingPath, html);
 
-  if (!fs.existsSync(htmlTemplatePath)) {
+  if (!hfs.exists(htmlTemplatePath)) {
     log.warn(
       `No ${path.relative(
         workingPath,
@@ -314,14 +380,25 @@ const requireAddon = ():
   | { execute: (config: AddonConfig) => Promise<void> }
   | undefined => {
   try {
-    // eslint-disable-next-line
-    return require("./addon");
+    return require("./addon"); // eslint-disable-line
   } catch {
     return;
   }
 };
 
-export const generate: CommandFunction<{
+export const generate = async ({
+  android,
+  ios,
+  platforms,
+  html,
+  flavor,
+  licenseKey,
+  ...args
+}: {
+  android?: AndroidProjectConfig;
+  ios?: IOSProjectConfig;
+
+  logo: string;
   platforms: string[];
   background: string;
   logoWidth: number;
@@ -335,11 +412,7 @@ export const generate: CommandFunction<{
   darkBackground?: string;
   darkLogo?: string;
   darkBrand?: string;
-}> = async (
-  [argsLogo],
-  { project: { android, ios } },
-  { platforms, html, flavor, licenseKey, ...args },
-) => {
+}) => {
   const [nodeStringVersion = ""] = process.versions.node.split(".");
   const nodeVersion = parseInt(nodeStringVersion, 10);
 
@@ -348,12 +421,7 @@ export const generate: CommandFunction<{
     process.exit(1);
   }
 
-  if (argsLogo == null) {
-    log.error("Missing required argument 'logo'");
-    process.exit(1);
-  }
-
-  const logoPath = path.resolve(workingPath, argsLogo);
+  const logoPath = path.resolve(workingPath, args.logo);
 
   const darkLogoPath =
     args.darkLogo != null
@@ -472,12 +540,12 @@ export const generate: CommandFunction<{
     log.title("🤖", "Android");
 
     const valuesPath = path.resolve(androidResPath, "values");
-    fs.ensureDirSync(valuesPath);
+    hfs.ensureDir(valuesPath);
 
     const colorsXmlPath = path.resolve(valuesPath, "colors.xml");
     const colorsXmlEntry = `<color name="bootsplash_background">${background.hex}</color>`;
 
-    if (fs.existsSync(colorsXmlPath)) {
+    if (hfs.exists(colorsXmlPath)) {
       const { root, formatOptions } = readXml(colorsXmlPath);
       const nextColor = parseHtml(colorsXmlEntry);
       const prevColor = root.querySelector(
@@ -508,7 +576,7 @@ export const generate: CommandFunction<{
           `drawable-${suffix}`,
         );
 
-        fs.ensureDirSync(drawableDirPath);
+        hfs.ensureDir(drawableDirPath);
 
         // https://developer.android.com/develop/ui/views/launch/splash-screen#dimensions
         const canvasSize = 288 * ratio;
@@ -568,29 +636,60 @@ export const generate: CommandFunction<{
       { whiteSpaceAtEndOfSelfclosingTag: false },
     );
 
+    addFileToXcodeProject(storyboardPath);
+
+    const infoPlistPath = path.join(iosProjectPath, "Info.plist");
+
+    const infoPlist = plist.parse(hfs.text(infoPlistPath)) as Record<
+      string,
+      unknown
+    >;
+
+    infoPlist["UILaunchStoryboardName"] = "BootSplash.storyboard";
+
+    const formatted = formatXml(plist.build(infoPlist), {
+      collapseContent: true,
+      forceSelfClosingEmptyTag: false,
+      indentation: "\t",
+      lineSeparator: "\n",
+      whiteSpaceAtEndOfSelfclosingTag: false,
+    })
+      .replace(/<string\/>/gm, "<string></string>")
+      .replace(/^\t/gm, "");
+
+    hfs.write(infoPlistPath, formatted);
+    logWrite(infoPlistPath);
+
     const imageSetPath = path.resolve(
       iosProjectPath,
       "Images.xcassets",
       "BootSplashLogo.imageset",
     );
 
-    fs.ensureDirSync(imageSetPath);
+    hfs.ensureDir(imageSetPath);
+    cleanIOSAssets(imageSetPath, "bootsplash_logo");
+
+    const logoFileName = await getIOSAssetFileName({
+      name: "bootsplash_logo",
+      image: logo,
+      width: logoWidth,
+    });
 
     writeJson(path.resolve(imageSetPath, "Contents.json"), {
       images: [
         {
           idiom: "universal",
-          filename: "bootsplash_logo.png",
+          filename: `${logoFileName}.png`,
           scale: "1x",
         },
         {
           idiom: "universal",
-          filename: "bootsplash_logo@2x.png",
+          filename: `${logoFileName}@2x.png`,
           scale: "2x",
         },
         {
           idiom: "universal",
-          filename: "bootsplash_logo@3x.png",
+          filename: `${logoFileName}@3x.png`,
           scale: "3x",
         },
       ],
@@ -608,7 +707,7 @@ export const generate: CommandFunction<{
       ].map(({ ratio, suffix }) => {
         const filePath = path.resolve(
           imageSetPath,
-          `bootsplash_logo${suffix}.png`,
+          `${logoFileName}${suffix}.png`,
         );
 
         return logo
@@ -632,7 +731,7 @@ export const generate: CommandFunction<{
 
     const base64 = (
       format === "svg"
-        ? fs.readFileSync(logoPath)
+        ? hfs.buffer(logoPath)
         : await logo
             .clone()
             .resize(Math.round(logoWidth * 2))
@@ -690,7 +789,7 @@ export const generate: CommandFunction<{
   if (assetsOutputPath != null) {
     log.title("📄", "Assets");
 
-    fs.ensureDirSync(assetsOutputPath);
+    hfs.ensureDir(assetsOutputPath);
 
     writeJson(path.resolve(assetsOutputPath, "bootsplash_manifest.json"), {
       background: background.hex,