feat(web): deploy on github pages

.github/workflows/deploy.yaml

@@ -0,0 +1,39 @@
+name: Deploy to GitHub Pages
+on:
+  workflow_dispatch:
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install toolchain
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          target: wasm32-unknown-unknown
+      - name: Cache toolchain
+        uses: Swatinem/rust-cache@v2
+      - name: Install dependencies
+        run: |
+          sudo apt-get update; sudo apt-get install binutils
+          cargo install cargo-quickinstall
+          cargo quickinstall wasm-bindgen-cli
+      - name: Build
+        run: |
+          make web
+      - name: Setup Pages
+        uses: actions/configure-pages@v2
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: 'web'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.github/workflows/release.yaml

@@ -27,50 +27,6 @@ jobs:
         run: cargo publish
         env:
           CARGO_REGISTRY_TOKEN: ${{ secrets.CARGO_REGISTRY_TOKEN }}
-  # Build for wasm
-  release-wasm:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: olegtarasov/get-tag@v2.1.2
-        id: get_version
-      - name: Checkout sources
-        uses: actions/checkout@v4
-      - name: Install toolchain
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          targets: wasm32-unknown-unknown
-      - name: Cache toolchain
-        uses: Swatinem/rust-cache@v2
-      - name: Install dependencies
-        run: |
-          sudo apt-get update; sudo apt-get install binutils
-      - name: Install wasm-bindgen-cli
-        run: |
-          cargo install wasm-bindgen-cli
-      - name: Build
-        run: |
-          cargo build --profile tiny --target wasm32-unknown-unknown
-      - name: Prepare package
-        run: |
-          wasm-bindgen --no-typescript --out-name ncube --out-dir wasm --target web target/wasm32-unknown-unknown/tiny/${{ env.binary }}.wasm
-      - name: Package as a zip
-        working-directory: ./wasm
-        run: |
-          zip --recurse-paths ../${{ env.binary }}.zip .
-      - name: Upload binaries to artifacts
-        uses: actions/upload-artifact@v3
-        with:
-          path: ${{ env.binary }}.zip
-          name: wasm
-          retention-days: 1
-      - name: Upload binaries to release
-        uses: svenstaro/upload-release-action@v2
-        with:
-          repo_token: ${{ secrets.GITHUB_TOKEN }}
-          file: ${{ env.binary }}.zip
-          asset_name: wasm.zip
-          tag: ${{ github.ref }}
-          overwrite: true
   # Linux
   release-linux:
     runs-on: ubuntu-latest

Makefile

@@ -13,14 +13,9 @@ web: FORCE
 		--target wasm32-unknown-unknown
 	wasm-bindgen \
 		--out-name ncube \
-		--out-dir	wasm \
+		--out-dir	web/wasm \
 		--target web \
 		target/wasm32-unknown-unknown/tiny/ncube.wasm
-	zip \
-		-j \
-		web/public/ncube.zip \
-		wasm/*
-	rm -r wasm
 
 clean: FORCE
 	-rm -r target

web/.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 dist/
+wasm/

web/pages/index/index.page.tsx

@@ -1,5 +1,6 @@
-import JSZip from 'jszip'
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
+
+import ncube from '../../wasm/ncube'
 
 declare global {
   interface Window {
@@ -8,14 +9,6 @@ declare global {
   }
 }
 
-const zip = new JSZip()
-
-enum STATE {
-  FETCHING_BINARY,
-  LOADING_APP,
-  LOADED,
-}
-
 const export_to_data_file = (dimension: number, data: string) => {
   const fileName = `${dimension}cube-${Math.floor(
     new Date().getTime() / 1000,
@@ -36,35 +29,15 @@ const LATEST_RELEASE_URL = 'https://github.com/ndavd/ncube/releases/latest'
 const GITHUB_URL = 'https://github.com/ndavd/ncube'
 
 export const Page = () => {
-  const [appState, setAppState] = useState(STATE.FETCHING_BINARY)
+  const [hasLoaded, setHasLoaded] = useState(false)
   const [isHovering, setIsHovering] = useState(false)
   const [dragDropData, setDragDropData] = useState<string | null>(null)
   const [hasNotification, setHasNotification] = useState(false)
 
-  const isLoading = appState == STATE.LOADING_APP
-  const hasLoaded = appState == STATE.LOADED
-  const setIsLoading = () => setAppState(STATE.LOADING_APP)
-  const setLoaded = () => setAppState(STATE.LOADED)
-
-  const fetchRelease = useCallback(async () => {
-    const res = await fetch('/ncube.zip', {
-      headers: { Accept: 'application/octet-stream' },
-    })
-    const wasmZipBlob = await res.blob()
-    const wasmZip = await zip.loadAsync(wasmZipBlob)
-    const js = await wasmZip.files['ncube.js'].async('text')
-    const wasm = await wasmZip.files['ncube_bg.wasm'].async('uint8array')
-    const jsURL = URL.createObjectURL(
-      new Blob([js], { type: 'application/javascript' }),
-    )
-    const wasmURL = URL.createObjectURL(
-      new Blob([wasm], { type: 'application/wasm' }),
-    )
-    const jsModule = await import(/* @vite-ignore */ jsURL)
-
-    setIsLoading()
-    jsModule
-      .default(wasmURL)
+  const setLoaded = () => setHasLoaded(true)
+
+  useEffect(() => {
+    ncube()
       .then(setLoaded)
       .catch((error: Error) => {
         if (
@@ -79,10 +52,6 @@ export const Page = () => {
       })
   }, [])
 
-  useEffect(() => {
-    fetchRelease()
-  }, [fetchRelease])
-
   useEffect(() => {
     if (!hasLoaded) return
     const timeout = setTimeout(() => {
@@ -118,9 +87,6 @@ export const Page = () => {
     setDragDropData(await dataFile.text())
   }
 
-  const renderOK = (text: string) => (
-    <div className="inline text-green">{text}</div>
-  )
   const renderWarning = (text: string) => (
     <div className="inline font-bold text-primary">{text}</div>
   )
@@ -152,13 +118,8 @@ export const Page = () => {
       <br />
       <div>-- ncube --</div>
       <br />
-      <div>Fetching release... {isLoading && renderOK('DONE')}</div>
-      {isLoading && (
-        <>
       <div>Entering n-dimensional space...</div>
       {renderWarning('Brace yourself.')}
-        </>
-      )}
     </div>
   )