Added example of managing state with rust impl and console log macros, updated icons and assets

jake-pauls · jake-pauls · commit 0f4d6a926e39 · 2021-08-18T13:12:08.000-07:00
diff --git a/wasm-rust-sample/.gitignore b/wasm-rust-sample/.gitignore
@@ -2,5 +2,6 @@ node_modules
 dist/
 target/
 pkg/
+wasm/
 wasm-pack.log
 *.wasm.js
diff --git a/wasm-rust-sample/Cargo.lock b/wasm-rust-sample/Cargo.lock
diff --git a/wasm-rust-sample/Cargo.toml b/wasm-rust-sample/Cargo.toml
@@ -9,9 +9,7 @@ edition = "2018"
 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"
diff --git a/wasm-rust-sample/README.md b/wasm-rust-sample/README.md
@@ -2,7 +2,6 @@
 
 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
@@ -13,16 +12,18 @@ Follow the instructions and the `rustup` installation process. Once completed, y
 
 > You **must** have the Rust toolchain installed in order to build the project
 
-### 1. Install [wasm-pack](https://github.com/rustwasm/wasm-pack) 
+**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 
+### 2. Test local Rust configuration and [wasm-pack](https://github.com/rustwasm/wasm-pack) installation
 
 ```
-$ yarn test         # or cargo test && wasm-pack test
+$ yarn test         # or cargo test && wasm-pack test --node
 ```
 
 ## Node.js
@@ -33,22 +34,25 @@ $ yarn test         # or cargo test && wasm-pack test
 $ yarn install      # or npm install
 ```
 
-### 2. Build plugin
-
-To perform a basic, automated build of the plugin:
+### 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!
 
-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.
+- `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 './uxp.wasm';
+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:
@@ -67,4 +71,4 @@ Once added, you can load it into Photoshop by clicking the ••• button on t
 
 ## What this plugin does
 
-This plugin does some basic calculations in Rust and demonstrates a potential build process for leveraging Rust and WebAssembly in your UXP plugins.
+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.
diff --git a/wasm-rust-sample/js/index.css b/wasm-rust-sample/js/index.css
diff --git a/wasm-rust-sample/js/index.js b/wasm-rust-sample/js/index.js
@@ -1,14 +1,17 @@
 import { entrypoints } from 'uxp';
 import { decodeWebAssembly } from './utils';
 
-import encodedRust from './uxp.wasm';
-import init, { run, add, multiply } from '../pkg/uxp_wasm.js';
+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,
+    },
   },
 });
 
