Support children inside of components (#72)

* chore(examples): add kitchen-sink

* feat: support children in rendered components

* feat: add support for rendering children in Svelte

* fix: cleanup p/react fragment children

* chore: add @ts-nocheck to svelte files

* chore: update lockfiles

* fix: types

* feat: memoize frontend/renderer/utils

* fix: disable eslint for compiled SvelteWrapper

* fix: add missing dep

Co-authored-by: Nate Moore <nate@skypack.dev>

1 files changed, 8 insertions, 3 deletions

diff --git a/src/frontend/render/react.ts b/src/frontend/render/react.ts
index 56c6decb0..ac812e9c1 100644
--- a/src/frontend/render/react.ts
+++ b/src/frontend/render/react.ts
@@ -2,17 +2,22 @@ import type { ComponentRenderer } from '../../@types/renderer';
 import React, { ComponentType } from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { createRenderer } from './renderer';
+import { childrenToVnodes } from './utils';
 
 const ReactRenderer: ComponentRenderer<ComponentType> = {
+  jsxPragma: React.createElement,
+  jsxPragmaName: 'React.createElement',
   renderStatic(Component) {
-    return async (props, ...children) => ReactDOMServer.renderToString(React.createElement(Component, props, children));
+    return async (props, ...children) => {
+      return ReactDOMServer.renderToString(React.createElement(Component, props, childrenToVnodes(React.createElement, children)));
+    }
   },
   imports: {
     react: ['default: React'],
     'react-dom': ['default: ReactDOM'],
   },
-  render({ Component, root, props }) {
-    return `ReactDOM.render(React.createElement(${Component}, ${props}), ${root})`;
+  render({ Component, root, children, props }) {
+    return `ReactDOM.hydrate(React.createElement(${Component}, ${props}, React.createElement(React.Fragment, null, ...${children})), ${root})`;
   },
 };