https://github.com/beyondjs/widgets-bundle
BeyondJS widget bundle: Create and manage reusable UI components for scalable and modular applications.
https://github.com/beyondjs/widgets-bundle
typescript web-components
Last synced: 2 months ago
JSON representation
BeyondJS widget bundle: Create and manage reusable UI components for scalable and modular applications.
- Host: GitHub
- URL: https://github.com/beyondjs/widgets-bundle
- Owner: beyondjs
- License: mit
- Created: 2024-06-17T13:13:29.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-16T00:04:59.000Z (over 1 year ago)
- Last Synced: 2025-04-01T17:56:34.914Z (about 1 year ago)
- Topics: typescript, web-components
- Language: JavaScript
- Homepage: https://beyondjs.com
- Size: 12.7 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# BeyondJS Widgets Bundle
## Overview
The BeyondJS Widgets Bundle allows developers to create and manage UI components like pages and layouts using a widget
system. Widgets are self-contained, reusable components that can be rendered in various parts of the application,
providing a flexible and modular approach to building user interfaces.
## Features
- **Reusable Components**: Create self-contained widgets that can be reused across different parts of the application.
- **Layout and Page Widgets**: Support for creating layout widgets that define the structure of the application and
page widgets for specific views.
- **Configurable Properties**: Widgets can be customized through properties defined in the `module.json` file.
- **Support for Multiple Processors**: Widgets can use different processors like TypeScript, Sass, HTML, Vue, Svelte,
and more.
## How It Works
Widgets in BeyondJS are configured in the `module.json` file and processed to create reusable UI components. The widgets
can be registered, customized, and used throughout the application. The bundle handles the processing and registration
of these widgets, ensuring they are ready for use in the application.
### Configuration
To configure a widget bundle, you need to define it in your module's `module.json` file. Below is an example
configuration:
```json
{
"name": "my-widget-bundle",
"platforms": ["web"],
"widget": {
"element": {
"name": "my-widget",
"attrs": ["attr1", "attr2"]
},
"is": "page",
"route": "/my-route",
"render": {
"csr": true,
"ssr": false
}
}
}
```
### Key Properties
- **`name`**: The name of the bundle.
- **`platforms`**: Specifies the platforms the bundle supports.
- **`widget`**: Contains configuration details specific to the widget.
- **`element`**: Defines the element name and attributes for the widget.
- **`name`**: The name of the custom element.
- **`attrs`**: An array of attributes that the element can accept.
- **`is`**: Specifies the type of widget, such as `layout` or `page`.
- **`route`**: Defines the route for page widgets.
- **`render`**: Specifies rendering options.
- **`csr`**: Client-side rendering (default is `true`).
- **`ssr`**: Server-side rendering (default is `false`).
## Types of Widgets
### Layout Widgets
Layout widgets define the overall structure of the application. They are used to create reusable layouts that can be
applied to different parts of the application.
Example configuration for a layout widget:
```json
{
"name": "my-layout-bundle",
"type": "widget",
"platforms": ["web"],
"widget": {
"element": {
"name": "my-layout",
"attrs": ["attr1", "attr2"]
},
"is": "layout"
}
}
```
### Page Widgets
Page widgets represent specific views or pages within the application. They can define their own routes and be rendered
independently.
Example configuration for a page widget:
```json
{
"name": "my-page-bundle",
"type": "widget",
"platforms": ["web"],
"widget": {
"is": "page",
"route": "/my-page"
"element": {
"name": "my-page",
"attrs": ["attr1", "attr2"]
}
}
}
```
## Best Practices
- **Naming Conventions**: Use meaningful names for widgets and attributes to make the code more readable and
maintainable.
- **Reusable Attributes**: Define reusable attributes for widgets to enhance modularity and flexibility.
- **Consistent Configuration**: Maintain a consistent configuration structure in the `module.json` file for better
readability and ease of maintenance.