@love-sqjm/magic 2026.4.15

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

@@ -0,0 +1,634 @@
+import generate from "@babel/generator";
+import * as parser from "@babel/parser";
+import traverse from "@babel/traverse";
+import * as t from "@babel/types";
+import { parse } from 'node-html-parser';
+import node_path from "node:path";
+import postcss from "postcss";
+import { printf } from "../../../global/printf.js";
+import { is } from "../../../util/is.js";
+import { task } from "../../../util/task.js";
+import { traversal } from "../../../util/traversal.js";
+import { project } from "../global.js";
+import { idGenerate } from "../id-generate.js";
+import { macroReplace } from "../macro-replace.js";
+import { _6 } from "./6.js";
+import { bunFS } from "../../../util/bun-fs.js";
+
+function convertArrowFunctionToNormal( name, arrowFuncCode ) {
+    try {
+        const ast = parser.parse( arrowFuncCode, {
+            sourceType : "script"
+        } );
+
+        traverse( ast, {
+            ArrowFunctionExpression( path ) {
+                const node = path.node;
+                const params = node.params;
+
+                let body;
+                if ( t.isBlockStatement( node.body ) ) {
+                    body = node.body;
+                } else {
+                    body = t.blockStatement( [
+                        t.returnStatement( node.body )
+                    ] );
+                }
+
+                let funcId = null;
+                if ( name && typeof name === 'string' && name.trim() ) {
+                    funcId = t.identifier( name.trim() );
+                }
+
+                const normalFunc = t.functionExpression(
+                    funcId,
+                    params,
+                    body,
+                    false,
+                    false
+                );
+
+                path.replaceWith( normalFunc );
+            }
+        } );
+
+        const output = generate( ast, {
+            concise : false,
+            quotes : "double",
+            retainLines : true
+        } );
+
+        let code = output.code.trim().replace( /;$/, "" );
+        code = code.replace( /^\s*\(/, '' ).replace( /\)\s*$/, '' );
+        return code;
+    } catch ( error ) {
+        throw "转换失败：" + error.message;
+    }
+}
+
+
+function pretreatmentMagicMacro( code, spmm = {} ) {
+    let ast;
+    try {
+        ast = parser.parse( code, {
+            sourceType : 'module',
+            plugins : [ "asyncGenerators" ],
+            locations : true
+        } );
+    } catch ( e ) {
+        throw `code: ${ e.code }\n错误原因: ${ e.reasonCode }\n行 ${ e.loc.line },列 ${ e.loc.column }\n`;
+    }
+
+    traverse( ast, {
+        CallExpression( path ) {
+            if ( path.node.callee.type === "Identifier" && path.node.callee.name === "magic_define_include" ) {
+                const filePath = path.node.arguments.at( 0 );
+
+                if ( filePath.type === "StringLiteral" ) {
+                    const fp = node_path.normalize( macroReplace( filePath.value ) );
+                    if ( !bunFS.existsSync( fp ) ) throw `该文件不存在 [path:${ filePath.value }]`;
+                    const data = bunFS.readFileSync( fp );
+                    path.replaceWith( parser.parseExpression( data ) );
+                } else if ( filePath.type === "Identifier" ) {
+                    throw `magic 宏定义 不允许使用动态变量 ${ filePath.name }`;
+                } else {
+                    throw `magic_define_include 第一个参数类型应该为 string ,实际是 ${ filePath.type }`;
+                }
+            }
+
+            if ( path.node.callee.type === "Identifier" && path.node.callee.name === "magic_define_ui_data" ) {
+                const parent = path.parent;
+
+                if ( t.isVariableDeclarator( parent ) && parent.id ) {
+                    if ( t.isIdentifier( parent.id ) ) {
+                        spmm.uiDataName = parent.id.name;
+                    } else if ( t.isObjectPattern( parent.id ) || t.isArrayPattern( parent.id ) ) {
+                        throw new Error( 'magic_define_ui_data 不能使用解构赋值' );
+                    }
+                } else {
+                    throw new Error( 'magic_define_ui_data 必须用作变量声明' );
+                }
+
+                if ( spmm.createUiData ) {
+                    throw new Error( `不能创建多个 magic_define_ui_data` );
+                } else {
+                    spmm.createUiData = true;
+                }
+
+                const data = path.node.arguments.at( 0 );
+
+                if ( t.isObjectExpression( data ) ) {
+                    path.node.callee = t.identifier( 'magic.createUiData' );
+                    path.node.arguments.push( t.identifier( '_args' ) );
+                } else {
+                    throw new Error( `magic_define_ui_data 第一个参数类型应该为 object, 实际是 ${ data.type }` );
+                }
+            }
+
+            if ( path.node.callee.type === "Identifier" && path.node.callee.name === "magic_dynamic_value_bind" ) {
+                if ( !spmm.createUiData ) {
+                    throw new Error( `你必须创建 magic_define_ui_data 才能使用动态值绑定` );
+                }
+                path.node.callee = t.identifier( 'magic.DynamicValueBind' );
+                path.node.arguments.push( t.identifier( spmm.uiDataName ) );
+            }
+        },
+        VariableDeclaration( path ) {
+            const declarations = path.node.declarations;
+            if ( declarations.length === 1 ) {
+                const declaration = declarations[ 0 ];
+                if ( t.isObjectPattern( declaration.id ) ) {
+                    const init = declaration.init;
+
+                    if ( t.isCallExpression( init ) &&
+                        t.isIdentifier( init.callee ) &&
+                        init.callee.name === '$id' ) {
+
+                        const properties = declaration.id.properties;
+                        properties.forEach( prop => {
+                            spmm.elementIDList.add( prop.key.name );
+                        } );
+                        path.remove();
+                    }
+                }
+            }
+        }
+    } );
+
+    const { code : newCode } = generate( ast, {}, code );
+    return {
+        code : newCode,
+        options : {}
+    };
+}
+
+function extractFunctions( code ) {
+    const ast = parser.parse( code, {
+        sourceType : 'module',
+        plugins : [ "asyncGenerators" ]
+    } );
+
+    const functions = {};
+
+    traverse( ast, {
+        AssignmentExpression( path ) {
+            if ( path.node.left.type === 'Identifier' && ( path.node.right.type === 'ArrowFunctionExpression' || path.node.right.type === 'FunctionExpression' ) ) {
+                const functionName = path.node.left.name;
+                functions[ functionName ] = generate( path.node.right ).code;
+            }
+        }
+    } );
+
+    return functions;
+}
+
+function extractArrowFunctionNames( code ) {
+    const ast = parser.parse( code, {
+        sourceType : 'module',
+        plugins : [ "asyncGenerators" ]
+    } );
+
+    const functionNames = [];
+
+    traverse( ast, {
+        AssignmentExpression( path ) {
+            if ( path.node.left.type === 'Identifier' && path.node.right.type === 'ArrowFunctionExpression' ) {
+                functionNames.push( path.node.left.name );
+            }
+        }
+    } );
+
+    return functionNames;
+}
+
+function pretreatmentMagicEvent( code ) {
+    const functions = extractFunctions( code );
+    return `this.__magic_event = {${ Object.keys( functions ).map( key => `${ key }: ${ functions[ key ] }` ).join( ', ' ) }}`;
+}
+
+function pretreatmentMagicListen( code ) {
+    const functions = extractFunctions( code );
+    return `${ Object.keys( functions ).map( key => convertArrowFunctionToNormal( `__magic_listen_${ key }`, functions[ key ] ) ).join( "\n" ) }`;
+}
+
+function pretreatmentMagicInterface( code ) {
+    const functions = extractFunctions( code );
+    return `this.__magic_interface = {${ Object.keys( functions ).map( key => `${ key }: ${ functions[ key ] }` ).join( ', ' ) }}`;
+}
+
+function getMagicDefineScript( code ) {
+    return extractArrowFunctionNames( code );
+}
+
+let CSS_VAR = ":root { \n";
+let CSS_VAR_COUNT = 0;
+
+const mSource = ( () => {
+    const s = [];
+
+    return {
+        has( p ) {
+            return s.includes( p );
+        },
+        init( arr ) {
+            arr.forEach( ( item ) => {
+                s.push( item.relative().slice( 0, -2 ).replace( /\\/g, '/' ) );
+            } );
+        }
+    }
+} )();
+
+function trimString( str, t, rawAttrs ) {
+    if ( rawAttrs && rawAttrs.length > 0 )
+        str = str.slice( t.length + rawAttrs.length + 3 );
+    else
+        str = str.slice( t.length + 2 );
+    str = str.slice( 0, -( t.length + 3 ) || str.length );
+    return str;
+}
+
+function println() {
+
+}
+
+class mData {
+    #source;
+    #dateObject = {
+        "import" : {
+            "~global" : {}
+        },
+        "template" : {
+            var : {},
+            sh : [],
+            fragment : true
+        },
+        "script" : "",
+        "before" : "",
+        "global" : "",
+        "event" : "",
+        "interface" : "",
+        "listen" : "",
+        "once_interface" : [],
+        "css" : "",
+        "expose-event" : {},
+        "use-element-id-list" : []
+    };
+    #name;
+    #id;
+    #cssScope = {};
+    #originalFile;
+    #once_interface_args = {};
+
+    constructor( s ) {
+        this.#source = s;
+    }
+
+    get data() {
+        return {
+            ...this.#dateObject,
+            name : this.#name,
+            cssScope : this.#cssScope,
+            once_interface_args : this.#once_interface_args,
+            originalFile : this.#originalFile.replaceAll( '\\', '/' )
+        }
+    }
+
+    init() {
+        const absPath = this.#source.absolute();
+        const fileContent = bunFS.readFileSync( absPath );
+
+        const dom = parse( `<root>${ fileContent }</root>` );
+
+        this.#originalFile = node_path.normalize( absPath ).substring( project.srcDir.length );
+        if ( project.build_config.build.platform.target === "module" )
+            this.#name = ( project.build_config.config.name + this.#originalFile ).slice( 0, -2 )
+            .replace( /[^a-zA-Z]/g, '' ).toLowerCase();
+        else
+            this.#name = this.#originalFile.slice( 0, -2 )
+            .replace( /[^a-zA-Z]/g, '' ).toLowerCase();
+
+        const FILE_NAME = this.#name;
+
+        printf.outFile.info( `预处理 [path:${ absPath }] [name:${ FILE_NAME }]` );
+
+        if ( this.#name === "" ) {
+            println = console.log
+        } else {
+            println = () => {}
+        }
+
+        task( () => {
+            function isModule( tag ) {
+                return function () {
+                    if ( tag.substring( 0, 7 ) === "module:" )
+                        return {
+                            bool : true,
+                            result : tag.substring( 7 )
+                        };
+                    return {
+                        bool : false,
+                        result : tag
+                    };
+                }
+            }
+
+            dom.querySelectorAll( "root>import" ).forEach( ( e ) => {
+                const namespace = e.getAttribute( "namespace" ) || "~global";
+                const root = e.getAttribute( "root" ) || "";
+
+                if ( !this.#dateObject.import.hasOwnProperty( namespace ) )
+                    this.#dateObject.import[ namespace ] = {};
+                const module = this.#dateObject.import[ namespace ];
+
+                e.childNodes.forEach( ( node ) => {
+                    if ( node.nodeType === 3 ) return;
+                    is( isModule( node.rawTagName ),
+                        ( tag ) => {
+                            const s = tag + '/';
+                            node.childNodes.forEach( ( _node ) => {
+                                if ( _node.nodeType === 3 ) return;
+                                const newTag = _node.rawTagName;
+                                is( isModule( newTag ), () => {
+                                    throw `模块里面不能在嵌套一个模块了! [${ node.rawTagName } > ${ newTag }]`;
+                                } );
+                                const src = _node.hasAttribute( "src" ) ? _node.getAttribute( "src" ) + '/' : "";
+                                module[ newTag ] = `${ root }/${ s }${ src }${ newTag }`;
+                            } );
+                        },
+                        ( tag ) => {
+                            const src = node.hasAttribute( "src" ) ? node.getAttribute( "src" ) + '/' : "";
+                            module[ tag ] = `${ root }/${ src }${ tag }`;
+                        }
+                    );
+                } );
+            } );
+
+            traversal.object( this.#dateObject.import, o => {
+                traversal.object( o, v => {
+                    if ( !mSource.has( v ) ) printf.outFile.log( `外部导入 ${ v }` );
+                } );
+            } );
+        }, `预处理 [import:${ absPath }]` );
+
+        task( () => {
+            const $template = dom.querySelector( "root>template" );
+
+            traversal.object( this.#dateObject.import, ( namespace, i, k ) => {
+                const namespaceTag = ( k === "~global" ) ? "" : k + '\\:';
+                traversal.object( namespace, ( src, i, tag ) => {
+                    $template.querySelectorAll( `${ namespaceTag }${ tag }` ).forEach( ( node ) => {
+                        node.setAttribute( "#import", src );
+                    } );
+                } );
+            } );
+
+            let count = 0;
+            const it = ( rootElement, parentNode ) => {
+                let segment = `append(${ parentNode }`;
+                rootElement.childNodes.forEach( ( element ) => {
+                    let varName = "";
+                    if ( element.nodeType === 1 ) {
+                        const attribs = {
+                            attribs : {},
+                            event : {},
+                            args : {},
+                            keyword : {}
+                        };
+                        traversal.object( element.attrs, ( v, i, k ) => {
+                            const c = k.at( 0 );
+                            const n = k.substring( 1 );
+                            if ( c === "#" ) {
+                                if ( n === "import" )
+                                    attribs[ "import" ] = v;
+                                else if ( n.includes( ':' ) ) {
+                                    const [ kn, vn ] = n.split( ':' );
+                                    if ( !attribs.keyword.hasOwnProperty( kn ) )
+                                        attribs.keyword[ kn ] = {};
+                                    attribs.keyword[ kn ][ vn ] = v;
+                                } else
+                                    attribs.keyword[ n ] = v;
+                            } else if ( c === "@" ) {
+                                const ind = v.indexOf( ':' );
+                                if ( ind !== -1 ) {
+                                    const eventName = v.substring( 0, ind );
+                                    attribs.event[ n ] = [ eventName, v.substring( eventName.length + 1 ) ];
+                                } else attribs.event[ n ] = [ v, "{}" ];
+                            } else if ( c === ":" ) {
+                                attribs.args[ n ] = v;
+                            } else {
+                                attribs.attribs[ k ] = v;
+                            }
+                        } );
+                        attribs[ "import" ] ? varName = `i_${ count++ }` : varName = `e_${ count++ }`;
+                        this.#dateObject.template.var[ varName ] = {
+                            type : attribs[ "import" ] ? "import" : "element",
+                            tagName : element.tagName.toLowerCase(),
+                            ...attribs
+                        };
+
+                        const contents = element.childNodes;
+                        if ( contents.length > 0 )
+                            it( element, varName );
+                    } else if ( element.nodeType === 3 ) {
+                        if ( element.text.trim() === "" ) return;
+                        varName = `t_${ count++ }`;
+
+                        this.#dateObject.template.var[ varName ] = {
+                            type : "text",
+                            content : element.text
+                        };
+                    } else {
+                        return;
+                    }
+                    segment += `,${ varName }`;
+                } );
+                const temp = segment.substring( 33 ).split( "," );
+
+                if ( temp.length === 1 ) {
+                    this.#dateObject.template.fragment = false;
+                }
+                this.#dateObject.template.sh.push( segment + ");" );
+            }
+
+            it( $template, "this.__magic_element_root" );
+
+            this.#dateObject[ "templateArgs" ] = {
+                inline : $template.hasAttribute( "inline" )
+            }
+        }, `预处理 [template:${ absPath }]` );
+
+        const _rs_before = [],
+            _rs_global = [],
+            _rs_script = [],
+            _rs_event = [],
+            _rs_listen = [],
+            _rs_interface = [];
+
+        dom.querySelectorAll( `root > script` ).forEach( ( e ) => {
+            if ( e.attributes[ "code" ] === "before" ) {
+                _rs_before.push( e );
+            } else if ( e.attributes[ "code" ] === "event" ) {
+                _rs_event.push( e );
+            } else if ( e.attributes[ "code" ] === "event" ) {
+                _rs_event.push( e );
+            } else if ( e.attributes[ "code" ] === "interface" ) {
+                _rs_interface.push( e );
+            } else if ( e.attributes[ "code" ] === "listen" ) {
+                _rs_listen.push( e );
+            } else {
+                _rs_script.push( e );
+            }
+        } );
+
+        task( () => {
+            dom.querySelectorAll( `root > expose-event` ).forEach( ( e ) => {
+                e.childNodes.forEach( child => {
+                    if ( child.nodeType !== 1 ) return;
+                    const nodeName = child.tagName.toLowerCase();
+                    this.#dateObject[ "expose-event" ][ nodeName ] = Object.keys( child.attributes ).map( attrName => {
+                        return attrName.replace( /^:/, '' );
+                    } );
+                } );
+            } );
+            this.#dateObject[ "expose-event" ] = JSON.stringify( this.#dateObject[ "expose-event" ] );
+        }, `预处理 [expose-event:${ absPath }]` );
+        const scopePretreatmentMagicMacro = {
+            createUiData : false,
+            uiDataName : "",
+            elementIDList : new Set()
+        };
+
+        task( () => {
+            _rs_before.forEach( ( e ) => {
+                this.#dateObject.before += `${ trimString( e.outerHTML, "script", e.rawAttrs ) }`;
+            } );
+
+            this.#dateObject.before = pretreatmentMagicMacro( this.#dateObject.before, scopePretreatmentMagicMacro );
+        }, `预处理 [before:${ absPath }]` );
+
+        task( () => {
+            _rs_global.forEach( ( e ) => {
+                this.#dateObject.global += `${ trimString( e.outerHTML, "script", e.rawAttrs ) }`;
+            } );
+
+            this.#dateObject.global = pretreatmentMagicMacro( this.#dateObject.global, scopePretreatmentMagicMacro );
+        }, `预处理 [global:${ absPath }]` );
+
+        task( () => {
+            _rs_script.forEach( ( e ) => { this.#dateObject.script += `${ trimString( e.outerHTML, "script", e.rawAttrs ) }`; } );
+
+            this.#dateObject.script = pretreatmentMagicMacro( this.#dateObject.script, scopePretreatmentMagicMacro );
+        }, `预处理 [script:${ absPath }]` );
+
+        this.#dateObject[ "use-element-id-list" ] = [ ...scopePretreatmentMagicMacro.elementIDList ];
+
+        task( () => {
+            _rs_event.forEach( ( e ) => { this.#dateObject.event += `${ trimString( e.outerHTML, "script", e.rawAttrs ) }`; } );
+
+            const oo = this.#dateObject.event;
+            this.#dateObject.event = {
+                code : pretreatmentMagicEvent( oo ),
+                list : getMagicDefineScript( oo )
+            };
+        }, `预处理 [event:${ absPath }]` );
+
+        task( () => {
+            _rs_listen.forEach( ( e ) => { this.#dateObject.listen += `${ trimString( e.outerHTML, "script", e.rawAttrs ) }`; } );
+
+            const oo = this.#dateObject.listen;
+            this.#dateObject.listen = {
+                code : pretreatmentMagicListen( oo ),
+                list : getMagicDefineScript( oo )
+            };
+        }, `预处理 [listen:${ absPath }]` );
+
+        task( () => {
+            _rs_interface.forEach( ( e ) => {
+                const code = trimString( e.outerHTML, "script", e.rawAttrs );
+                this.#dateObject.interface += code;
+
+                if ( e.hasAttribute( "once" ) ) {
+                    const li = getMagicDefineScript( code );
+                    this.#dateObject.once_interface.push( ...li );
+                }
+            } );
+            const oo = this.#dateObject.interface;
+            this.#dateObject.interface = {
+                code : pretreatmentMagicInterface( oo ),
+                list : getMagicDefineScript( oo )
+            };
+        }, `预处理 [interface:${ absPath }]` );
+
+        task( () => {
+            const cssDefaultThemeTransitionVar = () => {
+                return {
+                    postcssPlugin : 'css-default-theme-transition-var',
+                    Once( root ) {
+                        root.walkAtRules( ( rule ) => {
+                            if ( rule.name === 'keyframes' || rule.name === 'media' ) {
+                                rule.remove();
+                            }
+                        } );
+
+                        root.walkRules( ( rule ) => {
+                            const nt = rule.selector
+                            .replace( /[&>.="*\[\]]/g, "" )
+                            .replace( /\s+/g, " " )
+                            .replace( /[^a-zA-Z0-9]/g, '-' );
+                            rule.walkDecls( ( decl ) => {
+                                const varName = `--${ FILE_NAME }-${ nt }-${ decl.prop.replace( /-/g, '-' ) }-${ CSS_VAR_COUNT++ }`;
+                                CSS_VAR += `${ varName }: ${ decl.value }; \n`;
+                                decl.value = `var(${ varName })`;
+                            } );
+                        } );
+                    }
+                };
+            };
+            cssDefaultThemeTransitionVar.postcss = true;
+
+            dom.querySelectorAll( `root > css` ).forEach( ( e ) => {
+                const code = trimString( e.outerHTML, "css", e.rawAttrs );
+
+                let scope = e.hasAttribute( "scope" ) ? e.getAttribute( "scope" ) : "&";
+                if ( scope.trim() === "" ) {
+                    return;
+                }
+                if ( scope.length > 5 && scope.substring( 0, 4 ) === "#id:" ) {
+                    scope = scope.substring( 4 );
+                    if ( this.#cssScope.hasOwnProperty( scope ) ) {
+                        scope = `.${ this.#cssScope[ scope ] }`;
+                    } else {
+                        const id = "m-css-scope-" + idGenerate( 6 );
+                        this.#cssScope[ scope ] = id;
+                        scope = `.${ id }`;
+                    }
+                }
+
+                if ( e.hasAttribute( "default-theme" ) && project.build_config.build.optimize[ "out-default-theme" ] ) {
+                    const result = postcss( [ cssDefaultThemeTransitionVar() ] ).process( code );
+                    this.#dateObject.css += `${ scope } { ${ result.css } }\n`;
+                } else this.#dateObject.css += `${ scope } { ${ code } }\n`;
+            } );
+        }, `预处理 [css:${ absPath }]` );
+        return this;
+    }
+}
+
+export function _5( m ) {
+    const promises = [];
+
+    mSource.init( m );
+
+    m.forEach( s => {
+        promises.push( new Promise( ( resolve, reject ) => {
+            const data = new mData( s );
+            data.init();
+            resolve( data );
+        } ) );
+    } );
+
+    Promise.all( promises ).then( ms => {
+        CSS_VAR += "}";
+        _6( ms, CSS_VAR );
+    } );
+}