Merge pull request #2 from wheelsmake/dev-versionC

Dev version c1.1 merge

README.md

@@ -17,7 +17,7 @@ dynamic 中没有组件的概念，它直接关注数据本身。你可以把 dy
 与 dynamic 的**全部交互**（包括 HTML 模板）均可以通过 JavaScript 完成，dynamic 的 HTML 模板语法只有三个：
 
 - 插入单向绑定属性：下划线加横线 `_- -_`。
-  - 可以用 [`new Dynamic().addExport()`](#addExport) 替代。
+  - 可以用 [`Dynamic().addExport()`](#addExport) 替代。
 
 - 插入双向绑定属性：下划线加冒号 `_: :_`。
   - 双向绑定的使用时机非常少，仅在表单元素或 DOM 编辑场景下有用。但是 dynamic 支持对元素 attribute 的值和元素文本内容进行双向绑定。对 attribute 的键名进行双向绑定是**不合理的**——dynamic 要怎么知道哪个 attribute 是之前那个呢？
@@ -156,7 +156,7 @@ Vue.createApp({
 dynamic 实现方式的 JavaScript：
 
 ```javascript
-const dy = new Dynamic("#app");
+const dy = Dynamic("#app");
 const list = ["a","b","c"];
 dy.data.items = function(){
     const result = [];
@@ -214,7 +214,7 @@ dy.addMethods({
 ## 创建 dynamic 实例
 
 ```typescript
-const dy = new Dynamic(/*Element或css 选择符*/);
+const dy = Dynamic(/*Element或css 选择符*/);
 ```
 
 传入的唯一参数为根节点，根节点**也会**被该实例管理。
@@ -240,7 +240,7 @@ dynamic **强依赖**于其作用域内 DOM 的不变性，也因此才可以实
 ```
 
 ```javascript
-var dy = new Dynamic("#el");
+var dy = Dynamic("#el");
 Dynamic.e("#no").innerText = ""; 
 ```
 

dist/types/dynamic/src/app.d.ts

@@ -2,7 +2,6 @@ export default class App {
     #private;
     constructor(rootNode: Elementy);
     get rootNode(): Element;
-    get dOProcessorStore(): WeakMap<Node, MRProcessorFn>;
     get data(): anyObject;
     get _(): anyObject;
     addExport(dataProperty: string, func: exportFunc, target: Node): shouldExportA;

dist/types/dynamic/src/dynamic.export.d.ts

@@ -1,4 +1,3 @@
-import App from "./app";
-declare function Dynamic(rootNode: Elementy): App;
+declare const Dynamic: Dynamic;
 export default Dynamic;
 //# sourceMappingURL=dynamic.export.d.ts.map

package.json

@@ -12,4 +12,4 @@
         "webpack-cli": "^4.10.0",
         "webpack-utf8-bom": "^1.4.0"
     }
-}
+}

src/app.ts

@@ -65,7 +65,7 @@ export default class App{
     #aOProcessorStore = new WeakMap<Element, MRProcessorFn>();
     #dOProcessorStore = new WeakMap<Node, MRProcessorFn>();
     #cOProcessorStore = new WeakMap<Element, MRProcessorFn>();
-    get dOProcessorStore(){return this.#dOProcessorStore};
+    //get dOProcessorStore(){return this.#dOProcessorStore};
     //简单的DOM监控回调机制，全看对面MRProcessorFn设计得如何
     #observer :MutationObserver = new MutationObserver((records :MutationRecord[])=>{
         for(let i = 0; i < records.length; i++){
@@ -161,7 +161,7 @@ export default class App{
                     const shouldUpdateThis = lUtils.data.detectShouldUpdate(Function.prototype.toString.call(newValue));
                     //console.log(shouldUpdateThis, property);
                     for(let i = 0; i < shouldUpdateThis.length; i++){
-                        //如果函数中访问了还没有创建的属性，那么我们只能去创建它，因为shouldUpdateA不能在之后补上。其实正确的做法是先不创建的
+                        //fixme:如果函数中访问了还没有创建的属性，那么我们只能去创建它，因为shouldUpdateA不能在之后补上。其实正确的做法是先不创建的
                         if(!(shouldUpdateThis[i] in sharpData)) proxy[shouldUpdateThis[i]] = undefined;
                         if(sharpData[shouldUpdateThis[i]].shouldUpdates.indexOf(property) == -1) sharpData[shouldUpdateThis[i]].shouldUpdates.push(property);
                     }

src/dynamic.export.ts

@@ -39,25 +39,23 @@ function __enableDevTools__() :void{
 }
 
 //构造导出对象
-function Dynamic(rootNode :Elementy){return new App(rootNode);}
-((obj :anyObject)=>{
-    for(let i in obj) (Dynamic as anyObject)[i] = obj[i];
-})({
+const Dynamic :Dynamic = (rootNode :Elementy)=>{return new App(rootNode);}
     //引入模块
-    template, spa, manifest,
+Dynamic.template = template;
+Dynamic.spa = spa;
+Dynamic.manifest = manifest;
     //工具方法
-    e(s: string, scope?: Element | Document) :Node | Node[]{return utils.element.e(s, scope);},
-    render(args :{
-        HTML :string | Element | HTMLCollection | Element[] | Node | NodeList | Node[],
-        element :Element, insertAfter? :boolean, append? :boolean
-    }) :Node[]{return utils.element.render(args.HTML, args.element, args.insertAfter, args.append);},
-    toHTML(HTML :string) :Node[]{return utils.element.toHTML(HTML)},
-    hatch(element :Element, remove? :boolean) :Node[]{return utils.element.hatch(element, remove);},
-    compose(){}, //todo:
+Dynamic.e = (s: string, scope?: Element | Document) :Node | Node[]=>{return utils.element.e(s, scope);};
+Dynamic.render = (args :{
+    HTML :string | Element | HTMLCollection | Element[] | Node | NodeList | Node[];
+    element :Element, insertAfter? :boolean, append? :boolean
+}) :Node[]=>{return utils.element.render(args.HTML, args.element, args.insertAfter, args.append);};
+Dynamic.toHTML = (HTML :string) :Node[]=>{return utils.element.toHTML(HTML)};
+Dynamic.hatch = (element :Element, remove? :boolean) :Node[]=>{return utils.element.hatch(element, remove);};
+Dynamic.compose = ()=>{}; //todo:
     //hack
-    __disableDevTools__,
-    __enableDevTools__
-});
+Dynamic.__disableDevTools__ = __disableDevTools__;
+Dynamic.__enableDevTools__ = __enableDevTools__;
 
 //导出
 utils.generic.constantize(Dynamic);

src/types/main.d.ts

@@ -6,4 +6,21 @@ type anyObject = Record<string, any>;
 type kvObject = Record<string, string | undefined | null>;
 type SSkvObject = Record<string, string>;
 type Elementy = Element | string;
-type Nody = Node | string;
+type Nody = Node | string;
+interface Dynamic extends Function{
+    template: typeof import("../template");
+    spa: typeof import("../spa");
+    manifest: typeof import("../manifest");
+    e(s: string, scope?: Element | Document): Node | Node[];
+    render(args: {
+        HTML: string | Element | HTMLCollection | Element[] | Node | NodeList | Node[];
+        element: Element;
+        insertAfter?: boolean;
+        append?: boolean;
+    }): Node[];
+    toHTML(HTML: string): Node[];
+    hatch(element: Element, remove?: boolean): Node[];
+    compose(): void;
+    __disableDevTools__(): void;
+    __enableDevTools__(): void;
+}

tests/main.js

@@ -1,4 +1,4 @@
-var dy = new Dynamic("#app");
+var dy = Dynamic("#app");
 dy.data.name = "dynamic";
 dy.data.op = function(){
     this.few = '"``"';