Build e deploy

Script NPM Disponibili

package.json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "build:widget": "node scripts/build-widget.js",
    "build:widget-preact": "node scripts/build-widget-preact.js",
    "build:all": "npm run build && npm run build:widget && npm run build:widget-preact",
    "dev:widget": "vite --config vite.widget-dev.config.js",
    "dev:widget-preact": "vite --config vite.widget-preact-dev.config.js",
    "watch:widget": "nodemon --watch resources/js/shadowDomWidget.js --watch resources/scss/ --ext js,scss --exec \"npm run build:widget\"",
    "watch:widget-preact": "nodemon --watch resources/js/shadowDomWidgetPreact.jsx --watch resources/scss/ --ext jsx,scss --exec \"npm run build:widget-preact\""
  }
}

Processo di Build Preact

scripts/build-widget-preact.js

#!/usr/bin/env node

import { build } from "vite";
import { resolve } from "path";
import { readFileSync, writeFileSync, existsSync, mkdirSync } from "fs";
import { scssInlinePlugin } from "../build-plugins/scss-inline-plugin.js";

const WIDGET_OUTPUT_DIR = "public/widget";
const WIDGET_OUTPUT_FILE = "tidiko-widget-preact.js";

async function buildWidgetPreact() {
    console.log("🚀 Building Tidiko AI Widget Preact...\n");

    try {
        // Ensure output directory exists
        if (!existsSync(WIDGET_OUTPUT_DIR)) {
            mkdirSync(WIDGET_OUTPUT_DIR, { recursive: true });
        }

        // Build configuration for standalone Preact widget
        const buildConfig = {
            configFile: false,
            build: {
                lib: {
                    entry: resolve(process.cwd(), "resources/js/shadowDomWidgetPreact.jsx"),
                    name: "TidikoAiWidgetPreact",
                    fileName: () => WIDGET_OUTPUT_FILE,
                    formats: ["umd"],
                },
                outDir: WIDGET_OUTPUT_DIR,
                emptyOutDir: false,
                minify: "terser",
                terserOptions: {
                    keep_fnames: true,
                    keep_classnames: true,
                    compress: {
                        drop_console: false,
                    },
                },
                rollupOptions: {
                    external: [],
                    output: {
                        globals: {}
                    },
                },
            },
            plugins: [scssInlinePlugin()],
            resolve: {
                alias: {
                    "@": resolve(process.cwd(), "resources"),
                },
            },
        };

        await build(buildConfig);
        console.log('✅ Preact Widget built successfully!');
    } catch (error) {
        console.error('❌ Preact Build failed:', error);
        process.exit(1);
    }
}

buildWidgetPreact();

Processo di Build JavaScript Vanilla (Legacy)

scripts/build-widget.js

#!/usr/bin/env node

import { build } from "vite";
import { resolve } from "path";
import { readFileSync, writeFileSync, existsSync, mkdirSync } from "fs";
import { scssInlinePlugin } from "../build-plugins/scss-inline-plugin.js";

const WIDGET_OUTPUT_DIR = "public/widget";
const WIDGET_OUTPUT_FILE = "tidiko-widget.js";

async function buildWidget() {
    console.log("🚀 Building Tidiko AI Widget (Legacy)...\n");

    try {
        // Ensure output directory exists
        if (!existsSync(WIDGET_OUTPUT_DIR)) {
            mkdirSync(WIDGET_OUTPUT_DIR, { recursive: true });
        }

        // Build configuration for standalone widget
        const buildConfig = {
            configFile: false,
            build: {
                lib: {
                    entry: resolve(process.cwd(), "resources/js/shadowDomWidget.js"),
                    name: "TidikoAiWidget",
                    fileName: () => WIDGET_OUTPUT_FILE,
                    formats: ["umd"],
                },
                outDir: WIDGET_OUTPUT_DIR,
                emptyOutDir: false,
                minify: "terser",
                terserOptions: {
                    keep_fnames: true,
                    keep_classnames: true,
                    compress: {
                        drop_console: false,
                    },
                },
                rollupOptions: {
                    external: [],
                    output: {
                        globals: {}
                    },
                },
            },
            plugins: [scssInlinePlugin()],
            resolve: {
                alias: {
                    "@": resolve(process.cwd(), "resources"),
                },
            },
        };

        await build(buildConfig);
        console.log('✅ Widget built successfully!');
    } catch (error) {
        console.error('❌ Build failed:', error);
        process.exit(1);
    }
}

