Update to react 18

Author: LeifAndersen

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.2.4
+
+* Update to react 18
+
 # 0.2.3
 
 * Add the ability to set the timeout for state variables

deps.edn

@@ -7,7 +7,7 @@
         org.clojure/tools.reader
         {:git/url "https://github.com/LeifAndersen/tools.reader"
          :sha "efdbaf23247e5f7fa189f7b8691411569e7fbf8c"}
-        reagent/reagent {:mvn/version "1.1.0"
+        reagent/reagent {:mvn/version "1.2.0"
                          :exclusions [cljsjs/react cljsjs/react-dom]}
         com.cognitect/transit-cljs {:mvn/version "0.8.264"}
         alandipert/storage-atom {:mvn/version "2.0.1"}

env/interactive_syntax/lib.cljs

@@ -2,8 +2,7 @@
   (:require [interactive-syntax.core :as core]
             [interactive-syntax.fs :as fs]
             [interactive-syntax.db :as db]
-            [interactive-syntax.utils :refer [cb-thread]]
-            [reagent.dom :as d]
+            [interactive-syntax.utils :as utils :refer [cb-thread]]
             [cognitect.transit :as t]))
 
 ;;ignore println statements in prod
@@ -16,7 +15,7 @@
      #(fs/import-from-zip %2 zip (fn [] (% %2)))
      (fn [_ db]
        (reset! (:backing db) backing)
-       (d/render [part db] frame)))))
+       (utils/render [part db] frame)))))
 
 (set! js/window.VISrHome (partial lib-render core/home-page))
 (set! js/window.VISrEditor (partial lib-render core/editor-view))

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "interactive-syntax",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/LeifAndersen/interactive-syntax-clojure.git"
@@ -12,8 +12,8 @@
   },
   "homepage": "https://visr.pl",
   "devDependencies": {
-    "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^13.1.9",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "css-loader": "^5.2.4",
     "file-loader": "^6.2.0",
     "git-http-mock-server": "^2.0.0",
@@ -50,17 +50,18 @@
     "isomorphic-git": "^1.10.0",
     "jszip": "^3.7.1",
     "popper.js": "^1.16.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-bootstrap": "^2.0.0-beta.4",
-    "react-codemirror2": "npm:@leifandersen/react-codemirror2@^7.2.1",
+    "react-codemirror2": "npm:@leifandersen/react-codemirror2@^7.2.1-2",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-hotkeys": "^2.0.0",
-    "react-resize-detector": "^6.7.6",
+    "react-resize-detector": "^9.1.0",
     "react-split-pane": "^2.0.3",
-    "react-switch": "^6.0.0",
-    "react-to-print": "^2.14.4",
+    "react-switch": "^7.0.0",
+    "react-testing-library": "^8.0.1",
+    "react-to-print": "^2.14.12",
     "stream-browserify": "^2.0.2",
     "styled-components": "^4.4.1",
     "systemjs": "^6.12.6",
@@ -70,5 +71,8 @@
   "scripts": {
     "postinstall": "patch-package",
     "fig": "clojure -M:fig"
+  },
+  "overrides": {
+    "react": "$react"
   }
 }

package.json

