Skip to content

Commit

Permalink
fix(🐯): SVG support on Web (#2506)
Browse files Browse the repository at this point in the history
  • Loading branch information
wcandillon authored Jun 28, 2024
1 parent fafff4c commit 279afb9
Show file tree
Hide file tree
Showing 9 changed files with 126 additions and 48 deletions.
9 changes: 2 additions & 7 deletions docs/docs/getting-started/web.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,8 @@ export default function App() {
```
:::info

When using expo router in dev mode you CANNOT load components that are inside the app directory, as they will get evaluated by the router before CanvasKit has loaded.
Make syure the component to load lies outside the 'app' directory (or whatever has been configured as the router folder).
When using expo router in dev mode you cannot load components that are inside the app directory, as they will get evaluated by the router before CanvasKit is loaded.
Make sure the component to load lies outside the 'app' directory.

:::

Expand Down Expand Up @@ -168,11 +168,6 @@ To request these features, please submit [a feature request on GitHub](https://g
* `PathFactory.MakeFromText()`
* `ShaderFilter`

**Unplanned**

* `ImageSvg`


## Manual webpack Installation

To enable React Native Skia on Web using webpack, three key actions are required:
Expand Down
1 change: 1 addition & 0 deletions example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
"jest-transform-stub": "2.0.0",
"metro-react-native-babel-preset": "0.73.9",
"prettier": "2.4.1",
"raw-loader": "^4.0.2",
"react-test-renderer": "18.2.0",
"typescript": "5.1.6",
"url-loader": "4.1.1",
Expand Down
2 changes: 1 addition & 1 deletion example/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const svgLoaderConfiguration = {
test: /\.(svg)$/,
use: [
{
loader: "@svgr/webpack",
loader: "raw-loader",
},
],
};
Expand Down
43 changes: 12 additions & 31 deletions example/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2465,9 +2465,7 @@

"@shopify/react-native-skia@link:../package":
version "0.0.0"
dependencies:
canvaskit-wasm "0.39.1"
react-reconciler "0.27.0"
uid ""

"@sideway/address@^4.1.5":
version "4.1.5"
Expand Down Expand Up @@ -9120,6 +9118,14 @@ raw-body@2.5.2:
iconv-lite "0.4.24"
unpipe "1.0.0"

raw-loader@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
dependencies:
loader-utils "^2.0.0"
schema-utils "^3.0.0"

rc@~1.2.7:
version "1.2.8"
resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
Expand Down Expand Up @@ -10134,16 +10140,7 @@ string-natural-compare@^3.0.1:
resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==

"string-width-cjs@npm:string-width@^4.2.0":
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
dependencies:
emoji-regex "^8.0.0"
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.1"

string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
version "4.2.3"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
Expand Down Expand Up @@ -10221,7 +10218,7 @@ string_decoder@~1.1.1:
dependencies:
safe-buffer "~5.1.0"

"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
Expand All @@ -10235,13 +10232,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.2.0:
dependencies:
ansi-regex "^4.1.0"

strip-ansi@^6.0.0, strip-ansi@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
dependencies:
ansi-regex "^5.0.1"

strip-ansi@^7.0.1:
version "7.1.0"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
Expand Down Expand Up @@ -11199,7 +11189,7 @@ wonka@^6.3.2:
resolved "https://registry.yarnpkg.com/wonka/-/wonka-6.3.4.tgz#76eb9316e3d67d7febf4945202b5bdb2db534594"
integrity sha512-CjpbqNtBGNAeyNS/9W6q3kSkKE52+FjIj7AkFlLr11s/VWGUu6a2CdYSdGxocIhIVjaW/zchesBQUKPVU69Cqg==

"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
Expand All @@ -11217,15 +11207,6 @@ wrap-ansi@^6.2.0:
string-width "^4.1.0"
strip-ansi "^6.0.0"

wrap-ansi@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
dependencies:
ansi-styles "^4.0.0"
string-width "^4.1.0"
strip-ansi "^6.0.0"

wrap-ansi@^8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
Expand Down
29 changes: 29 additions & 0 deletions package/src/skia/core/SVG.web.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { Skia } from "../Skia";
import type { DataSourceParam } from "../types";

export const useSVG = (
source: DataSourceParam,
onError?: (err: Error) => void
) => {
if (source === null || source === undefined) {
throw new Error(`Invalid svg data source. Got: ${source}`);
}
if (
typeof source !== "object" ||
source instanceof Uint8Array ||
typeof source.default !== "string"
) {
throw new Error(
`Invalid svg data source. Make sure that the source resolves to a string. Got: ${JSON.stringify(
source,
null,
2
)}`
);
}
const svg = Skia.SVG.MakeFromString(source.default);
if (svg === null && onError !== undefined) {
onError(new Error("Failed to create SVG from source."));
}
return svg;
};
2 changes: 1 addition & 1 deletion package/src/skia/types/NativeBuffer/NativeBufferFactory.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const isNativeBufferWeb = (
buffer instanceof HTMLCanvasElement ||
buffer instanceof ImageBitmap ||
buffer instanceof OffscreenCanvas ||
buffer instanceof VideoFrame ||
(typeof VideoFrame !== "undefined" && buffer instanceof VideoFrame) ||
buffer instanceof HTMLImageElement ||
buffer instanceof SVGImageElement ||
buffer instanceof CanvasKitWebGLBuffer;
Expand Down
8 changes: 6 additions & 2 deletions package/src/skia/web/JsiSkCanvas.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ import { JsiSkMatrix } from "./JsiSkMatrix";
import { JsiSkImageFilter } from "./JsiSkImageFilter";
import { JsiSkPoint } from "./JsiSkPoint";
import { JsiSkRSXform } from "./JsiSkRSXform";
import type { JsiSkSVG } from "./JsiSkSVG";

export class JsiSkCanvas
extends HostObject<Canvas, "Canvas">
Expand Down Expand Up @@ -302,8 +303,11 @@ export class JsiSkCanvas
);
}

drawSvg(_svgDom: SkSVG, _width?: number, _height?: number) {
throw new Error("drawSvg is not implemented on React Native Web");
drawSvg(svg: SkSVG, _width?: number, _height?: number) {
const image = this.CanvasKit.MakeImageFromCanvasImageSource(
(svg as JsiSkSVG).ref
);
this.ref.drawImage(image, 0, 0);
}

save() {
Expand Down
27 changes: 27 additions & 0 deletions package/src/skia/web/JsiSkSVG.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import type { CanvasKit } from "canvaskit-wasm";

import type { SkSVG } from "../types";

import { HostObject } from "./Host";

export class JsiSkSVG
extends HostObject<HTMLImageElement, "SVG">
implements SkSVG
{
constructor(CanvasKit: CanvasKit, ref: HTMLImageElement) {
super(CanvasKit, ref, "SVG");
}

width(): number {
return this.ref.width;
}
height(): number {
return this.ref.height;
}

dispose = () => {
if (this.ref.parentNode) {
this.ref.parentNode.removeChild(this.ref);
}
};
}
53 changes: 47 additions & 6 deletions package/src/skia/web/JsiSkSVGFactory.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,61 @@
import type { CanvasKit } from "canvaskit-wasm";

import type { SkData, SkSVG } from "../types";
import type { SkSVG } from "../types";
import type { SVGFactory } from "../types/SVG/SVGFactory";

import { Host, NotImplementedOnRNWeb } from "./Host";
import { Host } from "./Host";
import type { JsiSkData } from "./JsiSkData";
import { JsiSkSVG } from "./JsiSkSVG";

export class JsiSkSVGFactory extends Host implements SVGFactory {
constructor(CanvasKit: CanvasKit) {
super(CanvasKit);
}

MakeFromData(_data: SkData): SkSVG | null {
throw new NotImplementedOnRNWeb();
MakeFromData(data: JsiSkData): SkSVG | null {
const decoder = new TextDecoder("utf-8");
const str = decoder.decode(data.ref);
return this.MakeFromString(str);
}

MakeFromString(_str: string): SkSVG | null {
throw new NotImplementedOnRNWeb();
MakeFromString(str: string): SkSVG | null {
const parser = new DOMParser();
const svgDoc = parser.parseFromString(str, "image/svg+xml");
const svgElement = svgDoc.documentElement;

const attrWidth = svgElement.getAttribute("width");
const attrHeight = svgElement.getAttribute("height");
let width = attrWidth ? parseFloat(attrWidth) : null;
let height = attrHeight ? parseFloat(attrHeight) : null;

const svgDataUrl =
"data:image/svg+xml;charset=utf-8," + encodeURIComponent(str);
// Create a new HTMLImageElement
const img = new Image();
img.src = svgDataUrl;

// Optionally set styles or attributes on the image
img.style.display = "none";
img.alt = "SVG Image";
if (!width || !height) {
const viewBox = svgElement.getAttribute("viewBox");
if (viewBox) {
const viewBoxValues = viewBox.split(" ");
if (viewBoxValues.length === 4) {
width = width || parseFloat(viewBoxValues[2]);
height = height || parseFloat(viewBoxValues[3]);
}
}
}
if (width && height) {
img.width = width;
img.height = height;
}

img.onerror = (e) => {
console.error("SVG failed to load", e);
};
document.body.appendChild(img);
return new JsiSkSVG(this.CanvasKit, img);
}
}

0 comments on commit 279afb9

Please sign in to comment.