fix: decide hydrateOptions at runtime (#257)

* Change: decide hydrateOptions at runtime * Fix: typing
Elderjs · Nov 6, 2022 · 6d2cd15 · 6d2cd15
1 parent 162972c
commit 6d2cd15
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 30 deletions.
diff --git a/src/partialHydration/__tests__/inlineSvelteComponent.spec.ts b/src/partialHydration/__tests__/inlineSvelteComponent.spec.ts
@@ -12,16 +12,14 @@ test('#inlinePreprocessedSvelteComponent', () => {
   expect(
     inlinePreprocessedSvelteComponent({
       name: 'Home',
-      props: {
-        welcomeText: 'Hello World',
-      },
+      props: '{welcomeText: "Hello World"}',
       options,
     }),
-  ).toEqual(
-    `<div class="ejs-component" data-ejs-component="Home" data-ejs-props={JSON.stringify([object Object])} data-ejs-options={JSON.stringify({"loading":"lazy","element":"div"})} />`,
+  ).toMatchInlineSnapshot(
+    `"<ejswrapper class=\\"ejs-component\\" data-ejs-component=\\"Home\\" data-ejs-props={JSON.stringify({welcomeText: \\"Hello World\\"})} data-ejs-options={JSON.stringify({...{\\"loading\\":\\"lazy\\",\\"element\\":\\"div\\"}, ...{\\"loading\\":\\"lazy\\"}})} />"`,
   );
-  expect(inlinePreprocessedSvelteComponent({})).toEqual(
-    `<div class="ejs-component" data-ejs-component="" data-ejs-props={JSON.stringify([object Object])} data-ejs-options={JSON.stringify({"loading":"lazy","element":"div"})} />`,
+  expect(inlinePreprocessedSvelteComponent({})).toMatchInlineSnapshot(
+    `"<ejswrapper class=\\"ejs-component\\" data-ejs-component=\\"\\" data-ejs-props={JSON.stringify()} data-ejs-options={JSON.stringify({\\"loading\\":\\"lazy\\",\\"element\\":\\"div\\"})} />"`,
   );
 });
 
@@ -37,10 +35,10 @@ test('#inlineSvelteComponent', () => {
       },
       options,
     }),
-  ).toEqual(
-    `<div class="ejs-component" data-ejs-component="Home" data-ejs-props="{&quot;welcomeText&quot;:&quot;Hello World&quot;}" data-ejs-options="{&quot;loading&quot;:&quot;lazy&quot;,&quot;element&quot;:&quot;div&quot;}"></div>`,
+  ).toMatchInlineSnapshot(
+    `"<div class=\\"ejs-component\\" data-ejs-component=\\"Home\\" data-ejs-props=\\"{&quot;welcomeText&quot;:&quot;Hello World&quot;}\\" data-ejs-options=\\"{&quot;loading&quot;:&quot;lazy&quot;,&quot;element&quot;:&quot;div&quot;}\\"></div>"`,
   );
-  expect(inlineSvelteComponent({})).toEqual(
-    `<div class="ejs-component" data-ejs-component="" data-ejs-props="{}" data-ejs-options="{&quot;loading&quot;:&quot;lazy&quot;,&quot;element&quot;:&quot;div&quot;}"></div>`,
+  expect(inlineSvelteComponent({})).toMatchInlineSnapshot(
+    `"<div class=\\"ejs-component\\" data-ejs-component=\\"\\" data-ejs-props=\\"{}\\" data-ejs-options=\\"{&quot;loading&quot;:&quot;lazy&quot;,&quot;element&quot;:&quot;div&quot;}\\"></div>"`,
   );
 });
diff --git a/src/partialHydration/__tests__/partialHydration.spec.ts b/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(
+      `"<ejswrapper class=\\"ejs-component\\" data-ejs-component=\\"DatePicker\\" data-ejs-props={JSON.stringify({ a: \\"b\\" })} data-ejs-options={JSON.stringify({\\"loading\\":\\"lazy\\",\\"element\\":\\"div\\"})} />"`,
     );
   });
 
