{"id":20020672,"url":"https://github.com/netcentric/eddys-custom-element","last_synced_at":"2026-06-10T15:32:06.395Z","repository":{"id":223499319,"uuid":"760445183","full_name":"Netcentric/eddys-custom-element","owner":"Netcentric","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-22T13:35:20.000Z","size":59,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-03-02T03:34:43.521Z","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":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Netcentric.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"docs/CODE_OF_CONDUCT.md","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-02-20T12:41:34.000Z","updated_at":"2024-02-20T14:31:48.000Z","dependencies_parsed_at":"2024-02-20T15:56:25.011Z","dependency_job_id":"f48e961c-b919-4c66-9f53-ade9f6ad2be0","html_url":"https://github.com/Netcentric/eddys-custom-element","commit_stats":null,"previous_names":["netcentric/eddys-custom-element"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/Netcentric/eddys-custom-element","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Netcentric%2Feddys-custom-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Netcentric%2Feddys-custom-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Netcentric%2Feddys-custom-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Netcentric%2Feddys-custom-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Netcentric","download_url":"https://codeload.github.com/Netcentric/eddys-custom-element/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Netcentric%2Feddys-custom-element/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34159250,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-13T08:33:36.426Z","updated_at":"2026-06-10T15:32:06.376Z","avatar_url":"https://github.com/Netcentric.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Eddy's Custom Element\n\nPlugin to allow decorate block as webcomponent / custom element\n\n## Installation\n\nHaving a forked project from https://github.com/adobe/aem-boilerplate\n\nYou can use by just\n\n`npm i @netcentric/eddys-custom-element`\n\nit will install the scripts at the root of your Edge delivery project under `libs/`\n\n## Usage\n\nA Regular block\n\n```javascript\nexport default function decorate(block) {\n  // your logic\n}\n```\n\nAs custom element and classes for extensablility and lifecicles\n\n```javascript\nimport curryDecorator from '../../libs/curry-decorate/curry-decorate.js';\n\nexport class Hero extends HTMLElement {\n  connectedCallback() {\n    // rendering is done then call onComponentComplete for showing\n    if (this.onComponentComplete) this.onComponentComplete(this);\n  }\n}\n// define a custom element name and constructor\nexport default curryDecorator('raqn-hero', Hero);\n```\n\nThat way you can create and extend components as classes and web components\n\n```javascript\nimport curryDecorator from '../../libs/curry-decorate/curry-decorate.js';\n\nexport class Stage extends Hero {\n  connectedCallback() {\n    // your logic\n    // call super for on complete or skip and call it\n    super.connectedCallback();\n  }\n}\nexport default curryDecorator('raqn-stage', Stage);\n```\n\n### Shadow Dom Component\n\n```javascript\nimport curryDecorator from '../../libs/curry-decorate/curry-decorate.js';\nimport ShadowDomComponent from '../../libs/shadow-dom-component/shadow-dom-component.js';\n\nexport class ShadowExample extends ShadowDomComponent {\n  connectedCallback() {\n    // your logic\n    // call super for on complete or skip and call it\n    super.connectedCallback();\n  }\n}\nexport default curryDecorator('raqn-shadow-example', Stage);\n```\n\nExtending that class will create a custom element with shadow dom where:\n\n1. Regular css should be used for avoiding CLS\n2. Inject a \\*.shadow.css of the component into the shadow dom\n\n```html\n\u003chead\u003e\n  \u003c!-- Regular Edge Delivery Block CSS --\u003e\n  \u003clink\n    rel=\"stylesheet\"\n    href=\"/blocks/your-custom-element/your-custom-element.css\"\n  /\u003e\n\u003c/head\u003e\n\u003cyour-custom-element\u003e\n  ~ #shadow-root (open) == $0\n  \u003c!-- Add a *.shadow.css into the shadow dom --\u003e\n  \u003clink\n    rel=\"stylesheet\"\n    href=\"/blocks/your-custom-element/your-custom-element.shadow.css\"\n  /\u003e\n\u003c/your-custom-element\u003e\n```\n\n### Custom Params Component\n\nThis allow the usage of attributes as class params in edge delivery\n\n1. Allow passing params from classes defined in Edge Delivery Services\n2. Allow sending params per breakpoint\n3. Convert classes into element attributes for usage as web components attributes.\n\nLet's check this content for example:\n\n![Grid](docs/assets/params-example.png)\n\nHere we have a block called grid, and there's 2 params defined\n\n1. `s-col` with represents a col attribute in S breakpoint\n2. `col` with represents all other breakpoints param\n\nThen we want our block to be a web component and receibe params\n\n1. we import the customElementsDecorate to create a custom element\n2. We extend CustomParamsComponent class to inherit attributes assignment\n\n```javascript\nimport customElementsDecorate from '../../libs/custom-element-decorate/custom-element-decorate.js';\nimport { CustomParamsComponent } from '../../libs/custom-params-component/custom-params-component.js';\n\nexport class Grid extends CustomParamsComponent {\n  ...\n}\n// create custom element\nexport default customElementsDecorate('eddys-grid', Grid);\n```\n\nSo now our block will look like this:\n\n```html\n\u003ceddys-grid class=\"grid s-col-1 col-3 block\" col=\"3\"\u003e\u003c/eddys-grid\u003e\n```\n\nIf you go to the S breakpoint it will look like\n\n```html\n\u003ceddys-grid class=\"grid s-col-1 col-3 block\" col=\"1\"\u003e\u003c/eddys-grid\u003e\n```\n\nNow that we setup the component let's create proper Web component feature\n\n- We use params to setup a grid.\n- We update the grid based on the param change.\n\nLet's enhance our component as a simple example\n\n```javascript\nimport customElementsDecorate from '../../libs/custom-element-decorate/custom-element-decorate.js';\nimport { CustomParamsComponent } from '../../libs/custom-params-component/custom-params-component.js';\n\nexport class Grid extends CustomParamsComponent {\n  // observe changes in the col attribute\n  static get observedAttributes() {\n    return ['col'];\n  }\n\n  // inicialize on connectedCallback\n  connectedCallback() {\n    // call the super for attribute setting\n    super.connectedCallback();\n    // setup grid variables\n    this.setupGrid();\n    // show component when complete\n    if (this.onComponentComplete) this.onComponentComplete(this);\n  }\n\n  // update variables and styles if col attribute is set\n  setupGrid() {\n    const cols = this.getAttribute('col');\n    if (!cols) {\n      return;\n    }\n    this.cols = parseInt(cols, 10);\n    this.area = Array.from(Array(this.cols))\n      .map(() =\u003e '1fr')\n      .join(' ');\n    this.style.setProperty('--grid-template-columns', this.area);\n  }\n\n  // update grid if attribute is changed\n  attributeChangedCallback(name, oldValue, newValue) {\n    if (name === 'col' \u0026\u0026 oldValue !== newValue) this.setupGrid();\n  }\n}\n// create custom element\nexport default customElementsDecorate('eddys-grid', Grid);\n```\n\n### Breakpoints\n\nBreakpoints can be overriden by `window.eddysBreakpoints` global\n```javascript\nwindow.eddysBreakpoints = {\n  s: 0,\n  m: 600,\n  l: 900,\n  xl: 1200,\n  xxl: 1500,\n};\n```\n\n### Docs\n\n- LICENSE\n- docs/CODE_OF_CONDUCT.md\n- docs/CONTRIBUTING.md\n- docs/CHANGELOG.md --\u003e dynamically updated\n\n### Issue template\n\n- .github/ISSUE_TEMPLATE.md\n\n### PR template\n\n- .github/PULL_REQUEST_TEMPLATE.md --\u003e automatically closes connected issue\n\n### Workflows\n\n- CI --\u003e npm ci, test and build\n- CodeQL --\u003e Perform CodeQL Analysis (Security, etc.)\n- Release --\u003e semantic-release:\n  - Creates release notes\n  - Updates CHANGELOG\n  - Updates package.json version\n  - Creates Git tag/release\n  - Publish package to NPM\n- Manual Release --\u003e same as Release, but can be triggered manually in Actions tab\n\n### Release\n\n- based on Angular Commit Message Conventions in commits -\n  https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit-message-header\n- Commit message format is used to build:\n  - Release notes\n  - Changelog updates\n  - NPM package semver\n\n### Commit message Convention\n\n```\n\u003ctype\u003e(\u003cscope\u003e): \u003cshort summary\u003e\n│       │             │\n│       │             └─⫸ Summary in present tense. Not capitalized. No period at the end.\n│       │\n│       └─⫸ Commit Scope (optional): project|based|list\n│\n└─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetcentric%2Feddys-custom-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetcentric%2Feddys-custom-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetcentric%2Feddys-custom-element/lists"}