Merge pull request #40 from MLH-Fellowship/wasm-rust-sample

Added Rust/WebAssembly Sample

Author: kerrishotts

wasm-rust-sample/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist/
+target/
+pkg/
+wasm/
+wasm-pack.log
+*.wasm.js

wasm-rust-sample/Cargo.lock

@@ -0,0 +1,15 @@
+[package]
+name = "uxp-wasm-rust-sample"
+description = "UXP Sample for using Rust and WebAssembly in Photoshop"
+version = "0.1.0"
+categories = ["wasm", "uxp"]
+edition = "2018"
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+wasm-bindgen = "0.2.75"
+
+[dev-dependencies]
+wasm-bindgen-test = "0.3.25"

wasm-rust-sample/Cargo.toml

@@ -0,0 +1,74 @@
+# WebAssembly and Rust Example
+
+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.
+
+# 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 process. Once completed, your shell will have access to `cargo` commands.
+
+> You **must** have the Rust toolchain installed in order to build the project
+
+**Note:** For Windows users, the [Microsoft C++ Build Tools](https://visualstudio.microsoft.com/visual-cpp-build-tools/) must be installed for the Rust compiler to work properly. For more information, consult the [Rust documentation](https://doc.rust-lang.org/book/ch01-01-installation.html#installing-rustup-on-windows).
+
+### 1. Install [wasm-pack](https://github.com/rustwasm/wasm-pack)
+
+```
+$ cargo install wasm-pack
+```
+
+### 2. Test local Rust configuration and [wasm-pack](https://github.com/rustwasm/wasm-pack) installation
+
+```
+$ yarn test         # or cargo test && wasm-pack test --node
+```
+
+## Node.js
+
+### 1. Install the Node.js dependencies:
+
+```
+$ yarn install      # or npm install
+```
+
+### 2. Run plugin in watch or build mode
+
+```
+$ yarn watch        # or npm run watch
+
+# OR
+
+$ yarn build        # or npm run build
+```
+
+> You **must** run `build` prior to trying to use this plugin within Photoshop!
+
+- `yarn watch` or `npm run watch` will build a development version of the plugin, and recompile everytime you make a change to the source files. The result is placed in `dist`.
+- `yarn build` or `npm run build` 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. As such, you'll find the following import in `js/index.js`:
+
+```
+import encodedRust from '../wasm/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 inlinewasm   # generate JS file containing the inline WebAssembly data
+```
+
+## Launching in Photoshop
+
+You can use the UXP Developer Tools to load the plugin into Photoshop.
+
+If the plugin hasn't already been added to your workspace in the UXP Developer Tools, you can add it by clicking "Add Plugin..." and selecting `dist/manifest.json`. **DO NOT** select the `manifest.json` file inside the `plugin` folder.
+
+Once added, you can load it into Photoshop by clicking the ••• button on the corresponding row, and clicking "Load". Switch to Photoshop and you should see the starter panels.
+
+## What this plugin does
+
+This plugin uses a basic Rust implementation to hold state for a counter component that is surfaced on the UI. It also uses the `wasm-bindgen` API to make use of JavaScript API methods in Rust, such as `console.log`. Finally, the plugin demonstrates a potential build process for leveraging Rust and WebAssembly in your UXP plugins.

wasm-rust-sample/README.md

@@ -0,0 +1,36 @@
+import { entrypoints } from 'uxp';
+import { decodeWebAssembly } from './utils';
+
+import encodedRust from '../wasm/uxp.wasm';
+import init, { add, multiply, global_sys, Counter } from '../pkg/uxp_wasm.js';
+
+entrypoints.setup({
+  plugin: {
+    create(plugin) {
+      console.log('Plugin created successfully.', plugin);
+    },
+    panels: {
+      plugin: this,
+    },
+  },
+});
+
+const main = async () => {
+  const decodedRust = decodeWebAssembly(encodedRust);
+
+  // Manually pass WebAssembly to prevent `wasm-bindgen` from using `fetch()`
+  await init(decodedRust);
+
+  console.log(`Log 3: Sent from JavaScript! (2 + 2 = ${add(2, 2)})`);
+  console.log(`Log 4: Sent from JavaScript! (12 * 12 = ${multiply(12, 12)})`);
+
+  const counter = Counter.new();
+  setInterval(() => {
+    counter.increment();
+    document.getElementById('timer').textContent = counter.get_count();
+  }, 1000);
+};
+
+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

@@ -0,0 +1,31 @@
+{
+  "name": "com.adobe.example.wasm-rust-sample",
+  "version": "1.0.0",
+  "license": "none",
+  "private": true,
+  "scripts": {
+    "build": "rimraf dist && webpack --mode development",
+    "watch": "nodemon -w src -w js -w webpack.config.js -e js,rs,json,css,html -x npm run build",
+    "inlinewasm": "npx crlf --set=LF node_modules/.bin/inlinewasm && inlinewasm pkg/uxp_wasm_bg.wasm -o wasm/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",
+    "nodemon": "^2.0.12",
+    "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-shell-plugin-next": "^2.2.2"
+  }
+}