@shopify/react-native-skia 1.11.1 → 1.11.3

package/src/renderer/HostComponents.ts

@@ -1,399 +0,0 @@
-import { NodeType } from "../dom/types";
-import type {
-  DeclarationNode,
-  FractalNoiseProps,
-  RenderNode,
-  CircleProps,
-  DrawingNodeProps,
-  ImageProps,
-  PaintProps,
-  PathProps,
-  LineProps,
-  OvalProps,
-  DiffRectProps,
-  PointsProps,
-  RectProps,
-  RoundedRectProps,
-  TextProps,
-  VerticesProps,
-  BlurMaskFilterProps,
-  BlendImageFilterProps,
-  BlurImageFilterProps,
-  DisplacementMapImageFilterProps,
-  DropShadowImageFilterProps,
-  OffsetImageFilterProps,
-  RuntimeShaderImageFilterProps,
-  MatrixColorFilterProps,
-  ShaderProps,
-  ImageShaderProps,
-  LinearGradientProps,
-  GroupProps,
-  PatchProps,
-  BlendColorFilterProps,
-  DashPathEffectProps,
-  DiscretePathEffectProps,
-  CornerPathEffectProps,
-  Line2DPathEffectProps,
-  Path1DPathEffectProps,
-  Path2DPathEffectProps,
-  TextPathProps,
-  TextBlobProps,
-  GlyphsProps,
-  TwoPointConicalGradientProps,
-  TurbulenceProps,
-  SweepGradientProps,
-  RadialGradientProps,
-  ColorProps,
-  PictureProps,
-  ImageSVGProps,
-  LerpColorFilterProps,
-  BoxProps,
-  BoxShadowProps,
-  ParagraphProps,
-  AtlasProps,
-} from "../dom/types";
-import type { ChildrenProps } from "../dom/types/Common";
-import type {
-  BlendProps,
-  MorphologyImageFilterProps,
-} from "../dom/types/ImageFilters";
-
-import type { Container } from "./Container";
-import { exhaustiveCheck } from "./typeddash";
-import type { SkiaProps } from "./processors";
-
-declare global {
-  var SkiaDomApi: {
-    RectNode: (props: RectProps) => RenderNode<RectProps>;
-    RRectNode: (props: RoundedRectProps) => RenderNode<RoundedRectProps>;
-    GroupNode: (props: GroupProps) => RenderNode<GroupProps>;
-    PaintNode: (props: PaintProps) => DeclarationNode<PaintProps>;
-    FillNode: (props: PaintProps) => RenderNode<PaintProps>;
-    CircleNode: (props: CircleProps) => RenderNode<CircleProps>;
-    PathNode: (props: PathProps) => RenderNode<PathProps>;
-    LineNode: (props: LineProps) => RenderNode<LineProps>;
-    ImageNode: (props: ImageProps) => RenderNode<ImageProps>;
-    OvalNode: (props: OvalProps) => RenderNode<OvalProps>;
-    PatchNode: (props: PatchProps) => RenderNode<PatchProps>;
-    PointsNode: (props: PointsProps) => RenderNode<PointsProps>;
-    DiffRectNode: (props: DiffRectProps) => RenderNode<DiffRectProps>;
-    AtlasNode: (props: AtlasProps) => RenderNode<AtlasProps>;
-
-    // Mask filters
-    BlurMaskFilterNode: (
-      props: BlurMaskFilterProps
-    ) => DeclarationNode<BlurMaskFilterProps>;
-
-    // Path effects
-    DashPathEffectNode: (
-      props: DashPathEffectProps
-    ) => DeclarationNode<DashPathEffectProps>;
-    DiscretePathEffectNode: (
-      props: DiscretePathEffectProps
-    ) => DeclarationNode<DiscretePathEffectProps>;
-    CornerPathEffectNode: (
-      props: CornerPathEffectProps
-    ) => DeclarationNode<CornerPathEffectProps>;
-    Path1DPathEffectNode: (
-      props: Path1DPathEffectProps
-    ) => DeclarationNode<Path1DPathEffectProps>;
-    Path2DPathEffectNode: (
-      props: Path2DPathEffectProps
-    ) => DeclarationNode<Path2DPathEffectProps>;
-    Line2DPathEffectNode: (
-      props: Line2DPathEffectProps
-    ) => DeclarationNode<Line2DPathEffectProps>;
-    SumPathEffectNode: () => DeclarationNode<null>;
-
-    // Image filters
-    BlendImageFilterNode: (
-      props: BlendImageFilterProps
-    ) => DeclarationNode<BlendImageFilterProps>;
-    DropShadowImageFilterNode: (
-      props: DropShadowImageFilterProps
-    ) => DeclarationNode<DropShadowImageFilterProps>;
-    DisplacementMapImageFilterNode: (
-      props: DisplacementMapImageFilterProps
-    ) => DeclarationNode<DisplacementMapImageFilterProps>;
-    BlurImageFilterNode: (
-      props: BlurImageFilterProps
-    ) => DeclarationNode<BlurImageFilterProps>;
-    OffsetImageFilterNode: (
-      props: OffsetImageFilterProps
-    ) => DeclarationNode<OffsetImageFilterProps>;
-    MorphologyImageFilterNode: (
-      props: MorphologyImageFilterProps
-    ) => DeclarationNode<MorphologyImageFilterProps>;
-    RuntimeShaderImageFilterNode: (
-      props: RuntimeShaderImageFilterProps
-    ) => DeclarationNode<RuntimeShaderImageFilterProps>;
-
-    // Color filters
-    MatrixColorFilterNode: (
-      props: MatrixColorFilterProps
-    ) => DeclarationNode<MatrixColorFilterProps>;
-    BlendColorFilterNode: (
-      props: BlendColorFilterProps
-    ) => DeclarationNode<BlendColorFilterProps>;
-    LinearToSRGBGammaColorFilterNode: () => DeclarationNode<null>;
-    SRGBToLinearGammaColorFilterNode: () => DeclarationNode<null>;
-    LumaColorFilterNode: () => DeclarationNode<null>;
-    LerpColorFilterNode: (
-      props: LerpColorFilterProps
-    ) => DeclarationNode<LerpColorFilterProps>;
-
-    // Shaders
-    ShaderNode: (props: ShaderProps) => DeclarationNode<ShaderProps>;
-    ImageShaderNode: (
-      props: ImageShaderProps
-    ) => DeclarationNode<ImageShaderProps>;
-    ColorShaderNode: (props: ColorProps) => DeclarationNode<ColorProps>;
-    TurbulenceNode: (
-      props: TurbulenceProps
-    ) => DeclarationNode<TurbulenceProps>;
-    FractalNoiseNode: (
-      props: FractalNoiseProps
-    ) => DeclarationNode<FractalNoiseProps>;
-    LinearGradientNode: (
-      props: LinearGradientProps
-    ) => DeclarationNode<LinearGradientProps>;
-    RadialGradientNode: (
-      props: RadialGradientProps
-    ) => DeclarationNode<RadialGradientProps>;
-    SweepGradientNode: (
-      props: SweepGradientProps
-    ) => DeclarationNode<SweepGradientProps>;
-    TwoPointConicalGradientNode: (
-      props: TwoPointConicalGradientProps
-    ) => DeclarationNode<TwoPointConicalGradientProps>;
-    PictureNode: (props: PictureProps) => RenderNode<PictureProps>;
-    ImageSVGNode: (props: ImageSVGProps) => RenderNode<ImageSVGProps>;
-    VerticesNode: (props: VerticesProps) => RenderNode<VerticesProps>;
-    TextNode: (prop: TextProps) => RenderNode<TextProps>;
-    TextPathNode: (prop: TextPathProps) => RenderNode<TextPathProps>;
-    TextBlobNode: (prop: TextBlobProps) => RenderNode<TextBlobProps>;
-    GlyphsNode: (prop: GlyphsProps) => RenderNode<GlyphsProps>;
-    BlendNode: (prop: BlendProps) => DeclarationNode<BlendProps>;
-    BackdropFilterNode: (prop: ChildrenProps) => RenderNode<ChildrenProps>;
-    BoxNode: (prop: BoxProps) => RenderNode<BoxProps>;
-    BoxShadowNode: (prop: BoxShadowProps) => DeclarationNode<BoxShadowProps>;
-    LayerNode: (prop: ChildrenProps) => RenderNode<ChildrenProps>;
-
-    // Paragraph
-    ParagraphNode: (props: ParagraphProps) => RenderNode<ParagraphProps>;
-  };
-
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace JSX {
-    interface IntrinsicElements {
-      skGroup: SkiaProps<GroupProps>;
-      skLayer: SkiaProps<ChildrenProps>;
-      skPaint: SkiaProps<PaintProps>;
-
-      // Drawings
-      skFill: SkiaProps<DrawingNodeProps>;
-      skImage: SkiaProps<ImageProps>;
-      skCircle: SkiaProps<CircleProps>;
-      skPath: SkiaProps<PathProps>;
-      skLine: SkiaProps<LineProps>;
-      skOval: SkiaProps<OvalProps>;
-      skPatch: SkiaProps<PatchProps>;
-      skPoints: SkiaProps<PointsProps>;
-      skRect: SkiaProps<RectProps>;
-      skRRect: SkiaProps<RoundedRectProps>;
-      skAtlas: SkiaProps<AtlasProps>;
-      skVertices: SkiaProps<VerticesProps>;
-      skText: SkiaProps<TextProps>;
-      skTextPath: SkiaProps<TextPathProps>;
-      skTextBlob: SkiaProps<TextBlobProps>;
-      skGlyphs: SkiaProps<GlyphsProps>;
-      skDiffRect: SkiaProps<DiffRectProps>;
-      skPicture: SkiaProps<PictureProps>;
-      skImageSVG: SkiaProps<ImageSVGProps>;
-
-      // BlurMaskFilters
-      skBlurMaskFilter: SkiaProps<BlurMaskFilterProps>;
-
-      // ImageFilters
-      skBlendImageFilter: SkiaProps<BlendImageFilterProps>;
-      skBlurImageFilter: SkiaProps<BlurImageFilterProps>;
-      skOffsetImageFilter: SkiaProps<OffsetImageFilterProps>;
-      skDropShadowImageFilter: SkiaProps<DropShadowImageFilterProps>;
-      skDisplacementMapImageFilter: SkiaProps<DisplacementMapImageFilterProps>;
-      skRuntimeShaderImageFilter: SkiaProps<RuntimeShaderImageFilterProps>;
-      skMorphologyImageFilter: SkiaProps<MorphologyImageFilterProps>;
-
-      // ColorFilters
-      skMatrixColorFilter: SkiaProps<MatrixColorFilterProps>;
-      skBlendColorFilter: SkiaProps<BlendColorFilterProps>;
-      skLinearToSRGBGammaColorFilter: SkiaProps<ChildrenProps>;
-      skSRGBToLinearGammaColorFilter: SkiaProps<ChildrenProps>;
-      skLumaColorFilter: SkiaProps<ChildrenProps>;
-      skLerpColorFilter: SkiaProps<LerpColorFilterProps>;
-
-      // Shaders
-      skShader: SkiaProps<ShaderProps>;
-      skImageShader: SkiaProps<ImageShaderProps>;
-      skColorShader: SkiaProps<ColorProps>;
-      skTurbulence: SkiaProps<TurbulenceProps>;
-      skFractalNoise: SkiaProps<FractalNoiseProps>;
-      skLinearGradient: SkiaProps<LinearGradientProps>;
-      skRadialGradient: SkiaProps<RadialGradientProps>;
-      skSweepGradient: SkiaProps<SweepGradientProps>;
-      skTwoPointConicalGradient: SkiaProps<TwoPointConicalGradientProps>;
-
-      // Path Effects
-      skDiscretePathEffect: SkiaProps<DiscretePathEffectProps>;
-      skDashPathEffect: SkiaProps<DashPathEffectProps>;
-      skPath1DPathEffect: SkiaProps<Path1DPathEffectProps>;
-      skPath2DPathEffect: SkiaProps<Path2DPathEffectProps>;
-      skCornerPathEffect: SkiaProps<CornerPathEffectProps>;
-      skSumPathEffect: ChildrenProps;
-      skLine2DPathEffect: SkiaProps<Line2DPathEffectProps>;
-
-      // Mixed declarations/drawings
-      skBlend: SkiaProps<BlendProps>;
-      skBackdropFilter: SkiaProps<ChildrenProps>;
-      skBox: SkiaProps<BoxProps>;
-      skBoxShadow: SkiaProps<BoxShadowProps>;
-
-      // Paragraph
-      skParagraph: SkiaProps<ParagraphProps>;
-    }
-  }
-}
-
-export const createNode = (
-  container: Container,
-  type: NodeType,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  props: any
-) => {
-  const { Sk } = container;
-  switch (type) {
-    case NodeType.Layer:
-      return Sk.Layer(props);
-    case NodeType.Group:
-      return Sk.Group(props);
-    case NodeType.Paint:
-      return Sk.Paint(props);
-    // Drawings
-    case NodeType.Fill:
-      return Sk.Fill(props);
-    case NodeType.Image:
-      return Sk.Image(props);
-    case NodeType.Circle:
-      return Sk.Circle(props);
-    case NodeType.Path:
-      return Sk.Path(props);
-    case NodeType.Line:
-      return Sk.Line(props);
-    case NodeType.Oval:
-      return Sk.Oval(props);
-    case NodeType.Patch:
-      return Sk.Patch(props);
-    case NodeType.Points:
-      return Sk.Points(props);
-    case NodeType.Rect:
-      return Sk.Rect(props);
-    case NodeType.RRect:
-      return Sk.RRect(props);
-    case NodeType.Vertices:
-      return Sk.Vertices(props);
-    case NodeType.Text:
-      return Sk.Text(props);
-    case NodeType.TextPath:
-      return Sk.TextPath(props);
-    case NodeType.TextBlob:
-      return Sk.TextBlob(props);
-    case NodeType.Glyphs:
-      return Sk.Glyphs(props);
-    case NodeType.Atlas:
-      return Sk.Atlas(props);
-    case NodeType.DiffRect:
-      return Sk.DiffRect(props);
-    case NodeType.Picture:
-      return Sk.Picture(props);
-    case NodeType.ImageSVG:
-      return Sk.ImageSVG(props);
-    // Mask Filter
-    case NodeType.BlurMaskFilter:
-      return Sk.BlurMaskFilter(props);
-    // Image Filter
-    case NodeType.BlendImageFilter:
-      return Sk.BlendImageFilter(props);
-    case NodeType.BlurImageFilter:
-      return Sk.BlurImageFilter(props);
-    case NodeType.OffsetImageFilter:
-      return Sk.OffsetImageFilter(props);
-    case NodeType.DropShadowImageFilter:
-      return Sk.DropShadowImageFilter(props);
-    case NodeType.DisplacementMapImageFilter:
-      return Sk.DisplacementMapImageFilter(props);
-    case NodeType.MorphologyImageFilter:
-      return Sk.MorphologyImageFilter(props);
-    case NodeType.RuntimeShaderImageFilter:
-      return Sk.RuntimeShaderImageFilter(props);
-    // Color Filter
-    case NodeType.MatrixColorFilter:
-      return Sk.MatrixColorFilter(props);
-    case NodeType.BlendColorFilter:
-      return Sk.BlendColorFilter(props);
-    case NodeType.LerpColorFilter:
-      return Sk.LerpColorFilter(props);
-    case NodeType.LumaColorFilter:
-      return Sk.LumaColorFilter();
-    case NodeType.LinearToSRGBGammaColorFilter:
-      return Sk.LinearToSRGBGammaColorFilter();
-    case NodeType.SRGBToLinearGammaColorFilter:
-      return Sk.SRGBToLinearGammaColorFilter();
-    // Shader
-    case NodeType.Shader:
-      return Sk.Shader(props);
-    case NodeType.ImageShader:
-      return Sk.ImageShader(props);
-    case NodeType.ColorShader:
-      return Sk.ColorShader(props);
-    case NodeType.Turbulence:
-      return Sk.Turbulence(props);
-    case NodeType.FractalNoise:
-      return Sk.FractalNoise(props);
-    case NodeType.LinearGradient:
-      return Sk.LinearGradient(props);
-    case NodeType.RadialGradient:
-      return Sk.RadialGradient(props);
-    case NodeType.SweepGradient:
-      return Sk.SweepGradient(props);
-    case NodeType.TwoPointConicalGradient:
-      return Sk.TwoPointConicalGradient(props);
-    // Path Effect
-    case NodeType.CornerPathEffect:
-      return Sk.CornerPathEffect(props);
-    case NodeType.DiscretePathEffect:
-      return Sk.DiscretePathEffect(props);
-    case NodeType.DashPathEffect:
-      return Sk.DashPathEffect(props);
-    case NodeType.Path1DPathEffect:
-      return Sk.Path1DPathEffect(props);
-    case NodeType.Path2DPathEffect:
-      return Sk.Path2DPathEffect(props);
-    case NodeType.SumPathEffect:
-      return Sk.SumPathEffect();
-    case NodeType.Line2DPathEffect:
-      return Sk.Line2DPathEffect(props);
-    // Mixed
-    case NodeType.Blend:
-      return Sk.Blend(props);
-    case NodeType.BackdropFilter:
-      return Sk.BackdropFilter(props);
-    case NodeType.Box:
-      return Sk.Box(props);
-    case NodeType.BoxShadow:
-      return Sk.BoxShadow(props);
-    // Paragraph
-    case NodeType.Paragraph:
-      return Sk.Paragraph(props);
-    default:
-      return exhaustiveCheck(type);
-  }
-};

