@viewfly/core 0.0.1-alpha.0

package/bundles/model/_api.d.ts

@@ -0,0 +1,3 @@
+export * from './component';
+export * from './jsx-element';
+export * from './root.component';

package/bundles/model/component.d.ts

@@ -0,0 +1,194 @@
+import { Provider, ReflectiveInjector, AbstractType, Type, InjectionToken, InjectFlags, Injector } from '@tanbo/di';
+import { JSXProps, JSXElement, Props } from './jsx-element';
+export interface ComponentFactory {
+    (context: Injector): Component;
+}
+export type JSXTemplate = JSXElement | ComponentFactory | null | void;
+export interface ComponentSetup {
+    (props: JSXProps<any>): () => JSXTemplate;
+}
+/**
+ * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
+ */
+export declare class Component extends ReflectiveInjector {
+    setup: ComponentSetup;
+    config: JSXProps<any> | null;
+    destroyCallbacks: LifeCycleCallback[];
+    mountCallbacks: LifeCycleCallback[];
+    propsChangedCallbacks: PropsChangedCallback<any>[];
+    updatedCallbacks: LifeCycleCallback[];
+    props: Props;
+    get dirty(): boolean;
+    get changed(): boolean;
+    protected _dirty: boolean;
+    protected _changed: boolean;
+    private parentComponent;
+    private updatedDestroyCallbacks;
+    private propsChangedDestroyCallbacks;
+    private isFirstRending;
+    constructor(context: Injector, setup: ComponentSetup, config: JSXProps<any> | null);
+    addProvide<T>(providers: Provider<T> | Provider<T>[]): void;
+    init(): {
+        template: JSXTemplate;
+        render: () => JSXTemplate;
+    };
+    markAsDirtied(): void;
+    markAsChanged(): void;
+    rendered(): void;
+    invokePropsChangedHooks(newProps: JSXProps<any> | null): void;
+    destroy(): void;
+    private invokeMountHooks;
+    private invokeUpdatedHooks;
+}
+export interface LifeCycleCallback {
+    (): void | (() => void);
+}
+export interface PropsChangedCallback<T extends JSXProps<any>> {
+    (currentProps: T | null, oldProps: T | null): void | (() => void);
+}
+/**
+ * 当组件第一次渲染完成时触发
+ * @param callback
+ * ```tsx
+ * function App() {
+ *   onMount(() => {
+ *     console.log('App mounted!')
+ *   })
+ *   return () => <div>...</div>
+ * }
+ * ```
+ */
+export declare function onMount(callback: LifeCycleCallback): void;
+/**
+ * 当组件视图更新后调用
+ * @param callback
+ * ```tsx
+ * function App() {
+ *   onUpdated(() => {
+ *     console.log('App updated!')
+ *     return () => {
+ *       console.log('destroy prev update!')
+ *     }
+ *   })
+ *   return () => <div>...</div>
+ * }
+ * ```
+ */
+export declare function onUpdated(callback: LifeCycleCallback): () => void;
+/**
+ * 当组件 props 更新地调用
+ * @param callback
+ * @example
+ * ```tsx
+ * function YourComponent(props) {
+ *   onPropsChanged((currentProps, prevProps) => {
+ *     console.log(currentProps, prevProps)
+ *
+ *     return () => {
+ *       console.log('destroy prev changed!')
+ *     }
+ *   })
+ *   return () => {
+ *     return <div>xxx</div>
+ *   }
+ * }
+ * ```
+ */
+export declare function onPropsChanged<T extends JSXProps<any>>(callback: PropsChangedCallback<T>): () => void;
+/**
+ * 当组件销毁时调用回调函数
+ * @param callback
+ */
+export declare function onDestroy(callback: () => void): void;
+export interface RefListener<T> {
+    (current: T): void | (() => void);
+}
+export declare class Ref<T> {
+    private callback;
+    private component;
+    private unListenFn;
+    constructor(callback: RefListener<T>, component: Component);
+    update(value: T): void;
+    unListen(): void;
+}
+/**
+ * 用于节点渲染完成时获取 DOM 节点
+ * @param callback 获取 DOM 节点的回调函数
+ * @example
+ * ```tsx
+ * function App() {
+ *   const ref = useRef(node => {
+ *     function fn() {
+ *       // do something...
+ *     }
+ *     node.addEventListener('click', fn)
+ *     return () => {
+ *       node.removeEventListener('click', fn)
+ *     }
+ *   })
+ *   return () => {
+ *     return <div ref={ref}>xxx</div>
+ *   }
+ * }
+ * ```
+ */
+export declare function useRef<T>(callback: RefListener<T>): Ref<T>;
+declare const depsKey: unique symbol;
+/**
+ * 组件状态实例，直接调用可以获取最新的状态，通过 set 方法可以更新状态
+ * ```
+ */
+export interface Signal<T> {
+    /**
+     *  直接调用一个 Signal 实例，可以获取最新状态
+     */
+    (): T;
+    /**
+     * 更新组件状态的方法，可以传入最新的值，或者传入一个函数，并返回最新的值
+     * @param newState
+     */
+    set(newState: T | ((oldState: T) => T)): void;
+    [depsKey]: Set<LifeCycleCallback>;
+}
+/**
+ * 组件状态管理器
+ * @param state 初始状态
+ * @example
+ * ```tsx
+ * function App() {
+ *   // 初始化状态
+ *   const state = useSignal(1)
+ *
+ *   return () => {
+ *     <div>
+ *       <div>当前值为：{state()}</div>
+ *       <div>
+ *         <button type="button" onClick={() => {
+ *           // 当点击时更新状态
+ *           state.set(state() + 1)
+ *         }
+ *         }>updateState</button>
+ *       </div>
+ *     </div>
+ *   }
+ * }
+ */
+export declare function useSignal<T>(state: T): Signal<T>;
+/**
+ * 监听状态变化，当任意一个状态发生变更时，触发回调。
+ * useEffect 会返回一个取消监听的函数，调用此函数，可以取消监听。
+ * 当在组件中调用时，组件销毁时会自动取消监听。
+ * @param deps 依赖的状态 Signal，可以是一个 Signal，只可以一个数包含 Signal 的数组
+ * @param effect 状态变更后的回调函数
+ */
+export declare function useEffect(deps: Signal<any> | Signal<any>[], effect: LifeCycleCallback): () => void;
+/**
+ * 通过 IoC 容器当前组件提供上下文共享数据的方法
+ * @param provider
+ */
+export declare function provide(provider: Provider | Provider[]): Component;
+/**
+ * 通过组件上下文获取 IoC 容器内数据的勾子方法
+ */
+export declare function inject<T>(token: Type<T> | AbstractType<T> | InjectionToken<T>, notFoundValue?: T, flags?: InjectFlags): T;
+export {};

