{"id":16601930,"url":"https://github.com/ecmel/refable","last_synced_at":"2025-08-11T13:20:31.902Z","repository":{"id":65148952,"uuid":"584161734","full_name":"ecmel/refable","owner":"ecmel","description":"Super simple JS framework.","archived":false,"fork":false,"pushed_at":"2024-01-29T08:09:43.000Z","size":96,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-25T05:45:10.862Z","etag":null,"topics":["framework","npm-package","stimulus"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/refable","language":"TypeScript","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/ecmel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","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},"funding":{"github":"ecmel","custom":"https://www.buymeacoffee.com/ecmel"}},"created_at":"2023-01-01T16:35:23.000Z","updated_at":"2024-03-28T00:45:20.000Z","dependencies_parsed_at":"2024-10-12T00:29:54.575Z","dependency_job_id":null,"html_url":"https://github.com/ecmel/refable","commit_stats":{"total_commits":18,"total_committers":1,"mean_commits":18.0,"dds":0.0,"last_synced_commit":"b3831c77c4da4ff13d54fcde147e86884e0b778f"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/ecmel/refable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecmel%2Frefable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecmel%2Frefable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecmel%2Frefable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecmel%2Frefable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ecmel","download_url":"https://codeload.github.com/ecmel/refable/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecmel%2Frefable/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261907024,"owners_count":23228367,"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":["framework","npm-package","stimulus"],"created_at":"2024-10-12T00:19:43.974Z","updated_at":"2025-06-30T23:07:44.590Z","avatar_url":"https://github.com/ecmel.png","language":"TypeScript","readme":"# Refable\n\nSuper simple JS framework inspired by [Stimulus](https://github.com/hotwired/stimulus).\n\n## Installation\n\n```bash\nnpm install refable --save-dev\n```\n\n## Application\n\nApplication is the main class for bootstrapping. Controllers are registered on an application instance. For registering glob of controllers please refer to your bundler's documentation.\n\n```ts\nimport { Application } from \"refable\";\nimport Search from \"./controllers/search\";\n\nconst application = new Application();\n\napplication.register(\"search\", Search);\n\napplication.run();\n```\n\n## Controllers\n\nControllers are instances of classes that you register in your application. Each controller class inherits from the Controller base class. Controllers can be nested within controllers and can be referenced in the parent controller.\n\n```html\n\u003cdiv data-controller=\"search\"\u003e\n  \u003cdiv data-controller=\"result\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```ts\nimport { Controller } from \"refable\";\nimport Result from \"./controllers/result\";\n\nexport default class extends Controller {\n  declare readonly resultController: Result;\n  declare readonly resultControllers: Result[];\n\n  created() {\n    //\n  }\n\n  connected() {\n    //\n  }\n\n  disconnected() {\n    //\n  }\n\n  resultControllerConnected(result: Result) {\n    //\n  }\n\n  resultControllerDisconnected(result: Result) {\n    //\n  }\n}\n```\n\nController classes are templated so more specific elements can be used if needed.\n\n```ts\nimport { Controller } from \"refable\";\n\nexport default class extends Controller\u003cHTMLElement\u003e {\n  //\n}\n```\n\n## Values\n\n```html\n\u003cdiv data-controller=\"search\" data-some-value=\"1\"\u003e\u003c/div\u003e\n```\n\n```ts\nimport { Controller } from \"refable\";\n\nexport default class extends Controller {\n  declare readonly someValue: string;\n\n  someValueChanged(value: string) {\n    //\n  }\n}\n```\n\n## Targets\n\nTargets map important elements to controller properties.\n\n```html\n\u003cdiv data-controller=\"search\"\u003e\n  \u003cdiv data-target=\"result\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```ts\nimport { Controller } from \"refable\";\n\nexport default class extends Controller {\n  declare readonly resultTarget: Element;\n  declare readonly resultTargets: Element[];\n\n  resultTargetConnected(el: Element) {\n    //\n  }\n\n  resultTargetDisconnected(el: Element) {\n    //\n  }\n}\n```\n\n## Actions\n\nActions are for handling DOM events in controllers.\n\n```html\n\u003cdiv data-controller=\"search\"\u003e\n  \u003cbutton data-action=\"click-\u003efind\"\u003eFind\u003c/button\u003e\n\u003c/div\u003e\n```\n\n```ts\nimport { Controller } from \"refable\";\n\nexport default class extends Controller {\n  find() {\n    //\n  }\n}\n```\n\n### Action Options\n\nYou can append one or more action options to an action descriptor if you need to specify event listener options.\n\n```html\n\u003cbutton data-action=\"click-\u003efind[:option]\"\u003eFind\u003c/button\u003e\n```\n\nFollowing action options are supported:\n\n```\n:capture\n:once\n:passive\n:stop\n:prevent\n```\n\n## Events\n\nThe Controller class has a method called dispatch that fires custom events. It takes an event name and an optional payload as arguments.\n\n```html\n\u003cdiv data-controller=\"search\"\u003e\n  \u003cbutton data-action=\"click-\u003efind\"\u003eFind\u003c/button\u003e\n\u003c/div\u003e\n```\n\n```ts\nimport { Controller } from \"refable\";\n\nexport default class extends Controller {\n  find(event: Event) {\n    this.dispatch(\"found\", { result: \"found\" });\n  }\n}\n```\n\nThe dispatched event can be catched with an action in a parent element and handled in a different controller like an action. Optional payload is in event parameter's detail property.\n\n## Plain JS Example\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n  \u003c/head\u003e\n  \u003cbody data-controller=\"home\"\u003e\n    \u003cscript type=\"module\"\u003e\n      import {\n        Application,\n        Controller,\n      } from \"https://cdn.jsdelivr.net/npm/refable@0.0.9/+esm\";\n\n      class Home extends Controller {\n        connected() {\n          console.log(\"Connected\");\n        }\n      }\n\n      const application = new Application();\n\n      application.register(\"home\", Home);\n      application.run();\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n","funding_links":["https://github.com/sponsors/ecmel","https://www.buymeacoffee.com/ecmel"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecmel%2Frefable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fecmel%2Frefable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecmel%2Frefable/lists"}