package/src/renderer/HostConfig.ts

@@ -1,258 +0,0 @@
-/*global NodeJS*/
-import type { Fiber, HostConfig } from "react-reconciler";
-import { DefaultEventPriority } from "react-reconciler/constants";
-
-import type { NodeType, Node } from "../dom/types";
-import {
-  bindReanimatedProps,
-  extractReanimatedProps,
-  unbindReanimatedNode,
-} from "../external/reanimated/renderHelpers";
-
-import type { Container } from "./Container";
-import { createNode } from "./HostComponents";
-import { shallowEq } from "./typeddash";
-
-const DEBUG = false;
-export const debug = (...args: Parameters<typeof console.log>) => {
-  if (DEBUG) {
-    console.log(...args);
-  }
-};
-
-type Instance = Node<unknown>;
-
-type Props = object;
-type TextInstance = Node<unknown>;
-type SuspenseInstance = Instance;
-type HydratableInstance = Instance;
-type PublicInstance = Instance;
-type HostContext = null;
-type UpdatePayload = Container;
-type ChildSet = unknown;
-type TimeoutHandle = NodeJS.Timeout;
-type NoTimeout = -1;
-
-type SkiaHostConfig = HostConfig<
-  NodeType,
-  Props,
-  Container,
-  Instance,
-  TextInstance,
-  SuspenseInstance,
-  HydratableInstance,
-  PublicInstance,
-  HostContext,
-  UpdatePayload,
-  ChildSet,
-  TimeoutHandle,
-  NoTimeout
->;
-
-const appendNode = (parent: Node<unknown>, child: Node<unknown>) => {
-  parent.addChild(child);
-};
-
-const removeNode = (
-  parent: Node<unknown>,
-  child: Node<unknown>,
-  unmounted = false
-) => {
-  // If the drawing is unmounted we don't want to update it.
-  // We can just stop the reanimated mappers
-  unbindReanimatedNode(child);
-  if (!unmounted) {
-    parent.removeChild(child);
-  }
-};
-
-const insertBefore = (
-  parent: Node<unknown>,
-  child: Node<unknown>,
-  before: Node<unknown>
-) => {
-  parent.insertChildBefore(child, before);
-};
-
-export const skHostConfig: SkiaHostConfig = {
-  /**
-   * This function is used by the reconciler in order to calculate current time for prioritising work.
-   */
-  supportsMutation: true,
-  isPrimaryRenderer: false,
-  supportsPersistence: false,
-  supportsHydration: false,
-  //supportsMicrotask: true,
-
-  scheduleTimeout: setTimeout,
-  cancelTimeout: clearTimeout,
-  noTimeout: -1,
-
-  appendChildToContainer(container, child) {
-    debug("appendChildToContainer");
-    appendNode(container.root, child);
-  },
-
-  appendChild(parent, child) {
-    debug("appendChild", parent, child);
-    appendNode(parent, child);
-  },
-
-  getRootHostContext: (_rootContainerInstance: Container) => {
-    debug("getRootHostContext");
-    return null;
-  },
-
-  getChildHostContext(_parentHostContext, _type, _rootContainerInstance) {
-    debug("getChildHostContext");
-    return null;
-  },
-
-  shouldSetTextContent(_type, _props) {
-    return false;
-  },
-
-  createTextInstance(
-    _text,
-    _rootContainerInstance,
-    _hostContext,
-    _internalInstanceHandle
-  ) {
-    debug("createTextInstance");
-    // return SpanNode({}, text) as SkNode;
-    throw new Error("Text nodes are not supported yet");
-  },
-
-  createInstance(
-    type,
-    pristineProps,
-    container,
-    _hostContext,
-    _internalInstanceHandle
-  ) {
-    debug("createInstance", type);
-    const [props, reanimatedProps] = extractReanimatedProps(pristineProps);
-    const node = createNode(container, type, props);
-    bindReanimatedProps(container, node, reanimatedProps);
-    return node;
-  },
-
-  appendInitialChild(parentInstance, child) {
-    debug("appendInitialChild");
-    appendNode(parentInstance, child);
-  },
-
-  finalizeInitialChildren(
-    parentInstance,
-    _type,
-    _props,
-    _rootContainerInstance,
-    _hostContext
-  ) {
-    debug("finalizeInitialChildren", parentInstance);
-    return false;
-  },
-
-  commitMount() {
-    // if finalizeInitialChildren = true
-    debug("commitMount");
-  },
-
-  prepareForCommit(_containerInfo) {
-    debug("prepareForCommit");
-    return null;
-  },
-
-  resetAfterCommit(container) {
-    debug("resetAfterCommit");
-    container.redraw();
-  },
-
-  getPublicInstance(node: Instance) {
-    debug("getPublicInstance");
-    return node;
-  },
-
-  prepareUpdate: (
-    _instance,
-    type,
-    oldProps,
-    newProps,
-    rootContainerInstance,
-    _hostContext
-  ) => {
-    debug("prepareUpdate");
-    const propsAreEqual = shallowEq(oldProps, newProps);
-    if (propsAreEqual) {
-      return null;
-    }
-    debug("update ", type);
-    return rootContainerInstance;
-  },
-
-  commitUpdate(
-    instance,
-    updatePayload,
-    type,
-    prevProps,
-    nextProps,
-    _internalHandle
-  ) {
-    debug("commitUpdate: ", type);
-    if (shallowEq(prevProps, nextProps)) {
-      return;
-    }
-    const [props, reanimatedProps] = extractReanimatedProps(nextProps);
-    instance.setProps(props);
-    bindReanimatedProps(updatePayload, instance, reanimatedProps);
-  },
-
-  commitTextUpdate: (
-    _textInstance: TextInstance,
-    _oldText: string,
-    _newText: string
-  ) => {
-    //  textInstance.instance = newText;
-  },
-
-  clearContainer: (container) => {
-    debug("clearContainer");
-    container.root.children().forEach((child) => {
-      container.root.removeChild(child);
-    });
-  },
-
-  preparePortalMount: () => {
-    debug("preparePortalMount");
-  },
-
-  removeChild: (parent, child) => {
-    removeNode(parent, child);
-  },
-
-  removeChildFromContainer: (container, child) => {
-    removeNode(container.root, child, container.unmounted);
-  },
-
-  insertInContainerBefore: (container, child, before) => {
-    insertBefore(container.root, child, before);
-  },
-
-  insertBefore: (parent, child, before) => {
-    insertBefore(parent, child, before);
-  },
-
-  // see https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
-  getCurrentEventPriority: () => DefaultEventPriority,
-  beforeActiveInstanceBlur: () => {},
-  afterActiveInstanceBlur: () => {},
-  detachDeletedInstance: () => {},
-
-  getInstanceFromNode: function (_node): Fiber | null | undefined {
-    return null;
-  },
-  prepareScopeUpdate: function (_scopeInstance, _instance): void {},
-  getInstanceFromScope: function (_scopeInstance): Instance | null {
-    return null;
-  },
-};

