frontend: vendor the compound dependencies

Dockerfile

@@ -29,6 +29,7 @@ FROM --platform=${BUILDPLATFORM} docker.io/library/node:${NODEJS_VERSION}-${DEBI
 WORKDIR /app/frontend
 
 COPY ./frontend/package.json ./frontend/package-lock.json /app/frontend/
+COPY ./frontend/vendor /app/frontend/vendor
 # Network access: to fetch dependencies
 RUN --network=default \
   npm ci

frontend/package-lock.json

@@ -14,7 +14,8 @@
         "@urql/exchange-graphcache": "^6.2.0",
         "@urql/exchange-refocus": "^1.0.2",
         "@urql/exchange-request-policy": "^1.0.2",
-        "@vector-im/compound-web": "https://github.com/vector-im/compound-web.git#0097cd20d33fe1c7862cfc1e6f530255bffd6279",
+        "@vector-im/compound-design-tokens": "file:./vendor/vector-im-compound-design-tokens-aa55111.tgz",
+        "@vector-im/compound-web": "file:./vendor/vector-im-compound-web-f0d4eaf.tgz",
         "date-fns": "^2.30.0",
         "graphql": "^16.7.1",
         "jotai": "^2.2.1",
@@ -5585,46 +5586,131 @@
       }
     },
     "node_modules/@radix-ui/react-form": {
-      "version": "0.0.2",
+      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.0.3.tgz",
-      "integrity": "sha512-+WQU4Gs4MqjYsHwh5d19Ka4CMcWeXd7WPuWYCYGtNbDRMHFG2TtgM9PlEK4Yrk7wG1f5/da6Bgtteky2ggDXUg==",
+      "integrity": "sha512-kgE+Z/haV6fxE5WqIXj05KkaXa3OkZASoTDy25yX2EIp/x0c54rOH/vFr5nOZTg7n7T1z8bSyXmiVIFP9bbhPQ==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-id": "1.0.1",
-        "@radix-ui/react-label": "2.0.1",
+        "@radix-ui/react-label": "2.0.2",
-        "@radix-ui/react-primitive": "1.0.2"
+        "@radix-ui/react-primitive": "1.0.3"
       },
       "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
         "react": "^16.8 || ^17.0 || ^18.0",
         "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-form/node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
     "node_modules/@radix-ui/react-id": {
-      "version": "1.0.0",
+      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
-      "integrity": "sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-layout-effect": "1.0.0"
+        "@radix-ui/react-use-layout-effect": "1.0.1"
       },
       "peerDependencies": {
+        "@types/react": "*",
         "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
     "node_modules/@radix-ui/react-label": {
-      "version": "2.0.1",
+      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.2.tgz",
-      "integrity": "sha512-qcfbS3B8hTYmEO44RNcXB6pegkxRsJIbdxTMu0PEX0Luv5O2DvTIwwVYxQfUwLpM88EL84QRPLOLgwUSApMsLQ==",
+      "integrity": "sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.2"
+        "@radix-ui/react-primitive": "1.0.3"
       },
       "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
         "react": "^16.8 || ^17.0 || ^18.0",
         "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
       }
     },
     "node_modules/@radix-ui/react-presence": {
@@ -5642,16 +5728,61 @@
       }
     },
     "node_modules/@radix-ui/react-primitive": {
-      "version": "1.0.2",
+      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
-      "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-slot": "1.0.1"
+        "@radix-ui/react-slot": "1.0.2"
       },
       "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
         "react": "^16.8 || ^17.0 || ^18.0",
         "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
     "node_modules/@radix-ui/react-scroll-area": {
@@ -7886,7 +8017,7 @@
       "version": "18.2.7",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.7.tgz",
       "integrity": "sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -8340,7 +8471,8 @@
     },
     "node_modules/@vector-im/compound-design-tokens": {
       "version": "0.0.3",
-      "resolved": "git+ssh://git@github.com/vector-im/compound-design-tokens.git#81bcb4a8a93521d1a4cc7e019752373ffbd711fa",
+      "resolved": "file:vendor/vector-im-compound-design-tokens-aa55111.tgz",
+      "integrity": "sha512-t4gTadxwnHdITAWP0mW5Z0XOnfm7fzbYonkbqEqXVLI/aZAQU5sqrayRQBPLe2pOdEZ/fX1lb69EazxxCnzlbA==",
       "license": "Apache-2.0",
       "dependencies": {
         "svg2vectordrawable": "^2.9.1"
@@ -8348,11 +8480,11 @@
     },
     "node_modules/@vector-im/compound-web": {
       "version": "0.0.1",
-      "resolved": "git+ssh://git@github.com/vector-im/compound-web.git#0097cd20d33fe1c7862cfc1e6f530255bffd6279",
+      "resolved": "file:vendor/vector-im-compound-web-f0d4eaf.tgz",
-      "integrity": "sha512-cAPk1VWG5r3jxc8weSq+MuJRUpbc7mEhZ3nsw4so57kbFGOFHJfc5Vd8i4HPXKy88pQ80r8iE0uHp+vK4TO8eQ==",
+      "integrity": "sha512-DH24nex5Jtn4QWnetrbumh601SSnzk2ly5OGAoW5J1pT01w9VQSsQli+Ju1/s47jwT2J7dxcZCeTMwKJBPI/DQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@radix-ui/react-form": "^0.0.2",
+        "@radix-ui/react-form": "^0.0.3",
         "@vector-im/compound-design-tokens": "https://github.com/vector-im/compound-design-tokens#develop",
         "classnames": "^2.3.2",
         "lodash": "^4.17.21",

frontend/package.json

@@ -21,7 +21,8 @@
     "@urql/exchange-graphcache": "^6.2.0",
     "@urql/exchange-refocus": "^1.0.2",
     "@urql/exchange-request-policy": "^1.0.2",
-    "@vector-im/compound-web": "https://github.com/vector-im/compound-web.git#0097cd20d33fe1c7862cfc1e6f530255bffd6279",
+    "@vector-im/compound-web": "file:./vendor/vector-im-compound-web-f0d4eaf.tgz",
+    "@vector-im/compound-design-tokens": "file:./vendor/vector-im-compound-design-tokens-aa55111.tgz",
     "date-fns": "^2.30.0",
     "graphql": "^16.7.1",
     "jotai": "^2.2.1",
@@ -74,5 +75,8 @@
     "vite-plugin-manifest-sri": "^0.1.0",
     "vite-plugin-svgr": "^3.2.0",
     "vitest": "^0.33.0"
+  },
+  "overrides": {
+      "@vector-im/compound-design-tokens": "$@vector-im/compound-design-tokens"
   }
 }

frontend/vendor/README.md

@@ -0,0 +1,16 @@
+This directory contains vendored versions of the compound components, which are not yet published to npm.
+
+ - [`@vector-im/compound-design-tokens`](https://github.com/vector-im/compound-design-tokens)
+ - [`@vector-im/compound-web`](https://github.com/vector-im/compound-web)
+
+Installing these dependencies via `git` dependencies was way too slow, so we've vendored them here.
+
+To update them:
+
+ - Clone the above repos
+ - Run `yarn` in each
+ - Run `npm pack` in each (`yarn pack` skip some files in the tarball)
+ - Copy the resulting `vector-im-compound-*.tgz` files into this directory, changing their version with the short commit hash
+ - Commit the changes
+ - Update the `package.json` to point to the new versions
+ - Run `npm install` to update the lockfile