Load wasm via fetch rather than base64 embedding

Requires splitting into two packages to make use of vite's externals until something like vitejs/vite#9734 lands Gets rid of hack_myfetch.js Replaces hack_exports.js with vite plugin options Stops copying generated wasm-pack files around Switches the packages to ESM Simplifies scripts and updates some dependencies for necessary features Fixes types and ditches a lot of ts disablements
element-hq · Dec 4, 2024 · f624d6f · f624d6f
1 parent 1bf6183
commit f624d6f
Show file tree

Hide file tree

Showing 27 changed files with 591 additions and 575 deletions.
diff --git a/Makefile b/Makefile
@@ -27,15 +27,8 @@ ios: targets-ios
 web:
 	cd bindings/wysiwyg-wasm && \
 	npm install && \
-	npm run build && \
-	mkdir -p ../../platforms/web/generated && \
-	cp \
-		pkg/wysiwyg_bg.wasm \
-		pkg/wysiwyg_bg.wasm.d.ts \
-		pkg/wysiwyg.d.ts \
-		pkg/wysiwyg.js \
-		../../platforms/web/generated/
-	cd platforms/web && yarn install && yarn build
+	npm run build
+	cd platforms/web && yarn install --force && yarn build
 
 web-format:
 	cd platforms/web && \

diff --git a/bindings/wysiwyg-wasm/index.d.ts b/bindings/wysiwyg-wasm/index.d.ts
@@ -0,0 +1,17 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+export * from './pkg/wysiwyg.d';
+
+/**
+ * Load the WebAssembly module in the background, if it has not already been loaded.
+ *
+ * Returns a promise which will resolve once the other methods are ready.
+ *
+ * @returns {Promise<void>}
+ */
+export default function initAsync(): Promise<void>;
diff --git a/bindings/wysiwyg-wasm/index.js b/bindings/wysiwyg-wasm/index.js
@@ -0,0 +1,83 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+// @ts-check
+
+/**
+ * This is the entrypoint on non-node ESM environments (such as Element Web).
+ * `asyncLoad` will load the WASM module using a `fetch` call.
+ */
+
+import * as bindings from './pkg/wysiwyg_bg.js';
+
+const moduleUrl = new URL(
+    './pkg/wysiwyg_bg.wasm?url',
+    import.meta.url,
+);
+
+// We want to throw an error if the user tries to use the bindings before
+// calling `initAsync`.
+bindings.__wbg_set_wasm(
+    new Proxy(
+        {},
+        {
+            get() {
+                throw new Error(
+                    '@element-hq/matrix-wysiwyg was used before it was initialized. Call `initAsync` first.',
+                );
+            },
+        },
+    ),
+);
+
+/**
+ * Stores a promise of the `loadModule` call
+ * @type {Promise<void> | null}
+ */
+let modPromise = null;
+
+/**
+ * Loads the WASM module asynchronously
+ *
+ * @returns {Promise<void>}
+ */
+async function loadModule() {
+    let mod;
+    if (typeof WebAssembly.compileStreaming === 'function') {
+        mod = await WebAssembly.compileStreaming(fetch(moduleUrl));
+    } else {
+        // Fallback to fetch and compile
+        const response = await fetch(moduleUrl);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch wasm module: ${moduleUrl}`);
+        }
+        const bytes = await response.arrayBuffer();
+        mod = await WebAssembly.compile(bytes);
+    }
+
+    const instance = await WebAssembly.instantiate(mod, {
+        './wysiwyg_bg.js': bindings,
+    });
+
+    bindings.__wbg_set_wasm(instance.exports);
+    instance.exports.__wbindgen_start();
+}
+
+/**
+ * Load the WebAssembly module in the background, if it has not already been loaded.
+ *
+ * Returns a promise which will resolve once the other methods are ready.
+ *
+ * @returns {Promise<void>}
+ */
+export default async function initAsync() {
+    if (!modPromise) modPromise = loadModule();
+    await modPromise;
+}
+
+// Re-export everything from the generated javascript wrappers
+export * from './pkg/wysiwyg_bg.js';
diff --git a/bindings/wysiwyg-wasm/package.json b/bindings/wysiwyg-wasm/package.json
@@ -1,9 +1,10 @@
 {
-  "name": "wysiwyg-wasm",
+  "name": "@vector-im/matrix-wysiwyg-wasm",
   "version": "2.37.14",
   "homepage": "https://gitlab.com/andybalaam/wysiwyg-rust",
   "description": "WASM bindings for wysiwyg-rust",
   "license": "AGPL-3.0",
+  "type": "module",
   "collaborators": [
     "Andy Balaam <[email protected]>"
   ],
@@ -17,13 +18,21 @@
     "messaging",
     "wysiwyg"
   ],
-  "main": "wysiwyg.js",
-  "types": "pkg/wysiwyg.d.ts",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    "." : {
+      "import": "./index.js",
+      "types": "./index.d.ts"
+    }
+  },
   "files": [
     "pkg/wysiwyg_bg.wasm",
     "pkg/wysiwyg_bg.wasm.d.ts",
     "pkg/wysiwyg.js",
-    "pkg/wysiwyg.d.ts"
+    "pkg/wysiwyg.d.ts",
+    "index.d.ts",
+    "index.js"
   ],
   "devDependencies": {
     "wasm-pack": "^0.13.0",
@@ -34,8 +43,8 @@
     "node": ">= 10"
   },
   "scripts": {
-    "dev-build": "WASM_BINDGEN_WEAKREF=1 wasm-pack build --profiling --target web --out-name wysiwyg --out-dir ./pkg",
-    "build": "RUSTFLAGS='-C opt-level=s' WASM_BINDGEN_WEAKREF=1 wasm-pack build --release --target web --out-name wysiwyg --out-dir ./pkg",
+    "dev-build": "WASM_BINDGEN_WEAKREF=1 wasm-pack build --profiling --target bundler --out-name wysiwyg --out-dir ./pkg",
+    "build": "RUSTFLAGS='-C opt-level=s' WASM_BINDGEN_WEAKREF=1 wasm-pack build --release --target bundler --out-name wysiwyg --out-dir ./pkg",
     "test": "jest --verbose",
     "doc": "typedoc --tsconfig ."
   }

diff --git a/platforms/web/example-wysiwyg/README.md b/platforms/web/example-wysiwyg/README.md
@@ -18,7 +18,7 @@ and open the URL that is printed on the console.
     npm create vite@latest example-wysiwyg -- --template react-ts
     cd example-wysiwyg
     npm install
-    npm add '@vector-im/matrix-wysiwyg'
+    npm add '@vector-im/matrix-wysiwyg-wasm'
     ```
 * Edit example-wysiwyg/src/App.tsx to look how it looks in this repo.
 * Edit example-wysiwyg/index.html to set the page title and remove favicon.

diff --git a/platforms/web/lib/composer.test.ts b/platforms/web/lib/composer.test.ts
@@ -6,7 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ComposerModel } from '../generated/wysiwyg';
+import { ComposerModel } from '@vector-im/matrix-wysiwyg-wasm';
+
 import { processInput } from './composer';
 import { FormattingFunctions } from './types';
 

diff --git a/platforms/web/lib/composer.ts b/platforms/web/lib/composer.ts
@@ -10,7 +10,8 @@ import {
     ComposerModel,
     ComposerUpdate,
     SuggestionPattern,
-} from '../generated/wysiwyg';
+} from '@vector-im/matrix-wysiwyg-wasm';
+
 import {
     WysiwygInputEvent,
     InputEventProcessor,

diff --git a/platforms/web/lib/conversion.ts b/platforms/web/lib/conversion.ts
@@ -10,7 +10,8 @@ Please see LICENSE in the repository root for full details.
 import {
     // eslint-disable-next-line camelcase
     new_composer_model,
-} from '../generated/wysiwyg.js';
+} from '@vector-im/matrix-wysiwyg-wasm';
+
 import { initOnce } from './useComposerModel.js';
 
 const NEWLINE_CHAR = '\n';

