Page-level presence

.gitignore

@@ -34,3 +34,4 @@ dist
 
 # design system static build
 /storybook-static
+/src/gen

babel.config.js

@@ -0,0 +1,80 @@
+const {existsSync, lstatSync} = require("fs");
+const {resolve, dirname} = require("path");
+
+function isRelativeImport(path){
+  return path.startsWith(".");
+}
+
+function isDirectory(path) {
+  return existsSync(path) && lstatSync(path).isDirectory();
+}
+
+function resolveImport (from, to) {
+  return resolve(dirname(from), to);
+}
+
+function replaceDirectoryImports() {
+  return {
+    visitor: {
+      ImportDeclaration: (path, state) => {
+        const importPath = path.node.source.value;
+        const fileName = state.file.opts.filename;
+        if (isRelativeImport(importPath) && isDirectory(resolveImport(fileName, importPath))) {
+          path.node.source.value += "/index"; 
+        }
+      }
+    }
+  }
+}
+
+
+// This config will output files to ./src/gen/components via the `yarn components` script
+// See https://shadow-cljs.github.io/docs/UsersGuide.html#_javascript_dialects
+module.exports = {
+  presets: [
+    "@babel/env",
+    // Compile tsx files.
+    "@babel/preset-typescript",
+    // Use the react runtime import if available.
+    ["@babel/preset-react", {"runtime": "automatic"}]
+  ],
+  plugins: [
+    // Add /index to all relative directory imports, because Shadow-CLJS does not support
+    // them (https://github.com/thheller/shadow-cljs/issues/841#issuecomment-777323477)
+    // NB: Putting these files in node_modules would have fixed the directory imports
+    // but broken hot reload (https://github.com/thheller/shadow-cljs/issues/764#issuecomment-663064549)
+    replaceDirectoryImports,
+    // Allow using @/ for root relative imports in the component library.
+    ["module-resolver", {alias: {"@": "./src/js/components"}}],
+    // Transform material-ui imports into deep imports for faster reload.
+    // material-ui is very big, and importing it all can slow down development rebuilds by a lot.
+    // https://material-ui.com/guides/minimizing-bundle-size/#development-environment
+    ["transform-imports", {
+      "@material-ui/core": {
+        transform: "@material-ui/core/esm/${member}",
+        preventFullImport: true
+      },
+      "@material-ui/icons": {
+        transform: "@material-ui/icons/esm/${member}",
+        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}],
+    // Import helpers from @babel/runtime instead of duplicating them everywhere.
+    "@babel/plugin-transform-runtime",
+    // Better debug information for styled components.
+    // https://styled-components.com/docs/tooling#babel-plugin
+    "babel-plugin-styled-components"
+  ],
+  // 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"]
+}

package.json

@@ -12,11 +12,11 @@
     "update": "standard-version -p --releaseCommitMessageFormat v{{currentTag}}",
     "dev": "yarn components && concurrently \"yarn components:watch\" \"yarn client:watch\"",
     "client:watch": "shadow-cljs watch main renderer app",
-    "components": "babel ./src/js/components/ --extensions \".ts,.tsx\" --out-dir ./dist/js/components/",
+    "components": "babel ./src/js/components/ --extensions \".ts,.tsx\" --out-dir ./src/gen/components/",
     "components:watch": "yarn components --watch",
     "compile": "yarn components && shadow-cljs compile main renderer app",
     "prod": "yarn components && shadow-cljs release main renderer app",
-    "clean": "rm -rf resources/public/**/*.js target .shadow-cljs ./src/stories/**/*.js",
+    "clean": "rm -rf resources/public/**/*.js target .shadow-cljs src/gen",
     "dist": "electron-builder -p always",
     "storybook:watch": "start-storybook -p 6006",
     "storybook": "build-storybook",
@@ -59,6 +59,7 @@
     }
   },
   "dependencies": {
+    "@babel/runtime": "^7.15.4",
     "@geometricpanda/storybook-addon-badges": "^0.0.4",
     "@js-joda/core": "1.12.0",
     "@js-joda/locale_en-us": "3.1.1",
@@ -100,6 +101,7 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
     "@babel/plugin-proposal-private-methods": "^7.14.5",
     "@babel/plugin-proposal-private-property-in-object": "^7.15.4",
+    "@babel/plugin-transform-runtime": "^7.15.0",
     "@babel/preset-env": "^7.15.6",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
@@ -110,6 +112,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",
+    "babel-plugin-transform-imports": "^2.0.0",
     "concurrently": "^6.2.1",
     "electron": "^12.0.4",
     "electron-builder": "22.10",

project.clj

@@ -57,7 +57,7 @@
 
   :min-lein-version "2.5.3"
 
-  :source-paths ["src/clj" "src/cljs" "src/cljc" "src/js" "dist/js"]
+  :source-paths ["src/clj" "src/cljs" "src/cljc" "src/js" "src/gen"]
 
   :main athens.self-hosted.core
   :aot [athens.self-hosted.core]

src/cljs/athens/self_hosted/presence/events.cljs

@@ -43,6 +43,12 @@
         (update-in [:presence :users new-username] assoc :username new-username))))
 
 
+(rf/reg-event-db
+  :presence/update-color
+  (fn [db [_ username color]]
+    (assoc-in db [:presence :users username :color] color)))
+
+
 (rf/reg-event-fx
   :presence/send-rename
   (fn [_ [_ current-username new-username]]

src/cljs/athens/self_hosted/presence/subs.cljs

@@ -21,6 +21,18 @@
                    users))))
 
 
+(rf/reg-sub
+  :presence/current-user
+  :<- [:presence/users-with-page-data]
+  :<- [:settings]
+  (fn [[users settings] [_]]
+    (-> (filter (fn [[_ user]]
+                  (= (:username settings) (:username user)))
+                users)
+        first
+        second)))
+
+
 (rf/reg-sub
   :presence/same-page
   :<- [:presence/users-with-page-data]
@@ -34,7 +46,7 @@
                           (= current-route-uid (:page/uid user)))
                         users))
 
-      [])))
+      {})))
 
 
 (rf/reg-sub