{"id":14990357,"url":"https://github.com/bake-js/-o-id","last_synced_at":"2025-04-12T02:10:22.439Z","repository":{"id":246526636,"uuid":"821381756","full_name":"bake-js/-O-id","owner":"bake-js","description":"-O-id is a lightweight and easy-to-use library for creating custom Web Components, focusing on simplicity and performance.","archived":false,"fork":false,"pushed_at":"2024-10-22T11:40:00.000Z","size":855,"stargazers_count":6,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-25T21:47:40.602Z","etag":null,"topics":["css","html","javascript","shadowroot","slot","template","webcomponents"],"latest_commit_sha":null,"homepage":"","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/bake-js.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-28T12:15:11.000Z","updated_at":"2024-10-22T11:40:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"692e6535-3153-4682-9437-54ba074ac06f","html_url":"https://github.com/bake-js/-O-id","commit_stats":{"total_commits":387,"total_committers":1,"mean_commits":387.0,"dds":0.0,"last_synced_commit":"81a249a0d15fcf4d43603292c9ef7b7bbc6f8dd2"},"previous_names":["bake-js/element"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bake-js%2F-O-id","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bake-js%2F-O-id/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bake-js%2F-O-id/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bake-js%2F-O-id/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bake-js","download_url":"https://codeload.github.com/bake-js/-O-id/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505929,"owners_count":21115354,"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":["css","html","javascript","shadowroot","slot","template","webcomponents"],"created_at":"2024-09-24T14:19:56.508Z","updated_at":"2025-04-12T02:10:22.412Z","avatar_url":"https://github.com/bake-js.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[🇧🇷 Leia em Português](./README.pt-BR.md) | [🇺🇸 Read in English](./README.md)\n\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=bake-js_-o-id\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=bake-js_-o-id)\n[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=bake-js_-o-id\u0026metric=bugs)](https://sonarcloud.io/summary/new_code?id=bake-js_-o-id)\n[![Code Smells](https://sonarcloud.io/api/project_badges/measure?project=bake-js_-o-id\u0026metric=code_smells)](https://sonarcloud.io/summary/new_code?id=bake-js_-o-id)\n[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=bake-js_-o-id\u0026metric=coverage)](https://sonarcloud.io/summary/new_code?id=bake-js_-o-id)\n[![Duplicated Lines (%)](https://sonarcloud.io/api/project_badges/measure?project=bake-js_-o-id\u0026metric=duplicated_lines_density)](https://sonarcloud.io/summary/new_code?id=bake-js_-o-id)\n\n# -O-id\n\n**-O-id** is a lightweight and efficient library for creating custom Web Components, focusing on simplicity and performance. Built entirely in JavaScript, **-O-id** ensures that your components are fast, lightweight, and easy to maintain. With an intuitive architecture and decorators like `@paint` and `@repaint`, developing reactive and modular components becomes simple and straightforward.\n\n## Why -O-id?\n\nThe name **-O-id** is inspired by Sigmund Freud's psychoanalytic theory. The \"**id**\" represents the most primitive part of the human personality, driving our fundamental instincts. Similarly, the **-O-id** library serves as an essential foundation for building web interfaces. The suffix \"**-O**\" symbolizes the transformation of ideas into tangible results—functional and efficient components.\n\n**-O-id** is not just a tool but a force driving interface creation, allowing developers to transform concepts into reality in an agile and intuitive way. This name highlights the importance of starting with a solid foundation, just as the \"**id**\" is the starting point in personality formation.\n\n## Installation\n\nTo install the library, use npm:\n\n```bash\nnpm install @bake-js/-o-id\n```\n\n\u003e **Note:** The library is also compatible with `yarn` and `bun`.\n\n## Usage Example\n\nBelow is a simple example of how to use the library to create an interactive counter:\n\n```javascript\nimport { define } from '@bake-js/-o-id';\nimport { css, html, paint, repaint } from '@bake-js/-o-id/dom';\nimport on from '@bake-js/-o-id/event';\n\nfunction component(self) {\n  return html`\n    \u003cbutton\u003eIncrement ${self.number}\u003c/button\u003e\n  `;\n}\n\nfunction style() {\n  return css`\n    button {\n      background: hsl(${(self.number * 30) % 360}, 100%, 50%);\n      border-radius: 8px;\n      color: #222222;\n      cursor: pointer;\n      font-size: 16px;\n      font-weight: 600;\n      line-height: 20px;\n      padding: 10px 20px;\n      border: 1px solid #222222;\n\n      \u0026:hover {\n        background: hsl(${(self.number * 30) % 360}, 50%, 50%);\n      }\n    }\n  `;\n}\n\n@define('o-id-counter')\n@paint(component, style)\nclass Counter extends HTMLElement {\n  #number;\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n  }\n\n  get number() {\n    return (this.#number ??= 0);\n  }\n\n  @repaint\n  set number(value) {\n    this.#number = value;\n  }\n\n  @on.click('button')\n  increment() {\n    this.number += 1;\n    return this;\n  }\n}\n```\n\nYou can view the interactive example on [CodePen](https://codepen.io/demgoncalves/pen/dyxpdLw?editors=1010).\n\n### Component Explanation\n\nThe example illustrates the creation of a custom element component named `o-id-counter`, representing a counter that can be incremented via a button. Below are the key features of the component:\n\n- **Element Definition:**\n  - The element is defined as `o-id-counter` using the `@define` decorator, and it uses Shadow DOM to encapsulate its styles and structure.\n\n- **Internal State:**\n  - The counter’s state is stored in a private property `#number`, starting at zero. The `get number()` method returns the current value, while the `set number(value)` method allows updates.\n\n- **Component Rendering:**\n  - The `component(self)` function generates the HTML structure for the button, and the `style()` function defines the applied CSS styles.\n\n- **Interactivity:**\n  - The `increment()` method is decorated with `@on.click('button')`, allowing the counter to be incremented with each button click. This method updates the state and re-renders the component automatically.\n\n### How to Use\n\nTo use this component in your application:\n\n1. Ensure the code is properly imported and defined.\n2. Add the `\u003co-id-counter\u003e\u003c/o-id-counter\u003e` element anywhere in your HTML.\n3. The component will be ready to use, incrementing the value with each button click.\n\nExample of usage in HTML:\n\n```html\n\u003co-id-counter\u003e\u003c/o-id-counter\u003e\n```\n\n\u003e This example demonstrates how **-O-id** simplifies the creation of interactive components with a clear and efficient syntax.\n\n## Demo\n\nTo see the **-O-id** library in action, check out our [interactive demo](https://github.com/bake-js/-o-id-demo).\n\n## Assistant\n\nIf you need help or guidance on how to use the **-O-id** library, feel free to access our [online assistant](https://hf.co/chat/assistant/6703c9dfe3610a31b5ef3523), which provides additional support and interactive documentation.\n\n## Documentation\n\nBelow you will find detailed documentation for the main modules of **-O-id**. Each link leads to the corresponding page where you can learn more about how to use and implement the features offered.\n\n- **[Lifecycle and Forms](https://github.com/bake-js/-o-id/blob/main/src/README.md)**: A complete guide to understanding and applying the main modules and decorators of **-O-id**.\n- **[DOM](https://github.com/bake-js/-o-id/blob/main/src/dom/README.md)**: Documentation on DOM manipulation and component rendering.\n- **[Event](https://github.com/bake-js/-o-id/blob/main/src/event/README.md)**: A guide for handling and responding to events within Web Components.\n- **[Relay](https://github.com/bake-js/-o-id/blob/main/src/relay/README.md)**: Facilitates listening to events emitted by a Custom Element's parentElement.\n- **[Echo](https://github.com/bake-js/-o-id/blob/main/src/echo/README.md)**: Documentation on the Echo event bus for communication between components. **Note:** This module is in beta and may be subject to changes.\n\n## Reference Index\n\n### Lifecycle\nDocumentation on the callbacks and methods related to the lifecycle of Custom Elements. These methods are essential for managing the state and changes of elements throughout their existence in the DOM.\n- [adopted](https://github.com/bake-js/-o-id/blob/main/src/adopted/README.md) - Callback invoked when a Custom Element is adopted into a new document.\n- [attributeChanged](https://github.com/bake-js/-o-id/blob/main/src/attributeChanged/README.md) - Callback invoked when an attribute of a Custom Element is changed.\n- [connected](https://github.com/bake-js/-o-id/blob/main/src/connected/README.md) - Callback invoked when a Custom Element is inserted into the DOM.\n- [disconnected](https://github.com/bake-js/-o-id/blob/main/src/disconnected/README.md) - Callback invoked when a Custom Element is removed from the DOM.\n- [define](https://github.com/bake-js/-o-id/blob/main/src/define/README.md) - Function to define and register a new Custom Element.\n\n### Lifecycle Associated with Forms\nInformation about the specific callbacks for Custom Elements interacting with forms. These callbacks are used to manage state and actions related to forms.\n- [formAssociated](https://github.com/bake-js/-o-id/blob/main/src/formAssociated/README.md) - Callback invoked when an element is associated with a form.\n- [formDisabled](https://github.com/bake-js/-o-id/blob/main/src/formDisabled/README.md) - Callback invoked when an element is disabled within a form.\n- [formReset](https://github.com/bake-js/-o-id/blob/main/src/formReset/README.md) - Callback invoked when an associated form is reset.\n- [formStateRestore](https://github.com/bake-js/-o-id/blob/main/src/formStateRestore/README.md) - Callback invoked to restore the form state.\n\n### DOM\nDocumentation on how to manipulate the DOM and create custom elements.\n- [css](https://github.com/bake-js/-o-id/blob/main/src/css/README.md) - Helper for creating custom CSS styles for Custom Elements.\n- [didPaint](https://github.com/bake-js/-o-id/blob/main/src/didPaint/README.md) - Decorator that allows logic execution after the component's rendering.\n- [html](https://github.com/bake-js/-o-id/blob/main/src/html/README.md) - Helper for generating clean and efficient HTML from templates.\n- [paint](https://github.com/bake-js/-o-id/blob/main/src/paint/README.md) - Decorator that calls the component's render function.\n- [repaint](https://github.com/bake-js/-o-id/blob/main/src/repaint/README.md) - Decorator that updates the component's rendering when its state changes.\n- [willPaint](https://github.com/bake-js/-o-id/blob/main/src/willPaint/README.md) - Decorator that allows logic execution before the component's rendering.\n\n### Events\nDocumentation on how to manage events in Custom Elements, facilitating communication and interactivity.\n- [on](https://github.com/bake-js/-o-id/blob/main/src/event/event/README.md) - Decorator for adding event listeners to elements.\n- [stop](https://github.com/bake-js/-o-id/blob/main/src/event/stop/README.md) - Filter that calls `event.stopPropagation()` and returns the event, preventing it from bubbling up the DOM tree.\n- [prevent](https://github.com/bake-js/-o-id/blob/main/src/event/prevent/README.md) - Filter that calls `event.preventDefault()` and returns the event, preventing the default action of the event.\n- [formData](https://github.com/bake-js/-o-id/blob/main/src/event/formData/README.md) - Filter that extracts form data and returns an object containing key-value pairs.\n- [value](https://github.com/bake-js/-o-id/blob/main/src/event/value/README.md) - Filter that retrieves the event's value, useful for inputs and selects.\n\n### Echo\nDocumentation on the Echo module, an event bus that enables efficient communication between components.\n- [echo](https://github.com/bake-js/-o-id/blob/main/src/echo/echo/README.md) - Module for communication between components, allowing simplified event emission and listening.\n\n## Contributing\n\nContributions are always welcome! Feel free to open issues or submit pull requests. To get started, check out the [contribution guidelines](https://github.com/bake-js/-o-id/blob/main/CONTRIBUTING.md).\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](https://github.com/bake-js/-o-id/blob/main/LICENSE) file for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbake-js%2F-o-id","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbake-js%2F-o-id","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbake-js%2F-o-id/lists"}