jopijs 0.0.1

package/src/@linker/index.ts

@@ -0,0 +1,3 @@
+export * from "./engine.ts";
+export * from "./install.ts";
+export * from "./config.ts";

package/src/@linker/install.ts

@@ -0,0 +1,39 @@
+import * as jk_fs from "jopi-toolkit/jk_fs";
+import * as jk_events from "jopi-toolkit/jk_events";
+import {getBrowserInstallScript, getServerInstallScript} from "./engine.ts";
+import {JopiEasyWebSite, type WebSite} from "jopijs";
+
+export type InstallFunction<T> = (registry: T) => void;
+
+export async function loadServerInstall(webSite: JopiEasyWebSite, onWebSiteCreate: (h: (webSite: WebSite) => void|Promise<void>) => void) {
+    let installFilePath = getServerInstallScript();
+    if (!await jk_fs.isFile(installFilePath)) return;
+
+    try {
+        let v = await import(installFilePath);
+        if (!v.default) return;
+
+        await v.default(webSite, onWebSiteCreate);
+
+        onWebSiteCreate(webSite => {
+            jk_events.sendEvent("jopi.server.install.done", webSite);
+        });
+    }
+    catch (error) {
+        throw error;
+    }
+}
+
+export async function getBrowserInstallFunction<T>(): Promise<InstallFunction<T>> {
+    let installFilePath = getBrowserInstallScript();
+    if (!await jk_fs.isFile(installFilePath)) return gVoidFunction;
+
+    let v = await import(installFilePath);
+    if (!v.default) return gVoidFunction;
+
+    return function(registry: T) {
+        v.default(registry);
+    }
+}
+
+const gVoidFunction = () => {};

package/src/@linker/modInstaller.ts

@@ -0,0 +1,50 @@
+import {
+    CodeGenWriter,
+    FilePart,
+    InstallFileType,
+    ModuleDirProcessor,
+    resolveFile
+} from "./engine.ts";
+import * as jk_fs from "jopi-toolkit/jk_fs";
+
+/**
+ * Search the uiInstall.ts and serverInstall.ts files
+ */
+export default class ModInstaller extends ModuleDirProcessor {
+    private uiInitFiles: string[] = [];
+    private serverInitFiles: string[] = [];
+
+    override async onBeginModuleProcessing(_writer: CodeGenWriter, moduleDir: string): Promise<void> {
+        let uiInitFile = await resolveFile(moduleDir, ["uiInit.tsx", "uiInit.ts"]);
+        if (uiInitFile) this.uiInitFiles.push(uiInitFile);
+
+        let serverInitFile = await resolveFile(moduleDir, ["serverInit.tsx", "serverInit.ts"]);
+        if (serverInitFile) this.serverInitFiles.push(serverInitFile);
+    }
+
+    override async generateCode(writer: CodeGenWriter): Promise<void> {
+        let i = 0;
+
+        for (let uiInitFile of this.uiInitFiles) {
+            i++;
+
+            let relPath = writer.makePathRelativeToOutput(uiInitFile);
+            if (!writer.isTypeScriptOnly) relPath = writer.toJavascriptFileName(relPath);
+
+            writer.genAddToInstallFile(InstallFileType.browser, FilePart.imports, `\nimport modUiInit${i} from "${relPath}";`);
+            writer.genAddToInstallFile(InstallFileType.browser, FilePart.footer, `\n    modUiInit${i}(registry);`)
+        }
+
+        i = 0;
+
+        for (let serverInitFile of this.serverInitFiles) {
+            i++;
+
+            let relPath = writer.makePathRelativeToOutput(serverInitFile);
+            if (!writer.isTypeScriptOnly) relPath = writer.toJavascriptFileName(relPath);
+
+            writer.genAddToInstallFile(InstallFileType.server, FilePart.imports, `\nimport modServerInit${i} from "${relPath}";`);
+            writer.genAddToInstallFile(InstallFileType.server, FilePart.body, `\n    await modServerInit${i}(registry);`)
+        }
+    }
+}

package/src/@linker/typeEvents.ts

