Make shared component build work in isolation (#31066)

* Make shared component build work in isolation

 * Add deps that were missing because they were getting picked up
   from element-web main but shared-components needs itself
 * Exclude test files from dts generation
 * Bump version

* Change all the shared-component import to be the built artifact

* Don't randomly inhale eslint configs in parent dirs please

* maybe we don't need this anymore?

* maybe fix build

* Maybe fix docker build

* More build faff

 * build:res on the parent as part of shared component prepare
 * link shared component repo inn docker build

* 💅

* 💅x2

* Try converting the translation keys to a .d.ts file manually

so it gets bundled rather than left as a relative import to the json
file

* add the script

* Add this back for 2nd time now I think

* Shouldn't need this anymore

* patch-package on prepare

because we're patching a dev dependency so it won't be there if we're
installed as a dependency

* Unused import

* Prettier compliance

* Only use counterpart from shared components

as per comment

* Import shared components CSS

* Prettier

* Call the one from shared components

rather than recurse infinitely

* Hopefully make tests work

* wake up, comment goes before import

* Fix lint errors

* Fix dupe TranslationKey export

* Update compound-web to fix type error

An update to @types.react adds the 'hint' value to the enum of the
'popover' attribute and this version of compound-web uses the maching
verson of @types/react so they don't conflict.

* Maybe, hopefully, get the types working?

Please?

* Add copyright header to i18nkeys

as eslint complains otherwise since it's now in src

* prettier

* stop running shared-component tests in EW

* update snapshots

because flex is now from an external stylesheet I guess

* More snapshots

* Manual class update

* Avoid bundling compound bits

Because a) it's silly and b) it means we end up bundling a copy of
floating-ui too which causes absolute madness with its useDelayGroup
contexts.

* ignore test util files for coverage

* Add !important

because the styles are being applied in a different order now

* Another !important because css order has changed

* Try adding it here to make the test files ignored

* More !important

* commit yarn lock change

* Add shared components coverage file

* Update snapshots

Because the line height was being overridden to 22.5px somehow by
something I can't find, and now isn't: surely the normal 1.5rem is
more sensible.

* Update snapshots, attempt 2

* Another !important

* More snapshot updates

* Add test for i18n wrappers

& add test script

* lint

* Prettier

* Hopefully run shared component tests

* don't need this bit for non-matrix

* install ew deps

* rigfht coverage location

* Rename job here too

* Try different coverage filename

* Fix copyrights & comment

* Typo

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
David Baker
2025-11-03 16:26:47 +00:00
committed by GitHub
parent 486d4d59bc
commit b0cdbf5eff
133 changed files with 1708 additions and 319 deletions

View File

@@ -52,7 +52,7 @@ exports[`FilePanel renders empty state 1`] = `
class="mx_RoomView_empty"
>
<div
class="flex mx_EmptyState"
class="_flex_4dswl_9 mx_EmptyState"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
>
<svg

View File

@@ -6,7 +6,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
class="mx_RoomView mx_RoomView--local"
>
<header
class="flex mx_RoomHeader light-panel"
class="_flex_4dswl_9 mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<span
@@ -27,7 +27,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
tabindex="0"
>
<div
class="mx_RoomHeader_info box-flex"
class="mx_RoomHeader_info _box-flex_1odfs_9"
style="--mx-box-flex: 1;"
>
<div
@@ -79,7 +79,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
class="mx_RoomView mx_RoomView--local"
>
<header
class="flex mx_RoomHeader light-panel"
class="_flex_4dswl_9 mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<span
@@ -100,7 +100,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
tabindex="0"
>
<div
class="mx_RoomHeader_info box-flex"
class="mx_RoomHeader_info _box-flex_1odfs_9"
style="--mx-box-flex: 1;"
>
<div
@@ -238,7 +238,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
class="mx_RoomView mx_RoomView--local"
>
<header
class="flex mx_RoomHeader light-panel"
class="_flex_4dswl_9 mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<span
@@ -259,7 +259,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
tabindex="0"
>
<div
class="mx_RoomHeader_info box-flex"
class="mx_RoomHeader_info _box-flex_1odfs_9"
style="--mx-box-flex: 1;"
>
<div
@@ -493,7 +493,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
class="mx_RoomView mx_RoomView--local"
>
<header
class="flex mx_RoomHeader light-panel"
class="_flex_4dswl_9 mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<span
@@ -514,7 +514,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
tabindex="0"
>
<div
class="mx_RoomHeader_info box-flex"
class="mx_RoomHeader_info _box-flex_1odfs_9"
style="--mx-box-flex: 1;"
>
<div
@@ -810,7 +810,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
data-layout="group"
>
<header
class="flex mx_RoomHeader light-panel"
class="_flex_4dswl_9 mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<button
@@ -832,7 +832,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
tabindex="0"
>
<div
class="mx_RoomHeader_info box-flex"
class="mx_RoomHeader_info _box-flex_1odfs_9"
style="--mx-box-flex: 1;"
>
<div
@@ -1022,7 +1022,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
data-layout="group"
>
<header
class="flex mx_RoomHeader light-panel"
class="_flex_4dswl_9 mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<button
@@ -1044,7 +1044,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
tabindex="0"
>
<div
class="mx_RoomHeader_info box-flex"
class="mx_RoomHeader_info _box-flex_1odfs_9"
style="--mx-box-flex: 1;"
>
<div
@@ -1412,7 +1412,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
data-layout="group"
>
<header
class="flex mx_RoomHeader light-panel"
class="_flex_4dswl_9 mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<button
@@ -1434,7 +1434,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
tabindex="0"
>
<div
class="mx_RoomHeader_info box-flex"
class="mx_RoomHeader_info _box-flex_1odfs_9"
style="--mx-box-flex: 1;"
>
<div

View File

@@ -61,7 +61,7 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
</h2>
</div>
<div
class="flex mx_EncryptionCard_emphasisedContent"
class="_flex_4dswl_9 mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<span>
@@ -227,7 +227,7 @@ exports[`CompleteSecurity Allows verifying with recovery key if one is available
</h2>
</div>
<div
class="flex mx_EncryptionCard_emphasisedContent"
class="_flex_4dswl_9 mx_EncryptionCard_emphasisedContent"
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<span>