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

feat(core): named slots (#21)

Browse source
This commit is contained in:
Ayo Ayco 2023-11-09 11:08:18 +01:00 committed by Ayo
parent 51be11da89
commit 17c5b810f9
7 changed files with 53 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
package-lock.json generated
View file

@ -3991,9 +3991,9 @@
} }
}, },
"packages/config/node_modules/@mcflyjs/core": { "packages/config/node_modules/@mcflyjs/core": {
"version": "0.2.14", "version": "0.2.15",
"resolved": "https://registry.npmjs.org/@mcflyjs/core/-/core-0.2.14.tgz", "resolved": "https://registry.npmjs.org/@mcflyjs/core/-/core-0.2.15.tgz",
"integrity": "sha512-3R9aVJ2Wf5XaTWWSgMvwBnls9D4czmRKgHoleMZ+1jNCgZn8ZoFM0mZuYbHCtw3gEtZsQALJDtkV1piktyWY6w==", "integrity": "sha512-BWG04g8+CIP86KTYNupVAETIFczH4oq46aVVcOnm8AZYalspixDjl+tPAwlk05VTPssh6+d5oIxz7oGKedRcfA==",
"dependencies": { "dependencies": {
"esprima": "^4.0.1", "esprima": "^4.0.1",
"h3": "^1.8.2", "h3": "^1.8.2",
@ -4002,7 +4002,7 @@
}, },
"packages/core": { "packages/core": {
"name": "@mcflyjs/core", "name": "@mcflyjs/core",
"version": "0.2.15", "version": "0.3.0",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"esprima": "^4.0.1", "esprima": "^4.0.1",
@ -4066,9 +4066,9 @@
} }
}, },
"templates/basic/node_modules/@mcflyjs/core": { "templates/basic/node_modules/@mcflyjs/core": {
"version": "0.2.14", "version": "0.2.15",
"resolved": "https://registry.npmjs.org/@mcflyjs/core/-/core-0.2.14.tgz", "resolved": "https://registry.npmjs.org/@mcflyjs/core/-/core-0.2.15.tgz",
"integrity": "sha512-3R9aVJ2Wf5XaTWWSgMvwBnls9D4czmRKgHoleMZ+1jNCgZn8ZoFM0mZuYbHCtw3gEtZsQALJDtkV1piktyWY6w==", "integrity": "sha512-BWG04g8+CIP86KTYNupVAETIFczH4oq46aVVcOnm8AZYalspixDjl+tPAwlk05VTPssh6+d5oIxz7oGKedRcfA==",
"dependencies": { "dependencies": {
"esprima": "^4.0.1", "esprima": "^4.0.1",
"h3": "^1.8.2", "h3": "^1.8.2",

22
packages/core/event-handler.js
View file

@ -142,7 +142,7 @@ async function buildRegistry(usedCustomElements, type, storage) {
!isBaseClassImported && !isBaseClassImported &&
content.toString().includes("extends WebComponent") content.toString().includes("extends WebComponent")
) { ) {
const baseClassImport = `import { WebComponent } from "https://unpkg.com/web-component-base@1.11.1/WebComponent.js";`; const baseClassImport = `import { WebComponent } from "https://unpkg.com/web-component-base@1.11.2/WebComponent.js";`;
registryScript += baseClassImport; registryScript += baseClassImport;
isBaseClassImported = true; isBaseClassImported = true;
@ -335,10 +335,28 @@ async function useFragments(html, storage) {
* @returns {void} * @returns {void}
*/ */
function replaceSlots(fragmentNode, node) { function replaceSlots(fragmentNode, node) {
let slotted = [];
const containsAll = (arr, target) => target.every(v => arr.includes(v));
walkSync(fragmentNode, (n) => { walkSync(fragmentNode, (n) => {
if (n.type === ELEMENT_NODE && n.name === "slot") { if (n.type === ELEMENT_NODE && n.name === "slot") {
// find node child with same name attribute
const currentSlotName = n.attributes?.['name'] ?? null;
let nodeChildren = [];
if (currentSlotName === null) {
nodeChildren = node.children.filter(child => !child.attributes?.['slot'] && child.type === ELEMENT_NODE);
} else {
nodeChildren = node.children.filter(child => {
const childSlotName = child.attributes?.['slot'];
return childSlotName === currentSlotName;
})
}
if (nodeChildren.length > 0 && !containsAll(slotted, nodeChildren)) {
slotted = [...slotted, ...nodeChildren]
const index = n.parent.children.indexOf(n); const index = n.parent.children.indexOf(n);
n.parent.children.splice(index, 1, ...node.children); n.parent.children.splice(index, 1, ...nodeChildren);
}
} }
}); });
} }

2
packages/core/package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "@mcflyjs/core", "name": "@mcflyjs/core",
"version": "0.2.15", "version": "0.3.0",
"description": "McFly core package", "description": "McFly core package",
"type": "module", "type": "module",
"main": "index.js", "main": "index.js",

3
site/nitro.config.mjs
View file

@ -1,4 +1,7 @@
import McFly from "@mcflyjs/config"; import McFly from "@mcflyjs/config";
export default defineNitroConfig({ export default defineNitroConfig({
...McFly(), ...McFly(),
devServer: {
watch: ["../packages"],
}
}); });

4
site/src/components/awesome-header.html
View file

@ -12,7 +12,7 @@
" "
> >
<a style="color: white" href="/"> <a style="color: white" href="/">
<h1>McFly</h1> <h1>McFly <slot name="title-postfix" /> </h1>
</a> </a>
<span>Back to the Basics. Into the Future.</span> <slot />
</header> </header>

9
site/src/pages/demo.html
View file

@ -16,7 +16,10 @@
</script> </script>
</my-head> </my-head>
<body> <body>
<awesome-header><span>heyyy</span></awesome-header> <awesome-header>
<span>Back to the Basics. Into the Future.</span>
<span slot="title-postfix">- This is strong!</span>
</awesome-header>
<main> <main>
<section id="intro"> <section id="intro">
<h1>McFly Demo</h1> <h1>McFly Demo</h1>
@ -75,8 +78,6 @@
&lt;/script&gt; &lt;/script&gt;
&lt;/my-head&gt; &lt;/my-head&gt;
&lt;body&gt; &lt;body&gt;
&lt;awesome-header&gt;&lt;span&gt;heyyy&lt;/span&gt;&lt;/awesome-header&gt;
&lt;main&gt;
&lt;a href=&quot;/demo/about&quot;&gt;&#123;&#123; count &#125;&#125;&lt;/a&gt; &lt;a href=&quot;/demo/about&quot;&gt;&#123;&#123; count &#125;&#125;&lt;/a&gt;
&lt;div&gt; &lt;div&gt;
&lt;my-hello-world id=&quot;my-hello&quot; data-name=&quot;&#123;&#123;name &#125;&#125;&quot;&gt;&lt;/my-hello-world&gt; &lt;my-hello-world id=&quot;my-hello&quot; data-name=&quot;&#123;&#123;name &#125;&#125;&quot;&gt;&lt;/my-hello-world&gt;
@ -89,8 +90,6 @@
&lt;p&gt;some text: &#123;&#123;greeting&#125;&#125;&lt;/p&gt; &lt;p&gt;some text: &#123;&#123;greeting&#125;&#125;&lt;/p&gt;
&#123;&#123;greeting&#125;&#125; hey&lt;br /&gt; &#123;&#123;greeting&#125;&#125; hey&lt;br /&gt;
&lt;clickable-text&gt;&lt;/clickable-text&gt; &lt;clickable-text&gt;&lt;/clickable-text&gt;
&lt;/main&gt;
&lt;my-footer&gt;&lt;/my-footer&gt;
&lt;/body&gt; &lt;/body&gt;
&lt;/html&gt;</pre &lt;/html&gt;</pre
> >

4
site/src/pages/index.html
View file

@ -20,7 +20,9 @@
</style> </style>
</my-head> </my-head>
<body> <body>
<awesome-header></awesome-header> <awesome-header>
<span>Back to the Basics. Into the Future.</span>
</awesome-header>
<main> <main>
<section> <section>
<p> <p>