Revert "Revert "Merge pull request #2344 from filipesilva/react-18""

babel.config.js

@@ -59,13 +59,8 @@ module.exports = {
         preventFullImport: true
       }
     }],
-    // Our build doesn't need the {loose: true} option, but if not included it wil
-    // show a lot of warnings on the storybook build.
-    ["@babel/proposal-class-properties", {loose: true}],
-    ["@babel/proposal-object-rest-spread", {loose: true}],
-    // Used only by storybook, but must be included to avoid build warnings/errors.
-    ["@babel/plugin-proposal-private-methods", {loose: true}],
-    ["@babel/plugin-proposal-private-property-in-object", {loose: true}],
+    ["@babel/proposal-class-properties"],
+    ["@babel/proposal-object-rest-spread"],
     // Import helpers from @babel/runtime instead of duplicating them everywhere.
     "@babel/plugin-transform-runtime",
     // Better debug information for styled components.
@@ -75,6 +70,5 @@ module.exports = {
   // Do not apply this babel config to node_modules.
   // Shadow-CLJS also runs babel over node_modules and we don't want this
   // configuration to apply to it. 
-  // We still want it to be picked up by storybook though.
   exclude: ["node_modules"]
 }

deps.edn

@@ -20,7 +20,7 @@
   cljc.java-time/cljc.java-time         #:mvn{:version "0.1.9"}
   com.rpl/specter                       #:mvn{:version "1.1.3"}
   com.taoensso/sente                    #:mvn{:version "1.16.2"}
-  binaryage/devtools                    #:mvn{:version "1.0.3"}
+  binaryage/devtools                    #:mvn{:version "1.0.6"}
   day8.re-frame/re-frame-10x            #:mvn{:version "1.5.0"}
   day8.re-frame/tracing                 #:mvn{:version "0.6.2"}
   org.flatland/ordered                  #:mvn{:version "1.15.10"}

fix-node-modules-class-fields.js

@@ -0,0 +1,37 @@
+// This script removes class field usage by transpiling via Babel.
+
+// The Google Closure Compiled, used by Clojure, does not support class fields:
+// https://github.com/google/closure-compiler/issues/2731
+// The errors when using shadow-cljs look like this:
+// --- node_modules/@chakra-ui/descendant/dist/index.cjs.js:122
+// ES6 transpilation of 'Public class fields' is not yet implemented.
+
+const { exec } = require("child_process");
+
+function execAndPrint(cmd){
+  exec(cmd, (error, stdout, stderr) => {
+    if (error) {
+      console.log(`error: ${error.message}`);
+      return;
+    }
+    if (stderr) {
+      console.log(`stderr: ${stderr}`);
+      return;
+    }
+    console.log(`stdout: ${stdout}`);
+  });
+}
+
+function compileInPlace(filename) {
+  execAndPrint(`yarn babel --plugins @babel/plugin-proposal-class-properties --out-file ${filename} ${filename}`);
+}
+
+// Add any new files here.
+var files = [
+  "./node_modules/@chakra-ui/utils/dist/index.cjs.js",
+  "./node_modules/@chakra-ui/react-use-pan-event/dist/index.cjs.js",
+  "./node_modules/@chakra-ui/modal/dist/index.cjs.js",
+  "./node_modules/@chakra-ui/descendant/dist/index.cjs.js",
+];
+
+files.map(compileInPlace);

package.json