diff --git a/platforms/web/lib/dom.ts b/platforms/web/lib/dom.ts
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ComposerModel, DomHandle } from '../generated/wysiwyg';
+import { ComposerModel, DomHandle } from '@vector-im/matrix-wysiwyg-wasm';
 
 export function refreshComposerView(
     node: HTMLElement,

diff --git a/platforms/web/lib/suggestion.test.tsx b/platforms/web/lib/suggestion.test.tsx
@@ -10,7 +10,8 @@ import init, {
     // eslint-disable-next-line camelcase
     new_composer_model,
     SuggestionPattern,
-} from '../generated/wysiwyg';
+} from '@vector-im/matrix-wysiwyg-wasm';
+
 import { SUGGESTIONS } from './constants';
 import {
     getSuggestionChar,

diff --git a/platforms/web/lib/suggestion.ts b/platforms/web/lib/suggestion.ts
@@ -6,7 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { SuggestionPattern } from '../generated/wysiwyg';
+import { SuggestionPattern } from '@vector-im/matrix-wysiwyg-wasm';
+
 import { SUGGESTIONS } from './constants';
 import { MappedSuggestion, SuggestionChar, SuggestionType } from './types';
 

diff --git a/platforms/web/lib/types.ts b/platforms/web/lib/types.ts
@@ -6,7 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ComposerUpdate } from '../generated/wysiwyg';
+import { ComposerUpdate } from '@vector-im/matrix-wysiwyg-wasm';
+
 import { ACTION_TYPES, SUGGESTIONS } from './constants';
 import { AllowedMentionAttributes, LinkEvent } from './useListeners/types';
 

