增加WASM模块上下文。

src/ColorFunctionContext.tsx

@@ -0,0 +1,56 @@
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useTransition,
+} from 'react';
+import type * as Wasm from './pkg/color_module';
+import init from './pkg/color_module';
+
+export const ColorFunctionContext = createContext<{
+  colorFn: Wasm.InitOutput | null;
+  isLoading: boolean;
+  error: Error | null;
+}>({
+  colorFn: null,
+  isLoading: true,
+  error: null,
+});
+
+type WasmProviderProps = {
+  children?: ReactNode;
+};
+
+export function ColorFunctionProvider({ children }: WasmProviderProps) {
+  const [wasmInstance, setWasmInstance] = useState<Wasm.InitOutput | null>(null);
+  const [isPending, startTransition] = useTransition();
+  const [error, setError] = useState<Error | null>(null);
+
+  const loadWasm = useCallback(() => {
+    startTransition(async () => {
+      try {
+        const wasm = await init();
+        setWasmInstance(wasm);
+      } catch (e) {
+        console.error('[Load WASM]', e);
+        setError(e);
+      }
+    });
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      colorFn: wasmInstance,
+      isLoading: isPending,
+      error,
+    }),
+    [wasmInstance, isPending, error],
+  );
+  useEffect(() => {
+    loadWasm();
+  }, []);
+
+  return <ColorFunctionContext value={contextValue}>{children}</ColorFunctionContext>;
+}