ayo/mcfly
ayo/mcfly
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: fragment slots

Browse source
This commit is contained in:
Ayo 2023-10-19 23:52:28 +02:00
parent 287f2e3c17
commit b48bd9a282
2 changed files with 20 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
routes/[...index].ts
View file

@ -3,14 +3,15 @@
*/
import {
Node as UltraNode,
ELEMENT_NODE,
parse,
render,
renderSync,
walkSync,
transform,
html as ultraHtml,
} from "ultrahtml";
import { querySelectorAll } from "ultrahtml/selector";
import swap from "ultrahtml/transformers/swap";
import { parseScript } from "esprima";
import config from "../mcfly.config";
@ -240,28 +241,28 @@ async function useFragments(html: string) {
if (node.type === ELEMENT_NODE && !!selector) {
const index = node.parent.children.indexOf(node);
node.parent.children[index] = parse(availableFragments[selector]);
const fragmentNode = parse(availableFragments[selector]);
replaceSlots(fragmentNode, node);
node.parent.children[index] = fragmentNode;
}
});
return render(ast);
}
function replaceSlots(text: string, sourceNode: UltraNode) {
const regex = /<slot \/>/g;
var match;
function replaceSlots(fragmentNode, node) {
// fragmentNode.children = fragmentNode.children.concat(node.children);
while ((match = regex.exec(text))) {
let [key, _value] = match;
const slotName = sourceNode.attributes.slot;
const h = sourceNode.children.find((node) => node.name === slotName);
if (h) {
text = text?.replace(key, h.value);
sourceNode.children.splice(sourceNode.children.indexOf(h), 1);
// walkSync find slot
walkSync(fragmentNode, (n) => {
if (n.type === ELEMENT_NODE && n.name === "slot") {
console.log(n);
const index = n.parent.children.indexOf(n);
n.parent.children.splice(index, 1, ...node.children);
}
}
return text;
});
}
async function getFiles(type: string) {

6
src/pages/demo/index.html
View file

@ -18,7 +18,7 @@
</script>
</my-head>
<body>
<awesome-header></awesome-header>
<awesome-header><span>heyyy</span></awesome-header>
<main>
<a href="/demo/about">{{ count }}</a>
<div>
@ -30,8 +30,8 @@
<code-block language="js" line-numbers="true">
<pre>
const hey = "AYO";
console.log(hey)
</pre>
console.log(hey)</pre
>
</code-block>
</main>
<my-footer></my-footer>