Skip to content

PRESET_VISUAL_GUIDE.md

Latest commit

 

History

History
288 lines (253 loc) · 11.5 KB

PRESET_VISUAL_GUIDE.md

File metadata and controls

288 lines (253 loc) · 11.5 KB
Raw

Preset System - Visual Guide

How Presets Override Base Config

┌─────────────────────────────────────────┐
│      .packaide.json                     │
├─────────────────────────────────────────┤
│                                         │
│  Base Config (Root Level)               │
│  ┌───────────────────────────────────┐  │
│  │ outputPath: "release"             │  │
│  │ folders: ["src", "themes"]        │  │
│  │ exclude: []                       │  │
│  │ archiveName: "default"            │  │
│  └───────────────────────────────────┘  │
│                                         │
│  Presets                                │
│  ┌───────────────────────────────────┐  │
│  │ "car-1": {                     │  │
│  │   exclude: ["themes/car-2/**"] │  │
│  │   archiveName: "app-car-1"     │  │
│  │ }                                 │  │
│  │                                   │  │
│  │ "car-2": {                     │  │
│  │   exclude: ["themes/car-1/**"] │  │
│  │   archiveName: "app-car-2"     │  │
│  │ }                                 │  │
│  └───────────────────────────────────┘  │
└─────────────────────────────────────────┘

Command Flow

Without Preset

┌──────────────────────┐
│ packaide copy        │
└──────────┬───────────┘
           │
           ▼
┌──────────────────────┐
│ Load base config     │
│ - outputPath         │
│ - folders            │
│ - exclude            │
│ - archiveName        │
└──────────┬───────────┘
           │
           ▼
┌──────────────────────┐
│ Package files        │
└──────────────────────┘

With Preset

┌────────────────────────────┐
│ packaide copy -p car-1  │
└──────────┬─────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ Load base config             │
│ outputPath: "release"        │
│ folders: ["src", "themes"]   │
│ exclude: []                  │
│ archiveName: "default"       │
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ Load preset "car-1"       │
│ exclude: ["themes/car-2"] │
│ archiveName: "app-car-1"  │
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ Merge (preset overrides)     │
│ outputPath: "release"    ←─┐ │
│ folders: ["src","themes"]←─┤ │ From base
│ exclude: ["themes/..]   ←──┤ │ From preset
│ archiveName: "app-.."   ←──┘ │ From preset
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ Package files with merged    │
│ configuration                │
└──────────────────────────────┘

Real-World Example: car Shop

Your Project Structure

car-shop/
├── src/
│   ├── app.js
│   ├── components/
│   └── utils/
├── public/
│   ├── css/
│   └── js/
├── themes/
│   ├── car-1/     👈 Theme for client 1
│   │   ├── images/
│   │   └── style.css
│   ├── car-2/     👈 Theme for client 2
│   │   ├── images/
│   │   └── style.css
│   └── car-3/     👈 Theme for client 3
│       ├── images/
│       └── style.css
├── assets/
├── index.html
└── .packaide.json

Config Setup

{
  "folders": ["src", "public", "themes", "assets"],
  "files": ["index.html"],
  
  "presets": {
    "car-1": {
      "exclude": ["themes/car-2/**", "themes/car-3/**"]
    },
    "car-2": {
      "exclude": ["themes/car-1/**", "themes/car-3/**"]
    },
    "car-3": {
      "exclude": ["themes/car-1/**", "themes/car-2/**"]
    }
  }
}

Build Process

┌─────────────────────────────────┐
│ packaide copy -p car-1       │
└─────────────┬───────────────────┘
              │
              ▼
┌─────────────────────────────────┐
│ Includes:                       │
│ ✅ src/                         │
│ ✅ public/                      │
│ ✅ themes/car-1/    ← ONLY   │
│ ✅ assets/                      │
│ ✅ index.html                   │
│                                 │
│ Excludes:                       │
│ ❌ themes/car-2/             │
│ ❌ themes/car-3/             │
└─────────────┬───────────────────┘
              │
              ▼
┌─────────────────────────────────┐
│ Output: release/                │
│ └── src/                        │
│ └── public/                     │
│ └── themes/                     │
│     └── car-1/    ← ONLY     │
│ └── assets/                     │
│ └── index.html                  │
└─────────────────────────────────┘

Side-by-Side Comparison

┌─────────────────────┬─────────────────────┬─────────────────────┐
│   Base Config       │   preset car-1   │   preset car-2   │
├─────────────────────┼─────────────────────┼─────────────────────┤
│ All themes included │ Only car-1       │ Only car-2       │
│                     │                     │                     │
│ themes/             │ themes/             │ themes/             │
│ ├── car-1/ ✅    │ ├── car-1/ ✅    │ ├── car-1/ ❌    │
│ ├── car-2/ ✅    │ ├── car-2/ ❌    │ ├── car-2/ ✅    │
│ └── car-3/ ✅    │ └── car-3/ ❌    │ └── car-3/ ❌    │
└─────────────────────┴─────────────────────┴─────────────────────┘

Multiple Builds

Build all versions at once:

#!/bin/bash

echo "🏗️  Building all car shop versions..."
echo ""

echo "📦 Building car-1 theme..."
packaide copy --preset car-1

echo "📦 Building car-2 theme..."
packaide copy --preset car-2

echo "📦 Building car-3 theme..."
packaide copy --preset car-3

echo ""
echo "✅ All builds complete!"
echo ""
echo "📁 Check your archives:"
echo "   - car-shop-theme-1.zip"
echo "   - car-shop-theme-2.zip"
echo "   - car-shop-theme-3.zip"

Result:

builds/
├── car-1/
│   └── [packaged files with car-1 theme only]
├── car-2/
│   └── [packaged files with car-2 theme only]
└── car-3/
    └── [packaged files with car-3 theme only]

Key Benefits

┌─────────────────────────────────────────────────────┐
│ ✨ Benefits of Preset System                        │
├─────────────────────────────────────────────────────┤
│                                                     │
│ 1️⃣  Single Config File                             │
│    └── Manage all variants in one place            │
│                                                     │
│ 2️⃣  No Duplication                                 │
│    └── Base config inherited by all presets        │
│                                                     │
│ 3️⃣  Easy Switching                                 │
│    └── Just change --preset parameter              │
│                                                     │
│ 4️⃣  Consistent Builds                              │
│    └── Same base, different themes                 │
│                                                     │
│ 5️⃣  Perfect for Multi-Tenant Apps                 │
│    └── One codebase, multiple clients              │
│                                                     │
└─────────────────────────────────────────────────────┘

Common Use Cases

┌──────────────────────┐     ┌──────────────────────┐
│   Multi-Theme Apps   │     │   Client Variants    │
│                      │     │                      │
│ • E-commerce         │     │ • White-label SaaS   │
│ • CMS platforms      │     │ • Agency projects    │
│ • WordPress themes   │     │ • Custom builds      │
└──────────────────────┘     └──────────────────────┘
           │                            │
           └────────┬───────────────────┘
                    │
                    ▼
        ┌──────────────────────┐
        │   PRESET SYSTEM      │
        │   Perfect Solution   │
        └──────────────────────┘

Summary

✅ Base config = common settings
✅ Presets = specific overrides
✅ Command: packaide copy --preset name
✅ Multiple builds = multiple presets
✅ No code duplication

🎉 Build variants of your app effortlessly!