@elenajs/bundler 0.7.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +200 -0
- package/package.json +6 -6
package/README.md
ADDED
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
<picture>
|
|
3
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://elenajs.com/img/elena-dark.png" alt="Elena" width="201" height="230">
|
|
4
|
+
</source>
|
|
5
|
+
<source media="(prefers-color-scheme: light)" srcset="https://elenajs.com/img/elena.png" alt="Elena" width="201" height="230">
|
|
6
|
+
</source>
|
|
7
|
+
<img src="https://elenajs.com/img/elena.png" alt="Elena" width="201" height="230">
|
|
8
|
+
</picture>
|
|
9
|
+
|
|
10
|
+
### Bundler for Progressive Web Component libraries built with Elena.
|
|
11
|
+
|
|
12
|
+
<br/>
|
|
13
|
+
|
|
14
|
+
<a href="https://arielsalminen.com"><img src="https://img.shields.io/badge/creator-@arielle-F95B1F" alt="Creator @arielle"/></a>
|
|
15
|
+
<a href="https://www.npmjs.com/package/@elenajs/bundler"><img src="https://img.shields.io/npm/v/@elenajs/bundler.svg" alt="Latest version on npm" /></a>
|
|
16
|
+
<a href="https://github.com/getelena/elena/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-yellow.svg" alt="Elena is released under the MIT license." /></a>
|
|
17
|
+
<a href="https://github.com/getelena/elena/actions/workflows/tests.yml"><img src="https://github.com/getelena/elena/actions/workflows/tests.yml/badge.svg" alt="Tests status" /></a>
|
|
18
|
+
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<br/>
|
|
22
|
+
|
|
23
|
+
<p align="center"><strong>@elenajs/bundler</strong> is the build tool for <a href="https://elenajs.com">Elena</a> Progressive Web Component libraries. It bundles JavaScript and TypeScript source files, minifies CSS, generates a <a href="https://custom-elements-manifest.open-wc.org/">Custom Elements Manifest</a>, and produces TypeScript declarations for Elena components.</p>
|
|
24
|
+
|
|
25
|
+
<br/>
|
|
26
|
+
|
|
27
|
+
## Table of contents
|
|
28
|
+
|
|
29
|
+
- **[Install](#install)**
|
|
30
|
+
- **[CLI usage](#cli-usage)**
|
|
31
|
+
- **[Configuration](#configuration)**
|
|
32
|
+
- **[Options](#options)**
|
|
33
|
+
- **[Build output](#build-output)**
|
|
34
|
+
- **[Programmatic API](#programmatic-api)**
|
|
35
|
+
|
|
36
|
+
## Install
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
npm install --save-dev @elenajs/bundler
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## CLI usage
|
|
43
|
+
|
|
44
|
+
The bundler provides an `elena` CLI binary with a single `build` command:
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
npx elena build
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
If no command is provided, `build` is assumed:
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
npx elena
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Configuration
|
|
57
|
+
|
|
58
|
+
Create an `elena.config.mjs` (or `elena.config.js`) at the root of your package:
|
|
59
|
+
|
|
60
|
+
```js
|
|
61
|
+
/**
|
|
62
|
+
* ░ [ELENA]: Bundler configuration
|
|
63
|
+
*
|
|
64
|
+
* @type {import("@elenajs/bundler").ElenaConfig}
|
|
65
|
+
*/
|
|
66
|
+
export default {
|
|
67
|
+
// Source directory scanned for .js/.ts entry files and .css files.
|
|
68
|
+
input: "src",
|
|
69
|
+
|
|
70
|
+
// Rollup output options.
|
|
71
|
+
output: {
|
|
72
|
+
dir: "dist",
|
|
73
|
+
format: "esm",
|
|
74
|
+
sourcemap: true,
|
|
75
|
+
},
|
|
76
|
+
|
|
77
|
+
// Entry for the single-file bundle. Set to false to disable.
|
|
78
|
+
bundle: "src/index.js",
|
|
79
|
+
|
|
80
|
+
// Additional Rollup plugins appended after Elena’s built-in set.
|
|
81
|
+
// plugins: [],
|
|
82
|
+
|
|
83
|
+
// Custom Elements Manifest options.
|
|
84
|
+
// analyze: {
|
|
85
|
+
// plugins: [],
|
|
86
|
+
// },
|
|
87
|
+
};
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### Options
|
|
91
|
+
|
|
92
|
+
| Option | Type | Default | Description |
|
|
93
|
+
| ------------------ | ----------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
|
94
|
+
| `input` | `string` | `"src"` | Source directory to scan for `.js`, `.ts`, and `.css` files. |
|
|
95
|
+
| `output.dir` | `string` | `"dist"` | Output directory for compiled files. |
|
|
96
|
+
| `output.format` | `string` | `"esm"` | Rollup output format. |
|
|
97
|
+
| `output.sourcemap` | `boolean` | `true` | Whether to emit sourcemaps. |
|
|
98
|
+
| `bundle` | `string \| false` | `"src/index.js"` | Entry point for the single-file bundle. Auto-detects `src/index.ts` if no `.js` entry exists. Set to `false` to disable. |
|
|
99
|
+
| `plugins` | `Plugin[]` | `[]` | Additional Rollup plugins appended after the built-in set. |
|
|
100
|
+
| `analyze.plugins` | `Plugin[]` | `[]` | Additional CEM analyzer plugins. |
|
|
101
|
+
|
|
102
|
+
## Build output
|
|
103
|
+
|
|
104
|
+
Running `elena build` produces:
|
|
105
|
+
|
|
106
|
+
| File | Description |
|
|
107
|
+
| --------------------------- | ---------------------------------------------------------------------------------------------------- |
|
|
108
|
+
| `dist/*.js` | Individual ES modules for each source file. |
|
|
109
|
+
| `dist/*.css` | Minified individual CSS files. |
|
|
110
|
+
| `dist/bundle.js` | Single-file JavaScript bundle _(optional)_. |
|
|
111
|
+
| `dist/bundle.css` | Concatenated and minified CSS bundle. |
|
|
112
|
+
| `dist/custom-elements.json` | [Custom Elements Manifest](https://custom-elements-manifest.open-wc.org/) describing all components. |
|
|
113
|
+
| `dist/custom-elements.d.ts` | JSX integration types mapping tag names to prop types. |
|
|
114
|
+
| `dist/*.d.ts` | Per-component TypeScript declarations with typed props and events. |
|
|
115
|
+
|
|
116
|
+
## TypeScript support
|
|
117
|
+
|
|
118
|
+
The bundler supports both JavaScript and TypeScript source files. When `.ts` files are detected in the source directory, the bundler automatically transpiles them to JavaScript using `@rollup/plugin-typescript`. The output is identical to what you get from JavaScript sources.
|
|
119
|
+
|
|
120
|
+
To use TypeScript, write your components with inline type annotations instead of JSDoc:
|
|
121
|
+
|
|
122
|
+
```ts
|
|
123
|
+
import { Elena, html } from "@elenajs/core";
|
|
124
|
+
|
|
125
|
+
export default class Button extends Elena(HTMLElement, {
|
|
126
|
+
tagName: "elena-button",
|
|
127
|
+
props: ["variant"],
|
|
128
|
+
}) {
|
|
129
|
+
/**
|
|
130
|
+
* The style variant of the component.
|
|
131
|
+
* @attribute
|
|
132
|
+
*/
|
|
133
|
+
variant: "default" | "primary" | "danger" = "default";
|
|
134
|
+
|
|
135
|
+
render() {
|
|
136
|
+
return html`<button>${this.text}</button>`;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
Button.define();
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
A `tsconfig.json` is required in the project root. A minimal configuration:
|
|
143
|
+
|
|
144
|
+
```json
|
|
145
|
+
{
|
|
146
|
+
"compilerOptions": {
|
|
147
|
+
"target": "ES2020",
|
|
148
|
+
"module": "ESNext",
|
|
149
|
+
"moduleResolution": "bundler",
|
|
150
|
+
"skipLibCheck": true
|
|
151
|
+
},
|
|
152
|
+
"include": ["src"]
|
|
153
|
+
}
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
> **Note:** The bundler handles TypeScript declarations separately via the CEM analyzer, you do not need `declaration: true` in your `tsconfig.json`.
|
|
157
|
+
|
|
158
|
+
## Programmatic API
|
|
159
|
+
|
|
160
|
+
The bundler exports its internals so you can integrate it into your own build scripts:
|
|
161
|
+
|
|
162
|
+
```js
|
|
163
|
+
import {
|
|
164
|
+
createRollupConfig,
|
|
165
|
+
runRollupBuild,
|
|
166
|
+
createCemConfig,
|
|
167
|
+
runCemAnalyze,
|
|
168
|
+
} from "@elenajs/bundler";
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
Sub-path imports are also available:
|
|
172
|
+
|
|
173
|
+
```js
|
|
174
|
+
import { createRollupConfig, runRollupBuild } from "@elenajs/bundler/rollup";
|
|
175
|
+
import { createCemConfig, runCemAnalyze } from "@elenajs/bundler/cem";
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
### `createRollupConfig(options?)`
|
|
179
|
+
|
|
180
|
+
Returns a Rollup configuration array. Useful if you want to wrap or extend the config in a custom `rollup.config.js`.
|
|
181
|
+
|
|
182
|
+
### `runRollupBuild(config)`
|
|
183
|
+
|
|
184
|
+
Runs both build phases (individual modules + optional single-file bundle) programmatically.
|
|
185
|
+
|
|
186
|
+
### `createCemConfig(options?)`
|
|
187
|
+
|
|
188
|
+
Returns the Custom Elements Manifest analyzer configuration object.
|
|
189
|
+
|
|
190
|
+
### `runCemAnalyze(config, cwd?)`
|
|
191
|
+
|
|
192
|
+
Runs the CEM analysis and writes `custom-elements.json`, `custom-elements.d.ts`, and per-component `.d.ts` files.
|
|
193
|
+
|
|
194
|
+
## License
|
|
195
|
+
|
|
196
|
+
MIT
|
|
197
|
+
|
|
198
|
+
## Copyright
|
|
199
|
+
|
|
200
|
+
Copyright © 2026 [Ariel Salminen](https://arielsalminen.com)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elenajs/bundler",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "Bundler for Progressive Web Component libraries built with Elena.",
|
|
5
5
|
"author": "Elena <hi@elenajs.com>",
|
|
6
6
|
"homepage": "https://elenajs.com/",
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@custom-elements-manifest/analyzer": "0.11.0",
|
|
31
|
-
"@elenajs/plugin-cem-define": "^0.
|
|
32
|
-
"@elenajs/plugin-cem-tag": "^0.
|
|
33
|
-
"@elenajs/plugin-cem-typescript": "^0.
|
|
34
|
-
"@elenajs/plugin-rollup-css": "^0.
|
|
31
|
+
"@elenajs/plugin-cem-define": "^0.3.0",
|
|
32
|
+
"@elenajs/plugin-cem-tag": "^0.3.0",
|
|
33
|
+
"@elenajs/plugin-cem-typescript": "^0.4.0",
|
|
34
|
+
"@elenajs/plugin-rollup-css": "^0.5.0",
|
|
35
35
|
"@rollup/plugin-node-resolve": "16.0.3",
|
|
36
36
|
"@rollup/plugin-terser": "0.4.4",
|
|
37
37
|
"@rollup/plugin-typescript": "^12.1.0",
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"vitest": "4.0.18"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "c181af0625f691a95a5cb1ef9adb0d7f2c796eae"
|
|
50
50
|
}
|