Skip to content
This repository has been archived by the owner on Aug 16, 2023. It is now read-only.

Commit

Permalink
feat: add findDOMNode, findVDom
Browse files Browse the repository at this point in the history
  • Loading branch information
@zeromake
zeromake committed Oct 14, 2017
1 parent e275764 commit 0f3b088
Show file tree
Hide file tree
Showing 22 changed files with 576 additions and 576 deletions.
14 changes: 7 additions & 7 deletions package.json
View file
@@ -1,6 +1,6 @@
{
"name": "zreact",
"version": "0.1.3",
"version": "0.2.0",
"description": "React like,copy by preact",
"main": "dist/zreact.js",
"module": "dist/zreact.esm.js",
Expand Down Expand Up @@ -77,10 +77,10 @@
"karma-phantomjs-launcher": "^1.0.4",
"karma-remap-istanbul": "^0.6.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.4",
"mocha": "^4.0.0",
"karma-webpack": "^2.0.5",
"mocha": "^4.0.1",
"preact-jsx-chai": "^2.2.1",
"preact-render-to-string": "^3.6.3",
"preact-render-to-string": "^3.7.0",
"prop-types": "^15.5.10",
"remap-istanbul": "^0.9.5",
"rimraf": "^2.6.1",
Expand All @@ -90,13 +90,13 @@
"rollup-plugin-typescript": "zeromake/rollup-plugin-typescript",
"rollup-plugin-uglify": "^2.0.1",
"rollup-watch": "^4.3.1",
"sinon": "^4.0.0",
"sinon": "^4.0.1",
"sinon-chai": "^2.13.0",
"ts-loader": "^2.3.5",
"tslint": "^5.7.0",
"typedoc": "^0.8.0",
"typedoc": "^0.9.0",
"typescript": "^2.5.2",
"uglify-es": "^3.1.1",
"webpack": "^3.6.0"
"webpack": "^3.7.1"
}
}
18 changes: 9 additions & 9 deletions src/compat.ts
View file
@@ -1,5 +1,13 @@
import PropTypes from "prop-types";
import { render as zreactRender, cloneElement as zreactCloneElement, h, Component as PreactComponent, options } from "zreact";
import {
render as zreactRender,
cloneElement as zreactCloneElement,
h,
Component as PreactComponent,
options,
isValidElement,
findDOMNode
} from "zreact";

const version = "15.1.0"; // trick libraries to think we are react

Expand Down Expand Up @@ -343,10 +351,6 @@ function cloneElement(element: any, props: any, ...children: any[]) {
return normalizeVNode(zreactCloneElement.apply(void 0, cloneArgs));
}

function isValidElement(element: any) {
return element && ((element instanceof VNode) || element.$$typeof === REACT_ELEMENT_TYPE);
}

