@viewfly/core 0.0.1-alpha.10 → 0.0.1-alpha.12

package/README.md

@@ -1,4 +1,6 @@
 Viewfly
 ================================
 
-Viewfly 是一个简单、数据驱动的前端视图库，完整文档请参考官方网站：[viewfly.org](https://viewfly.org)
+Viewfly 是一个简单、数据驱动的前端视图库。此包为 Viewfly 的内核实现，要开发完整的应该的应用，还需要结合 `@viewfly/platform-browser` 包，才能在浏览器运行。
+
+完整文档请参考官方网站：[viewfly.org](https://viewfly.org)

package/bundles/foundation/_utils.d.ts

@@ -6,3 +6,4 @@ export interface ObjectChanges {
 export declare const refKey = "ref";
 export declare function getObjectChanges(newProps?: Record<string, any>, oldProps?: Record<string, any>): ObjectChanges;
 export declare function classToString(config: unknown): any;
+export declare function styleToObject(style: string | Record<string, any>): Record<string, any>;

package/bundles/index.esm.js

@@ -227,7 +227,7 @@ class Component extends ReflectiveInjector {
  * }
  * ```
  */
-function onMount(callback) {
+function onMounted(callback) {
     const component = getSetupContext();
     component.mountCallbacks.push(callback);
 }
@@ -601,6 +601,19 @@ function classToString(config) {
         return classes.join(' ');
     }
 }
+function styleToObject(style) {
+    if (typeof style !== 'string') {
+        return style;
+    }
+    const obj = {};
+    style.split(';').map(s => s.split(':')).forEach(v => {
+        if (!v[0] || !v[1]) {
+            return;
+        }
+        obj[v[0].trim()] = v[1].trim();
+    });
+    return obj;
+}
 
 class RootComponentRef {
 }
@@ -796,7 +809,7 @@ let Renderer = class Renderer {
                 });
             }
         };
-        while (newAtom && !newAtom.nativeNode) {
+        while (newAtom) {
             this.createChanges(newAtom, expectIndex, oldChildren, changeCommits);
             newAtom = newAtom.sibling;
             expectIndex++;
@@ -1003,7 +1016,7 @@ let Renderer = class Renderer {
                 continue;
             }
             if (key === 'style') {
-                const style = props.style;
+                const style = styleToObject(props.style);
                 Object.keys(style).forEach(key => {
                     this.nativeRenderer.setStyle(nativeNode, key, style[key]);
                 });
@@ -1045,7 +1058,7 @@ let Renderer = class Renderer {
                 continue;
             }
             if (key === 'style') {
-                Object.keys(value).forEach(styleName => {
+                Object.keys(styleToObject(value)).forEach(styleName => {
                     this.nativeRenderer.removeStyle(nativeNode, styleName);
                 });
                 continue;
@@ -1075,7 +1088,7 @@ let Renderer = class Renderer {
                 continue;
             }
             if (key === 'style') {
-                const styleChanges = getObjectChanges(newValue, oldValue);
+                const styleChanges = getObjectChanges(styleToObject(newValue), styleToObject(oldValue));
                 for (const [styleName] of styleChanges.remove) {
                     this.nativeRenderer.removeStyle(nativeNode, styleName);
                 }
@@ -1110,8 +1123,9 @@ let Renderer = class Renderer {
                 continue;
             }
             if (key === 'style') {
-                Object.keys(value).forEach(styleName => {
-                    this.nativeRenderer.setStyle(nativeNode, styleName, value[styleName]);
+                const styleObj = styleToObject(value);
+                Object.keys(styleObj).forEach(styleName => {
+                    this.nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName]);
                 });
                 continue;
             }
@@ -1133,8 +1147,8 @@ let Renderer = class Renderer {
         };
     }
     applyRefs(refs, nativeNode, binding) {
-        refs = Array.isArray(refs) ? refs : [refs];
-        for (const item of refs) {
+        const refList = Array.isArray(refs) ? refs : [refs];
+        for (const item of refList) {
             if (item instanceof Ref) {
                 binding ? item.bind(nativeNode) : item.unBind(nativeNode);
             }
@@ -1160,7 +1174,6 @@ class Viewfly extends ReflectiveInjector {
                 provide: RootComponentRef,
                 useFactory: () => {
                     return {
-                        host: config.host,
                         component: this.rootComponent
                     };
                 }
@@ -1179,8 +1192,11 @@ class Viewfly extends ReflectiveInjector {
     }
     /**
      * 启动 Viewfly
+     * @param host 应用根节点
      */
-    run() {
+    mount(host) {
+        const rootComponentRef = this.get(RootComponentRef);
+        rootComponentRef.host = host;
         const renderer = this.get(Renderer);
         renderer.render();
         if (this.config.autoUpdate === false) {
@@ -1209,4 +1225,4 @@ class Viewfly extends ReflectiveInjector {
     }
 }
 
-export { Component, Fragment, JSXComponent, JSXElement, JSXText, NativeRenderer, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, makeError, onDestroy, onMount, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal };
+export { Component, Fragment, JSXComponent, JSXElement, JSXText, NativeRenderer, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, makeError, onDestroy, onMounted, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal };

package/bundles/index.js

@@ -228,7 +228,7 @@ class Component extends di.ReflectiveInjector {
  * }
  * ```
  */
-function onMount(callback) {
+function onMounted(callback) {
     const component = getSetupContext();
     component.mountCallbacks.push(callback);
 }
@@ -602,6 +602,19 @@ function classToString(config) {
         return classes.join(' ');
     }
 }
+function styleToObject(style) {
+    if (typeof style !== 'string') {
+        return style;
+    }
+    const obj = {};
+    style.split(';').map(s => s.split(':')).forEach(v => {
+        if (!v[0] || !v[1]) {
+            return;
+        }
+        obj[v[0].trim()] = v[1].trim();
+    });
+    return obj;
+}
 
 class RootComponentRef {
 }
@@ -797,7 +810,7 @@ exports.Renderer = class Renderer {
                 });
             }
         };
