https://github.com/dashpilot/single-file-components-for-vanilla-js
Svelte and Vue-inspired single-file components compiler
https://github.com/dashpilot/single-file-components-for-vanilla-js
build-script compiler nodejs single-file-components vanilla-javascript
Last synced: about 1 month ago
JSON representation
Svelte and Vue-inspired single-file components compiler
- Host: GitHub
- URL: https://github.com/dashpilot/single-file-components-for-vanilla-js
- Owner: dashpilot
- Created: 2020-10-18T02:42:09.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-02-17T12:30:00.000Z (3 months ago)
- Last Synced: 2025-03-25T13:11:29.932Z (about 2 months ago)
- Topics: build-script, compiler, nodejs, single-file-components, vanilla-javascript
- Language: HTML
- Homepage: single-file-components-for-vanilla-js.vercel.app
- Size: 48.8 KB
- Stars: 10
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# single-file-components-for-vanilla-js
Svelte and Vue-inspired single-file components compiler for vanilla javascript.
## About
Inspired by the way Svelte compiles your single file components into browser-friendly javascript, I created a simple compiler for vanilla javascript. You write your code in single-file-component-style, and the build script compiles it to browser-friendly javascript, html and css.
It also features **live-reload**, so every time you save changes to a single file component, the build script compiles your code and runs it. Although this is a basic POC, in its current form it does help you to better organize your code.
## How to install?
1. run `npx degit https://github.com/dashpilot/single-file-components-for-vanilla-js`
2. run `npm install` and then `npm run dev` to run the example components
## How to create a single-file component?
Create a new .html file in `src/components`, with the following structure:
// This is where your javascript goes
/* this is where your CSS goes */
The order of the template-, script- and css- tags is up to your own preference. When you run `npm run dev` or `npm run build` the compiler goes through all the components and automatically splits and minifies/uglifies the JS, CSS and HTML into public/assets. It also copies index.html to the public folder.
To load a component on the page, create a custom element in index.html that corresponds to the filename of your component. For example if your component is called card.html, create a custom element in index.html. You can also load multiple instances of the component on the page, without duplicating the javascript or CSS. See `index.html` for an example.
## What it's not
This script is simply meant to help you write code in a more modular way, but it doesn't feature the wealth of extras Svelte offers (template language, two-way binding, CSS-scoping etc.). Let me know if there are any features/improvements you'd like to see.
If you do want templating, two-way-binding and a data-store, take a look at the Alpine.js version:
## Press the :star: button
Don't forget to press the :star: button to let me know I should continue improving this project.