@@ -17,8 +20,15 @@ const main = async () => {
 
   // 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)}`);
+
+  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) => {
diff --git a/wasm-rust-sample/package.json b/wasm-rust-sample/package.json
@@ -5,7 +5,8 @@
   "private": true,
   "scripts": {
     "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",
+    "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": {
@@ -18,6 +19,7 @@
     "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",
diff --git a/wasm-rust-sample/plugin/ferris.png b/wasm-rust-sample/plugin/ferris.png
diff --git a/wasm-rust-sample/plugin/icons/plugin@1x.png b/wasm-rust-sample/plugin/icons/plugin@1x.png
diff --git a/wasm-rust-sample/plugin/icons/plugin@2x.png b/wasm-rust-sample/plugin/icons/plugin@2x.png
diff --git a/wasm-rust-sample/plugin/index.css b/wasm-rust-sample/plugin/index.css
@@ -0,0 +1,47 @@
+html,
+body {
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  background-color: var(--uxp-host-background-color);
+  color: var(--uxp-host-text-color);
+}
+
+img {
+  margin: 8px;
+}
+
+sp-heading {
+  margin: 1px 2px;
+}
+
+sp-body {
+  margin: 8px 0px;
+  font-weight: italic;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  padding: 0.5em;
+  margin: 0 auto;
+}
+
+.sec {
+  text-align: center;
+  margin: 4px 8px;
+}
+
+#timer {
+  padding: 2px;
+}
+
+#disclaimer {
+  margin: 2px 2px;
+  padding: 14px;
+  border-radius: 3px;
+  background-color: var(--uxp-host-widget-hover-background-color);
+}
diff --git a/wasm-rust-sample/plugin/index.html b/wasm-rust-sample/plugin/index.html
@@ -4,21 +4,22 @@
     <meta charset="utf-8" />
     <link rel="stylesheet" href="index.css" />
     <script src="index.js"></script>
-    <style>
-      .container {
-        overflow: auto;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .sec {
-        margin: 4px 8px;
-      }
-    </style>
   </head>
   <body>
     <div class="container">
-        <sp-heading>WebAssembly Example (Rust)<sp-heading>
+      <div class="sec">
+        <img src="ferris.png" alt="ferris" />
+      </div>
+      <div class="sec">
+        <sp-heading size="S">Rust/WebAssembly Example</sp-heading>
+      </div>
+      <div class="sec">
+        <sp-heading size="XXS">Plugin has been open for <span id="timer">0</span> seconds</sp-heading>
+        <sp-body size="XS">Open the 'Debug' menu to view the Rust and JavaScript logs</sp-body>
+      </div>
+      <div class="sec">
+        <sp-detail id="disclaimer">Visit the <a href="https://rustwasm.github.io/docs/wasm-bindgen/">wasm-bindgen</a> documentation for more information on leveraging Rust and WebAssembly in JavaScript projects</sp-detail>
+      </div>
     </div>
   </body>
 </html>
diff --git a/wasm-rust-sample/plugin/manifest.json b/wasm-rust-sample/plugin/manifest.json
@@ -18,20 +18,20 @@
         "default": "WebAssembly Example (Rust)"
       },
       "minimumSize": {
-        "width": 230,
-        "height": 200
+        "width": 260,
+        "height": 300
       },
       "maximumSize": {
         "width": 2000,
         "height": 2000
       },
       "preferredDockedSize": {
-        "width": 230,
-        "height": 300
+        "width": 260,
+        "height": 350
       },
       "preferredFloatingSize": {
-        "width": 230,
-        "height": 300
+        "width": 260,
+        "height": 350
       },
       "icons": [
         {
diff --git a/wasm-rust-sample/src/counter/mod.rs b/wasm-rust-sample/src/counter/mod.rs
@@ -0,0 +1,3 @@
+/// Controls the state and functionality for the plugin's counter component
+
+mod state;
diff --git a/wasm-rust-sample/src/counter/state.rs b/wasm-rust-sample/src/counter/state.rs
@@ -0,0 +1,24 @@
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+pub struct Counter {
+    count: i32
+}
+
+#[wasm_bindgen]
+impl Counter {
+    pub fn new() -> Self {
+        Self {
+            count: 0
+        }
+    }
+
+    pub fn increment(&mut self) -> i32 {
+        self.count = self.count + 1;
+        self.count
+    }
+
+    pub fn get_count(&self) -> i32 {
+        self.count
+    }
+}
diff --git a/wasm-rust-sample/src/lib.rs b/wasm-rust-sample/src/lib.rs
@@ -1,23 +1,15 @@
+/// Use 'wasm_bindgen' to target Rust functions to JS
 use wasm_bindgen::prelude::*;
+use utils::js::log;
 
-/// Testing WASM functionality
-#[wasm_bindgen]
-pub fn add(a: u32, b: u32) -> u32 {
-    a + b
-}
-
-#[wasm_bindgen]
-pub fn multiply(a: u32, b: u32) -> u32 {
-    a * b
-}
+#[macro_use] pub mod utils;
+pub mod counter;
 
 /// WASM entrypoint, executed on render
 #[wasm_bindgen(start)]
-pub fn run() {
-    console_logs();
-}
+pub fn run() -> Result<(), JsValue> {
+    console_log!("Log 1: Sent from Rust! (2 + 2 = {:?})", utils::math::add(2, 2));
+    console_log!("Log 2: Sent from Rust! (12 * 12 = {:?})", utils::math::multiply(12, 12));
 
-fn console_logs() {
-    use web_sys::console;
-    console::log_1(&"Hello from Rust!".into());
+    Ok(())
 }
diff --git a/wasm-rust-sample/src/utils/js.rs b/wasm-rust-sample/src/utils/js.rs
@@ -0,0 +1,13 @@
+use wasm_bindgen::prelude::*;
+
+/// Define a macro to mimic the functionality of JS console.log()
+macro_rules! console_log {
+    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
+}
+
+/// Use 'extern' to import JS functions
+#[wasm_bindgen]
+extern "C" {
+    #[wasm_bindgen(js_namespace = console)]
+    pub fn log(s: &str);
+}
diff --git a/wasm-rust-sample/src/utils/math.rs b/wasm-rust-sample/src/utils/math.rs
@@ -0,0 +1,12 @@
+use wasm_bindgen::prelude::*;
+
+/// Testing WASM functionality
+#[wasm_bindgen]
+pub fn add(a: u32, b: u32) -> u32 {
+    a + b
+}
+
+#[wasm_bindgen]
+pub fn multiply(a: u32, b: u32) -> u32 {
+    a * b
+}
diff --git a/wasm-rust-sample/src/utils/mod.rs b/wasm-rust-sample/src/utils/mod.rs
@@ -0,0 +1,5 @@
+/// Utility modules (basic math functions and JS API macros)
+
+#[macro_use]
+pub mod js;
+pub mod math;
diff --git a/wasm-rust-sample/tests/core.rs b/wasm-rust-sample/tests/core.rs
@@ -1,13 +1,11 @@
 use wasm_bindgen_test::wasm_bindgen_test;
 
-#[wasm_bindgen_test]
-fn browser_api_test() {
+#[test]
+fn rust() {
     assert_eq!(1, 1);
-    assert_ne!(2, 1);
 }
 
-#[test]
-fn rust_api_test() {
+#[wasm_bindgen_test]
+fn browser() {
     assert_eq!(1, 1);
-    assert_ne!(2, 1);
-}
+}
diff --git a/wasm-rust-sample/webpack.config.js b/wasm-rust-sample/webpack.config.js
@@ -54,7 +54,7 @@ module.exports = {
 
     new WebpackShellPluginNext({
       onBuildStart: {
-        scripts: ['yarn inlinewasm'],
+        scripts: ['npm run inlinewasm'],
         blocking: true,
         parallel: false,
       },
diff --git a/wasm-rust-sample/yarn.lock b/wasm-rust-sample/yarn.lock
