[NCL] Fix skia web support (#19717)

# Why

ncl doesn't support @shopify/react-native-skia on web and publishing ci job is also failed: https://github.com/expo/expo/actions/runs/3313396371/jobs/5471317891

# How

- add `WithSkiaWeb` wrapper for web to wait for canvaskit loading
- add `dangerouslyAddModulePathsToTranspile` to transpile skia files for the nullish coalescing operators

# Test Plan

- ncl on web + skia
- for publish ncl web ci, test `yarn build:web`

apps/native-component-list/src/screens/Skia/Breathe.tsx

@@ -0,0 +1,73 @@
+import type { SkiaValue } from '@shopify/react-native-skia';
+import {
+  useComputedValue,
+  useLoop,
+  BlurMask,
+  vec,
+  Canvas,
+  Circle,
+  Fill,
+  Group,
+  polar2Canvas,
+  Easing,
+  mix,
+} from '@shopify/react-native-skia';
+import React, { useMemo } from 'react';
+import { StyleSheet, useWindowDimensions } from 'react-native';
+
+const c1 = '#61bea2';
+const c2 = '#529ca0';
+
+interface RingProps {
+  index: number;
+  progress: SkiaValue<number>;
+}
+
+const Ring = ({ index, progress }: RingProps) => {
+  const { width, height } = useWindowDimensions();
+  const R = width / 4;
+  const center = useMemo(() => vec(width / 2, height / 2 - 64), [height, width]);
+  const theta = (index * (2 * Math.PI)) / 6;
+  const transform = useComputedValue(() => {
+    const { x, y } = polar2Canvas({ theta, radius: progress.current * R }, { x: 0, y: 0 });
+    const scale = mix(progress.current, 0.3, 1);
+    return [{ translateX: x }, { translateY: y }, { scale }];
+  }, [progress]);
+
+  return (
+    <Circle c={center} r={R} color={index % 2 ? c1 : c2} origin={center} transform={transform} />
+  );
+};
+
+export default function SkiaScreenImpl() {
+  const { width, height } = useWindowDimensions();
+  const center = useMemo(() => vec(width / 2, height / 2 - 64), [height, width]);
+
+  const progress = useLoop({
+    duration: 3000,
+    easing: Easing.inOut(Easing.ease),
+  });
+
+  const transform = useComputedValue(
+    () => [{ rotate: mix(progress.current, -Math.PI, 0) }],
+    [progress]
+  );
+
+  return (
+    <Canvas style={styles.container}>
+      <Fill color="rgb(36,43,56)" />
+      <Group origin={center} transform={transform} blendMode="screen">
+        <BlurMask style="solid" blur={40} />
+        {new Array(6).fill(0).map((_, index) => {
+          return <Ring key={index} index={index} progress={progress} />;
+        })}
+      </Group>
+    </Canvas>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

apps/native-component-list/src/screens/Skia/SkiaScreen.tsx

@@ -1,77 +1,9 @@
-import type { SkiaValue } from '@shopify/react-native-skia';
-import {
-  useComputedValue,
-  useLoop,
-  BlurMask,
-  vec,
-  Canvas,
-  Circle,
-  Fill,
-  Group,
-  polar2Canvas,
-  Easing,
-  mix,
-} from '@shopify/react-native-skia';
-import React, { useMemo } from 'react';
-import { StyleSheet, useWindowDimensions } from 'react-native';
-
-const c1 = '#61bea2';
-const c2 = '#529ca0';
-
-interface RingProps {
-  index: number;
-  progress: SkiaValue<number>;
-}
-
-const Ring = ({ index, progress }: RingProps) => {
-  const { width, height } = useWindowDimensions();
-  const R = width / 4;
-  const center = useMemo(() => vec(width / 2, height / 2 - 64), [height, width]);
-  const theta = (index * (2 * Math.PI)) / 6;
-  const transform = useComputedValue(() => {
-    const { x, y } = polar2Canvas({ theta, radius: progress.current * R }, { x: 0, y: 0 });
-    const scale = mix(progress.current, 0.3, 1);
-    return [{ translateX: x }, { translateY: y }, { scale }];
-  }, [progress]);
-
-  return (
-    <Circle c={center} r={R} color={index % 2 ? c1 : c2} origin={center} transform={transform} />
-  );
-};
+import Breathe from './Breathe';
 
 export default function SkiaScreen() {
-  const { width, height } = useWindowDimensions();
-  const center = useMemo(() => vec(width / 2, height / 2 - 64), [height, width]);
-
-  const progress = useLoop({
-    duration: 3000,
-    easing: Easing.inOut(Easing.ease),
-  });
-
-  const transform = useComputedValue(
-    () => [{ rotate: mix(progress.current, -Math.PI, 0) }],
-    [progress]
-  );
-
-  return (
-    <Canvas style={styles.container}>
-      <Fill color="rgb(36,43,56)" />
-      <Group origin={center} transform={transform} blendMode="screen">
-        <BlurMask style="solid" blur={40} />
-        {new Array(6).fill(0).map((_, index) => {
-          return <Ring key={index} index={index} progress={progress} />;
-        })}
-      </Group>
-    </Canvas>
-  );
+  return <Breathe />;
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-
 SkiaScreen.navigationOptions = {
   title: 'Skia',
 };

apps/native-component-list/src/screens/Skia/SkiaScreen.web.tsx

@@ -0,0 +1,23 @@
+import { WithSkiaWeb } from '@shopify/react-native-skia/src/web';
+import { version as CanvasKitVersion } from 'canvaskit-wasm/package.json';
+import { Text } from 'react-native';
+
+export default function SkiaScreen() {
+  return (
+    <WithSkiaWeb
+      getComponent={() => {
+        // @ts-ignore
+        return import('./Breathe');
+      }}
+      fallback={<Text>Loading Skia...</Text>}
+      opts={{
+        locateFile: (file: string) =>
+          `https://cdn.jsdelivr.net/npm/canvaskit-wasm@${CanvasKitVersion}/bin/full/${file}`,
+      }}
+    />
+  );
+}
+
+SkiaScreen.navigationOptions = {
+  title: 'Skia',
+};

apps/native-component-list/webpack.config.js

@@ -1,7 +1,15 @@
 const createConfigAsync = require('@expo/webpack-config');
 
-module.exports = async (env) => {
-  const config = await createConfigAsync(env);
+module.exports = async (env, argv) => {
+  const config = await createConfigAsync(
+    {
+      ...env,
+      babel: {
+        dangerouslyAddModulePathsToTranspile: ['@shopify/react-native-skia'],
+      },
+    },
+    argv
+  );
   // allow reloading when the packages are updated.
   if (config.devServer) {
     delete config.devServer.watchOptions;