tenryuubito / alice

dev-main 2026-11-01 17:00 UTC

Requires

• symfony/process: ^7.0
• typo3/cms-core: ^14.0
• typo3/cms-frontend: ^14.0

GPL-2.0-or-later

Published on Packagist.org on 2026-11-01 17:00 UTC

README

Alice is a TYPO3 extension that compiles SCSS and TypeScript of any extension with a central Vite build and supports Hot Module Replacement during development.

Requirements

• TYPO3 v14
• Node.js v18+
• Composer-based TYPO3 installation

Commands

./vendor/bin/typo3 alice:bundle --setup   # npm install
./vendor/bin/typo3 alice:bundle --dev     # Vite dev server with HMR
./vendor/bin/typo3 alice:bundle --build   # production build
./vendor/bin/typo3 alice:export-vite-config

Registering entry points

$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['alice']['additional_entries'][] = 'EXT:my_ext/Resources/Private/TypeScript/Main.ts';

Every entry is built to Build/JavaScript/<Name>.js and Build/Css/<Name>.css and copied to the Resources/Public/Build folder of the owning package. Entry file names must be unique across all extensions.

SVG icon tokens

If an extension has Resources/Private/Icons/*.svg and a Resources/Private/Scss/Tokens folder, Alice generates Tokens/_icons.scss with CSS variables, .icon-<name> classes and an icon($name) mixin.

Development mode

In the Development application context, the frontend middleware replaces the <link>/<script> tags of registered entries (/_assets/<hash>/Build/Css/<Name>.css, /_assets/<hash>/Build/JavaScript/<Name>.js, cache-busting query included) with module scripts from the Vite dev server on localhost:5173 as soon as it is reachable.

The npm scripts locate vendor/bin/typo3 by searching upwards from the extension folder; set TYPO3_BIN to override.