@wiajs/core 1.2.1 → 1.2.3

package/dist/core.mjs

@@ -1,6 +1,6 @@
 /*!
-  * wia core v1.2.1
-  * (c) 2015-2025 Sibyl Yu and contributors
+  * wia core v1.2.3
+  * (c) 2015-2026 Sibyl Yu and contributors
   * Released under the MIT License.
   */
 /**
@@ -2073,6 +2073,228 @@ class Event {
   }
 }
 
+/*!
+  * wia util v3.4.25
+  * (c) 2018-2024 Yan (Sibyl) Yu and Yuxi (Evan) You and wia/vue contributors
+  * Released under the MIT License.
+  */
+/**
+ * Created by way on 10/6/16.
+ * Part of the code comes from @vue/shared
+ */
+
+
+/**
+ * 前端日志输出，封装 console日志，简化代码，支持模块或直接输出
+ * 调用时，描述字符串后置，便于可选缺省，输出时，自带前置，类似 后端pino，保持前后端一致性
+ * m 为模块，fn 为函数名称
+ */
+class Log {
+  /** @type {string} 模块 */
+  m = ''
+
+  /** @type {string} 函数 */
+  fn = ''
+
+  /**
+   * @param {string} m 模块
+   */
+  constructor(m) {
+    this.m = m;
+  }
+
+  /**
+   * get log desc
+   * 描述字符串后置调用，前置显示
+   * @param {*[]} args
+   * @returns {string}
+   */
+  getDesc(args) {
+    let R = '';
+    try {
+      const _ = this;
+      const { m } = _;
+      let fn = '',
+        desc = '';
+
+      if (args.length > 1) {
+        const last = args.at(-1);
+        if (typeof last === 'object') {
+          ;({ desc, fn } = last);
+        } else if (typeof last === 'string') desc = last;
+        if (desc || fn) {
+          fn = fn || _.fn;
+          _.fn = fn;
+          args.pop();
+        }
+      }
+      fn = fn || _.fn;
+      if (m) desc = `${desc}[${m}${fn ? ':' + fn : ''}]`; // eslint-disable-line
+      R = desc;
+    } catch (e) {
+      console.error(`getDesc exp:${e.message}`);
+    }
+
+    return R
+  }
+
+  /** @param {...any} args - params */
+  log(...args) {
+    const _ = this;
+    const last = args.at(-1);
+    // clear fn
+    if (args.length === 1 && typeof last === 'object' && last.fn) _.fn = '';
+    else {
+      const desc = _.getDesc(args);
+      console.log(desc, ...args);
+    }
+  }
+
+  /** @param {...any} args - params */
+  debug(...args) {
+    const _ = this;
+    const desc = _.getDesc(args);
+    if (desc) console.log(desc, ...args);
+    else console.log(...args);
+  }
+
+  /** @param {...any} args - params */
+  info(...args) {
+    const _ = this;
+    const desc = _.getDesc(args);
+    if (desc) console.info(desc, ...args);
+    else console.log(...args);
+  }
+
+  /** @param {...any} args - params */
+  warn(...args) {
+    const _ = this;
+    const { desc, arg } = _.getDesc(args);
+    if (desc) console.warn(desc, ...arg);
+    else console.log(...args);
+  }
+
+  /** @param {...any} args - params */
+  trace(...args) {
+    const _ = this;
+    const { desc, arg } = _.getDesc(args);
+    if (desc) console.trace(desc, ...arg);
+    else console.trace(...args);
+  }
+
+  /** @param {...any} args - params */
+  error(...args) {
+    const _ = this;
+    const desc = _.getDesc(args);
+    if (desc) console.error(desc, ...args);
+    else console.log(...args);
+  }
+
+  /**
+   * 用于 catch(e) log.err(e)
+   * @param {...any} args - params */
+  err(...args) {
+    const _ = this;
+    const first = args?.[0];
+    if (
+      first instanceof Error ||
+      (first && first.message && first.cause && first.stack)
+    )
+      args[0] = { exp: args[0].message };
+    _.error(...args);
+  }
+}
+
+function getDesc(args) {
+  let desc = '';
+  const last = args.at(-1);
+  if (typeof last === 'string') {
+    desc = last;
+    args.pop();
+  }
+  return desc
+}
+
+/**
+ * 标准日志输出或构建模块日志类实例，用于模块中带[m:xxx]标记日志输出
+ * 启用 {f:fn} 标记时，需在函数尾部清除f（log({f:''})），否则会溢出到其他函数
+ * @param {...any} args - params
+ * returns {*}
+ */
+function log(...args) {
+  const last = args.at(-1);
+
+  // 全局日志
+  if (args.length !== 1 || !last?.m) {
+    const desc = getDesc(args);
+    desc ? console.log(desc, ...args) : console.log(...args);
+    return
+  }
+
+  // 唯一 m 属性，则构造新的 log 实例，这种写法，能被jsDoc识别子属性
+  const lg = new Log(last?.m);
+  /** @param {*} args2 */
+  const R = (...args2) => lg.log(...args2);
+  R.debug = lg.debug.bind(lg);
+  R.info = lg.info.bind(lg);
+  R.warn = lg.warn.bind(lg);
+  R.info = lg.info.bind(lg);
+  R.trace = lg.trace.bind(lg);
+  R.error = lg.error.bind(lg);
+  R.err = lg.err.bind(lg);
+
+  return R
+}
+
+/**
+ * 用于 catch(e) log.err(e)
+ * @param {...any} args - params */
+log.err = (...args) => {
+  const desc = getDesc(args);
+  const first = args?.[0];
+  if (
+    first instanceof Error ||
+    (first && first.message && first.cause && first.stack)
+  )
+    args[0] = { exp: args[0].message };
+  desc ? console.error(desc, ...args) : console.error(...args);
+};
+
+/**
+ * @param {...any} args - params */
+log.error = (...args) => {
+  const desc = getDesc(args);
+  desc ? console.error(desc, ...args) : console.error(...args);
+};
+
+/**
+ * @param {...any} args - params */
+log.warn = (...args) => {
+  const desc = getDesc(args);
+  desc ? console.warn(desc, ...args) : console.warn(...args);
+};
+
+/**
+ * @param {...any} args - params */
+log.info = (...args) => {
+  const desc = getDesc(args);
+  desc ? console.info(desc, ...args) : console.info(...args);
+};
+
+/**
+ * @param {...any} args - params */
+log.debug = (...args) => {
+  const desc = getDesc(args);
+  desc ? console.log(desc, ...args) : console.log(...args);
+};
+
+/**
+ * @param {...any} args - params */
+log.trace = (...args) => {
+  const desc = getDesc(args);
+  desc ? console.trace(desc, ...args) : console.trace(...args);
+};
+
 /**
  * 所有页面从该类继承，并必须实现 load 事件！
  * 事件
@@ -2143,16 +2365,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 +2388,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 +2432,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 +4695,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 v1.2.3
+  * (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;