https://github.com/dashpilot/single-file-components-for-alpinejs

Svelte/Vue-inspired single-file components compiler for Alpine.js
https://github.com/dashpilot/single-file-components-for-alpinejs

alpinejs build-tool compiler modular sfc single-file-components tailwind tailwindcss

Last synced: about 1 month ago
JSON representation

Svelte/Vue-inspired single-file components compiler for Alpine.js

• Host: GitHub
• URL: https://github.com/dashpilot/single-file-components-for-alpinejs
• Owner: dashpilot
• Created: 2022-01-23T01:42:20.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-02-17T12:40:04.000Z (3 months ago)
• Last Synced: 2025-03-25T13:11:30.114Z (about 2 months ago)
• Topics: alpinejs, build-tool, compiler, modular, sfc, single-file-components, tailwind, tailwindcss
• Language: HTML
• Homepage: https://single-file-components-for-alpinejs.vercel.app
• Size: 52.7 KB
• Stars: 20
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Single File Components for Alpine.js

Svelte-inspired single-file components compiler for Alpine.js

## About

I love the simplicity of Alpine.js, but on bigger projects it can become a challenge to keep your code organized and modular.

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.

## Tailwind CSS integrated

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.

If you don't want to use Tailwind, just remove the following part from package.json:

`&& npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css`

## How to install?

1.  run `npx degit https://github.com/dashpilot/single-file-components-for-alpinejs`

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

      function example() {

        return {

          title: "Hello world",

          init() {

            console.log('Example component loaded');

          }

        }

      }

    

    

      /* this is where your CSS goes */

      .example{

        border: 1px solid #DDD;

        padding: 10px;

      }

    

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.

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 `` in index.html. You can also load multiple instances of the component on the page, without duplicating the javascript or CSS.

Take a look at `components/card.html` to see how well this concept actually fits Alpinejs: each component has its own data-'controller', while sharing data between components is easy via the global store (in index.html). And of course, all templating-directives are available to you (x-for, x-if, x-text, etc.)

## What it's not

This script is simply meant to help you write Alpine.js code in a more modular way, but isn't a module bundler or js framework. Let me know if there are any features/improvements you'd like to see.

## Press the :star: button

Don't forget to press the :star: button to let me know I should continue improving this project.