🛠️ Vitex

A modular and reusable Vite configuration helper tailored for TYPO3 frontend development.

Vitex is designed to simplify the build setup for TYPO3-based projects using Vite. It provides automatic entrypoint resolution, namespaced output for sites handling, and post-build manifest cleanup. It supports multi-site structures, structured SCSS/JS asset handling, and a clean developer experience.

🚀 Features

• Automatic entrypoint resolution via ViteEntrypoints.json
• Namespace-aware output naming for sites (e.g. mysite_default, global_main)
• Manifest cleanup (removes self-imports, normalizes asset names)
• Configurable aliases, copy targets, plugins, server settings
• No build step required – raw JS usable directly in dev setup
• Fully compatible with Vite + TYPO3 + SCSS/JS workflows

New in v1.1.0

• Optional Root Build support: discover entry points in a project-level Build/Frontend folder
  • Default patterns (configurable):
    • Styles/*.scss, JavaScript/*.js (top-level only)
    • Styles/*/*.scss, JavaScript/*/*.js (one sitename folder level)
• Sitename-aware output for Root Build (<sitename>_File.css; fallback global_*)
• PostCSS auto-pickup and CSS minification via esbuild (keeps icon-font PUA glyphs intact)
• Improved alias resolution and staticCopyTargets handling
• Post-build manifest normalization retained

📦 Installation

If used locally:

npm install file:./packages/vitex

Or as an installed package:

npm install @belsignum/vitex

🧩 Usage

// vite.config.js
import Vitex from 'vitex';

const vite = new Vitex({
    sitenames: ['mysite', 'other-site'],
    outputPath: 'public/assets/',
    packagesPath: 'packages/sitepackage',
    aliases: [
        { find: '@sitepackage', replacement: 'packages/sitepackage' }
    ],
    staticCopyTargets: [
        { src: 'node_modules/bootstrap-icons/*', dest: 'bootstrap-icons' }
    ],
    server: {
        allowedHosts: ['vite.ddev.site']
    },

    // New in v1.1.0:
    rootBuild: {
        enabled: true,               // enable discovery in Build/Frontend
        path: 'Build/Frontend',
        patterns: [
            'Styles/*.scss',
            'JavaScript/*.js',
            'Styles/*/*.scss',
            'JavaScript/*/*.js'
        ],
        // treat underscore-prefixed files as partials/components
        ignoreUnderscore: true
    }
});

export default vite.getViteConfig();

Scripts

Add npm scripts to your package.json:

"scripts": {
"dev": "vite --host 0.0.0.0",
"build": "vite build",
"watch": "vite build --watch",
"preview": "vite preview"
}

⚙️ Configuration Options

Vitex accepts the following options when creating a new instance:

| Option | Type | Default | Description | |---------------------|------------|----------------------|-------------| | sitenames | string[] | [] | List of TYPO3 site identifiers used for namespacing output files. | | outputPath | string | public/assets/ | Path where compiled assets will be written. | | packagesPath | string | packages/sitepackage | Path to your sitepackage or TYPO3 package containing frontend sources. | | aliases | array | [] | Custom alias definitions passed directly to Vite ({ find, replacement }). | | staticCopyTargets | array | [] | Copy patterns for static assets (uses vite-plugin-static-copy). | | server | object | {} | Extra Vite dev server configuration, e.g. allowedHosts. | | rootBuild | object | { enabled: false } | Enables discovery of entrypoints from a global Build/Frontend folder. | | └─ enabled | boolean | false | Whether root-level build discovery is active. | | └─ path | string | "Build/Frontend" | Folder scanned for global entrypoints. | | └─ patterns | string[] | see below | Glob patterns used to discover SCSS/JS entrypoints.Default: ['Styles/*.scss','JavaScript/*.js','Styles/*/*.scss','JavaScript/*/*.js']. | | └─ ignoreUnderscore | boolean | true | Treat underscore-prefixed files (_partial.scss) as partials and ignore them. |

Changelog

v1.1.0

• Added support for Root Build (e.g. project-level Build/Frontend)
• Improved configuration and documentation
• PostCSS auto-pickup and CSS minification via esbuild (keeps icon-font PUA glyphs intact)

v1.0.3

• Initial public release

License

MIT License