@@ -9,6 +9,7 @@
   },
   "scripts": {
     "// repo scripts": "",
+    "postinstall": "node fix-node-modules-class-fields.js",
     "update:dry": "standard-version --dry-run -p --releaseCommitMessageFormat v{{currentTag}}",
     "update": "standard-version -p --releaseCommitMessageFormat v{{currentTag}}",
     "clean": "rimraf resources/public/**/*.js resources/public/**/*.js.map target .shadow-cljs src/gen",
@@ -21,7 +22,7 @@
     "notebooks": "clojure -M:notebooks",
     "notebooks:static": "clojure -X:notebooks-static",
     "vercel:install": "./script/vercel-setup.sh && yarn && clojure -P",
-    "vercel:build": "yarn notebooks:static && yarn storybook:static && yarn client:web:static",
+    "vercel:build": "yarn notebooks:static && yarn client:web:static",
     "// client scripts": "",
     "dev": "yarn components && concurrently \"yarn components:watch\" \"yarn client:watch\"",
     "client:watch": "shadow-cljs watch main renderer app",
@@ -33,8 +34,6 @@
     "components:watch": "yarn components --watch",
     "prod": "yarn components && shadow-cljs release main renderer app",
     "dist": "electron-builder -p always",
-    "storybook": "start-storybook -p 6006",
-    "storybook:static": "build-storybook --output-dir vercel-static/storybook --quiet",
     "// client e2e scripts": "",
     "//   add --config=playwright.electron.config.ts to any e2e script to use electron instead of web build": "",
     "client:e2e": "xvfb-maybe playwright test",
@@ -101,12 +100,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.15.4",
-    "@chakra-ui/react": "^1.8.6",
+    "@chakra-ui/react": "^2.2.9",
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.1",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
-    "@geometricpanda/storybook-addon-badges": "^0.0.4",
     "@js-joda/core": "1.12.0",
     "@js-joda/locale_en-us": "3.1.1",
     "@js-joda/timezone": "2.2.0",
@@ -125,11 +123,11 @@
     "luxon": "^2.0.2",
     "nedb": "^1.8.0",
     "polished": "^4.1.3",
-    "react": "17.0.1",
+    "react": "18.2.0",
     "react-codemirror2": "^7.2.1",
     "react-colorful": "^5.4.0",
     "react-day-picker": "^7.4.10",
-    "react-dom": "17.0.1",
+    "react-dom": "18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-force-graph-2d": "^1.19.0",
     "react-highlight.js": "1.0.7",
@@ -150,11 +148,6 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
     "@playwright/test": "^1.17.1",
-    "@storybook/addon-a11y": "^6.3.8",
-    "@storybook/addon-actions": "^6.3.8",
-    "@storybook/addon-essentials": "^6.3.8",
-    "@storybook/addon-links": "^6.3.8",
-    "@storybook/react": "^6.3.8",
     "babel-loader": "^8.2.2",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-styled-components": "^1.13.2",
@@ -174,8 +167,6 @@
     "shadow-cljs": "2.19.5",
     "source-map-support": "^0.5.19",
     "standard-version": "^9.3.1",
-    "storybook-dark-mode": "^1.0.8",
-    "tsconfig-paths-webpack-plugin": "^3.5.1",
     "typescript": "^4.3.5",
     "vercel": "^24.2.3",
     "xvfb-maybe": "^0.2.1"

shadow-cljs.edn

@@ -17,15 +17,16 @@
                 :compiler-options {:closure-warnings   {:global-this :off}
                                    :infer-externs      :auto
                                    :closure-defines    {re-frame.trace.trace-enabled? true}
-                                   :output-feature-set :es-next}
+                                   :output-feature-set :es-next
+                                   :external-config {:devtools/config {:features-to-install [:formatters :hints]}}}
                 :dev              {:compiler-options {:closure-defines {re-frame.trace.trace-enabled?        true
                                                                         day8.re-frame.tracing.trace-enabled? true}
                                                       ;; Hide redef warnings, we started having around 5 that show up
                                                       ;; on every rebuild due to clojure 1.11 adding new fns.
                                                       :warnings {:redef false}}}
                 :release          {:build-options {:ns-aliases {day8.re-frame.tracing day8.re-frame.tracing-stubs}}}
                 :devtools         {:preloads  [devtools.preload
-                                               day8.re-frame-10x.preload]
+                                               #_day8.re-frame-10x.preload]
                                    :http-root "resources/public"
                                    :http-port 3000}}
 