@@ -20,8 +20,8 @@ describe('#partialHydration', () => {
           content: '<DatePicker hydrate-client={{ a: "c" }} hydrate-options={{ "loading": "lazy" }}/>',
         })
       ).code,
-    ).toEqual(
-      `<div class="ejs-component" data-ejs-component="DatePicker" data-ejs-props={JSON.stringify({ a: "c" })} data-ejs-options={JSON.stringify({"loading":"lazy","element":"div"})} />`,
+    ).toMatchInlineSnapshot(
+      `"<ejswrapper class=\\"ejs-component\\" data-ejs-component=\\"DatePicker\\" data-ejs-props={JSON.stringify({ a: \\"c\\" })} data-ejs-options={JSON.stringify({...{\\"loading\\":\\"lazy\\",\\"element\\":\\"div\\"}, ...{ \\"loading\\": \\"lazy\\" }})} />"`,
     );
   });
 
@@ -32,8 +32,8 @@ describe('#partialHydration', () => {
           content: '<DatePicker hydrate-client={{ a: "c" }} hydrate-options={{ "timeout": 2000 }}/>',
         })
       ).code,
-    ).toEqual(
-      `<div class="ejs-component" data-ejs-component="DatePicker" data-ejs-props={JSON.stringify({ a: "c" })} data-ejs-options={JSON.stringify({"loading":"lazy","element":"div","timeout":2000})} />`,
+    ).toMatchInlineSnapshot(
+      `"<ejswrapper class=\\"ejs-component\\" data-ejs-component=\\"DatePicker\\" data-ejs-props={JSON.stringify({ a: \\"c\\" })} data-ejs-options={JSON.stringify({...{\\"loading\\":\\"lazy\\",\\"element\\":\\"div\\"}, ...{ \\"timeout\\": 2000 }})} />"`,
     );
   });
 
@@ -44,8 +44,8 @@ describe('#partialHydration', () => {
           content: '<DatePicker hydrate-client={{ a: "b" }} hydrate-options={{ "loading": "eager" }} />',
         })
       ).code,
