Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

[ci] format

Browse source
This commit is contained in:
matthewp 2023-08-16 17:44:01 +00:00 committed by astrobot-houston
parent 16a3fdf931
commit fb31ce55d9
5 changed files with 52 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/integrations/react/README.md
View file

@ -80,7 +80,7 @@ import ReactComponent from './ReactComponent';
</ReactComponent>
```
If you are using a library that *expects* more than one child element element to be passed, for example so that it can slot certain elements in different places, you might find this to be a blocker.
If you are using a library that _expects_ more than one child element element to be passed, for example so that it can slot certain elements in different places, you might find this to be a blocker.
You can set the experimental flag `experimentalReactChildren` to tell Astro to always pass children to React as React vnodes. There is some runtime cost to this, but it can help with compatibility.
@ -96,8 +96,8 @@ export default defineConfig({
integrations: [
react({
experimentalReactChildren: true,
})
],
}),
],
});
```

2
packages/integrations/react/server.js
View file

@ -87,7 +87,7 @@ async function renderToStaticMarkup(Component, props, { default: children, ...sl
};
const newChildren = children ?? props.children;
if (children && opts.experimentalReactChildren) {
const convert = await import('./vnode-children.js').then(mod => mod.default);
const convert = await import('./vnode-children.js').then((mod) => mod.default);
newProps.children = convert(children);
} else if (newChildren != null) {
newProps.children = React.createElement(StaticHtml, {

20
packages/integrations/react/src/index.ts
View file

@ -40,22 +40,22 @@ function getRenderer() {
function optionsPlugin(experimentalReactChildren: boolean): vite.Plugin {
const virtualModule = 'astro:react:opts';
const virtualModuleId = '\0' + virtualModule;
return {
return {
name: '@astrojs/react:opts',
resolveId(id) {
if(id === virtualModule) {
if (id === virtualModule) {
return virtualModuleId;
}
},
load(id) {
if(id === virtualModuleId) {
if (id === virtualModuleId) {
return {
code: `export default {
experimentalReactChildren: ${JSON.stringify(experimentalReactChildren)}
}`
}`,
};
}
}
},
};
}
@ -93,17 +93,17 @@ function getViteConfiguration(experimentalReactChildren: boolean) {
'use-immer',
],
},
plugins: [
optionsPlugin(experimentalReactChildren)
]
plugins: [optionsPlugin(experimentalReactChildren)],
};
}
export type ReactIntegrationOptions = {
experimentalReactChildren: boolean;
}
};
export default function ({ experimentalReactChildren }: ReactIntegrationOptions = { experimentalReactChildren: false }): AstroIntegration {
export default function (
{ experimentalReactChildren }: ReactIntegrationOptions = { experimentalReactChildren: false }
): AstroIntegration {
return {
name: '@astrojs/react',
hooks: {

8
packages/integrations/react/test/react-component.test.js
View file

@ -51,7 +51,9 @@ describe('React Components', () => {
// test 10: Should properly render children passed as props
const islandsWithChildren = $('.with-children');
expect(islandsWithChildren).to.have.lengthOf(2);
expect($(islandsWithChildren[0]).html()).to.equal($(islandsWithChildren[1]).find('astro-slot').html());
expect($(islandsWithChildren[0]).html()).to.equal(
$(islandsWithChildren[1]).find('astro-slot').html()
);
// test 11: Should generate unique React.useId per island
const islandsWithId = $('.react-use-id');
@ -103,8 +105,8 @@ describe('React Components', () => {
it('Children are parsed as React components, can be manipulated', async () => {
const html = await fixture.readFile('/children/index.html');
const $ = cheerioLoad(html);
expect($(".with-children-count").text()).to.equal('2');
})
expect($('.with-children-count').text()).to.equal('2');
});
});
if (isWindows) return;

63
packages/integrations/react/vnode-children.js
View file

@ -1,38 +1,37 @@
import { parse, walkSync, DOCUMENT_NODE, ELEMENT_NODE, TEXT_NODE } from 'ultrahtml'
import { parse, walkSync, DOCUMENT_NODE, ELEMENT_NODE, TEXT_NODE } from 'ultrahtml';
import { createElement, Fragment } from 'react';
export default function convert(children) {
const nodeMap = new WeakMap();
let doc = parse(children.toString().trim());
let root = createElement(Fragment, { children: [] });
const nodeMap = new WeakMap();
let doc = parse(children.toString().trim());
let root = createElement(Fragment, { children: [] });
walkSync(doc, (node, parent, index) => {
let newNode = {};
if (node.type === DOCUMENT_NODE) {
nodeMap.set(node, root);
} else if (node.type === ELEMENT_NODE) {
const { class: className, ...props } = node.attributes;
newNode = createElement(node.name, { ...props, className, children: [] });
nodeMap.set(node, newNode);
if (parent) {
const newParent = nodeMap.get(parent);
newParent.props.children[index] = newNode;
walkSync(doc, (node, parent, index) => {
let newNode = {};
if (node.type === DOCUMENT_NODE) {
nodeMap.set(node, root);
} else if (node.type === ELEMENT_NODE) {
const { class: className, ...props } = node.attributes;
newNode = createElement(node.name, { ...props, className, children: [] });
nodeMap.set(node, newNode);
if (parent) {
const newParent = nodeMap.get(parent);
newParent.props.children[index] = newNode;
}
} else if (node.type === TEXT_NODE) {
newNode = node.value.trim();
if (newNode.trim()) {
if (parent) {
const newParent = nodeMap.get(parent);
if (parent.children.length === 1) {
newParent.props.children[0] = newNode;
} else {
newParent.props.children[index] = newNode;
}
}
}
}
});
}
} else if (node.type === TEXT_NODE) {
newNode = node.value.trim();
if (newNode.trim()) {
if (parent) {
const newParent = nodeMap.get(parent);
if (parent.children.length === 1) {
newParent.props.children[0] = newNode;
} else {
newParent.props.children[index] = newNode;
}
}
}
}
});
return root.props.children;
return root.props.children;
}