Enhance: use html parser in preprocessor #240

eight04 · 2022-03-04T14:08:44Z

Fixes #226
Fixes #227
Fixes #233

Noticeable changes:

Now you can mark component as client without adding an empty value e.g. <DatePicker hydrate-client />.
hydrate-options is determined at render time hence 1.6.5 Unexpected token l in JSON at position 2 #227 is resolved.
Support style-props (Cannot apply style props to client components #233).

eight04 · 2022-03-04T14:09:50Z

src/partialHydration/__tests__/inlineSvelteComponent.spec.ts

@@ -1,11 +1,4 @@
-import { inlinePreprocessedSvelteComponent, escapeHtml, inlineSvelteComponent } from '../inlineSvelteComponent';
-
-test('#escapeHtml', () => {


escapeHtml and replaceSpecialCharacters are moved to htmlParser.ts.

eight04 · 2022-03-04T14:10:30Z

src/partialHydration/__tests__/partialHydration.spec.ts

@@ -8,8 +8,8 @@ describe('#partialHydration', () => {
          content: '<DatePicker hydrate-client={{ a: "b" }} />',
        })
      ).code,
-    ).toEqual(
-      `<div class="ejs-component" data-ejs-component="DatePicker" data-ejs-props={JSON.stringify({ a: "b" })} data-ejs-options={JSON.stringify({"loading":"lazy","element":"div"})} />`,
+    ).toMatchInlineSnapshot(


Switch to inline snapshot so it is easier to update.

eight04 · 2022-03-04T14:12:51Z

src/partialHydration/__tests__/partialHydration.spec.ts

+    await expect(async () => {
+      await partialHydration.markup({
+        content: '<DatePicker hydrate-client="string />',
+      });
+    }).rejects.toThrow();


This is not valid svelte syntax so I just let preprocessor throw.

eight04 · 2022-03-04T14:16:16Z

src/partialHydration/mountComponentsInHtml.ts

@@ -50,6 +41,8 @@ export default function mountComponentsInHtml({ page, html, hydrateOptions }): s
      page,
      props: hydrateComponentProps,
      hydrateOptions: hydrateComponentOptions,
+      otherAttributes: match[5],
+      openTagOnly: !match[6]


Currently, we check whether the wrapper closes immediately to decide if the component has to be rendered again (i.e. shortcode component).

This doesn't work if the component renders into an empty string. Though it shouldn't harm either.

eight04 · 2022-03-04T14:24:54Z

src/partialHydration/partialHydration.ts

+    }
+  }
+  const spreadClientProps = clientProps ? ` {...(${clientProps})}` : '';
+  // FIXME: it should be possible to merge three attributes into one


Ideally, we should be able to generate simpler code in the preprocessor e.g.

`<div ejs-component=${stringifyExpression(`["${tag.name}",${clientProps},${options}]`)}>`

Then we just have to search for ejs-component to extract all information in mountComponentsInHtml.ts.

Definitely. This would be a huge simplification.

eight04 · 2022-03-04T14:31:45Z

src/partialHydration/partialHydration.ts

+  }
+  const spreadClientProps = clientProps ? ` {...(${clientProps})}` : '';
+  // FIXME: it should be possible to merge three attributes into one
+  // FIXME: use hydrateOptions.element instead of 'div'


hydrateOptions.element no longer works in this PR. I didn't find the document for it so I'm not sure how to implement it correctly.

If this is needed, we can try to find the element via regex:

const rx = /\belement['"]?\s*:\s*['"]([^'"]+)/i; const element = options.match(rx)?.[1];

This will work if the options is written in the source:

hydrate-options={{element: "span"}} hydrate-options={{"element": "span"}}

But won't work in other cases:

<script> const o = {element: 'span'}; </script> <Component hydrate-client hydrate-options={o} />

hydrate-options={{element: "span"}} hydrate-options={{"element": "span"}}

This was the implementation.

Another solution is to use a special tag e.g.

<ejswrapper ... ></ejswrapper>

And replace it with the real tag name in mountComponentsInHtml

@eight04 Not strongly opinionated either way. Whatever you think is best.

eight04 · 2022-03-04T14:34:07Z

src/partialHydration/partialHydration.ts

+    const repl = createReplacementString(content, tag);
+    s.overwrite(tag.start, tag.end, repl);
+    dirty = true;
+  }

  const wrappingComponentPattern = /<([a-zA-Z]+)[^>]+hydrate-client={([^]*?})}[^/>]*>[^>]*<\/([a-zA-Z]+)>/gim;


We may not need this anymore?

eight04 · 2022-03-04T14:41:10Z

It seems that there is a linting error that requires changing dependencies:

Error:    1:1   error  'magic-string' should be listed in the project's dependencies. Run 'npm i -S magic-string' to add it                                                     import/no-extraneous-dependencies

nickreese · 2022-03-06T13:06:30Z

@eight04 I am a bit unclear on how "server props" are getting passed into the SSR call on svelteComponent.ts.

nickreese · 2022-03-06T13:32:04Z

src/partialHydration/partialHydration.ts

-    );
+  let dirty = false;
+  const hydrateableComponentPattern = /<([a-zA-Z]+)[^>]+hydrate-client/gim;
+  const s = new MagicString(content);


Great work here. Huge simplification.

nickreese · 2022-03-06T13:33:04Z

@eight04 looks good to me once we sort out how to get the ssrProps passed in and if this is something we want to do. I agree that there should be props that are SSR but don't need to get hydrated. This is a problem we've faced before.

eight04 · 2022-03-07T08:53:30Z

