refactor: remove state, data, observe, tick, nextTick, ModelView from omi
This commit is contained in:
parent
fee8d6e22f
commit
1e161ec7b9
|
@ -47,7 +47,7 @@ describe('lifecycle', () => {
|
|||
});
|
||||
|
||||
// 测试beforeRender
|
||||
it ('should render beforeRender', () => {
|
||||
it ('should render beforeRender a', () => {
|
||||
class M2 extends WeElement {
|
||||
static observe = true
|
||||
data = {
|
||||
|
@ -114,7 +114,7 @@ describe('lifecycle', () => {
|
|||
});
|
||||
|
||||
// 测试uninstall
|
||||
it ('should render uninstall', () => {
|
||||
it ('should render uninstall a', () => {
|
||||
class M4 extends WeElement {
|
||||
static observe = true
|
||||
data = {
|
||||
|
@ -159,7 +159,7 @@ describe('lifecycle', () => {
|
|||
expect(scratch.innerHTML).to.equal('<div><div>dl</div></div>');
|
||||
});
|
||||
|
||||
it ('should render beforeUpdate', () => {
|
||||
it ('should render beforeUpdate a', () => {
|
||||
let beforeUpdateable = false;
|
||||
class M5 extends WeElement {
|
||||
static observe = true;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "omio",
|
||||
"version": "2.4.1",
|
||||
"version": "2.5.0",
|
||||
"description": "Omi for old browsers(IE8+).",
|
||||
"main": "dist/omi.js",
|
||||
"jsnext:main": "dist/omi.esm.js",
|
||||
|
|
|
@ -9,13 +9,11 @@ export default class Component {
|
|||
static is = 'WeElement'
|
||||
|
||||
constructor(props, store) {
|
||||
this.props = assign(
|
||||
nProps(this.constructor.props),
|
||||
this.props = assign({ },
|
||||
this.constructor.defaultProps,
|
||||
props
|
||||
)
|
||||
this.elementId = id++
|
||||
this.data = this.constructor.data || this.data || {}
|
||||
|
||||
this._preCss = null
|
||||
|
||||
|
@ -23,6 +21,7 @@ export default class Component {
|
|||
}
|
||||
|
||||
update(callback) {
|
||||
if(this._willUpdate) return
|
||||
this._willUpdate = true
|
||||
if (callback)
|
||||
(this._renderCallbacks = this._renderCallbacks || []).push(callback)
|
||||
|
|
|
@ -1,11 +0,0 @@
|
|||
import Component from './component'
|
||||
|
||||
export default class ModelView extends Component {
|
||||
static observe = true
|
||||
|
||||
static mergeUpdate = true
|
||||
|
||||
beforeInstall() {
|
||||
this.data = this.vm.data
|
||||
}
|
||||
}
|
|
@ -1,22 +0,0 @@
|
|||
import obaa from './obaa'
|
||||
import { fireTick } from './tick'
|
||||
|
||||
export function proxyUpdate(ele) {
|
||||
let timeout = null
|
||||
obaa(ele.data, () => {
|
||||
if (ele._willUpdate) {
|
||||
return
|
||||
}
|
||||
if (ele.constructor.mergeUpdate) {
|
||||
clearTimeout(timeout)
|
||||
|
||||
timeout = setTimeout(() => {
|
||||
ele.update()
|
||||
fireTick()
|
||||
}, 0)
|
||||
} else {
|
||||
ele.update()
|
||||
fireTick()
|
||||
}
|
||||
})
|
||||
}
|
|
@ -95,13 +95,10 @@ declare namespace Omi {
|
|||
// Allow static members to reference class type parameters
|
||||
// https://github.com/Microsoft/TypeScript/issues/24018
|
||||
static props: object;
|
||||
static data: object;
|
||||
static observe: boolean;
|
||||
static mergeUpdate: boolean;
|
||||
|
||||
static css: string;
|
||||
|
||||
props: RenderableProps<P>;
|
||||
data: D;
|
||||
host: HTMLElement;
|
||||
|
||||
update(): void;
|
||||
|
@ -109,7 +106,7 @@ declare namespace Omi {
|
|||
css(): string;
|
||||
// Abstract methods don't infer argument types
|
||||
// https://github.com/Microsoft/TypeScript/issues/14887
|
||||
abstract render(props: RenderableProps<P>, data: D): void;
|
||||
abstract render(props: RenderableProps<P>, store: any): void;
|
||||
}
|
||||
|
||||
// The class type (not instance of class)
|
||||
|
@ -118,27 +115,6 @@ declare namespace Omi {
|
|||
new(): WeElement;
|
||||
}
|
||||
|
||||
abstract class ModelView<P = {}, D = {}> {
|
||||
constructor();
|
||||
|
||||
// Allow static members to reference class type parameters
|
||||
// https://github.com/Microsoft/TypeScript/issues/24018
|
||||
static props: object;
|
||||
static data: object;
|
||||
static observe: boolean;
|
||||
static mergeUpdate: boolean;
|
||||
|
||||
props: RenderableProps<P>;
|
||||
data: D;
|
||||
host: HTMLElement;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
abstract class Component<P = {}, D = {}> {
|
||||
constructor();
|
||||
|
@ -146,13 +122,11 @@ declare namespace Omi {
|
|||
// Allow static members to reference class type parameters
|
||||
// https://github.com/Microsoft/TypeScript/issues/24018
|
||||
static props: object;
|
||||
static data: object;
|
||||
static observe: boolean;
|
||||
static mergeUpdate: boolean;
|
||||
|
||||
static css: string;
|
||||
|
||||
props: RenderableProps<P>;
|
||||
data: D;
|
||||
|
||||
host: HTMLElement;
|
||||
|
||||
update(): void;
|
||||
|
@ -160,7 +134,7 @@ declare namespace Omi {
|
|||
css(): string;
|
||||
// Abstract methods don't infer argument types
|
||||
// https://github.com/Microsoft/TypeScript/issues/14887
|
||||
abstract render(props: RenderableProps<P>, data: D): void;
|
||||
abstract render(props: RenderableProps<P>, store: any): void;
|
||||
}
|
||||
|
||||
function h<P>(
|
||||
|
|
|
@ -7,7 +7,6 @@ import options from './options'
|
|||
import { define } from './define'
|
||||
import { rpx } from './rpx'
|
||||
import { tag } from './tag'
|
||||
import ModelView from './model-view'
|
||||
import { classNames, extractClass } from './class'
|
||||
import { getHost } from './get-host'
|
||||
import { renderToString } from './render-to-string'
|
||||
|
@ -34,7 +33,6 @@ options.root.Omi = {
|
|||
WeElement,
|
||||
define,
|
||||
rpx,
|
||||
ModelView,
|
||||
defineElement,
|
||||
classNames,
|
||||
extractClass,
|
||||
|
@ -47,7 +45,7 @@ options.root.Omi = {
|
|||
obaa
|
||||
}
|
||||
options.root.omi = options.root.Omi
|
||||
options.root.Omi.version = 'omio-2.4.1'
|
||||
options.root.Omi.version = 'omio-2.5.0'
|
||||
|
||||
export default {
|
||||
h,
|
||||
|
@ -61,7 +59,6 @@ export default {
|
|||
WeElement,
|
||||
define,
|
||||
rpx,
|
||||
ModelView,
|
||||
defineElement,
|
||||
classNames,
|
||||
extractClass,
|
||||
|
@ -86,7 +83,6 @@ export {
|
|||
WeElement,
|
||||
define,
|
||||
rpx,
|
||||
ModelView,
|
||||
defineElement,
|
||||
classNames,
|
||||
extractClass,
|
||||
|
|
|
@ -100,7 +100,7 @@ function _renderToString(vnode, opts, store, isSvgMode, css) {
|
|||
c.store = store;
|
||||
if (c.install) c.install();
|
||||
if (c.beforeRender) c.beforeRender();
|
||||
rendered = c.render(c.props, c.data, c.store);
|
||||
rendered = c.render(c.props, c.store);
|
||||
|
||||
if(opts.scopedCSS){
|
||||
|
||||
|
|
|
@ -55,6 +55,6 @@ export function createComponent(Ctor, props, context, vnode) {
|
|||
}
|
||||
|
||||
/** The `.render()` method for a PFC backing instance. */
|
||||
function doRender(props, data, context) {
|
||||
function doRender(props, context) {
|
||||
return this.constructor(props, context)
|
||||
}
|
||||
|
|
|
@ -23,7 +23,6 @@ import {
|
|||
getCtorName,
|
||||
scopeHost
|
||||
} from '../style'
|
||||
import { proxyUpdate } from '../observe'
|
||||
|
||||
/** Set a component's `props` (generally derived from JSX attributes).
|
||||
* @param {Object} props
|
||||
|
@ -41,9 +40,6 @@ export function setComponentProps(component, props, opts, context, mountAll) {
|
|||
if (!component.base || mountAll) {
|
||||
if (component.beforeInstall) component.beforeInstall()
|
||||
if (component.install) component.install()
|
||||
if (component.constructor.observe) {
|
||||
proxyUpdate(component)
|
||||
}
|
||||
}
|
||||
|
||||
if (context && context !== component.context) {
|
||||
|
@ -82,10 +78,8 @@ export function renderComponent(component, opts, mountAll, isChild) {
|
|||
if (component._disable) return
|
||||
|
||||
let props = component.props,
|
||||
data = component.data,
|
||||
context = component.context,
|
||||
previousProps = component.prevProps || props,
|
||||
previousState = component.prevState || data,
|
||||
previousContext = component.prevContext || context,
|
||||
isUpdate = component.base,
|
||||
nextBase = component.nextBase,
|
||||
|
@ -99,7 +93,6 @@ export function renderComponent(component, opts, mountAll, isChild) {
|
|||
// if updating
|
||||
if (isUpdate) {
|
||||
component.props = previousProps
|
||||
component.data = previousState
|
||||
component.context = previousContext
|
||||
|
||||
let receiveResult = true
|
||||
|
@ -109,21 +102,20 @@ export function renderComponent(component, opts, mountAll, isChild) {
|
|||
if (receiveResult !== false) {
|
||||
skip = false
|
||||
if (component.beforeUpdate) {
|
||||
component.beforeUpdate(props, data, context)
|
||||
component.beforeUpdate(props, context)
|
||||
}
|
||||
} else {
|
||||
skip = true
|
||||
}
|
||||
component.props = props
|
||||
component.data = data
|
||||
component.context = context
|
||||
}
|
||||
|
||||
component.prevProps = component.prevState = component.prevContext = component.nextBase = null
|
||||
component.prevProps = component.prevContext = component.nextBase = null
|
||||
|
||||
if (!skip) {
|
||||
component.beforeRender && component.beforeRender()
|
||||
rendered = component.render(props, data, context)
|
||||
rendered = component.render(props, context)
|
||||
|
||||
//don't rerender
|
||||
if (component.constructor.css || component.css) {
|
||||
|
@ -224,10 +216,10 @@ export function renderComponent(component, opts, mountAll, isChild) {
|
|||
|
||||
if (component.afterUpdate) {
|
||||
//deprecated
|
||||
component.afterUpdate(previousProps, previousState, previousContext)
|
||||
component.afterUpdate(previousProps, previousContext)
|
||||
}
|
||||
if (component.updated) {
|
||||
component.updated(previousProps, previousState, previousContext)
|
||||
component.updated(previousProps, previousContext)
|
||||
}
|
||||
if (options.afterUpdate) options.afterUpdate(component)
|
||||
}
|
||||
|
|
|
@ -43,7 +43,7 @@ describe('install()', () => {
|
|||
render(<my-ele />, scratch)
|
||||
|
||||
expect(Ele.prototype.render)
|
||||
.to.have.been.calledOnce.and.to.have.been.calledWithMatch({}, {})
|
||||
.to.have.been.calledOnce.and.to.have.been.calledWithMatch({})
|
||||
.and.to.have.returned(sinon.match({ nodeName: 'div' }))
|
||||
|
||||
expect(scratch.innerHTML).to.equal('<div>Ele</div>')
|
||||
|
@ -95,7 +95,7 @@ describe('install()', () => {
|
|||
expect(constructorProps).to.deep.equal(PROPS)
|
||||
|
||||
expect(C2.prototype.render)
|
||||
.to.have.been.calledOnce.and.to.have.been.calledWithMatch(PROPS, {})
|
||||
.to.have.been.calledOnce.and.to.have.been.calledWithMatch(PROPS)
|
||||
.and.to.have.returned(
|
||||
sinon.match({
|
||||
nodeName: 'div',
|
||||
|
|
|
@ -47,9 +47,8 @@ describe('lifecycle', () => {
|
|||
});
|
||||
|
||||
// 测试beforeRender
|
||||
it ('should render beforeRender', () => {
|
||||
it ('should render beforeRender b', () => {
|
||||
class M2 extends WeElement {
|
||||
static observe = true
|
||||
data = {
|
||||
name: 'M2'
|
||||
}
|
||||
|
@ -63,6 +62,7 @@ describe('lifecycle', () => {
|
|||
name: 'Omi',
|
||||
age: 18
|
||||
}
|
||||
data={}
|
||||
|
||||
beforeRender () {
|
||||
console.log('beforeRender')
|
||||
|
@ -114,15 +114,15 @@ describe('lifecycle', () => {
|
|||
});
|
||||
|
||||
// 测试uninstall
|
||||
it ('should render uninstall', () => {
|
||||
it ('should render uninstall b', () => {
|
||||
class M4 extends WeElement {
|
||||
static observe = true
|
||||
data = {
|
||||
name: 'M4',
|
||||
isShow: true
|
||||
}
|
||||
installed () {
|
||||
this.data.isShow = false
|
||||
this.update()
|
||||
}
|
||||
render () {
|
||||
return <div>{
|
||||
|
@ -139,6 +139,7 @@ describe('lifecycle', () => {
|
|||
static defaultProps = {
|
||||
name: 'children'
|
||||
}
|
||||
data = {}
|
||||
render (props) {
|
||||
return <div>{props.name}</div>;
|
||||
}
|
||||
|
@ -159,15 +160,16 @@ describe('lifecycle', () => {
|
|||
expect(scratch.innerHTML).to.equal('<div><div>dl</div></div>');
|
||||
});
|
||||
|
||||
it ('should render beforeUpdate', () => {
|
||||
it ('should render beforeUpdate b', () => {
|
||||
let beforeUpdateable = false;
|
||||
class M5 extends WeElement {
|
||||
static observe = true;
|
||||
|
||||
data = {
|
||||
name: 'M5'
|
||||
}
|
||||
installed () {
|
||||
this.data.name = 'dl';
|
||||
this.update()
|
||||
}
|
||||
render () {
|
||||
return <div><children name={this.data.name}></children></div>;
|
||||
|
@ -202,7 +204,6 @@ describe('lifecycle', () => {
|
|||
it ('should render afterUpdate', () => {
|
||||
let afterUpdateable = false;
|
||||
class M6 extends WeElement {
|
||||
static observe = true;
|
||||
|
||||
data = {
|
||||
name: 'M6'
|
||||
|
@ -210,6 +211,7 @@ describe('lifecycle', () => {
|
|||
|
||||
installed () {
|
||||
this.data.name = 'dl'
|
||||
this.update()
|
||||
}
|
||||
|
||||
render () {
|
||||
|
@ -249,7 +251,6 @@ describe('lifecycle', () => {
|
|||
it ('should render updated', () => {
|
||||
let updatedable = false;
|
||||
class M6 extends WeElement {
|
||||
static observe = true;
|
||||
|
||||
data = {
|
||||
name: 'M6'
|
||||
|
@ -257,6 +258,7 @@ describe('lifecycle', () => {
|
|||
|
||||
installed() {
|
||||
this.data.name = 'dl';
|
||||
this.update()
|
||||
}
|
||||
|
||||
render () {
|
||||
|
|
|
@ -47,7 +47,7 @@ describe('lifecycle', () => {
|
|||
});
|
||||
|
||||
// 测试beforeRender
|
||||
it ('should render beforeRender', () => {
|
||||
it ('should render beforeRender c', () => {
|
||||
class M2 extends WeElement {
|
||||
static observe = true
|
||||
data = {
|
||||
|
@ -114,7 +114,7 @@ describe('lifecycle', () => {
|
|||
});
|
||||
|
||||
// 测试uninstall
|
||||
it ('should render uninstall', () => {
|
||||
it ('should render uninstall c', () => {
|
||||
class M4 extends WeElement {
|
||||
static observe = true
|
||||
data = {
|
||||
|
@ -159,7 +159,7 @@ describe('lifecycle', () => {
|
|||
expect(scratch.innerHTML).to.equal('<div><div>dl</div></div>');
|
||||
});
|
||||
|
||||
it ('should render beforeUpdate', () => {
|
||||
it ('should render beforeUpdate c', () => {
|
||||
let beforeUpdateable = false;
|
||||
class M5 extends WeElement {
|
||||
static observe = true;
|
||||
|
|
Loading…
Reference in New Issue