@@ -0,0 +1,58 @@
+import {type ArobaseList, Type_ArobaseList} from "./arobaseTypes.ts";
+import {CodeGenWriter, FilePart, InstallFileType, type RegistryItem} from "./engine.ts";
+
+export default class TypeEvents extends Type_ArobaseList {
+    async endGeneratingCode(writer: CodeGenWriter, items: RegistryItem[]): Promise<void> {
+        let count = 0;
+
+        // Here items are individual event listeners.
+        // There are not sorted, an item can be bound to an event A and another item to another event.
+        //
+        for (let item of items) {
+            count++;
+
+            let list = item as ArobaseList;
+
+            // Note: inside installServer.js : use the global event handler.
+            //       inside installBrowser.js: use the event handler local to the request.
+            //
+            let jsSources = `    registry.events.addProvider("${list.listName}", async () => { const R = await import("@/events/${list.listName}"); return R.list; });`;
+            writer.genAddToInstallFile(InstallFileType.both, FilePart.body, jsSources);
+        }
+    }
+
+    protected codeGen_generateImports() {
+        return `import {createStaticEvent} from "jopi-toolkit/jk_events";\n`;
+    }
+
+    protected codeGen_generateExports(array: string, eventName: string) {
+        return `export const list = ${array};
+export const event = createStaticEvent(${JSON.stringify(eventName)}, list);
+export default event;`;
+    }
+
+    protected codeGen_createDeclarationTypes() {
+        return `import type { SyncEventListener, StaticEvent } from "jopi-toolkit/jk_events";
+export declare const list: SyncEventListener[];
+export declare const event: StaticEvent;
+export default event;`
+    }
+
+    protected normalizeConditionName(condName: string): string|undefined {
+        if (condName.startsWith("if")) {
+            condName = condName.substring(2);
+        }
+
+        condName = condName.replace("-", "");
+        condName = condName.replace("_", "");
+
+        if (condName==="browser") {
+            return  "if_browser";
+        }
+        else if (condName==="server") {
+            return "if_server";
+        }
+
+        return undefined;
+    }
+}

package/src/@linker/typeRoutes.ts

