@joker.front/core 1.2.136 → 1.2.138

package/README.md

@@ -1,91 +1,66 @@
-# Joker(front)
+# Joker
 
-## 前端 核心平台
+Joker 是一个框架平台，旨在为所有开发场景提供支持。其中，Joker.front 是 Joker 平台下的前端开发框架，它提供标准化的前端开发标准，使用面向对象、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Joker.front 都可以轻松应对。
 
-Joker.front 是 Jokers.pub 旗下前端项目，负责前端渲染
+## 什么是 Joker？
 
-Joker.front 旨在提供一套渐进式前端框架，提供多端运行能力，目前已完成 Joker.H5 前端项目框架，后续将提供 Joker.native/Joker.wx 等
+Joker 是一个框架平台，旨在为所有开发场景提供支持。其中，Joker.front 是 Joker 平台下的前端开发框架，它提供标准化的前端开发标准，使用面向对象、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Joker.front 都可以轻松应对。
 
-## 特色
+Joker 是一个基于 TypeScript 构建的全能开发平台。无论是应对简单的界面开发需求，还是处理复杂的用户界面，都能展现出卓越的性能和稳定性。它涵盖了以下重要特性：
 
-1. 双向数据监听
+-   **强大的可扩展性**：Joker 提供基于组件的框架，平台设计之初就考虑到了扩展性，因此可以轻松地集成到现有的项目或系统中，支持可伸缩的 Web 应用构建，可以根据项目需求进行定制化开发。
+-   **丰富的组件库**：Joker.front 提供了一套丰富的前端组件库，包括路由、脚手架等经过精心设计和优化的功能和 UI 组件可以帮助开发者快速构建出美观且高性能的用户界面。
+-   **完善的开发工具**：为了进一步提升开发效率，Joker 还提供了一系列配套的开发工具，包括调试工具、构建工具等，这经过深思熟虑后设计出来工具旨在让开发过程变得更加顺畅，助力开发者可以准确快速的开发、构建、测试和更新代码。
+-   **Class API**：Joker 基于 Typescript 作为脚本开发标准，采用标准的 Class API 作为开发规范，更符合面向对象开发要求。
 
-2. 单向数据流
+-   **响应性**：Joker 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM，其中响应更新是即时的，不存在虚拟 DOM 的差异对比。
 
-3. vnode 虚拟 dom 节点，可扩展多端输出
+## 如何使用
 
-4. 更快的运行速度，数据变更实时响应，无延迟、无 dom 树对比，使用更方便
+你可以使用 Joker CLI 来创建项目，生成应用和库代码，以及执行各种持续开发任务，比如测试、打包和部署。
 
-5. 新的语法，不限制根节点数目
+要安装 Joker CLI，请打开终端/控制台窗口，并运行如下命令：
 
-6. Class API 开发模式
+```
+pnpm i -g @joker.front/cli
+```
+
+1. 运行 CLI 命令 **joker create** 并提供 my-app 名称作为参数，如下所示：
+
+```
+joker create my-app
+```
+
+2. 在 my-app 工作目录下，安装依赖
+
+```
+cd my-app
 
-7. 提供组件化、混入等基础功能
+pnpm i
+```
+
+CLI 会创建一个新的工作区和一个简单的欢迎应用，你可以随时运行它。
 
-8. 提供数据劫持/监听；Node 监听；状态管理器等功能
+## 运行应用
 
-## 特别说明
+Joker CLI 中包含一个服务器命令 以及 构建命令，服务器命令可以方便你在本地构建和提供应用。
 
-**本框架为底层核心库，需要配合 joker-cli 和 Joker Front Tool 一起使用**
+我们默认提供了`dev`和`build`两个命令，分别代表开发环境和代码构建。
 
