Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Draft
wants to merge 71 commits into
base: master
Choose a base branch
from

Conversation

MadLittleMods
Copy link
Contributor

@MadLittleMods MadLittleMods commented Feb 2, 2022

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

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
    • yarn run vite build -c vite.sdk-lib-config.js --watch
  2. Some random changes to accomodate using raw EventEntry's

Dev notes

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

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
@MadLittleMods MadLittleMods marked this pull request as draft February 2, 2022 07:11
// 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) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes emoji reactions show up on messages.

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

MadLittleMods added a commit that referenced this pull request Feb 12, 2022
…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.
@@ -57,7 +58,7 @@ export class RoomView extends TemplateView {
new TimelineView(timelineViewModel) :
new TimelineLoadingView(vm); // vm is just needed for i18n
}),
t.view(bottomView),
bottomView ? t.view(bottomView) : text(''),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
```
MadLittleMods added a commit that referenced this pull request Feb 25, 2022
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.
See #653 (comment)

We can allow this to run now since I added support for `setProperty` in `linkedom` ⏩ WebReflection/linkedom#114
MadLittleMods added a commit that referenced this pull request Feb 25, 2022
…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
…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
Useful to quickly grab the MXC URL's to quarantine media in moderation scenarios
Comment on lines +15 to +19
pushd target/
# Make sure the dependencies are available for any consuming project that uses
# `npm link hydrogen-view-sdk`
yarn install --no-lockfile
popd
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Split off to #1100

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant