refactor(ghoulscript): improve code spliting

Author: adenvt

packages/ghoulscript/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@privyid/ghoulscript",
   "packageManager": "yarn@4.2.2",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.4",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",

packages/ghoulscript/src/config.ts

@@ -8,7 +8,7 @@ export interface Config {
   useWorker: boolean,
 }
 
-const config: Config = { useWorker: typeof window !== 'undefined' }
+const config: Config = { useWorker: typeof window !== 'undefined' && !!window.Worker }
 
 export function useConfig () {
   return config

packages/ghoulscript/src/index.ts

@@ -1,13 +1,14 @@
+/* eslint-disable unicorn/no-await-expression-member */
 import { useConfig } from './config'
 import type {
   CommandArgs,
   CommandResult,
   Commands,
-} from './rpc'
+} from './rpc/call'
 import {
-  callRPC,
   callWorkerRPC,
 } from './rpc'
+import { callLocalRPC } from './rpc/worker.local'
 import type * as core from './core'
 
 export {
@@ -21,7 +22,7 @@ export {
 async function call <C extends Commands> (name: C, args: CommandArgs<C>): Promise<CommandResult<C>> {
   return useConfig().useWorker
     ? callWorkerRPC(name, args)
-    : callRPC(name, args)
+    : callLocalRPC(name, args)
 }
 
 export const optimizePDF: typeof core.optimizePDF = async (...args: CommandArgs<'optimizePDF'>): CommandResult<'optimizePDF'> => {

packages/ghoulscript/src/rpc/call.ts

@@ -0,0 +1,13 @@
+import * as core from '../core'
+
+export type Core = typeof core
+
+export type Commands = keyof Core
+
+export type CommandArgs<C extends Commands> = Parameters<Core[C]>
+
+export type CommandResult<C extends Commands> = ReturnType<Core[C]>
+
+export async function callRPC<C extends Commands> (name: C, args: CommandArgs<C>): Promise<CommandResult<C>> {
+  return await (core[name] as (...args: any[]) => Promise<any>)(...args)
+}

packages/ghoulscript/src/rpc.ts renamed to packages/ghoulscript/src/rpc/index.ts

@@ -1,13 +1,10 @@
-import * as core from './core'
-import RpcWorker from './rpc.worker?worker&inline'
 
-export type Core = typeof core
-
-export type Commands = keyof Core
-
-export type CommandArgs<C extends Commands> = Parameters<Core[C]>
-
-export type CommandResult<C extends Commands> = ReturnType<Core[C]>
+import type {
+  CommandArgs,
+  CommandResult,
+  Commands,
+} from './call'
+import { useRef } from '../utils/use-ref'
 
 export interface RPC <C extends Commands = any> {
   id: number,
@@ -21,17 +18,30 @@ export interface RPCResult<C extends Commands = any> {
   error?: undefined,
 }
 
-let worker: Worker
+const worker    = useRef<Worker>()
+const isLoading = useRef(false)
 
 export async function useWorkerRPC () {
-  if (!worker)
-    worker = new RpcWorker({ name: 'rpc-worker' })
+  if (isLoading.value)
+    await isLoading.toBe(false)
+
+  if (!worker.value) {
+    isLoading.value = true
+
+    try {
+      const { default: RpcWorker } = await import('./worker?worker&inline')
 
-  return worker
+      worker.value = new RpcWorker({ name: 'rpc-worker' })
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  return worker.value
 }
 
 export function setWorkerRPC (worker_: Worker) {
-  worker = worker_
+  worker.value = worker_
 }
 
 export async function callWorkerRPC<C extends Commands, A extends CommandArgs<C>> (name: C, args: A) {
@@ -70,7 +80,3 @@ export async function callWorkerRPC<C extends Commands, A extends CommandArgs<C>
     })
   })
 }
-
-export async function callRPC<C extends Commands> (name: C, args: CommandArgs<C>): Promise<CommandResult<C>> {
-  return await (core[name] as (...args: any[]) => Promise<any>)(...args)
-}

packages/ghoulscript/src/rpc/worker.local.ts

@@ -0,0 +1,6 @@
+import type { CommandArgs, Commands } from './call'
+
+export async function callLocalRPC<C extends Commands, A extends CommandArgs<C>> (name: C, args: A) {
+  // eslint-disable-next-line unicorn/no-await-expression-member
+  return (await import('./call')).callRPC(name, args)
+}

packages/ghoulscript/src/rpc.worker.ts renamed to packages/ghoulscript/src/rpc/worker.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/triple-slash-reference */
 /* eslint-env serviceworker */
 
-import type { RPC } from './rpc'
-import { callRPC } from './rpc'
+import type { RPC } from '.'
+import { callRPC } from './call'
 
 self.addEventListener('message', (event: MessageEvent<RPC>) => {
   const rpc = event.data

packages/ghoulscript/src/utils/use-ref.ts

@@ -0,0 +1,86 @@
+type OnChange<T> = (value: T) => void
+
+type OffChange = () => void
+
+interface Ref <T> {
+  value: T,
+  change: (fn: OnChange<T>) => OffChange,
+  toBe: (expect: T) => Promise<void>,
+}
+
+/**
+ * Reactive variable
+ *
+ * @param initialValue initial value
+ * @example
+ *
+ * const isBusy = useRef(false)
+ *
+ * function onClick () {
+ *    // Wait other tobe done
+ *    if (isBusy.value)
+ *      await isBusy.toBe(false)
+ *
+ *    isBusy.value = true
+ *
+ *    // Heavy async function
+ *    setTimeout(() => {
+ *      isBusy.value = false
+ *    },5000)
+ * }
+ */
+export function useRef<T = any> (): Ref<T | undefined>
+export function useRef<T = any> (initialValue: T): Ref<T>
+export function useRef<T> (initialValue?: T): Ref<T | undefined> {
+  let value: T | undefined = initialValue
+
+  const watcher = new Set<OnChange<T>>()
+
+  return {
+    /**
+     * Get value
+     */
+    get value (): T | undefined {
+      return value
+    },
+
+    /**
+     * Set value
+     */
+    set value (newValue: T) {
+      value = newValue
+
+      // emit on-change
+      for (const emit of watcher)
+        emit(newValue)
+    },
+
+    /**
+     * Add on change listener
+     * @param fn on change handler
+     */
+    change (fn: OnChange<T>): OffChange {
+      watcher.add(fn)
+
+      return () => {
+        watcher.delete(fn)
+      }
+    },
+
+    /**
+     * Wait until
+     * @param expect expected value
+     */
+    // eslint-disable-next-line @typescript-eslint/promise-function-async
+    toBe (expect: T | undefined) {
+      return new Promise<void>((resolve) => {
+        const stop = this.change((value) => {
+          if (value === expect) {
+            stop()
+            resolve()
+          }
+        })
+      })
+    },
+  }
+}