package/bundles/model/jsx-element.d.ts

@@ -0,0 +1,39 @@
+import { ComponentFactory, ComponentSetup } from './component';
+export type JSXChildNode = JSXElement | ComponentFactory | string | number | boolean | null | undefined;
+export interface JSXProps<T = JSXChildNode | JSXChildNode[]> {
+    children?: T;
+    [key: string]: any;
+    [key: symbol]: any;
+}
+export declare function Fragment(props: Props | null): () => JSXFragment;
+export declare class JSXFragment {
+    props: Props | null;
+    constructor(props: Props | null);
+}
+export declare function jsx<T extends JSXChildNode>(name: string, config: JSXProps<T> | null): JSXElement;
+export declare function jsx<T extends JSXChildNode>(setup: ComponentSetup, config: JSXProps<T> | null): ComponentFactory;
+export declare function jsxs<T extends JSXChildNode[]>(name: string, config: JSXProps<T> | null): JSXElement;
+export declare function jsxs<T extends JSXChildNode[]>(setup: ComponentSetup, config: JSXProps<T> | null): ComponentFactory;
+export interface VElementListeners {
+    [listenKey: string]: <T extends Event>(ev: T) => any;
+}
+export declare class JSXText {
+    text: string;
+    constructor(text: string);
+}
+export type VNode = JSXElement | ComponentFactory | JSXText;
+export declare class Props {
+    attrs: Map<string, any>;
+    styles: Map<string, string | number>;
+    classes: Set<string>;
+    listeners: VElementListeners;
+    children: VNode[];
+    constructor(props: JSXProps<JSXChildNode> | JSXProps<JSXChildNode[]> | null);
+    static classToArray(config: unknown): string[];
+}
+export declare class JSXElement {
+    name: string;
+    config: JSXProps<any> | null;
+    props: Props;
+    constructor(name: string, config: JSXProps<any> | null);
+}

package/bundles/model/root.component.d.ts

