Back to the Basics. Into the Future. https://mcfly.js.org
Find a file
2023-10-09 14:26:52 +02:00
.vscode initial commit 2023-10-07 20:06:23 +02:00
plugins use .output dir 2023-10-08 09:35:53 +02:00
public use .output dir 2023-10-08 09:35:53 +02:00
routes use .output dir 2023-10-08 09:35:53 +02:00
src feat: server logic for prerendering *idea* 2023-10-09 14:26:52 +02:00
.editorconfig initial commit 2023-10-07 20:06:23 +02:00
.eslintignore initial commit 2023-10-07 20:06:23 +02:00
.eslintrc initial commit 2023-10-07 20:06:23 +02:00
.gitignore test if no copying 2023-10-08 09:15:10 +02:00
.npmrc initial commit 2023-10-07 20:06:23 +02:00
nitro.config.ts feat: watch pages and components directory 2023-10-08 04:21:03 +02:00
package-lock.json chore(deps): remove fs 2023-10-08 04:16:54 +02:00
package.json test if no copying 2023-10-08 09:15:10 +02:00
README.md chore: add Special directories section 2023-10-08 04:35:37 +02:00
tsconfig.json initial commit 2023-10-07 20:06:23 +02:00

Nitro + Vanilla Custom Elements

This is a Proof of Concept and testing ground for using Nitro and vanilla JS custom elements using my Web Component Base class.

Setting up

Do the following steps to get you started:

  1. clone project and go into the directory
git clone https://github.com/ayoayco/nitro-web-components.git
cd nitro-web-components
  1. install deps
npm i
  1. run the dev server
npm run dev
  1. open the browser to https://localhost:3000 (or what the dev server said)

Special directories

src/pages

  • file based routing for .html files

src/components

  • custom element constructor class files go here (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)

Ambitious Goals

We want a way to:

  1. create web apps with vanilla custom elements
  2. write real .HTML files
  3. no frameworks or reactivity libraries on the browser
  4. easy server APIs authoring
  5. server-side pre-rendering
  6. control on when and where JS is downloaded for interactive elements

More info

This project was generated from Nitro starter guide. Look at the Nitro documentation to learn more.