-        while (newAtom && !newAtom.nativeNode) {
+        while (newAtom) {
             this.createChanges(newAtom, expectIndex, oldChildren, changeCommits);
             newAtom = newAtom.sibling;
             expectIndex++;
@@ -1004,7 +1017,7 @@ exports.Renderer = class Renderer {
                 continue;
             }
             if (key === 'style') {
-                const style = props.style;
+                const style = styleToObject(props.style);
                 Object.keys(style).forEach(key => {
                     this.nativeRenderer.setStyle(nativeNode, key, style[key]);
                 });
@@ -1046,7 +1059,7 @@ exports.Renderer = class Renderer {
                 continue;
             }
             if (key === 'style') {
-                Object.keys(value).forEach(styleName => {
+                Object.keys(styleToObject(value)).forEach(styleName => {
                     this.nativeRenderer.removeStyle(nativeNode, styleName);
                 });
                 continue;
@@ -1076,7 +1089,7 @@ exports.Renderer = class Renderer {
                 continue;
             }
             if (key === 'style') {
-                const styleChanges = getObjectChanges(newValue, oldValue);
+                const styleChanges = getObjectChanges(styleToObject(newValue), styleToObject(oldValue));
                 for (const [styleName] of styleChanges.remove) {
                     this.nativeRenderer.removeStyle(nativeNode, styleName);
                 }
@@ -1111,8 +1124,9 @@ exports.Renderer = class Renderer {
                 continue;
             }
             if (key === 'style') {
-                Object.keys(value).forEach(styleName => {
-                    this.nativeRenderer.setStyle(nativeNode, styleName, value[styleName]);
+                const styleObj = styleToObject(value);
+                Object.keys(styleObj).forEach(styleName => {
+                    this.nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName]);
                 });
                 continue;
             }
@@ -1134,8 +1148,8 @@ exports.Renderer = class Renderer {
         };
     }
     applyRefs(refs, nativeNode, binding) {
-        refs = Array.isArray(refs) ? refs : [refs];
-        for (const item of refs) {
+        const refList = Array.isArray(refs) ? refs : [refs];
+        for (const item of refList) {
             if (item instanceof Ref) {
                 binding ? item.bind(nativeNode) : item.unBind(nativeNode);
             }
@@ -1161,7 +1175,6 @@ class Viewfly extends di.ReflectiveInjector {
                 provide: RootComponentRef,
                 useFactory: () => {
                     return {
-                        host: config.host,
                         component: this.rootComponent
                     };
                 }
@@ -1180,8 +1193,11 @@ class Viewfly extends di.ReflectiveInjector {
     }
     /**
      * 启动 Viewfly
+     * @param host 应用根节点
      */
-    run() {
+    mount(host) {
+        const rootComponentRef = this.get(RootComponentRef);
+        rootComponentRef.host = host;
         const renderer = this.get(exports.Renderer);
         renderer.render();
         if (this.config.autoUpdate === false) {
@@ -1225,7 +1241,7 @@ exports.jsx = jsx;
 exports.jsxs = jsxs;
 exports.makeError = makeError;
 exports.onDestroy = onDestroy;
-exports.onMount = onMount;
+exports.onMounted = onMounted;
 exports.onPropsChanged = onPropsChanged;
 exports.onUpdated = onUpdated;
 exports.provide = provide;

package/bundles/model/component.d.ts

@@ -61,7 +61,7 @@ export interface PropsChangedCallback<T extends Props<any>> {
  * }
  * ```
  */
-export declare function onMount(callback: LifeCycleCallback): void;
+export declare function onMounted(callback: LifeCycleCallback): void;
 /**
  * 当组件视图更新后调用
  * @param callback

package/bundles/viewfly.d.ts

@@ -6,8 +6,6 @@ export type RootNode = JSXElement | JSXComponent;
  * Viewfly 配置项
  */
 export interface Config {
-    /** 应用根节点 */
-    host: NativeNode;
     /** Viewfly IoC 容器中提供者集合 */
     providers?: Provider[];
     /** 是否自动更新视图 */
@@ -28,8 +26,9 @@ export declare class Viewfly extends ReflectiveInjector {
     constructor(config: Config);
     /**
      * 启动 Viewfly
+     * @param host 应用根节点
      */
-    run(): void;
+    mount(host: NativeNode): void;
     /**
      * 销毁 Viewfly 实例
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.0.1-alpha.10",
+  "version": "0.0.1-alpha.12",
   "description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -37,5 +37,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "6e542df7602aec6a451b2db9a89928ad8bb9f05a"
+  "gitHead": "e5fdc69779bbfd6a1128b98a30d8732dbda7fcd3"
 }