@love-sqjm/magic 2026.4.15

package/script/module/compiler/step/6.js

@@ -0,0 +1,304 @@
+import path from "node:path";
+import { Config } from "../../../config.js";
+import { copyDir } from "../../../util/copy-dir.js";
+import { fileUtil } from "../../../util/file-util.js";
+import { isStringOverSize } from "../../../util/is-string-over-size.js";
+import { traversal } from "../../../util/traversal.js";
+import { project } from "../global.js";
+import { _end } from "./end.js";
+import { bunFS } from "../../../util/bun-fs.js";
+
+function asyncWriteFile( filePath, content ) {
+    return new Promise( ( resolve, reject ) => {
+        bunFS.writeFileSync( filePath, content );
+        resolve();
+    } );
+}
+
+function createMJs( md ) {
+    const data = md.data;
+
+    let element_var = "", ct = "", ct_number = 0, init_kw_id = "", init_kw_name = "", init_att = "", init_eve = "", sh = "", iei = "";
+
+    try {
+        traversal.object( data.template.var, ( v, i, k ) => {
+            element_var += `${ k },`;
+            ct_number++;
+            if ( v.type === "element" ) {
+                ct += `${ k } = e(\`${ v.tagName }\`)`;
+            } else if ( v.type === "import" ) {
+                let listen = false;
+                if ( v.keyword.listen ) {
+                    listen = ",{ ";
+                    traversal.object( v.keyword.listen, ( _v, i, _k ) => {
+                        if ( _v === "" ) {
+                            throw `你对一个元素使用了监听功能但是没有绑定事件`;
+                        }
+                        listen += `"${ _k }": __magic_listen_${ _v },`;
+                    } );
+                    listen += " }";
+                }
+                ct += `${ k } = i(\`${ v.import }\`,${ JSON.stringify( v.args ) }${ listen ? listen : "" })`;
+            } else if ( v.type === "text" ) {
+                ct += `${ k } = t(\`${ v.content.replaceAll( '\\', '\\\\' ).replace( /\$\{([^}]+)\}/g, '\\${$1}' ) }\`)`;
+            }
+
+            if ( v.type !== "text" ) {
+                if ( !isEmptyObject( v.attribs ) ) {
+                    init_att += `att(${ k },${ JSON.stringify( v.attribs ) });\n`;
+                }
+
+                traversal.object( v.event, ( v, i, en ) => {
+                    const evn = v[ 0 ];
+                    if ( !data.event.list.includes( evn ) ) {
+                        if ( evn === "" ) {
+                            throw `你对一个元素绑定了空事件`;
+                        } else {
+                            throw `你对一个元素绑定了 ${ evn } 事件,但是没有实现 ${ evn } 事件`;
+                        }
+                    }
+                    init_eve += `eve(${ k },"${ en }",this,"${ evn }",${ v[ 1 ] });\n`;
+                } );
+
+                if ( v.keyword.hasOwnProperty( "id" ) ) {
+                    let r = "";
+                    if ( !isEmptyObject( data.cssScope ) )
+                        traversal.object( data.cssScope, ( _v, i, k ) => {
+                            if ( k === v.keyword.id ) {
+                                r = `,"${ _v }"`;
+                            }
+                        } );
+                    init_kw_id += `this._$id.s("${ v.keyword.id }",${ k }${ r });\n`
+                }
+                if ( v.keyword.hasOwnProperty( "name" ) ) {
+                    init_kw_name += `${ k }._$name = "${ v.keyword.name }";\n`
+                }
+            }
+            ct += ";\n"
+        } );
+
+        if ( element_var !== "" ) {
+            element_var = element_var.slice( 0, -1 );
+            element_var.split( ',' ).filter( ev => ev.at( 0 ) === "i" ).reverse().forEach( ev => {
+                iei += `${ ev },`;
+            } );
+            if ( iei !== "" ) {
+                iei = `magic.importElementInit(${ iei.slice( 0, -1 ) });`;
+            }
+            element_var = "let " + element_var;
+        }
+
+        data.template.sh.forEach( t => {
+            sh += `${ t }\n`;
+        } );
+    } catch ( e ) {
+        throw `${ e }\n[path:${ data.originalFile }]`
+    }
+    return `window[ "__MAGIC__" ][ "M" ][ "${ data.name }" ] = function ( __args__ , __listen__) {
+    const call = magic.call(this);
+    this._$id = magic.mapIdElement();
+    const $id = magic.$id(this._$id);
+    const _args = {_file:"${ data.originalFile }",_id: magic.idGenerate(),...magic.parserArgs(__args__)};
+    const _listen = magic.parserListen(__listen__);
+    const emit_event = magic.emit.event(_listen);
+
+    ${ data[ "use-element-id-list" ].length > 0 ? `var ${ data[ "use-element-id-list" ].join( "," ) };` : "" }
+
+    this.__magic_element_root = document.createDocumentFragment();
+
+    ${ data.before.code }
+
+    this.__magic_template = ( () => {
+        const { element: e, text: t, attribute: att,event: eve , append } = magic.dom, i = magic.importM;
+        ${ element_var };
+
+        return {
+            render : () => {
+                ${ ct }${ init_kw_name }\n${ init_att }\n${ init_kw_id }\n({${ data[ "use-element-id-list" ].join( ',' ) } }= $id());\n${ sh }\n${ iei }
+            },
+            bind_event : ()=>{ ${ init_eve } },
+            export_element : () => {
+            return magic.BindScope(${ element_var.length > 1 ? `[ ${ element_var.substring( 4 ) } ]` : "[]" },this,_args._id);
+            }
+        };
+    } )();
+
+    this.__magic_template.render();
+
+    ${ data.global.code }
+
+    ${ data.listen.code }
+
+    ${ data.event.code }
+
+    this.__magic_template.bind_event();
+
+    ${ data.interface.code }
+
+    ${ data.script.code }
+    ${ ( () => {
+        let r = "";
+        data.once_interface.forEach( t => {
+            r += `call.interface.${ t }();\n`;
+        } );
+        return r;
+    } )() }
+    ${
+        ( () => {
+            if ( !data.template.fragment ) {
+                return `const __root__element__ = this.__magic_template.export_element().at(0);
+__root__element__.__file = "${ data.originalFile }",
+__root__element__.mid = _args._id,
+__root__element__.fragment = this.__magic_element_root,
+__root__element__.interface = this.__magic_interface,
+__root__element__.templateArgs =  ${ JSON.stringify( data.templateArgs ) },
+__root__element__.exposeEvent = ${ data[ "expose-event" ] };
+return __root__element__;`;
+            } else {
+                return `return {
+__file : "${ data.originalFile }",
+__fragment : true,
+mid : _args._id,
+fragment : this.__magic_element_root,
+interface : this.__magic_interface,
+templateArgs : ${ JSON.stringify( data.templateArgs ) },
+exposeEvent : ${ data[ "expose-event" ] },
+childNodes : [...this.__magic_template.export_element()]
+};`;
+            }
+        } )()
+    }
+}`;
+}
+
+function isEmptyObject( obj ) {
+    return Object.keys( obj ).length === 0;
+}
+
+export function _6( mDatas, CSS_VAR ) {
+    if ( project.build_config.build.platform.target !== "module" && project.build_config.build.import.module )
+        project.build_config.build.import.module.forEach( p => {
+            const tp = path.normalize( p );
+            if ( !bunFS.existsSync( tp ) ) {
+                throw `目标导入模块不存在 ${ tp }`
+            }
+            copyDir( tp, project.outDir + path.basename( p ) );
+
+            const md = JSON.parse( bunFS.readFileSync( tp + "/module.info.json" ) );
+            md.files.forEach( file => {
+                const p = md.dir + "/" + file;
+                const ext = fileUtil.getExtensionName( p );
+                if ( ext === "js" ) {
+                    project.index_dom.add( "begin", {
+                        tag : "script",
+                        attrs : [
+                            { src : `./${ p }` }
+                        ]
+                    } );
+                } else if ( ext === "css" ) {
+                    project.index_dom.add( "begin", {
+                        tag : "link",
+                        one : true,
+                        attrs : [
+                            { href : `./${ p }` },
+                            { rel : `stylesheet` }
+                        ]
+                    } );
+                }
+            } );
+        } );
+
+    const paths = [];
+
+    bunFS.writeFileSync( `${ project.outDirMagic }/default-theme-var.css`, CSS_VAR );
+
+    if ( project.build_config.build.model === "debug" ) {
+        const ps = [];
+        mDatas.forEach( md => {
+            const jsPath = project.outDirMagic + `${ md.data.name }.js`;
+            const cssPath = project.outDirMagic + `${ md.data.name }.css`;
+            const jsContent = createMJs( md );
+
+            ps.push( asyncWriteFile( jsPath, jsContent ) );
+            ps.push( asyncWriteFile( cssPath, md.data.css ) );
+
+            project.index_dom.add( "begin", {
+                tag : "script",
+                attrs : [
+                    { src : `./magic/${ md.data.name }.js` }
+                ]
+            } );
+            project.index_dom.add( "begin", {
+                tag : "link",
+                one : true,
+                attrs : [
+                    { href : `./magic/${ md.data.name }.css` },
+                    { rel : `stylesheet` }
+                ]
+            } );
+            paths.push( `${ md.data.name }.js` );
+            paths.push( `${ md.data.name }.css` );
+        } );
+        Promise.all( ps ).then( () => {
+            _end( paths );
+        } );
+    } else if ( project.build_config.build.model === "release" ) {
+        const AllDta = {
+            mScript : [],
+            css : []
+        };
+        let currentMScriptBlock = "", currentCSSBlock = "";
+        mDatas.forEach( md => {
+            currentMScriptBlock += createMJs( md ) + "\n";
+            if ( isStringOverSize( currentMScriptBlock, Config.build.MScriptBlockSize ) ) {
+                AllDta.mScript.push( currentMScriptBlock );
+                currentMScriptBlock = "";
+            }
+            currentCSSBlock += md.data.css + "\n";
+            if ( isStringOverSize( currentCSSBlock, Config.build.CSSBlockSize ) ) {
+                AllDta.css.push( currentCSSBlock );
+                currentCSSBlock = "";
+            }
+        } );
+
+        {
+            AllDta.css.push( currentCSSBlock );
+            let i = 0, c = "";
+            AllDta.css.forEach( block => {
+                project.index_dom.add( "begin", {
+                    tag : "link",
+                    one : true,
+                    attrs : [
+                        { href : `./magic/m${ c }.css` },
+                        { rel : `stylesheet` }
+                    ]
+                } );
+                paths.push( `m${ c }.css` );
+                bunFS.writeFileSync( project.outDirMagic + `m${ c }.css`, block );
+
+                i += 1;
+                c = "-" + i;
+            } );
+        }
+
+        {
+            AllDta.mScript.push( currentMScriptBlock );
+            let i = 0, c = "";
+            AllDta.mScript.forEach( block => {
+                project.index_dom.add( "begin", {
+                    tag : "script",
+                    attrs : [
+                        { type : `text/javascript` },
+                        { src : `./magic/m${ c }.js` }
+                    ]
+                } );
+                paths.push( `m${ c }.js` );
+                bunFS.writeFileSync( project.outDirMagic + `m${ c }.js`, block );
+
+                i += 1;
+                c = "-" + i;
+            } );
+        }
+        _end( paths );
+    }
+}