@@ -0,0 +1,255 @@
+import {
+    ArobaseType,
+    CodeGenWriter,
+    FilePart,
+    getWriter,
+    InstallFileType,
+    PriorityLevel,
+    resolveFile, writeTextToFileIfMismatch
+} from "./engine.ts";
+import * as jk_fs from "jopi-toolkit/jk_fs";
+import * as jk_app from "jopi-toolkit/jk_app";
+import type {RouteAttributs} from "jopijs/generated";
+
+export default class TypeRoutes extends ArobaseType {
+    private sourceCode_header = `import {routeBindPage, routeBindVerb} from "jopijs/generated";`;
+    private sourceCode_body = "";
+    private outputDir: string = "";
+    private cwdDir: string = process.cwd();
+    private routeCount: number = 1;
+
+    private registry: Record<string, RegistryItem> = {};
+    private routeConfig: Record<string, string> = {};
+
+    async beginGeneratingCode(writer: CodeGenWriter): Promise<void> {
+        for (let item of Object.values(this.registry)) {
+            if (item.verb==="PAGE") {
+                this.bindPage(item.route, item.filePath, item.attributs);
+            } else {
+                this.bindVerb(item.verb, item.route, item.filePath, item.attributs);
+            }
+        }
+
+        if (Object.keys(this.routeConfig).length>0) {
+            this.sourceCode_header += `\nimport {RouteConfig} from "jopijs";`;
+
+            let count = 1;
+
+            for (let route of Object.keys(this.routeConfig)) {
+                let configFile = this.routeConfig[route];
+                let relPath = jk_fs.getRelativePath(writer.dir.output_dir, configFile);
+
+                this.sourceCode_header += `\nimport routeConfig${count} from "${relPath}";`;
+                this.sourceCode_body += `\n    await routeConfig${count}(new RouteConfig(webSite, ${JSON.stringify(route)}));`;
+
+                count++;
+            }
+        }
+
+        this.sourceCode_body = `\n\nexport default async function(webSite) {${this.sourceCode_body}\n}`;
+
+        let filePath = jk_fs.join(writer.dir.output_dir, "declareServerRoutes.js");
+        await writeTextToFileIfMismatch(filePath, writer.AI_INSTRUCTIONS + this.sourceCode_header + this.sourceCode_body);
+
+        writer.genAddToInstallFile(InstallFileType.server, FilePart.imports, `\nimport declareRoutes from "./declareServerRoutes.js";`);
+        writer.genAddToInstallFile(InstallFileType.server, FilePart.footer, "\n    onWebSiteCreated((webSite) => declareRoutes(webSite));");
+    }
+
+    async processDir(p: { moduleDir: string; arobaseDir: string; genDir: string; }) {
+        this.outputDir = getWriter().dir.output_dir;
+
+        let dirAttributes = await this.scanAttributes(p.arobaseDir);
+        //
+        if (dirAttributes.configFile) {
+            this.routeConfig["/"] = dirAttributes.configFile;
+        }
+
+        await this.scanDir(p.arobaseDir, "/", dirAttributes);
+    }
+
+    private bindPage(route: string, filePath: string, attributs: RouteAttributs) {
+        let routeId = "r" + (this.routeCount++);
+        let srcFilePath = jk_fs.getRelativePath(this.cwdDir, filePath);
+
+        filePath = jk_app.getCompiledFilePathFor(filePath);
+        let distFilePath = jk_fs.getRelativePath(this.outputDir, filePath);
+
+        let routeBindingParams = {route, attributs, filePath: srcFilePath};
+
+        this.sourceCode_header += `\nimport c_${routeId} from "${distFilePath}";`;
+        this.sourceCode_body += `\n    await routeBindPage(webSite, c_${routeId}, ${JSON.stringify(routeBindingParams)});`
+    }
+
+    private bindVerb(verb: string, route: string, filePath: string, attributs: RouteAttributs) {
+        let routeId = "r" + (this.routeCount++);
+        let relPath = jk_fs.getRelativePath(this.outputDir, filePath);
+
+        let routeBindingParams = {verb, route, attributs, filePath};
+        this.sourceCode_header += `\nimport f_${routeId} from "${relPath}";`;
+        this.sourceCode_body += `\n    await routeBindVerb(webSite, f_${routeId}, ${JSON.stringify(routeBindingParams)});`
+    }
+
+    protected normalizeFeatureName(feature: string): string|undefined {
+        if (feature==="cache") {
+            return "cache";
+        }
+
+        feature = feature.replaceAll("-", "");
+        feature = feature.replaceAll("_", "");
+
+        if (feature==="autocache") {
+            return "cache";
+        }
+
+        return undefined;
+    }
+
+    protected normalizeConditionName(condName: string, ctx: any|undefined): string|undefined {
+        let needRoleIdx = condName.toLowerCase().indexOf("needrole");
+        if (needRoleIdx===-1) return undefined;
+
+        let target = condName.substring(0, needRoleIdx).toUpperCase();
+        let role = condName.substring(needRoleIdx + 8).toLowerCase();
+        if ((role[0]==='_')||(role[0]==='-')) role = role.substring(1);
+
+        if (!ctx[target]) ctx[target] = [role];
+        else ctx[target].push(role);
+
+        target = target.toLowerCase();
+        return target + "NeedRole_" + role;
+    }
+
+    private async scanAttributes(dirPath: string): Promise<RouteAttributs> {
+        const res: RouteAttributs = {needRoles: {}};
+
+        const infos = await this.dir_extractInfos(dirPath, {
+            allowConditions: true,
+            requirePriority: true,
+            requireRefFile: false,
+            conditionCheckingContext: res.needRoles
+        });
+
+        res.configFile = await resolveFile(dirPath, ["config.tsx", "config.ts"]);
+
+        res.disableCache = (infos.features?.["cache"] === true) ? true : undefined;
+        res.priority = infos.priority;
+
+        if (!Object.values(res.needRoles!).length) {
+            res.needRoles = undefined;
+        }
+
+        return res;
+    }
+
+    private addToRegistry(item: RegistryItem) {
+        const key = item.route + ' ' + item.verb;
+        let current = this.registry[key];
+
+        if (!current) {
+            this.registry[key] = item;
+            return;
+        }
+
+        let newPriority = item.attributs.priority || PriorityLevel.default;
+        let currentPriority = current.attributs.priority || PriorityLevel.default;
+
+        if (newPriority>currentPriority) {
+            this.registry[key] = item;
+        }
+    }
+
+    private async scanDir(dir: string, route: string, attributes: RouteAttributs) {
+        let dirItems = await jk_fs.listDir(dir);
+
+        for (let dirItem of dirItems) {
+            if (dirItem.name[0] === '.') continue;
+
+            // Ignore if starts with '_'.
+            if (dirItem.name[0] === '_') continue;
+
+            if (dirItem.isDirectory) {
+                let segmentInfos = convertRouteSegment(dirItem.name);
+                let newRoute = route==="/" ? route + segmentInfos.routePart : route + "/" + segmentInfos.routePart;
+                let dirAttributs = await this.scanAttributes(dirItem.fullPath);
+
+                if (segmentInfos.isCatchAll && segmentInfos.name) {
+                    dirAttributs.catchAllSlug = segmentInfos.name;
+                }
+
+                if (dirAttributs.configFile) {
+                    this.routeConfig[newRoute] = dirAttributs.configFile;
+                }
+
+                await this.scanDir(dirItem.fullPath, newRoute, dirAttributs);
+            } else if (dirItem.isFile) {
+                let name = dirItem.name;
+
+                if (name.endsWith(".tsx") || name.endsWith(".ts")) {
+                    let idx = name.lastIndexOf(".");
+                    name = name.substring(0, idx);
+
+                    switch (name) {
+                        case "page":
+                            this.addToRegistry({verb: "PAGE", route, filePath: dirItem.fullPath, attributs: attributes});
+                            break;
+                        case "onGET":
+                            this.addToRegistry({verb: "GET", route, filePath: dirItem.fullPath, attributs: attributes});
+                            break;
+                        case "onPOST":
+                            this.addToRegistry({verb: "POST", route, filePath: dirItem.fullPath, attributs: attributes});
+                            break;
+                        case "onPUT":
+                            this.addToRegistry({verb: "PUT", route, filePath: dirItem.fullPath, attributs: attributes});
+                            break;
+                        case "onDELETE":
+                            this.addToRegistry({verb: "DELETE", route, filePath: dirItem.fullPath, attributs: attributes});
+                            break;
+                        case "onHEAD":
+                            this.addToRegistry({verb: "HEAD", route, filePath: dirItem.fullPath, attributs: attributes});
+                            break;
+                        case "onPATCH":
+                            this.addToRegistry({verb: "PATCH", route, filePath: dirItem.fullPath, attributs: attributes});
+                            break;
+                        case "onOPTIONS":
+                            this.addToRegistry({verb: "OPTIONS", route, filePath: dirItem.fullPath, attributs: attributes});
+                            break;
+                    }
+                }
+            }
+        }
+    }
+}
+
+interface RegistryItem {
+    verb: string;
+    route: string;
+    filePath: string;
+    attributs: RouteAttributs;
+}
+
+function convertRouteSegment(segment: string): {routePart: string, isCatchAll?: boolean, name?: string} {
+    if (segment.startsWith("[") && segment.endsWith("]")) {
+        segment = segment.substring(1, segment.length - 1);
+
+        if (segment.startsWith("..")) {
+            segment = segment.substring(2);
+            while (segment[0]===".") segment=segment.substring(1);
+
+            return {
+                routePart: "**",
+                isCatchAll: true,
+                name: segment.length ? segment : undefined
+            };
+        }
+
+        return {
+            routePart: ":" + segment,
+            isCatchAll: false,
+            name: segment
+        };
+    }
+
+    return {
+        routePart: segment
+    };
+}

