Fix: allow numbers in tag name (#261)

Elderjs · Nov 21, 2022 · 6dae253 · 6dae253
1 parent 6d2cd15
commit 6dae253
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/partialHydration/__tests__/partialHydration.spec.ts b/src/partialHydration/__tests__/partialHydration.spec.ts
@@ -13,6 +13,18 @@ describe('#partialHydration', () => {
     );
   });
 
+  it('allow numbers in the tag name', async () => {
+    expect(
+      (
+        await partialHydration.markup({
+          content: '<DatePicker2 hydrate-client={{ a: "b" }} />',
+        })
+      ).code,
+    ).toMatchInlineSnapshot(
+      `"<ejswrapper class=\\"ejs-component\\" data-ejs-component=\\"DatePicker2\\" data-ejs-props={JSON.stringify({ a: \\"b\\" })} data-ejs-options={JSON.stringify({\\"loading\\":\\"lazy\\",\\"element\\":\\"div\\"})} />"`,
+    );
+  });
+
   it('explicit lazy', async () => {
     expect(
       (

diff --git a/src/partialHydration/partialHydration.ts b/src/partialHydration/partialHydration.ts
@@ -18,7 +18,7 @@ const createReplacementString = ({ input, name, props }) => {
 export const preprocessSvelteContent = (content) => {
   // Note: this regex only supports self closing components.
   // Slots aren't supported for client hydration either.
-  const hydrateableComponentPattern = /<([a-zA-Z]+)[^>]+hydrate-client={([^]*?})}[^/>]*\/>/gim;
+  const hydrateableComponentPattern = /<([a-zA-Z\d]+)\b[^>]+\bhydrate-client={([^]*?})}[^/>]*\/>/gim;
   const matches = [...content.matchAll(hydrateableComponentPattern)];
 
   const output = matches.reduce((out, match) => {