✨ Use dynamic import for wasm module

frontend/package.json

@@ -21,7 +21,7 @@
     "build:storybook": "yarn run build:storybook:assets && yarn run build:storybook:cljs && storybook build",
     "build:storybook:assets": "node ./scripts/build-storybook-assets.js",
     "build:storybook:cljs": "clojure -M:dev:shadow-cljs release storybook",
-    "build:renderer": "./scripts/build-renderer.sh",
+    "build:renderer": "yarn run wasm-pack build ./renderer --target web --out-dir ../resources/public/js/renderer --release",
     "e2e:server": "node ./scripts/e2e-server.js",
     "e2e:test": "playwright test --project default",
     "fmt:clj": "cljfmt fix --parallel=true src/ test/",

frontend/resources/polyfills/dynamicImport.js

@@ -0,0 +1,5 @@
+if (!('dynamicImport' in window)) {
+  window.dynamicImport = function(uri) {
+    return import(uri);
+  }
+};

frontend/scripts/build

@@ -20,7 +20,6 @@ yarn install || exit 1;
 rm -rf resources/public;
 rm -rf target/dist;
 
-yarn run build:renderer
 clojure -M:dev:shadow-cljs release main --config-merge "{:release-version \"${CURRENT_HASH}-${TS}\"}" $EXTRA_PARAMS || exit 1
 
 yarn run build:app:assets || exit 1;

frontend/scripts/build-renderer.sh

@@ -1,11 +0,0 @@
-#!/usr/bin/env bash
-# NOTE: this script should be called from the parent directory to
-# properly work
-
-yarn run wasm-pack build ./renderer --target web --out-dir ../src/app/util/renderer/ --release
-mkdir -p ./resources/public/js/renderer
-mv ./src/app/util/renderer/renderer_bg.wasm ./resources/public/js/renderer/
-echo "Patching renderer.js…"
-sed -i 's/renderer_bg\.wasm/\/js\/renderer\/renderer_bg\.wasm/g' ./src/app/util/renderer/renderer.js
-sed -i 's/, import\.meta\.url/, new URL(document\.baseURI)\.origin/g' ./src/app/util/renderer/renderer.js
-echo "Done."

frontend/shadow-cljs.edn

@@ -67,11 +67,6 @@
     :output-wrapper false
     :warnings {:fn-deprecated false}}
 
-   :js-options
-   {:entry-keys ["module" "browser" "main"]
-    :resolve {"renderer" {:target :file
-                          :file "resources/public/js/renderer/renderer.js"}}}
-
    :release
    {:closure-defines {goog.DEBUG false
                       goog.debug.LOGGING_ENABLED true}

frontend/src/app/main/data/workspace.cljs

@@ -74,6 +74,7 @@
    [app.main.repo :as rp]
    [app.main.streams :as ms]
    [app.main.worker :as uw]
+   [app.renderer-v2 :as renderer]
    [app.util.dom :as dom]
    [app.util.globals :as ug]
    [app.util.http :as http]
@@ -81,7 +82,6 @@
    [app.util.router :as rt]
    [app.util.storage :refer [storage]]
    [app.util.timers :as tm]
-   [app.util.wasm :as wasm]
    [app.util.webapi :as wapi]
    [beicon.v2.core :as rx]
    [cljs.spec.alpha :as s]
@@ -350,10 +350,12 @@
         (rx/merge
          (rx/of (ntf/hide)
                 (features/initialize)
-                (when (contains? cf/flags :renderer-v2) (wasm/init))
                 (dcm/retrieve-comment-threads file-id)
                 (fetch-bundle project-id file-id))
 
+         (when (contains? cf/flags :renderer-v2)
+           (rx/of (renderer/init)))
+
          (->> stream
               (rx/filter dch/commit?)
               (rx/map deref)

frontend/src/app/main/ui/workspace.cljs

@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
+   [app.config :as cf]
    [app.main.data.modal :as modal]
    [app.main.data.notifications :as ntf]
    [app.main.data.persistence :as dps]
@@ -31,6 +32,7 @@
    [app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button]]
    [app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
    [app.main.ui.workspace.viewport :refer [viewport]]
+   [app.renderer-v2 :as renderer]
    [app.util.debug :as dbg]
    [app.util.dom :as dom]
    [app.util.globals :as globals]
@@ -198,6 +200,10 @@
                   (ntf/hide)
                   (dw/finalize-file project-id file-id))))
 
+    (mf/with-effect [file-ready?]
+      (when (and file-ready? (contains? cf/flags :renderer-v2))
+        (renderer/print-msg "hello from wasm fn!")))
+
     [:& (mf/provider ctx/current-file-id) {:value file-id}
      [:& (mf/provider ctx/current-project-id) {:value project-id}
       [:& (mf/provider ctx/current-team-id) {:value team-id}
@@ -208,7 +214,6 @@
                      :style {:background-color background-color
                              :touch-action "none"}}
            [:& context-menu]
-
            (if ^boolean file-ready?
              [:& workspace-page {:page-id page-id
                                  :file file

frontend/src/app/renderer_v2.cljs

@@ -0,0 +1,38 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.renderer-v2
+  (:require
+   [app.config :as cf]
+   [beicon.v2.core :as rx]
+   [potok.v2.core :as ptk]))
+
+(defonce internal-module #js {})
+
+(defn on-module-loaded
+  [module']
+  (let [init-fn (.-default ^js module')]
+    (->> (rx/from (init-fn))
+         (rx/map (constantly module')))))
+
+(defn- on-module-initialized
+  [module]
+  (set! internal-module module))
+
+(defn print-msg [msg]
+  (let [print-fn (.-print internal-module)]
+    (print-fn msg)))
+
+(defn init
+  []
+  (ptk/reify ::init
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (let [module-uri (assoc cf/public-uri :path "/js/renderer/renderer.js")]
+        (->> (rx/from (js/dynamicImport (str module-uri)))
+             (rx/mapcat on-module-loaded)
+             (rx/tap on-module-initialized)
+             (rx/ignore))))))

frontend/src/app/util/wasm.cljs

@@ -1,23 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) KALEIDOS INC
-
-(ns app.util.wasm
-  (:require
-   ["./renderer/renderer" :as renderer]
-   ["./renderer/renderer.js$default" :as renderer-init]
-   [beicon.v2.core :as rx]
-   [potok.v2.core :as ptk]))
-
-(defn foo [] (renderer/print "Lorem ipsum"))
-
-(defn init
-  []
-  (ptk/reify ::init
-    ptk/WatchEvent
-    (watch [_ _ _] ;; TODO: mirar la docu de potok
-      (->> (rx/from (renderer-init))
-           (rx/tap foo)
-           (rx/ignore)))))