Update dependencies

.gitignore

@@ -18,3 +18,5 @@ pom.xml.asc
 /.idea
 .DS_Store
 /public/js
+/.rebel_readline_history
+

env/dev/cljs/zefstyle/dev.cljs

@@ -1,11 +1,14 @@
 (ns ^:figwheel-no-load zefstyle.dev
   (:require [zefstyle.core :as core]
-            [figwheel.client :as figwheel :include-macros true]))
+            [devtools.core :as devtools]))
+
+(extend-protocol IPrintWithWriter
+  js/Symbol
+  (-pr-writer [sym writer _]
+    (-write writer (str "\"" (.toString sym) "\""))))
 
 (enable-console-print!)
 
-(figwheel/watch-and-reload
-  :websocket-url "ws://localhost:3449/figwheel-ws"
-  :jsload-callback core/mount-root)
+(devtools/install!)
 
 (core/init!)

package.json

@@ -3,13 +3,16 @@
   "version": "0.0.2",
   "author": "[email protected]",
   "scripts": {
-    "watch": "webpack -d --watch",
-    "build": "webpack -p"
+    "watch": "webpack --mode=development --watch",
+    "build": "webpack --mode=production"
   },
   "dependencies": {
-    "react": "15.5.4",
-    "react-dom": "15.5.4",
-    "webpack": "1.13.1",
-    "react-player": "0.18.0"
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-player": "2.13.0",
+    "webpack": "5.88.1"
+  },
+  "devDependencies": {
+      "webpack-cli": "^5.1.4"
   }
-}
+}

project.clj

@@ -4,52 +4,68 @@
   :license {:name "Eclipse Public License"
             :url "http://www.eclipse.org/legal/epl-v10.html"}
 
-  :dependencies [[org.clojure/clojure "1.8.0" :scope "provided"]
-                 [org.clojure/clojurescript "1.9.562" :scope "provided"]
-                 [reagent "0.6.2" :exclusions [cljsjs/react cljsjs/react-dom]]]
+  :dependencies [[org.clojure/clojure "1.11.1"]
+                 [org.clojure/clojurescript "1.11.60"]
+                 [reagent "1.1.1" :exclusions [cljsjs/react cljsjs/react-dom]]]
 
-  :plugins [[lein-cljsbuild "1.1.6"]
-            [lein-figwheel "0.5.10"]]
-
-  :min-lein-version "2.5.0"
+  :plugins [[lein-cljsbuild "1.1.7"]
+            [lein-figwheel "0.5.21-SNAPSHOT"]]
 
   :clean-targets ^{:protect false}
-[:target-path
- [:cljsbuild :builds :app :compiler :output-dir]
- [:cljsbuild :builds :app :compiler :output-to]]
+
+  [:target-path
+   [:cljsbuild :builds :app :compiler :output-dir]
+   [:cljsbuild :builds :app :compiler :output-to]]
 
   :resource-paths ["public"]
 
-  :figwheel {:http-server-root "public"
+  :figwheel {:http-server-root "."
              :nrepl-port 7002
-             :nrepl-middleware ["cemerick.piggieback/wrap-cljs-repl"]
+             :nrepl-middleware [cider.piggieback/wrap-cljs-repl]
              :css-dirs ["public/css"]}
 
   :cljsbuild {:builds {:app
                        {:source-paths ["src" "env/dev/cljs"]
                         :compiler
-                                      {:main "zefstyle.dev"
-                                       :output-to "public/js/app.js"
-                                       :output-dir "public/js/out"
-                                       :asset-path   "js/out"
-                                       :source-map true
-                                       :foreign-libs [{:file "public/js/bundle.js"
-                                                       :provides ["cljsjs.react" "cljsjs.react.dom" "webpack.bundle"]}]
-                                       :optimizations :none
-                                       :pretty-print  true}}
+                        {:main "zefstyle.dev"
+                         :output-to "public/js/app.js"
+                         :output-dir "public/js/out"
+                         :asset-path   "js/out"
+                         :source-map true
+                         :infer-externs true
+                         :npm-deps false
+                         :foreign-libs [{:file "public/js/bundle.js"
+                                         :provides ["react" "react-dom" "react-player"]
+                                         :global-exports {react React
+                                                          react-dom ReactDOM
+                                                          react-player ReactPlayer}}]
+                         :optimizations :none
+                         :pretty-print  true}
+                        :figwheel
+                        {:on-jsload "zefstyle.core/mount-root"
+                         :open-urls ["http://localhost:3449/index.html"]}}
                        :release
                        {:source-paths ["src" "env/prod/cljs"]
                         :compiler
-                                      {:output-to "public/js/app.js"
-                                       :output-dir "public/js/release"
-                                       :asset-path   "js/out"
-                                       :optimizations :advanced
-                                       :foreign-libs [{:file "public/js/bundle.js"
-                                                       :provides ["cljsjs.react" "cljsjs.react.dom" "webpack.bundle"]}]
-                                       :pretty-print false}}}}
+                        {:output-to "public/js/app.js"
+                         :output-dir "target/release"
+                         :optimizations :advanced
+                         :infer-externs true
+                         :npm-deps false
+                         :externs ["cljsjs/react/common/react.ext.js"
+                                   "cljsjs/react-dom/common/react-dom-server.ext.js"
+                                   "cljsjs/react-dom/common/react-dom.ext.js"]
+                         :foreign-libs [{:file "public/js/bundle.js"
+                                         :provides ["react" "react-dom" "react-player"]
+                                         :global-exports {react React
+                                                          react-dom ReactDOM
+                                                          react-player ReactPlayer}}]
+                         :pretty-print false}}}}
 
   :aliases {"release" ["do" "clean" ["cljsbuild" "once" "release"]]}
 
