Fix Code Splitting example for ClojureScirpt 1.11+ (#334)

dawranliou · web-flow · commit 3b29421c9c63 · 2024-12-04T12:13:34.000-06:00
* Fix Code Splitting example - index.html Figwheel serves the static files from the `target/public/` folder so the `target` prefix in the `target/cljs-out/*.js` script src paths are incorrect. This commit fixes the script paths in the index.html host page so the browser doesn't show 404 responses for the compiled js files. * Fix Code Splitting example for ClojureScript 1.11+ The goog.dom/createDom function requires a second argument of `opt_attributes`. (See at https://google.github.io/closure-library/api/goog.dom.html.) In previous ClojureScript versions, the goog.dom/createDom function was able to handle the nonexistence of `opt_attributes` argument, miraculously. However, with ClojureScript 1.11.60, this is considered an error: dom.js:171 Uncaught TypeError: Cannot set property assignedSlot of #<Element> which has only a getter at dom.js:171:20 at Object.forEach (object.js:11:7) at goog.dom.setProperties (dom.js:156:15) at goog.dom.createDom_ (dom.js:264:16) at goog.dom.createDom (dom.js:252:19) at foo$core$listen_to_button (core.cljs:11:17) at core.cljs:23:16 This commit fixes the error above and is tested on both ClojureScript 1.11.60 and ClojureScript 1.10.773.
diff --git a/docs/docs/code_splitting.md b/docs/docs/code_splitting.md
@@ -81,6 +81,7 @@ Edit this file to look like the following:
   (let [app (gdom/getElement "app")
         button (gdom/createDom
                 "button"
+                nil
                 (gdom/createTextNode "Load Bar!"))]
     (gdom/removeChildren app)
     (gdom/append app button)
@@ -240,9 +241,9 @@ Now make a `resources/public/index.html` file:
   <body>
     <div id="app"></div>
     <!-- include the cljs_base.js target file -->
-    <script src="target/cljs-out/dev/cljs_base.js" type="text/javascript"></script>
+    <script src="/cljs-out/dev/cljs_base.js" type="text/javascript"></script>
     <!-- You will normally want to include at least one module otherwise nothing will happen -->		 
-    <script src="target/cljs-out/dev-foo.js" type="text/javascript"></script>
+    <script src="/cljs-out/dev-foo.js" type="text/javascript"></script>
   </body>
 </html>
 ```
