https://github.com/sopherapps/alpml
An Alpine.js inspired javascript framework that allows for combining multiple HTML components
https://github.com/sopherapps/alpml
Last synced: 4 months ago
JSON representation
An Alpine.js inspired javascript framework that allows for combining multiple HTML components
- Host: GitHub
- URL: https://github.com/sopherapps/alpml
- Owner: sopherapps
- License: mit
- Created: 2023-11-04T18:25:31.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-06-07T11:16:22.000Z (8 months ago)
- Last Synced: 2025-08-20T20:47:33.063Z (6 months ago)
- Language: JavaScript
- Size: 170 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# alpml
A Javascript framework without need for bundlers, based on Alpine.js
## Challenge
- Can we import HTML sections into other HTML documents so that HTML is composible?
- Can we have reactiviy without the huffs and puffs of the virtualDOM?
- Can we have simple custom web components used in HTML?
## Design
- Reactivity without a virtualDOM comes from [Alpine.js](https://alpinejs.dev/).
- We use [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) to make reusable custom components. They can define what props they have using the `props` attribute in their `template`s.
- Custom components are loaded into the HTML page using `` tags defined before the `` tag that loads alpml in the `<head>` tag.
## Note
- Every alpml component **must** have at least one hyphen (-) in it, as all [Web components should](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name).
## How to Use
- Define your component(s), each in their own '.hbs' file.
```html
<!--main.hbs-->
<template props="initial,children">
<div data-cy-main="${initial}">
<h2>Counter</h2>
<div data-cy-content="" x-data="{ count: ${initial} }">
<button x-on:click="count++">Increment</button>
${children}
<span x-text="count"></span>
</div>
</div>
</template>
```
```html
<!--card.hbs-->
<template props="name">
<div data-cy-card="${name}">
<h3>Person</h3>
<p>My name is ${name}</p>
</div>
</template>
```
- Create an html file, say `index.html` and add the alpml.js script to it
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Alpml</title>
<!--Declare your components -->
<!-- the 'is' attribute specifies the name of the component. It must have at least one hyphen (-)-->
<object is="person-card" type="text/x-alpml" data="./card.hbs"></object>
<object is="my-main" type="text/x-alpml" data="./main.hbs"></object>
<!--/Components-->
<!--alpml.js after components but before the body-->
<script src="https://cdn.jsdelivr.net/gh/sopherapps/alpml@v0.0.1/dist/alpml.min.js">
Other cards