Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-10 23:01:26 -05:00
Code Issues 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': { case 'react': {
if (['load', 'idle', 'visible'].includes(kind)) { if (['load', 'idle', 'visible'].includes(kind)) {
return { return {
wrapper: `__preact_${kind}(${name}, ${JSON.stringify({ wrapper: `__react_${kind}(${name}, ${JSON.stringify({
componentUrl: getComponentUrl(), componentUrl: getComponentUrl(),
componentExport: 'default', componentExport: 'default',
frameworkUrls: { frameworkUrls: {
@ -178,7 +178,7 @@ function getComponentWrapper(_name: string, { type, plugin, url }: ComponentInfo
'react-dom': dynamicImports.get('react-dom'), '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)); return async (props, ...children) => ReactDOMServer.renderToString(React.createElement(Component, props, children));
}, },
imports: { imports: {
react: ['default as React'], react: ['default: React'],
'react-dom': ['default as ReactDOM'], 'react-dom': ['default: ReactDOM'],
}, },
render({ Component, root, props }) { render({ Component, root, props }) {
return `ReactDOM.render(React.createElement(${Component}, ${props}), ${root})`; 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) { } catch (e) {
value = ''; 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({ return `${value}\n<script type="module">${typeof wrapperStart === 'function' ? wrapperStart(innerContext) : wrapperStart}\n${_imports(renderContext)}\n${renderer.render({
...innerContext, ...innerContext,
@ -57,7 +57,7 @@ export function createRenderer(renderer: Renderer) {
load: createDynamicRender('(async () => {', '})()'), load: createDynamicRender('(async () => {', '})()'),
idle: createDynamicRender('requestIdleCallback(async () => {', '})'), idle: createDynamicRender('requestIdleCallback(async () => {', '})'),
visible: createDynamicRender( 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})` ({ root }) => `}); o.observe(${root})`
), ),
}; };

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

@ -18,7 +18,7 @@ const Vue: Renderer = {
}; };
}, },
imports: { imports: {
vue: ['createApp', 'h as createElement'], vue: ['createApp', 'h: createElement'],
}, },
render({ Component, root, props }) { render({ Component, root, props }) {
return `const App = { render() { return createElement(${Component}, ${props} )} }; return `const App = { render() { return createElement(${Component}, ${props} )} };