{"id":20513825,"url":"https://github.com/webreflection/hyperhtml-element","last_synced_at":"2025-04-05T07:03:26.285Z","repository":{"id":45178543,"uuid":"98658440","full_name":"WebReflection/hyperHTML-Element","owner":"WebReflection","description":"An extensible class to define hyperHTML based Custom Elements.","archived":false,"fork":false,"pushed_at":"2022-01-28T13:26:52.000Z","size":1257,"stargazers_count":201,"open_issues_count":0,"forks_count":25,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-03-29T06:05:53.209Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebReflection.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-28T14:39:37.000Z","updated_at":"2025-02-16T23:11:00.000Z","dependencies_parsed_at":"2022-09-10T11:52:36.647Z","dependency_job_id":null,"html_url":"https://github.com/WebReflection/hyperHTML-Element","commit_stats":null,"previous_names":[],"tags_count":70,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2FhyperHTML-Element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2FhyperHTML-Element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2FhyperHTML-Element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2FhyperHTML-Element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebReflection","download_url":"https://codeload.github.com/WebReflection/hyperHTML-Element/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247299831,"owners_count":20916190,"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":[],"created_at":"2024-11-15T21:13:21.238Z","updated_at":"2025-04-05T07:03:26.242Z","avatar_url":"https://github.com/WebReflection.png","language":"JavaScript","readme":"# hyperHTML-Element\n\n[![License: ISC](https://img.shields.io/badge/License-ISC-yellow.svg)](https://opensource.org/licenses/ISC) [![Build Status](https://travis-ci.org/WebReflection/hyperHTML-Element.svg?branch=master)](https://travis-ci.org/WebReflection/hyperHTML-Element) [![Greenkeeper badge](https://badges.greenkeeper.io/WebReflection/hyperHTML-Element.svg)](https://greenkeeper.io/) ![WebReflection status](https://offline.report/status/webreflection.svg)\n\nAn extensible class to define hyperHTML based Custom Elements.\n\n`npm install hyperhtml-element`\n\n#### hyperHTML included\n\nThis class attaches all `hyperHTML` methods to itself,\nwith the only exception of the `define` method,\nused in here to define Custom Elements instead.\n\nTo have same [define functionality](https://viperhtml.js.org/hyperhtml/documentation/#api-3),\nplease use `HyperHTMLElement.intent(...)` which provides exact same API.\n\n\n### Documentation\n\nYou can find more info about this helper in [hyperHTML documentation](https://viperhtml.js.org/hyperhtml/documentation/#components-2) page.\n\n\n\n### The Class\n\n```js\nconst HyperHTMLElement = require('hyperhtml-element');\n\nclass MyElement extends HyperHTMLElement {\n\n  // observed attributes are automatically defined as accessors\n  static get observedAttributes() { return ['key']; }\n\n  // boolean attributes are automatically defined as accessors\n  // and will set or remove the passed value\n  static get booleanAttributes() { return ['active']; }\n\n  // invoked once the component has been fully upgraded\n  // suitable to perform any sort of setup\n  // granted to be invoked right before either\n  // connectedCallback or attributeChangedCallback\n  created() {\n    // triggers automatically attributeChangedCallback\n    this.key = 'value';\n  }\n\n  attributeChangedCallback(name, prev, curr) {\n    // when invoked, attributes will be already reflected\n    // through their accessor\n    this.key === curr; // true, and curr === \"value\"\n    this.getAttribute('key') === this.key; // always true\n    this.render();\n  }\n\n  render() {\n    // lazily defined, this.html property points to an hyperHTML bound context\n    // which could be the element shadowRoot or the element itself.\n    // All events can be handled directly by the context, thanks to handleEvent\n    // https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38\n    return this.html`\n    Hello \u003cstrong onclick=${this}\u003eHyperHTMLElement\u003c/strong\u003e\n    ( ${this.state.clicks} )`;\n  }\n\n  // using the inherited handleEvent,\n  // events can be easily defined as methods with `on` prefix.\n  onclick(e) {\n    // `this` refers to the current custom element\n    console.log(this, 'click', e.target);\n    // state handling, updates the view\n    this.setState({clicks: this.state.clicks + 1});\n  }\n\n  // alternatively, you can specify a `data-call`\n  // attribute with the name of the method to invoke\n  // this.html`\u003ci data-call=onAnyEvent onclick=${this}\u003etry\u003c/i\u003e`;\n  onAnyEvent(e) {\n    // `this` still refers to the current custom element\n    console.log(this, e.type, e.currentTarget, e.target);\n  }\n\n  // you can also use Preact-like events handling\n  // this is less efficient, but migration friendly.\n  // The method is bound once per instance so that\n  // this.handleClick === this.handleClick is always true\n  // this.html`\u003ci onclick=${this.handleClick}\u003etry\u003c/i\u003e`;\n  handleClick(e) {\n    // `this` still refers to the current custom element\n    console.log(this, e.type, e.currentTarget, e.target);\n  }\n\n  // define a default state to use whenever this.state is accessed\n  // it can create states from observed properties too\n  get defaultState() {\n    return {clicks: 0, key: this.key};\n  }\n\n  // this method is Preact friendly, once invoked\n  // as this.setState({new: 'value'});\n  // it will shallow copy properties over\n  // and it will invoke this.render() right after\n  setState(objOrFn)\n\n  // all other native Custom Elements method works as usual\n  // connectedCallback() { ... }\n  // adoptedCallback() { ... }\n}\n\n// classes must be defined through their public static method\n// this is the moment the class will be fully setup once\n// and registered to the customElements Registry.\nMyElement.define('my-element');\n```\n\n#### New in v1.8\n\nYou can now define custom elements builtins too:\n```js\nclass MyLink extends HyperHTMLElement {\n  created() { this.render(); }\n  render() {\n    return this.html`hello there!`;\n  }\n}\nMyLink.define('my-link', {extends: 'a'});\n```\n\n\n### Compatibility\n\n`HyperHTMLElement` is compatible with every mobile browser and IE11 or greater.\n\nThere is a [native live test](https://webreflection.github.io/hyperHTML-Element/test/) page also [transpiled for ES5](https://webreflection.github.io/hyperHTML-Element/test/?es5) browsers.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fhyperhtml-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebreflection%2Fhyperhtml-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Fhyperhtml-element/lists"}