wip: webpack integration

deps.edn

@@ -24,7 +24,7 @@
   hiccups/hiccups                       {:mvn/version "0.3.0"}
   tongue/tongue                         {:mvn/version "0.4.4"}
   org.clojure/core.async                {:mvn/version "1.6.673"}
-  thheller/shadow-cljs                  {:mvn/version "2.19.0"}
+  thheller/shadow-cljs                  {:mvn/version "2.28.21"}
   expound/expound                       {:mvn/version "0.8.6"}
   com.lambdaisland/glogi                {:mvn/version "1.1.144"}
   binaryage/devtools                    {:mvn/version "1.0.5"}

package.json

@@ -31,14 +31,17 @@
         "postcss-import": "15.0.0",
         "postcss-import-ext-glob": "2.0.1",
         "postcss-nested": "6.0.0",
+        "process": "^0.11.10",
         "purgecss": "4.0.2",
         "semver": "7.5.2",
-        "shadow-cljs": "2.26.0",
+        "shadow-cljs": "2.28.21",
         "stylelint": "^13.8.0",
         "stylelint-config-standard": "^20.0.0",
         "tailwindcss": "3.3.5",
         "tailwindcss-animate": "^1.0.7",
-        "typescript": "^4.4.3"
+        "typescript": "^4.4.3",
+        "webpack": "^5.98.0",
+        "webpack-cli": "^6.0.1"
     },
     "scripts": {
         "watch": "run-p gulp:watch cljs:watch",
@@ -50,6 +53,7 @@
         "dev-electron-app": "gulp electron",
         "release-electron": "run-s gulp:build && gulp electronMaker",
         "debug-electron": "cd static/ && yarn electron:debug",
+        "webpack": "webpack --watch",
         "e2e-test": "cross-env DEBUG=pw:api CI=true npx playwright test --reporter github",
         "run-android-release": "yarn clean && yarn release-app && rm -rf ./public/static && rm -rf ./static/js/*.map && mv static ./public && npx cap sync android && npx cap run android",
         "run-ios-release": "yarn clean && yarn release-app && rm -rf ./public/static && rm -rf ./static/js/*.map && mv static ./public && npx cap sync ios && npx cap run ios",
@@ -173,6 +177,7 @@
         "tailwind-capitalize-first-letter": "^1.0.4",
         "threads": "1.6.5",
         "url": "^0.11.0",
+        "util": "^0.12.5",
         "yargs-parser": "20.2.4"
     },
     "resolutions": {

public/index.html

@@ -55,6 +55,7 @@
 <script defer src="/static/js/lsplugin.core.js"></script>
 <script defer src="/static/js/react.production.min.js"></script>
 <script defer src="/static/js/react-dom.production.min.js"></script>
+<script defer src="/static/js/libs/bundle.js"></script>
 <script defer src="/static/js/ui.js"></script>
 <script defer src="/static/js/shared.js"></script>
 <script defer src="/static/js/main.js"></script>

resources/index.html

@@ -54,6 +54,7 @@ const portal = new MagicPortal(worker);
 <script defer src="./js/lsplugin.core.js"></script>
 <script defer src="./js/react.production.min.js"></script>
 <script defer src="./js/react-dom.production.min.js"></script>
+<script defer src="./js/libs/bundle.js"></script>
 <script defer src="./js/ui.js"></script>
 <script defer src="./js/shared.js"></script>
 <script defer src="./js/main.js"></script>

shadow-cljs.edn

@@ -11,7 +11,9 @@
  :builds
  {:app {:target        :browser
         :module-loader true
-        :js-options    {:ignore-asset-requires true
+        :js-options    {:js-provider    :external
+                        :external-index "target/index.js"
+                        :ignore-asset-requires true
                         :resolve {"react" {:target :global
                                            :global "React"}
                                   "react-dom" {:target :global

src/main/frontend/inference_worker/inference_worker.cljs

@@ -1,10 +1,8 @@
 (ns frontend.inference-worker.inference-worker
   "Worker used for text embedding and vector-db"
-  (:require
-            [lambdaisland.glogi.console :as glogi-console]
-            [lambdaisland.glogi :as log]))
-
-
+  (:require ["@huggingface/transformers" :refer [AutoTokenizer]]
+            [lambdaisland.glogi :as log]
+            [lambdaisland.glogi.console :as glogi-console]))
 
 (defn init
   []

webpack.config.js

@@ -0,0 +1,29 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  mode: "development",
+  entry: './target/index.js',
+  output: {
+    path: path.resolve(__dirname, 'static/js/libs'),
+    filename: 'bundle.js',
+    clean: true,
+  },
+  module: {
+    rules: [
+      {
+        // docs: https://webpack.js.org/configuration/module/#resolvefullyspecified
+        test: /\.m?js/,
+        resolve: {
+          fullySpecified: false,
+        }
+      }
+    ]
+  },
+  plugins: [
+    // fix "process is not defined" error:
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+  ],
+};