@klyb/cli 0.1.19

package/dist/simulator/client/src/SimulatorApp.js

@@ -0,0 +1,133 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SimulatorApp;
+const react_1 = __importStar(require("react"));
+function SimulatorApp() {
+    // State
+    const [widgetUrl, setWidgetUrl] = (0, react_1.useState)('http://localhost:3001'); // Default widget port
+    const [logs, setLogs] = (0, react_1.useState)([]);
+    // Iframe ref to send responses back
+    const iframeRef = (0, react_1.useRef)(null);
+    // Initial load
+    (0, react_1.useEffect)(() => {
+        const handleMessage = (event) => {
+            const data = event.data;
+            // Filter only widget messages
+            if (data?.source !== 'clubz-widget')
+                return;
+            log('req', `${data.action} ${data.payload ? JSON.stringify(data.payload) : ''}`);
+            // Process Request
+            processBridgeRequest(data, event.source);
+        };
+        window.addEventListener('message', handleMessage);
+        return () => window.removeEventListener('message', handleMessage);
+    }, []);
+    const log = (type, msg) => {
+        setLogs(prev => [{
+                time: new Date().toLocaleTimeString().split(' ')[0],
+                type,
+                msg
+            }, ...prev]);
+    };
+    const processBridgeRequest = (req, sourceWindow) => {
+        let responseData = null;
+        let success = true;
+        switch (req.action) {
+            case 'GET_USER':
+                responseData = { id: 'sim-user-1', name: 'Simulator User', role: 'admin' };
+                break;
+            case 'VIBRATE':
+                // Visual feedback
+                if (navigator.vibrate)
+                    navigator.vibrate(200);
+                alert('📳 VIBRATION TRIGGERED');
+                break;
+            case 'NAVIGATE':
+                alert(`🧭 Navigating to: ${req.payload?.route}`);
+                break;
+            default:
+                console.warn('Unknown action', req.action);
+        }
+        // Send Response
+        const response = {
+            id: req.id,
+            success,
+            data: responseData
+        };
+        sourceWindow.postMessage(response, '*');
+        log('res', `Sent data for ${req.id}`);
+    };
+    return (<div className="flex h-screen w-full">
+            {/* Left: Device Simulator */}
+            <div className="flex-1 flex flex-col items-center justify-center bg-slate-100 p-8">
+                <div className="relative border-gray-800 bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl">
+                    <div className="w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2 -translate-x-1/2 absolute"></div>
+                    <div className="h-[32px] w-[3px] bg-gray-800 absolute -start-[17px] top-[72px] rounded-s-lg"></div>
+                    <div className="h-[46px] w-[3px] bg-gray-800 absolute -start-[17px] top-[124px] rounded-s-lg"></div>
+                    <div className="h-[46px] w-[3px] bg-gray-800 absolute -start-[17px] top-[178px] rounded-s-lg"></div>
+                    <div className="h-[64px] w-[3px] bg-gray-800 absolute -end-[17px] top-[142px] rounded-e-lg"></div>
+                    <div className="rounded-[2rem] overflow-hidden w-full h-full bg-white relative">
+                        {/* Iframe Content */}
+                        <iframe ref={iframeRef} src={widgetUrl} className="w-full h-full border-0" title="Widget Simulator"/>
+                    </div>
+                </div>
+                <p className="mt-4 text-slate-400 text-sm">iPhone 14 Pro Simulator</p>
+            </div>
+
+            {/* Right: Debug Console */}
+            <div className="w-96 bg-white border-l border-slate-200 flex flex-col">
+                <div className="p-4 border-b border-slate-200 bg-slate-50">
+                    <h2 className="font-bold text-slate-700">Bridge Debugger</h2>
+                </div>
+
+                <div className="p-4 border-b border-slate-200">
+                    <label className="text-xs font-bold text-slate-500 uppercase">Widget URL</label>
+                    <input type="text" value={widgetUrl} onChange={e => setWidgetUrl(e.target.value)} className="w-full mt-1 px-3 py-2 border rounded text-sm font-mono"/>
+                </div>
+
+                <div className="flex-1 overflow-y-auto p-4 space-y-2 bg-slate-900 font-mono text-xs">
+                    {logs.length === 0 && <p className="text-slate-500 italic">Waiting for events...</p>}
+                    {logs.map((l, i) => (<div key={i} className="flex gap-2">
+                            <span className="text-slate-500">[{l.time}]</span>
+                            <span className={l.type === 'req' ? 'text-blue-400' : 'text-green-400'}>
+                                {l.type === 'req' ? '→' : '←'}
+                            </span>
+                            <span className="text-slate-300 break-all">{l.msg}</span>
+                        </div>))}
+                </div>
+            </div>
+        </div>);
+}

