{"id":18008884,"url":"https://github.com/nudeui/element","last_synced_at":"2025-03-26T13:31:40.100Z","repository":{"id":238899433,"uuid":"797887600","full_name":"nudeui/element","owner":"nudeui","description":"Composable web component helpers for creating reactive web components that behave just like native HTML elements. WIP.","archived":false,"fork":false,"pushed_at":"2024-10-29T09:05:48.000Z","size":245,"stargazers_count":9,"open_issues_count":8,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-10-29T10:06:02.570Z","etag":null,"topics":["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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nudeui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-08T17:22:13.000Z","updated_at":"2024-10-29T08:57:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"6416a599-0e44-4230-9eca-340c7050f82f","html_url":"https://github.com/nudeui/element","commit_stats":null,"previous_names":["nudeui/element"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nudeui%2Felement","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nudeui%2Felement/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nudeui%2Felement/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nudeui%2Felement/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nudeui","download_url":"https://codeload.github.com/nudeui/element/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245662919,"owners_count":20652099,"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":["web-components"],"created_at":"2024-10-30T02:07:45.560Z","updated_at":"2025-03-26T13:31:39.753Z","avatar_url":"https://github.com/nudeui.png","language":"JavaScript","funding_links":[],"categories":["Libraries for building web components"],"sub_categories":[],"readme":"\u003cheader\u003e\n\n# Nude Element\n\nComposable web component helpers\nfor creating reactive web components that behave just like native HTML elements.\n\n\u003c/header\u003e\n\nElements can extend `NudeElement` to get the nicest, most declarative syntax,\nor import individual mixins as helper functions and use them with any `HTMLElement` subclass.\n\n**Note:** This is a work in progress, developed in the open.\nTry it and please report issues and provide feedback!\n\n## Features\n\n- Easy reactive attribute-property reflection (_props_)\n- Automatic dependency tracking (+ manual overrides)\n- Reactive dynamic default values, just like native HTML elements (e.g. having `value` default to `(this.min + this.max) / 2` in a slider)\n- Events that properly create `oneventname` attributes and props, just like native HTML elements\n- Accessible, form associated elements with a single line of code\n- No build process required, just import and use\n\n## Usage\n\n### No hassle, less control: the `NudeElement` class\n\nDefining your element as a subclass of `NudeElement` gives you the nicest, most declarative syntax.\n\n```js\nimport NudeElement from \"nude-element\";\n\nclass MySlider extends NudeElement {\n\tconstructor () {\n\t\t// ...\n\t}\n\n\tstatic props = {\n\t\tmin: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t\tmax: {\n\t\t\ttype: Number,\n\t\t\tdefault: 1,\n\t\t},\n\t\tstep: {\n\t\t\ttype: Number,\n\t\t\tdefault () {\n\t\t\t\treturn Math.abs((this.max - this.min) / 100);\n\t\t\t},\n\t\t},\n\t\tdefaultValue: {\n\t\t\ttype: Number,\n\t\t\tdefault () {\n\t\t\t\treturn (this.min + this.max) / 2;\n\t\t\t},\n\t\t\treflect: {\n\t\t\t\tfrom: \"value\",\n\t\t\t},\n\t\t},\n\t\tvalue: {\n\t\t\ttype: Number,\n\t\t\tdefaultProp: \"defaultValue\",\n\t\t\treflect: false,\n\t\t},\n\t};\n\n\tstatic events = {\n\t\t// Propagate event from shadow DOM element\n\t\tchange: {\n\t\t\tfrom () {\n\t\t\t\treturn this._el.slider;\n\t\t\t}\n\t\t},\n\n\t\t// Fire event when specific prop changes (even programmatically)\n\t\tvaluechange: {\n\t\t\tpropchange: \"value\",\n\t\t},\n\t};\n\n\tstatic formAssociated = {\n\t\tlike: el =\u003e el._el.slider,\n\t\trole: \"slider\",\n\t\tvalueProp: \"value\",\n\t\tchangeEvent: \"valuechange\",\n\t};\n}\n```\n\n### More hassle, more control: Composable mixins\n\nIf Nude Element taking over your parent class seems too intrusive,\nyou can implement the same API via one-off composable helper functions aka mixins,\nat the cost of handling some of the plumbing yourself.\n\nEach mixin modifies the base class in a certain way (e.g. adds properties \u0026 methods) and returns an init function,\nto be called once for each element,\neither at the end of its constructor or when it’s first connected.\nThis is what the example above would look like:\n\n```js\nimport {\n\tdefineProps,\n\tdefineEvents,\n\tdefineFormAssociated,\n} from \"nude-element\";\n\nclass MySlider extends HTMLElement {\n\tconstructor () {\n\t\t// ...\n\n\t\teventHooks.init.call(this);\n\t\tformAssociatedHooks.init.call(this);\n\t\tpropHooks.init.call(this);\n\t}\n}\n\nlet propHooks = defineProps(MySlider, {\n\tmin: {\n\t\ttype: Number,\n\t\tdefault: 0,\n\t},\n\tmax: {\n\t\ttype: Number,\n\t\tdefault: 1,\n\t},\n\tstep: {\n\t\ttype: Number,\n\t\tdefault () {\n\t\t\treturn Math.abs((this.max - this.min) / 100);\n\t\t},\n\t},\n\tdefaultValue: {\n\t\ttype: Number,\n\t\tdefault () {\n\t\t\treturn (this.min + this.max) / 2;\n\t\t},\n\t\treflect: {\n\t\t\tfrom: \"value\",\n\t\t},\n\t},\n\tvalue: {\n\t\ttype: Number,\n\t\tdefaultProp: \"defaultValue\",\n\t\treflect: false,\n\t},\n});\n\nlet eventHooks = defineEvents(MySlider, {\n\t// Propagate event from shadow DOM element\n\tchange: {\n\t\tfrom () {\n\t\t\treturn this._el.slider;\n\t\t}\n\t},\n\n\t// Fire event when specific prop changes (even programmatically)\n\tvaluechange: {\n\t\tpropchange: \"value\",\n\t},\n});\n\nlet formAssociatedHooks = defineFormAssociated(MySlider, {\n\tlike: el =\u003e el._el.slider,\n\trole: \"slider\",\n\tvalueProp: \"value\",\n\tchangeEvent: \"valuechange\",\n});\n```\n\nEach mixin will also look for a static `hooks` property on the element class and add its lifecycle hooks to it if it exists,\nso you can make things a little easier by defining such a property:\n\n```js\nimport { defineProps } from \"nude-element\";\nimport Hooks from \"nude-element/hooks\";\n\nclass MyElement extends HTMLElement {\n\t// Caution: if MyElement has subclasses, this will be shared among them!\n\tstatic hooks = new Hooks();\n\n\tconstructor () {\n\t\tsuper();\n\n\t\t// Then you can call the hooks at the appropriate times:\n\t\tthis.constructor.hooks.run(\"init\", this);\n\t}\n}\n\ndefineProps(MyElement, {\n\t// Props…\n});\n```\n\nRead more:\n- [Using Props](src/props/)\n- [Events](src/events/)\n- [Form-associated elements](src/formAssociated/)\n- [Mixins](src/mixins/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnudeui%2Felement","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnudeui%2Felement","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnudeui%2Felement/lists"}