Draft: Scratch changes for `matrix-public-archive` by MadLittleMods · Pull Request #653 · element-hq/hydrogen-web

MadLittleMods · 2022-02-02T07:11:43Z

Scratch changes for matrix-public-archive (not available yet)

See plan https://docs.google.com/document/d/1wP_TIqmBQjtt862vb2CWWmnmVxTyolcF3J1scuiYMdg/edit#

Trying to make it faster/easier to build hydrogen.es.js for local linking and dev in matrix-public-arhive project
- yarn run vite build -c vite.sdk-lib-config.js --watch
Some random changes to accomodate using raw EventEntry's

Dev notes

https://github.com/vector-im/hydrogen-web/blob/master/doc/SDK.md

Supporting the Node.js CommonJS environment (`package.json` `exports`)

Getting CommonJS vs EcmaScript Modules working, d7290bf
package.json

"main": "./hydrogen.cjs.js",
  "exports": {
      ".": {
          "import": "./lib-build/hydrogen.es.js",
          "require": "./lib-build/hydrogen.cjs.js"
      },
      "./paths/vite": "./paths/vite.js",
      "./style.css": "./style.css",
      "./assets/": "./asset-build/assets/"
  }

Also added "./assets/": "./asset-build/assets/" to the exports so we can simply serve them with app.use(express.static(path.dirname(require.resolve('hydrogen-view-sdk/assets/'))));

eslint-plugin-node will complain about these entries but that's because it doesn't support exports, see mysticatea/eslint-plugin-node#255

`package.json` `exports` docs

Docs source: https://github.com/webpack/webpack.js.org/blob/627c26026678f2f44c40a7631c7799c04936ff40/src/content/guides/package-exports.mdx (served at https://webpack.js.org/guides/package-exports/)

In general the exports field should contain an object
where each properties specifies a sub path of the module request.
For the examples above the following properties could be used:
"." for import "package" and "./sub/path" for import "package/sub/path".
Properties ending with a / will forward a request with this prefix to the old file system lookup algorithm.
For properties ending with *, * may take any value and any * in the property value is replaced with the taken value.

An example:
{
  "exports": {
    ".": "./main.js",
    "./sub/path": "./secondary.js",
    "./prefix/": "./directory/",
    "./prefix/deep/": "./other-directory/",
    "./other-prefix/*": "./yet-another/*/*.js"
  }
}

Vite

Pre-Bundled dependencies used over locally linked dependency when built before linking vitejs/vite#6718

Server-side render Hydrogen

Can we just render straight to string?

 - There are lot of side-effects in the `render` functions of various components and calling `render(...)` will cause children to call `view` and `mount` which will do more DOM things.

Virtual DOM:

See plan https://docs.google.com/document/d/1wP_TIqmBQjtt862vb2CWWmnmVxTyolcF3J1scuiYMdg/edit# 1. Trying to make it faster/easier to build `hydrogen.es.js` for local linking and dev in `matrix-public-arhive` project 1. Some random changes to accomodate using raw `EventEntry`'s

scripts/sdk/base-manifest.json

MadLittleMods · 2022-02-09T07:54:48Z

src/matrix/room/timeline/Timeline.js