package/src/renderer/Reconciler.tsx

@@ -1,54 +0,0 @@
-import type { ReactNode } from "react";
-import type { OpaqueRoot } from "react-reconciler";
-import ReactReconciler from "react-reconciler";
-
-import { skHostConfig, debug as hostDebug } from "./HostConfig";
-import { Container } from "./Container";
-
-const skiaReconciler = ReactReconciler(skHostConfig);
-
-skiaReconciler.injectIntoDevTools({
-  bundleType: 1,
-  version: "0.0.1",
-  rendererPackageName: "react-native-skia",
-});
-
-export class SkiaRoot {
-  private root: OpaqueRoot;
-  private container: Container;
-
-  constructor(
-    redraw: () => void = () => {},
-    getNativeId: () => number = () => 0
-  ) {
-    this.container = new Container(redraw, getNativeId);
-    this.root = skiaReconciler.createContainer(
-      this.container,
-      0,
-      null,
-      true,
-      null,
-      "",
-      console.error,
-      null
-    );
-  }
-
-  render(element: ReactNode) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    skiaReconciler.updateContainer(element as any, this.root, null, () => {
-      hostDebug("updateContainer");
-    });
-  }
-
-  unmount() {
-    this.container.unmounted = true;
-    skiaReconciler.updateContainer(null, this.root, null, () => {
-      hostDebug("unmountContainer");
-    });
-  }
-
-  get dom() {
-    return this.container.root;
-  }
-}