{"id":13658259,"url":"https://github.com/mikeal/rza","last_synced_at":"2025-04-15T11:50:31.808Z","repository":{"id":66002984,"uuid":"106131054","full_name":"mikeal/rza","owner":"mikeal","description":"Create simple HTML elements","archived":false,"fork":false,"pushed_at":"2018-02-14T22:41:27.000Z","size":33,"stargazers_count":92,"open_issues_count":0,"forks_count":8,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-18T06:35:30.326Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/mikeal.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":"2017-10-07T21:15:37.000Z","updated_at":"2022-08-05T22:34:46.000Z","dependencies_parsed_at":"2023-06-10T04:00:41.489Z","dependency_job_id":null,"html_url":"https://github.com/mikeal/rza","commit_stats":{"total_commits":26,"total_committers":1,"mean_commits":26.0,"dds":0.0,"last_synced_commit":"e42a9dbbbac09c67d8827de771887eed3d74e7f3"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikeal%2Frza","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikeal%2Frza/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikeal%2Frza/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikeal%2Frza/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mikeal","download_url":"https://codeload.github.com/mikeal/rza/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249067150,"owners_count":21207392,"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-08-02T05:00:58.087Z","updated_at":"2025-04-15T11:50:31.790Z","avatar_url":"https://github.com/mikeal.png","language":"JavaScript","readme":"# RZA \n\nCreate simple HTML elements\n\n\u003cp\u003e\n  \u003ca href=\"https://www.patreon.com/bePatron?u=880479\"\u003e\n    \u003cimg src=\"https://c5.patreon.com/external/logo/become_a_patron_button.png\" height=\"40px\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n```javascript\nconst RZA = require('rza')\n\nclass MyElement extends RZA {\n  get defaults () {\n    // default render settings\n    return { wrap: false }\n  }\n  async render (settings, innerHTML) {\n    if (settings.wrap) {\n      return `\u003cspan\u003e${innerHTML}\u003c/span\u003e`\n    } else {\n      return innerHTML\n    }\n  }\n}\n\nwindow.customElements.define('my-element', MyElement)\n```\n\n```html\n\u003c!-- Example w/ defaults --\u003e\n\u003cmy-element\u003eTest\u003c/my-element\u003e\n\n\u003c!-- Renders --\u003e\n\n\u003cmy-element\u003e\n  \u003crender\u003eTest\u003c/render\u003e\n\u003c/my-element\u003e\n\n\u003c!-- Example w/ property set --\u003e\n\n\u003cmy-element wrap\u003eTest\u003c/my-element\u003e\n\n\u003c!-- Renders --\u003e\n\n\u003cmy-element\u003e\n  \u003crender\u003e\n    \u003cspan\u003eTest\u003c/span\u003e\n  \u003c/render\u003e\n\u003c/my-element\u003e\n\n\u003c!-- Setting properties dynamically cause re-rendering --\u003e\n\n\u003cscript\u003e\n  let elem = document.querySelector('my-element')\n  elem.setAttribute('wrap', false)\n  /* or we can just set element properties for the same thing */\n  elem.wrap = false\n  /* changing the element value ALSO triggers a rerender */\n  elem.textContent = 'New Test'\n\u003c/script\u003e\n\n\u003c!-- Triggers a Render, batched into a single render() call. --\u003e\n\n\u003cmy-element\u003e\n  \u003crender\u003eNew Test\u003c/render\u003e\n\u003c/my-element\u003e\n```\n\nSee also: [markdown-element](https://github.com/mikeal/markdown-element).\n\n\n## render() function.\n\nThe render function you define will be called whenever relevant state\n(settings) are altered.\n\nReturning a string will reset the innerHTML of the `\u003crender\u003e` element.\n\nReturning the previous element value is a `noop`, RZA assumes that because\nyou are returning the prior element you have manipulated it correctly.\n\nReturning an HTML Element will append that element as a child and put\nit in the `render` slot of the shadowDOM so that it can be seen.\n\n## default types.\n\nSetting an array for defaults defines those property names as settings\nbut with no real defaults.\n\nThis means that element attributes and properties of these names will\nbe treated as settings, and alterations to them will cause re-renders.\n\n```javascript\nclass MyElement extends RZA {\n  get defaults () {\n    return ['propname']\n  }\n}\n```\n\nFunctions (sync and async) can be used as dynamic initializers for\ndefault properties.\n\n```javascript\nclass MyElement extends RZA {\n  get defaults () {\n    return { prop: async () =\u003e 'example' }\n  }\n}\n```\n","funding_links":["https://www.patreon.com/bePatron?u=880479"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikeal%2Frza","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikeal%2Frza","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikeal%2Frza/lists"}