package/src/@linker/typeUiComposite.ts

@@ -0,0 +1,19 @@
+import {Type_ArobaseList} from "./arobaseTypes.ts";
+
+export default class TypeUiComposite extends Type_ArobaseList {
+    protected codeGen_generateExports(listAsArray: string) {
+        let array = listAsArray.slice(1, -2).split(",");
+        listAsArray = array.map(e => `        _jsx(${e}, {})`).join(", \n");
+        let fct = `function p() {\n    return _jsxs(_Fragment, { children: [\n${listAsArray}\n    ]});\n}`;
+
+        return "export default " + fct + ";";
+    }
+
+    protected codeGen_generateImports() {
+        return `import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";\n`;
+    }
+
+    protected codeGen_createDeclarationTypes() {
+        return `export default function p(): import("react/jsx-runtime").JSX.Element;`
+    }
+}

package/src/@loader/README.md

@@ -0,0 +1,4 @@
+It's the entry point for the loader functionalities allowing to extension Node.js and Bun.js
+capacities to do custom import.
+
+This lib is automatically referenced by the `jopin` tool (and jopib).

package/src/@loader/bunHtmlCompiler.mjs

@@ -0,0 +1,27 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+//import {compile, getDefaultLinkerConfig} from "../@linker/index.ts";
+
+const myPlugin = {
+    name: "jopi-replace-text",
+
+    setup(build) {
+        build.onLoad({filter: /\.(tsx|ts|js|jsx)$/}, async ({path: p2}) => {
+            const oldContent = await fs.readFile(p2, 'utf8');
+            let newContent = oldContent.replace("jBundler_ifServer", "jBundler_ifBrowser");
+            const loader = path.extname(p2).toLowerCase().substring(1);
+            return {contents: newContent, loader: loader};
+        });
+
+        // Note: this is not working since it's executed only once at the first start
+        //       and not after each rebuild.
+
+        /*build.onStart(async () => {
+            //console.log("Jopi - Bun static compiler loader - beforeRebuild");
+            //await timer(3000);
+            //await compile(import.meta, getDefaultLinkerConfig());
+        });*/
+    }
+}
+
+export default myPlugin;

