@wiajs/core 1.2.2 → 2.1.0

package/dist/core.mjs

@@ -1,6 +1,6 @@
 /*!
-  * wia core v1.2.1
-  * (c) 2015-2025 Sibyl Yu and contributors
+  * wia core v2.1.0
+  * (c) 2015-2026 Sibyl Yu and contributors
   * Released under the MIT License.
   */
 /**
@@ -2073,6 +2073,194 @@ class Event {
   }
 }
 
+/**
+ * @typedef {Object} LogOptions
+ * @property {string} m - 模块名称
+ */
+
+/**
+ * @typedef {((...args: any[]) => void) & { debug: (...args: any[])=>void, info: (...args: any[])=>void, warn: (...args: any[])=>void, error: (...args: any[])=>void, err: (...args: any[])=>void }} ScopedLogger
+ */
+
+/**
+ * @typedef {((...args: any[]) => void) & { log: (...args: any[])=>void, debug: (...args: any[])=>void, info: (...args: any[])=>void, warn: (...args: any[])=>void, error: (...args: any[])=>void, err: (...args: any[])=>void, fn: (name: string) => ScopedLogger }} LoggerFn
+ */
+
+// 1. 安全地获取开发环境状态（兼容打包工具、浏览器和 Node.js）
+// 如果 Rspack 注入了 __DEV__，就用注入的值；如果是在 Node.js 下，就回退读取 "production"
+const isDev = typeof __DEV__ !== 'undefined' ? __DEV__ : "production" !== 'production';
+
+/**
+ * 前端日志输出，封装 console 日志，简化代码
+ * 自动识别并重排提示符与对象，保持前后端一致性
+ */
+class Log {
+  /** @type {string} 模块名称 */
+  m = ''
+
+  /** @type {string} 函数名称 */
+  fnName = ''
+
+  /**
+   * @param {string} [m=''] 模块
+   * @param {string} [fnName=''] 函数
+   */
+  constructor(m = '', fnName = '') {
+    this.m = m;
+    this.fnName = fnName;
+  }
+
+  /**
+   * 格式化参数：提取提示符，构建前缀，将对象后置
+   * 格式要求：[模块名称:函数名称]提示符: {对象}
+   * @param {any[]} args
+   * @returns {any[]} 返回处理后传递给 console 的参数数组
+   */
+  formatArgs(args) {
+    let R = '';
+    const _ = this;
+    try {
+      const msgs = [];
+      const objs = [];
+
+      // 1. 将字符串(提示符)和非字符串(对象/数值等)分开
+      for (const arg of args) {
+        if (typeof arg === 'string') msgs.push(arg);
+        else objs.push(arg);
+      }
+
+      let prefix = '';
+
+      // 2. 添加模块与函数前缀
+      if (_.m) prefix = `[${_.m}${_.fnName ? ':' + _.fnName : ''}]`;
+      else if (_.fnName) prefix = `[:${_.fnName}]`;
+
+      // 3. 拼接提示符
+      const msg = msgs.join(' ');
+      if (msg) prefix += msg;
+
+      R = [];
+      if (prefix) R.push(prefix);
+      R.push(...objs);
+    } catch (e) {
+      console.error(`formatArgs exp:${e.message}`);
+    }
+
+    return R
+  }
+
+  /** @param {...any} args */
+  log(...args) {
+    // 生产环境安全剔除 (需 Rspack DefinePlugin 注入 __DEV__)
+    if (isDev) console.log(...this.formatArgs(args));
+  }
+
+  /** @param {...any} args */
+  debug(...args) {
+    if (isDev) console.debug(...this.formatArgs(args));
+  }
+
+  /** @param {...any} args */
+  info(...args) {
+    if (isDev) console.info(...this.formatArgs(args));
+  }
+
+  /** @param {...any} args */
+  warn(...args) {
+    if (isDev) console.warn(...this.formatArgs(args));
+  }
+
+  /** @param {...any} args */
+  trace(...args) {
+    if (isDev) console.trace(...this.formatArgs(args));
+  }
+
+  /** * error 会在生产环境保留
+   * @param {...any} args
+   */
+  error(...args) {
+    console.error(...this.formatArgs(args));
+  }
+
+  /**
+   * 用于 catch(e) log.err(e) 或 log.err("提示符", e) 或 log.err(e, "提示符")
+   * 自动对齐前缀 [模块:函数] 提示符: Error对象，并保留堆栈
+   * @param {...any} args
+   */
+  err(...args) {
+    // 生产环境安全输出，不会被 Tree-shaking 摇掉
+    // formatArgs 会自动分离字符串与 Error 对象，并补全冒号
+    const formattedArgs = this.formatArgs(args);
+
+    // 原生打印，保持 stack trace 可点击跳转！
+    console.error(...formattedArgs);
+  }
+
+  /**
+   * 派生函数级别日志实例 (完美对齐后端 log.fn)
+   * @param {string} name 函数名称
+   * @returns {ScopedLogger}
+   */
+  fn(name) {
+    const scopedLog = new Log(this.m, name);
+
+    /** @type {any} */
+    const R = (...args) => scopedLog.log(...args);
+
+    R.debug = scopedLog.debug.bind(scopedLog);
+    R.info = scopedLog.info.bind(scopedLog);
+    R.warn = scopedLog.warn.bind(scopedLog);
+    R.trace = scopedLog.trace.bind(scopedLog);
+    R.error = scopedLog.error.bind(scopedLog);
+    R.err = scopedLog.err.bind(scopedLog);
+
+    return /** @type {ScopedLogger} */ (R)
+  }
+}
+
+// 实例化唯一的全局日志单例
+const _log = new Log();
+
+/**
+ * 标准日志输出或构建模块日志类实例，用于模块中带[m:xxx]标记日志输出
+ * 传入 { m: '模块名' } 构建实例，或直接传入参数输出全局日志
+ * @param {...any} args - params
+ * returns {*}
+ */
+function log(...args) {
+  const last = args.at(-1);
+
+  // 1. 如果只有一个参数且带 m 属性，说明是构造 Logger 实例 (如: const log = Log({m: 'User'}))
+  if (args.length === 1 && typeof last === 'object' && last !== null && 'm' in last) {
+    const lg = new Log(last.m);
+
+    /** @type {any} */
+    const R = (...args2) => lg.log(...args2);
+
+    R.log = lg.log.bind(lg);
+    R.debug = lg.debug.bind(lg);
+    R.info = lg.info.bind(lg);
+    R.warn = lg.warn.bind(lg);
+    R.trace = lg.trace.bind(lg);
+    R.error = lg.error.bind(lg);
+    R.err = lg.err.bind(lg);
+    R.fn = lg.fn.bind(lg); // 暴露派生函数作用域方法
+
+    return /** @type {LoggerFn} */ (R)
+  }
+
+  // 2. 否则作为全局普通日志直接输出
+  _log.log(...args);
+}
+
+// 绑定全局快捷方法，方便直接调用 log.err(e) 等
+log.err = _log.err.bind(_log);
+log.error = _log.error.bind(_log);
+log.warn = _log.warn.bind(_log);
+log.info = _log.info.bind(_log);
+log.debug = _log.debug.bind(_log);
+log.trace = _log.trace.bind(_log);
+
 /**
  * 所有页面从该类继承，并必须实现 load 事件！
  * 事件
@@ -2101,7 +2289,6 @@ class Event {
  *
  */
 