package/dist/simulator/client/src/main.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const client_1 = __importDefault(require("react-dom/client"));
+const SimulatorApp_1 = __importDefault(require("./SimulatorApp"));
+client_1.default.createRoot(document.getElementById('root')).render(<react_1.default.StrictMode>
+        <SimulatorApp_1.default />
+    </react_1.default.StrictMode>);

package/dist/simulator/client/vite.config.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vite_1 = require("vite");
+const plugin_react_1 = __importDefault(require("@vitejs/plugin-react"));
+exports.default = (0, vite_1.defineConfig)({
+    plugins: [(0, plugin_react_1.default)()],
+    root: __dirname, // Ensure root is set to this directory
+    build: {
+        outDir: '../../../dist/simulator/client', // Build into the CLI dist folder
+        emptyOutDir: true
+    }
+});

package/dist/templates/react-vite-ts/src/App.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const sdk_1 = require("@clubz/sdk");
+function App() {
+    const [user, setUser] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        // Determine user context via Bridge
+        sdk_1.bridge.getUser().then((u) => setUser(u)).catch(() => console.log('Guest mode'));
+    }, []);
+    const handleVibrate = () => {
+        sdk_1.bridge.vibrate();
+    };
+    return (<div className="w-full h-full min-h-[200px] bg-white rounded-xl p-6 border border-slate-200 flex flex-col items-center justify-center">
+            <h1 className="text-xl font-bold text-slate-800 mb-2">
+                Hello {user ? user.name : 'Guest'}!
+            </h1>
+            <p className="text-slate-500 text-center mb-4">
+                Welcome to your new Clubz Widget.
+            </p>
+
+            <button onClick={handleVibrate} className="px-4 py-2 bg-blue-600 text-white rounded-lg active:bg-blue-700 transition">
+                Test Vibration
+            </button>
+        </div>);
+}
+exports.default = App;

package/dist/templates/react-vite-ts/src/main.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const client_1 = __importDefault(require("react-dom/client"));
+const App_tsx_1 = __importDefault(require("./App.tsx"));
+client_1.default.createRoot(document.getElementById('root')).render(<react_1.default.StrictMode>
+        <App_tsx_1.default />
+    </react_1.default.StrictMode>);

package/dist/templates/react-vite-ts/vite.config.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vite_1 = require("vite");
+const plugin_react_1 = __importDefault(require("@vitejs/plugin-react"));
+// https://vitejs.dev/config/
+exports.default = (0, vite_1.defineConfig)({
+    plugins: [(0, plugin_react_1.default)()],
+    build: {
+        rollupOptions: {
+            output: {
+                // Ensure we get a single recognizable entry point if possible, 
+                // though standard vite build is fine for the platform zipper.
+                entryFileNames: 'assets/[name].js',
+                chunkFileNames: 'assets/[name].js',
+                assetFileNames: 'assets/[name].[ext]'
+            }
+        }
+    }
+});

package/dist/templates/templates/react-vite-ts/_env.example

@@ -0,0 +1,12 @@
+# ------------------------------------------------------------------------------
+# Configuration Klyb Widget
+# ------------------------------------------------------------------------------
+
+# L'URL de l'API Klyb.
+# Par défaut, la CLI essaiera de se connecter à http://localhost:3000 si non défini.
+# Décommentez la ligne ci-dessous pour forcer l'environnement de Production :
+# KLYB_API_URL=https://api.klyb.co
+
+# Votre clé d'API Développeur Klyb
+# Vous pouvez la générer depuis votre Espace Développeur sur klyb_comu (Onglet "Clés API")
+KLYB_API_KEY=votre_cle_api_secrete_ici

