ci: wasm build

Gumichocopengin8 · Aug 10, 2023 · 53b3f6b · 53b3f6b
1 parent c103449
commit 53b3f6b
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 28 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/package.json b/web/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next",
-    "build": "next build",
+    "build": "npm run build:wasm && next build",
     "build:wasm": "wasm-pack build src/web_assembly --target web --release",
     "start": "next start -p $PORT",
     "lint-app": "eslint './src/**/*.{ts,tsx}'",

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/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,
+});