{"id":26159926,"url":"https://github.com/zaubrik/shadow","last_synced_at":"2025-04-14T11:03:06.760Z","repository":{"id":38305660,"uuid":"347481031","full_name":"Zaubrik/shadow","owner":"Zaubrik","description":"Simple base class for creating fast, lightweight Web Components with `htm`","archived":false,"fork":false,"pushed_at":"2024-05-28T20:27:19.000Z","size":148,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-29T11:24:46.725Z","etag":null,"topics":["customelements","jsdoc","shadowroot","webcomponents"],"latest_commit_sha":null,"homepage":"https://zaubrik.github.io/shadow/","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/Zaubrik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2021-03-13T21:19:49.000Z","updated_at":"2024-05-28T20:27:22.000Z","dependencies_parsed_at":"2024-03-31T16:23:47.935Z","dependency_job_id":"b6dba976-269d-4436-99e4-e2a347c1856a","html_url":"https://github.com/Zaubrik/shadow","commit_stats":{"total_commits":112,"total_committers":2,"mean_commits":56.0,"dds":"0.017857142857142905","last_synced_commit":"7fef15028cba3198d926d58e7688b381134d372a"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zaubrik%2Fshadow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zaubrik%2Fshadow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zaubrik%2Fshadow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zaubrik%2Fshadow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Zaubrik","download_url":"https://codeload.github.com/Zaubrik/shadow/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243029264,"owners_count":20224560,"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":["customelements","jsdoc","shadowroot","webcomponents"],"created_at":"2025-03-11T11:39:41.131Z","updated_at":"2025-03-11T11:39:41.750Z","avatar_url":"https://github.com/Zaubrik.png","language":"JavaScript","readme":"# shadow\n\nShadow is a simple base class for creating fast, lightweight\n[Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)\nwith [htm](https://github.com/developit/htm).\n\nWritten in JavaScript but **strictly typed** with\n[JSDoc](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html),\nyou don't need any transpiler or other tools. Although\n[deno](https://deno.land/) would certainly make the development process a\ngreater joy.\n\n## Quick Start\n\n#### Serve example\n\n```bash\ndeno task serve\n```\n\n#### Type check your custom element\n\n```bash\ndeno check ./examples/showcase/my_element.js\n```\n\n#### Print the documented API\n\n```bash\ndeno doc https://dev.zaubrik.com/shadow/mod.js\n```\n\n## Example\n\n```javascript\nimport { css, html, Shadow } from \"../../mod.js\";\n\nexport class MyElement extends Shadow {\n  colors = [\"yellow\", \"green\", \"pink\", \"red\", \"blue\", \"orange\"];\n  jsonUrl = null;\n  h1Content = 0;\n  firstContent = null;\n  secondContent = null;\n  anchorAttributes = {};\n\n  static properties = {\n    h1Content: {},\n    secondContent: {},\n    anchorAttributes: {},\n  };\n\n  static observedAttributes = [\"json-url\", \"first-content\"];\n\n  static styles = css`\n    :host {\n      display: block;\n      margin: 16px;\n    }\n    h1 {\n      color: blue;\n    }\n    #myButton {\n      border-radius: 30px;\n    }\n    .text {\n      margin: 50px;\n      color: brown;\n    }\n    a {\n      color: blue;\n    }\n    .myLi {\n      width: 200px;\n      background-color: pink;\n    }\n  `;\n\n  render() {\n    return html`\u003ch1\u003e${this.h1Content}\u003c/h1\u003e\n      \u003cbutton id=\"myButton\" click=${this.clickHandler}\u003eCount\u003c/button\u003e\n      \u003cp class=\"text\"\u003eYou can change values through...\u003c/p\u003e\n      \u003cp class=\"text\"\u003e${this.firstContent}\u003c/p\u003e\n      \u003cp class=\"text\"\u003e${this.secondContent}\u003c/p\u003e\n      \u003cul\u003e\n        ${\n      /**@type {string[]}*/ (this.jsonData.items).map((item) =\u003e\n        html`\u003cli @class=\"myLi\"\u003e${item}\u003c/li\u003e`\n      )\n    }\n      \u003c/ul\u003e\n      \u003cp class=\"text\"\u003e\u003ca ...${this.anchorAttributes}\u003eAnchor Text\u003c/a\u003e\u003c/p\u003e`;\n  }\n\n  updated() {\n    this.dom.class[\"myLi\"]?.forEach((li) =\u003e\n      setInterval(\n        () =\u003e (li.style.background =\n          this.colors[Math.floor(Math.random() * 6)]),\n        500,\n      )\n    );\n  }\n\n  clickHandler() {\n    return ++this.h1Content;\n  }\n}\n\nwindow.customElements.define(\"my-element\", MyElement);\n```\n\n## Attributes and Properties\n\n### Attributes\n\n- You can freely add and set attributes with the type `string | null`.\n- Changing an attribute alone does **not** cause a **rerendering** of the custom\n  element.\n- If you add an attribute to `observedAttributes`, `Shadow` assigns the observed\n  attribute's value to the element's property.\n  - The property must be defined on the class. Otherwise the property is\n    ignored.\n  - The property name is the _camel-cased_ attribute name.\n\n### Properties\n\nYou can freely define properties on your class. But you can also specify\nproperties which cause a **rerendering** of the custom element on new asignments\nwith:\n\n```ts\nstatic properties = { \u003cpropertyName\u003e : {\nreflect?: boolean,\nrender?: boolean,\nwait?: boolean,\nassert?: boolean,\nrpc?: string\n}}\n```\n\nYou can pass the following options:\n\n1. Setting 'reflect' to 'true' configures a property so that whenever it\n   changes, its value is reflected to its corresponding attribute. Only JSON\n   values can be reflected to attributes. (false)\n2. Setting 'render' to 'false' stops rerendering on property changes. (true)\n3. Wait for an assignment before rendering with the option 'wait'. (false)\n4. Assert with the option 'assert' if the input has a _truthy_ value. (false)\n5. Sets the RPC method name with `rpc`.\n\n## Discord\n\nFeel free to ask questions and start discussions in our\n[discord server](https://discord.gg/6spYphKXAt).\n\n## Contribution\n\nWe welcome and appreciate all contributions to shadow.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzaubrik%2Fshadow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzaubrik%2Fshadow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzaubrik%2Fshadow/lists"}