Fix React import (#55)

* Fix React import

* Change default export

* Fix :visible dynamic component

* Use colon to alias vue createElement

Co-authored-by: Matthew Phillips <matthew@skypack.dev>

3 files changed, 5 insertions, 5 deletions

diff --git a/src/frontend/render/react.ts b/src/frontend/render/react.ts
index 7143516f6..bab1d582c 100644
--- a/src/frontend/render/react.ts
+++ b/src/frontend/render/react.ts
@@ -7,8 +7,8 @@ const ReactRenderer: Renderer = {
     return async (props, ...children) => ReactDOMServer.renderToString(React.createElement(Component, props, children));
   },
   imports: {
-    react: ['default as React'],
-    'react-dom': ['default as ReactDOM'],
+    react: ['default: React'],
+    'react-dom': ['default: ReactDOM'],
   },
   render({ Component, root, props }) {
     return `ReactDOM.render(React.createElement(${Component}, ${props}), ${root})`;
diff --git a/src/frontend/render/renderer.ts b/src/frontend/render/renderer.ts
index e0d1fccce..cff82eea5 100644
--- a/src/frontend/render/renderer.ts
+++ b/src/frontend/render/renderer.ts
@@ -43,7 +43,7 @@ export function createRenderer(renderer: Renderer) {
       } catch (e) {
         value = '';
       }
-      value = `<div style="display:contents;" data-astro-id="${innerContext['data-astro-id']}">${value}</div>`;
+      value = `<div data-astro-id="${innerContext['data-astro-id']}">${value}</div>`;
 
       return `${value}\n<script type="module">${typeof wrapperStart === 'function' ? wrapperStart(innerContext) : wrapperStart}\n${_imports(renderContext)}\n${renderer.render({
         ...innerContext,
@@ -57,7 +57,7 @@ export function createRenderer(renderer: Renderer) {
     load: createDynamicRender('(async () => {', '})()'),
     idle: createDynamicRender('requestIdleCallback(async () => {', '})'),
     visible: createDynamicRender(
-      'const o = new IntersectionObserver(async ([entry]) => { if (!entry.isIntersection) { return; } o.disconnect();',
+      'const o = new IntersectionObserver(async ([entry]) => { if (!entry.isIntersecting) { return; } o.disconnect();',
       ({ root }) => `}); o.observe(${root})`
     ),
   };
diff --git a/src/frontend/render/vue.ts b/src/frontend/render/vue.ts
index 3ffa4ed0d..69c00e570 100644
--- a/src/frontend/render/vue.ts
+++ b/src/frontend/render/vue.ts
@@ -18,7 +18,7 @@ const Vue: Renderer = {
     };
   },
   imports: {
-    vue: ['createApp', 'h as createElement'],
+    vue: ['createApp', 'h: createElement'],
   },
   render({ Component, root, props }) {
     return `const App = { render() { return createElement(${Component}, ${props} )} };