Malina.js + TypeScript example

App.xht

<script type="typescript">
    let name: string  = 'bar';
</script>

<h1>Hello {name}!</h1>

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import derver from 'derver/rollup-plugin';
import css from 'rollup-plugin-css-only';
import { terser } from "rollup-plugin-terser";
import malina from 'malinajs/malina-rollup'
import malinaSass from 'malinajs/plugins/sass'
import * as ts from "typescript";

const DEV = !!process.env.ROLLUP_WATCH;
const cssInJS = true;

function tsCompile(source, options) {
    if (options === void 0) { options = null; }
    if (null === options) {
        options = { compilerOptions: { module: ts.ModuleKind.CommonJS } };
    }
    return ts.transpileModule(source, options).outputText;
}

export default {
    input: 'src/main.js',
    output: {
        file: 'public/bundle.js',
        format: 'iife',
    },
    plugins: [
        malina({
            hideLabel: !DEV,
            css: cssInJS,
            plugins: [malinaSass(), {
                name: 'typescript',
                'js:before': (ctx) => {
                    // if script block is present
                    if(!ctx.scriptNodes.length) return;
                    // if script block has attribute: type="typescript"
                    if(!ctx.scriptNodes[0].attributes.some(a => a.name == 'type' && a.value == 'typescript')) return;
                    
                    // replace source
                    let source = ctx.scriptNodes[0].content;
                    ctx.scriptNodes[0].content = tsCompile(source);
                }
            }]
        }),
        resolve(),
        DEV && derver(),
        !cssInJS && css({ output: 'bundle.css' }),
        !DEV && terser()
    ],
    watch: {
        clearScreen: false
    }
}