feat: add report script

Author: filipesilva

README.md

@@ -105,6 +105,11 @@ You can use it to design, test, and think about parts of your app in isolation.
 
 This environment uses [Devcards](https://github.com/bhauman/devcards) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro).
 
+### `npm run build` or `yarn build`
+
+Builds the app for production to the `public` folder.<br>
+It correctly bundles all code and optimizes the build for the best performance.
+
 ### `npm test` or `yarn test`, and `npm run e2e` or `yarn e2e`
 
 `test` launches the test runner in the interactive watch mode.<br>
@@ -118,10 +123,10 @@ See the ClojureScript [testing page](https://clojurescript.org/tools/testing) fo
 
 `format` will format your code in a consistent manner using [zprint-clj](https://github.com/clj-commons/zprint-clj).
 
-### `npm run build` or `yarn build`
+### `npm run report` or `yarn report`
 
-Builds the app for production to the `public` folder.<br>
-It correctly bundles all code and optimizes the build for the best performance.
+Make a report of what files contribute to your app size.<br>
+Consider [code-splitting](https://code.thheller.com/blog/shadow-cljs/2019/03/03/code-splitting-clojurescript.html) or using smaller libraries to make your app load faster.
 
 ### `npm run server` or `yarn server`
 

src/create_cljs_app/template.cljs

@@ -26,6 +26,7 @@ Will likely need to be replaced with a proper templating library."
                 {:from "__TEST__" :to (:test:once commands)}
                 {:from "__E2E__" :to (:e2e commands)}
                 {:from "__LINT__" :to (:lint commands)}
+                {:from "__REPORT__" :to (:report commands)}
                 {:from "__FORMAT__" :to (:format commands)}
                 {:from "__BUILD__" :to (:build commands)}]})
 

src/create_cljs_app/utils.cljs

@@ -20,6 +20,7 @@
      :test:watch "yarn test:watch"
      :e2e "yarn e2e"
      :lint "yarn lint"
+     :report "yarn report"
      :format "yarn format"}
     {:start "npm start"
      :cards "npm run cards"
@@ -29,6 +30,7 @@
      :test:watch "npm run test:watch"
      :e2e "npm run e2e"
      :lint "npm run lint"
+     :report "npm run report"
      :format "npm run format"}))
 
 (defn has-binary-on-PATH? [name] (boolean (which name)))

src/e2e/core.cljs

@@ -46,6 +46,7 @@
         (is (not (fileIncludes "./README.md" "__E2E__")))
         (is (not (fileIncludes "./README.md" "__BUILD__")))
         (is (not (fileIncludes "./README.md" "__LINT__")))
+        (is (not (fileIncludes "./README.md" "__REPORT__")))
         (is (not (fileIncludes "./README.md" "__FORMAT__"))))
       (testing "Commands"
         (is (= (.-code (silent-exec "yarn sc start")) 0) "Should start background server")
@@ -54,5 +55,6 @@
         (is (existsSync "./public/js/main.js"))
         "Should output public/js/main.js")
       (is (= (.-code (silent-exec "yarn e2e")) 0) "Should e2e")
+      (is (= (.-code (silent-exec "yarn report")) 0) "Should report")
       (is (= (.-code (silent-exec "yarn lint")) 0) "Should lint")
       (is (= (.-code (silent-exec "yarn format")) 0) "Should format"))))

template/.gitignore

@@ -5,3 +5,4 @@ out
 .nrepl-port
 .clj-kondo
 yarn-error.log
+report.html

template/README.md

@@ -23,6 +23,15 @@ You can use it to design, test, and think about parts of your app in isolation.
 
 This environment uses [Devcards](https://github.com/bhauman/devcards) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro).
 
+### `__BUILD__`
+
+Builds the app for production to the `public` folder.<br>
+It correctly bundles all code and optimizes the build for the best performance.
+
+Your app is ready to be deployed!
+
+## Other useful scripts
+
 ### `__TEST__` and `__E2E__`
 
 You can use `__TEST__` to run tests a single time, and `__E2E__` to run the end-to-end test app.
@@ -36,12 +45,10 @@ See the ClojureScript [testing page](https://clojurescript.org/tools/testing) fo
 
 `__FORMAT__` will format your code in a consistent manner using [zprint-clj](https://github.com/clj-commons/zprint-clj).
 
-### `__BUILD__`
-
-Builds the app for production to the `public` folder.<br>
-It correctly bundles all code and optimizes the build for the best performance.
+### `__REPORT__`
 
-Your app is ready to be deployed!
+Make a report of what files contribute to your app size.<br>
+Consider [code-splitting](https://code.thheller.com/blog/shadow-cljs/2019/03/03/code-splitting-clojurescript.html) or using smaller libraries to make your app load faster.
 
 ### `__SERVER__`
 

template/package.json

@@ -11,6 +11,7 @@
     "test": "shadow-cljs compile test && node out/test.js",
     "test:watch": "shadow-cljs watch test --config-merge \"{:autorun true}\"",
     "e2e": "shadow-cljs compile e2e && node out/e2e.js",
+    "report": "shadow-cljs run shadow.cljs.build-report app report.html",
     "lint": "clj-kondo --lint src",
     "format": "zprint-clj --hang -i \"./src/**/*.{clj,cljs,cljc,edn}\" -o ./ && zprint-clj -i \"./*.edn\" -o ./",
     "clean": "rimraf public/js"