Merge pull request #2105 from Shopify/revert-2103-m121

Revert "⬆️ m121"

Author: wcandillon

.gitmodules

@@ -1,7 +1,7 @@
 [submodule "externals/skia"]
 	path = externals/skia
 	url = https://chromium.googlesource.com/skia/
-	branch = chrome/m121
+	branch = chrome/m119
 [submodule "externals/depot_tools"]
 	path = externals/depot_tools
 	url = https://chromium.googlesource.com/chromium/tools/depot_tools.git

docs/static/img/paragraph/boundingbox-ios.png

@@ -55,15 +55,6 @@ const tiger = new SVGAsset(
   800
 );
 
-// const text = new SVGAsset(
-//   `<svg viewBox='0 0 290 500' width='290' height='325' xmlns='http://www.w3.org/2000/svg'>
-// <circle cx='31' cy='325' r='120px' fill='#c02aaa'/>
-// <text x="20" y="35" fill="black">My Text</text>
-// </svg>`,
-//   290,
-//   500
-// );
-
 const svgWithoutSize = {
   __typename__: "SVG" as const,
   width() {
@@ -75,7 +66,7 @@ const svgWithoutSize = {
   dispose() {},
   source() {
     return `<svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
-    <circle cx='10' cy='10' r='10' fill='#00FFFF'  />
+    <circle cx='10' cy='10' r='10' fill='#00FFFF'/>
   </svg>`;
   },
 };
@@ -204,14 +195,4 @@ describe("Displays SVGs", () => {
     );
     checkImage(image, docPath("opacity-tiger.png"));
   });
-
-  // itRunsE2eOnly("can render text", async () => {
-  //   const image = await surface.draw(
-  //     <>
-  //       <Fill color="white" />
-  //       <ImageSVG svg={text} x={0} y={0} width={800} height={800} />
-  //     </>
-  //   );
-  //   checkImage(image, "snapshots/svg/text.png");
-  // });
 });

externals/skia

@@ -0,0 +1,48 @@
+import os from "os";
+import fs from "fs";
+import { executeCmdSync } from "./utils";
+
+// Build instructions for building  build-libgrapheme-ios
+export const buildLibGraphemeiOS = async () => {
+  // Empty the generate_headers.py file
+  console.log("Patching the Skia buildscript 'generate_headers.py'...");
+  const file = fs.openSync(
+    "./third_party/libgrapheme/generate_headers.py",
+    "w"
+  );
+  fs.writeSync(
+    file,
+    "print('[generate_headers.py] This file has been patched by the RN Skia build script.')"
+  );
+  fs.closeSync(file);
+  console.log("Finished patching generate_headers.py.");
+
+  console.log("Building libgrapheme for iOS...");
+
+  // Change to the third_party/libgrapheme directory
+  const currentDir = process.cwd();
+  try {
+    process.chdir("./third_party/externals/libgrapheme");
+    // Check if the output has been created - if so skip the build
+    if (!fs.existsSync("./gen/case.o")) {
+      // Run configure
+      console.log("Configuring libgrapheme...");
+      executeCmdSync("./configure");
+      // Up the file handle limit on mac:
+      if (os.platform() === "darwin") {
+        console.log(
+          "Extending file handle count on Mac to avoid `Too many open files` error..."
+        );
+        executeCmdSync("ulimit -n 4096");
+      }
+      // Run make
+      console.log("Building libgrapheme...");
+      executeCmdSync("make");
+      console.log("libgrapheme successfully built.");
+    } else {
+      console.log("Skipping configuring libgrapheme as it is already built.");
+    }
+  } finally {
+    process.chdir(currentDir);
+  }
+};

package/src/__tests__/snapshots/paragraph/paragraph-bounding-box-ios.png

@@ -1,8 +1,9 @@
 import { configurations } from "./skia-configuration";
-import { executeCmd, executeCmdSync } from "./utils";
+import { executeCmd } from "./utils";
 
 const configuration = configurations.ios;
 
+console.log("Building skia for iOS...");
 let command = "";
 
 Object.keys(configuration.targets).forEach((targetKey) => {
@@ -11,7 +12,6 @@ Object.keys(configuration.targets).forEach((targetKey) => {
     `yarn ts-node ./scripts/build-skia.ts ios ${targetKey}`;
 });
 
-console.log("Building skia for iOS...");
 executeCmd(command, "iOS", () => {
   console.log(`Done building skia for iOS.`);
 });

package/src/__tests__/snapshots/svg/text.png

@@ -1,7 +1,6 @@
 import { executeCmd, executeCmdSync } from "./utils";
 import { exit } from "process";
 import { commonArgs, configurations, PlatformName } from "./skia-configuration";
-
 const fs = require("fs");
 const typedKeys = <T extends object>(obj: T) => Object.keys(obj) as (keyof T)[];
 
@@ -190,12 +189,13 @@ try {
   executeCmdSync("PATH=../depot_tools/:$PATH python3 tools/git-sync-deps");
   console.log("gclient sync done");
 
-
-  // Generate libgrapheme headers
-  if (SelectedPlatform === "ios") {
-    console.log("Generating libgrapheme headers...");
-    const libgraphemeDir = `./third_party/externals/libgrapheme`;
-    executeCmdSync(`cd ${libgraphemeDir} && ./configure && make clean && make`);
+  // lets check for any dependencies
+  if (platform.dependencies) {
+    console.log(`Found dependencies for platform ${SelectedPlatform}`);
+    platform.dependencies.forEach((dep) => {
+      console.log(`Running dependency ${dep.name}`);
+      dep.executable();
+    });
   }
 
   try {

package/src/renderer/__tests__/e2e/SVG.spec.tsx

@@ -1,3 +1,6 @@
+import { buildLibGraphemeiOS } from "./build-libgrapheme-ios";
+import { executeCmdSync } from "./utils";
+
 const NdkDir: string = process.env.ANDROID_NDK ?? "";
 
 export const BUILD_WITH_PARAGRAPH = true;
@@ -70,6 +73,7 @@ export type Platform = {
   outputRoot: string;
   outputNames: string[];
   options?: Arg[];
+  dependencies?: { name: string; executable: () => void }[];
 };
 
 export const configurations: Configuration = {
@@ -160,5 +164,11 @@ export const configurations: Configuration = {
       "libsksg.a",
       ...ParagraphOutputs,
     ],
+    dependencies: [
+      {
+        name: "libgrapheme",
+        executable: buildLibGraphemeiOS,
+      },
+    ],
   },
 };