@@ -0,0 +1,10 @@
+import { Subject } from '@tanbo/stream';
+import { Component, ComponentSetup } from './component';
+/**
+ * Viewfly 根组件，用于实现组件状态更新事件通知
+ */
+export declare class RootComponent extends Component {
+    changeEmitter: Subject<void>;
+    constructor(factory: ComponentSetup);
+    markAsChanged(): void;
+}

package/bundles/public-api.d.ts

@@ -0,0 +1,5 @@
+import 'reflect-metadata';
+export * from '@tanbo/di';
+export * from './foundation/_api';
+export * from './model/_api';
+export * from './viewfly';

package/bundles/viewfly.d.ts

@@ -0,0 +1,36 @@
+import { Provider, ReflectiveInjector } from '@tanbo/di';
+import { NativeNode } from './foundation/_api';
+import { ComponentFactory, JSXElement } from './model/_api';
+export type RootNode = JSXElement | ComponentFactory;
+/**
+ * Viewfly 配置项
+ */
+export interface Config {
+    /** 应用根节点 */
+    host: NativeNode;
+    /** Viewfly IoC 容器中提供者集合 */
+    providers?: Provider[];
+    /** 是否自动更新视图 */
+    autoUpdate?: boolean;
+    /** 根节点 */
+    root: RootNode;
+}
+/**
+ * Viewfly 核心类，用于启动一个 Viewfly 应用
+ */
+export declare class Viewfly extends ReflectiveInjector {
+    private config;
+    private destroyed;
+    private rootComponent;
+    private subscription;
+    constructor(config: Config);
+    /**
+     * 启动 Viewfly
+     */
+    start(): void;
+    /**
+     * 销毁 Viewfly 实例
+     */
+    destroy(): void;
+    private createRootComponent;
+}

package/jsx-dev-runtime.js

@@ -0,0 +1,8 @@
+import { jsx, jsxs, Fragment } from '@viewfly/core'
+
+export const jsxDEV = jsx
+
+export {
+  jsxs,
+  Fragment
+}

package/jsx-runtime.d.ts

@@ -0,0 +1,16 @@
+import { jsx, jsxs, Fragment, JSXElement } from '@viewfly/core'
+
+export {
+  jsxs,
+  jsx,
+  Fragment
+}
+
+declare namespace JSX {
+  interface IntrinsicElements {
+    [elemName: string]: JSXElement
+  }
+
+  interface Element extends JSXElement {
+  }
+}

package/jsx-runtime.js

@@ -0,0 +1,7 @@
+import { jsx, jsxs, Fragment } from '@viewfly/core'
+
+export {
+  jsxs,
+  jsx,
+  Fragment
+}

package/jsx-runtime.umd.js

@@ -0,0 +1,17 @@
+(function (factory) {
+  if (typeof module === 'object' && typeof module.exports === 'object') {
+    var v = factory(require, exports)
+    if (v !== undefined) module.exports = v
+  }
+  else if (typeof define === 'function' && define.amd) {
+    define(['require', 'exports', '@viewfly/core'], factory)
+  }
+})(function (require, exports) {
+  'use strict'
+  Object.defineProperty(exports, '__esModule', { value: true })
+  exports.Fragment = exports.jsx = exports.jsxs = void 0
+  const core_1 = require('@viewfly/core')
+  Object.defineProperty(exports, 'jsx', { enumerable: true, get: function () { return core_1.jsx } })
+  Object.defineProperty(exports, 'jsxs', { enumerable: true, get: function () { return core_1.jsxs } })
+  Object.defineProperty(exports, 'Fragment', { enumerable: true, get: function () { return core_1.Fragment } })
+})

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@viewfly/core",
+  "version": "0.0.1-alpha.0",
+  "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",
+  "typings": "./bundles/public-api.d.ts",
+  "scripts": {
+    "start": "webpack-dev-server",
+    "test": "cross-env env=test jest",
+    "test-c": "cross-env env=test jest --coverage",
+    "build:lib": "rimraf bundles && rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
+    "publish:lib": "npm run build:lib && npm publish --access=public"
+  },
+  "license": "MIT",
+  "keywords": [],
+  "dependencies": {
+    "@tanbo/di": "^1.1.4",
+    "@tanbo/stream": "^1.1.9"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-typescript": "^9.0.2",
+    "rimraf": "^3.0.2",
+    "rollup": "^3.2.5",
+    "tslib": "^2.4.1"
+  },
+  "author": {
+    "name": "Tanbo",
+    "email": "tanbohb@qq.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/viewfly/viewfly.git"
+  },
+  "bugs": {
+    "url": "https://github.com/viewfly/viewfly.git/issues"
+  }
+}