{"id":21462153,"url":"https://github.com/wolfpup-software/hx-js","last_synced_at":"2025-03-17T05:11:55.673Z","repository":{"id":241061704,"uuid":"804135506","full_name":"wolfpup-software/hx-js","owner":"wolfpup-software","description":"hypertext extension for the browser","archived":false,"fork":false,"pushed_at":"2024-11-27T19:16:50.000Z","size":60,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-01-23T14:34:21.101Z","etag":null,"topics":["hypermedia","hypertext"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wolfpup-software.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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":"2024-05-22T02:52:16.000Z","updated_at":"2024-11-21T22:53:59.000Z","dependencies_parsed_at":"2024-05-22T07:46:55.414Z","dependency_job_id":"2e452598-ef59-4ad4-866d-f315465446a3","html_url":"https://github.com/wolfpup-software/hx-js","commit_stats":null,"previous_names":["wolfpup-software/hx-js"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfpup-software%2Fhx-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfpup-software%2Fhx-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfpup-software%2Fhx-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wolfpup-software%2Fhx-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wolfpup-software","download_url":"https://codeload.github.com/wolfpup-software/hx-js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243976487,"owners_count":20377691,"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","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":["hypermedia","hypertext"],"created_at":"2024-11-23T07:12:52.035Z","updated_at":"2025-03-17T05:11:55.648Z","avatar_url":"https://github.com/wolfpup-software.png","language":"TypeScript","readme":"# hx-js\n\n(H)ypertext e(x)tension for the browser.\n\n## About\n\n`Hx` enables `\u003ca\u003e` and `\u003cform\u003e` elements to _optionally_ fetch hypertext and update the DOM without page refreshes.\n\n## Install\n\nAdd `hx-js` to an `html` document.\n\n```html\nnpm install https://github.com/wolfpup-software/hx-js\n```\n\n## How to use\n\nAnchor and form elements with an `hx-projection` attribute will fetch html `fragments` and update the dom.\n\n```html\n\u003c!-- anchors --\u003e\n\u003ca href=\"/document/fragment\" target=\"ul\" hx-projection=\"start\"\u003e click me! \u003c/a\u003e\n\n\u003c!-- forms --\u003e\n\u003cform\n\taction=\"/post/something\"\n\tmethod=\"post\"\n\ttarget=\"li:last-child\"\n\thx-projection=\"replace\"\n\u003e\n\t\u003cinput type=\"submit\" /\u003e\n\u003c/form\u003e\n```\n\nElements _without_ the `hx-projection` attribute behave like normal `\u003ca\u003e` and `\u003cform\u003e` elements.\n\n### Attributes\n\n#### target\n\n`Hx` queries an element using the `target` attribute.\n\nA `target` value can be:\n\n- `_target` -\u003e the `target` property of an hx event.\n- `_currentTarget` -\u003e the `currentTarget` property for hx event\n- `_document` -\u003e the document\n- any valid CSS selector.\n\n#### hx-projection\n\nThe `hx-projection` property defines how a `fragment` is projected onto a `document` relative to the `target` element.\n\nAn `hx-projection` properties can have the following values:\n\n- `none` -\u003e nothing will happen\n- `before` -\u003e insert a fragment before the target element\n- `after` -\u003e insert a fragment after the target element\n- `remove` -\u003e remove the target element\n- `replace` -\u003e place the target element with a fragment\n- `start` -\u003e insert a fragment before the target element descendants\n- `end` -\u003e append a fragment after the target element descendants\n- `remove_children` -\u003e remove the target element descendants\n- `replace_children` -\u003e replace the target element descendants with a fragment\n\n#### hx-status\n\nThe `hx-status` attribute is used to reflect the state of a hypertext request onto the original `\u003ca\u003e` or `\u003cform\u003e` element.\n\nThe following values will be applied:\n\n- requested\n- response-error\n- responded\n- projection-error\n- projected\n\n```html\n\u003ca\n\thref=\"/document/fragment\"\n\ttarget=\"ul\"\n\thx-projection=\"start\"\n\thx-status=\"requested\"\n\u003e\n\tclick me!\n\u003c/a\u003e\n```\n\n#### hx-status-code\n\nThe `hx-status-code` attribute is used to signal request state to the original `\u003ca\u003e` or `\u003cform\u003e` element\n\n```html\n\u003ca\n\thref=\"/document/fragment\"\n\ttarget=\"ul\"\n\thx-projection=\"start\"\n\thx-status=\"responded\"\n\thx-status-code=\"200\"\n\u003e\n\tclick me!\n\u003c/a\u003e\n```\n\n#### hx-composed\n\nThe `hx-composed` attribute adds the `composed` property to an event allowing hx events to propagate through a shadow root.\n\n```html\n\u003ca href=\"/document/fragment\" target=\"ul\" hx-projection=\"start\" hx-composed\u003e\n\tclick me!\n\u003c/a\u003e\n```\n\n## Developer Experience\n\n`Hx` is designed to work _with_ the DOM.\n\nIt's modular and easily extensible.\n\nIn lieu of \"expressive\" apis, `Hx` staggers small hypertext jumps into a series of DOM events:\n\n- hx-request events\n- hx-response events\n- hx-projection events\n\nThe `hx-request` module dispatches hx-request events from `\u003ca\u003e` and `\u003cform\u003e` elements with an `hx-projection` attribute.\n\nThe `hx-response` module dispatches hx-response events after recieving valid hx-request events.\n\nThe `hx-project` module dispatches an hx-project event after placing a fragment into a document or shadow dom.\n\nEvery step is opt-in. Pups can listen to events to drop invalid requests and react to projections.\n\n### Goals\n\nDeprecation by RFC. The browser should already be doing this.\n\nMaybe not the same events, maybe not the same attributes, but little hypertext jumps should already be browser spec.\n\nUntil then, `hx` intends to be a polyfil (at 1.5kb minified, zipped).\n\n## License\n\n`Hx-js` is released under the BSD 3-Clause License.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwolfpup-software%2Fhx-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwolfpup-software%2Fhx-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwolfpup-software%2Fhx-js/lists"}