diff --git a/platforms/web/lib/useComposerModel.test.tsx b/platforms/web/lib/useComposerModel.test.tsx
@@ -8,8 +8,8 @@ Please see LICENSE in the repository root for full details.
 
 import { act, RefObject } from 'react';
 import { renderHook, waitFor } from '@testing-library/react';
+import * as mockRustModel from '@vector-im/matrix-wysiwyg-wasm';
 
-import * as mockRustModel from '../generated/wysiwyg';
 import { useComposerModel } from './useComposerModel';
 
 describe('useComposerModel', () => {

diff --git a/platforms/web/lib/useComposerModel.ts b/platforms/web/lib/useComposerModel.ts
@@ -7,15 +7,15 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { RefObject, useCallback, useEffect, useState } from 'react';
-
 // rust generated bindings
 import init, {
     ComposerModel,
     // eslint-disable-next-line camelcase
     new_composer_model,
     // eslint-disable-next-line camelcase
     new_composer_model_from_html,
-} from '../generated/wysiwyg.js';
+} from '@vector-im/matrix-wysiwyg-wasm';
+
 import { replaceEditor } from './dom';
 
 let initStarted = false;

diff --git a/platforms/web/lib/useFormattingFunctions.ts b/platforms/web/lib/useFormattingFunctions.ts
@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { RefObject, useMemo } from 'react';
+import { ComposerModel } from '@vector-im/matrix-wysiwyg-wasm';
 
 import { BlockType, FormattingFunctions } from './types';
 import { sendWysiwygInputEvent } from './useListeners';
@@ -16,7 +17,6 @@ import {
     LinkEvent,
     SuggestionEvent,
 } from './useListeners/types';
-import { ComposerModel } from '../generated/wysiwyg';
 
 export function useFormattingFunctions(
     editorRef: RefObject<HTMLElement | null>,

diff --git a/platforms/web/lib/useListeners/event.test.ts b/platforms/web/lib/useListeners/event.test.ts
@@ -7,7 +7,8 @@ Please see LICENSE in the repository root for full details.
 */
 
 // eslint-disable-next-line camelcase
-import init, { new_composer_model } from '../../generated/wysiwyg';
+import init, { new_composer_model } from '@vector-im/matrix-wysiwyg-wasm';
+
 import { extractActionStates, handleKeyDown } from './event';
 import { FormatBlockEvent } from './types';
 import { FormattingFunctions } from '../types';

diff --git a/platforms/web/lib/useListeners/event.ts b/platforms/web/lib/useListeners/event.ts
@@ -7,12 +7,12 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { MouseEvent as ReactMouseEvent } from 'react';
-
 import {
     ComposerModel,
     MenuStateUpdate,
     SuggestionPattern,
-} from '../../generated/wysiwyg';
+} from '@vector-im/matrix-wysiwyg-wasm';
+
 import { processEvent, processInput } from '../composer';
 import {
     getCurrentSelection,

diff --git a/platforms/web/lib/useListeners/useListeners.ts b/platforms/web/lib/useListeners/useListeners.ts
@@ -7,8 +7,11 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { RefObject, useEffect, useRef, useState } from 'react';
+import {
+    ComposerModel,
+    SuggestionPattern,
+} from '@vector-im/matrix-wysiwyg-wasm';
 
-import { ComposerModel, SuggestionPattern } from '../../generated/wysiwyg';
 import { isClipboardEvent, isInputEvent } from './assert';
 import { handleInput, handleKeyDown, handleSelectionChange } from './event';
 import {

diff --git a/platforms/web/lib/useTestCases/useTestCases.ts b/platforms/web/lib/useTestCases/useTestCases.ts
@@ -7,8 +7,8 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { RefObject, useCallback, useMemo, useRef, useState } from 'react';
+import { ComposerModel } from '@vector-im/matrix-wysiwyg-wasm';
 
-import { ComposerModel } from '../../generated/wysiwyg';
 import { Actions } from './types';
 import {
     getSelectionAccordingToActions,

diff --git a/platforms/web/lib/useTestCases/utils.test.ts b/platforms/web/lib/useTestCases/utils.test.ts
@@ -6,7 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import init from '../../generated/wysiwyg';
+import init from '@vector-im/matrix-wysiwyg-wasm';
+
 import { Actions } from './types';
 import {
     escapeHtml,

diff --git a/platforms/web/lib/useTestCases/utils.ts b/platforms/web/lib/useTestCases/utils.ts
@@ -12,7 +12,8 @@ import {
     ComposerUpdate,
     // eslint-disable-next-line camelcase
     new_composer_model_from_html,
-} from '../../generated/wysiwyg';
+} from '@vector-im/matrix-wysiwyg-wasm';
+
 import { getCurrentSelection } from '../dom';
 import { TraceAction } from '../types';
 import { isSelectTuple } from './assert';