Minor improvement to test Skia API (#1154)

example/src/Tests/Tests.tsx

@@ -1,13 +1,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { SkiaDomView } from "@shopify/react-native-skia";
-import { Canvas } from "@shopify/react-native-skia";
+import { Group, Canvas, Skia } from "@shopify/react-native-skia";
 import React, { useEffect, useRef, useState } from "react";
-import { Text, View } from "react-native";
+import { PixelRatio, Text, View } from "react-native";
 
 import type { SerializedNode } from "./deserialize";
-import { parseProps, parseNode } from "./deserialize";
+import { parseNode } from "./deserialize";
 import { useClient } from "./useClient";
 
+const scale = 3 / PixelRatio.get();
+const size = 256 * scale;
+
 export const Tests = () => {
   const ref = useRef<SkiaDomView>(null);
   const client = useClient();
@@ -20,7 +23,9 @@ export const Tests = () => {
           client.send(
             JSON.stringify(
               // eslint-disable-next-line no-eval
-              eval(`(function Main(){${tree.code}})`).call(parseProps(tree.ctx))
+              eval(`(function Main(){const {Skia} = this;${tree.code}})`).call({
+                Skia,
+              })
             )
           );
         } else {
@@ -52,8 +57,8 @@ export const Tests = () => {
   return (
     <View style={{ flex: 1 }}>
       <Text>💚 Waiting for the server to send tests</Text>
-      <Canvas style={{ width: 256, height: 256 }} ref={ref}>
-        {drawing}
+      <Canvas style={{ width: size, height: size }} ref={ref}>
+        <Group transform={[{ scale }]}>{drawing}</Group>
       </Canvas>
     </View>
   );

example/src/Tests/deserialize.ts

@@ -21,7 +21,7 @@ export const parseNode = (serializedNode: SerializedNode): any => {
   );
 };
 
-export const parseProps = (props: SerializedProps) => {
+const parseProps = (props: SerializedProps) => {
   const newProps: SerializedProps = {};
   Object.keys(props).forEach((key) => {
     newProps[key] = parseProp(props[key]);

package/android/cpp/rnskia-android/RNSkAndroidPlatformContext.h

@@ -24,9 +24,7 @@ class RNSkAndroidPlatformContext : public RNSkPlatformContext {
         [this]() { notifyDrawLoop(false); });
   }
 
-  ~RNSkAndroidPlatformContext() {
-    stopDrawLoop();
-  }
+  ~RNSkAndroidPlatformContext() { stopDrawLoop(); }
 
   void performStreamOperation(
       const std::string &sourceUri,

package/android/cpp/rnskia-android/SkiaOpenGLRenderer.h

@@ -16,12 +16,12 @@
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
 
-#include "include/gpu/GrDirectContext.h"
-#include "include/gpu/gl/GrGLInterface.h"
 #include "SkCanvas.h"
 #include "SkColorSpace.h"
 #include "SkPicture.h"
 #include "SkSurface.h"
+#include "include/gpu/GrDirectContext.h"
+#include "include/gpu/gl/GrGLInterface.h"
 
 #pragma clang diagnostic pop
 

package/cpp/api/JsiSkPathEffectFactory.h

@@ -12,12 +12,12 @@
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
 
-#include "include/effects/Sk1DPathEffect.h"
-#include "include/effects/Sk2DPathEffect.h"
 #include "SkCornerPathEffect.h"
 #include "SkDashPathEffect.h"
 #include "SkDiscretePathEffect.h"
 #include "SkPathEffect.h"
+#include "include/effects/Sk1DPathEffect.h"
+#include "include/effects/Sk2DPathEffect.h"
 
 #pragma clang diagnostic pop
 

package/cpp/api/JsiSkPathFactory.h

@@ -11,9 +11,9 @@
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
 
-#include <RNSkLog.h>
 #include "SkPath.h"
 #include "SkPathOps.h"
+#include <RNSkLog.h>
 
 #pragma clang diagnostic pop
 

package/cpp/rnskia/RNSkPlatformContext.h

@@ -188,7 +188,8 @@ class RNSkPlatformContext {
     }
   }
 
-  // default implementation does nothing, so it can be called from virtual destructor.
+  // default implementation does nothing, so it can be called from virtual
+  // destructor.
   virtual void startDrawLoop() {}
   virtual void stopDrawLoop() {}
 

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

@@ -78,13 +78,12 @@ describe("Drawings", () => {
   });
 
   it("Should do rect marshalling properly", async () => {
-    const { Skia } = importSkia();
     const result = await surface.eval(
       `
-this.path.addRect({ x: 0, y: 0, width: 100, height: 100 });
-return this.path.getBounds().width;
-`,
-      { path: Skia.Path.Make() }
+const path = Skia.Path.Make();
+path.addRect({ x: 0, y: 0, width: 100, height: 100 });
+return path.getBounds().width;
+`
     );
     expect(result).toBe(100);
   });

package/src/renderer/__tests__/setup.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import fs from "fs";
 import path from "path";
@@ -305,7 +304,7 @@ type Assets = Map<SkFont, number[]>;
 
 interface TestingSurface {
   init(): Promise<void>;
-  eval(code: string, ctx: {}): Promise<string>;
+  eval(code: string): Promise<string>;
   draw(node: ReactNode, assets?: Assets): Promise<SkImage>;
   dispose(): void;
   width: number;
@@ -326,9 +325,13 @@ class LocalSurface implements TestingSurface {
 
   dispose(): void {}
 
-  eval(code: string, ctx: {}): Promise<string> {
-    // eslint-disable-next-line no-eval
-    return Promise.resolve(eval(`(function Main(){${code}})`).call(ctx));
+  eval(code: string): Promise<string> {
+    return Promise.resolve(
+      // eslint-disable-next-line no-eval
+      eval(`(function Main(){const {Skia} = this;${code}})`).call({
+        Skia: global.SkiaApi,
+      })
+    );
   }
 
   draw(node: ReactNode): Promise<SkImage> {
@@ -373,19 +376,14 @@ class RemoteSurface implements TestingSurface {
     }
   }
 
-  eval(code: string, ctx: { [key: string]: any }): Promise<string> {
+  eval(code: string): Promise<string> {
     this.assertInit();
     return new Promise((resolve) => {
       const client = this.client!;
       client!.once("message", (raw: Buffer) => {
         resolve(JSON.parse(raw.toString()));
       });
-
-      const newCtx: { [key: string]: any } = {};
-      Object.keys(ctx).forEach((key) => {
-        newCtx[key] = serializeSkOjects(ctx[key], new Map());
-      });
-      client!.send(JSON.stringify({ code, ctx: newCtx }));
+      client!.send(JSON.stringify({ code }));
     });
   }