Any guide to integrate skia with storybook on web?

[Jonatthu]

I am using storybook with react native, I usually test on iOS and also web.
Base on the guide for skia web, for web support
https://shopify.github.io/react-native-skia/docs/getting-started/web#loading-skia

I have to modify my webpack config but also I have to use

Using Code-Splitting

https://shopify.github.io/react-native-skia/docs/getting-started/web#using-code-splitting

Using Defered Component Registration

https://shopify.github.io/react-native-skia/docs/getting-started/web#using-defered-component-registration

Or even

Using a CDN

https://shopify.github.io/react-native-skia/docs/getting-started/web#using-a-cdn

Usually a story init would look like

export default {
	title: StorybookCategory.Components('PictureInput'),
	component: PictureInput,
	decorators: [
		withDesign,
		(Story) => (
			<StorybookView>
				<View style={{ flex: 1 }}>{Story()}</View>
			</StorybookView>
		),
	],
} as ComponentMeta<typeof PictureInput>;

Also my current webpack looks like:

const { createWebpackConfigAsync } = require('expo-yarn-workspaces/webpack');

module.exports = async function (env, argv) {
	const config = await createWebpackConfigAsync(
		{
			...env,
			babel: {
				dangerouslyAddModulePathsToTranspile: ['nativewind', 'moti'],
			},
		},
		argv
	);

	config.module.rules.push({
		test: /\.css$/i,
		use: ['postcss-loader'],
	});

	config.resolve.alias['framer-motion'] = 'framer-motion/dist/framer-motion';

	return config;
};

Any advise of how to modify my webpack or my story to load components using skia correctly as a UI library on storybook?

[wcandillon]

I would definitely recommend this method if possible: https://shopify.github.io/react-native-skia/docs/getting-started/web/#using-defered-component-registration.
This is the one we use for using Skia with Remotion and it works great for us, I hope you have the same smooth setup on your side with storybook.

[Jonatthu]

Also worth to highlight that I am using webpack 4 since expo does not support webpack 5 :/

[Jonatthu]

@wcandillon Also a new fix on webpack4

node: {
  fs: 'empty',
},

But now I get this error:

TypeError: pb.get is not a function
    at Eb (http://localhost:6006/vendors~main.iframe.bundle.js:71593:475)
    at le (http://localhost:6006/vendors~main.iframe.bundle.js:71700:39)
    at https://cdn.jsdelivr.net/npm/[email protected]/bin/canvaskit.wasm:wasm-function[3581]:0x1c4f73

[Jonatthu]

@wcandillon also getting this weird error:
TypeError: Cannot read properties of undefined (reading 'Matrix')
at Object.Matrix (http://localhost:6006/vendors~main.iframe.bundle.js:33477:169)
at new JsiRenderNode (http://localhost:6006/vendors~main.iframe.bundle.js:21873:29)
at new GroupNode (http://localhost:6006/vendors~main.iframe.bundle.js:21247:5)

[Jonatthu]

https://github.com/dannyhw/expo-template-storybook this is the repo I am using!

[Jonatthu]

@wcandillon here is the reproduction of the bug
https://github.com/Jonatthu/expo-template-storybook/tree/skia-setup

[wcandillon]

I was able to get your example working.
The first issue was that the Button.stories.tsx file was importing Skia already (it needs to be done via the WithSkiaWeb function). But here we recommend to use https://shopify.github.io/react-native-skia/docs/getting-started/web#using-defered-component-registration or use code splitting but on the top level, not per component. Then life will be good. Not sure how we can do this with storybook. With Remotion, we also had to figure it out.

Then the canvaskitwasm file in public was not up to date anymore with the installed version of Skia. This is a bit annoying but as long as expo use webpack 4, this is the only way to go.

My recommendation is really to figure out how to do deferred component registration with storybook (this is how we do it in remotion for instance: https://github.com/wcandillon/remotion-skia-tutorial/blob/main/src/index.tsx#L10) and then be careful with upgrade.

Be careful, keep your head cool, and you'll have a lot of fun with this setup I think :)

[Jonatthu]

How did you get my example working? Or do you mean you were able to replicate my bug? @wcandillon

[wcandillon]

to get the example working I applied the change described above. The link to the diff is below but I recommend you investigate/apply the steps yourself so you can get a better grip on this this works.

https://gist.github.com/wcandillon/bed65b2d577e4554af9ee8f7709aa116

[Jonatthu]

Made it work, but still will have to find a good way to scale this as you said!