{"id":22933064,"url":"https://github.com/beyondjs/widgets-bundle","last_synced_at":"2026-04-15T14:33:25.509Z","repository":{"id":268010908,"uuid":"816301362","full_name":"beyondjs/widgets-bundle","owner":"beyondjs","description":"BeyondJS widget bundle: Create and manage reusable UI components for scalable and modular applications.","archived":false,"fork":false,"pushed_at":"2024-12-16T00:04:59.000Z","size":13,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-01T17:56:34.914Z","etag":null,"topics":["typescript","web-components"],"latest_commit_sha":null,"homepage":"https://beyondjs.com","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/beyondjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-06-17T13:13:29.000Z","updated_at":"2024-12-16T00:05:03.000Z","dependencies_parsed_at":"2024-12-13T19:35:39.930Z","dependency_job_id":"5499dab5-5a2b-4df5-a874-40bd47ba7a33","html_url":"https://github.com/beyondjs/widgets-bundle","commit_stats":null,"previous_names":["beyondjs/widgets-bundle"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/beyondjs/widgets-bundle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondjs%2Fwidgets-bundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondjs%2Fwidgets-bundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondjs%2Fwidgets-bundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondjs%2Fwidgets-bundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beyondjs","download_url":"https://codeload.github.com/beyondjs/widgets-bundle/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondjs%2Fwidgets-bundle/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264614069,"owners_count":23637505,"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":["typescript","web-components"],"created_at":"2024-12-14T11:19:44.511Z","updated_at":"2026-04-15T14:33:20.484Z","avatar_url":"https://github.com/beyondjs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BeyondJS Widgets Bundle\n\n## Overview\n\nThe BeyondJS Widgets Bundle allows developers to create and manage UI components like pages and layouts using a widget\nsystem. Widgets are self-contained, reusable components that can be rendered in various parts of the application,\nproviding a flexible and modular approach to building user interfaces.\n\n## Features\n\n-   **Reusable Components**: Create self-contained widgets that can be reused across different parts of the application.\n-   **Layout and Page Widgets**: Support for creating layout widgets that define the structure of the application and\n    page widgets for specific views.\n-   **Configurable Properties**: Widgets can be customized through properties defined in the `module.json` file.\n-   **Support for Multiple Processors**: Widgets can use different processors like TypeScript, Sass, HTML, Vue, Svelte,\n    and more.\n\n## How It Works\n\nWidgets in BeyondJS are configured in the `module.json` file and processed to create reusable UI components. The widgets\ncan be registered, customized, and used throughout the application. The bundle handles the processing and registration\nof these widgets, ensuring they are ready for use in the application.\n\n### Configuration\n\nTo configure a widget bundle, you need to define it in your module's `module.json` file. Below is an example\nconfiguration:\n\n```json\n{\n\t\"name\": \"my-widget-bundle\",\n\t\"platforms\": [\"web\"],\n\t\"widget\": {\n\t\t\"element\": {\n\t\t\t\"name\": \"my-widget\",\n\t\t\t\"attrs\": [\"attr1\", \"attr2\"]\n\t\t},\n\t\t\"is\": \"page\",\n\t\t\"route\": \"/my-route\",\n\t\t\"render\": {\n\t\t\t\"csr\": true,\n\t\t\t\"ssr\": false\n\t\t}\n\t}\n}\n```\n\n### Key Properties\n\n-   **`name`**: The name of the bundle.\n-   **`platforms`**: Specifies the platforms the bundle supports.\n-   **`widget`**: Contains configuration details specific to the widget.\n    -   **`element`**: Defines the element name and attributes for the widget.\n        -   **`name`**: The name of the custom element.\n        -   **`attrs`**: An array of attributes that the element can accept.\n    -   **`is`**: Specifies the type of widget, such as `layout` or `page`.\n    -   **`route`**: Defines the route for page widgets.\n    -   **`render`**: Specifies rendering options.\n        -   **`csr`**: Client-side rendering (default is `true`).\n        -   **`ssr`**: Server-side rendering (default is `false`).\n\n## Types of Widgets\n\n### Layout Widgets\n\nLayout widgets define the overall structure of the application. They are used to create reusable layouts that can be\napplied to different parts of the application.\n\nExample configuration for a layout widget:\n\n```json\n{\n\t\"name\": \"my-layout-bundle\",\n\t\"type\": \"widget\",\n\t\"platforms\": [\"web\"],\n\t\"widget\": {\n\t\t\"element\": {\n\t\t\t\"name\": \"my-layout\",\n\t\t\t\"attrs\": [\"attr1\", \"attr2\"]\n\t\t},\n\t\t\"is\": \"layout\"\n\t}\n}\n```\n\n### Page Widgets\n\nPage widgets represent specific views or pages within the application. They can define their own routes and be rendered\nindependently.\n\nExample configuration for a page widget:\n\n```json\n{\n\t\"name\": \"my-page-bundle\",\n\t\"type\": \"widget\",\n\t\"platforms\": [\"web\"],\n\t\"widget\": {\n\t\t\"is\": \"page\",\n\t\t\"route\": \"/my-page\"\n        \"element\": {\n\t\t\t\"name\": \"my-page\",\n\t\t\t\"attrs\": [\"attr1\", \"attr2\"]\n\t\t}\n\n\t}\n}\n```\n\n## Best Practices\n\n-   **Naming Conventions**: Use meaningful names for widgets and attributes to make the code more readable and\n    maintainable.\n-   **Reusable Attributes**: Define reusable attributes for widgets to enhance modularity and flexibility.\n-   **Consistent Configuration**: Maintain a consistent configuration structure in the `module.json` file for better\n    readability and ease of maintenance.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyondjs%2Fwidgets-bundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeyondjs%2Fwidgets-bundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyondjs%2Fwidgets-bundle/lists"}