@shopify/react-native-skia 0.1.172 → 0.1.173

package/lib/typescript/src/dom/types/DeclarationContext.d.ts

@@ -0,0 +1,29 @@
+import type { SkShader, SkPaint, SkImageFilter, SkMaskFilter, SkPathEffect, Skia, SkColorFilter } from "../../skia/types";
+declare type Composer<T> = (outer: T, inner: T) => T;
+export declare const composeDeclarations: <T>(filters: T[], composer: Composer<T>) => T;
+declare class Declaration<T> {
+    private composer?;
+    private decls;
+    private indexes;
+    constructor(composer?: Composer<T> | undefined);
+    private get index();
+    save(): void;
+    restore(): void;
+    pop(): T | undefined;
+    push(decl: T): void;
+    popAll(): T[];
+    popAllAsOne(): T;
+}
+export declare class DeclarationContext {
+    private Skia;
+    readonly paints: Declaration<SkPaint>;
+    readonly maskFilters: Declaration<SkMaskFilter>;
+    readonly shaders: Declaration<SkShader>;
+    readonly pathEffects: Declaration<SkPathEffect>;
+    readonly imageFilters: Declaration<SkImageFilter>;
+    readonly colorFilters: Declaration<SkColorFilter>;
+    constructor(Skia: Skia);
+    save(): void;
+    restore(): void;
+}
+export {};

package/lib/typescript/src/dom/types/DrawingContext.d.ts

@@ -1,5 +1,22 @@
-import type { SkCanvas, SkPaint } from "../../skia/types";
+import type { SkCanvas, SkPaint, Skia } from "../../skia/types";
+import type { PaintProps } from "./Common";
+import { DeclarationContext } from "./DeclarationContext";
+import type { Node } from "./Node";
 export interface DrawingContext {
     canvas: SkCanvas;
     paint: SkPaint;
+    saveAndConcat(node: Node<PaintProps>, cache?: SkPaint): boolean;
+    restore(): void;
+    declarationCtx: DeclarationContext;
+}
+export declare class JsiDrawingContext implements DrawingContext {
+    private readonly Skia;
+    readonly canvas: SkCanvas;
+    paints: SkPaint[];
+    declarationCtx: DeclarationContext;
+    constructor(Skia: Skia, canvas: SkCanvas);
+    get paint(): SkPaint;
+    private save;
+    restore(): void;
+    saveAndConcat(node: Node<PaintProps>, cache?: SkPaint): boolean;
 }

package/lib/typescript/src/dom/types/Node.d.ts

@@ -1,7 +1,7 @@
-import type { SkColorFilter, SkImageFilter, SkMaskFilter, SkPaint, SkPathEffect, SkShader } from "../../skia/types";
 import type { GroupProps } from "./Common";
-import type { DrawingContext } from "./DrawingContext";
 import type { DeclarationType, NodeType } from "./NodeType";
