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

feat: static .html fragments

Browse source
This commit is contained in:
Ayo 2023-10-19 12:07:43 +02:00
parent feea346f73
commit 655debf193
4 changed files with 60 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
README.md
View file

@ -28,15 +28,15 @@ We want a way to:
- use `<script server:setup>` to define logic that runs on the server, which then gets stripped away - use `<script server:setup>` to define logic that runs on the server, which then gets stripped away
**2. `src/components`** **2. `src/components`**
- custom element constructor class files go here (only `.js` files for now) - custom element constructor files (only `.js` files for now)
- all components are automatically registered using their file names (e.g., a `hello-world.js` component can be used as `<hello-world>` element) - all components are automatically registered using their file names; a `hello-world.js` component can be used as `<hello-world>`
- the idea is, if it is a valid custom element constructor, just throw it in the `components` directory and it will work... vanilla, Lit, Stencil, or our own totally optional [Base Class](https://ayco.io/n/web-component-base) -- your choice! - static `.html` fragments; a `my-header.html` fragment can be directly used as `<my-header>`
## Setting up ## Setting up
It's still very early in the project development and we have no packages published yet. It's still very early in the project development and we have no packages published yet.
You can, however, experience the framework by cloning the project and play with the example files in the [special directories](#special-directories). You can, however, experience the framework by cloning the project and play with the example files in the [special directories](#special-directories).
Do the following steps to get you started: Do the following steps to get you started:

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

@ -2,16 +2,23 @@
* McFly SSR logic * McFly SSR logic
*/ */
import { ELEMENT_NODE, parse, render, renderSync, walkSync } from "ultrahtml"; import {
Node as UltraNode,
ELEMENT_NODE,
parse,
render,
renderSync,
walkSync,
} from "ultrahtml";
import { parseScript } from "esprima"; import { parseScript } from "esprima";
import config from "../mcfly.config"; import config from "../mcfly.config";
const { components: componentType } = config();
export default eventHandler(async (event) => { export default eventHandler(async (event) => {
const { path } = event; const { path } = event;
let html = await getHtml(path); let html = await getHtml(path);
const { components: componentType } = config();
// transforms // transforms
const transforms = [doSetUp, deleteServerScripts]; const transforms = [doSetUp, deleteServerScripts];
if (html) { if (html) {
@ -20,6 +27,8 @@ export default eventHandler(async (event) => {
} }
} }
html = await useFragments(html.toString());
if (!!componentType && !!html) { if (!!componentType && !!html) {
html = await insertRegistry(html.toString(), componentType); html = await insertRegistry(html.toString(), componentType);
} }
@ -48,9 +57,7 @@ async function insertRegistry(
type: "js" | "ts" type: "js" | "ts"
): Promise<string> { ): Promise<string> {
const ast = parse(html); const ast = parse(html);
const componentFiles = (await useStorage().getKeys("assets:components")) const componentFiles = await getFiles(type);
.map((key) => key.replace("assets:components:", ""))
.filter((key) => key.includes(type));
const availableComponents = componentFiles.map((key) => const availableComponents = componentFiles.map((key) =>
key.replace(`.${type}`, "") key.replace(`.${type}`, "")
); );
@ -193,3 +200,39 @@ function removeComments(script: string) {
}); });
return script; return script;
} }
async function useFragments(html: string) {
const fragmentFiles = await getFiles("html");
const availableFragments = fragmentFiles.map((key) => {
return {
key: key.replace(".html", ""),
text: "",
};
});
const ast = parse(html);
for (const fragment of availableFragments) {
fragment.text = await useStorage().getItem(
"assets:components:" + fragment.key + ".html"
);
}
walkSync(ast, (node) => {
const usedFragment = availableFragments.find(
(fragment) => fragment.key === node.name
);
if (node.type === ELEMENT_NODE && !!usedFragment) {
node.children.push(parse(usedFragment.text));
}
});
return render(ast);
}
async function getFiles(type: string) {
return (await useStorage().getKeys("assets:components"))
.map((key) => key.replace("assets:components:", ""))
.filter((key) => key.includes(type));
}

6
src/components/awesome-header.html Normal file
View file

@ -0,0 +1,6 @@
<header>
<a href="https://ayco.io/gh/mcfly">
<h1>McFly</h1>
</a>
<span>Back to the Basics. Into the Future.</span>
</header>

7
src/pages/index.html
View file

@ -44,12 +44,7 @@
</style> </style>
</head> </head>
<body> <body>
<header> <awesome-header></awesome-header>
<a href="https://ayco.io/gh/mcfly">
<h1>McFly</h1>
</a>
<span>Back to the Basics. Into the Future.</span>
</header>
<main> <main>
<p> <p>
<strong>McFly</strong> is a full-stack no-framework framework that assists developers in leveraging the web platform. <strong>McFly</strong> is a full-stack no-framework framework that assists developers in leveraging the web platform.