-## 实例
+1. 导航到 workspace 文件夹，比如 my-app。
 
 ```
-<div @click="点击事件"  attr1="@(sss+1)" @tap.stop.prevent.once.self="tab事件(其他参数)">
-    @变量
-    @方法(参数)
-    @if (true)
-    {
-        <p>我是一句话</p>
-        <p>
-            @变量
-            @方法(1)
-            @(1+1)
-
-        </p>
-    }
-    else if{
-        <p>我是else if</p>
-    }
-    else
-    {
-        <p>我是else</p>
-    }
-
-
-    @for (let i = 0; i < 数组.length; i++)
-    {
-        <p>@数组[i]</p>
-
-    }
-
-    @for(let index in 数组)
-    {
-        <p>suoyin :@index value: @数组[index]</p>
-    }
-
-
-    @for (let item of 对象)
-    {
-        <p>@item.a</p>
-    }
-
-    @for (let(index, item) in 数组)
-    {
-        <p>索引：@index 项：@item</p>
-    }
-
-</div>
-<ChildrenComponent @click="组件回执方法" prop1="@变量">
-    @section("id",内容参数1,内容参数2){
-        <p>内容参数1</p>
-        <p>@父组件变量</p>
-    }
-</ChildrenComponent>
-
-<!--内容部分-->
-
-@RenderSection()
-
-@RenderSection("id",@对外传参)
+cd my-app
+```
+
+2. 运行下列命令：
+
 ```
+npm run dev
+```
+
+成功运行后，会开到一个简单的示例页面。
+
+## 文档
+
+[官网](http://www.jokers.pub)

package/dist/bundle.es.js

@@ -795,7 +795,7 @@ class Watcher {
             this.value = newVal;
             //这里过滤一些引用不想等，但值相等的值，只是不做响应，但不影响下次的值变更
             //这里没有过滤掉this.value = newVal;
-            if (newVal !== oldVal && isEqual(newVal, oldVal, true)) {
+            if (newVal !== oldVal && !this.forceCallBack && isEqual(newVal, oldVal, true)) {
                 return;
             }
             this.updateCallBack(newVal, oldVal);
@@ -1562,6 +1562,7 @@ var Render;
                 }
             }
             else if (attrName === "style" && isObject(attrVal)) {
+                el.removeAttribute("style");
                 for (let name in attrVal) {
                     let isEmptyValue = false;
                     if (attrVal[name] === undefined || attrVal[name] === false) {
@@ -1571,14 +1572,8 @@ var Render;
                     if (isEmptyStr(val)) {
                         isEmptyValue = true;
                     }
-                    //空移除属性
-                    if (isEmptyValue) {
-                        el.style.removeProperty(name);
-                        //@ts-ignore
-                        el.style[name] = "";
-                        continue;
-                    }
-                    else {
+                    //非空
+                    if (!isEmptyValue) {
                         //@ts-ignore
                         el.style[name] = val;
                     }
@@ -3171,12 +3166,13 @@ class Component {
      * 观察值变更
      * @param express
      * @param callBack
+     * @param forceCallBack 即使值相同也要强制触发callback
      * @returns 销毁watcher
      */
-    $watch(express, callBack) {
+    $watch(express, callBack, forceCallBack) {
         let watcher = new Watcher(express, (newVal, oldVal) => {
             callBack(newVal, oldVal);
-        });
+        }, undefined, forceCallBack);
         this[PRIVATE_WATCHERS].push(watcher);
         return () => {
             watcher.destroy();

package/dist/bundle.js

@@ -796,7 +796,7 @@ class Watcher {
             this.value = newVal;
             //这里过滤一些引用不想等，但值相等的值，只是不做响应，但不影响下次的值变更
             //这里没有过滤掉this.value = newVal;
-            if (newVal !== oldVal && isEqual(newVal, oldVal, true)) {
+            if (newVal !== oldVal && !this.forceCallBack && isEqual(newVal, oldVal, true)) {
                 return;
             }
             this.updateCallBack(newVal, oldVal);
@@ -1563,6 +1563,7 @@ var Render;
                 }
             }
             else if (attrName === "style" && isObject(attrVal)) {
+                el.removeAttribute("style");
                 for (let name in attrVal) {
                     let isEmptyValue = false;
                     if (attrVal[name] === undefined || attrVal[name] === false) {
@@ -1572,14 +1573,8 @@ var Render;
                     if (isEmptyStr(val)) {
                         isEmptyValue = true;
                     }
-                    //空移除属性
-                    if (isEmptyValue) {
-                        el.style.removeProperty(name);
-                        //@ts-ignore
-                        el.style[name] = "";
-                        continue;
-                    }
-                    else {
+                    //非空
+                    if (!isEmptyValue) {
                         //@ts-ignore
                         el.style[name] = val;
                     }
@@ -3172,12 +3167,13 @@ class Component {
      * 观察值变更
      * @param express
      * @param callBack
+     * @param forceCallBack 即使值相同也要强制触发callback
      * @returns 销毁watcher
      */
-    $watch(express, callBack) {
+    $watch(express, callBack, forceCallBack) {
         let watcher = new Watcher(express, (newVal, oldVal) => {
             callBack(newVal, oldVal);
-        });
+        }, undefined, forceCallBack);
         this[PRIVATE_WATCHERS].push(watcher);
         return () => {
             watcher.destroy();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@joker.front/core",
-    "version": "1.2.136",
+    "version": "1.2.138",
     "description": "",
     "main": "./dist/bundle.js",
     "module": "./dist/bundle.es.js",
@@ -23,15 +23,19 @@
         "test:temp": "jest test/parser/cmd.spec.ts",
         "build": "joker_build_library --sourcemap=false",
         "release": "npm run test && npm run build && joker_release_library",
-        "release:prod":"npm run test && npm run build && npm publish --access public --registry https://registry.npmjs.org/"
+        "release:prod": "npm run test && npm run build && npm publish --access public --registry https://registry.npmjs.org/"
     },
     "author": "Zohar",
     "license": "MIT",
     "repository": {
         "type": "git"
     },
+    "keywords": [
+        "joker"
+    ],
+    "homepage": "jokers.pub",
     "dependencies": {
-        "@joker.front/ast": "^1.3.19"
+        "@joker.front/ast": "^1.3.20"
     },
     "devDependencies": {
         "@joker.front/library-cli": "^1.2.8",

package/types/component.d.ts

@@ -124,9 +124,10 @@ export declare class Component<T extends DefaultKeyVal = {}> implements ICompone
      * 观察值变更
      * @param express
      * @param callBack
+     * @param forceCallBack 即使值相同也要强制触发callback
      * @returns 销毁watcher
      */
-    $watch(express: () => any, callBack: (nv?: any, ov?: any) => void): () => void;
+    $watch(express: () => any, callBack: (nv?: any, ov?: any) => void, forceCallBack?: boolean): () => void;
     /**
      * 事件注册
      * @param eventName

package/types/components/component.d.ts

@@ -1,13 +0,0 @@
-import { Component } from "../component";
-export declare class ComponentContainer extends Component {
-    template: never[];
-    propsType: {
-        name: StringConstructor;
-        data: ObjectConstructor;
-    };
-    private cache;
-    mounted(): void;
-    loadComponent(componentName: string): Promise<void>;
-    beforeDestory(): void;
-    removeCache(componentName?: string): void;
-}

package/types/components/container.d.ts

@@ -1,15 +0,0 @@
-import { Component } from "../index";
-/**
- * 动态组件容器
- */
-export declare class ComponentContainer extends Component<{
-    name: string;
-    data: object;
-}> {
-    template: never[];
-    private cache;
-    mounted(): void;
-    loadComponent(componentName?: string): Promise<void>;
-    beforeDestory(): void;
-    removeCache(componentName?: string): void;
-}

package/types/components/template.d.ts

@@ -1,7 +0,0 @@
-import { Component } from "../component";
-/**
- * 虚拟模板容器，用于进行归组，作为组件配置属性
- */
-export declare class Template extends Component {
-    template: () => import("@joker.front/ast").AST.Command[];
-}

package/types/docs/build/docs.d.ts

@@ -1 +0,0 @@
-export {};

package/types/docs/build/markdown-it-demo.d.ts

@@ -1,3 +0,0 @@
-import MarkdownIt from "markdown-it";
-export declare let demoPlugin: MarkdownIt.PluginSimple;
-export declare let divPlugin: MarkdownIt.PluginSimple;

package/types/docs/build/utils.d.ts

@@ -1,3 +0,0 @@
-export declare const isWindows: boolean;
-export declare function normalizePath(strPath: string): string;
-export declare function slash(p: string): string;

package/types/docs/common/loading.d.ts

@@ -1,2 +0,0 @@
-export declare function showLoading(): void;
-export declare function hideLoading(): void;

package/types/docs/main.d.ts

@@ -1 +0,0 @@
-import "@joker.front/ui/index.css";

package/types/eventBus.d.ts

@@ -1,15 +0,0 @@
-export type EventCallBackItem = {
-    callBack: EventCallBackType;
-    once?: Boolean;
-};
-export type EventCallBackType = (e: {
-    stopPropagation: Function;
-    callTimes: Number;
-}, params?: any) => boolean | void;
-export declare class EventBus<T extends string> {
-    private eventDatas;
-    on(eventName: T, callBack: EventCallBackType): void;
-    once(eventName: T, callBack: EventCallBackType): void;
-    off(eventName: T, callBack?: EventCallBackType): void;
-    trigger(eventName: T, param?: any): false | undefined;
-}

package/types/filter.d.ts

@@ -1,13 +0,0 @@
-export type GlobalFilter = (...args: any[]) => string | void | undefined;
-export declare const globalFilters: Record<string, GlobalFilter>;
-/**
- * 注册全局组件
- * @param components 组件
- */
-export declare function registerGlobalFilter(filters: Record<string, GlobalFilter>): void;
-/**
- * 根据注册key获取组件
- * @param name 组件名称
- * @returns 组件
- */
-export declare function getGlobalFilter(key: string): GlobalFilter | undefined;

package/types/src/component.d.ts

@@ -1,216 +0,0 @@
-import { AST, IComponent, RENDER_HANDLER } from "@joker.front/ast";
-import { NodeChangeType, ParserTemplate } from "./parser";
-import { VNode } from "./parser/vnode";
-import { PropType } from "./props";
-declare const PROPS_DATA_KEY: unique symbol;
-declare const PROPS_DATA_PROXY: unique symbol;
-declare const PRIVATE_WATCHERS: unique symbol;
-declare const EVENT_DATA_KEY: unique symbol;
-declare const PARSER_TEMPLATE_TARGET: unique symbol;
-export type TemplateType = Array<AST.Node> | ((h: typeof RENDER_HANDLER) => Array<AST.Node>);
-export declare const SCOPE_ID: unique symbol;
-export declare const JOKER_COMPONENT_TAG: unique symbol;
-export type ComponentConstructor = typeof Component<any>;
-export type ImportComponentConstructor = () => Promise<{
-    default: ComponentConstructor;
-}>;
-export type SectionType = {
-    asts: AST.Node[];
-    ob?: Component & Record<string, any>;
-    parser?: ParserTemplate;
-    params?: string[];
-};
-type DefaultKeyVal = Record<string | symbol, any>;
-/**
- * Joker组件
- */
-export declare class Component<T extends DefaultKeyVal = {}> implements IComponent {
-    $sections: Record<string, SectionType>;
-    readonly isKeepAlive?: boolean | undefined;
-    static [JOKER_COMPONENT_TAG]: boolean;
-    /**
-     * scopeId 配合css：Scoped
-     */
-    [SCOPE_ID]?: string;
-    /**
-     * 可观察数据（具备劫持观察能力）
-     */
-    model: DefaultKeyVal;
-    /**
-     * 渲染模板
-     */
-    template?: TemplateType;
-    /**
-     * 挂载根
-     */
-    $root: any;
-    /**
-     * 是否已睡眠
-     */
-    isSleeped: boolean;
-    /**
-     * 可用的声明组件
-     */
-    components: Record<string, ComponentConstructor | ImportComponentConstructor>;
-    /**
-     * props辅助约束
-     * @example { name:"默认值",age:Number }
-     * 可以配置默认值，也可以配置为约束，类型参考PropType
-     */
-    propsOption?: Partial<Record<keyof T, PropType | any>>;
-    private [PROPS_DATA_KEY];
-    private [PARSER_TEMPLATE_TARGET]?;
-    private [PROPS_DATA_PROXY]?;
-    private [PRIVATE_WATCHERS];
-    private [EVENT_DATA_KEY];
-    /**
-     * @param propData prop参数
-     * @param sections 渲染部分区域
-     * @param isKeepAlive 是否要保持存活，启用时再destroy时只会销毁UI部分，不会销毁数据，直到使用destroy(true)才会销毁
-     */
-    constructor(propData?: T, $sections?: Record<string, SectionType>, isKeepAlive?: boolean | undefined);
-    /**
-     * 主动声明接受的参数
-     * @returns
-     */
-    get props(): Readonly<Partial<T>>;
-    /**
-     * 挂载
-     * @param root
-     */
-    $mount(root: any | VNode.Component<IComponent>): this;
-    /**
-     * 节点动画，仅支持 element及组件节点
-     */
-    $nodeTransition(nodeOrRef: string | VNode.Node, mode: "enter" | "leave", name?: string, callBack?: Function, type?: "transition" | "animation"): void;
-    /**
-     * 销毁
-     */
-    $destroy(force?: boolean): void;
-    /**
-     * VNode ref索引集
-     */
-    get $refs(): Readonly<Record<string, Array<VNode.Node>>>;
-    /**
-     * 根据ref获取单个VNode
-     */
-    $getRef<T extends VNode.Node>(ref: string): T | undefined;
-    /**
-     * 获取相同ref的VNode集合
-     */
-    $getRefs<T extends VNode.Node>(ref: string): Array<T> | undefined;
-    /**
-     * 单向同步prop值，并监听变更后重新同步
-     * @param propKey 需要观察同步的props key
-     * @param modelKey 要赋值的model key，不传案prop key 进行赋值
-     * @param convertVal 值转换方法
-     */
-    $syncProp(propKey: keyof T): void;
-    $syncProp(propKey: keyof T, modelKey: string): void;
-    $syncProp(propKey: keyof T, convertVal: (val: any) => any): void;
-    $syncProp(propKey: keyof T, modelKey: string, convertVal: (val: any) => any): void;
-    /**
-     * 根节点（虚拟DOM）
-     */
-    get $rootVNode(): Readonly<VNode.Root> | undefined;
-    /**
-     * 添加节点变更监听
-     * @param ref  ref标记
-     * @param callBack
-     * @returns 销毁方法
-     */
-    $watchNode(ref: string, callBack: (node: VNode.Node, type: NodeChangeType, property?: string) => void): (() => void) | undefined;
-    /**
-     * 观察值变更
-     * @param express
-     * @param callBack
-     * @returns 销毁watcher
-     */
-    $watch(express: () => any, callBack: (nv?: any, ov?: any) => void): () => void;
-    /**
-     * 事件注册
-     * @param eventName
-     * @param callBack
-     */
-    $on(eventName: string, callBack: VNode.EventCallBack): void;
-    /**
-     * 事件卸载
-     * @param eventName
-     * @param callBack
-     */
-    $off(eventName: string, callBack?: VNode.EventCallBack): void;
-    /**
-     * 触发事件
-     * @param eventName 事件名称
-     * @param param 参数
-     * @param targetEvent event
-     */
-    $trigger(eventName: string, param?: any, targetEvent?: VNode.Event): void;
-    /**
-     * 主动渲染（仅渲染，一般适用于模板区域的热更新使用/或动态装载等复杂场景）
-     * @param newTemplate 可指定新的模板，否则按照原模板
-     * @param keepalive 渲染新模板时，是否要保留之前的存活组件（高级用法）
-     * @returns
-     */
-    $render(newTemplate?: TemplateType, keepalive?: boolean): void;
-    /**
-     * 生命周期函数（完成初始化）
-     */
-    protected created(): void;
-    /**
-     * 生命周期函数（完成挂载）
-     */
-    protected mounted(): void;
-    /**
-     * 生命周期函数（销毁前）
-     */
-    protected beforeDestroy(): void;
-    /**
-     * 睡眠时，在启用keepalive属性时才会触发该周期
-     */
-    protected sleeped(): void;
-    /**
-     * 唤醒时，在启用keepalive属性时才会触发该周期
-     */
-    protected wakeup(): void;
-    /**
-     * 生命周期函数（销毁后）
-     */
-    protected destroyed(): void;
-}
-/**
- * 注册全局组件
- * @param componentsOrName 组件名/列表
- * @param component 组件
- */
-export declare function registerGlobalComponent(componentsOrName: Record<string, ComponentConstructor> | string, component?: ComponentConstructor): void;
-/**
- * 根据注册key获取组件
- * @param name 组件名称
- * @returns 组件
- */
-export declare function getGlobalComponent(key: string): ComponentConstructor | undefined;
-/**
- * 动态组件容器
- */
-export declare class ComponentContainer extends Component<{
-    [key: string]: any;
-    name: string;
-    "transition-name": string;
-}> {
-    template: never[];
-    private cache;
-    mounted(): void;
-    private propsVaule;
-    created(): void;
-    loadComponent(componentName?: string): Promise<void>;
-    beforeDestroy(): void;
-    removeCache(componentName?: string): void;
-}
-/**
- * 虚拟模板容器，用于进行归组，作为组件配置属性
- */
-export declare class Template extends Component {
-    template: () => AST.Command[];
-}
-export {};

package/types/src/event-bus.d.ts

@@ -1,15 +0,0 @@
-export type EventCallBackItem = {
-    callBack: EventCallBackType;
-    once?: Boolean;
-};
-export type EventCallBackType = (e: {
-    stopPropagation: Function;
-    callTimes: Number;
-}, params?: any) => boolean | void;
-export declare class EventBus<T extends string> {
-    private eventDatas;
-    on(eventName: T, callBack: EventCallBackType): void;
-    once(eventName: T, callBack: EventCallBackType): void;
-    off(eventName: T, callBack?: EventCallBackType): void;
-    trigger(eventName: T, param?: any): false | undefined;
-}

package/types/src/filter.d.ts

@@ -1,13 +0,0 @@
-export type GlobalFilter = (...args: any[]) => string | void | undefined;
-export declare const globalFilters: Record<string, GlobalFilter>;
-/**
- * 注册全局组件
- * @param components 组件
- */
-export declare function registerGlobalFilter(filters: Record<string, GlobalFilter>): void;
-/**
- * 根据注册key获取组件
- * @param name 组件名称
- * @returns 组件
- */
-export declare function getGlobalFilter(key: string): GlobalFilter | undefined;

package/types/src/hmr.d.ts

@@ -1,15 +0,0 @@
-import { Component, ComponentConstructor, TemplateType } from "./component";
-/**
- * 热更新助手（热更新使用）(构建时会按需剔除)
- */
-export declare let __JOKER_HMR_RUNTIME: {
-    recordRender: (id: string, template: {
-        render: TemplateType;
-    }) => void;
-    recordComponent: (id: string, component: {
-        component: ComponentConstructor;
-    }) => void;
-    record: (id: string, component: Component) => void;
-    reload: (id: string, component: ComponentConstructor) => void;
-    rerender: (id: string, template: TemplateType) => void;
-};

package/types/src/index.d.ts

@@ -1,10 +0,0 @@
-export { AST, RENDER_HANDLER, createCodeFunction, createCommand, createComment, createElement, createFuntionBody, createText, createComponent } from "@joker.front/ast";
-export * from "./component";
-export * from "./parser/vnode";
-export { ParserTemplate, NodeChangeType } from "./parser/index";
-export * from "./observer/watcher";
-export * from "./observer/index";
-export * from "./utils/DI";
-export * from "./hmr";
-export * from "./event-bus";
-export { registerGlobalFilter } from "./filter";