package/src/@loader/index.ts

@@ -0,0 +1,19 @@
+import * as NodeModule from 'node:module';
+
+import {isNodeJS, isBunJS} from "jopi-toolkit/jk_what";
+import {installBunJsLoader} from "jopijs/loader-tools";
+
+// Guard to avoid recursive self-registration when using Module.register(import.meta.url)
+const __JOPI_LOADER_REGISTERED__ = Symbol.for('jopi-loader:registered');
+const __g: any = globalThis as any;
+
+if (!__g[__JOPI_LOADER_REGISTERED__]) {
+    __g[__JOPI_LOADER_REGISTERED__] = true;
+
+    if (isNodeJS) {
+        // "register" allow async.
+        NodeModule.register(new URL('./nodeJsLoader.js', import.meta.url));
+    } else if (isBunJS) {
+        installBunJsLoader();
+    }
+}

package/src/@loader/loader.mjs

@@ -0,0 +1,7 @@
+import {resolveNodeJsAlias} from "jopijs/loader-tools"
+
+//console.log('⚠️🎉🌟🔥🛑⚠️🚫 loader');
+
+export async function resolve(specifier, context, nextResolve) {
+    return resolveNodeJsAlias(specifier, context, nextResolve);
+}

package/src/@loader/nodeJsLoader.ts

@@ -0,0 +1,21 @@
+import {doNodeJsLoad, doNodeJsResolve} from "jopijs/loader-tools";
+
+// Guard to avoid recursive self-registration when using Module.register(import.meta.url)
+/*const __JOPI_LOADER_REGISTERED__ = Symbol.for('jopi-loader:registered');
+const __g: any = globalThis as any;
+
+if (!__g[__JOPI_LOADER_REGISTERED__]) {
+    __g[__JOPI_LOADER_REGISTERED__] = true;
+
+    // "register" allow async.
+    NodeModule.register(import.meta.url as unknown as string);
+}*/
+
+export async function resolve(specifier: string, context: any, nextResolve: any) {
+    return doNodeJsResolve(specifier, context, nextResolve);
+}
+
+// noinspection JSUnusedGlobalSymbols
+export async function load(url: string, context: any, nextLoad: any) {
+    return doNodeJsLoad(url, context, nextLoad);
+}

package/src/@loader-client/README.md

@@ -0,0 +1,2 @@
+It's tools used from the application launched from the loader when using `jopin`.
+It allows communication with the host in case where the watching / browser refresh is in place.

package/src/@loader-client/index.ts