@@ -39,6 +40,7 @@
                                         :infer-externs      :auto
                                         :closure-defines    {re-frame.trace.trace-enabled? true}
                                         :output-feature-set :es-next
+                                        :external-config {:devtools/config {:features-to-install [:formatters :hints]}}
                                         ;; see https://shadow-cljs.github.io/docs/UsersGuide.html#_conditional_reading
                                         :reader-features  #{:electron}}
                      :dev              {:compiler-options {:closure-defines {re-frame.trace.trace-enabled?        true

src/cljs/athens/core.cljs

@@ -3,6 +3,7 @@
     ["@sentry/integrations" :as integrations]
     ["@sentry/react" :as Sentry]
     ["@sentry/tracing" :as tracing]
+    ["react-dom/client" :refer [createRoot]]
     [athens.coeffects]
     [athens.common.logging :as log]
     [athens.components]
@@ -22,7 +23,7 @@
     [datalog-console.integrations.datascript :as datalog-console]
     [goog.dom :refer [getElement]]
     [re-frame.core :as rf]
-    [reagent.dom :as r-dom]))
+    [reagent.core :as r]))
 
 
 (goog-define SENTRY_DSN "")
@@ -34,13 +35,16 @@
     (log/info "dev mode")))
 
 
+(defonce react-root (createRoot (getElement "app")))
+
+
 (defn ^:dev/after-load mount-root
   [first-boot?]
   (rf/clear-subscription-cache!)
   (when-not first-boot?
     (router/init-routes!))
-  (r-dom/render [views/main]
-                (getElement "app")))
+  ;; See https://github.com/reagent-project/reagent/issues/579 as to why we render a anonymous fn.
+  (.render react-root (r/as-element [(fn [] views/main)])))
 
 
 (defn sentry-on?

src/cljs/athens/db.cljs

@@ -271,22 +271,23 @@
 (defntrace shape-parent-query
   "Normalize path from deeply nested block to root node."
   [pull-results]
-  (->> (loop [b   pull-results
-              res []]
-         (cond
-           ;; There's no page in these pull results, log and exit.
-           (nil? b)        (do
-                             (log/warn "No parent found in" (pr-str pull-results))
-                             [])
-           ;; Found the page.
-           (:node/title b) (conj res b)
-           ;; Recur with the parent.
-           :else           (recur (or (first (:block/_children b))
-                                      (:block/property-of b))
-                                  (conj res (dissoc b :block/_children :block/property-of)))))
-       (rest)
-       (reverse)
-       vec))
+  (when (:db/id pull-results)
+    (->> (loop [b   pull-results
+                res []]
+           (cond
+             ;; There's no page in these pull results, log and exit.
+             (nil? b)        (do
+                               (log/warn "No parent found in" (pr-str pull-results))
+                               [])
+             ;; Found the page.
+             (:node/title b) (conj res b)
+             ;; Recur with the parent.
+             :else           (recur (or (first (:block/_children b))
+                                        (:block/property-of b))
+                                    (conj res (dissoc b :block/_children :block/property-of)))))
+         (rest)
+         (reverse)
+         vec)))
 
 
 (defntrace get-parents-recursively

src/cljs/athens/util.cljs

@@ -264,21 +264,21 @@
   []
   (when config/debug?
     (let [el-10x (getElement "--re-frame-10x--")
-          display-10x (.. el-10x -style -display)]
+          display-10x (and el-10x (.. el-10x -style -display))]
       (not (= "none" display-10x)))))
 
 
 (defn open-10x
   []
   (when config/debug?
-    (let [el (js/document.querySelector "#--re-frame-10x--")]
+    (when-let [el (js/document.querySelector "#--re-frame-10x--")]
       (setProperties el (clj->js {"style" "display: block"})))))
 
 
 (defn hide-10x
   []
   (when config/debug?
-    (let [el (js/document.querySelector "#--re-frame-10x--")]
+    (when-let [el (js/document.querySelector "#--re-frame-10x--")]
       (setProperties el (clj->js {"style" "display: none"})))))