-
 class Page extends Event {
   constructor(app, name, title, style) {
     super(null, [app]);
@@ -2143,16 +2330,16 @@ class Page extends Event {
    * 在已经加载就绪的视图上操作
    * @param {*} view 页面层的 Dom 对象，已经使用`$(#page-name)`，做了处理
    * @param {*} param go 函数的参数，或 网址中 url 中的参数
-   * @param {*} back 是否为回退，A->B, B->A，这种操作属于回退
+   * @param {*} lastPath 前路由的路径，go 函数的参数，或 网址中 url 中的参数
    */
-  ready(view, param, back) {
+  ready(view, param, lastPath) {
     // $.assign(this, {page, param, back});
     // $.assign(this.data, param);
     // 隐藏所有模板
     this.init();
-    this.emit('local::ready', view, param, back);
+    this.emit('local::ready', view, param, lastPath);
     // 向上触发跨页面事件，存在安全问题
-    this.emit('pageReady', this, view, param, back);
+    this.emit('pageReady', this, view, param, lastPath);
   }
 
   /**
@@ -2166,29 +2353,29 @@ class Page extends Event {
 
   // 显示已加载的页面
   // view：页面Dom层，param：参数
-  show(view, param) {
+  show(view, param, lastPath) {
     // 隐藏所有模板
     view.qus('[name$=-tp]').hide();
     // 防止空链接，刷新页面
     view.qus('a[href=""]').attr('href', 'javascript:;');
     // this.init();
     if (this.reset) this.reset();
-    this.emit('local::show', view, param);
+    this.emit('local::show', view, param, lastPath);
     // 向上触发跨页面事件，存在安全问题
-    this.emit('pageShow', this, view, param);
+    this.emit('pageShow', this, view, param, lastPath);
   }
 
   // 回退显示已加载的页面
   // view：页面Dom层，param：参数
-  back(view, param) {
+  back(view, param, lastPath) {
     // 隐藏所有模板
     view.qus('[name$=-tp]').hide();
     // 防止空链接，刷新页面
     view.qus('a[href=""]').attr('href', 'javascript:;');
 
-    this.emit('local::back', view, param);
+    this.emit('local::back', view, param, lastPath);
     // 向上触发跨页面事件，存在安全问题
-    this.emit('pageBack', this, view, param);
+    this.emit('pageBack', this, view, param, lastPath);
   }
 
   change(view, param, lastParam) {
@@ -2210,6 +2397,77 @@ class Page extends Event {
   }
 }
 
+/**
+ * 页面工厂函数
+ * 自动处理类的继承、日志注入、生命周期事件绑定
+ * @param {Object} def - 页面默认配置
+ * @param {Object} hooks - 业务钩子函数集合 { init, bind, show... }
+ */
+function page(def, hooks = {}) {
+  // 自动根据配置创建当前页面的专属日志实例
+  const _log = log({m: `${def.name}`});
+
+  return class extends Page {
+    constructor(opts = {}) {
+      const opt = {...def, ...opts};
+      super(opt.app, opt.name, opt.title);
+      this.opt = opt;
+
+      // ✨ 魔法 1：利用 page.js 内置的 Event 机制，全自动挂载无侵入日志！
+      this.on('local::load', param => _log({param}, 'load'));
+      this.on('local::ready', (v, param, lastPath) => _log({v, param, lastPath, id: this.id}, 'ready'));
+      this.on('local::show', (v, param, lastPath) => _log({v, param, lastPath, id: this.id}, 'show'));
+      this.on('local::change', (v, param, lastParam) => _log({v, param, lastParam}, 'change'));
+      this.on('local::back', (v, param, lastPath) => _log({v, param, lastPath, id: this.id}, 'back'));
+      this.on('local::hide', v => _log({v, id: this.id}, 'hide'));
+      this.on('local::unload', v => _log({v, id: this.id}, 'unload'));
+    }
+
+    // 映射其他生命周期到业务 hooks
+    load(param) {
+      super.load(param);
+      if (hooks.load) hooks.load({param, pg: this, log: _log});
+    }
+
+    // ✨ 魔法 2：统一调度业务代码的 init 和 bind，提供优雅的上下文
+    async ready(v, param, lastPath) {
+      super.ready(v, param, lastPath);
+
+      // 组装上下文对象供业务使用
+      const ctx = {v, pg: this, param, lastPath, log: _log};
+
+      // 自动按顺序执行业务层的初始化和事件绑定
+      if (hooks.init) await hooks.init(ctx);
+      if (hooks.bind) hooks.bind(ctx);
+    }
+
+    show(v, param, lastPath) {
+      super.show(v, param, lastPath);
+      if (hooks.show) hooks.show({v, pg: this, param, lastPath, log: _log});
+    }
+
+    change(v, param, lastParam) {
+      super.change(v, param, lastParam);
+      if (hooks.change) hooks.change({v, pg: this, param, lastParam, log: _log});
+    }
+
+    back(v, param, lastPath) {
+      super.back(v, param, lastPath);
+      if (hooks.back) hooks.back({v, pg: this, param, lastPath, log: _log});
+    }
+
+    hide(v, param) {
+      super.hide(v, param);
+      if (hooks.hide) hooks.hide({v, pg: this, param, log: _log});
+    }
+
+    unload(v) {
+      super.unload(v);
+      if (hooks.unload) hooks.unload({v, pg: this, log: _log});
+    }
+  }
+}
+
 /**
  * Wia app、router等继承类，通过模块化扩展类功能
  * 使用 use 装载，注解可能完成类似功能
@@ -4402,4 +4660,4 @@ class Modal extends Event {
 const Support = $.support;
 const Device = $.device;
 
-export { Ajax, App, Constructors, Device, Event, Lazy, Modal, Modals, Module, Page, Resize, SW$1 as SW, Support, Utils, jsx, loadModule };
+export { Ajax, App, Constructors, Device, Event, Lazy, Modal, Modals, Module, Page, Resize, SW$1 as SW, Support, Utils, jsx, loadModule, page };

package/dist/jsx-runtime.js

@@ -1,6 +1,6 @@
 /*!
-  * wia core v1.2.1
-  * (c) 2015-2025 Sibyl Yu and contributors
+  * wia core v2.1.0
+  * (c) 2015-2026 Sibyl Yu and contributors
   * Released under the MIT License.
   */
 'use strict';
@@ -10,128 +10,150 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = {};
 
 // runtime: 'automatic', // automatic or classic automatic 使用 JSX 运行时（在React 17 中引入）
-// HTML 属性值转义函数
-function escapeAttrValue(value) {
-  return String(value)
-    .replace(/&/g, "&")
-    .replace(/"/g, """)
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;");
+
+// 1. 完善的 HTML 转义，防止 XSS 攻击
+function escapeHtml(str) {
+  if (typeof str !== 'string') str = String(str);
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;') // 补充单引号转义
 }
 
-function jsx(tag, {children, ...props} = {}) {
-  let R = '';
+// 2. React 规范中无需添加 px 的免单位 CSS 属性集合（使用 Set，O(1) 查询效率最高）
+const unitlessNumbers = new Set([
+  'animationIterationCount', 'borderImageOutset', 'borderImageSlice', 'borderImageWidth',
+  'boxFlex', 'boxFlexGroup', 'boxOrdinalGroup', 'columnCount', 'columns', 'flex',
+  'flexGrow', 'flexPositive', 'flexShrink', 'flexNegative', 'flexOrder', 'gridRow',
+  'gridRowEnd', 'gridRowSpan', 'gridRowStart', 'gridColumn', 'gridColumnEnd',
+  'gridColumnSpan', 'gridColumnStart', 'fontWeight', 'lineClamp', 'lineHeight',
+  'opacity', 'order', 'orphans', 'tabSize', 'widows', 'zIndex', 'zoom',
+  'fillOpacity', 'floodOpacity', 'stopOpacity', 'strokeDasharray', 'strokeDashoffset',
+  'strokeMiterlimit', 'strokeOpacity', 'strokeWidth'
+]);
 
-  if (typeof tag === 'function') R = tag({children, ...props});
-  else if (typeof tag === 'string') {
-    const attrs = props || {};
-    const attrsArray = [];
+// 3. 自闭合标签（使用 Set 提升性能）
+const voidElements = new Set([
+  'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta',
+  'param', 'source', 'track', 'wbr', 'path', 'circle', 'polygon', 'line',
+  'rect', 'ellipse', 'use', 'stop'
+]);
 
-    // 特殊处理 className 和 htmlFor
-    if (attrs.className) {
-      attrsArray.push(`class="${escapeAttrValue(attrs.className)}"`);
-      delete attrs.className;
+// 4. 深度递归渲染子节点 (支持多维嵌套、剔除空值、文本安全转义)
+function renderChildren(children) {
+  if (children == null || typeof children === 'boolean') return ''
+  
+  if (Array.isArray(children)) {
+    let out = '';
+    for (let i = 0; i < children.length; i++) {
+      out += renderChildren(children[i]); // 递归拍平
     }
+    return out
+  }
+  
+  // 如果子节点本身已经是被 jsx() 处理过的字符串（或者是数字等），对其进行处理
+  // 注意：在我们这个极简架构中，jsx() 返回的就是拼接好的字符串，所以直接当作安全 HTML 对待
+  // 如果传入的是普通的字符串，为了安全起见，理论上应该转义。
+  // 为了区分“原生组件返回的 HTML 字符串”和“用户直接写入的文本”，通常会通过一个特殊对象包裹。
+  // 在当前纯字符串拼接的架构下，我们默认纯数字/纯字符串进入这里是被信任或已转义的，或者是组件生成的。
+  // 如果需要极其严格的 XSS 保护，建议对确认为“文本节点”的项调用 escapeHtml(children)。
+  return typeof children === 'string' ? children : escapeHtml(children)
+}
+
+function jsx(type, props = {}) {
+  // 处理函数组件： <MyComponent foo="bar" />
+  if (typeof type === 'function') {
+    return type(props)
+  }
+
+  // 处理原生 HTML 标签
+  let html = `<${type}`;
+  let innerHTML = '';
+  const children = props.children;
+
+  for (const key in props) {
+    if (!Object.prototype.hasOwnProperty.call(props, key)) continue
+    if (key === 'children') continue
     
-    if (attrs.htmlFor) {
-      attrsArray.push(`for="${escapeAttrValue(attrs.htmlFor)}"`);
-      delete attrs.htmlFor;
+    const val = props[key];
+
+    // 过滤 React 保留属性和空值
+    if (key === 'key' || key === 'ref') continue
+    
+    // 过滤掉绑定的事件函数（如 onClick, onChange），静态 HTML 不渲染这些
+    if (typeof val === 'function' && key.startsWith('on')) continue
+
+    // 支持 React 的 dangerouslySetInnerHTML
+    if (key === 'dangerouslySetInnerHTML') {
+      if (val && val.__html) innerHTML = val.__html;
+      continue
     }
 
-    // 处理 style 对象
-    if (attrs.style && typeof attrs.style === 'object') {
-      const styleArray = [];
-      for (const [key, value] of Object.entries(attrs.style)) {
-        if (value == null) continue;
-        
-        // 转换驼峰式属性为CSS属性（backgroundColor -> background-color）
-        const cssProp = key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
-        
-        // 处理数值属性（添加px单位）
-        let cssValue = value;
-        if (typeof value === 'number' && 
-            // 这些属性不需要单位
-            !['zIndex', 'opacity', 'fontWeight', 'flex', 'order', 'zoom'].includes(key)) {
-          cssValue = `${value}px`;
+    let attrName = key;
+    let attrValue = val;
+
+    // React 特有属性向原生 HTML 映射
+    if (attrName === 'className') attrName = 'class';
+    else if (attrName === 'htmlFor') attrName = 'for';
+    else if (attrName === 'defaultValue') attrName = 'value';    // 表单非受控默认值
+    else if (attrName === 'defaultChecked') attrName = 'checked';// 表单非受控默认选中
+
+    // 处理内联 Style 对象
+    if (attrName === 'style' && typeof attrValue === 'object') {
+      let styleStr = '';
+      for (const styleKey in attrValue) {
+        let styleVal = attrValue[styleKey];
+        if (styleVal == null || typeof styleVal === 'boolean' || styleVal === '') continue
+
+        let propName = styleKey;
+        // 处理 CSS 变量（如 --theme-color），不转驼峰，不加 px
+        if (styleKey.startsWith('--')) {
+          styleStr += `${propName}:${styleVal};`;
+        } else {
+          // 驼峰转中划线 (backgroundColor -> background-color)
+          propName = styleKey.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+          // 自动补全 px
+          if (typeof styleVal === 'number' && styleVal !== 0 && !unitlessNumbers.has(styleKey)) {
+            styleVal = `${styleVal}px`;
+          }
+          styleStr += `${propName}:${styleVal};`;
         }
-        
-        styleArray.push(`${cssProp}:${cssValue}`);
-      }
-      attrsArray.push(`style="${escapeAttrValue(styleArray.join(';'))}"`);
-      delete attrs.style;
-    }
-    
-    // 处理其他属性
-    for (const [key, value] of Object.entries(attrs)) {
-      // 跳过特殊处理的属性
-      if (key === 'children' || key === 'className' || key === 'htmlFor') continue;
-      
-      // 处理布尔属性（如 disabled, checked 等）
-      if (typeof value === 'boolean') {
-        if (value) attrsArray.push(key);        
-      } 
-      // 处理动态值属性
-      else if (value != null) {
-        attrsArray.push(`${key}="${escapeAttrValue(value)}"`);
       }
+      if (styleStr) html += ` style="${escapeHtml(styleStr)}"`;
+      continue
     }
 
-    const attrsString = attrsArray.join(' ');
+    // 处理布尔值属性 (如 disabled, checked)
+    if (typeof attrValue === 'boolean') {
+      if (attrValue) html += ` ${attrName}`;
+    } else if (attrValue != null) {
+      // 普通属性，安全转义输出
+      html += ` ${attrName}="${escapeHtml(attrValue)}"`;
+    }
+  }
 
-/*    const attrsString = Object.keys(attrs)
-      .map(attr => {
-        if (attr[0] === '_') {
-          if (attrs[attr]) return attr.replace('_', '');
-          return '';
-        }
-        return `${attr}="${attrs[attr]}"`;
-      })
-      .filter(attr => !!attr)
-      .join(' ');
-*/
-    // 自闭合标签处理
-    const voidElements = ['input', 'img', 'br', 'hr', 'meta', 'link', 'area', 'base', 'col', 'embed', 'param', 'source', 'track', 'wbr', 'path', 'circle', 'polygon', 'line', 'rect', 'ellipse', 'use', 'stop'];
-    if (voidElements.includes(tag))
-      R = `<${tag}${attrsString ? ' ' + attrsString : ''} />`;
-    else {
-      const childrenContent = Array.isArray(children)
-        ? children
-            .filter(c => c != null) // 只过滤 null/undefined
-            .map(c => {
-              if (Array.isArray(c)) return c.join('');
-              
-              // 特殊处理布尔值（不渲染）
-              if (typeof c === 'boolean') return '';
-              
-              return c;
-            })
-            .join('')
-        : children != null
-          ? (typeof children === 'boolean' ? '' : children)
-          : '';
-
-      R = `<${tag}${attrsString ? ' ' + attrsString : ''}>${childrenContent}</${tag}>`;
+  // 闭合标签处理
+  if (voidElements.has(type)) {
+    html += ` />`;
+  } else {
+    html += `>`;
+    // 渲染内容：如果存在 dangerouslySetInnerHTML，则优先渲染，否则渲染 children
+    if (innerHTML) {
+      html += innerHTML;
+    } else {
+      html += renderChildren(children);
     }
+    html += `</${type}>`;
   }
 
-  return R;
+  return html
 }
 
+// Fragment `<> ... </>` 只负责渲染并拍平内部子节点，不产生外层标签
 function Fragment({children} = {}) {
-  const R = Array.isArray(children)
-    ? children
-        .filter(c => c != null) // 只过滤 null/undefined
-        .map(c => {
-          if (Array.isArray(c)) return c.join('');
-          if (typeof c === 'boolean') return '';
-          return c;
-        })
-        .join('')
-    : children != null
-      ? (typeof children === 'boolean' ? '' : children)
-      : '';
-
-  return R;
+  return renderChildren(children)
 }
 
 var Fragment_1 = jsxRuntime.Fragment = Fragment;