@@ -0,0 +1,108 @@
+import process from 'node:process';
+import type {WebSite} from "../@core";
+import * as jk_events from "jopi-toolkit/jk_events";
+import {isBunJS} from "jopi-toolkit/jk_what";
+import {DontCallBeforeElapsed} from "jopi-toolkit/jk_tools";
+
+export function isBrowserRefreshEnabled(): boolean {
+    return hasJopiDevFlag() || hasJopiDevUiFlag();
+}
+
+/**
+ * JOPI_DEV: on source change, restart the server and refresh the browser.
+ * It's slower than JOPI_DEV_UI but allows testing server changes.
+ */
+export function hasJopiDevFlag() {
+    return process.env.JOPI_DEV === "1";
+}
+
+/**
+ * JOPI_DEV_UI: on source change, don't restart the server
+ * but rebuild the UI pages and refresh the browser.
+ * (with bun: it uses React HMR, which is a special case)
+ *
+ * -> It's way faster than JOPI_DEV but can have some inconsistency
+ *    when modifying the @alias directory content.
+ */
+export function hasJopiDevUiFlag() {
+    return process.env.JOPI_DEV_UI === "1";
+}
+
+/**
+ * Single page mode is when the internal bundle compiles the pages one by one.
+ * It's used for development to have a fast starting time.
+ *
+ * The opposite (when not single-page mode) is to compile all the pages in one go.
+ * This produces an optimized bundle, without duplicates, but can be slow to start.
+ */
+export function isSinglePageMode() {
+    if (gSinglePageMode===undefined) {
+        if (isReactHMR()) gSinglePageMode = false;
+        else gSinglePageMode = hasJopiDevFlag() || hasJopiDevUiFlag();
+    }
+
+    return gSinglePageMode;
+}
+//
+let gSinglePageMode: boolean|undefined;
+
+/**
+ * React HMR is when the browser automatically refreshes his content
+ * but without a full refresh. It does a clever refresh by removing old
+ * JavaScript and injecting the new-one, before re-rendering the React components
+ * without losing their previous state.
+ */
+export function isReactHMR() {
+    return hasJopiDevUiFlag() && isBunJS;
+}
+
+function sse_onChange() {
+    const event = new EventSource('/_jopirw_/bundler');
+    let isFirstConnection = true;
+
+    // This allows refreshing the browser when
+    // the connection is lost, and the browser connects again.
+    //
+    event.addEventListener('open', () => {
+        if (isFirstConnection) isFirstConnection = false;
+        else window.location.reload();
+    });
+
+    // This allows refreshing the browser when
+    // the server sends a signal to the browser.
+    //
+    event.addEventListener("change", () => {
+        console.log("SSE Event [/_jopirw_/bundler] : Refreshing browser");
+        window.location.reload();
+    });
+}
+//
+let g_sse_onChange: string|undefined;
+
+export function getBrowserRefreshScript() {
+    if (!g_sse_onChange) {
+        g_sse_onChange = sse_onChange.toString();
+    }
+
+    return `(${g_sse_onChange})()`;
+}
+
+export function installBrowserRefreshSseEvent(webSite: WebSite) {
+    webSite.addSseEVent("/_jopirw_/bundler", {
+        getWelcomeMessage() {
+            return "Jopi Rewrite - Browser refresh";
+        },
+
+        handler(controller) {
+            jk_events.addListener("@jopi.bundler.watch.afterRebuild", () => {
+                // Can occur multi times with single-page mode.
+                if (!gLimitBrowserRefresh.check()) return;
+
+                console.log("🔥 JopiN - UI change detected: refreshing browser");
+                controller.send("change", "updated");
+            });
+        }
+    });
+}
+
+const gLimitBrowserRefresh = new DontCallBeforeElapsed(2000);

package/src/@loader-tools/README.md

@@ -0,0 +1,6 @@
+Contains tools related to pre-processing your source-code.
+Mainly for manager the `import` in order to allows Node.js to mimick Vite.js import capacities:
+
+* Importing images / json / ...
+* Supporting alias `import "@/shared/myItems.ts` where `@/shared` point to a special location.
+* Supporting `?raw` and `?inline` modifiers. Ex: `import asDataUrl from "./myImage.png?inline"`.

package/src/@loader-tools/bunJsLoader.ts

@@ -0,0 +1,33 @@
+import {supportedExtensionsRegExp} from "./rules.ts";
+import {transformFile} from "./transform.ts";
+import {installEsBuildPlugins} from "./esBuildPlugin.js";
+
+// https://bun.com/docs/runtime/plugins
+
+export function installBunJsLoader() {
+    Bun.plugin({
+        name: "jopi-loader",
+        setup(build) {
+            // For module.css and imports with ?inline and ?raw
+            installEsBuildPlugins(build);
+
+            // For .css/.scss/.png/.txt/...
+            build.onLoad({filter: supportedExtensionsRegExp}, async ({path}) => {
+                let idx = path.indexOf("?");
+                let options = "";
+
+                if (idx !== -1) {
+                    options = path.substring(idx + 1);
+                    path = path.substring(0, idx);
+                }
+
+                const res = await transformFile(path, options);
+
+                return {
+                    contents: res.text,
+                    loader: "js",
+                };
+            });
+        }
+    });
+}