Build the published shared components (#30986)

dbkr · web-flow · commit 5dc8edcae0e1 · 2025-10-14T10:04:23.000Z
* Move shared components to a packages/ directory so they can be publish more sensibly * Iterate towards split out shared-components module * Move shared component source into src/ subdir * Fix up imports * Include shared components in babel-ing (again) * Remove now unused dependencies * Update import in storybook preview * ...except of course they aren't unused if we import the shared components by source * Ignore shared components deps * Add shared-components to i18n paths and upgrade web-i18n to version that supports doing so * Move storybook stuff to shared-components * Seems we don't need this anymore... * Remove unused deps and remove storybook plugin from eslint * Presumably working-directory is only valid on run steps * Ignore dep & run prettier * Prettier on knips.ts * Hopefully run in right dir * Remember how to software write * Okay... how about THIS way? * Oh right, they were git ignored. Sigh. * Add concurrently * Ignore in knip * Better? * Paaaaaaaackageeeeeeees * More packages * Move playwright snapshots * Still need a custom snapshots dir * Build shared components in their separate package Port #30963 to #30962 * Add prepare script * try making it a postinstall * no, this probably does want to be prepare postinstall doesn't really make sense since you would not have the dev dependencies at that point * Add workflow to publish shared components * Put in the namespace * Add eslint back * Oh, now knip sees them * Fix another import * Don't lint shared-components with everything else Okay, eslint & tsconfig are tied too closely for this to work and running tsc on the shared components will need its deps installing * Maybe lint shared components please? * Not quite * Fix name, add main, move patch-package to dependencies Although the only patched package is a dev dependency, but the postinstall will fail if patch-package isn't there. * Switch to npm for publishing Mostly because knip seems to this that yarn publish doesn't exist, although actually it seems super confused about versioning so let's just skip it. * Also hopefully enable provenance because why not * Maybe get exports right * Add richlist * Yeah, of course the keys are ordered why would the keys not be ordered * Build web resources first Otherwise yarn prepare won't work * Fix exports and add web-i18n as a dep * prettier * build res for static analysis * more build:res * ViewModel is only an interface so export type * Prettier * Bump to 5 as I'll do at least one test with the publish action
diff --git a/.github/workflows/shared-component-publish.yaml b/.github/workflows/shared-component-publish.yaml
@@ -0,0 +1,49 @@
+name: Publish shared component npm package
+on:
+    workflow_dispatch:
+        inputs:
+            version-bump:
+                description: The scale of the version bump required for semver compatibility
+                required: true
+                default: patch
+                type: choice
+                options:
+                    - patch
+                    - minor
+                    - major
+concurrency: release
+jobs:
+    publish:
+        name: "Release & Publish"
+        runs-on: ubuntu-latest
+        permissions:
+            contents: write
+            id-token: write
+
+        steps:
+            - name: 🧮 Checkout code
+              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+
+            - name: 🔧 Set up node environment
+              uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
+              with:
+                  cache: "yarn"
+                  node-version-file: ".node-version"
+
+            - name: 🛠️ Setup
+              # When running `install` it also calls the `prepare` step which generates
+              # a build
+              run: yarn --cwd packages/shared-components install --pure-lockfile
+
+            - name: 👊 Bump version
+              run: |
+                  cd packages/shared-components
+                  yarn version --no-git-tag-version --${{ github.event.inputs.version-bump }}
+                  git config --global user.name 'ElementRobot'
+                  git config --global user.email 'releases@riot.im'
+                  git commit -am "Shared components: ${{ github.event.inputs.version-bump }} version bump"
+                  git push
+
+            - name: 🚀 Publish to npm
+              working-directory: packages/shared-components
+              run: npm publish --access public --provenance
diff --git a/.github/workflows/shared-component-visual-tests.yaml b/.github/workflows/shared-component-visual-tests.yaml
@@ -34,6 +34,10 @@ jobs:
             - name: Install element web dependencies
               run: yarn install --frozen-lockfile
 
+            - name: Build Element Web resources
+              # Needed to prepare language files
+              run: "yarn build:res"
+
             - name: Install dependencies
               working-directory: packages/shared-components
               run: yarn install --frozen-lockfile
@@ -55,10 +59,6 @@ jobs:
               if: steps.playwright-cache.outputs.cache-hit != 'true'
               run: "yarn playwright install --with-deps --only-shell"
 
-            - name: Build Element Web resources
-              # Needed to prepare language files
-              run: "yarn build:res"
-
             - name: Build storybook dependencies
               # When the first test is ran, it will fail because the dependencies are not yet built.
               # This step is to ensure that the dependencies are built before running the tests.
diff --git a/.github/workflows/static_analysis.yaml b/.github/workflows/static_analysis.yaml
@@ -35,6 +35,10 @@ jobs:
             - name: Typecheck
               run: "yarn run lint:types"
 
+            - name: Build Element Web resources
+              # Needed to prepare language files for shared components
+              run: "yarn build:res"
+
             - name: Install Shared Component Dependencies
               run: "yarn --cwd packages/shared-components install"
 
@@ -87,6 +91,10 @@ jobs:
             - name: Run Linter
               run: "yarn run lint:js"
 
+            - name: Build Element Web resources
+              # Needed to prepare language files for shared components
+              run: "yarn build:res"
+
             - name: Install Shared Component Deps
               run: "yarn --cwd packages/shared-components install --frozen-lockfile"
 
diff --git a/packages/shared-components/package.json b/packages/shared-components/package.json
@@ -1,15 +1,29 @@
 {
-    "name": "element-web-shared-components",
-    "version": "1.12.1",
+    "name": "@element-hq/web-shared-components",
+    "version": "0.0.0-test.5",
     "description": "Shared components for Element",
     "author": "New Vector Ltd.",
     "repository": {
         "type": "git",
         "url": "https://github.com/element-hq/element-web"
     },
-    "license": "SEE LICENSE IN README.md",
+    "exports": {
+        ".": {
+            "require": {
+                "style": "./dist/element-web-shared-components.css",
+                "types": "./dist/element-web-shared-components.d.ts",
+                "default": "./dist/element-web-shared-components.umd.js"
+            },
+            "import": {
+                "style": "./dist/element-web-shared-components.css",
+                "types": "./dist/element-web-shared-components.d.ts",
+                "default": "./dist/element-web-shared-components.mjs"
+            }
+        }
+    },
+    "types": "dist/element-web-shared-components.d.ts",
     "files": [
-        "lib",
+        "dist",
         "src",
         "LICENSE",
         "README.md",
@@ -26,7 +40,10 @@
         "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" \"yarn storybook --no-open\" \"wait-on tcp:6007 && yarn test-storybook --url http://localhost:6007/ --ci --maxWorkers=2\"",
         "test:storybook:update": "playwright-screenshots --entrypoint yarn --with-node-modules && playwright-screenshots --entrypoint /work/node_modules/.bin/test-storybook --with-node-modules --url http://host.docker.internal:6007/ --updateSnapshot"
     },
-    "dependencies": {},
+    "dependencies": {
+        "matrix-web-i18n": "^3.4.0",
+        "patch-package": "^8.0.1"
+    },
     "devDependencies": {
         "@storybook/addon-a11y": "^9.1.10",
         "@storybook/addon-designs": "^10.0.2",
@@ -36,13 +53,15 @@
         "@storybook/test-runner": "^0.23.0",
         "concurrently": "^9.2.1",
         "eslint": "8",
+        "jest-image-snapshot": "^6.5.1",
         "eslint-plugin-storybook": "^9.1.10",
         "jest-image-snapshot": "^6.5.1",
         "patch-package": "^8.0.1",
         "prettier": "^3.6.2",
         "storybook": "^9.1.10",
         "typescript": "^5.9.3",
         "vite": "^7.1.9",
+        "vite-plugin-dts": "^4.5.4",
         "vite-plugin-node-polyfills": "^0.24.0"
     },
     "engines": {
diff --git a/packages/shared-components/src/index.ts b/packages/shared-components/src/index.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+// Components
+export * from "./audio/AudioPlayerView";
+export * from "./audio/Clock";
+export * from "./audio/PlayPauseButton";
+export * from "./audio/SeekBar";
+export * from "./avatar/AvatarWithDetails";
+export * from "./event-tiles/TextualEventView";
+export * from "./message-body/MediaBody";
+export * from "./pill-input/Pill";
+export * from "./pill-input/PillInput";
+export * from "./rich-list/RichItem";
+export * from "./rich-list/RichList";
+export * from "./utils/Box";
+export * from "./utils/Flex";
+
+// Utils
+export * from "./utils/i18n";
+export * from "./utils/humanize";
+export * from "./utils/DateUtils";
+export * from "./utils/numbers";
+
+// MVVM
+export * from "./ViewWrapper";
+export type * from "./ViewModel";
+export * from "./useViewModel";
+export * from "./MockViewModel";
diff --git a/packages/shared-components/vite.config.js b/packages/shared-components/vite.config.js
@@ -0,0 +1,47 @@
+/*
+ *
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ * /
+ */
+
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+    build: {
+        lib: {
+            entry: resolve(__dirname, "src/index.ts"),
+            name: "Element Web Shared Components",
+            // the proper extensions will be added
+            fileName: "element-web-shared-components",
+        },
+        outDir: "dist",
+        rollupOptions: {
+            // make sure to externalize deps that shouldn't be bundled
+            // into your library
+            external: ["react", "react-dom"],
+            output: {
+                // Provide global variables to use in the UMD build
+                // for externalized deps
+                globals: {
+                    "react": "react",
+                    "react-dom": "ReactDom",
+                },
+            },
+        },
+    },
+    resolve: {
+        alias: {
+            // Alias used by i18n.tsx
+            $webapp: resolve(__dirname, "..", "..", "webapp"),
+        },
+    },
+    plugins: [dts({ rollupTypes: true, include: ["src/**/*.{ts,tsx}"], copyDtsFiles: true })],
+});
diff --git a/packages/shared-components/yarn.lock b/packages/shared-components/yarn.lock
