Fixed build process to include wasm-bindgen and wasm-pack, simplified package.json scripts and build process

Author: jake-pauls

wasm-rust-sample/.gitignore

@@ -3,4 +3,4 @@ dist/
 target/
 pkg/
 wasm-pack.log
-uxp-wasm.js
+*.wasm.js

wasm-rust-sample/Cargo.lock

@@ -7,3 +7,11 @@ edition = "2018"
 
 [lib]
 crate-type = ["cdylib"]
+
+[dependencies]
+js-sys = "0.3.52"
+wasm-bindgen = "0.2.75"
+web-sys = { version = "0.3.52", features = ["console"] }
+
+[dev-dependencies]
+wasm-bindgen-test = "0.3.25"

wasm-rust-sample/Cargo.toml

@@ -2,25 +2,28 @@
 
 This plugin is a starting point for leveraging Rust and WebAssembly in your UXP plugins. It comes defined with most of the dependencies you need to get started. As this plugin does rely on the [Rust Programming Language](https://www.rust-lang.org/), an environment configured for Rust development will be required before this will be usable in Photoshop.
 
-**Note:** As part of working with the current limitations of UXP the Rust/WebAssembly build process within this plugin has _many_ unconventional ways of getting things done.
-
-If you happen to be leveraging Rust/WebAssembly in a more traditional manner, please checkout tools such as [wasm-bindgen](https://github.com/rustwasm/wasm-bindgen/) and [wasm-pack](https://github.com/rustwasm/wasm-pack) that the Rust development team are actively working on.
 
 # Configuration
 
 ## Rust Environment
 
 Before beginning ensure that the [Rust toolchain](https://www.rust-lang.org/tools/install) is installed and configured on your machine.
 
-Follow the instructions and the `rustup` installation. Once completed, your machine will be able to execute `cargo` commands.
+Follow the instructions and the `rustup` installation process. Once completed, your shell will have access to `cargo` commands.
+
+> You **must** have the Rust toolchain installed in order to build the project
 
-To test if Rust is configured properly before loading the project, run the basic tests in the project's root:
+### 1. Install [wasm-pack](https://github.com/rustwasm/wasm-pack) 
 
 ```
-$ yarn test         # or cargo test
+$ cargo install wasm-pack
 ```
 
-> You **must** have the Rust toolchain installed in order to build the project
+### 2. Test local Rust configuration and [wasm-pack](https://github.com/rustwasm/wasm-pack) installation 
+
+```
+$ yarn test         # or cargo test && wasm-pack test
+```
 
 ## Node.js
 
@@ -42,17 +45,16 @@ $ yarn build        # or npm run build
 
 This will build a production version of the plugin and place it in `dist`. It will not update every time you make a change to the source files.
 
-**Note:** Since UXP does not have implicit access to `localhost` for leveraging a development server, this plugin uses inline WebAssembly to work properly. In `js/index.js` this file is included:
+**Note:** Since UXP does not have implicit access to `localhost` for leveraging a development server, this plugin uses inline WebAssembly to work properly. As such, you'll find the following import in `js/index.js`:
 
 ```
-import encodedRust from './uxp-wasm';
+import encodedRust from './uxp.wasm';
 ```
 
 When the build script is triggerred, this JS file with the inline WebAssembly is generated. Should you wish to generate this file yourself, execute the following commands:
 
 ```
-$ yarn wasm:build   # compile the Rust crate to WebAssembly
-$ yarn wasm:inline  # generate JS file containing the inline WebAssembly data
+$ yarn inlinewasm   # generate JS file containing the inline WebAssembly data
 ```
 
 ## Launching in Photoshop

wasm-rust-sample/README.md

@@ -1,6 +1,8 @@
 import { entrypoints } from 'uxp';
-import { Buffer } from 'buffer';
-import encodedRust from './uxp-wasm';
+import { decodeWebAssembly } from './utils';
+
+import encodedRust from './uxp.wasm';
+import init, { run, add, multiply } from '../pkg/uxp_wasm.js';
 
 entrypoints.setup({
   plugin: {
@@ -10,20 +12,15 @@ entrypoints.setup({
   },
 });
 
-// Decode from base64 to binary
-// js-inline-wasm can serve this as decoded, however atob() is not accessible in UXP
-let decodedRust = Buffer.from(encodedRust, 'base64').toString('binary');
-const len = decodedRust.length;
-const bytes = new Uint8Array(len);
+const main = async () => {
+  const decodedRust = decodeWebAssembly(encodedRust);
 
-// Collect byte array
-for (var i = 0; i < len; i++) {
-  bytes[i] = decodedRust.charCodeAt(i);
-}
+  // Manually pass WebAssembly to prevent `wasm-bindgen` from using `fetch()`
+  await init(decodedRust);
+  console.log(`2 + 2 = ${add(2, 2)}`);
+  console.log(`2 * 2 = ${multiply(2, 2)}`);
+};
 
-WebAssembly.instantiate(bytes, {})
-  .then((obj) => {
-    console.log(`1 + 1 = ${obj.instance.exports.add(1, 1)}`);
-    console.log(`2 * 2 = ${obj.instance.exports.multiply(2, 2)}`);
-  })
-  .catch((e) => console.log(e));
+await main().catch((err) => {
+  console.log(err);
+});

wasm-rust-sample/js/index.js

@@ -0,0 +1,20 @@
+import { Buffer } from 'buffer';
+
+/**
+ * Decodes WebAssembly from base64 to binary
+ * js-inline-wasm can serve this as decoded, however the decoding method is deprecated from the Node.js API
+ */
+export const decodeWebAssembly = async (encodedWebAssembly) => {
+  let decodedRust = Buffer.from(encodedWebAssembly, 'base64').toString(
+    'binary'
+  );
+
+  const len = decodedRust.length;
+  const byteArray = new Uint8Array(len);
+
+  for (var i = 0; i < len; i++) {
+    byteArray[i] = decodedRust.charCodeAt(i);
+  }
+
+  return byteArray;
+};

wasm-rust-sample/js/utils.js

@@ -4,25 +4,26 @@
   "license": "none",
   "private": true,
   "scripts": {
-    "build": "npm run compile && npm run pack",
-    "pack": "webpack --mode development",
-    "compile": "npm run wasm:build && npm run wasm:inline",
-    "wasm:build": "cargo build --target wasm32-unknown-unknown --release",
-    "wasm:inline": "npx crlf --set=LF node_modules/.bin/inlinewasm && inlinewasm target/wasm32-unknown-unknown/release/uxp_wasm_rust_sample.wasm -o js/uxp-wasm.js -t encoded",
-    "test": "cargo test"
+    "build": "rimraf dist && webpack --mode development",
+    "inlinewasm": "npx crlf --set=LF node_modules/.bin/inlinewasm && inlinewasm pkg/uxp_wasm_bg.wasm -o js/uxp.wasm.js -t encoded",
+    "test": "cargo test && wasm-pack test --node"
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
     "@babel/preset-env": "^7.14.7",
+    "@wasm-tool/wasm-pack-plugin": "^1.5.0",
     "babel-loader": "^8.2.2",
+    "babel-polyfill": "^6.26.0",
     "buffer": "^6.0.3",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^5.2.6",
     "js-inline-wasm": "^0.0.7",
+    "rimraf": "^3.0.2",
     "style-loader": "^3.0.0",
     "text-encoding": "^0.7.0",
     "webpack": "^5.44.0",
     "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2"
+    "webpack-dev-server": "^3.11.2",
+    "webpack-shell-plugin-next": "^2.2.2"
   }
-}
+}