refactor: remove state, data, observe, tick, nextTick, ModelView from omi

This commit is contained in:
dntzhang 2019-09-26 10:28:15 +08:00
parent fee8d6e22f
commit 1e161ec7b9
13 changed files with 34 additions and 104 deletions

View File

@ -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;

View File

@ -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",

View File

@ -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)

View File

@ -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
}
}

View File

@ -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()
}
})
}

View File

@ -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>(

View File

@ -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,

View File

@ -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){

View File

@ -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)
}

View File

@ -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)
}

View File

@ -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',

View File

@ -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 () {

View File

@ -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;