react-native-bootsplash 5.0.0-beta.3 → 5.0.0-rc.0

package/src/generate.ts

@@ -5,18 +5,20 @@ import {
 } from "@react-native-community/cli-types";
 import detectIndent from "detect-indent";
 import fs from "fs-extra";
+import { parse as parseHtml } from "node-html-parser";
 import path from "path";
 import pc from "picocolors";
-import type { Sharp } from "sharp";
-import sharp from "sharp";
-import xmlFormat, { XMLFormatterOptions } from "xml-formatter";
-import type { Manifest } from ".";
+import { Options as PrettierOptions } from "prettier";
+import htmlPlugin from "prettier/parser-html";
+import cssPlugin from "prettier/parser-postcss";
+import prettier from "prettier/standalone";
+import sharp, { Sharp } from "sharp";
+import { dedent } from "ts-dedent";
+import formatXml, { XMLFormatterOptions } from "xml-formatter";
+import { Manifest } from ".";
 
 const workingPath = process.env.INIT_CWD ?? process.env.PWD ?? process.cwd();
 
-export const androidColorRegex =
-  /<color name="bootsplash_background">#\w+<\/color>/g;
-
 export type Color = {
   hex: string;
   rgb: { R: string; G: string; B: string };
@@ -54,7 +56,8 @@ const getStoryboard = ({
   const logoX = (frameWidth - logoWidth) / 2;
   const logoY = (frameHeight - logoHeight) / 2;
 
-  return `<?xml version="1.0" encoding="UTF-8"?>
+  return dedent`
+<?xml version="1.0" encoding="UTF-8"?>
 <document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
     <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
@@ -117,34 +120,65 @@ export const logWrite = (
   );
 
 export const writeJson = (file: string, json: object) => {
-  const amount = fs.existsSync(file)
-    ? detectIndent(fs.readFileSync(file, "utf-8")).amount || 2
-    : 2;
-
-  fs.writeFileSync(file, JSON.stringify(json, null, amount) + "\n", "utf-8");
+  fs.writeFileSync(file, JSON.stringify(json, null, 2) + "\n", "utf-8");
   logWrite(file);
 };
 
+export const readXml = (file: string) => {
+  const xml = fs.readFileSync(file, "utf-8");
+  const { indent } = detectIndent(xml);
+
+  const formatOptions: XMLFormatterOptions = {
+    indentation: indent || "    ",
+  };
+
+  return { root: parseHtml(xml), formatOptions };
+};
+
 export const writeXml = (
   file: string,
   xml: string,
   options?: XMLFormatterOptions,
 ) => {
-  const indentation = fs.existsSync(file)
-    ? detectIndent(fs.readFileSync(file, "utf-8")).indent || "    "
-    : "    ";
-
-  fs.writeFileSync(
-    file,
-    xmlFormat(xml, {
-      collapseContent: true,
-      ...options,
-      indentation,
-      lineSeparator: "\n",
-    }) + "\n",
-    "utf-8",
-  );
+  const formatted = formatXml(xml, {
+    collapseContent: true,
+    forceSelfClosingEmptyTag: true,
+    indentation: "    ",
+    lineSeparator: "\n",
+    whiteSpaceAtEndOfSelfclosingTag: true,
+    ...options,
+  });
+
+  fs.writeFileSync(file, formatted + "\n", "utf-8");
+  logWrite(file);
+};
+
+export const readHtml = (file: string) => {
+  const html = fs.readFileSync(file, "utf-8");
+  const { type, amount } = detectIndent(html);
+
+  const formatOptions: PrettierOptions = {
+    useTabs: type === "tab",
+    tabWidth: amount || 2,
+  };
+
+  return { root: parseHtml(html), formatOptions };
+};
 
+export const writeHtml = (
+  file: string,
+  html: string,
+  options?: Omit<PrettierOptions, "parser" | "plugins">,
+) => {
+  const formatted = prettier.format(html, {
+    parser: "html",
+    plugins: [htmlPlugin, cssPlugin],
+    tabWidth: 2,
+    useTabs: false,
+    ...options,
+  });
+
+  fs.writeFileSync(file, formatted, "utf-8");
   logWrite(file);
 };
 
@@ -234,19 +268,41 @@ const getIOSProjectPath = (ios: IOSProjectConfig): string | undefined => {
   }
 };
 
+const getHtmlTemplatePath = (html: string): string | undefined => {
+  const htmlTemplatePath = path.resolve(workingPath, html);
+
+  if (!fs.existsSync(htmlTemplatePath)) {
+    log.warn(
+      `No ${path.relative(
+        workingPath,
+        htmlTemplatePath,
+      )} file found. Skipping HTML + CSS generation…`,
+    );
+  } else {
+    return htmlTemplatePath;
+  }
+};
+
 export type AddonConfig = {
   licenseKey: string;
 
   androidResPath: string | undefined;
   iosProjectPath: string | undefined;
+  htmlTemplatePath: string | undefined;
   assetsOutputPath: string | undefined;
 
+  logoPath: string;
+  darkLogoPath: string | undefined;
+  brandPath: string | undefined;
+  darkBrandPath: string | undefined;
+
   logoHeight: number;
   logoWidth: number;
   brandHeight: number;
   brandWidth: number;
 
   background: Color;
+  logo: Sharp;
   brand: Sharp | undefined;
 
   darkBackground: Color | undefined;
@@ -266,11 +322,12 @@ const requireAddon = ():
 };
 
 export const generate: CommandFunction<{
-  logoWidth: number;
+  platforms: string[];
   background: string;
+  logoWidth: number;
   assetsOutput?: string;
+  html: string;
   flavor: string;
-  platforms: string[];
 
   licenseKey?: string;
   brand?: string;
@@ -281,7 +338,7 @@ export const generate: CommandFunction<{
 }> = async (
   [argsLogo],
   { project: { android, ios } },
-  { flavor, platforms, licenseKey, ...args },
+  { platforms, html, flavor, licenseKey, ...args },
 ) => {
   const [nodeStringVersion = ""] = process.versions.node.split(".");
   const nodeVersion = parseInt(nodeStringVersion, 10);
@@ -296,34 +353,38 @@ export const generate: CommandFunction<{
     process.exit(1);
   }
 
+  const logoPath = path.resolve(workingPath, argsLogo);
+
+  const darkLogoPath =
+    args.darkLogo != null
+      ? path.resolve(workingPath, args.darkLogo)
+      : undefined;
+
+  const brandPath =
+    args.brand != null ? path.resolve(workingPath, args.brand) : undefined;
+
+  const darkBrandPath =
+    args.darkBrand != null
+      ? path.resolve(workingPath, args.darkBrand)
+      : undefined;
+
   const assetsOutputPath =
     args.assetsOutput != null
       ? path.resolve(workingPath, args.assetsOutput)
       : undefined;
 
+  const logo = sharp(logoPath);
+  const darkLogo = darkLogoPath != null ? sharp(darkLogoPath) : undefined;
+  const brand = brandPath != null ? sharp(brandPath) : undefined;
+  const darkBrand = darkBrandPath != null ? sharp(darkBrandPath) : undefined;
+
   const background = parseColor(args.background);
-  const logo = sharp(path.resolve(workingPath, argsLogo));
   const logoWidth = args.logoWidth - (args.logoWidth % 2);
   const brandWidth = args.brandWidth - (args.brandWidth % 2);
 
-  const brand =
-    args.brand != null
-      ? sharp(path.resolve(workingPath, args.brand))
-      : undefined;
-
   const darkBackground =
     args.darkBackground != null ? parseColor(args.darkBackground) : undefined;
 
-  const darkLogo =
-    args.darkLogo != null
-      ? sharp(path.resolve(workingPath, args.darkLogo))
-      : undefined;
-
-  const darkBrand =
-    args.darkBrand != null
-      ? sharp(path.resolve(workingPath, args.darkBrand))
-      : undefined;
-
   const executeAddon =
     brand != null ||
     darkBackground != null ||
@@ -403,6 +464,10 @@ export const generate: CommandFunction<{
       ? getIOSProjectPath(ios)
       : undefined;
 
+  const htmlTemplatePath = platforms.includes("web")
+    ? getHtmlTemplatePath(html)
+    : undefined;
+
   if (androidResPath != null) {
     log.title("🤖", "Android");
 
@@ -413,13 +478,19 @@ export const generate: CommandFunction<{
     const colorsXmlEntry = `<color name="bootsplash_background">${background.hex}</color>`;
 
     if (fs.existsSync(colorsXmlPath)) {
-      const colorsXml = fs.readFileSync(colorsXmlPath, "utf-8");
-
-      const nextXml = colorsXml.match(androidColorRegex)
-        ? colorsXml.replace(androidColorRegex, colorsXmlEntry)
-        : colorsXml.replace(/<\/resources>/g, `${colorsXmlEntry}</resources>`);
-
-      writeXml(colorsXmlPath, nextXml);
+      const { root, formatOptions } = readXml(colorsXmlPath);
+      const nextColor = parseHtml(colorsXmlEntry);
+      const prevColor = root.querySelector(
+        'color[name="bootsplash_background"]',
+      );
+
+      if (prevColor != null) {
+        prevColor.replaceWith(nextColor);
+      } else {
+        root.querySelector("resources")?.appendChild(nextColor);
+      }
+
+      writeXml(colorsXmlPath, root.toString(), formatOptions);
     } else {
       writeXml(colorsXmlPath, `<resources>${colorsXmlEntry}</resources>`);
     }
@@ -487,18 +558,16 @@ export const generate: CommandFunction<{
       "BootSplash.storyboard",
     );
 
-    fs.writeFileSync(
+    writeXml(
       storyboardPath,
       getStoryboard({
         logoHeight,
         logoWidth,
         background: background.rgb,
       }),
-      "utf-8",
+      { whiteSpaceAtEndOfSelfclosingTag: false },
     );
 
-    logWrite(storyboardPath);
-
     const imageSetPath = path.resolve(
       iosProjectPath,
       "Images.xcassets",
@@ -554,6 +623,70 @@ export const generate: CommandFunction<{
     );
   }
 
+  if (htmlTemplatePath != null) {
+    log.title("🌐", "Web");
+
+    const { root, formatOptions } = readHtml(htmlTemplatePath);
+    const { format } = await logo.metadata();
+    const prevStyle = root.querySelector("#bootsplash-style");
+
+    const base64 = (
+      format === "svg"
+        ? fs.readFileSync(logoPath)
+        : await logo
+            .clone()
+            .resize(Math.round(logoWidth * 2))
+            .png({ quality: 100 })
+            .toBuffer()
+    ).toString("base64");
+
+    const dataURI = `data:image/${format ? "svg+xml" : "png"};base64,${base64}`;
+
+    const nextStyle = parseHtml(dedent`
+      <style id="bootsplash-style">
+        #bootsplash {
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          overflow: hidden;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background-color: ${background.hex};
+        }
+        #bootsplash-logo {
+          content: url("${dataURI}");
+          width: ${logoWidth}px;
+          height: ${logoHeight}px;
+        }
+      </style>
+    `);
+
+    if (prevStyle != null) {
+      prevStyle.replaceWith(nextStyle);
+    } else {
+      root.querySelector("head")?.appendChild(nextStyle);
+    }
+
+    const prevDiv = root.querySelector("#bootsplash");
+
+    const nextDiv = parseHtml(dedent`
+      <div id="bootsplash">
+        <div id="bootsplash-logo"></div>
+      </div>
+    `);
+
+    if (prevDiv != null) {
+      prevDiv.replaceWith(nextDiv);
+    } else {
+      root.querySelector("body")?.appendChild(nextDiv);
+    }
+
+    writeHtml(htmlTemplatePath, root.toString(), formatOptions);
+  }
+
   if (assetsOutputPath != null) {
     log.title("📄", "Assets");
 
@@ -600,6 +733,7 @@ export const generate: CommandFunction<{
 
       androidResPath,
       iosProjectPath,
+      htmlTemplatePath,
       assetsOutputPath,
 
       logoHeight,
@@ -607,7 +741,13 @@ export const generate: CommandFunction<{
       brandHeight,
       brandWidth,
 
+      logoPath,
+      darkLogoPath,
+      brandPath,
+      darkBrandPath,
+
       background,
+      logo,
       brand,
 
       darkBackground,

package/src/index.ts

@@ -22,6 +22,7 @@ export type Manifest = {
     height: number;
   };
   brand?: {
+    bottom: number;
     width: number;
     height: number;
   };
@@ -74,6 +75,7 @@ export function useHideAnimation(config: UseHideAnimationConfig) {
   const hasBrand = manifest.brand != null && brandSrc != null;
   const logoWidth = manifest.logo.width;
   const logoHeight = manifest.logo.height;
+  const brandBottom = manifest.brand?.bottom;
   const brandWidth = manifest.brand?.width;
   const brandHeight = manifest.brand?.height;
 
@@ -156,7 +158,7 @@ export function useHideAnimation(config: UseHideAnimationConfig) {
             source: brandFinalSrc,
             style: {
               position: "absolute",
-              bottom: 60,
+              bottom: Platform.OS === "web" ? 60 : brandBottom,
               width: brandWidth,
               height: brandHeight,
             },
@@ -193,6 +195,7 @@ export function useHideAnimation(config: UseHideAnimationConfig) {
 
     logoWidth,
     logoHeight,
+    brandBottom,
     brandWidth,
     brandHeight,