michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix React import (#55)

Browse source 
* Fix React import

* Change default export

* Fix :visible dynamic component

* Use colon to alias vue createElement

Co-authored-by: Matthew Phillips <matthew@skypack.dev>
This commit is contained in:
Drew Powers 2021-04-02 12:48:41 -06:00 committed by GitHub
parent 5a1f422883
commit 004b3ea6a0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/compiler/codegen.ts
View file

@ -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')}';`,
};
}

4
src/frontend/render/react.ts
View file

@ -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})`;

4
src/frontend/render/renderer.ts
View file

@ -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})`
),
};

2
src/frontend/render/vue.ts
View file

@ -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} )} };