package/script/module/compiler/step/end.js

@@ -0,0 +1,124 @@
+import htmlMinifier from "html-minifier-terser";
+import postcss from 'postcss';
+import autoprefixer from 'autoprefixer';
+import { minify_sync } from "terser";
+import { app } from "../../../../app.js";
+import { printf } from "../../../global/printf.js";
+import { fileUtil } from "../../../util/file-util.js";
+import { getDirAllFile } from "../../../util/get-dir-all-file.js";
+import { project } from "../global.js";
+import { START_TIME } from "../start.js";
+import { bunFS } from "../../../util/bun-fs.js";
+
+async function processCssString( cssString ) {
+    try {
+        const result = await postcss( [
+            autoprefixer( {
+                overrideBrowserslist : [
+                    'last 2 versions',
+                    'Firefox >= 140',
+                    'Chrome >= 140',
+                    'Safari >= 15'
+                ]
+            } )
+        ] ).process( cssString, {
+            from : undefined,
+            map : false
+        } );
+
+        return result.css;
+    } catch ( error ) {
+        console.error( 'CSS 处理失败:', error );
+        throw error;
+    }
+}
+
+export function _end( paths ) {
+    const outDir = app.project.dir + project.build_config.build.out;
+    if ( project.build_config.build.platform.target === "module" ) {
+        const moduleData = {
+            ...project.build_config.config,
+            dir : project.build_config.build.out,
+            model : project.build_config.build.model,
+            files : [
+                "default-theme-var.css",
+                ...paths
+            ]
+        };
+        delete moduleData.src;
+
+        bunFS.writeFileSync( project.outDir + "module.info.json", JSON.stringify( moduleData, null, 2 ) );
+    } else {
+        bunFS.writeFileSync( `${ outDir }/index.html`, project.index_dom.generate() );
+    }
+
+    const ps = [];
+
+    getDirAllFile( project.outDir ).forEach( ( file ) => {
+        ps.push( new Promise( async ( resolve, reject ) => {
+            const ext = fileUtil.getExtensionName( file );
+            let data = bunFS.readFileSync( file );
+            if ( ext === "html" ) {
+                if ( project.build_config.build.optimize[ "min-code" ].html )
+                    data = await htmlMinifier.minify( data, {
+                        collapseWhitespace : true,
+                        removeEmptyAttributes : false,
+                        collapseBooleanAttributes : false,
+                        removeAttributeQuotes : true,
+                        minifyCSS : false,
+                        minifyJS : false,
+                        removeStyleLinkTypeAttributes : false,
+                        removeScriptTypeAttributes : false
+                    } );
+            } else if ( ext === "js" ) {
+                try {
+                    data = await minify_sync( data, {
+                        compress : project.build_config.build.optimize[ "min-code" ].js,
+                        mangle : project.build_config.build.optimize[ "min-code" ].js,
+                        format : {
+                            beautify : !project.build_config.build.optimize[ "min-code" ].js,
+                            indent_level : 2,
+                            indent_start : 0,
+                            quote_style : 1,
+                            wrap_iife : false,
+                            preserve_annotations : !project.build_config.build.optimize[ "min-code" ].js
+                        }
+                    } ).code;
+                } catch ( e ) {
+                    console.error( e )
+                }
+            } else if ( ext === "css" ) {
+                if ( project.build_config.build.optimize[ "min-code" ].css )
+                    data = await htmlMinifier.minify( data, {
+                        collapseWhitespace : true,
+                        removeEmptyAttributes : false,
+                        collapseBooleanAttributes : false,
+                        removeAttributeQuotes : true,
+                        minifyCSS : true,
+                        minifyJS : false,
+                        removeStyleLinkTypeAttributes : false,
+                        removeScriptTypeAttributes : false
+                    } );
+                data = await processCssString( data );
+            } else {
+                resolve();
+                return;
+            }
+            bunFS.writeFileSync( file, data );
+            resolve();
+        } ) );
+    } );
+
+    Promise.all( ps ).then( () => {
+        console.log( `\n构建完成 ヾ(๑╹◡╹)ﾉ` + `\n耗时 ${ ( new Date().getTime() - START_TIME ) / 1000 }(s)` );
+        if ( project.build_config.build.platform.target === "web" ) {
+            const c = project.build_config.build.platform.config.server;
+            if ( c && c.port && c.host ) {
+                fetch( `http://${ c.host }:${ c.port }/==UPDATE==` )
+                .catch( e => {
+                    printf.outFile.log( e );
+                } );
+            }
+        }
+    } );
+}

