@locale-labs/miniapp-builder 0.1.1 → 0.1.2-beta.2
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 +62 -12
- package/dist/index.js +4767 -57
- package/package.json +7 -4
package/README.md
CHANGED
|
@@ -1,23 +1,73 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @locale-labs/miniapp-builder
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The official CLI tool to package and build Localé Mini-Apps.
|
|
4
4
|
|
|
5
|
-
This
|
|
6
|
-
- Bundling TypeScript with esbuild
|
|
7
|
-
- Processing HTML templates
|
|
8
|
-
- Injecting the Localé SDK
|
|
9
|
-
- Cleaning up development scripts (Tailwind, Alpine CDN) for production
|
|
5
|
+
This tool takes your compiled assets (HTML, CSS, JS) and the Localé SDK, and bundles them into a **Single File Artifact** (`index.html`) ready for deployment to the Localé Kernel.
|
|
10
6
|
|
|
11
|
-
##
|
|
7
|
+
## 📦 Installation
|
|
8
|
+
|
|
9
|
+
This package is usually installed as a dev dependency in your Mini-App project.
|
|
12
10
|
|
|
13
11
|
```bash
|
|
14
12
|
bun add -d @locale-labs/miniapp-builder
|
|
15
13
|
```
|
|
16
14
|
|
|
17
|
-
|
|
15
|
+
## 🚀 Usage
|
|
16
|
+
|
|
17
|
+
Add a build script to your `package.json`:
|
|
18
18
|
|
|
19
19
|
```json
|
|
20
|
-
|
|
21
|
-
"
|
|
20
|
+
{
|
|
21
|
+
"scripts": {
|
|
22
|
+
"build": "locale-miniapp-builder"
|
|
23
|
+
}
|
|
22
24
|
}
|
|
23
|
-
```
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Or run it directly:
|
|
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
|
+
The builder looks for the following files relative to your project root:
|
|
39
|
+
|
|
40
|
+
* `.temp/index.html`: The base HTML structure.
|
|
41
|
+
* `.temp/output.css`: Compiled Tailwind/CSS.
|
|
42
|
+
* `.temp/alpine.js`: Compiled Application Logic (Alpine.js bundle).
|
|
43
|
+
|
|
44
|
+
### 2. The Process
|
|
45
|
+
|
|
46
|
+
1. **Reads Assets**: Loads the HTML, CSS, and JS files from the `.temp/` folder.
|
|
47
|
+
2. **Resolves SDK**: Automatically finds the installed version of `@locale-labs/miniapp-sdk`.
|
|
48
|
+
3. **Cleans HTML**: Removes development scripts (e.g., Tailwind CDN, unbundled Alpine.js tags).
|
|
49
|
+
4. **Inlines Everything**:
|
|
50
|
+
* Injects CSS into a `<style>` block in `<head>`.
|
|
51
|
+
* Injects the **Localé SDK** into a `<script>` block.
|
|
52
|
+
* Injects your **App Bundle** into a `<script>` block.
|
|
53
|
+
|
|
54
|
+
### 3. Output
|
|
55
|
+
The result is a single, self-contained file:
|
|
56
|
+
|
|
57
|
+
* `build/index.html`
|
|
58
|
+
|
|
59
|
+
This file contains everything your Mini-App needs to run within the Localé Kernel's iframe sandbox.
|
|
60
|
+
|
|
61
|
+
## 🛠 Configuration
|
|
62
|
+
|
|
63
|
+
Currently, the builder uses a "Zero Config" approach with opinionated defaults (expecting the `.temp/` structure).
|
|
64
|
+
|
|
65
|
+
### Debugging
|
|
66
|
+
You can verify which SDK path is being resolved by looking at the console output during the build process. The builder checks:
|
|
67
|
+
1. `LOCALE_SDK_PATH` environment variable.
|
|
68
|
+
2. `node_modules/@locale-labs/miniapp-sdk`
|
|
69
|
+
3. Local fallback paths.
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
Developed with ❤️ by **Locale Labs**.
|