DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

omis - v0.6.0 

* Remove state from components
* Fix context
This commit is contained in:
dntzhang 2019-07-24 17:32:48 +08:00
parent 33f53a49e1
commit 376d218975
19 changed files with 1468 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/omis/dist/omis.d.ts vendored
View File

@ -79,9 +79,9 @@ declare namespace Omis {
componentWillUnmount?(): void;
getChildContext?(): object;
componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean;
componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
componentDidUpdate?(previousProps: Readonly<P>, previousState: Readonly<S>, previousContext: any): void;
shouldComponentUpdate?(nextProps: Readonly<P>, nextContext: any): boolean;
componentWillUpdate?(nextProps: Readonly<P>, nextContext: any): void;
componentDidUpdate?(previousProps: Readonly<P>, previousContext: any): void;
}
abstract class Component<P, S> {
@ -90,14 +90,13 @@ declare namespace Omis {
static displayName?: string;
static defaultProps?: any;
state: Readonly<S>;
props: RenderableProps<P>;
context: any;
base?: HTMLElement;
update(callback?: () => void): void;
abstract render(props?: RenderableProps<P>, state?: Readonly<S>, context?: any): ComponentChild;
abstract render(props?: RenderableProps<P>, context?: any): ComponentChild;
// Add these variables to avoid descendants shadowing them (some from properties.json for minification)
private __key;
@ -108,7 +107,6 @@ declare namespace Omis {
private nextBase;
private prevContext;
private prevProps;
private prevState;
private __d;
private __x;
private __l;

59
packages/omis/dist/omis.dev.js vendored
View File

@ -1,5 +1,5 @@
/**
* omis v0.5.0 http://omijs.org
* omis v0.6.0 http://omijs.org
* Omi === Preact + Scoped CSS + Store System + Native Support in 3kb javascript.
* By dntzhang https://github.com/dntzhang
* Github: https://github.com/Tencent/omis
@ -824,8 +824,8 @@
}
/** The `.render()` method for a PFC backing instance. */
function doRender(props) {
return this.constructor(props, this.store);
function doRender(props, context) {
return this.constructor(props, this.store, context);
}
/**
@ -845,17 +845,15 @@
delete props.ref;
delete props.key;
if (typeof component.constructor.getDerivedStateFromProps === 'undefined') {
if (!component.base || mountAll) {
//if (component.componentWillMount) component.componentWillMount();
if (component.store.install) component.store.install();
} else {
// if (component.componentWillReceiveProps) {
// component.componentWillReceiveProps(props, context);
// }
if (component.store.receiveProps) {
component.__needUpdate_ = component.store.receiveProps(props, context);
}
if (!component.base || mountAll) {
//if (component.componentWillMount) component.componentWillMount();
if (component.store.install) component.store.install();
} else {
// if (component.componentWillReceiveProps) {
// component.componentWillReceiveProps(props, context);
// }
if (component.store.receiveProps) {
component.__needUpdate_ = component.store.receiveProps(props, context);
}
}
@ -893,10 +891,8 @@
if (component._disable) return;
var props = component.props,
state = component.state,
context = component.context,
previousProps = component.prevProps || props,
previousState = component.prevState || state,
previousContext = component.prevContext || context,
isUpdate = component.base,
nextBase = component.nextBase,
@ -908,21 +904,15 @@
inst,
cbase;
if (component.constructor.getDerivedStateFromProps) {
state = extend(extend({}, state), component.constructor.getDerivedStateFromProps(props, state));
component.state = state;
}
// if updating
if (isUpdate) {
component.props = previousProps;
component.state = previousState;
component.context = previousContext;
if (component.__needUpdate_ !== false) {
skip = false;
if (component.store.beforeUpdate) {
component.store.beforeUpdate(props, state, context);
component.store.beforeUpdate(props, context);
}
} else {
skip = true;
@ -930,11 +920,10 @@
delete component.__needUpdate_;
component.props = props;
component.state = state;
component.context = context;
}
component.prevProps = component.prevState = component.prevContext = component.nextBase = null;
component.prevProps = component.prevContext = component.nextBase = null;
component._dirty = false;
if (!skip) {
@ -942,7 +931,7 @@
if (component.store.beforeRender) {
component.store.beforeRender();
}
rendered = component.render(props, state, context);
rendered = component.render(props, context);
options.runTimeComponent = null;
// context to pass to the child, can be updated via (grand-)parent component
@ -951,7 +940,7 @@
}
if (isUpdate && component.getSnapshotBeforeUpdate) {
snapshot = component.getSnapshotBeforeUpdate(previousProps, previousState);
snapshot = component.getSnapshotBeforeUpdate(previousProps);
}
var childComponent = rendered && rendered.nodeName,
@ -1028,11 +1017,8 @@
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/Omi/issues/750
// flushMounts();
// if (component.componentDidUpdate) {
// component.componentDidUpdate(previousProps, previousState, snapshot);
// }
if (component.store.updated) {
component.store.updated(previousProps, previousState, snapshot);
component.store.updated(previousProps, snapshot);
}
if (options.afterUpdate) options.afterUpdate(component);
}
@ -1133,7 +1119,7 @@
*
* @example
* class MyFoo extends Component {
* render(props, state) {
* render(props) {
* return <div />;
* }
* }
@ -1156,12 +1142,6 @@
*/
this.props = props;
/**
* @public
* @type {object}
*/
this.state = this.state || {};
this._renderCallbacks = [];
}
@ -1180,11 +1160,10 @@
/**
* Accepts `props` and `state`, and returns a new Virtual DOM tree to build.
* Accepts `props`, and returns a new Virtual DOM tree to build.
* Virtual DOM is generally constructed via [JSX](http://jasonformat.com/wtf-is-jsx).
* @param {object} props Props (eg: JSX attributes) received from parent
* element/component
* @param {object} state The component's current state
* @param {object} context Context object, as returned by the nearest
* ancestor's `getChildContext()`
* @returns {import('./vnode').VNode | void}

2
packages/omis/dist/omis.dev.js.map vendored
View File

File diff suppressed because one or more lines are too long

59
packages/omis/dist/omis.esm.js vendored
View File

@ -1,5 +1,5 @@
/**
* omis v0.5.0 http://omijs.org
* omis v0.6.0 http://omijs.org
* Omi === Preact + Scoped CSS + Store System + Native Support in 3kb javascript.
* By dntzhang https://github.com/dntzhang
* Github: https://github.com/Tencent/omis
@ -821,8 +821,8 @@ function createComponent(Ctor, props, context) {
}
/** The `.render()` method for a PFC backing instance. */
function doRender(props) {
return this.constructor(props, this.store);
function doRender(props, context) {
return this.constructor(props, this.store, context);
}
/**
@ -842,17 +842,15 @@ function setComponentProps(component, props, renderMode, context, mountAll) {
delete props.ref;
delete props.key;
if (typeof component.constructor.getDerivedStateFromProps === 'undefined') {
if (!component.base || mountAll) {
//if (component.componentWillMount) component.componentWillMount();
if (component.store.install) component.store.install();
} else {
// if (component.componentWillReceiveProps) {
// component.componentWillReceiveProps(props, context);
// }
if (component.store.receiveProps) {
component.__needUpdate_ = component.store.receiveProps(props, context);
}
if (!component.base || mountAll) {
//if (component.componentWillMount) component.componentWillMount();
if (component.store.install) component.store.install();
} else {
// if (component.componentWillReceiveProps) {
// component.componentWillReceiveProps(props, context);
// }
if (component.store.receiveProps) {
component.__needUpdate_ = component.store.receiveProps(props, context);
}
}
@ -890,10 +888,8 @@ function renderComponent(component, renderMode, mountAll, isChild) {
if (component._disable) return;
var props = component.props,
state = component.state,
context = component.context,
previousProps = component.prevProps || props,
previousState = component.prevState || state,
previousContext = component.prevContext || context,
isUpdate = component.base,
nextBase = component.nextBase,
@ -905,21 +901,15 @@ function renderComponent(component, renderMode, mountAll, isChild) {
inst,
cbase;
if (component.constructor.getDerivedStateFromProps) {
state = extend(extend({}, state), component.constructor.getDerivedStateFromProps(props, state));
component.state = state;
}
// if updating
if (isUpdate) {
component.props = previousProps;
component.state = previousState;
component.context = previousContext;
if (component.__needUpdate_ !== false) {
skip = false;
if (component.store.beforeUpdate) {
component.store.beforeUpdate(props, state, context);
component.store.beforeUpdate(props, context);
}
} else {
skip = true;
@ -927,11 +917,10 @@ function renderComponent(component, renderMode, mountAll, isChild) {
delete component.__needUpdate_;
component.props = props;
component.state = state;
component.context = context;
}
component.prevProps = component.prevState = component.prevContext = component.nextBase = null;
component.prevProps = component.prevContext = component.nextBase = null;
component._dirty = false;
if (!skip) {
@ -939,7 +928,7 @@ function renderComponent(component, renderMode, mountAll, isChild) {
if (component.store.beforeRender) {
component.store.beforeRender();
}
rendered = component.render(props, state, context);
rendered = component.render(props, context);
options.runTimeComponent = null;
// context to pass to the child, can be updated via (grand-)parent component
@ -948,7 +937,7 @@ function renderComponent(component, renderMode, mountAll, isChild) {
}
if (isUpdate && component.getSnapshotBeforeUpdate) {
snapshot = component.getSnapshotBeforeUpdate(previousProps, previousState);
snapshot = component.getSnapshotBeforeUpdate(previousProps);
}
var childComponent = rendered && rendered.nodeName,
@ -1025,11 +1014,8 @@ function renderComponent(component, renderMode, mountAll, isChild) {
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/Omi/issues/750
// flushMounts();
// if (component.componentDidUpdate) {
// component.componentDidUpdate(previousProps, previousState, snapshot);
// }
if (component.store.updated) {
component.store.updated(previousProps, previousState, snapshot);
component.store.updated(previousProps, snapshot);
}
if (options.afterUpdate) options.afterUpdate(component);
}
@ -1130,7 +1116,7 @@ function unmountComponent(component) {
*
* @example
* class MyFoo extends Component {
* render(props, state) {
* render(props) {
* return <div />;
* }
* }
@ -1153,12 +1139,6 @@ function Component(props, context) {
*/
this.props = props;
/**
* @public
* @type {object}
*/
this.state = this.state || {};
this._renderCallbacks = [];
}
@ -1177,11 +1157,10 @@ extend(Component.prototype, {
/**
* Accepts `props` and `state`, and returns a new Virtual DOM tree to build.
* Accepts `props`, and returns a new Virtual DOM tree to build.
* Virtual DOM is generally constructed via [JSX](http://jasonformat.com/wtf-is-jsx).
* @param {object} props Props (eg: JSX attributes) received from parent
* element/component
* @param {object} state The component's current state
* @param {object} context Context object, as returned by the nearest
* ancestor's `getChildContext()`
* @returns {import('./vnode').VNode | void}

2
packages/omis/dist/omis.esm.js.map vendored
View File

File diff suppressed because one or more lines are too long

25
packages/omis/dist/omis.js vendored
View File

@ -272,8 +272,8 @@
}
return inst;
}
function doRender(props) {
return this.constructor(props, this.store);
function doRender(props, context) {
return this.constructor(props, this.store, context);
}
function setComponentProps(component, props, renderMode, context, mountAll) {
if (!component.__x) {
@ -282,7 +282,7 @@
component.__k = props.key;
delete props.ref;
delete props.key;
if (void 0 === component.constructor.getDerivedStateFromProps) if (!component.base || mountAll) {
if (!component.base || mountAll) {
if (component.store.install) component.store.install();
} else if (component.store.receiveProps) component.R = component.store.receiveProps(props, context);
if (context && context !== component.context) {
@ -298,33 +298,27 @@
}
function renderComponent(component, renderMode, mountAll, isChild) {
if (!component.__x) {
var rendered, inst, cbase, props = component.props, state = component.state, context = component.context, previousProps = component.__p || props, previousState = component.__s || state, previousContext = component.__c || context, isUpdate = component.base, nextBase = component.__b, initialBase = isUpdate || nextBase, initialChildComponent = component._component, skip = !1, snapshot = previousContext;
if (component.constructor.getDerivedStateFromProps) {
state = extend(extend({}, state), component.constructor.getDerivedStateFromProps(props, state));
component.state = state;
}
var rendered, inst, cbase, props = component.props, context = component.context, previousProps = component.__p || props, previousContext = component.__c || context, isUpdate = component.base, nextBase = component.__b, initialBase = isUpdate || nextBase, initialChildComponent = component._component, skip = !1, snapshot = previousContext;
if (isUpdate) {
component.props = previousProps;
component.state = previousState;
component.context = previousContext;
if (!1 !== component.R) {
skip = !1;
if (component.store.beforeUpdate) component.store.beforeUpdate(props, state, context);
if (component.store.beforeUpdate) component.store.beforeUpdate(props, context);
} else skip = !0;
delete component.R;
component.props = props;
component.state = state;
component.context = context;
}
component.__p = component.__s = component.__c = component.__b = null;
component.__p = component.__c = component.__b = null;
component.__d = !1;
if (!skip) {
options.runTimeComponent = component;
if (component.store.beforeRender) component.store.beforeRender();
rendered = component.render(props, state, context);
rendered = component.render(props, context);
options.runTimeComponent = null;
if (component.getChildContext) context = extend(extend({}, context), component.getChildContext());
if (isUpdate && component.getSnapshotBeforeUpdate) snapshot = component.getSnapshotBeforeUpdate(previousProps, previousState);
if (isUpdate && component.getSnapshotBeforeUpdate) snapshot = component.getSnapshotBeforeUpdate(previousProps);
var toUnmount, base, childComponent = rendered && rendered.nodeName;
if ('function' == typeof childComponent) {
var childProps = getNodeProps(rendered);
@ -367,7 +361,7 @@
}
}
if (!isUpdate || mountAll) mounts.push(component); else if (!skip) {
if (component.store.updated) component.store.updated(previousProps, previousState, snapshot);
if (component.store.updated) component.store.updated(previousProps, snapshot);
if (options.afterUpdate) options.afterUpdate(component);
}
while (component.__h.length) component.__h.pop().call(component);
@ -421,7 +415,6 @@
this.context = context;
this.store = {};
this.props = props;
this.state = this.state || {};
this.__h = [];
}
function render(vnode, parent, merge) {

2
packages/omis/dist/omis.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
packages/omis/dist/omis.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
packages/omis/dist/omis.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

1291
packages/omis/examples/context/b.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
packages/omis/examples/context/b.js.map Normal file
View File

File diff suppressed because one or more lines are too long

10
packages/omis/examples/context/index.html Normal file
View File

@ -0,0 +1,10 @@
<html>
<head></head>
<body>
<script src="b.js"></script>
</body>
</html>

55
packages/omis/examples/context/main.js Normal file
View File

@ -0,0 +1,55 @@
import { render, h } from '../../src/omis'
const Counter = (props, store, context) => {
console.log(context)
return (
<div>
<button onClick={store.sub}>-</button>
<span>{store.count}</span>
<button onClick={store.add}>+</button>
</div>
)
}
Counter.store = _ => {
return {
count: 1,
add(e) {
this.count++
this.update()
_.props.onChange(this.count)
},
sub() {
this.count--
this.update()
_.props.onChange(this.count)
}
}
}
const App = (props, store) => {
return (
<div>
<div>Count from child event: {store.context.a}</div>
<Counter onChange={store.changeHandle}></Counter>
</div>
)
}
App.store = _ => ({
count: null,
context: { a: 111 },
install(){
_.getChildContext = ()=>{
return this.context
}
},
changeHandle(count) {
_.store.count = count
_.update()
}
})
render(<App />, 'body')

2
packages/omis/package.json
View File

@ -1,6 +1,6 @@
{
"name": "omis",
"version": "0.5.0",
"version": "0.6.0",
"description": "Functional Component with store, scoped css and easy hyperscript.",
"main": "dist/omis.js",
"jsnext:main": "dist/omis.esm.js",

11
packages/omis/src/component.js
View File

@ -11,7 +11,7 @@ import { renderComponent } from './vdom/component';
*
* @example
* class MyFoo extends Component {
* render(props, state) {
* render(props) {
* return <div />;
* }
* }
@ -34,12 +34,6 @@ export function Component(props, context) {
*/
this.props = props;
/**
* @public
* @type {object}
*/
this.state = this.state || {};
this._renderCallbacks = [];
}
@ -58,11 +52,10 @@ extend(Component.prototype, {
},
/**
* Accepts `props` and `state`, and returns a new Virtual DOM tree to build.
* Accepts `props`, and returns a new Virtual DOM tree to build.
* Virtual DOM is generally constructed via [JSX](http://jasonformat.com/wtf-is-jsx).
* @param {object} props Props (eg: JSX attributes) received from parent
* element/component
* @param {object} state The component's current state
* @param {object} context Context object, as returned by the nearest
* ancestor's `getChildContext()`
* @returns {import('./vnode').VNode | void}

10
packages/omis/src/omis.d.ts vendored
View File

@ -79,9 +79,9 @@ declare namespace Omis {
componentWillUnmount?(): void;
getChildContext?(): object;
componentWillReceiveProps?(nextProps: Readonly<P>, nextContext: any): void;
shouldComponentUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean;
componentWillUpdate?(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): void;
componentDidUpdate?(previousProps: Readonly<P>, previousState: Readonly<S>, previousContext: any): void;
shouldComponentUpdate?(nextProps: Readonly<P>, nextContext: any): boolean;
componentWillUpdate?(nextProps: Readonly<P>, nextContext: any): void;
componentDidUpdate?(previousProps: Readonly<P>, previousContext: any): void;
}
abstract class Component<P, S> {
@ -90,14 +90,13 @@ declare namespace Omis {
static displayName?: string;
static defaultProps?: any;
state: Readonly<S>;
props: RenderableProps<P>;
context: any;
base?: HTMLElement;
update(callback?: () => void): void;
abstract render(props?: RenderableProps<P>, state?: Readonly<S>, context?: any): ComponentChild;
abstract render(props?: RenderableProps<P>, context?: any): ComponentChild;
// Add these variables to avoid descendants shadowing them (some from properties.json for minification)
private __key;
@ -108,7 +107,6 @@ declare namespace Omis {
private nextBase;
private prevContext;
private prevProps;
private prevState;
private __d;
private __x;
private __l;

4
packages/omis/src/vdom/component-recycler.js
View File

@ -40,6 +40,6 @@ export function createComponent(Ctor, props, context) {
/** The `.render()` method for a PFC backing instance. */
function doRender(props) {
return this.constructor(props, this.store);
function doRender(props, context) {
return this.constructor(props, this.store, context);
}

46
packages/omis/src/vdom/component.js
View File

@ -24,21 +24,19 @@ export function setComponentProps(component, props, renderMode, context, mountAl
delete props.ref;
delete props.key;
if (typeof component.constructor.getDerivedStateFromProps === 'undefined') {
if (!component.base || mountAll) {
//if (component.componentWillMount) component.componentWillMount();
if (component.store.install) component.store.install()
}
else {
// if (component.componentWillReceiveProps) {
// component.componentWillReceiveProps(props, context);
// }
if (component.store.receiveProps) {
component.__needUpdate_ = component.store.receiveProps(props, context)
}
if (!component.base || mountAll) {
//if (component.componentWillMount) component.componentWillMount();
if (component.store.install) component.store.install()
}
else {
// if (component.componentWillReceiveProps) {
// component.componentWillReceiveProps(props, context);
// }
if (component.store.receiveProps) {
component.__needUpdate_ = component.store.receiveProps(props, context)
}
}
if (context && context!==component.context) {
if (!component.prevContext) component.prevContext = component.context;
component.context = context;
@ -76,10 +74,8 @@ export function renderComponent(component, renderMode, mountAll, isChild) {
if (component._disable) return;
let props = component.props,
state = component.state,
context = component.context,
previousProps = component.prevProps || props,
previousState = component.prevState || state,
previousContext = component.prevContext || context,
isUpdate = component.base,
nextBase = component.nextBase,
@ -89,21 +85,15 @@ export function renderComponent(component, renderMode, mountAll, isChild) {
snapshot = previousContext,
rendered, inst, cbase;
if (component.constructor.getDerivedStateFromProps) {
state = extend(extend({}, state), component.constructor.getDerivedStateFromProps(props, state));
component.state = state;
}
// if updating
if (isUpdate) {
component.props = previousProps;
component.state = previousState;
component.context = previousContext;
if (component.__needUpdate_ !== false) {
skip = false
if (component.store.beforeUpdate) {
component.store.beforeUpdate(props, state, context)
component.store.beforeUpdate(props, context)
}
} else {
skip = true
@ -111,11 +101,10 @@ export function renderComponent(component, renderMode, mountAll, isChild) {
delete component.__needUpdate_
component.props = props;
component.state = state;
component.context = context;
}
component.prevProps = component.prevState = component.prevContext = component.nextBase = null;
component.prevProps = component.prevContext = component.nextBase = null;
component._dirty = false;
if (!skip) {
@ -123,7 +112,7 @@ export function renderComponent(component, renderMode, mountAll, isChild) {
if(component.store.beforeRender){
component.store.beforeRender()
}
rendered = component.render(props, state, context);
rendered = component.render(props, context);
options.runTimeComponent = null
// context to pass to the child, can be updated via (grand-)parent component
@ -132,7 +121,7 @@ export function renderComponent(component, renderMode, mountAll, isChild) {
}
if (isUpdate && component.getSnapshotBeforeUpdate) {
snapshot = component.getSnapshotBeforeUpdate(previousProps, previousState);
snapshot = component.getSnapshotBeforeUpdate(previousProps);
}
let childComponent = rendered && rendered.nodeName,
@ -211,11 +200,8 @@ export function renderComponent(component, renderMode, mountAll, isChild) {
// Note: disabled as it causes duplicate hooks, see https://github.com/developit/Omi/issues/750
// flushMounts();
// if (component.componentDidUpdate) {
// component.componentDidUpdate(previousProps, previousState, snapshot);
// }
if (component.store.updated) {
component.store.updated(previousProps, previousState, snapshot);
component.store.updated(previousProps, snapshot);
}
if (options.afterUpdate) options.afterUpdate(component);
}

30
packages/omis/test/browser/context.js Normal file
View File

@ -0,0 +1,30 @@
import {
render, h
} from '../../src/omis'
describe('context', () => {
let scratch
//const Empty = () => null
before(() => {
scratch = document.createElement('div')
; (document.body || document.documentElement).appendChild(scratch)
})
beforeEach(() => {
//let c = scratch.firstElementChild;
//if (c) render(<Empty />, scratch, { merge: c })
scratch.innerHTML = ''
})
after(() => {
scratch.parentNode.removeChild(scratch)
scratch = null
})
it('simple test', () => {
expect(1).to.deep.equal(1)
})
})