satelllte / displacement Goto Github PK

• use ctx.canvas.width, ctx.canvas.height instead of separate width, height arguments
• remove width, height arguments

Communication between UI app and WASM should be done through Worker which runs in a separate thread allowing to render 8k images without freeze, control render loading state, etc.

Checklist:

• From pull requests: deploys to {{PR_ID}}.example.com
• From main branch: deploys to example.com

Some options to review / choose from:

• https://github.com/marketplace/actions/vercel-action
• https://github.com/marketplace/actions/netlify-deploy

For reference: https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app

Conditions:

• by default, use system theme
• implement styles
• implement theme switcher (preserve user's preference in local storage)

Something like this:

// worker extension type
interface ExtendedWorker<MessageEventType> extends Worker {
  onmessage: ((ev: MessageEvent<MessageEventType>) => void) | null
  postMessage(message: MessageEventType, transfer: Transferable[]): void
  postMessage(message: MessageEventType, options?: StructuredSerializeOptions): void
  // ...
}

// usage
type MyWorker = ExtendedWorker<MyMessageType>

docs: https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
support: https://caniuse.com/offscreencanvas

Try Vitest

Offline detection can be implemented using:

  useEffect(() => {
    // TODO: notify user that the app is available for offline use
    // ...

    // https://developer.chrome.com/docs/workbox/modules/workbox-window/#register-a-service-worker-and-notify-the-user-the-very-first-time-that-service-worker-is-active
    // @ts-ignore
    const wb = window.workbox
    // @ts-ignore
    wb.addEventListener('activated', (event) => {
      if (!event.isUpdate) {
        console.info('WB | activated | event: ', event)
        
        // READY FOR OFFLINE USE   !!!!!!
        // do something with it ....
      }
    })
  }, [])

Workbox docs reference: https://developer.chrome.com/docs/workbox/modules/workbox-window/#register-a-service-worker-and-notify-the-user-the-very-first-time-that-service-worker-is-active

To turn off page reload after getting back online, reloadOnOnline: false can be set in next-pwa config: https://github.com/shadowwalker/next-pwa#available-options

• Cleanup WASM
• Cleanup GraphicsManager
• Cleanup CI

Resolve the following pipeline:

• WASM: tests / lint
• WASM: build
• Web: typescript check
• Web: build

On CI, put NEXT_CI_BUILD = "true" environment variable

In next.config.js conditionally ignore:

• eslint: https://nextjs.org/docs/api-reference/next.config.js/ignoring-eslint
• typescript: https://nextjs.org/docs/api-reference/next.config.js/ignoring-typescript-errors

Setup more strict linting rules for ./src/**/*.tsx? files

• Use Inter variable font from CDN
• Make sure it's being cached by PWA service worker

• Setup Tailwind | done by: #6
• Markup base layout sections

Things to try

GitHub Action: https://github.com/marketplace/actions/lighthouse-check
Netlify custom draft URL: https://answers.netlify.com/t/custom-draft-urls-for-manual-deploys/10888/2