use own runtime

packages/example-project/component-library/package.json

@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@stencil/angular-output-target": "workspace:*",
-    "@stencil/core": "4.19.2-dev.1720817033.ad4ba40",
+    "@stencil/core": "4.19.2-dev.1721945383.1ecdb19",
     "@stencil/react-output-target": "workspace:*",
     "@stencil/vue-output-target": "workspace:*",
     "@types/puppeteer": "2.0.1",

packages/example-project/component-library/stencil.config.ts

@@ -72,6 +72,7 @@ export const config: Config = {
     }),
     {
       type: 'dist-custom-elements',
+      externalRuntime: false,
       dir: 'components'
     },
     {

packages/example-project/next-app/src/app/Button/Button.tsx

@@ -8,7 +8,7 @@ function Button() {
   const [inputEvent, setInputEvent] = useState<number>(0);
   return (
     <>
-      <MyButton href="#" onClick={(e) => setInputEvent(inputEvent + 1)}>
+      <MyButton href="#" onClick={() => setInputEvent(inputEvent + 1)}>
         Click me <b>now</b>!
         <MyComponent first="Stencil" last="'Don't call me a framework' JS">Hello</MyComponent>
       </MyButton>

packages/react-output-target/src/react/ssr.tsx

@@ -49,7 +49,7 @@ export const createComponentForServerSideRendering = <I extends HTMLElement, E e
 
     let stringProps = '';
     for (const [key, value] of Object.entries(props)) {
-      if ((typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean')) {
+      if (typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean') {
         continue;
       }
       stringProps += ` ${key}="${value}"`;
@@ -92,13 +92,14 @@ export const createComponentForServerSideRendering = <I extends HTMLElement, E e
     /**
      * cut out the inner content of the component
      */
-    const [__html, hydrationComment] = html
-      .slice(startTag.length, -endTag.length)
-      .replace('<template shadowrootmode="open">', '')
-      .split('</template>');
-    if (!__html) {
-      throw new Error('No HTML returned from renderToString');
-    }
+    const templateStartTag = '<template shadowrootmode="open">';
+    const templateEndTag = '</template>';
+    const hydrationComment = '<!--r.1-->';
+    const __html = html.slice(startTag.length, -endTag.length).startsWith(templateStartTag)
+      ? html
+          .slice(startTag.length, -endTag.length)
+          .slice(templateStartTag.length, -(templateEndTag + hydrationComment).length)
+      : html.slice(startTag.length, -endTag.length);
 
     /**
      * `html-react-parser` is a Node.js dependency so we should make sure to only import it when run on the server
@@ -117,11 +118,16 @@ export const createComponentForServerSideRendering = <I extends HTMLElement, E e
              * remove the outer tag (e.g. `options.tagName`) so we only have the inner content
              */
             const CustomTag = `${options.tagName}`;
-            return <CustomTag {...props}>
-              {/* @ts-expect-error */}
-              <template shadowrootmode="open" dangerouslySetInnerHTML={{ __html: (hydrationComment || '') + __html! }}></template>
-              {children}
-            </CustomTag>;
+            return (
+              <CustomTag {...props}>
+                <template
+                  // @ts-expect-error
+                  shadowrootmode="open"
+                  dangerouslySetInnerHTML={{ __html: hydrationComment + __html }}
+                ></template>
+                {children}
+              </CustomTag>
+            );
           }
 
           return;
@@ -131,4 +137,3 @@ export const createComponentForServerSideRendering = <I extends HTMLElement, E e
     return <StencilElement />;
   }) as unknown as ReactWebComponent<I, E>;
 };
-