+        // find any local relations to these new remote events or maybe these
+        // new remote events reference one of the other new remote events we have.
+        const entryList = new ConcatList(entries, this._localEntries);
+        for (const pee of entryList) {


This makes emoji reactions show up on messages.

(the m.reaction events are in the list of events we're rendering)

src/platform/web/parsehtml.js

…rowser and linkedom (for SSR) Context: - WebReflection/linkedom#106 - WebReflection/linkedom#108

…dom`](https://github.com/WebReflection/linkedom) (SSR). - [`linkedom`](https://github.com/WebReflection/linkedom) is being used https://github.com/matrix-org/matrix-public-archive to server-side render (SSR) Hydrogen (`hydrogen-view-sdk`) - This is being fixed by using a explicit HTML wrapper boilerplate with `DOMParser` to get a matching result in the browser and `linkedom`. Currently `parseHTML` is only used for HTML content bodies in events. Events with replies have content bodies that look like `<mx-reply>Hello</mx-reply> What's up` so they're parsed as HTML to strip out the `<mx-reply>` part. Before | After --- | --- ![](https://user-images.githubusercontent.com/558581/153692011-2f0e7114-fcb4-481f-b217-49f461b1740a.png) | ![](https://user-images.githubusercontent.com/558581/153692016-52582fdb-abd9-439d-9dce-3f04da6959db.png) Before: ```js // Browser (Chrome, Firefox) new DOMParser().parseFromString(`<div>foo</div>`, "text/html").body.outerHTML; // '<body><div>foo</div></body>' // `linkedom` ❌ new DOMParser().parseFromString(`<div>foo</div>`, "text/html").body.outerHTML; // '<body></body>' ``` After (consistent matching output): ```js // Browser (Chrome, Firefox) new DOMParser().parseFromString(`<!DOCTYPE html><html><body><div>foo</div></body></html>`, "text/html").body.outerHTML; // '<body><div>foo</div></body>' // `linkedom` new DOMParser().parseFromString(`<!DOCTYPE html><html><body><div>foo</div></body></html>`, "text/html").body.outerHTML; // '<body><div>foo</div></body>' ``` `linkedom` goal is to be close to the current DOM standard, but [not too close](https://github.com/WebReflection/linkedom#faq). Focused on the streamlined cases for server-side rendering (SSR). Here is some context around getting `DOMParser` to interpret things better. The conclusion was to only support the explicit standard cases with a `<html><body></body></html>` specified instead of adding the magic HTML document creation and massaging that the browser does. - WebReflection/linkedom#106 - WebReflection/linkedom#108 --- Part of #653 to support server-side rendering Hydrogen for the [`matrix-public-archive`](https://github.com/matrix-org/matrix-public-archive) project.

src/platform/web/parsehtml.js

src/platform/web/ui/session/room/TimelineView.ts

MadLittleMods · 2022-02-12T02:16:59Z

src/platform/web/ui/session/room/RoomView.js

                        new TimelineLoadingView(vm);    // vm is just needed for i18n
                }),
-                t.view(bottomView),
+                bottomView ? t.view(bottomView) : text(''),


Just trying to not render the composer when no vm.composerViewModel.kind matches with the goal to hide the composer.

…h-changes Conflicts: scripts/sdk/base-manifest.json src/platform/web/parsehtml.js

…hrowing and stopping all JavaScript Related to #579 ``` Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'deriveBits') at new Crypto at new Platform at mountHydrogen ```

Split off from #653 Personally using `select`, `option`, and `path` currently in https://github.com/matrix-org/matrix-public-archive but added a few extra SVG elements that seemed common to me.

src/platform/web/ui/general/html.ts

See #653 (comment) We can allow this to run now since I added support for `setProperty` in `linkedom` ⏩ WebReflection/linkedom#114

…ing in tests Split out from #653 Example test assertions: https://github.com/matrix-org/matrix-public-archive/blob/db6d3797d74104ad7c93e572ed106f1a685a90d0/test/e2e-tests.js#L248-L252 ```js // Make sure the $abc event on the page has "foobarbaz" text in it assert.match( dom.document.querySelector(`[data-event-id="$abc"]`).outerHTML, new RegExp(`.*foobarbaz.*`) ); ```

…op as well and continue reading See `?continue=top` in matrix-org/matrix-viewer#114 for how this is used

This would be helpful for matrix-org/matrix-viewer#73

Part of matrix-org/matrix-viewer#4

src/domain/session/room/timeline/tiles/BaseMessageTile.js

… your cursor on that event

src/platform/web/ui/session/room/timeline/BaseMessageView.js

…h-changes Conflicts: src/domain/session/room/LightboxViewModel.js

src/platform/web/ui/general/html.ts

… menu option for it now

…h-changes Conflicts: src/domain/ViewModel.ts src/domain/navigation/index.ts src/domain/session/SessionViewModel.js src/domain/session/room/RoomViewModel.js src/domain/session/room/timeline/tiles/BaseMessageTile.js src/domain/session/room/timeline/tiles/SimpleTile.js src/matrix/room/PowerLevels.js src/platform/web/dom/utils.ts src/platform/web/ui/session/room/timeline/BaseMessageView.js

…vember 16, 2022'

src/platform/web/ui/css/themes/element/timeline.css

Useful to quickly grab the MXC URL's to quarantine media in moderation scenarios

via #1100

MadLittleMods · 2023-05-26T23:32:20Z

scripts/sdk/build.sh

+pushd target/
+# Make sure the dependencies are available for any consuming project that uses
+# `npm link hydrogen-view-sdk`
+yarn install --no-lockfile
+popd


Split off to #1100

MadLittleMods marked this pull request as draft February 2, 2022 07:11

MadLittleMods commented Feb 2, 2022

View reviewed changes

scripts/sdk/base-manifest.json Outdated Show resolved Hide resolved

Remove some scratch changes

5805ce0

MadLittleMods mentioned this pull request Feb 3, 2022

Draft: PoC Render to string #656

Closed

MadLittleMods added 2 commits February 4, 2022 01:26

Remove dom side-effect from rendering

eda179a

Fix reply tiles not showing the new message

4eb24db

MadLittleMods commented Feb 9, 2022

View reviewed changes

src/platform/web/parsehtml.js Outdated Show resolved Hide resolved

MadLittleMods added 3 commits February 10, 2022 01:45

Some changes to support RoomView with no composer

8d0c4e6

Support custom RightPanel content

e75f18c

Use explicit HTML document boilerplate to get consistent results in b…

48825ea

…rowser and linkedom (for SSR) Context: - WebReflection/linkedom#106 - WebReflection/linkedom#108

MadLittleMods mentioned this pull request Feb 12, 2022

Fix missing reply text when message body is parsed as HTML in linkedom (SSR) #666

Merged

MadLittleMods commented Feb 12, 2022

View reviewed changes

src/platform/web/parsehtml.js Show resolved Hide resolved

MadLittleMods commented Feb 12, 2022

View reviewed changes

src/platform/web/ui/session/room/TimelineView.ts Outdated Show resolved Hide resolved

MadLittleMods commented Feb 12, 2022

View reviewed changes

Merge branch 'master' into madlittlemods/matrix-public-archive-scratc…

1032f4d

…h-changes Conflicts: scripts/sdk/base-manifest.json src/platform/web/parsehtml.js

This was referenced Feb 14, 2022

Render to string to support server-side rendering (SSR) #657

Closed

Re-introduce CommonJS support to SDK #686

Closed

MadLittleMods added 5 commits February 24, 2022 02:40

Add permalink to timestamp

6005fcf

Use UTC timestamps and add data attribute for easy targeting in tests

a4cdde6

Add more SVG elements

3e58619

Get rid of duplicate export

fc89bfd

Only try to use window.crypto.subtle in secure contexts to avoid it t…

082d997

…hrowing and stopping all JavaScript Related to #579 ``` Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'deriveBits') at new Crypto at new Platform at mountHydrogen ```

MadLittleMods mentioned this pull request Feb 25, 2022

Add more HTML form and SVG elements #689

Merged

MadLittleMods commented Feb 25, 2022

View reviewed changes

src/platform/web/ui/general/html.ts Outdated Show resolved Hide resolved

No need to comment this out since linkedom supports it now

ea2d45c

See #653 (comment) We can allow this to run now since I added support for `setProperty` in `linkedom` ⏩ WebReflection/linkedom#114

Add a way to toggle scrollToBottom so you can start scroll from the t…

5fdbe61

…op as well and continue reading See `?continue=top` in matrix-org/matrix-viewer#114 for how this is used

MadLittleMods mentioned this pull request Nov 2, 2022

Add a way to toggle scrollToBottom so you can start scroll from the top as well and continue reading #915

Closed

MadLittleMods added 8 commits November 2, 2022 22:32

Add a way to change the anchor position to the top of a node

c9859ff

This would be helpful for matrix-org/matrix-viewer#73

Re-add way to align scroll top to event

7602825

Add a way to highlight tiles

dc6ab45

Part of matrix-org/matrix-viewer#4

Add a way to scroll to the given highlighted event

ceca3d1

Fix tsc error

b84dd3b

Prevent messages nested in a reply from being highlighted

65ec71b

Add MXID as title tooltip

168788d

Add full MXID to message avatar/sender

847482f

MadLittleMods commented Nov 9, 2022

View reviewed changes

src/domain/session/room/timeline/tiles/BaseMessageTile.js Show resolved Hide resolved

MadLittleMods added 2 commits November 8, 2022 23:59

Fix AnnouncementView member events not highlighting

bb51174

Add different hover styles so it's more obvious if you page-load with…

07cc95c

… your cursor on that event

MadLittleMods commented Nov 10, 2022

View reviewed changes

src/platform/web/ui/session/room/timeline/BaseMessageView.js Show resolved Hide resolved

MadLittleMods added 2 commits November 10, 2022 13:37

Merge branch 'master' into madlittlemods/matrix-public-archive-scratc…

7c52de3

…h-changes Conflicts: src/domain/session/room/LightboxViewModel.js

Add copy permalink action

64b6ba1

MadLittleMods mentioned this pull request Nov 11, 2022

Add <dialog>, <details>, and <optgroup> HTML elements to use with templating #923

Merged

MadLittleMods commented Nov 11, 2022

View reviewed changes

src/platform/web/ui/general/html.ts Show resolved Hide resolved

MadLittleMods mentioned this pull request Nov 11, 2022

Add Copy permalink option to messages (matrix.to) matrix-org/matrix-viewer#136

Merged

1 task

Remove matrix.to link from message timestamp since we have an context…

72837d8

… menu option for it now

MadLittleMods mentioned this pull request Apr 26, 2023

Preload fonts and images matrix-org/matrix-viewer#187

Merged

1 task

MadLittleMods mentioned this pull request Apr 26, 2023

Update Hydrogen SDK dependency 0.26.0-scratch - 2023-04-26 matrix-org/matrix-viewer#189

Merged

2 tasks

Increase width to accomodate long dates with year like 'Wednesday, No…

987d27a

…vember 16, 2022'

MadLittleMods commented Apr 26, 2023

View reviewed changes

src/platform/web/ui/css/themes/element/timeline.css Show resolved Hide resolved

Add ApplyMap to exports

ba0eb55

MadLittleMods mentioned this pull request May 10, 2023

Accommodate long dates in sticky date headers #1078

Merged

MadLittleMods added 2 commits May 11, 2023 01:55

Add MXC URL's as data-attribute for easy reference

f1ec4d4

Useful to quickly grab the MXC URL's to quarantine media in moderation scenarios

Backport fix to make SDK depedencies available when npm linking

8034c53

via #1100

MadLittleMods commented May 26, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Draft: Scratch changes for `matrix-public-archive`#653

Draft: Scratch changes for `matrix-public-archive`#653
MadLittleMods wants to merge 71 commits intomasterfrom
madlittlemods/matrix-public-archive-scratch-changes

MadLittleMods commented Feb 2, 2022 •

edited

Loading

Uh oh!

Uh oh!

MadLittleMods Feb 9, 2022

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MadLittleMods Feb 12, 2022

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MadLittleMods May 26, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

MadLittleMods commented Feb 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Dev notes

Supporting the Node.js CommonJS environment (package.json exports)

package.json exports docs

Vite

Server-side render Hydrogen

Uh oh!

Uh oh!

MadLittleMods Feb 9, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MadLittleMods Feb 12, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

MadLittleMods May 26, 2023

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

MadLittleMods commented Feb 2, 2022 •

edited

Loading

Supporting the Node.js CommonJS environment (`package.json` `exports`)

`package.json` `exports` docs