function createStringRefProxy(name: any, component: any) {
return component._refProxies[name] || (component._refProxies[name] = (resolved: any) => {
if (component && component.refs) {
Expand Down Expand Up @@ -423,10 +427,6 @@ function shallowDiffers(a: any, b: any) {
return false;
}

function findDOMNode(component: any) {
return component && component.vdom && component.vdom.base || component;
}

function F() {}

function createClass(obj: any) {
Expand Down
160 changes: 100 additions & 60 deletions src/component.ts
View file
Expand Up @@ -8,125 +8,161 @@ import { IVDom } from "./vdom/index";
import { h } from "./h";
import options from "./options";

/**
* 自定义组件所需继承类
*/
export class Component <PropsType extends IKeyValue, StateType extends IKeyValue> {
/**
* 被移除时的vdom缓存
*/
public _nextVDom?: IVDom;

/**
* 上一次的属性
*/
public _prevProps?: PropsType;

/**
* 上一次的状态
*/
public _prevState?: StateType;

/**
* 上一次的上下文
*/
public _prevContext?: IKeyValue;

/**
* 绑定了this的
*/
public _h?: typeof h;

/**
* 子组件
*/
public _component?: Component<IKeyValue, IKeyValue>;

/**
* 父组件
*/
public _parentComponent?: Component<IKeyValue, IKeyValue>;

/**
* 是否加入更新队列
*/
public _dirty: boolean;

/**
* render 执行完后的回调队列
*/
public _renderCallbacks?: Array<() => void>;

/**
* 当前组件的key用于复用
*/
public _key?: string;

/**
* 是否停用
*/
public _disable?: boolean;

/**
* 模拟vue.emit用的上下文保存
*/
public _emitComponent?: Component<any, any>;

/**
* react标准用于设置component实例
*/
public _ref?: (component: Component<PropsType, StateType> | null) => void;

/**
* 默认props
*/
public static defaultProps?: IKeyValue;

/**
* 当前组件的状态,可以修改
*/
public state: StateType;

/**
* 由父级组件传递的状态，不可修改
*/
public props: PropsType;

/**
* 组件上下文，由父组件传递
*/
public context: IKeyValue;
/**
* 组件挂载后的vdom
*/
public vdom?: IVDom;
/**
* 被移除时的vdom缓存
*/
public nextVDom?: IVDom;

/**
* 自定义组件名
*/
public name?: string;

/**
* 上一次的属性
*/
public prevProps?: PropsType;
/**
* 上一次的状态
* 组件挂载后的vdom
*/
public prevState?: StateType;
public _vdom?: IVDom;

/**
* 上一次的上下文
*
*/
public prevContext?: IKeyValue;
public base?: Node | Element | Text;
/**
* 在一个组件被渲染到 DOM 之前
*/
public componentWillMount? (): void;
public componentWillMount?(): void;

/**
* 在一个组件被渲染到 DOM 之后
*/
public componentDidMount? (): void;
public componentDidMount?(): void;

/**
* 在一个组件在 DOM 中被清除之前
*/
public componentWillUnmount? (): void;
public componentWillUnmount?(): void;

/**
* 在新的 props 被接受之前
* @param { PropsType } nextProps
* @param { IKeyValue } nextContext
*/
public componentWillReceiveProps? (nextProps: PropsType, nextContext: IKeyValue): boolean;
public componentWillReceiveProps?(nextProps: PropsType, nextContext: IKeyValue): void;

/**
* 在 render() 之前. 若返回 false，则跳过 render，与 componentWillUpdate 互斥
* @param { PropsType } nextProps
* @param { StateType } nextState
* @param { IKeyValue } nextContext
* @returns { boolean }
*/
public shouldComponentUpdate? (nextProps: PropsType, nextState: StateType, nextContext: IKeyValue): boolean;
public shouldComponentUpdate?(nextProps: PropsType, nextState: StateType, nextContext: IKeyValue): boolean;

/**
* 在 render() 之前，与 shouldComponentUpdate 互斥
* @param { PropsType } nextProps
* @param { StateType } nextState
* @param { IKeyValue } nextContext
*/
public componentWillUpdate? (nextProps: PropsType, nextState: StateType, nextContext: IKeyValue): void;
public componentWillUpdate?(nextProps: PropsType, nextState: StateType, nextContext: IKeyValue): void;

/**
* 在 render() 之后
* @param { PropsType } previousProps
* @param { StateType } previousState
* @param { IKeyValue } previousContext
*/
public componentDidUpdate? (previousProps: PropsType, previousState: StateType, previousContext: IKeyValue): void;
public componentDidUpdate?(previousProps: PropsType, previousState: StateType, previousContext: IKeyValue): void;

/**
* 获取上下文，会被传递到所有的子组件
*/
public getChildContext? (): IKeyValue;

public h?: typeof h;
/**
* 子组件
*/
public _component?: Component<IKeyValue, IKeyValue>;
/**
* 父组件
*/
public _parentComponent?: Component<IKeyValue, IKeyValue>;
/**
* 是否加入更新队列
*/
public _dirty: boolean;
/**
* render 执行完后的回调队列
*/
public _renderCallbacks?: Array<() => void>;
/**
* 当前组件的key用于复用
*/
public _key?: string;
/**
* 是否停用
*/
public _disable?: boolean;
/**
* 模拟vue.emit用的上下文保存
*/
public _emitComponent?: Component<any, any>;
/**
* react标准用于设置component实例
*/
public _ref?: (component: Component<PropsType, StateType> | null) => void;
public getChildContext?(): IKeyValue;

constructor(props: PropsType, context: IKeyValue) {
// 初始化为true
this._dirty = true;
Expand All @@ -140,16 +176,17 @@ export class Component <PropsType extends IKeyValue, StateType extends IKeyValue
// } as typeof h;
// }
}

/**
* 设置state并通过enqueueRender异步更新dom
* @param state 对象或方法
* @param callback render执行完后的回调。
*/
public setState(state: StateType, callback?: () => void): void {
const s: StateType = this.state;
if (!this.prevState) {
if (!this._prevState) {
// 把旧的状态保存起来
this.prevState = extend({}, s);
this._prevState = extend({}, s);
}
// 把新的state和并到this.state
if (typeof state === "function") {
Expand All @@ -168,6 +205,7 @@ export class Component <PropsType extends IKeyValue, StateType extends IKeyValue
// 异步队列更新dom，通过enqueueRender方法可以保证在一个任务栈下多次setState但是只会发生一次render
enqueueRender(this);
}

/**
* 手动的同步更新dom
* @param callback 回调
Expand All @@ -180,6 +218,7 @@ export class Component <PropsType extends IKeyValue, StateType extends IKeyValue
// 重新执行render
renderComponent(this, FORCE_RENDER);
}

/**
* 用来生成VNode的函数，一定要继承后覆盖
* @param props
Expand All @@ -189,6 +228,7 @@ export class Component <PropsType extends IKeyValue, StateType extends IKeyValue
public render(props: PropsType, state: StateType, context: IKeyValue, createElement?: typeof h): VNode | void {
// console.error("not set render");
}

/**
* 触发props上的on开头的方法，并以_emitComponent为this
* @param eventName 事件名去除
Expand Down

0 comments on commit 0f3b088

Please sign in to comment.