🏗️ Build Sasha Player

Guida alla build del progetto con architettura modulare ES6.

📋 Prerequisiti

Node.js >= 18.0.0
npm >= 9.0.0

🚀 Setup Iniziale

# Installa dipendenze
npm install

🔨 Build

# Build per produzione
npm run build

# Build con watch mode per sviluppo
npm run dev

Output Build

La build genera una cartella dist/ autosufficiente per la distribuzione:

Bundle JavaScript:

sasha-player.esm.js - ES Module (per import in progetti moderni)
sasha-player.js - UMD build (per uso diretto in browser)
sasha-player.min.js - UMD minificato (produzione)

Assets statici (copiati automaticamente):

index.html - Demo principale a livello root di dist
assets/ - Assets demo (CSS, immagini, audio)
themes/ - Tutti i temi CSS (default, genz, light)
examples/ - Esempi d'uso (basic.html, umd.html)
README.html - Documentazione principale convertita in HTML (da README.md)
docs/BUILD.html - Build guide convertito in HTML (da docs/BUILD.md)

Nota: Solo i file .MD linkati nella demo vengono convertiti in HTML. Gli altri file .MD non sono inclusi in dist/.

La cartella dist/ è completamente autosufficiente e può essere distribuita come pacchetto statico standalone.

📦 Utilizzo Build

ES Module (Progetti Moderni)

// Import tutto il player
import SashaPlayer from './dist/sasha-player.esm.js';

// Import selettivo
import { SashaPlayer, ThemeManager, EVENTS } from './dist/sasha-player.esm.js';

UMD (Browser)

<!-- Development -->
<script src="dist/sasha-player.js"></script>

<!-- Production -->
<script src="dist/sasha-player.min.js"></script>

<script>
  // Disponibile globalmente come Sasha
  const player = document.querySelector('sasha-player');
  console.log(Sasha.version);
</script>

CDN (futuro)

<script type="module">
  import SashaPlayer from 'https://cdn.example.com/sasha-player@2.2.0/sasha-player.esm.js';
</script>

🏗️ Struttura Progetto

sasha/
├── src/                    # Sorgenti modular ES6
│   ├── core/              # Logica core
│   ├── managers/          # Gestori (config, theme, template)
│   ├── ui/                # UI e controlli
│   ├── utils/             # Utilities
│   ├── constants/         # Costanti
│   └── index.js           # Entry point
│
├── dist/                  # Build output (generato, autosufficiente)
│   ├── index.html         # Demo principale (root di dist)
│   ├── assets/           # Assets demo (CSS, immagini, audio)
│   ├── sasha-player.esm.js
│   ├── sasha-player.js
│   ├── sasha-player.min.js
│   ├── themes/            # Temi copiati automaticamente
│   ├── examples/          # Esempi copiati automaticamente
│   ├── README.html        # Documentazione convertita in HTML
│   └── docs/              # Documentazione HTML (BUILD.html)
│
├── themes/                # Temi sorgente (copiati in dist/themes/)
│   ├── default/
│   ├── genz/
│   └── light/
│
├── demo-source/           # Demo sorgente
│   ├── index.html         # → dist/index.html
│   └── assets/            # → dist/assets/
│
├── docs/                  # Documentazione sorgente (copiata in dist/docs/)
│   ├── BUILD.md
│   ├── DEV.md
│   ├── CHANGELOG.md
│   └── ...
│
└── examples/              # Esempi sorgente (copiati in dist/examples/)

🔧 Configurazione Build

Il file rollup.config.js configura:

Input: src/index.js
Output formats: ESM, UMD
Plugins:
- @rollup/plugin-json - Import package.json per versioning automatico
- @rollup/plugin-node-resolve - Risoluzione moduli
- @rollup/plugin-terser - Minificazione (solo build produzione)
Sourcemaps: Generati per debug
Versioning: Importato dinamicamente da package.json (unica fonte di verità)

📝 Script Disponibili

Script	Descrizione
`npm run build`	Build produzione (tutti i formati)
`npm run dev`	Build development con watch mode
`npm run watch`	Alias per dev

🐛 Debug

I sourcemap sono inclusi in tutti i build per facilitare il debugging:

// In DevTools vedrai i file sorgente originali
src/core/SashaPlayer.js
src/managers/ThemeManager.js
// etc.

📤 Pubblicazione

Per pubblicare su npm:

# 1. Aggiorna versione
npm version patch|minor|major

# 2. Build
npm run build

# 3. Pubblica
npm publish --access public

⚠️ Note

I temi in themes/ NON sono inclusi nel bundle JavaScript
Vengono copiati automaticamente in dist/themes/ durante la build
Il player li carica dinamicamente via fetch dal percorso configurato
La demo (demo-source/index.html) viene copiata in dist/index.html (root di dist)
Gli assets demo (demo-source/assets/) vengono copiati in dist/assets/
Pulizia preventiva: Prima della build, vengono rimossi tutti i file .md da dist/
Conversione HTML: Solo i file .MD linkati nella demo vengono convertiti in HTML formattato
La cartella dist/ è autosufficiente: contiene bundle, demo, assets, temi, esempi e documentazione HTML
Modifiche a temi, demo o esempi vengono sincronizzate in dist/ ad ogni build