@locale-labs/miniapp-builder 0.1.8-dev.3.4f92a66 → 0.1.8-dev.42.8c1c10c
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 +11 -79
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,99 +1,31 @@
|
|
|
1
1
|
# @locale-labs/miniapp-builder
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
CLI que empaqueta una mini-app de Localé en un único `index.html` self-contained, listo para deployar al Kernel.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
> **Agente / contexto técnico:** [`NOTES/LEARNINGS.md`](./NOTES/LEARNINGS.md) — pipeline detallado, SDK resolution, version format, gotchas, release flow.
|
|
6
6
|
|
|
7
|
-
##
|
|
8
|
-
|
|
9
|
-
This package is usually installed as a dev dependency in your Mini-App project.
|
|
7
|
+
## Instalar
|
|
10
8
|
|
|
11
9
|
```bash
|
|
12
10
|
bun add -d @locale-labs/miniapp-builder
|
|
13
11
|
```
|
|
14
12
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
Add a build script to your `package.json`:
|
|
13
|
+
Agregar al `package.json`:
|
|
18
14
|
|
|
19
15
|
```json
|
|
20
16
|
{
|
|
21
17
|
"scripts": {
|
|
22
|
-
"build": "locale-miniapp-builder"
|
|
18
|
+
"build": "locale-miniapp-builder build",
|
|
19
|
+
"deploy": "locale-miniapp-builder deploy",
|
|
20
|
+
"dev": "locale-miniapp-builder dev"
|
|
23
21
|
}
|
|
24
22
|
}
|
|
25
23
|
```
|
|
26
24
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
```bash
|
|
30
|
-
bun x locale-miniapp-builder
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
## ⚙️ How it Works
|
|
34
|
-
|
|
35
|
-
The builder acts as the **final step** in your build pipeline. It assumes previous steps (like `esbuild` or `tailwindcss`) have already run and placed their outputs in a `.temp/` directory.
|
|
36
|
-
|
|
37
|
-
### 1. Input Requirements
|
|
38
|
-
|
|
39
|
-
The builder looks for the following files relative to your project root:
|
|
40
|
-
|
|
41
|
-
- `.temp/index.html`: The base HTML structure.
|
|
42
|
-
- `.temp/output.css`: Compiled Tailwind/CSS.
|
|
43
|
-
- `.temp/alpine.js`: Compiled Application Logic (Alpine.js bundle).
|
|
44
|
-
|
|
45
|
-
### 2. The Process
|
|
46
|
-
|
|
47
|
-
1. **Reads Assets**: Loads the HTML, CSS, and JS files from the `.temp/` folder.
|
|
48
|
-
2. **Resolves SDK**: Automatically finds the installed version of `@locale-labs/miniapp-sdk`.
|
|
49
|
-
3. **Cleans HTML**: Removes development scripts (e.g., Tailwind CDN, unbundled Alpine.js tags).
|
|
50
|
-
4. **Inlines Everything**:
|
|
51
|
-
- Injects CSS into a `<style>` block in `<head>`.
|
|
52
|
-
- Injects the **Localé SDK** into a `<script>` block.
|
|
53
|
-
- Injects your **App Bundle** into a `<script>` block.
|
|
54
|
-
|
|
55
|
-
### 3. Output
|
|
56
|
-
|
|
57
|
-
The result is a single, self-contained file:
|
|
58
|
-
|
|
59
|
-
- `build/index.html`
|
|
60
|
-
|
|
61
|
-
This file contains everything your Mini-App needs to run within the Localé Kernel's iframe sandbox.
|
|
62
|
-
|
|
63
|
-
## 🛠 Configuration
|
|
64
|
-
|
|
65
|
-
Currently, the builder uses a "Zero Config" approach with opinionated defaults (expecting the `.temp/` structure).
|
|
66
|
-
|
|
67
|
-
### Debugging
|
|
68
|
-
|
|
69
|
-
You can verify which SDK path is being resolved by looking at the console output during the build process. The builder checks:
|
|
70
|
-
|
|
71
|
-
1. `LOCALE_SDK_PATH` environment variable.
|
|
72
|
-
2. `node_modules/@locale-labs/miniapp-sdk`
|
|
73
|
-
3. Local fallback paths.
|
|
74
|
-
|
|
75
|
-
## 📦 Deployment
|
|
76
|
-
|
|
77
|
-
The builder can be deployed to npm using the `publish` GitHub Action. This will automatically build the package and publish it to the npm registry.
|
|
78
|
-
|
|
79
|
-
- When you push a commit to the `main` branch, the `publish` GitHub Action will be triggered and the package will be published to the npm registry.
|
|
80
|
-
- When you push a commit to the `dev` branch, the `publish` GitHub Action will be triggered and the package will be published to the npm registry with the `beta` tag.
|
|
81
|
-
|
|
82
|
-
The package will be published to the npm registry with the version number that is specified in the `package.json` file (that is automatically bumped by the [`semantic-release`](https://github.com/semantic-release/semantic-release) plugin).
|
|
83
|
-
|
|
84
|
-
> [Commit Message Conventions](https://github.com/angular/angular/blob/main/contributing-docs/commit-message-guidelines.md)
|
|
85
|
-
|
|
86
|
-
- Patch/Fix release: `fix: update readme` (1.0.0 -> 1.0.1)
|
|
87
|
-
- Minor/Feature release: `feat: add new feature` (1.0.0 -> 1.1.0)
|
|
88
|
-
- Major release: (1.0.0 -> 2.0.0)
|
|
89
|
-
|
|
90
|
-
```
|
|
91
|
-
perf: improve performance of x
|
|
25
|
+
## Cómo funciona (alto nivel)
|
|
92
26
|
|
|
93
|
-
|
|
94
|
-
The default graphite width of 10mm is always used for performance reasons.
|
|
95
|
-
```
|
|
27
|
+
Es el último paso del pipeline. Asume que tu build previo (esbuild + tailwind) dejó `.temp/index.html`, CSS y JS compilados. El builder inlinea el SDK + CSS + bundle dentro del HTML y genera `build/index.html` (artefacto único listo para subir).
|
|
96
28
|
|
|
97
|
-
|
|
29
|
+
`deploy` sube ese HTML al Supabase Storage del miniapp y registra la versión en el Core.
|
|
98
30
|
|
|
99
|
-
|
|
31
|
+
Detalle del pipeline, SDK resolution y version format: [`NOTES/LEARNINGS.md`](./NOTES/LEARNINGS.md).
|