ci: wasm build

Gumichocopengin8 · Aug 10, 2023 · 58d759a · 58d759a
1 parent c103449
commit 58d759a
Show file tree

Hide file tree

Showing 11 changed files with 327 additions and 27 deletions.
diff --git a/.github/workflows/playwrightCI.yml b/.github/workflows/playwrightCI.yml
@@ -18,7 +18,9 @@ jobs:
         with:
           node-version: 18
       - name: Install dependencies
-        run: npm ci
+        run: |
+          npm ci
+          npm run build:wasm
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
       - name: Run Playwright e2e tests

diff --git a/.github/workflows/webCI.yml b/.github/workflows/webCI.yml
@@ -20,7 +20,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [18.x]
+        node-version: [20.x]
 
     steps:
       - uses: actions/checkout@v3
@@ -42,7 +42,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [18.x]
+        node-version: [20.x]
 
     steps:
       - uses: actions/checkout@v3

diff --git a/web/.eslintrc.json b/web/.eslintrc.json
@@ -18,6 +18,7 @@
     "@typescript-eslint/explicit-member-accessibility": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/prefer-interface": "off",
+    "@typescript-eslint/no-empty-function": "off",
     "react/react-in-jsx-scope": "off",
     "react/self-closing-comp": ["error"],
     "react/display-name": "off", // TODO: remove this in the future

diff --git a/web/src/pages/_app.tsx b/web/src/pages/_app.tsx
@@ -6,20 +6,39 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import { RecoilRoot } from 'recoil';
+import { RecoilRoot, useSetRecoilState } from 'recoil';
 import { AppProps } from 'next/app';
 import { useRouter } from 'next/router';
 import Head from 'next/head';
 import { CircularProgress } from '@mui/material';
 import { css } from '@emotion/react';
 import Header from 'components/shared/Header';
-import Spinner from 'components/shared/Spinner';
 import Footer from 'components/shared/Footer';
 import init from 'web_assembly/pkg';
+import { isWasmLoadedState } from 'recoil/atoms';
+
+const HiddenComponent = () => {
+  // hidden compont to load wasm
+  // This component should be under <RecoilRoot>
+  const setIsWasmLoaded = useSetRecoilState(isWasmLoadedState);
+
+  useEffect(() => {
+    (async () => {
+      await init()
+        .then(() => {
+          setIsWasmLoaded(true);
+        })
+        .catch((err) => {
+          console.error('wasm error', err);
+        });
+    })();
+  }, [setIsWasmLoaded]);
+
+  return <></>;
+};
 
 const MyApp = (props: AppProps): JSX.Element => {
   const { Component, pageProps } = props;
-  const [isWasmLoaded, setIsWasmLoaded] = useState<boolean>(false);
   const [isLoading, setLoadingState] = useState<boolean>(false);
   const router = useRouter();
 
@@ -37,29 +56,10 @@ const MyApp = (props: AppProps): JSX.Element => {
     }
   }, [router]);
 
-  useEffect(() => {
-    (async () => {
-      await init()
-        .then(() => {
-          setIsWasmLoaded(true);
-        })
-        .catch((err) => {
-          console.error('wasm error', err);
-        });
-    })();
-  }, []);
-
-  if (!isWasmLoaded) {
-    return (
-      <div css={Wrapper}>
-        <Spinner loadingMessage="Wait for a few moment" />
-      </div>
-    );
-  }
-
   return (
     <React.StrictMode>
       <RecoilRoot>
+        <HiddenComponent />
         <div css={Wrapper}>
           <Head>
             <link rel="icon" href="/favicon.png" type="image/png" sizes="32x32" />

diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx
@@ -9,13 +9,23 @@ import Head from 'next/head';
 import { css } from '@emotion/react';
 import InputForm from 'components/shared/InputForm';
 import ExtraInfo from 'components/shared/ExtraInfo';
+import { add, test_array } from 'web_assembly/pkg';
+import { isWasmLoadedState } from 'recoil/atoms';
+import { useRecoilValue } from 'recoil';
 
 const Index = (): JSX.Element => {
+  const isWasmLoaded = useRecoilValue(isWasmLoadedState);
   return (
     <div css={Wrapper}>
       <Head>
         <title>Crate Trends</title>
       </Head>
+      {isWasmLoaded && (
+        <>
+          {add(3, 4)}
+          {test_array(['asdf', 'gds'])}
+        </>
+      )}
       <InputForm />
       <ExtraInfo />
     </div>

diff --git a/web/src/recoil/atoms.tsx b/web/src/recoil/atoms.tsx
@@ -1,4 +1,4 @@
-import { atomFamily } from 'recoil';
+import { atomFamily, atom } from 'recoil';
 import { crateDataResultsQuery, crateDownloadDataResultsQuery } from 'recoil/selectors';
 import { CrateResponse } from 'interfaces/crate';
 import { Downloads } from 'interfaces/downloads';
@@ -12,3 +12,8 @@ export const crateDownloadDataResultsState = atomFamily<Downloads[], string[]>({
   key: 'crateDownloadDataResultsState',
   default: (crateNames) => crateDownloadDataResultsQuery(crateNames),
 });
+
+export const isWasmLoadedState = atom<boolean>({
+  key: 'isWasmLoaded',
+  default: false,
+});
diff --git a/web/src/web_assembly/pkg/package.json b/web/src/web_assembly/pkg/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "web_assembly",
+  "version": "0.1.0",
+  "files": [
+    "web_assembly_bg.wasm",
+    "web_assembly.js",
+    "web_assembly.d.ts"
+  ],
+  "module": "web_assembly.js",
+  "types": "web_assembly.d.ts",
+  "sideEffects": [
+    "./snippets/*"
+  ]
+}
diff --git a/web/src/web_assembly/pkg/web_assembly.d.ts b/web/src/web_assembly/pkg/web_assembly.d.ts
@@ -0,0 +1,45 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * @param {(string)[]} input
+ * @returns {(string)[]}
+ */
+export function test_array(input: string[]): string[];
+/**
+ * @param {number} left
+ * @param {number} right
+ * @returns {number}
+ */
+export function add(left: number, right: number): number;
+
+export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
+
+export interface InitOutput {
+  readonly memory: WebAssembly.Memory;
+  readonly test_array: (a: number, b: number, c: number) => void;
+  readonly add: (a: number, b: number) => number;
+  readonly __wbindgen_add_to_stack_pointer: (a: number) => number;
+  readonly __wbindgen_malloc: (a: number, b: number) => number;
+  readonly __wbindgen_free: (a: number, b: number, c: number) => void;
+}
+
+export type SyncInitInput = BufferSource | WebAssembly.Module;
+/**
+ * Instantiates the given `module`, which can either be bytes or
+ * a precompiled `WebAssembly.Module`.
+ *
+ * @param {SyncInitInput} module
+ *
+ * @returns {InitOutput}
+ */
+export function initSync(module: SyncInitInput): InitOutput;
+
+/**
+ * If `module_or_path` is {RequestInfo} or {URL}, makes a request and
+ * for everything else, calls `WebAssembly.instantiate` directly.
+ *
+ * @param {InitInput | Promise<InitInput>} module_or_path
+ *
+ * @returns {Promise<InitOutput>}
+ */
+export default function __wbg_init(module_or_path?: InitInput | Promise<InitInput>): Promise<InitOutput>;