Merge pull request #530 from Shopify/decouple-reconciller

Decouple Skia from Reconciller

Author: chrfalch

docs/yarn.lock

@@ -2735,9 +2735,8 @@
   integrity sha512-W/J0fNYVO01tioHjvYWQ9m6RgndVtbElzYozBq1ZPrHO/iCzlqoySHl4gO/fpCl9QEFjvJfjPgtPMTMlsoq5DQ==
 
 "@shopify/react-native-skia@link:../package":
-  version "0.1.100"
-  dependencies:
-    react-reconciler "^0.26.2"
+  version "0.0.0"
+  uid ""
 
 "@sideway/address@^4.1.3":
   version "4.1.3"
@@ -4089,20 +4088,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001272, caniuse-lite@^1.0.30001280:
-  version "1.0.30001283"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001283.tgz#8573685bdae4d733ef18f78d44ba0ca5fe9e896b"
-  integrity sha512-9RoKo841j1GQFSJz/nCXOj0sD7tHBtlowjYlrqIUS812x9/emfBLBt6IyMz1zIaYc/eRL8Cs6HPUVi2Hzq4sIg==
-
-caniuse-lite@^1.0.30001312:
-  version "1.0.30001312"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz#e11eba4b87e24d22697dae05455d5aea28550d5f"
-  integrity sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==
-
-caniuse-lite@^1.0.30001317:
-  version "1.0.30001327"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001327.tgz#c1546d7d7bb66506f0ccdad6a7d07fc6d668c858"
-  integrity sha512-1/Cg4jlD9qjZzhbzkzEaAC2JHsP0WrOc8Rd/3a3LuajGzGWR/hD7TVyvq99VqmTy99eVh8Zkmdq213OgvgXx7w==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001272, caniuse-lite@^1.0.30001280, caniuse-lite@^1.0.30001312, caniuse-lite@^1.0.30001317:
+  version "1.0.30001344"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001344.tgz"
+  integrity sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g==
 
 ccount@^1.0.0, ccount@^1.0.3:
   version "1.1.0"

example/src/Examples/API/Gradients.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import { StyleSheet, Dimensions, ScrollView } from "react-native";
 import {
+  bottomRight,
+  center,
+  topLeft,
   Skia,
   rect,
   Canvas,
   Rect,
   LinearGradient,
-  topLeft,
-  bottomRight,
-  center,
   RadialGradient,
   TwoPointConicalGradient,
   SweepGradient,

package/cpp/api/JsiSkPaint.h

@@ -215,9 +215,11 @@ Returns the underlying object from a host object of this type
   static const jsi::HostFunctionType
   createCtor(std::shared_ptr<RNSkPlatformContext> context) {
     return JSI_HOST_FUNCTION_LAMBDA {
+      auto paint = SkPaint();
+      paint.setAntiAlias(true);
       // Return the newly constructed object
       return jsi::Object::createFromHostObject(
-          runtime, std::make_shared<JsiSkPaint>(std::move(context), SkPaint()));
+          runtime, std::make_shared<JsiSkPaint>(std::move(context), paint));
     };
   }
 };

package/jest.config.js

@@ -5,4 +5,12 @@ module.exports = {
   // Ignore lib folder - contains build artifacts and should
   // not be probed for tests
   modulePathIgnorePatterns: ["<rootDir>/lib/typescript", "setup.ts$"],
+  transform: {
+    "^.+\\.(js|jsx)$": "ts-jest",
+  },
+  globals: {
+    "ts-jest": {
+      tsconfig: "./tsconfig.test.json",
+    },
+  },
 };

package/src/__tests__/setup.ts

@@ -0,0 +1,24 @@
+import path from "path";
+import fs from "fs";
+
+import type { Surface } from "canvaskit-wasm";
+
+import type { SkSurface } from "../skia";
+import { toValue } from "../skia/web/api/Host";
+
+export const processResult = (
+  surface: SkSurface,
+  relPath: string,
+  overwrite = false
+) => {
+  toValue<Surface>(surface).flush();
+  const image = surface.makeImageSnapshot();
+  const png = image.encodeToBytes();
+  const p = path.resolve(__dirname, relPath);
+  if (fs.existsSync(p) && !overwrite) {
+    const ref = fs.readFileSync(p);
+    expect(ref.equals(png)).toBe(true);
+  } else {
+    fs.writeFileSync(p, png);
+  }
+};