update readme & build

README.CN.md

@@ -13,7 +13,7 @@
 - 利用[Chrome 开发工具扩展 ](https://github.com/f/omi-devtools)轻松调试，[从 Chrome 应用商店安装](https://chrome.google.com/webstore/detail/omijs-devtools/pjgglfliglbhpcpalbpeloghnbceocmd/related)
 - 符合浏览器的发展趋势以及API设计理念
 - `Web Components` + `JSX` 相互融合为一个框架 Omi
-- 通过 omi-mobx 让 omi 和 mobx 一起良好地制作响应式视图(免去 `this.update` 且兼容IE11)
+- 通过 omi-mobx 让 omi 和 mobx 一起良好地制作响应式视图(免去 `this.update`)
 - Web Components 也可以数据驱动视图, `UI = fn(data)`
 - JSX 是开发体验最棒(智能提示)、[语法噪音最少](https://github.com/facebook/jsx#why-not-template-literals)的 UI 表达式
 - 独创的 `Path Updating` 机制，基于 Proxy 全自动化的精准更新，功耗低，自由度高，性能卓越，方便集成 `requestIdleCallback`
@@ -463,6 +463,8 @@ Omi 4.0+ works in the latest two versions of all major browsers: Safari 10+, IE
 
 > 你可以在 IE9 的环境动态加载这个项目的 js，其他环境依旧使用 proxy 版本。
 
+> 你也可以放弃 store 体系，使用 omi-mobx 来兼容IE11
+
 ## 相关链接
 
 - [westore](https://github.com/dntzhang/westore)

README.md

@@ -13,7 +13,7 @@ English | [简体中文](./README.CN.md)
 - Easy to debug via [Omi DevTools Extension](https://github.com/f/omi-devtools) [[Install from Chrome WebStore](https://chrome.google.com/webstore/detail/omijs-devtools/pjgglfliglbhpcpalbpeloghnbceocmd)]
 - Compliance with browser trend and API design.
 - Merge **JSX** and **Web Components** into one framework.
-- Work well with mobx by omi-mobx (Compatible IE11).
+- Work well with mobx by omi-mobx (No need to call `this.update()`).
 - Web Components can also be a data-driven view, **`UI = fn(data)`**.
 - JSX is the best development experience (code intelligent completion and tip) UI Expression with least [grammatical noise](https://github.com/facebook/jsx#why-not-template-literals).
 - The original **Path Updating** system. Proxy-based automatic **accurate** update, **low power consumption**, high degree of freedom, excellent performance, easy integration of `requestIdleCallback`
@@ -464,7 +464,9 @@ Omi 4.0+ works in the latest two versions of all major browsers: Safari 10+, IE
 
 > If you want to be compatible with IE11, use the Omi file of [→ this project](https://github.com/Tencent/omi/tree/master/packages/omi-ie11). This project uses JSON Diff + Timer instead of Proxy.
 
-> You can dynamically load the JS of this project in the IE9 environment, and the proxy version is still used in other environments.
+> You can dynamically load the JS of this project in the IE11 environment, and the proxy version is still used in other environments.
+
+> You can also give up the store system and use omi-mobx to be compatible with IE11.
 
 ## Links
 

packages/omi/dist/omi.d.ts

@@ -4,12 +4,11 @@ export as namespace Omi;
 declare namespace Omi {
 	type Key = string | number;
 	type Ref<T> = (instance: T) => void;
-	type ComponentChild = JSX.Element | string | number | null;
-	type ComponentChildren = ComponentChild[];
+	type ComponentChild = VNode<any> | object | string | number | boolean | null;
+	type ComponentChildren = ComponentChild[] | ComponentChild;
 
 	interface Attributes {
 		key?: string | number | any;
-		jsx?: boolean;
 	}
 
 	interface ClassAttributes<T> extends Attributes {
@@ -23,31 +22,6 @@ declare namespace Omi {
 		};
 	}
 
-	interface WeElement {
-		install?(): void;
-		installed?(): void;
-		uninstall?(): void;
-		beforeUpdate?(): void;
-		afterUpdate?(): void;
-	}
-
-	abstract class WeElement {
-		constructor();
-
-		static props?: Array<string> | object;
-		static data?: object;
-
-		data: object;
-		props: object;
-		host: HTMLElement;
-
-		css?(): void;
-		update(): void;
-		fire?(name: string, data?: object): void;
-
-		abstract render(props?: object, data?: object): void;
-	}
-
 	/**
 	 * Define the contract for a virtual node in omi.
 	 *
@@ -55,64 +29,104 @@ declare namespace Omi {
 	 * of child {VNode}s and a key. The key is used by omi for
 	 * internal purposes.
 	 */
-	interface VNode<P> {
+	interface VNode<P = any> {
 		nodeName: string;
 		attributes: P;
 		children: Array<VNode<any> | string>;
 		key?: Key | null;
 	}
 
+	type RenderableProps<P, RefType = any> = Readonly<
+		P & Attributes & { children?: ComponentChildren; ref?: Ref<RefType> }
+	>;
+
+	interface WeElement<P, D> {
+		install?(): void;
+		installed?(): void;
+		uninstall?(): void;
+		beforeUpdate?(): void;
+		afterUpdate?(): void;
+	}
+
+	abstract class WeElement<P = {}, D = {}> {
+		constructor();
+
+		// Allow static members to reference class type parameters
+		// https://github.com/Microsoft/TypeScript/issues/24018
+		static props: object;
+		static data: object;
+
+		props: RenderableProps<P>;
+		data: D;
+		host: HTMLElement;
+
+		css(): void;
+		update(): void;
+		fire(name: string, data?: object): void;
+
+		// Abstract methods don't infer argument types
+		// https://github.com/Microsoft/TypeScript/issues/14887
+		abstract render(props: RenderableProps<P>, data: D): void;
+	}
+
 	function h<P>(
 		node: string,
 		params: Attributes & P | null,
-		...children: (ComponentChild | ComponentChildren)[]
+		...children: ComponentChildren[]
 	): VNode<any>;
 	function h(
 		node: string,
 		params: JSX.HTMLAttributes & JSX.SVGAttributes & Record<string, any> | null,
-		...children: (ComponentChild | ComponentChildren)[]
+		...children: ComponentChildren[]
 	): VNode<any>;
 
-	function render(
-		vnode: JSX,
-		parent: string | Element | Document,
-		store?: object
-	): void;
-	function define(name: string, ctor: HTMLElement): void;
-	function tag(name: string, pure?: boolean): void;
-	function cloneElement(element: JSX.Element, props: any): JSX.Element;
+	function render(vnode: ComponentChild, parent: string | Element | Document | ShadowRoot | DocumentFragment, store?: object): void;
+
+	function define(name: string, ctor: any): void;
+	function tag(name: string, pure?: boolean): (ctor: any) => void;
 
 	var options: {
 		vnode?: (vnode: VNode<any>) => void;
+		event?: (event: Event) => Event;
 	};
 }
 
+
+type Defaultize<Props, Defaults> =
+	// Distribute over unions
+	Props extends any
+		? 	// Make any properties included in Default optional
+			& Partial<Pick<Props, Extract<keyof Props, keyof Defaults>>>
+			// Include the remaining properties from Props
+			& Pick<Props, Exclude<keyof Props, keyof Defaults>>
+		: never;
+
 declare global {
 	namespace JSX {
-		interface Element extends Omi.VNode<any> {}
+		interface Element extends Omi.VNode<any> {
+		}
+
+		interface ElementClass extends Omi.WeElement<any, any> {
+		}
 
 		interface ElementAttributesProperty {
 			props: any;
 		}
 
+		interface ElementChildrenAttribute {
+			children: any;
+		}
+
+		type LibraryManagedAttributes<Component, Props> =
+			Component extends { defaultProps: infer Defaults }
+				? Defaultize<Props, Defaults>
+				: Props;
+
 		interface SVGAttributes extends HTMLAttributes {
 			accentHeight?: number | string;
 			accumulate?: "none" | "sum";
 			additive?: "replace" | "sum";
-			alignmentBaseline?:
-				| "auto"
-				| "baseline"
-				| "before-edge"
-				| "text-before-edge"
-				| "middle"
-				| "central"
-				| "after-edge"
-				| "text-after-edge"
-				| "ideographic"
-				| "alphabetic"
-				| "hanging"
-				| "mathematical"
-				| "inherit";
+			alignmentBaseline?: "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit";
 			allowReorder?: "no" | "yes";
 			alphabetic?: number | string;
 			amplitude?: number | string;
@@ -370,102 +384,193 @@ declare global {
 		type AnimationEventHandler = EventHandler<AnimationEvent>;
 		type TransitionEventHandler = EventHandler<TransitionEvent>;
 		type GenericEventHandler = EventHandler<Event>;
+		type PointerEventHandler = EventHandler<PointerEvent>;
 
 		interface DOMAttributes extends Omi.OmiDOMAttributes {
 			// Image Events
 			onLoad?: GenericEventHandler;
+			onError?: GenericEventHandler;
+			onLoadCapture?: GenericEventHandler;
 
 			// Clipboard Events
 			onCopy?: ClipboardEventHandler;
+			onCopyCapture?: ClipboardEventHandler;
 			onCut?: ClipboardEventHandler;
+			onCutCapture?: ClipboardEventHandler;
 			onPaste?: ClipboardEventHandler;
+			onPasteCapture?: ClipboardEventHandler;
 
 			// Composition Events
 			onCompositionEnd?: CompositionEventHandler;
+			onCompositionEndCapture?: CompositionEventHandler;
 			onCompositionStart?: CompositionEventHandler;
+			onCompositionStartCapture?: CompositionEventHandler;
 			onCompositionUpdate?: CompositionEventHandler;
+			onCompositionUpdateCapture?: CompositionEventHandler;
 
 			// Focus Events
 			onFocus?: FocusEventHandler;
+			onFocusCapture?: FocusEventHandler;
 			onBlur?: FocusEventHandler;
+			onBlurCapture?: FocusEventHandler;
 
 			// Form Events
 			onChange?: GenericEventHandler;
+			onChangeCapture?: GenericEventHandler;
 			onInput?: GenericEventHandler;
+			onInputCapture?: GenericEventHandler;
 			onSearch?: GenericEventHandler;
+			onSearchCapture?: GenericEventHandler;
 			onSubmit?: GenericEventHandler;
+			onSubmitCapture?: GenericEventHandler;
 
 			// Keyboard Events
 			onKeyDown?: KeyboardEventHandler;
+			onKeyDownCapture?: KeyboardEventHandler;
 			onKeyPress?: KeyboardEventHandler;
+			onKeyPressCapture?: KeyboardEventHandler;
 			onKeyUp?: KeyboardEventHandler;
+			onKeyUpCapture?: KeyboardEventHandler;
 
 			// Media Events
 			onAbort?: GenericEventHandler;
+			onAbortCapture?: GenericEventHandler;
 			onCanPlay?: GenericEventHandler;
+			onCanPlayCapture?: GenericEventHandler;
 			onCanPlayThrough?: GenericEventHandler;
+			onCanPlayThroughCapture?: GenericEventHandler;
 			onDurationChange?: GenericEventHandler;
+			onDurationChangeCapture?: GenericEventHandler;
 			onEmptied?: GenericEventHandler;
+			onEmptiedCapture?: GenericEventHandler;
 			onEncrypted?: GenericEventHandler;
+			onEncryptedCapture?: GenericEventHandler;
 			onEnded?: GenericEventHandler;
+			onEndedCapture?: GenericEventHandler;
 			onLoadedData?: GenericEventHandler;
+			onLoadedDataCapture?: GenericEventHandler;
 			onLoadedMetadata?: GenericEventHandler;
+			onLoadedMetadataCapture?: GenericEventHandler;
 			onLoadStart?: GenericEventHandler;
+			onLoadStartCapture?: GenericEventHandler;
 			onPause?: GenericEventHandler;
+			onPauseCapture?: GenericEventHandler;
 			onPlay?: GenericEventHandler;
+			onPlayCapture?: GenericEventHandler;
 			onPlaying?: GenericEventHandler;
+			onPlayingCapture?: GenericEventHandler;
 			onProgress?: GenericEventHandler;
+			onProgressCapture?: GenericEventHandler;
 			onRateChange?: GenericEventHandler;
+			onRateChangeCapture?: GenericEventHandler;
 			onSeeked?: GenericEventHandler;
+			onSeekedCapture?: GenericEventHandler;
 			onSeeking?: GenericEventHandler;
+			onSeekingCapture?: GenericEventHandler;
 			onStalled?: GenericEventHandler;
+			onStalledCapture?: GenericEventHandler;
 			onSuspend?: GenericEventHandler;
+			onSuspendCapture?: GenericEventHandler;
 			onTimeUpdate?: GenericEventHandler;
+			onTimeUpdateCapture?: GenericEventHandler;
 			onVolumeChange?: GenericEventHandler;
+			onVolumeChangeCapture?: GenericEventHandler;
 			onWaiting?: GenericEventHandler;
+			onWaitingCapture?: GenericEventHandler;
 
 			// MouseEvents
 			onClick?: MouseEventHandler;
+			onClickCapture?: MouseEventHandler;
 			onContextMenu?: MouseEventHandler;
+			onContextMenuCapture?: MouseEventHandler;
 			onDblClick?: MouseEventHandler;
+			onDblClickCapture?: MouseEventHandler;
 			onDrag?: DragEventHandler;
+			onDragCapture?: DragEventHandler;
 			onDragEnd?: DragEventHandler;
+			onDragEndCapture?: DragEventHandler;
 			onDragEnter?: DragEventHandler;
+			onDragEnterCapture?: DragEventHandler;
 			onDragExit?: DragEventHandler;
+			onDragExitCapture?: DragEventHandler;
 			onDragLeave?: DragEventHandler;
+			onDragLeaveCapture?: DragEventHandler;
 			onDragOver?: DragEventHandler;
+			onDragOverCapture?: DragEventHandler;
 			onDragStart?: DragEventHandler;
+			onDragStartCapture?: DragEventHandler;
 			onDrop?: DragEventHandler;
+			onDropCapture?: DragEventHandler;
 			onMouseDown?: MouseEventHandler;
+			onMouseDownCapture?: MouseEventHandler;
 			onMouseEnter?: MouseEventHandler;
+			onMouseEnterCapture?: MouseEventHandler;
 			onMouseLeave?: MouseEventHandler;
+			onMouseLeaveCapture?: MouseEventHandler;
 			onMouseMove?: MouseEventHandler;
+			onMouseMoveCapture?: MouseEventHandler;
 			onMouseOut?: MouseEventHandler;
+			onMouseOutCapture?: MouseEventHandler;
 			onMouseOver?: MouseEventHandler;
+			onMouseOverCapture?: MouseEventHandler;
 			onMouseUp?: MouseEventHandler;
+			onMouseUpCapture?: MouseEventHandler;
 
 			// Selection Events
 			onSelect?: GenericEventHandler;
+			onSelectCapture?: GenericEventHandler;
 
 			// Touch Events
 			onTouchCancel?: TouchEventHandler;
+			onTouchCancelCapture?: TouchEventHandler;
 			onTouchEnd?: TouchEventHandler;
+			onTouchEndCapture?: TouchEventHandler;
 			onTouchMove?: TouchEventHandler;
+			onTouchMoveCapture?: TouchEventHandler;
 			onTouchStart?: TouchEventHandler;
+			onTouchStartCapture?: TouchEventHandler;
+
+			// Pointer Events
+			onPointerOver?: PointerEventHandler;
+			onPointerOverCapture?: PointerEventHandler;
+			onPointerEnter?: PointerEventHandler;
+			onPointerEnterCapture?: PointerEventHandler;
+			onPointerDown?: PointerEventHandler;
+			onPointerDownCapture?: PointerEventHandler;
+			onPointerMove?: PointerEventHandler;
+			onPointerMoveCapture?: PointerEventHandler;
+			onPointerUp?: PointerEventHandler;
+			onPointerUpCapture?: PointerEventHandler;
+			onPointerCancel?: PointerEventHandler;
+			onPointerCancelCapture?: PointerEventHandler;
+			onPointerOut?: PointerEventHandler;
+			onPointerOutCapture?: PointerEventHandler;
+			onPointerLeave?: PointerEventHandler;
+			onPointerLeaveCapture?: PointerEventHandler;
+			onGotPointerCapture?: PointerEventHandler;
+			onGotPointerCaptureCapture?: PointerEventHandler;
+			onLostPointerCapture?: PointerEventHandler;
+			onLostPointerCaptureCapture?: PointerEventHandler;
 
 			// UI Events
 			onScroll?: UIEventHandler;
+			onScrollCapture?: UIEventHandler;
 
 			// Wheel Events
 			onWheel?: WheelEventHandler;
+			onWheelCapture?: WheelEventHandler;
 
 			// Animation Events
 			onAnimationStart?: AnimationEventHandler;
+			onAnimationStartCapture?: AnimationEventHandler;
 			onAnimationEnd?: AnimationEventHandler;
+			onAnimationEndCapture?: AnimationEventHandler;
 			onAnimationIteration?: AnimationEventHandler;
+			onAnimationIterationCapture?: AnimationEventHandler;
 
 			// Transition Events
 			onTransitionEnd?: TransitionEventHandler;
+			onTransitionEndCapture?: TransitionEventHandler;
 		}
 
 		interface HTMLAttributes extends Omi.ClassAttributes<any>, DOMAttributes {
@@ -495,6 +600,7 @@ declare global {
 			contentEditable?: boolean;
 			contextMenu?: string;
 			controls?: boolean;
+			controlsList?: string;
 			coords?: string;
 			crossOrigin?: string;
 			data?: string;
@@ -552,6 +658,7 @@ declare global {
 			optimum?: number;
 			pattern?: string;
 			placeholder?: string;
+			playsInline?: boolean;
 			poster?: string;
 			preload?: string;
 			radioGroup?: string;
@@ -572,7 +679,7 @@ declare global {
 			sizes?: string;
 			slot?: string;
 			span?: number;
-			spellCheck?: boolean;
+			spellcheck?: boolean;
 			src?: string;
 			srcset?: string;
 			srcDoc?: string;
@@ -715,7 +822,7 @@ declare global {
 			track: HTMLAttributes;
 			u: HTMLAttributes;
 			ul: HTMLAttributes;
-			var: HTMLAttributes;
+			"var": HTMLAttributes;
 			video: HTMLAttributes;
 			wbr: HTMLAttributes;
 
@@ -762,6 +869,7 @@ declare global {
 			text: SVGAttributes;
 			tspan: SVGAttributes;
 			use: SVGAttributes;
+			[tagName: string]: any;
 		}
 	}
-}
+}