-  :profiles {:dev {:dependencies [[lein-figwheel "0.5.4-SNAPSHOT"]
-                                  [org.clojure/tools.nrepl "0.2.12"]
-                                  [com.cemerick/piggieback "0.2.2-SNAPSHOT"]]}})
+  :profiles {:dev {:source-paths ["src" "env/dev/clj" "env/dev/cljs"]
+                   :dependencies [[binaryage/devtools "1.0.6"]
+                                  [figwheel-sidecar "0.5.21-SNAPSHOT"]
+                                  [nrepl "1.0.0"]
+                                  [cider/piggieback "0.5.3"]]}})

public/index.html

@@ -3,13 +3,13 @@
   <head>
     <meta charset="utf-8">
     <meta content="width=device-width, initial-scale=1" name="viewport">
-    <link href="css/site.css" rel="stylesheet" type="text/css">
+    <link href="/css/site.css" rel="stylesheet" type="text/css">
   </head>
   <body>
     <div id="app">
       <h3>ClojureScript has not been compiled!</h3>
       <p>please run <b>lein figwheel</b> in order to start the compiler</p>
     </div>
-    <script src="js/app.js" type="text/javascript"></script>
+    <script src="/js/app.js" type="text/javascript"></script>
   </body>
 </html>

src/js/main.js

@@ -1,8 +1,7 @@
-window.deps = {
-    'react' : require('react'),
-    'react-dom' : require('react-dom'),
-    'react-player' : require('react-player'),
-};
+import React from "react";
+import ReactDOM from "react-dom";
+import ReactPlayer from "react-player";
 
-window.React = window.deps['react'];
-window.ReactDOM = window.deps['react-dom'];
+window.React = React;
+window.ReactDOM = ReactDOM;
+window.ReactPlayer = ReactPlayer;

src/zefstyle/core.cljs

@@ -1,22 +1,20 @@
 (ns zefstyle.core
-  (:require [reagent.core :as reagent :refer [atom]]
-            [webpack.bundle]))
+  (:require [reagent.core :as r]
+            [reagent.dom :as d]))
 
 ;; -------------------------
 ;; Views
 
-
 (defn home-page []
-  (let [react-player (aget js/window "deps" "react-player")]
-    [:div
-     [:h2 "Zef Style"]
-     [:> react-player {:url "https://youtu.be/uMK0prafzw0"}]]))
+  [:div
+   [:h2 "Zef Style"]
+   [:> js/ReactPlayer {:url "https://youtu.be/uMK0prafzw0"}]])
 
 ;; -------------------------
 ;; Initialize app
 
 (defn mount-root []
-  (reagent/render [home-page] (.getElementById js/document "app")))
+  (d/render [home-page] (.getElementById js/document "app")))
 
 (defn init! []
-  (mount-root))
+  (mount-root))

webpack.config.js

@@ -1,4 +1,3 @@
-const webpack = require('webpack');
 const path = require('path');
 
 const BUILD_DIR = path.resolve(__dirname, 'public', 'js');
@@ -12,4 +11,4 @@ const config = {
   },
 };
 
-module.exports = config;
+module.exports = config;