build: fix import semantics for components

Author: filipesilva

.babelrc

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

.gitignore

@@ -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"]
+}

babel.config.js

@@ -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",

package.json

@@ -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]

project.clj

@@ -1134,6 +1134,18 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-transform-runtime@^7.15.0":
+  version "7.15.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.15.0.tgz#d3aa650d11678ca76ce294071fda53d7804183b3"
+  integrity sha512-sfHYkLGjhzWTq6xsuQ01oEsUYjkHRux9fW1iUA68dC7Qd8BS1Unq4aZ8itmQp95zUzIcyR2EbNMTzAicFj+guw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    babel-plugin-polyfill-corejs2 "^0.2.2"
+    babel-plugin-polyfill-corejs3 "^0.2.2"
+    babel-plugin-polyfill-regenerator "^0.2.2"
+    semver "^6.3.0"
+
 "@babel/plugin-transform-shorthand-properties@^7.12.1", "@babel/plugin-transform-shorthand-properties@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.14.5.tgz#97f13855f1409338d8cadcbaca670ad79e091a58"
@@ -1411,20 +1423,20 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.15.4", "@babel/runtime@^7.6.2":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
+  integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.7":
   version "7.14.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
   integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.6.2":
-  version "7.15.4"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
-  integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/template@^7.12.7", "@babel/template@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.14.5.tgz#a9bc9d8b33354ff6e55a9c60d1109200a68974f4"
@@ -1481,7 +1493,7 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.15.4", "@babel/types@^7.15.6":
+"@babel/types@^7.15.4", "@babel/types@^7.15.6", "@babel/types@^7.4":
   version "7.15.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.6.tgz#99abdc48218b2881c058dd0a7ab05b99c9be758f"
   integrity sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==
@@ -4374,7 +4386,7 @@ babel-plugin-react-docgen@^4.2.1:
     lodash "^4.17.15"
     react-docgen "^5.0.0"
 
-"babel-plugin-styled-components@>= 1", "babel-plugin-styled-components@>= 1.12.0":
+"babel-plugin-styled-components@>= 1", "babel-plugin-styled-components@>= 1.12.0", babel-plugin-styled-components@^1.13.2:
   version "1.13.2"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.2.tgz#ebe0e6deff51d7f93fceda1819e9b96aeb88278d"
   integrity sha512-Vb1R3d4g+MUfPQPVDMCGjm3cDocJEUTR7Xq7QS95JWWeksN1wdFRYpD2kulDgI3Huuaf1CZd+NK4KQmqUFh5dA==
@@ -4389,6 +4401,14 @@ babel-plugin-syntax-jsx@^6.18.0:
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
   integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
 
+babel-plugin-transform-imports@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-imports/-/babel-plugin-transform-imports-2.0.0.tgz#9e5f49f751a9d34ba8f4bb988c7e48ed2419c6b6"
+  integrity sha512-65ewumYJ85QiXdcB/jmiU0y0jg6eL6CdnDqQAqQ8JMOKh1E52VPG3NJzbVKWcgovUR5GBH8IWpCXQ7I8Q3wjgw==
+  dependencies:
+    "@babel/types" "^7.4"
+    is-valid-path "^0.1.1"
+
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
@@ -8577,6 +8597,13 @@ is-installed-globally@^0.4.0:
     global-dirs "^3.0.0"
     is-path-inside "^3.0.2"
 
+is-invalid-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/is-invalid-path/-/is-invalid-path-0.1.0.tgz#307a855b3cf1a938b44ea70d2c61106053714f34"
+  integrity sha1-MHqFWzzxqTi0TqcNLGEQYFNxTzQ=
+  dependencies:
+    is-glob "^2.0.0"
+
 is-map@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
@@ -8697,6 +8724,13 @@ is-typedarray@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
+is-valid-path@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-valid-path/-/is-valid-path-0.1.1.tgz#110f9ff74c37f663e1ec7915eb451f2db93ac9df"
+  integrity sha1-EQ+f90w39mPh7HkV60UfLbk6yd8=
+  dependencies:
+    is-invalid-path "^0.1.0"
+
 is-whitespace-character@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
@@ -11872,9 +11906,9 @@ shadow-cljs-jar@1.3.2:
   integrity sha512-XmeffAZHv8z7451kzeq9oKh8fh278Ak+UIOGGrapyqrFBB773xN8vMQ3O7J7TYLnb9BUwcqadKkmgaq7q6fhZg==
 
 shadow-cljs@^2.15.3:
-  version "2.15.3"
-  resolved "https://registry.yarnpkg.com/shadow-cljs/-/shadow-cljs-2.15.3.tgz#11a0a04f1c31d9277838a5f649457edbb06baafb"
-  integrity sha512-KK7G9kSc0dwrOkN74o5yrxhrpsJ3BJCL11nGHBakzHLodc7pdiCLDeq2ChXyKl2yu9aJIzfSz8Hum38wpLQ1DA==
+  version "2.15.9"
+  resolved "https://registry.yarnpkg.com/shadow-cljs/-/shadow-cljs-2.15.9.tgz#cb256a9af12c3df1f0b2bbef344e365dab74b519"
+  integrity sha512-t2KrrMvJZtUFf2xIAL+OL76ahYHPT8VAKxhDic3kloTgOYfZpHRm/S/3C0iW982U3ZJdLUZxmBeluH4Q7564dg==
   dependencies:
     node-libs-browser "^2.2.1"
     readline-sync "^1.4.7"
@@ -13541,9 +13575,9 @@ write-file-atomic@^3.0.0:
     typedarray-to-buffer "^3.1.5"
 
 ws@^7.4.6:
-  version "7.5.3"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.3.tgz#160835b63c7d97bfab418fc1b8a9fced2ac01a74"
-  integrity sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg==
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.5.tgz#8b4bc4af518cfabd0473ae4f99144287b33eb881"
+  integrity sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==
 
 ws@~7.4.2:
   version "7.4.6"