+import type { DeclarationContext } from "./DeclarationContext";
+import type { DrawingContext } from "./DrawingContext";
 export interface Node<P> {
     type: NodeType;
     setProps(props: P): void;
@@ -13,16 +13,10 @@ export interface Node<P> {
     insertChildBefore(child: Node<unknown>, before: Node<unknown>): void;
 }
 export declare type Invalidate = () => void;
-export interface DeclarationNode<P, T, Nullable extends null | never = never> extends Node<P> {
+export interface DeclarationNode<P> extends Node<P> {
     declarationType: DeclarationType;
-    materialize(): T | Nullable;
+    decorate(ctx: DeclarationContext): void;
     setInvalidate(invalidate: Invalidate): void;
-    isPaint(): this is DeclarationNode<unknown, SkPaint>;
-    isImageFilter(): this is DeclarationNode<unknown, SkImageFilter>;
-    isColorFilter(): this is DeclarationNode<unknown, SkColorFilter>;
-    isShader(): this is DeclarationNode<unknown, SkShader>;
-    isMaskFilter(): this is DeclarationNode<unknown, SkMaskFilter>;
-    isPathEffect(): this is DeclarationNode<unknown, SkPathEffect>;
 }
 export interface RenderNode<P extends GroupProps> extends Node<P> {
     render(ctx: DrawingContext): void;

package/lib/typescript/src/dom/types/SkDOM.d.ts

@@ -1,4 +1,3 @@
-import type { SkImageFilter, SkMaskFilter, SkShader, SkColorFilter, SkPathEffect, SkPaint } from "../../skia/types";
 import type { ChildrenProps, GroupProps, PaintProps } from "./Common";
 import type { BlendImageFilterProps, BlurImageFilterProps, DropShadowImageFilterProps, OffsetImageFilterProps, RuntimeShaderImageFilterProps, DisplacementMapImageFilterProps, MorphologyImageFilterProps, BlendProps } from "./ImageFilters";
 import type { DeclarationNode, RenderNode } from "./Node";
@@ -7,14 +6,14 @@ import type { ImageProps, CircleProps, PathProps, CustomDrawingNodeProps, LinePr
 import type { BlurMaskFilterProps } from "./MaskFilters";
 import type { FractalNoiseProps, SweepGradientProps, ImageShaderProps, LinearGradientProps, ShaderProps, TurbulenceProps, TwoPointConicalGradientProps, RadialGradientProps, ColorProps } from "./Shaders";
 import type { CornerPathEffectProps, DashPathEffectProps, DiscretePathEffectProps, Line2DPathEffectProps, Path1DPathEffectProps, Path2DPathEffectProps } from "./PathEffects";
-declare type ImageFilterNode<P> = DeclarationNode<P, SkImageFilter>;
-declare type PathEffectNode<P> = DeclarationNode<P, SkPathEffect>;
-declare type NullablePathEffectNode<P> = DeclarationNode<P, SkPathEffect, null>;
+declare type ImageFilterNode<P> = DeclarationNode<P>;
+declare type PathEffectNode<P> = DeclarationNode<P>;
+declare type NullablePathEffectNode<P> = DeclarationNode<P>;
 declare type DrawingNode<P extends GroupProps> = RenderNode<P>;
 export interface SkDOM {
     Layer(props?: ChildrenProps): RenderNode<ChildrenProps>;
     Group(props?: GroupProps): RenderNode<GroupProps>;
-    Paint(props: PaintProps): DeclarationNode<PaintProps, SkPaint>;
+    Paint(props: PaintProps): DeclarationNode<PaintProps>;
     Fill(props?: DrawingNodeProps): DrawingNode<DrawingNodeProps>;
     Image(props: ImageProps): DrawingNode<ImageProps>;
     Circle(props: CircleProps): DrawingNode<CircleProps>;
@@ -34,7 +33,7 @@ export interface SkDOM {
     DiffRect(props: DiffRectProps): DrawingNode<DiffRectProps>;
     Picture(props: PictureProps): DrawingNode<PictureProps>;
     ImageSVG(props: ImageSVGProps): DrawingNode<ImageSVGProps>;
-    BlurMaskFilter(props: BlurMaskFilterProps): DeclarationNode<BlurMaskFilterProps, SkMaskFilter>;
+    BlurMaskFilter(props: BlurMaskFilterProps): DeclarationNode<BlurMaskFilterProps>;
     BlendImageFilter(props: BlendImageFilterProps): ImageFilterNode<BlendImageFilterProps>;
     BlurImageFilter(props: BlurImageFilterProps): ImageFilterNode<BlurImageFilterProps>;
     OffsetImageFilter(props: OffsetImageFilterProps): ImageFilterNode<OffsetImageFilterProps>;
@@ -42,21 +41,21 @@ export interface SkDOM {
     MorphologyImageFilter(props: MorphologyImageFilterProps): ImageFilterNode<MorphologyImageFilterProps>;
     DisplacementMapImageFilter(props: DisplacementMapImageFilterProps): ImageFilterNode<DisplacementMapImageFilterProps>;
     RuntimeShaderImageFilter(props: RuntimeShaderImageFilterProps): ImageFilterNode<RuntimeShaderImageFilterProps>;
-    MatrixColorFilter(props: MatrixColorFilterProps): DeclarationNode<MatrixColorFilterProps, SkColorFilter>;
-    BlendColorFilter(props: BlendColorFilterProps): DeclarationNode<BlendColorFilterProps, SkColorFilter>;
-    LumaColorFilter(): DeclarationNode<null, SkColorFilter>;
-    LinearToSRGBGammaColorFilter(): DeclarationNode<null, SkColorFilter>;
-    SRGBToLinearGammaColorFilter(): DeclarationNode<null, SkColorFilter>;
-    LerpColorFilter(props: LerpColorFilterProps): DeclarationNode<LerpColorFilterProps, SkColorFilter>;
-    Shader(props: ShaderProps): DeclarationNode<ShaderProps, SkShader>;
-    ImageShader(props: ImageShaderProps): DeclarationNode<ImageShaderProps, SkShader>;
-    ColorShader(props: ColorProps): DeclarationNode<ColorProps, SkShader>;
-    Turbulence(props: TurbulenceProps): DeclarationNode<TurbulenceProps, SkShader>;
-    FractalNoise(props: FractalNoiseProps): DeclarationNode<FractalNoiseProps, SkShader>;
-    LinearGradient(props: LinearGradientProps): DeclarationNode<LinearGradientProps, SkShader>;
-    RadialGradient(props: RadialGradientProps): DeclarationNode<RadialGradientProps, SkShader>;
-    SweepGradient(props: SweepGradientProps): DeclarationNode<SweepGradientProps, SkShader>;
-    TwoPointConicalGradient(props: TwoPointConicalGradientProps): DeclarationNode<TwoPointConicalGradientProps, SkShader>;
+    MatrixColorFilter(props: MatrixColorFilterProps): DeclarationNode<MatrixColorFilterProps>;
+    BlendColorFilter(props: BlendColorFilterProps): DeclarationNode<BlendColorFilterProps>;
+    LumaColorFilter(): DeclarationNode<null>;
+    LinearToSRGBGammaColorFilter(): DeclarationNode<null>;
+    SRGBToLinearGammaColorFilter(): DeclarationNode<null>;
+    LerpColorFilter(props: LerpColorFilterProps): DeclarationNode<LerpColorFilterProps>;
+    Shader(props: ShaderProps): DeclarationNode<ShaderProps>;
+    ImageShader(props: ImageShaderProps): DeclarationNode<ImageShaderProps>;
+    ColorShader(props: ColorProps): DeclarationNode<ColorProps>;
+    Turbulence(props: TurbulenceProps): DeclarationNode<TurbulenceProps>;
+    FractalNoise(props: FractalNoiseProps): DeclarationNode<FractalNoiseProps>;
+    LinearGradient(props: LinearGradientProps): DeclarationNode<LinearGradientProps>;
+    RadialGradient(props: RadialGradientProps): DeclarationNode<RadialGradientProps>;
+    SweepGradient(props: SweepGradientProps): DeclarationNode<SweepGradientProps>;
+    TwoPointConicalGradient(props: TwoPointConicalGradientProps): DeclarationNode<TwoPointConicalGradientProps>;
     CornerPathEffect(props: CornerPathEffectProps): NullablePathEffectNode<CornerPathEffectProps>;
     DiscretePathEffect(props: DiscretePathEffectProps): PathEffectNode<DiscretePathEffectProps>;
     DashPathEffect(props: DashPathEffectProps): PathEffectNode<DashPathEffectProps>;
@@ -64,9 +63,9 @@ export interface SkDOM {
     Path2DPathEffect(props: Path2DPathEffectProps): NullablePathEffectNode<Path2DPathEffectProps>;
     SumPathEffect(): NullablePathEffectNode<null>;
     Line2DPathEffect(props: Line2DPathEffectProps): NullablePathEffectNode<Line2DPathEffectProps>;
-    Blend(props: BlendProps): DeclarationNode<BlendProps, SkShader | SkImageFilter>;
+    Blend(props: BlendProps): DeclarationNode<BlendProps>;
     BackdropFilter(props: ChildrenProps): RenderNode<ChildrenProps>;
     Box(props: BoxProps): RenderNode<BoxProps>;
-    BoxShadow(props: BoxShadowProps): DeclarationNode<BoxShadowProps, BoxShadowProps>;
+    BoxShadow(props: BoxShadowProps): DeclarationNode<BoxShadowProps>;
 }
 export {};

package/lib/typescript/src/dom/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./DrawingContext";
+export * from "./DeclarationContext";
 export * from "./Node";
 export * from "./NodeType";
 export * from "./SkDOM";

package/lib/typescript/src/index.d.ts

@@ -1,6 +1,7 @@
 import "./skia/NativeSetup";
 export * from "./renderer";
 export * from "./renderer/Canvas";
+export * from "./renderer/Offscreen";
 export * from "./views";
 export * from "./skia";
 export * from "./external";

package/lib/typescript/src/renderer/DrawingContext.d.ts

@@ -1,6 +1,7 @@
 import type { DrawingInfo } from "../views";
-import type { Skia } from "../skia/types";
-import type { DrawingContext as DOMDrawingContext } from "../dom/types";
-export interface DrawingContext extends Omit<DrawingInfo, "touches">, DOMDrawingContext {
+import type { Skia, SkCanvas, SkPaint } from "../skia/types";
+export interface DrawingContext extends Omit<DrawingInfo, "touches"> {
     Skia: Skia;
+    canvas: SkCanvas;
+    paint: SkPaint;
 }

package/lib/typescript/src/renderer/HostComponents.d.ts

@@ -2,7 +2,7 @@ import { NodeType } from "../dom/types";
 import type { DeclarationNode, FractalNoiseProps, RenderNode, CircleProps, DrawingNodeProps, ImageProps, PaintProps, PathProps, CustomDrawingNodeProps, 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 } from "../dom/types";
 import type { ChildrenProps } from "../dom/types/Common";
 import type { BlendProps, MorphologyImageFilterProps } from "../dom/types/ImageFilters";
-import type { SkColorFilter, SkImageFilter, SkMaskFilter, SkPaint, SkPathEffect, SkRect, SkRRect, SkShader } from "../skia";
+import type { SkRect, SkRRect } from "../skia/types";
 import type { JsiDrawingNode } from "../dom/nodes/DrawingNode";
 import type { SkiaValue } from "../values";
 import type { Container } from "./Container";
@@ -14,7 +14,7 @@ declare global {
         RectNode: (props: RectProps) => JsiDrawingNode<RectProps, SkRect>;
         RRectNode: (props: RoundedRectProps) => JsiDrawingNode<RoundedRectProps, SkRRect>;
         GroupNode: (props: GroupProps) => RenderNode<GroupProps>;
-        PaintNode: (props: PaintProps) => DeclarationNode<PaintProps, SkPaint>;
+        PaintNode: (props: PaintProps) => DeclarationNode<PaintProps>;
         FillNode: (props: PaintProps) => RenderNode<PaintProps>;
         CircleNode: (props: CircleProps) => RenderNode<CircleProps>;
         PathNode: (props: PathProps) => RenderNode<PathProps>;
@@ -25,36 +25,36 @@ declare global {
         PatchNode: (props: PatchProps) => RenderNode<PatchProps>;
         PointsNode: (props: PointsProps) => RenderNode<PointsProps>;
         DiffRectNode: (props: DiffRectProps) => RenderNode<DiffRectProps>;
-        BlurMaskFilterNode: (props: BlurMaskFilterProps) => DeclarationNode<BlurMaskFilterProps, SkMaskFilter>;
-        DashPathEffectNode: (props: DashPathEffectProps) => DeclarationNode<DashPathEffectProps, SkPathEffect>;
-        DiscretePathEffectNode: (props: DiscretePathEffectProps) => DeclarationNode<DiscretePathEffectProps, SkPathEffect>;
-        CornerPathEffectNode: (props: CornerPathEffectProps) => DeclarationNode<CornerPathEffectProps, SkPathEffect>;
-        Path1DPathEffectNode: (props: Path1DPathEffectProps) => DeclarationNode<Path1DPathEffectProps, SkPathEffect>;
-        Path2DPathEffectNode: (props: Path2DPathEffectProps) => DeclarationNode<Path2DPathEffectProps, SkPathEffect>;
-        Line2DPathEffectNode: (props: Line2DPathEffectProps) => DeclarationNode<Line2DPathEffectProps, SkPathEffect>;
-        SumPathEffectNode: () => DeclarationNode<null, SkPathEffect>;
-        BlendImageFilterNode: (props: BlendImageFilterProps) => DeclarationNode<BlendImageFilterProps, SkImageFilter>;
-        DropShadowImageFilterNode: (props: DropShadowImageFilterProps) => DeclarationNode<DropShadowImageFilterProps, SkImageFilter>;
-        DisplacementMapImageFilterNode: (props: DisplacementMapImageFilterProps) => DeclarationNode<DisplacementMapImageFilterProps, SkImageFilter>;
-        BlurImageFilterNode: (props: BlurImageFilterProps) => DeclarationNode<BlurImageFilterProps, SkImageFilter>;
-        OffsetImageFilterNode: (props: OffsetImageFilterProps) => DeclarationNode<OffsetImageFilterProps, SkImageFilter>;
-        MorphologyImageFilterNode: (props: MorphologyImageFilterProps) => DeclarationNode<MorphologyImageFilterProps, SkImageFilter>;
-        RuntimeShaderImageFilterNode: (props: RuntimeShaderImageFilterProps) => DeclarationNode<RuntimeShaderImageFilterProps, SkImageFilter>;
-        MatrixColorFilterNode: (props: MatrixColorFilterProps) => DeclarationNode<MatrixColorFilterProps, SkColorFilter>;
-        BlendColorFilterNode: (props: BlendColorFilterProps) => DeclarationNode<BlendColorFilterProps, SkColorFilter>;
-        LinearToSRGBGammaColorFilterNode: () => DeclarationNode<null, SkColorFilter>;
-        SRGBToLinearGammaColorFilterNode: () => DeclarationNode<null, SkColorFilter>;
-        LumaColorFilterNode: () => DeclarationNode<null, SkColorFilter>;
-        LerpColorFilterNode: (props: LerpColorFilterProps) => DeclarationNode<LerpColorFilterProps, SkColorFilter>;
-        ShaderNode: (props: ShaderProps) => DeclarationNode<ShaderProps, SkShader>;
-        ImageShaderNode: (props: ImageShaderProps) => DeclarationNode<ImageShaderProps, SkShader>;
-        ColorShaderNode: (props: ColorProps) => DeclarationNode<ColorProps, SkShader>;
-        TurbulenceNode: (props: TurbulenceProps) => DeclarationNode<TurbulenceProps, SkShader>;
-        FractalNoiseNode: (props: FractalNoiseProps) => DeclarationNode<FractalNoiseProps, SkShader>;
-        LinearGradientNode: (props: LinearGradientProps) => DeclarationNode<LinearGradientProps, SkShader>;
-        RadialGradientNode: (props: RadialGradientProps) => DeclarationNode<RadialGradientProps, SkShader>;
-        SweepGradientNode: (props: SweepGradientProps) => DeclarationNode<SweepGradientProps, SkShader>;
-        TwoPointConicalGradientNode: (props: TwoPointConicalGradientProps) => DeclarationNode<TwoPointConicalGradientProps, SkShader>;
+        BlurMaskFilterNode: (props: BlurMaskFilterProps) => DeclarationNode<BlurMaskFilterProps>;
+        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>;
+        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>;
+        MatrixColorFilterNode: (props: MatrixColorFilterProps) => DeclarationNode<MatrixColorFilterProps>;
+        BlendColorFilterNode: (props: BlendColorFilterProps) => DeclarationNode<BlendColorFilterProps>;
+        LinearToSRGBGammaColorFilterNode: () => DeclarationNode<null>;
+        SRGBToLinearGammaColorFilterNode: () => DeclarationNode<null>;
+        LumaColorFilterNode: () => DeclarationNode<null>;
+        LerpColorFilterNode: (props: LerpColorFilterProps) => DeclarationNode<LerpColorFilterProps>;
+        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>;
@@ -62,10 +62,10 @@ declare global {
         TextPathNode: (prop: TextPathProps) => RenderNode<TextPathProps>;
         TextBlobNode: (prop: TextBlobProps) => RenderNode<TextBlobProps>;
         GlyphsNode: (prop: GlyphsProps) => RenderNode<GlyphsProps>;
-        BlendNode: (prop: BlendProps) => DeclarationNode<BlendProps, SkImageFilter>;
+        BlendNode: (prop: BlendProps) => DeclarationNode<BlendProps>;
         BackdropFilterNode: (prop: ChildrenProps) => RenderNode<ChildrenProps>;
         BoxNode: (prop: BoxProps) => RenderNode<BoxProps>;
-        BoxShadowNode: (prop: BoxShadowProps) => DeclarationNode<BoxShadowProps, BoxShadowProps>;
+        BoxShadowNode: (prop: BoxShadowProps) => DeclarationNode<BoxShadowProps>;
         LayerNode: (prop: ChildrenProps) => RenderNode<ChildrenProps>;
     };
     namespace JSX {
@@ -129,4 +129,4 @@ declare global {
         }
     }
 }
-export declare const createNode: (container: Container, type: NodeType, props: any) => RenderNode<ChildrenProps> | DeclarationNode<PaintProps, SkPaint, never> | DeclarationNode<BlurMaskFilterProps, SkMaskFilter, never> | DeclarationNode<BlendImageFilterProps, SkImageFilter, never> | DeclarationNode<BlurImageFilterProps, SkImageFilter, never> | DeclarationNode<OffsetImageFilterProps, SkImageFilter, never> | DeclarationNode<DropShadowImageFilterProps, SkImageFilter, never> | DeclarationNode<MorphologyImageFilterProps, SkImageFilter, never> | DeclarationNode<DisplacementMapImageFilterProps, SkImageFilter, never> | DeclarationNode<RuntimeShaderImageFilterProps, SkImageFilter, never> | DeclarationNode<MatrixColorFilterProps, SkColorFilter, never> | DeclarationNode<BlendColorFilterProps, SkColorFilter, never> | DeclarationNode<null, SkColorFilter, never> | DeclarationNode<LerpColorFilterProps, SkColorFilter, never> | DeclarationNode<ShaderProps, SkShader, never> | DeclarationNode<ImageShaderProps, SkShader, never> | DeclarationNode<ColorProps, SkShader, never> | DeclarationNode<TurbulenceProps, SkShader, never> | DeclarationNode<LinearGradientProps, SkShader, never> | DeclarationNode<RadialGradientProps, SkShader, never> | DeclarationNode<SweepGradientProps, SkShader, never> | DeclarationNode<CornerPathEffectProps, SkPathEffect, null> | DeclarationNode<DiscretePathEffectProps, SkPathEffect, never> | DeclarationNode<DashPathEffectProps, SkPathEffect, never> | DeclarationNode<Path1DPathEffectProps, SkPathEffect, null> | DeclarationNode<Path2DPathEffectProps, SkPathEffect, null> | DeclarationNode<null, SkPathEffect, null> | DeclarationNode<Line2DPathEffectProps, SkPathEffect, null> | DeclarationNode<BlendProps, SkImageFilter | SkShader, never> | DeclarationNode<BoxShadowProps, BoxShadowProps, never>;
+export declare const createNode: (container: Container, type: NodeType, props: any) => RenderNode<ChildrenProps> | DeclarationNode<PaintProps> | DeclarationNode<BlurMaskFilterProps> | DeclarationNode<BlendImageFilterProps> | DeclarationNode<BlurImageFilterProps> | DeclarationNode<OffsetImageFilterProps> | DeclarationNode<MorphologyImageFilterProps> | DeclarationNode<DisplacementMapImageFilterProps> | DeclarationNode<RuntimeShaderImageFilterProps> | DeclarationNode<MatrixColorFilterProps> | DeclarationNode<null> | DeclarationNode<LerpColorFilterProps> | DeclarationNode<ImageShaderProps> | DeclarationNode<ColorProps> | DeclarationNode<TurbulenceProps> | DeclarationNode<LinearGradientProps> | DeclarationNode<RadialGradientProps> | DeclarationNode<SweepGradientProps> | DeclarationNode<CornerPathEffectProps> | DeclarationNode<DiscretePathEffectProps> | DeclarationNode<DashPathEffectProps> | DeclarationNode<Path1DPathEffectProps> | DeclarationNode<Path2DPathEffectProps> | DeclarationNode<Line2DPathEffectProps> | DeclarationNode<BlendProps> | DeclarationNode<BoxShadowProps>;

package/lib/typescript/src/renderer/Offscreen.d.ts

@@ -0,0 +1,2 @@
+import type { ReactElement } from "react";
+export declare const drawAsImage: (element: ReactElement, width: number, height: number) => import("../skia").SkImage;

package/lib/typescript/src/skia/types/Surface/Surface.d.ts

@@ -22,4 +22,8 @@ export interface SkSurface extends SkJSIInstance<"Surface"> {
         example: https://fiddle.skia.org/c/@Surface_makeImageSnapshot
     */
     makeImageSnapshot(bounds?: SkRect): SkImage;
+    /**
+     * Make sure any queued draws are sent to the screen or the GPU.
+     */
+    flush(): void;
 }

package/lib/typescript/src/skia/types/Surface/SurfaceFactory.d.ts

@@ -8,4 +8,10 @@ export interface SurfaceFactory {
      * @param height - number of pixels of the height of the drawable area.
      */
     Make: (width: number, height: number) => SkSurface | null;
+    /**
+     * Creates a GPU backed surface.
+     * @param width - number of pixels of the width of the drawable area.
+     * @param height - number of pixels of the height of the drawable area.
+     */
+    MakeOffscreen: (width: number, height: number) => SkSurface | null;
 }

package/lib/typescript/src/skia/web/JsiSkSurface.d.ts

@@ -3,6 +3,7 @@ import type { SkCanvas, SkImage, SkRect, SkSurface } from "../types";
 import { HostObject } from "./Host";
 export declare class JsiSkSurface extends HostObject<Surface, "Surface"> implements SkSurface {
     constructor(CanvasKit: CanvasKit, ref: Surface);
+    flush(): void;
     getCanvas(): SkCanvas;
     makeImageSnapshot(bounds?: SkRect): SkImage;
 }

package/lib/typescript/src/skia/web/JsiSkSurfaceFactory.d.ts

@@ -4,5 +4,6 @@ import { Host } from "./Host";
 import { JsiSkSurface } from "./JsiSkSurface";
 export declare class JsiSkSurfaceFactory extends Host implements SurfaceFactory {
     constructor(CanvasKit: CanvasKit);
-    Make(width: number, height: number): JsiSkSurface;
+    Make(width: number, height: number): JsiSkSurface | null;
+    MakeOffscreen(width: number, height: number): JsiSkSurface | null;
 }

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.172",
+  "version": "0.1.173",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/src/dom/nodes/DrawingNode.ts

@@ -59,7 +59,11 @@ export abstract class JsiDrawingNode<P extends DrawingNodeProps, C>
     }
     this.children().map((child) => {
       if (child instanceof PaintNode) {
-        const paint = child.materialize();
+        const declCtx = ctx.declarationCtx;
+        declCtx.save();
+        child.decorate(declCtx);
+        const paint = declCtx.paints.pop()!;
+        declCtx.restore();
         this.draw({ ...ctx, paint });
       }
     });

package/src/dom/nodes/LayerNode.ts

@@ -1,34 +1,36 @@
-import type { DeclarationNode, DrawingContext, Node } from "../types";
+import type { DrawingContext } from "../types";
 import { NodeType } from "../types";
 import type { ChildrenProps } from "../types/Common";
-import type { SkPaint } from "../../skia";
 
 import { JsiRenderNode } from "./RenderNode";
 import type { NodeContext } from "./Node";
 import { JsiDeclarationNode } from "./Node";
 
-const isLayer = (
-  node: Node<unknown>
-): node is DeclarationNode<unknown, SkPaint> =>
-  node instanceof JsiDeclarationNode && node.isPaint();
-
 export class LayerNode extends JsiRenderNode<ChildrenProps> {
   constructor(ctx: NodeContext, props: ChildrenProps) {
     super(ctx, NodeType.Layer, props);
   }
 
   renderNode(ctx: DrawingContext): void {
+    let hasLayer = false;
     const [layer, ...children] = this.children();
-    if (isLayer(layer)) {
-      const paint = layer.materialize() as SkPaint;
-      ctx.canvas.saveLayer(paint);
+    if (layer instanceof JsiDeclarationNode) {
+      const declCtx = ctx.declarationCtx;
+      declCtx.save();
+      layer.decorate(declCtx);
+      const paint = declCtx.paints.pop();
+      declCtx.restore();
+      if (paint) {
+        hasLayer = true;
+        ctx.canvas.saveLayer(paint);
+      }
     }
     children.map((child) => {
       if (child instanceof JsiRenderNode) {
         child.render(ctx);
       }
     });
-    if (isLayer(layer)) {
+    if (hasLayer) {
       ctx.canvas.restore();
     }
   }

package/src/dom/nodes/Node.ts

@@ -1,15 +1,12 @@
+import type { Skia } from "../../skia/types";
 import type {
-  SkColorFilter,
-  Skia,
-  SkImageFilter,
-  SkMaskFilter,
-  SkShader,
-  SkPathEffect,
-  SkPaint,
-} from "../../skia/types";
-import type { Node, DeclarationNode, NodeType } from "../types";
-import { DeclarationType } from "../types";
+  Node,
+  DeclarationNode,
+  NodeType,
+  DeclarationType,
+} from "../types";
 import type { DependencyManager } from "../../renderer/DependencyManager";
+import type { DeclarationContext } from "../types/DeclarationContext";
 
 export interface NodeContext {
   Skia: Skia;
@@ -73,13 +70,9 @@ export abstract class JsiNode<P> implements Node<P> {
 
 export type Invalidate = () => void;
 
-export abstract class JsiDeclarationNode<
-    P,
-    T,
-    Nullable extends null | never = never
-  >
+export abstract class JsiDeclarationNode<P>
   extends JsiNode<P>
-  implements DeclarationNode<P, T, Nullable>
+  implements DeclarationNode<P>
 {
   private invalidate: Invalidate = () => {};
 
@@ -92,7 +85,15 @@ export abstract class JsiDeclarationNode<
     super(ctx, type, props);
   }
 
-  abstract materialize(): T | Nullable;
+  abstract decorate(ctx: DeclarationContext): void;
+
+  protected decorateChildren(ctx: DeclarationContext) {
+    this.children().forEach((child) => {
+      if (child instanceof JsiDeclarationNode) {
+        child.decorate(ctx);
+      }
+    });
+  }
 
   addChild(child: Node<unknown>): void {
     if (!(child instanceof JsiDeclarationNode)) {
@@ -131,28 +132,4 @@ export abstract class JsiDeclarationNode<
     }
     return hasChanged;
   }
-
-  isPaint(): this is DeclarationNode<unknown, SkPaint> {
-    return this.declarationType === DeclarationType.Paint;
-  }
-
-  isImageFilter(): this is DeclarationNode<unknown, SkImageFilter> {
-    return this.declarationType === DeclarationType.ImageFilter;
-  }
-
-  isColorFilter(): this is DeclarationNode<unknown, SkColorFilter> {
-    return this.declarationType === DeclarationType.ColorFilter;
-  }
-
-  isShader(): this is DeclarationNode<unknown, SkShader> {
-    return this.declarationType === DeclarationType.Shader;
-  }
-
-  isMaskFilter(): this is DeclarationNode<unknown, SkMaskFilter> {
-    return this.declarationType === DeclarationType.MaskFilter;
-  }
-
-  isPathEffect(): this is DeclarationNode<unknown, SkPathEffect> {
-    return this.declarationType === DeclarationType.PathEffect;
-  }
 }

package/src/dom/nodes/PaintContext.ts

@@ -11,6 +11,7 @@ import type {
 } from "../../skia/types";
 import type { SkColor } from "../../skia/types/Color";
 
+// TODO: to remove
 export interface PaintContext {
   color?: SkColor;
   strokeWidth?: number;

package/src/dom/nodes/PaintNode.ts

@@ -1,21 +1,21 @@
-import type { SkPaint } from "../../skia/types";
 import { StrokeCap, StrokeJoin, PaintStyle, BlendMode } from "../../skia/types";
 import type { DeclarationNode, PaintProps } from "../types";
 import { DeclarationType, NodeType } from "../types";
+import type { DeclarationContext } from "../types/DeclarationContext";
 
 import { enumKey } from "./datatypes";
 import type { NodeContext } from "./Node";
 import { JsiDeclarationNode } from "./Node";
 
 export class PaintNode
-  extends JsiDeclarationNode<PaintProps, SkPaint>
-  implements DeclarationNode<PaintProps, SkPaint>
+  extends JsiDeclarationNode<PaintProps>
+  implements DeclarationNode<PaintProps>
 {
   constructor(ctx: NodeContext, props: PaintProps = {}) {
     super(ctx, DeclarationType.Paint, NodeType.Paint, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const {
       color,
       strokeWidth,
@@ -55,23 +55,33 @@ export class PaintNode
     if (antiAlias !== undefined) {
       paint.setAntiAlias(antiAlias);
     }
+    ctx.save();
     this._children.forEach((child) => {
       if (child instanceof JsiDeclarationNode) {
-        if (child.isShader()) {
-          paint.setShader(child.materialize());
-        } else if (child.isColorFilter()) {
-          paint.setColorFilter(child.materialize());
-        } else if (child.isImageFilter()) {
-          paint.setImageFilter(child.materialize());
-        } else if (child.isMaskFilter()) {
-          paint.setMaskFilter(child.materialize());
-        } else if (child.isPathEffect()) {
-          paint.setPathEffect(child.materialize());
-        } else {
-          throw new Error(`Unknown paint child ${child.type}`);
-        }
+        child.decorate(ctx);
       }
     });
-    return paint;
+    const colorFilter = ctx.colorFilters.popAllAsOne();
+    const imageFilter = ctx.imageFilters.popAllAsOne();
+    const shader = ctx.shaders.pop();
+    const maskFilter = ctx.maskFilters.pop();
+    const pathEffect = ctx.pathEffects.popAllAsOne();
+    ctx.restore();
+    if (imageFilter) {
+      paint.setImageFilter(imageFilter);
+    }
+    if (shader) {
+      paint.setShader(shader);
+    }
+    if (pathEffect) {
+      paint.setPathEffect(pathEffect);
+    }
+    if (colorFilter) {
+      paint.setColorFilter(colorFilter);
+    }
+    if (maskFilter) {
+      paint.setMaskFilter(maskFilter);
+    }
+    ctx.paints.push(paint);
   }
 }