buildWidget();

File di Output

I widget compilati vengono generati in:

Widget Preact (Nuovo):

• public/widget/tidiko-widget-preact.js - File widget Preact standalone (UMD)
• public/widget-dev/tidiko-widget-preact-dev.js - File widget Preact development (ES/UMD)
• public/widget-dev/tidiko-widget-preact-dev.umd.js - File widget Preact development UMD

Widget JavaScript Vanilla (Legacy):

• public/widget/tidiko-widget.js - File widget standalone (UMD)
• public/widget/integration.html - Demo interattiva
• public/widget-dev/tidiko-widget-dev.js - File widget development (ES/UMD)
• public/widget-dev/tidiko-widget-dev.umd.js - File widget development UMD

Dipendenze Richieste

package.json

{
  "dependencies": {
    "marked": "^14.1.2",
    "socket.io-client": "^4.7.5",
    "preact": "^10.19.3",
    "preact-compat": "^3.19.0"
  },
  "devDependencies": {
    "sass-embedded": "^1.83.1",
    "vite": "^6.3.5",
    "terser": "^5.37.0",
    "@preact/preset-vite": "^2.8.2"
  }
}

Configurazione Vite per Preact

vite.widget-preact-dev.config.js

import { defineConfig } from "vite";
import { scssInlinePlugin } from "./build-plugins/scss-inline-plugin.js";
import * as sassEmbedded from "sass-embedded";
import preact from "@preact/preset-vite";

export default defineConfig({
    root: "resources",

    server: {
        host: "0.0.0.0",
        port: 5175,
        hmr: {
            host: "localhost",
            protocol: "ws",
        },
        watch: {
            usePolling: true,
        },
        cors: true,
    },

    build: {
        outDir: "../public/widget-dev",
        emptyOutDir: true,
        lib: {
            entry: "js/shadowDomWidgetPreact.jsx",
            name: "TidikoAiWidgetPreact",
            fileName: "tidiko-widget-preact-dev",
            formats: ["es", "umd"],
        },
        rollupOptions: {
            external: [],
            output: {
                globals: {}
            }
        },
        sourcemap: true,
        minify: false,
    },

    plugins: [
        preact(),
        scssInlinePlugin()
    ],

    css: {
        devSourcemap: true,
        preprocessorOptions: {
            scss: {
                implementation: sassEmbedded,
            },
        },
    },

    define: {
        "import.meta.env.DEV": true,
    },
});

Configurazione Vite JavaScript Vanilla (Legacy)

vite.widget-dev.config.js

import { defineConfig } from "vite";
import { scssInlinePlugin } from "./build-plugins/scss-inline-plugin.js";
import * as sassEmbedded from "sass-embedded";

export default defineConfig({
    root: "resources",

    server: {
        host: "0.0.0.0",
        port: 5174,
        hmr: {
            host: "localhost",
            protocol: "ws",
        },
        watch: {
            usePolling: true,
        },
        cors: true,
    },

    build: {
        outDir: "../public/widget-dev",
        emptyOutDir: true,
        lib: {
            entry: "js/shadowDomWidget.js",
            name: "TidikoAiWidget",
            fileName: "tidiko-widget-dev",
            formats: ["es", "umd"],
        },
        rollupOptions: {
            external: [],
            output: {
                globals: {}
            }
        },
        sourcemap: true,
        minify: false,
    },

    plugins: [scssInlinePlugin()],

    css: {
        devSourcemap: true,
        preprocessorOptions: {
            scss: {
                implementation: sassEmbedded,
            },
        },
    },

    define: {
        "import.meta.env.DEV": true,
    },
});