From 004b3ea6a0b48ecc04d2a0daf9aae374983bed08 Mon Sep 17 00:00:00 2001
From: Drew Powers <1369770+drwpow@users.noreply.github.com>
Date: Fri, 2 Apr 2021 12:48:41 -0600
Subject: [PATCH] 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>
---
 src/compiler/codegen.ts         | 4 ++--
 src/frontend/render/react.ts    | 4 ++--
 src/frontend/render/renderer.ts | 4 ++--
 src/frontend/render/vue.ts      | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/compiler/codegen.ts b/src/compiler/codegen.ts
index 2486ef92f..0447cbdc7 100644
--- a/src/compiler/codegen.ts
+++ b/src/compiler/codegen.ts
@@ -170,7 +170,7 @@ function getComponentWrapper(_name: string, { type, plugin, url }: ComponentInfo
     case 'react': {
       if (['load', 'idle', 'visible'].includes(kind)) {
         return {
-          wrapper: `__preact_${kind}(${name}, ${JSON.stringify({
+          wrapper: `__react_${kind}(${name}, ${JSON.stringify({
             componentUrl: getComponentUrl(),
             componentExport: 'default',
             frameworkUrls: {
@@ -178,7 +178,7 @@ function getComponentWrapper(_name: string, { type, plugin, url }: ComponentInfo
               'react-dom': dynamicImports.get('react-dom'),
             },
           })})`,
-          wrapperImport: `import {__preact_${kind}} from '${internalImport('render/preact.js')}';`,
+          wrapperImport: `import {__react_${kind}} from '${internalImport('render/react.js')}';`,
         };
       }
 
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} )} };