@@ -0,0 +1,32 @@
+diff --git a/node_modules/codemirror/mode/clojure/clojure.js b/node_modules/codemirror/mode/clojure/clojure.js
+index 3305165..786d2bc 100644
+--- a/node_modules/codemirror/mode/clojure/clojure.js
++++ b/node_modules/codemirror/mode/clojure/clojure.js
+@@ -50,7 +50,7 @@ CodeMirror.defineMode("clojure", function (options) {
+       "constantly", "construct-proxy", "contains?", "count", "counted?",
+       "create-ns", "create-struct", "cycle", "dec", "dec'", "decimal?",
+       "declare", "dedupe", "default-data-readers", "definline", "definterface",
+-      "defmacro", "defmethod", "defmulti", "defn", "defn-", "defonce",
++      "defmacro", "defmethod", "defmulti", "defn", "defn-", "defonce", "defvisr",
+       "defprotocol", "defrecord", "defstruct", "deftype", "delay", "delay?",
+       "deliver", "denominator", "deref", "derive", "descendants", "destructure",
+       "disj", "disj!", "dissoc", "dissoc!", "distinct", "distinct?", "doall",
+@@ -141,7 +141,7 @@ CodeMirror.defineMode("clojure", function (options) {
+       "->", "->>", "as->", "binding", "bound-fn", "case", "catch", "comment",
+       "cond", "cond->", "cond->>", "condp", "def", "definterface", "defmethod",
+       "defn", "defmacro", "defprotocol", "defrecord", "defstruct", "deftype",
+-      "do", "doseq", "dotimes", "doto", "extend", "extend-protocol",
++      "do", "doseq", "dotimes", "doto", "extend", "extend-protocol", "defvisr",
+       "extend-type", "fn", "for", "future", "if", "if-let", "if-not", "if-some",
+       "let", "letfn", "locking", "loop", "ns", "proxy", "reify", "struct-map",
+       "some->", "some->>", "try", "when", "when-first", "when-let", "when-not",
+@@ -281,7 +281,8 @@ CodeMirror.defineMode("clojure", function (options) {
+     },
+ 
+     closeBrackets: {pairs: "()[]{}\"\""},
+-    lineComment: ";;"
++    lineComment: ";;",
++    fold: "brace-paren"
+   };
+ });
+ 

patches/codemirror+5.63.3.patch

@@ -24,6 +24,9 @@ blockly-python:
 canvas2svg:
 {package: "canvas2svg" path: "canvas2svg.js"}
 
+d3:
+{package: "d3" path: "dist/d3.js"}
+
 file-type:
 {package: "file-type" path: "browser.js"}
 

patches/codemirror+5.65.12.patch

@@ -3,7 +3,6 @@
    [interactive-syntax.slurp :refer [slurp]])
   (:require
    [reagent.core :as r :refer [atom]]
-   [reagent.dom :as d]
    [clojure.string :as string]
    [cljs.pprint :refer [pprint]]
    [cljs.core.match :refer [match]]
@@ -1327,7 +1326,7 @@
                    (recur (+ line (-> i (.split #"\r\n|\r|\n") .-length)) rest),
                    (vector? i)
                    (let [element (.createElement js/document "div")]
-                     (d/render [env/styled-frame i] element)
+                     (utils/render [env/styled-frame i] element)
                      (swap! instances conj
                             (-> @edit (ocall "getDoc")
                                 (ocall "addLineWidget" (max 0 (dec line))
@@ -1649,7 +1648,7 @@
                "run-buffer"
                (env/eval-buffer db)
                nil))))
-       (cond for-print? (d/render
+       (cond for-print? (utils/render
                          [editor-view db
                           {:for-print for-print?
                            :print-options {:width (or print-width 1000)
@@ -1667,9 +1666,9 @@
                                            #js ["CodeMirror-linenumbers"]
                                            :foldGutter false}}]
                                   (.getElementById js/document "app")),
-             fullscreen? (d/render [editor-view db]
+             fullscreen? (utils/render [editor-view db]
                                    (.getElementById js/document "app")),
-             :else (d/render [home-page db (when embedded?
+             :else (utils/render [home-page db (when embedded?
                                              {:editor-reset editor-reset-ref})]
                              (.getElementById js/document "app")))))))
 

scripts/shop/database.sml

@@ -1,9 +1,9 @@
 (ns interactive-syntax.env
   (:require
    [reagent.core :as r :refer [atom]]
-   [reagent.dom :as d]
    [react]
    [react-dom]
+   [interactive-syntax.utils :as utils]
    ;;[reagent-catch.core :as rc]
    [clojure.string :as string]
    [clojure.set :as set]
@@ -861,7 +861,7 @@
                                   (swap! info assoc :visr-internal-refresh true))
                                 (reset! info stxinfo)
                                 (reset! stx (second form)))
-                              (d/render [visr-hider db runtime tag info stx
+                              (utils/render [visr-hider db runtime tag info stx
                                          file-src refs mark editor-options
                                          codemirror-options]
                                         visr))