Merge pull request #5069 from penpot/niwinz-storybook-build-fix

🐛 Fix storybook build related to commonjs to esm module conversion issue

frontend/package.json

@@ -96,6 +96,7 @@
     "highlight.js": "^11.9.0",
     "js-beautify": "^1.15.1",
     "jszip": "^3.10.1",
+    "lodash": "^4.17.21",
     "luxon": "^3.4.4",
     "mousetrap": "^1.6.5",
     "opentype.js": "^1.3.4",

frontend/src/app/util/functions.cljs

@@ -0,0 +1,29 @@
+;; 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.functions
+  "A functions helpers"
+  (:require
+   ["lodash/debounce.js" :as lodash-debounce]))
+
+;; NOTE: this is needed because depending on the type of the build and
+;; target execution evironment (browser, esm), the real export can be
+;; different. All this issue is about the commonjs and esm
+;; interop/conversion, because the js ecosystem decided that is should
+;; work this way.
+;;
+;; In this concrete case, lodash exposes commonjs module which works
+;; ok on browser build but for ESM build it is converted in the best
+;; effort to esm module, exporting the module.exports as the default
+;; property. This is why on ESM builds we need to look on .-default
+;; property.
+(def ^:private ext-debounce
+  (or (.-default lodash-debounce)
+      lodash-debounce))
+
+(defn debounce
+  [f timeout]
+  (ext-debounce f timeout #{:leading false :trailing true}))

frontend/src/app/util/storage.cljs

@@ -6,9 +6,9 @@
 
 (ns app.util.storage
   (:require
-   ["lodash/debounce" :as ldebounce]
    [app.common.exceptions :as ex]
    [app.common.transit :as t]
+   [app.util.functions :as fns]
    [app.util.globals :as g]
    [cuerdas.core :as str]))
 
@@ -76,8 +76,7 @@
         (set! latest-state curr-state)))))
 
 (defonce on-change
-  (ldebounce on-change* 2000 #js {:leading false :trailing true}))
-
+  (fns/debounce on-change* 2000))
 
 (defonce storage (atom latest-state))
 (add-watch storage :persistence

frontend/yarn.lock

@@ -6647,6 +6647,7 @@ __metadata:
     js-beautify: "npm:^1.15.1"
     jsdom: "npm:^24.1.0"
     jszip: "npm:^3.10.1"
+    lodash: "npm:^4.17.21"
     luxon: "npm:^3.4.4"
     map-stream: "npm:0.0.7"
     marked: "npm:^12.0.2"