-    ).toEqual(
-      `<div class="ejs-component" data-ejs-component="DatePicker" data-ejs-props={JSON.stringify({ a: "b" })} data-ejs-options={JSON.stringify({"loading":"eager","element":"div"})} />`,
+    ).toMatchInlineSnapshot(
+      `"<ejswrapper class=\\"ejs-component\\" data-ejs-component=\\"DatePicker\\" data-ejs-props={JSON.stringify({ a: \\"b\\" })} data-ejs-options={JSON.stringify({...{\\"loading\\":\\"lazy\\",\\"element\\":\\"div\\"}, ...{ \\"loading\\": \\"eager\\" }})} />"`,
     );
   });
   it('eager, root margin, threshold', async () => {
@@ -56,8 +56,8 @@ describe('#partialHydration', () => {
             '<DatePicker hydrate-client={{ a: "b" }} hydrate-options={{ "loading": "eager", "rootMargin": "500px", "threshold": 0 }} />',
         })
       ).code,
-    ).toEqual(
-      `<div class="ejs-component" data-ejs-component="DatePicker" data-ejs-props={JSON.stringify({ a: "b" })} data-ejs-options={JSON.stringify({"loading":"eager","element":"div","rootMargin":"500px","threshold":0})} />`,
+    ).toMatchInlineSnapshot(
+      `"<ejswrapper class=\\"ejs-component\\" data-ejs-component=\\"DatePicker\\" data-ejs-props={JSON.stringify({ a: \\"b\\" })} data-ejs-options={JSON.stringify({...{\\"loading\\":\\"lazy\\",\\"element\\":\\"div\\"}, ...{ \\"loading\\": \\"eager\\", \\"rootMargin\\": \\"500px\\", \\"threshold\\": 0 }})} />"`,
     );
   });
   it('open string', async () => {
@@ -67,7 +67,7 @@ describe('#partialHydration', () => {
           content: '<DatePicker hydrate-client="string />',
         })
       ).code,
-    ).toEqual(`<DatePicker hydrate-client="string />`);
+    ).toMatchInlineSnapshot(`"<DatePicker hydrate-client=\\"string />"`);
   });
   it('text within component', async () => {
     await expect(async () => {
@@ -105,8 +105,8 @@ describe('#partialHydration', () => {
           content: `<Clock hydrate-client={{}} hydrate-options={{ "loading": "eager", "preload": true }} /><Block hydrate-client={{}} hydrate-options={{ "loading": "lazy" }} /><Alock hydrate-client={{}} hydrate-options={{ "loading": "lazy" }} />`,
         })
       ).code,
-    ).toEqual(
-      `<div class="ejs-component" data-ejs-component="Clock" data-ejs-props={JSON.stringify({})} data-ejs-options={JSON.stringify({"loading":"eager","element":"div","preload":true})} /><div class="ejs-component" data-ejs-component="Block" data-ejs-props={JSON.stringify({})} data-ejs-options={JSON.stringify({"loading":"lazy","element":"div"})} /><div class="ejs-component" data-ejs-component="Alock" data-ejs-props={JSON.stringify({})} data-ejs-options={JSON.stringify({"loading":"lazy","element":"div"})} />`,
+    ).toMatchInlineSnapshot(
+      `"<ejswrapper class=\\"ejs-component\\" data-ejs-component=\\"Clock\\" data-ejs-props={JSON.stringify({})} data-ejs-options={JSON.stringify({...{\\"loading\\":\\"lazy\\",\\"element\\":\\"div\\"}, ...{ \\"loading\\": \\"eager\\", \\"preload\\": true }})} /><ejswrapper class=\\"ejs-component\\" data-ejs-component=\\"Block\\" data-ejs-props={JSON.stringify({})} data-ejs-options={JSON.stringify({...{\\"loading\\":\\"lazy\\",\\"element\\":\\"div\\"}, ...{ \\"loading\\": \\"lazy\\" }})} /><ejswrapper class=\\"ejs-component\\" data-ejs-component=\\"Alock\\" data-ejs-props={JSON.stringify({})} data-ejs-options={JSON.stringify({...{\\"loading\\":\\"lazy\\",\\"element\\":\\"div\\"}, ...{ \\"loading\\": \\"lazy\\" }})} />"`,
     );
   });
 });
diff --git a/src/partialHydration/inlineSvelteComponent.ts b/src/partialHydration/inlineSvelteComponent.ts
@@ -16,18 +16,20 @@ export function escapeHtml(text: string): string {
 
 type InputParamsInlinePreprocessedSvelteComponent = {
   name?: string;
-  props?: any;
+  props?: string;
   options?: string;
 };
 
 export function inlinePreprocessedSvelteComponent({
   name = '',
-  props = {},
+  props = '',
   options = '',
 }: InputParamsInlinePreprocessedSvelteComponent): string {
-  const hydrationOptions =
-    options.length > 0 ? { ...defaultHydrationOptions, ...JSON.parse(options) } : defaultHydrationOptions;
-  const hydrationOptionsString = JSON.stringify(hydrationOptions);
+  // FIXME: don't output default options into the component to reduce file size.
+  const hydrationOptionsString =
+    options.length > 0
+      ? `{...${JSON.stringify(defaultHydrationOptions)}, ...${options}}`
+      : JSON.stringify(defaultHydrationOptions);
 
   const replacementAttrs = {
     class: '"ejs-component"',
@@ -39,7 +41,7 @@ export function inlinePreprocessedSvelteComponent({
     (out, [key, value]) => `${out} ${key}=${value}`,
     '',
   );
-  return `<${hydrationOptions.element}${replacementAttrsString} />`;
+  return `<ejswrapper${replacementAttrsString} />`;
 }
 
 type InputParamsInlineSvelteComponent = {