@salla.sa/twilight-components/dist/collection/global/twilight-dev-mode-plugin.ts

Salla Web Component

import { Plugin } from '@stencil/core/internal';
import { postcss } from '@stencil-community/postcss';
// @ts-ignore
import autoprefixer from 'autoprefixer';
import tailwindcss from 'tailwindcss';
import { env } from '@alepop/stencil-env';
import { readFileSync } from 'fs';

export const isWatchMode = process.argv.includes('-w') || process.argv.includes('--watch');
export const watchInRealTheme = process.env.WATCH_IN_REAL_THEME === 'true';

export function twilightDevModePlugin(): Plugin {
    console.log(`Twilight  Now One ${isWatchMode ? 'development👨🏻‍🔬' : 'production🚀'} mode bundle`);

    return {
        name: 'twilight-dev-mode-plugin',
        transform(sourceText: string, id: string) {
            if (!id.endsWith('global/app.ts') || !isWatchMode) {
                return null;
            }

            return sourceText.replace(/import '@salla\.sa\/twilight'/, `import '@salla.sa/twilight/dist/@salla.sa/twilight.min'`);
        }
    };
}


export function getGlobalPaths(): { globalScript: string; globalCss: string | null } {
    let globalScript: string = './src/global/app.ts';
    let globalCss: string | null = null;

    if (isWatchMode && !watchInRealTheme) {
        globalScript = './src/global/app-dev.ts';
        globalCss = './src/global/app.scss';
    }

    return { globalScript, globalCss };
}

export function getGlobalScript(): string {
    return getGlobalPaths().globalScript;
}

export function getGlobalCss(): string | null {
    return getGlobalPaths().globalCss;
}

export function getPlugins(): Plugin[] {
    if (!isWatchMode) {
        return [];
    }

    return [
        env(),
        twilightDevModePlugin(),
        postcss({ plugins: [tailwindcss(), autoprefixer()] }),
    ];
}

/**
 * Get dev server configuration based on SSL mode
 */
export function getDevServer(): Record<string, any> {
    const devServer: Record<string, any> = {};

    if (!process.argv.includes('--secure')) {
        return devServer;
    }

    try {
        devServer.https = {
            cert: readFileSync('cert.crt', 'utf8'),
            key: readFileSync('key.pem', 'utf8')
        };
    } catch (error) {
        console.error(`Failed to read SSL certificates: ${error}`);
    }

    return devServer;
}