{"id":15937656,"url":"https://github.com/bahrus/be-reformable","last_synced_at":"2026-02-26T17:07:34.487Z","repository":{"id":45816649,"uuid":"417951609","full_name":"bahrus/be-reformable","owner":"bahrus","description":"be-reformable is a web component that progressively enhances the built-in form element. It suggests when and what to fetch to other enhancements or components","archived":false,"fork":false,"pushed_at":"2025-11-09T17:01:22.000Z","size":295,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"baseline","last_synced_at":"2025-11-09T18:22:48.144Z","etag":null,"topics":["custom-element","custom-elements","form-element","form-elements","web-component","web-components"],"latest_commit_sha":null,"homepage":"","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/bahrus.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-10-16T21:22:29.000Z","updated_at":"2025-11-09T17:01:26.000Z","dependencies_parsed_at":"2024-10-25T17:02:49.066Z","dependency_job_id":"7b09ef54-561d-4f02-b24f-2052813defd7","html_url":"https://github.com/bahrus/be-reformable","commit_stats":{"total_commits":259,"total_committers":1,"mean_commits":259.0,"dds":0.0,"last_synced_commit":"99df8fd18632563f5c5aa8353211636211c3b6c3"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bahrus/be-reformable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahrus%2Fbe-reformable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahrus%2Fbe-reformable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahrus%2Fbe-reformable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahrus%2Fbe-reformable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bahrus","download_url":"https://codeload.github.com/bahrus/be-reformable/tar.gz/refs/heads/baseline","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahrus%2Fbe-reformable/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29865463,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T16:38:37.846Z","status":"ssl_error","status_checked_at":"2026-02-26T16:37:58.932Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["custom-element","custom-elements","form-element","form-elements","web-component","web-components"],"created_at":"2024-10-07T05:04:27.937Z","updated_at":"2026-02-26T17:07:34.472Z","avatar_url":"https://github.com/bahrus.png","language":"JavaScript","readme":"# be-reformable (🍺)\n\n*be-reformable* is a custom element enhancement that (progressively) enhances the built-in form element, making attributes/properties like action dynamic.  It does not do anything fetch related, leaving that for other components / enhancements.  It provides the mechanics of specifying what the fetch parameters should be, and quietly suggests the appropriate time to perform said fetch.\n\nIt uses [be-enhanced](https://github.com/bahrus/be-enhanced) as the underpinning approach, as opposed to the controversial \"is\" extension.\n\n[![Playwright Tests](https://github.com/bahrus/be-reformable/actions/workflows/CI.yml/badge.svg?branch=baseline)](https://github.com/bahrus/be-reformable/actions/workflows/CI.yml)\n[![NPM version](https://badge.fury.io/js/be-reformable.png)](http://badge.fury.io/js/be-reformable)\n[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/be-reformable?style=for-the-badge)](https://bundlephobia.com/result?p=be-reformable)\n\u003cimg src=\"http://img.badgesize.io/https://cdn.jsdelivr.net/npm/be-reformable?compression=gzip\"\u003e\n\n## [Demo](https://codepen.io/bahrus/pen/eYEZOXm)\n\n\n## Example 1:  Making the action property dynamic\n\nLet's see how we can use *be-reformable* to bind input elements to the action property.  These input elements should not have a name attribute, as we don't want them to affect the query string.  Instead we use a custom attribute starting with \":\".  \n\nIn this example, we bind to the  [newton advanced math micro service](https://newton.vercel.app/), declaratively.  By itself, this enhancement will not make the form fully functional for this service (as it doesn't do a fetch or anything).\n\n```html\n\u003clink id=newton-microservice rel=preconnect href=https://newton.now.sh/ \u003e\n\n\u003cform\n    be-reformable='{\n        \"baseLink\": \"newton-microservice\",\n        \"path\": \"api/v2/:operation/:expression\",\n    }'\n\u003e\n    \u003clabel\u003e\n        Operation:\n        \u003cinput :operation value=integrate\u003e\n    \u003c/label\u003e\n    \n    \u003clabel\u003e\n        Expression:\n        \u003cinput :expression value=\"x^2\"\u003e\n    \u003c/label\u003e\n    \n    \u003cnoscript\u003e\n        \u003cbutton type=submit\u003eSubmit\u003c/button\u003e\n    \u003c/noscript\u003e\n\u003c/form\u003e\n```\n\nThe \"path\" value follows the [URL Pattern syntax](https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API).\n\n\"base-link\" is optional, but allows for easy management of common base API URL's across the application.  The link tag should probably go in the head tag of index.html (typically).\n\nWhat *be-reformable* does is:\n\n1. By default, adds \"input\" event to the adorned form element.\n2. If the form's checkValidity() is false, ignores the event.\n2. When the event occurs, and checkValidity() is true, it uses the baseLink + path to set the action value of the form element.\n   1.  It pulls in all the form associated custom elements and/or built-in input elements referenced by the path property.\n   2.  Forms the compound string and sets the action property/attribute.\n3. Triggers event \"fetch-ready\" which provides the recommended url and options parameters.  Event is dispatched both from the form element as well as the enhancement.\n\n## Editing JSON-in-HTML\n\n\u003e [!NOTE]\n\u003e A [VSCode plug-in](https://marketplace.visualstudio.com/items?itemName=andersonbruceb.json-in-html) is available to make editing json-in-html more pleasant.  This extension works with the web interface of vscode.\n\n*be-reformable* is a rather lengthy name, and if it appears frequently within an application, could get tiresome to have to type.  It is the canonical name, but developers can easily define alternative names.  This package provides one such alternative:\n\n```html\n\u003cform\n    🍺='{\n        \"baseLink\": \"newton-microservice\",\n        \"path\": \"api/v2/:operation/:expression\",\n    }'\n\u003e...\u003c/form\u003e\n```\n\n## More semantic markup\n\nThis is also supported:\n\n```html\n\u003cform\n    🍺-base-link=newton-microservice 🍺-path=api/v2/:operation/:expression\n\u003e...\u003c/form\u003e\n```\n\n\n## Support for headers and body\n\nHardcoded:\n\n```html\n\u003cscript type=module\u003e\n    (await import('trans-render/lib/weave.js'))\n        .weave({\n            Authorization: \"sessionStorage://auth?.bearerToken\",\n            \"Content-Type\": \"indexedDB://db/store?.key\",\n            \"User-Agent\": \"globalThis://navigator?.userAgent\",\n            Accept: \"application/json\"\n        })\n        .into('rPpwNLcYsUOjFcg+N8lmOA')\n        .andWeave({\n            baseURL:  \"globalThis://newton-microservice/href\"\n        })\n        .into('qmywdO1vr0SwyuIe4fvzxQ');\n\u003c/script\u003e\n\n\u003cform \n    method=\"post\" \n    be-reformable='{\n        \"...\": \"qmywdO1vr0SwyuIe4fvzxQ\",\n        \"headerFields\":[\"#warning\", \"%accept-language\"],\n        \"headers\": {\n            \"...\": \"rPpwNLcYsUOjFcg+N8lmOA\",\n        }\n}'\u003e\n    \u003cinput id=warning value=\"199 Miscellaneous warning\"\u003e\n    \u003cinput part=accept-language value=\"de; q=1.0, en; q=0.5\"\u003e\n    \u003clabel\u003e\n        \u003ctextarea name=hello\u003e\u003c/textarea\u003e\n    \u003c/label\u003e\n    \n    \u003cbutton type='submit'\u003esubmit\u003c/button\u003e\n\u003c/form\u003e\n\n\u003cdiv -innerHTML\u003e\n\n\u003c/div\u003e\n```\n\n\nThe baseURL and headers settings that are weaved in above make use of [Uniform Source Path](https://github.com/bahrus/trans-render/wiki/VIIII.--Uniform-Source-Path) syntax.\n\nThese are asynchronous and may not already be set when the rest of the form is ready for submitting.  *be-reformable*, by default, won't issue the \"fetch-ready\" event until all the values have been retrieved (and are truthy).\n\nTo indicate that a header is optional, add a question mark at the end of the key:\n\n```JavaScript\n\"Content-Type?\": \"indexedDB://db/store?.key\",\n```\n\n\n\u003e [!NOTE]\n\u003e Other components / enhancements that leverage this enhancement, and actually perform the fetch should consider use of [be-hashing-out](https://github.com/bahrus/be-hashing-out) or some other security mechanism if there's any sense of danger that justifies adding that security check.\n\n\n## Support for emitting \"fetch-ready\" event only after a button click:\n\n```html\n\u003clink id=newton-microservice rel=preconnect href=https://newton.now.sh/ \u003e\n\n\u003cform\n    be-reformable='{\n        \"baseLink\": \"newton-microservice\",\n        \"path\": \"api/v2/:operation/:expression\",\n        \"submitOptions\":{\n            \"onlyAfter\": \"@submit::click\",\n            \"nudges\": true,\n            \"disableIfNotAllConditionsAreMet\": true\n        }\n        \n    }'\n\u003e\n    \u003clabel for=operation\u003e\n        Operation:\n        \u003cinput :operation value=integrate\u003e\n    \u003c/label\u003e\n    \n    \u003clabel for=expression\u003e\n        Expression:\n        \u003cinput :expression value=\"x^2\"\u003e\n    \u003c/label\u003e\n    \n    \u003cnoscript\u003e\n        \u003cbutton type=submit\u003eSubmit\u003c/button\u003e\n    \u003c/noscript\u003e\n    \u003cbutton disabled type=button name=submit\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\n```\n\n\u003c!-- ## Support for in-place editing\n\nTo enable a dialog box to appear, that allows for editing form --\u003e\n\n\n## [Import Maps](https://github.com/bahrus/be-reformable/blob/baseline/imports.html)\n\n\n## Viewing Locally\n\nAny web server that serves static files with server-side includes will do but...\n\n1.  Install git.\n2.  Fork/clone this repo.\n3.  Install node.\n4.  Open command window to folder where you cloned this repo.\n5.  \u003e npm install\n6.  \u003e npm run serve\n7.  Open http://localhost:8000/ in a modern browser.\n\n\n## Importing in ES Modules:\n\n```JavaScript\nimport 'be-reformable/be-reformable.js';\n\n```\n\n## Using from CDN:\n\n```html\n\u003cscript type=module crossorigin=anonymous\u003e\n    import 'https://esm.run/be-reformable';\n\u003c/script\u003e\n```\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahrus%2Fbe-reformable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbahrus%2Fbe-reformable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahrus%2Fbe-reformable/lists"}