package/dist/templates/templates/react-vite-ts/clubz.json

@@ -0,0 +1,20 @@
+{
+    "name": "My Clubz Widget",
+    "description": "A widget built for Clubz",
+    "version": "0.0.1",
+    "type": "widget",
+    "preview": "preview.png",
+    "permissions": [
+        "read_community_name"
+    ],
+    "config": {
+        "props": [
+            {
+                "name": "title",
+                "type": "string",
+                "label": "Titre du widget",
+                "default": "Hello World"
+            }
+        ]
+    }
+}

package/dist/templates/templates/react-vite-ts/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Klyb Widget</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </body>
+</html>

package/dist/templates/templates/react-vite-ts/klyb.json

@@ -0,0 +1,20 @@
+{
+    "name": "My Klyb Widget",
+    "description": "A widget built for Klyb",
+    "version": "0.0.1",
+    "type": "widget",
+    "preview": "preview.png",
+    "permissions": [
+        "read_community_name"
+    ],
+    "config": {
+        "props": [
+            {
+                "name": "title",
+                "type": "string",
+                "label": "Titre du widget",
+                "default": "Hello World"
+            }
+        ]
+    }
+}

package/dist/templates/templates/react-vite-ts/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "my-klyb-widget",
+    "private": true,
+    "version": "0.0.1",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "deploy": "klyb deploy --submit",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "@klyb/sdk": "latest"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.66",
+        "@types/react-dom": "^18.2.22",
+        "@vitejs/plugin-react": "^4.2.1",
+        "typescript": "^5.2.2",
+        "vite": "^5.2.0"
+    }
+}

package/dist/templates/templates/react-vite-ts/public/clubz.json

