https://github.com/beyondjs/svelte-bundler
https://github.com/beyondjs/svelte-bundler
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/beyondjs/svelte-bundler
- Owner: beyondjs
- Created: 2024-06-13T10:00:17.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-24T19:52:52.000Z (about 1 year ago)
- Last Synced: 2025-05-24T20:35:35.411Z (about 1 year ago)
- Language: JavaScript
- Size: 12.7 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BeyondJS Processor for Svelte
## Introduction
BeyondJS is an innovative JavaScript framework designed to streamline development across various environments like
browsers, Node.js, Deno, and Bun. A key component of BeyondJS is its processor system, which efficiently manages
JavaScript modules and packages. When working with Svelte, BeyondJS provides specific processors to handle Svelte files
seamlessly.
## What is a BeyondJS Processor?
A BeyondJS processor is a tool used to handle specific types of files within a project. For Svelte projects, the Svelte
processor compiles and bundles Svelte components, ensuring that they integrate smoothly with the rest of the
application.
## Setting Up BeyondJS Processor for Svelte
### Creating a Svelte Module
To create a new Svelte module in BeyondJS, you need to create a folder for your module and add a `module.json` file to
configure the Svelte processor.
### Example `module.json` Configuration
```json
{
"bundles": {
"js": { "processor": "svelte" },
"css": { "processor": "sass" }
}
}
```
In this configuration:
- The `js` bundle is processed using the Svelte processor.
- The `css` bundle is processed using the SASS processor.
### Example Directory Structure
```
my-svelte-module/
├── src/
│ ├── App.svelte
│ └── main.ts
├── module.json
```
### Example Svelte Component (`App.svelte`)
```svelte
let count = 0;
h1 {
color: purple;
}
Hello Svelte!
count += 1}>
Count: {count}
```
### Main Entry File (`main.ts`)
```typescript
import App from './App.svelte';
const app = new App({
target: document.body,
});
export default app;
```
## Benefits of Using BeyondJS Processor for Svelte
1. **Modular Bundling**:
- Each Svelte component is bundled independently, leading to faster loading times and better performance.
2. **Automatic Exports Generation**:
- BeyondJS automatically handles the exports during the build process, eliminating the need for manual
configuration.
3. **Lazy Module Generation**:
- Modules are generated in a lazy mode, resulting in quick start times for the development server.
4. **Integration with SASS**:
- The configuration allows using SASS for styling Svelte components, providing a seamless integration of both
technologies.
## Conclusion
The BeyondJS processor for Svelte simplifies the development process by automating the compilation and bundling of
Svelte components. This modular approach enhances efficiency, performance, and flexibility, enabling developers to build
scalable and maintainable applications. By leveraging BeyondJS, you can focus on developing high-quality Svelte
applications with ease.