{"id":18830286,"url":"https://github.com/sopherapps/alpml","last_synced_at":"2025-10-08T05:23:45.852Z","repository":{"id":206460762,"uuid":"714379698","full_name":"sopherapps/alpml","owner":"sopherapps","description":"An Alpine.js inspired javascript framework that allows for combining multiple HTML components","archived":false,"fork":false,"pushed_at":"2025-06-07T11:16:22.000Z","size":174,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-20T20:47:33.063Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sopherapps.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-04T18:25:31.000Z","updated_at":"2023-11-09T19:51:22.000Z","dependencies_parsed_at":"2023-11-10T11:49:41.029Z","dependency_job_id":"d9c47f47-d21f-4195-aa16-4bfed256706e","html_url":"https://github.com/sopherapps/alpml","commit_stats":null,"previous_names":["sopherapps/alpml"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/sopherapps/alpml","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sopherapps%2Falpml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sopherapps%2Falpml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sopherapps%2Falpml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sopherapps%2Falpml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sopherapps","download_url":"https://codeload.github.com/sopherapps/alpml/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sopherapps%2Falpml/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278891758,"owners_count":26063860,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T01:48:22.239Z","updated_at":"2025-10-08T05:23:45.815Z","avatar_url":"https://github.com/sopherapps.png","language":"JavaScript","readme":"# alpml\n\n![CI](https://github.com/sopherapps/alpml/actions/workflows/ci.yml/badge.svg)\n\nA Javascript framework without need for bundlers, based on Alpine.js\n\n## Challenge\n\n- Can we import HTML sections into other HTML documents so that HTML is composible?\n- Can we have reactiviy without the huffs and puffs of the virtualDOM?\n- Can we have simple custom web components used in HTML?\n\n## Design\n\n- Reactivity without a virtualDOM comes from [Alpine.js](https://alpinejs.dev/).\n- 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.\n- Custom components are loaded into the HTML page using `\u003cobject is=\"component-name\" data=\"path/to/component/template/file\" type=\"text/x-alpml\"\u003e` tags defined before the `\u003cscript src=\"path/to/alpml.js\"\u003e` tag that loads alpml in the `\u003chead\u003e` tag.\n\n## Note\n\n- 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).\n\n## How to Use\n\n- Define your component(s), each in their own '.hbs' file.\n\n```html\n\u003c!--main.hbs--\u003e\n\u003ctemplate props=\"initial,children\"\u003e\n  \u003cdiv data-cy-main=\"${initial}\"\u003e\n    \u003ch2\u003eCounter\u003c/h2\u003e\n    \u003cdiv data-cy-content=\"\" x-data=\"{ count: ${initial} }\"\u003e\n      \u003cbutton x-on:click=\"count++\"\u003eIncrement\u003c/button\u003e\n      ${children}\n      \u003cspan x-text=\"count\"\u003e\u003c/span\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n```html\n\u003c!--card.hbs--\u003e\n\u003ctemplate props=\"name\"\u003e\n  \u003cdiv data-cy-card=\"${name}\"\u003e\n    \u003ch3\u003ePerson\u003c/h3\u003e\n    \u003cp\u003eMy name is ${name}\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n- Create an html file, say `index.html` and add the alpml.js script to it\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eAlpml\u003c/title\u003e\n\n    \u003c!--Declare your components --\u003e\n    \u003c!-- the 'is' attribute specifies the name of the component. It must have at least one hyphen (-)--\u003e\n    \u003cobject is=\"person-card\" type=\"text/x-alpml\" data=\"./card.hbs\"\u003e\u003c/object\u003e\n    \u003cobject is=\"my-main\" type=\"text/x-alpml\" data=\"./main.hbs\"\u003e\u003c/object\u003e\n\n    \u003c!--/Components--\u003e\n\n    \u003c!--alpml.js after components but before the body--\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/sopherapps/alpml@v0.0.1/dist/alpml.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n\n  \u003cbody\u003e\n    \u003c!--use your components, passing any props basing on your templates--\u003e\n    \u003cmy-main initial=\"50\"\u003e\n      \u003c!-- nesting is possible --\u003e\n      \u003cperson-card name=\"Ruth\"\u003e\u003c/person-card\u003e\n    \u003c/my-main\u003e\n\n    \u003cdiv\u003e\n      \u003ch2\u003eOther cards\u003c/h2\u003e\n      \u003cperson-card name=\"Jane\"\u003e\u003c/person-card\u003e\n      \u003cperson-card name=\"Aguma\"\u003e\u003c/person-card\u003e\n      \u003cperson-card name=\"Peter\"\u003e\u003c/person-card\u003e\n    \u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n- Serve your html file as you would serve any static file. (e.g. with [parcel](https://parceljs.org/) `parcel index.html --port 3000`)\n\n- See the [examples](./examples/) folder for more examples.\n\n## Contributions\n\nContributions are welcome. The docs have to maintained, the code has to be made cleaner, more idiomatic and faster,\nand there might be need for someone else to take over this repo in case I move on to other things. It happens!\n\nWhen you are ready, look at the [CONTRIBUTIONS GUIDELINES](./CONTRIBUTING.md)\n\n## License\n\nCopyright (c) 2023 [Martin Ahindura](https://github.com/Tinitto)\n\nLicensed under the [MIT License](./LICENSE)\n\n## Acknowledgements\n\n- [Alpine.js](https://alpinejs.dev/) is at the core of this little framework. Thanks to Caleb Porzio and contributors.\n\n## Gratitude\n\n\u003e \"What is more, I consider everything a loss because of the surpassing worth of knowing Christ Jesus\n\u003e my Lord, for whose sake I have lost all things\"\n\u003e\n\u003e -- Philippians 3: 8\n\nAll glory be to God\n\n\u003ca href=\"https://www.buymeacoffee.com/martinahinJ\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 60px !important;width: 217px !important;\" \u003e\u003c/a\u003e\n","funding_links":["https://www.buymeacoffee.com/martinahinJ"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsopherapps%2Falpml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsopherapps%2Falpml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsopherapps%2Falpml/lists"}