@@ -0,0 +1,20 @@
+```
+{
+    "name": "My Clubz Widget",
+    "description": "A widget built for Clubz",
+    "version": "0.0.1",
+    "type": "widget",
+    "permissions": [
+        "read_community_name"
+    ],
+    "config": {
+        "props": [
+            {
+                "name": "title",
+                "type": "string",
+                "label": "Titre du widget",
+                "default": "Hello World"
+            }
+        ]
+    ]
+}

package/dist/templates/templates/react-vite-ts/src/App.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react'
+import { bridge } from '@klyb/sdk'
+
+function App() {
+    const [user, setUser] = useState<{ name: string } | null>(null)
+
+    useEffect(() => {
+        // Determine user context via Bridge
+        bridge.getUser().then((u: any) => setUser(u)).catch(() => console.log('Guest mode'))
+    }, [])
+
+    const handleVibrate = () => {
+        bridge.vibrate();
+    }
+
+    return (
+        <div className="w-full h-full min-h-[200px] bg-white rounded-xl p-6 border border-slate-200 flex flex-col items-center justify-center">
+            <h1 className="text-xl font-bold text-slate-800 mb-2">
+                Hello {user ? user.name : 'Guest'}!
+            </h1>
+            <p className="text-slate-500 text-center mb-4">
+                Welcome to your new Klyb Widget.
+            </p>
+
+            <button
+                onClick={handleVibrate}
+                className="px-4 py-2 bg-blue-600 text-white rounded-lg active:bg-blue-700 transition"
+            >
+                Test Vibration
+            </button>
+        </div>
+    )
+}
+
+export default App

package/dist/templates/templates/react-vite-ts/src/main.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+)

package/dist/templates/templates/react-vite-ts/tsconfig.json

@@ -0,0 +1,37 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "module": "ESNext",
+        "skipLibCheck": true,
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "preserveSymlinks": true
+    },
+    "include": [
+        "src"
+    ],
+    "exclude": [
+        "node_modules"
+    ],
+    "references": [
+        {
+            "path": "./tsconfig.node.json"
+        }
+    ]
+}

package/dist/templates/templates/react-vite-ts/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true
+    },
+    "include": [
+        "vite.config.ts"
+    ]
+}

package/dist/templates/templates/react-vite-ts/vite.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+    build: {
+        rollupOptions: {
+            output: {
+                // Ensure we get a single recognizable entry point if possible, 
+                // though standard vite build is fine for the platform zipper.
+                entryFileNames: 'assets/[name].js',
+                chunkFileNames: 'assets/[name].js',
+                assetFileNames: 'assets/[name].[ext]'
+            }
+        }
+    },
+    resolve: {
+        preserveSymlinks: true,
+        dedupe: ['react', 'react-dom']
+    },
+    optimizeDeps: {
+        exclude: ['@klyb/sdk']
+    }
+})

package/package.json

@@ -0,0 +1,37 @@
+{
+    "name": "@klyb/cli",
+    "version": "0.1.19",
+    "bin": {
+        "klyb": "bin/klyb.js"
+    },
+    "main": "dist/index.js",
+    "scripts": {
+        "build": "tsc && cp -r src/templates dist/templates",
+        "dev": "tsc -w"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@types/archiver": "^7.0.0",
+        "@types/cross-spawn": "^6.0.6",
+        "@types/express": "^5.0.6",
+        "@types/fs-extra": "^11.0.4",
+        "archiver": "^7.0.1",
+        "axios": "^1.13.4",
+        "chalk": "^4.1.2",
+        "commander": "^11.0.0",
+        "cross-spawn": "^7.0.6",
+        "dotenv": "^17.2.4",
+        "express": "^5.2.1",
+        "form-data": "^4.0.5",
+        "fs-extra": "^11.3.3",
+        "inquirer": "^8.0.0",
+        "open": "^11.0.0"
+    },
+    "devDependencies": {
+        "@types/inquirer": "^9.0.9",
+        "@types/node": "^20.0.0",
+        "typescript": "^5.0.0"
+    }
+}

package/src/commands/deploy.ts

@@ -0,0 +1,155 @@
+import path from 'path';
+import fs from 'fs-extra';
+import chalk from 'chalk';
+import { execSync } from 'child_process';
+import archiver from 'archiver';
+import axios from 'axios';
+import FormData from 'form-data';
+import { getCredentials } from '../credentials';
+
+export async function deployCommand() {
+    console.log(chalk.blue('🚀 Deploying Widget to Klyb...'));
+
+    const cwd = process.cwd();
+    const configPath = path.join(cwd, 'klyb.json');
+
+    // On vérifie qu'on est bien à la racine d'un projet de widget (présence du klyb.json)
+    if (!fs.existsSync(configPath)) {
+        console.error(chalk.red('❌ klyb.json not found. Are you in a Klyb project?'));
+        process.exit(1);
+    }
+    const config = await fs.readJson(configPath);
+    console.log(chalk.dim(`   Project: ${config.name} v${config.version}`));
+
+    // On compile le code source du projet (TypeScript, React, etc.)
+    console.log(chalk.yellow('\n📦 Building project...'));
+    try {
+        execSync('npm run build', { stdio: 'inherit' });
+    } catch (e) {
+        console.error(chalk.red('❌ Build failed. Fix errors and try again.'));
+        process.exit(1);
+    }
+
+    // On prépare l'archive contenant uniquement les fichiers compilés (le dossier dist)
+    console.log(chalk.yellow('\n🤐 Zipping assets...'));
+    const distDir = path.join(cwd, 'dist');
+    const zipPath = path.join(cwd, 'bundle.zip');
+
+    if (!fs.existsSync(distDir)) {
+        console.error(chalk.red('❌ dist/ directory not found after build.'));
+        process.exit(1);
+    }
+
+    await zipDirectory(distDir, zipPath, { source: configPath, name: 'klyb.json' });
+    console.log(chalk.green(`   Bundle created: ${getSize(zipPath)}`));
+
+    // Étape finale : on envoie tout ça vers la plateforme Klyb
+    console.log(chalk.yellow('\n☁️  Uploading to Klyb Registry...'));
+
+    // Récupération des accès enregistrés lors du `klyb login`
+    const credentials = getCredentials();
+    const apiUrl = credentials?.apiUrl || process.env.KLYB_API_URL || 'http://localhost:3000';
+
+    if (!credentials?.token) {
+        console.error(chalk.red('❌ Not authenticated.'));
+        console.error(chalk.yellow('   Run: ') + chalk.cyan('klyb login'));
+        process.exit(1);
+    }
+
+    const token = credentials.token;
+
+    try {
+        const isSubmission = process.argv.includes('--submit');
+        const status = isSubmission ? 'published' : 'draft';
+
+        const form = new FormData();
+        form.append('file', fs.createReadStream(zipPath));
+        form.append('manifest', JSON.stringify(config));
+        // Appel direct à l'API pour lancer la publication
+        const deployUrl = `${apiUrl}/api/widget-library/developer/deploy`;
+        console.log(chalk.blue(`\n🚀 Deploying to ${deployUrl}...`));
+
+        const response = await axios.post(deployUrl, form, {
+            headers: {
+                ...form.getHeaders(),
+                'Authorization': `Bearer ${token}`
+            },
+            maxContentLength: Infinity,
+            maxBodyLength: Infinity
+        });
+
+        console.log(chalk.green('\n✅ Deployment Successful!'));
+        console.log(chalk.cyan(`   Widget ID: ${response.data.widgetId}`));
+        console.log(chalk.cyan(`   Version: ${response.data.version}`));
+        console.log(chalk.dim(`   Download URL: ${response.data.url}`));
+
+        // On s'assure que le projet local garde bien l'identifiant définitif du widget
+        if (config.id !== response.data.widgetId) {
+            config.id = response.data.widgetId;
+            await fs.writeJson(configPath, config, { spaces: 2 });
+            console.log(chalk.dim(`   (Updated local klyb.json with new ID)`));
+        }
+
+        if (isSubmission) {
+            console.log(chalk.magenta('   🚀 Submitted for validation (Status: Pending)'));
+            console.log(chalk.dim('   An admin will review your widget shortly.'));
+        } else {
+            console.log(chalk.dim('   Saved as Draft. PRO TIP: Use --submit to send for validation.'));
+        }
+
+        console.log(chalk.dim('   Available in your "Submissions" tab.'));
+
+        // On supprime le fichier zip qui ne sert plus à rien
+        await fs.remove(zipPath);
+
+    } catch (error: any) {
+        console.error(chalk.red('\n❌ Upload failed'));
+        if (error.response) {
+            console.error(chalk.red(`   Server Error: ${error.response.status} ${error.response.statusText}`));
+            console.error(chalk.yellow(`   Response Data: ${JSON.stringify(error.response.data, null, 2)}`));
+        } else if (error.request) {
+            console.error(chalk.red(`   No response from server`));
+            console.error(chalk.yellow(`   API URL: ${apiUrl}`));
+            console.error(chalk.dim(`   Check if the API is running on ${apiUrl}`));
+        } else {
+            console.error(chalk.red(`   Error: ${error.message}`));
+        }
+
+        // On n'oublie pas de supprimer le fichier zip même si l'envoi a échoué
+        try {
+            if (await fs.pathExists(zipPath)) {
+                await fs.remove(zipPath);
+            }
+        } catch (cleanupError) {
+            // Ignore cleanup errors
+        }
+
+        process.exit(1);
+    }
+}
+
+function zipDirectory(source: string, out: string, extraFile?: { source: string, name: string }): Promise<void> {
+    const archive = archiver('zip', { zlib: { level: 9 } });
+    const stream = fs.createWriteStream(out);
+
+    return new Promise((resolve, reject) => {
+        archive
+            .directory(source, false)
+            .on('error', err => reject(err))
+            .pipe(stream);
+
+        if (extraFile) {
+            archive.file(extraFile.source, { name: extraFile.name });
+        }
+
+        stream.on('close', () => resolve());
+        archive.finalize();
+    });
+}
+
+function getSize(filePath: string) {
+    const stats = fs.statSync(filePath);
+    const bytes = stats.size;
+    if (bytes < 1024) return bytes + ' B';
+    return (bytes / 1024).toFixed(2) + ' KB';
+}