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

initial commit

Browse source
This commit is contained in:
Ayo 2023-10-07 20:06:23 +02:00
commit c1266ed75b
17 changed files with 4069 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
.editorconfig Normal file
View file

@ -0,0 +1,15 @@
root = true
[*]
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
charset = utf-8
[*.js]
indent_style = space
indent_size = 2
[{package.json,*.yml,*.cjson}]
indent_style = space
indent_size = 2

3
.eslintignore Normal file
View file

@ -0,0 +1,3 @@
dist
.output
node-modules

5
.eslintrc Normal file
View file

@ -0,0 +1,5 @@
{
"extends": [
"@nuxtjs/eslint-config-typescript"
]
}

7
.gitignore vendored Normal file
View file

@ -0,0 +1,7 @@
node_modules
*.log*
.nitro
.cache
.output
.env
dist

2
.npmrc Normal file
View file

@ -0,0 +1,2 @@
shamefully-hoist=true
strict-peer-dependencies=false

3
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"editor.formatOnSave": true
}

3
README.md Normal file
View file

@ -0,0 +1,3 @@
# Nitro + Vanilla Custom Elements
This is a minimal Proof of Concept for using [Nitro](https://nitro.unjs.io) and vanilla JS custom elements using my [Web Component Base](https://ayco.io/n/web-component-base) class.

9
nitro.config.ts Normal file
View file

@ -0,0 +1,9 @@
//https://nitro.unjs.io/config
export default defineNitroConfig({
devStorage: {
db: {
driver: "fs",
base: "./data/db",
},
},
});

3935
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

12
package.json Normal file
View file

@ -0,0 +1,12 @@
{
"private": true,
"scripts": {
"prepare": "nitropack prepare",
"dev": "nitropack dev",
"build": "nitropack build",
"preview": "node .output/server/index.mjs"
},
"dependencies": {
"nitropack": "latest"
}
}

20
public/components/hello-world.js Normal file
View file

@ -0,0 +1,20 @@
import WebComponent from "https://unpkg.com/web-component-base/index.js";
export default class HelloWorld extends WebComponent {
name = "";
static properties = ["name"];
onInit() {
console.log(`Greeting for ${this.name} initialized`);
let count = 0;
this.onclick = () => {
console.log("Clicked!");
this.name = `I was clicked ${++count} times`;
this.render();
};
}
get template() {
return `Hello ${this.name}!`;
}
}

BIN
public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

18
public/index.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Nitro</title>
<script type="module" src="registry.js"></script>
</head>
<body>
<hello-world name="Ayo" />
<script>
const helloWorld = document.querySelector("hello-world");
setTimeout(() => {
helloWorld.setAttribute("name", "Nitro");
}, 2000);
</script>
</body>
</html>

2
public/registry.js Normal file
View file

@ -0,0 +1,2 @@
import HelloWorld from "/components/hello-world.js";
customElements.define("hello-world", HelloWorld);

21
routes/api/stars/[org]/[repo].ts Normal file
View file

@ -0,0 +1,21 @@
export default eventHandler((event) => {
const { org, repo } = event.context.params;
return getStars(org, repo);
});
type Project = {
org: string;
repo: string;
stars: string;
};
const getStars = async (org: string, repo: string): Promise<Project> => {
const stars = await cachedGHStars(`${org}/${repo}`);
return {
org,
repo,
stars,
};
};

3
tsconfig.json Normal file
View file

@ -0,0 +1,3 @@
{
"extends": "./.nitro/types/tsconfig.json"
}

11
utils/github.ts Normal file
View file

@ -0,0 +1,11 @@
export const cachedGHStars = cachedFunction(
async (repo: string) => {
const data: any = await $fetch(`https://api.github.com/repos/${repo}`);
return data.stargazers_count;
},
{
maxAge: 60 * 60,
name: "ghStars",
getKey: (repo: string) => repo,
}
);