Yeah I think the current state of SSR props is not ideal. I will revert those changes. Currently it is built on svelte syntax, hence it will only work with svelte component, which against #237 (comment).

We should probably introduce a new attribute like hydrate-server={} which overwrites hydrate-client e.g.

<Foo hydrate-client={{a: 1, b: 2}} hydrate-server={{a: 2}} />
<!--
ssr will get {a: 2, b: 2}
client will get {a: 1, b: 2}
-->

Maybe to discuss ssr props further in #234.

Still WIP. Things need to be done in this PR:

Revert changes to SSR props.
Implment options.element aka <ejswrapper>.
Switch to ejs-mount directive.

eight04 · 2022-03-08T12:41:11Z

src/Elder.ts

@@ -33,7 +33,7 @@ import {
 } from './utils/types';
 import createReadOnlyProxy from './utils/createReadOnlyProxy';
 import workerBuild from './workerBuild';
-import { inlineSvelteComponent } from './partialHydration/inlineSvelteComponent';
+import { inlineComponent } from './partialHydration/inlineComponent';


Rename inlineSvelteComponent to inlineComponent.

eight04 · 2022-03-08T12:44:31Z

src/partialHydration/__tests__/mountComponentsInHtml.spec.ts

+          "id": "0",
+          "name": "0",


It seems that the target ID is duplicated. Should we remove one of them?

eight04 · 2022-03-08T12:47:16Z

src/partialHydration/hydrateComponents.ts

        initComponent(entry.target,selected)
      }
    });
  }, { rootMargin: "200px",threshold: 0}) : undefined;`
      : ''
  }
  Object.keys(par).forEach(k => {
-    const el = document.getElementById(k);
+    const el = document.querySelector(\`[ejs-id="\${k}"]\`);


Use ejs-id to target the mount target.

eight04 · 2022-03-08T13:11:13Z

src/utils/Page.ts

@@ -220,6 +220,8 @@ class Page {

  componentsToHydrate: IComponentToHydrate[];

+  getUniqueId = prepareGetUniqueId();


A new method is added. It generates ID incrementally so we don't have to deal with random ID in the test and generate reproducible build.

eight04 · 2022-03-08T13:13:09Z

src/utils/__tests__/svelteComponent.spec.ts

@@ -76,7 +76,7 @@ describe('#svelteComponent', () => {
    expect(home(componentProps)).toEqual(`<div class="svelte-home">mock html output</div>`);
  });

-  it('svelteComponent works with partial hydration of subcomponent', () => {
+  it.skip('svelteComponent works with partial hydration of subcomponent', () => {


We will probably remove svelteComponent in another PR so I didn't fix these tests.

eight04 added 9 commits March 4, 2022 14:47

Add: a smaall html tag parser

8524dd4

Change: use html parser for preprocess

23ddb74

Fix: pass props to ssr component

bc34819

Fix: failed mounting

765af2e

Fix: typing issue

afb01e4

Fix: hydrateOptions.element can be undefined

e9e1fe5

Change: generate simpler output

70c9b40

Change: support empty props

9b00c02

Fix: allow empty props/options

4c025b7

eight04 commented Mar 4, 2022

View reviewed changes

eight04 added 2 commits March 5, 2022 15:39

Fix: respect linter

20761ab

Fix: remove duplicated logic

e5cbe3f

nickreese mentioned this pull request Mar 6, 2022

Support hydratable actions #237

Open

nickreese reviewed Mar 6, 2022

View reviewed changes

eight04 added 5 commits March 8, 2022 16:59

Change: switch to ejs-mount, support element, drop ssr props

7a1cee4

Fix: don't generate undefined id

f1f1834

Revert svelteComponent

bd64afb

Change: inlineSvelteComponent -> inlineComponent. Switch to ejswrapper

4012327

Fix: loader, add component class

f128807

eight04 commented Mar 8, 2022

View reviewed changes

Fix: pass linter

7276e16

eight04 closed this Nov 6, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enhance: use html parser in preprocessor #240

Enhance: use html parser in preprocessor #240

eight04 commented Mar 4, 2022 •

edited

eight04 Mar 4, 2022

eight04 Mar 4, 2022

eight04 Mar 4, 2022

eight04 Mar 4, 2022

eight04 Mar 4, 2022

nickreese Mar 5, 2022

eight04 Mar 4, 2022

nickreese Mar 5, 2022

eight04 Mar 6, 2022

nickreese Mar 6, 2022

eight04 Mar 4, 2022

eight04 commented Mar 4, 2022

nickreese commented Mar 6, 2022

nickreese Mar 6, 2022

nickreese commented Mar 6, 2022

eight04 commented Mar 7, 2022

eight04 Mar 8, 2022

eight04 Mar 8, 2022

eight04 Mar 8, 2022

eight04 Mar 8, 2022

eight04 Mar 8, 2022

		@@ -1,11 +1,4 @@
		import { inlinePreprocessedSvelteComponent, escapeHtml, inlineSvelteComponent } from '../inlineSvelteComponent';

		test('#escapeHtml', () => {

		@@ -220,6 +220,8 @@ class Page {

		componentsToHydrate: IComponentToHydrate[];

		getUniqueId = prepareGetUniqueId();

Enhance: use html parser in preprocessor #240

Enhance: use html parser in preprocessor #240

Conversation

eight04 commented Mar 4, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eight04 commented Mar 4, 2022

nickreese commented Mar 6, 2022

Choose a reason for hiding this comment

nickreese commented Mar 6, 2022

eight04 commented Mar 7, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eight04 commented Mar 4, 2022 •

edited