Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Built with API compatibility in mind, this should not break any existing ways to use Skia.
Idea
Have a
@Shopify/react-native-skia/web
import which does not import React Native or Reanimated at all 馃帀This was not possible without removing support for the React Native asset loading logic, so there is also a
@Shopify/react-native-skia/react-native-web
package which still allows you to import assets RN-style. You would use this if you also use React Native Web, hence this name. If you use@Shopify/react-native-skia/react-native-web
, you still need the Webpack override.This will make RN Skia more plug and play on the web, because less Webpack configuration is needed. Granted you still need an override for CanvasKit.wasm, but maybe in the future with canvaskit-js, we can support the web with no config.
Why
Currently, using it on the Web has friction:
@Shopify/react-native-skia/src/web
as a TSX file is uncommon on the web and may require configuring the bundler to transpile it.@Shopify/react-native-skia/src/web.ts
, even though it is innode_modules
andskipLibCheck
is enabled. Skia source files becomes part of the user TypeScript project. Only way to get rid of the error for me was to use a .js extension..web.ts
files. It's uncommon on the web.How it works
Uses the Bun bundler to bundle both
package/src/index.ts
andpackage/src/web.ts
into one entry point and removes all RN stuff.I replace some modules with other ones that I defined to do this. I could have used the
.web.ts
convention but feared this could break existing Web workflows. This means Web users import everything from 1 entry point:Those bundles are being placed into
lib/web/pure.js
andlib/web/react-native-web.js
(arbitrary decision).Two TypeScript files
pure.d.ts
andreact-native-web.d.ts
were placed mapping to the type declarations generated from source.To make the
@Shopify/react-native-skia/web
import actually work, aweb.js
andreact-native-web.js
file was placed in the root of the package. The convention nowadays is to use the"exports"
field, but I fear that once React Native is going to add support for it, the React Native version may break (cannot import any modules that are not explicitly defined in "exports"...)You need
bun
to create the 2 bundles. It's very fast though (only takes 0.1sec).