https://github.com/beyondjs/code-bundler
The BeyondJS Code Bundle supports multiple processors , allowing you to encapsulate various technologies within your application. It generates independent style bundles (bundle-name.css) for enhanced modularity and maintainability. Ideal for integrating diverse technologies seamlessly and efficiently.
https://github.com/beyondjs/code-bundler
Last synced: 12 months ago
JSON representation
The BeyondJS Code Bundle supports multiple processors , allowing you to encapsulate various technologies within your application. It generates independent style bundles (bundle-name.css) for enhanced modularity and maintainability. Ideal for integrating diverse technologies seamlessly and efficiently.
- Host: GitHub
- URL: https://github.com/beyondjs/code-bundler
- Owner: beyondjs
- License: mit
- Created: 2024-06-17T13:25:18.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-27T00:07:41.000Z (about 1 year ago)
- Last Synced: 2025-06-05T14:42:06.397Z (about 1 year ago)
- Language: JavaScript
- Size: 14.6 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# BeyondJS Code Bundle
## Overview
The BeyondJS Code Bundle is a versatile and powerful bundle designed to handle multiple processors, making it ideal for
projects that require the integration of different technologies. This bundle supports a wide range of processors,
allowing you to encapsulate various technologies within your application.
## Features
- **Multi-Processor Support**: Seamlessly integrates TypeScript, JavaScript, JSX, Sass, Less, SCSS, Svelte, Vue, and
MDX.
- **Independent Style Bundles**: CSS processors like Sass and Less generate independent bundles of styles
(`bundle-name.css`).
- **Template Support**: Allows for templating within the bundle to enhance modularity and reusability.
## Configuration
The configuration for the Code Bundle is defined in your module's `module.json` file. Below is an example configuration:
```json
{
"name": "my-code-bundle",
"platforms": ["web"],
"code": {
"ts": {
"path": "ts",
"files": "*"
},
"scss": {
"path": "scss",
"files": "*"
}
}
}
```
### Key Properties
- **`bundles`**: Specifies the list of bundles in the module.
- **`name`**: The name of the bundle.
- **`type`**: The type of bundle, which should be set to `code` for this configuration.
- **`platforms`**: Specifies the platforms the bundle supports.
- **`code`**: Contains configuration details specific to the code bundle.
- **`processors`**: Lists the processors supported by the bundle.
## Processors
The Code Bundle supports the following processors, each handling different file types and technologies:
- **TypeScript (`ts`)**: Compiles TypeScript files.
- **JavaScript (`js`)**: Handles standard JavaScript files.
- **JSX (`jsx`)**: Processes JSX files, typically used with React.
- **Less (`less`)**: Compiles Less files into CSS.
- **SCSS (`scss`)**: Compiles SCSS files into CSS.
- **Svelte (`svelte`)**: Compiles Svelte components.
- **Vue (`vue`)**: Compiles Vue components.
- **MDX (`mdx`)**: Processes MDX files, which allow you to write JSX in Markdown.
### Independent Style Bundles
When using CSS processors like Sass, Less, or SCSS, the Code Bundle generates an independent style bundle named
`bundle-name.css`. This approach ensures that your styles are modular and can be independently managed, improving the
maintainability and scalability of your application.
## Example
Here is a basic example of how to set up a module with the Code Bundle in BeyondJS:
1. **Create a `module.json` file** in your module directory with the following content:
```json
{
"name": "my-code-bundle",
"platforms": ["web"],
"code": {
"ts": {
"path": "ts",
"files": "*"
},
"scss": {
"path": "scss",
"files": "*"
}
}
}```
2. **Add your source files** to the appropriate directories for each processor.
3. **Build your project** to see the generated JavaScript and CSS bundles.