package/script/run-project.js

@@ -0,0 +1,249 @@
+import mime from "mime-types";
+import { exec } from "node:child_process";
+import fs from "node:fs";
+import * as http from "node:http";
+import * as os from "node:os";
+import path from "node:path";
+import * as url from "node:url";
+import { app } from "../app.js";
+import { printf } from "./global/printf.js";
+import { macroReplace } from "./module/compiler/macro-replace.js";
+import { examine_BuildConfig } from "./module/compiler/step/1.js";
+import WebSocket from "ws"
+
+const platform = {
+    "node-webkit" : ( platform_config ) => {
+        try {
+            const pk = `${ app.project.dir }/package.json`;
+            if ( !fs.existsSync( pk ) ) {
+                fs.writeFileSync( pk, "{}" );
+            }
+
+            let pkJson = {};
+
+            const data = fs.readFileSync( pk ).toString();
+            if ( data ) {
+                pkJson = JSON.parse( data );
+            }
+
+            const newPk = Object.assign( pkJson, platform_config.build.platform.config );
+            newPk[ "main" ] = platform_config.build.out + "/" + platform_config.config.main + ".html";
+            delete newPk[ "app" ];
+            fs.writeFileSync( pk, JSON.stringify( newPk ) );
+        } catch ( e ) {
+            throw e;
+        }
+
+        const command = `${ platform_config.build.platform.config.app } ${ app.project.dir }`;
+        exec( command, ( error, stdout, stderr ) => {
+            if ( error ) {
+                throw error;
+            }
+            printf.log( stdout );
+            printf.error( stderr );
+        } );
+    },
+    "web" : ( platform_config ) => {
+        if ( platform_config.build.platform.config.browser ) {
+            const command = `start ${ platform_config.config.main }.html`;
+            exec( command, ( error, stdout, stderr ) => {
+                if ( error ) {
+                    throw error;
+                }
+                printf.log( stdout );
+                printf.error( stderr );
+            } );
+        } else if ( platform_config.build.platform.config.server ) {
+            const hostname = platform_config.build.platform.config.server[ "host" ];
+            const port = platform_config.build.platform.config.server[ "port" ];
+
+            const rootDir = platform_config[ "build-dir" ];
+
+
+            // 0 没有操作 1 刷新
+            let clientData = 0;
+            const connectedClients = new Set();
+
+            const server = http.createServer( ( req, res ) => {
+                const parsedUrl = url.parse( req.url, true );
+                const targetPath = parsedUrl.pathname;
+
+                if ( targetPath === "/==UPDATE==" ) {
+                    res.setHeader( 'Content-Type', "text/txt; charset=utf-8" );
+                    res.statusCode = 200;
+                    res.end( `OK` );
+                    clientData = 1;
+                    return;
+                }
+
+                let target = path.resolve( rootDir, `.${ targetPath }` );
+                if ( !target.startsWith( rootDir ) ) {
+                    target = rootDir + "index.html";
+                }
+                if ( fs.existsSync( target ) ) {
+                    const ext = path.extname( target ).toLowerCase();
+                    const stat = fs.statSync( target );
+                    if ( stat.isDirectory() ) {
+                        target = path.join( target, 'index.html' );
+                        if ( !fs.existsSync( target ) ) {
+                            res.statusCode = 404;
+                            res.setHeader( 'Content-Type', 'text/plain' );
+                            res.end( `404 Not Found: ${ req.url }/index.html` );
+                            return;
+                        }
+                    }
+
+                    const contentType = mime.lookup( ext ) || 'application/octet-stream';
+                    res.setHeader( 'Content-Type', contentType );
+                    res.statusCode = 200;
+                    fs.readFile( target, ( err, data ) => {
+                        if ( err ) {
+                            res.statusCode = 500;
+                            res.end( `500 Server Error: ${ err.message }` );
+                            printf.error( `文件读取失败: ${ target } - ${ err.message }` );
+                            return;
+                        }
+
+                        if ( path.basename( target ) === "index.html" ) {
+                            const wsScript = `
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+    const reconnectInterval = 5000;
+    let ws = null;
+    let timeid = null;
+    let reconnectTimer = null;
+
+    function createWebSocket() {
+        if (ws) {
+            ws.close();
+        }
+
+        ws = new WebSocket(\`ws://\${window.location.hostname}:${ port }\`);
+
+        ws.onopen = () => {
+            console.log('WebSocket link');
+            clearTimeout(reconnectTimer);
+        };
+
+        ws.onerror = (err) => {
+            console.error('WebSocket fali:', err);
+        };
+
+        ws.onmessage = (event) => {
+            if (event.data === "1") {
+                clearTimeout(timeid);
+                location.reload();
+                timeid = setTimeout(() => {
+                    if (document.getElementById("app")?.childNodes.length === 0) {
+                        location.reload();
+                    }
+                }, 500);
+            }
+        };
+
+        ws.onclose = (event) => {
+            console.log('WebSocket disconnect');
+
+            clearTimeout(reconnectTimer);
+
+            reconnectTimer = setTimeout(() => {
+                createWebSocket();
+            }, reconnectInterval);
+        };
+    }
+
+    createWebSocket();
+
+    window.addEventListener('beforeunload', () => {
+        clearTimeout(timeid);
+        clearTimeout(reconnectTimer);
+        if (ws) {
+            ws.close();
+        }
+    });
+});
+</script>`;
+                            data = Buffer.concat( [ data, Buffer.from( wsScript ) ] );
+                        }
+                        res.end( data );
+                    } );
+                } else {
+                    res.statusCode = 404;
+                    res.setHeader( 'Content-Type', 'text/plain' );
+                    res.end( 'file not exist ' + target );
+                }
+            } );
+
+            const wss = new WebSocket.Server( { server } );
+
+            function broadcastRefresh() {
+                connectedClients.forEach( ( ws ) => {
+                    if ( ws.readyState === WebSocket.OPEN ) {
+                        try {
+                            ws.send( clientData );
+                        } catch ( error ) {
+                            console.error( `send message fail: ${ error.message }` );
+                        }
+                    }
+                } );
+                clientData = 0;
+            }
+
+            setInterval( broadcastRefresh, 500 );
+
+            wss.on( 'connection', ws => {
+                connectedClients.add( ws );
+
+                ws.on( 'message', ( data ) => {
+                    const message = data.toString( "utf-8" );
+                    console.log( `client message: ${ message }` );
+                } );
+
+                ws.on( 'close', ( code, reason ) => {
+                    connectedClients.delete( ws );
+                } );
+
+                ws.on( 'error', ( error ) => {
+                    console.error( `WebSocket client fail: ${ error.message }` );
+                    connectedClients.delete( ws );
+                } );
+            } );
+
+            server.listen( parseInt( port ), hostname, () => {
+                console.log( `HTTP 服务器已启动: http://localhost:${ port }/index.html` );
+                console.log( `使用 Ctrl + C 停止服务器` );
+
+                const command = `start http://${ hostname }:${ port }/index.html`;
+                exec( command, ( error, stdout, stderr ) => {
+                    if ( error ) {
+                        printf.outFile.error( error );
+                        throw error;
+                    }
+                    printf.outFile.log( stdout );
+                } );
+            } );
+        }
+    }
+};
+
+/**
+ * @returns {Promise<void>}
+ */
+export function RunProject() {
+    printf.outFile.info( `运行项目` );
+
+    const file = path.normalize( app.project.dir + "build.toml" );
+    import(file ).then( root => {
+        printf.outFile.info( `预处理 Build 配置文件 [path:${ file }]` );
+        const config = examine_BuildConfig( macroReplace( root ) );
+        if ( config ) {
+            if ( config.build.platform.target === "module" ) {
+                throw `无法运行模块`;
+            } else {
+                config[ "build-dir" ] = path.normalize( app.project.dir + config.build.out + '/' );
+                platform[ config.build.platform.target ]( config );
+            }
+        }
+    } );
+}
+