├── .gitignore
├── README.md
├── build.js
├── package-lock.json
├── package.json
├── src
├── components
│ ├── card.html
│ └── notify.html
├── index.html
└── tailwind.css
└── tailwind.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist/*
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Single File Components for Alpine.js
2 |
3 | Svelte-inspired single-file components compiler for Alpine.js
4 |
5 | ## About
6 |
7 | I love the simplicity of Alpine.js, but on bigger projects it can become a challenge to keep your code organized and modular.
8 |
9 | Inspired by the way Svelte compiles your single file components into browser-friendly javascript, I created a simple compiler for Alpinejs. 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.
10 |
11 | ## Tailwind CSS integrated
12 |
13 | Because Alpine.js and Tailwind go so well together, I've also integrated Tailwind into the build process: every time you save a file in the `src` directory, Tailwind automatically scans your components to see which classes you've used. It then rebuilds the tailwind.css file in the `dist` folder.
14 |
15 | If you don't want to use Tailwind, just remove the following part from package.json:
16 |
17 | `&& npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css`
18 |
19 | ## How to install?
20 |
21 | 1. run `npx degit https://github.com/dashpilot/single-file-components-for-alpinejs`
22 | 2. run `npm install` and then `npm run dev` to run the example components
23 |
24 | ## How to create a single-file component?
25 |
26 | Create a new .html file in `src/components`, with the following structure:
27 |
28 |
29 |
30 |
33 |
34 |
35 |
46 |
47 |
54 |
55 | 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 dist/assets. It also copies index.html to the dist folder.
56 |
57 | To load a component on the page, create a custom element in index.html that corresponds to the filename of your component. So if your component is called `card.html`, create a custom element `
2 |
3 |
4 |
5 |
6 |
Special title treatment
7 |
8 |
9 |
14 |
Try Me
15 |
16 |
17 |
19 |
20 |
33 |
34 |
--------------------------------------------------------------------------------
/src/components/notify.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Heads Up! This is a different component
4 |
5 |
6 |
7 |
16 |
17 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
23 |
25 |
26 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/src/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | content: ["./src/**/*.{html,js}"],
3 | theme: {
4 | extend: {},
5 | },
6 | plugins: [],
7 | }
--------------------------------------------------------------------------------