melody-component
Advanced tools
Comparing version 1.2.0-commit.f9b4ed0d to 1.2.0-f61c830.4
405
lib/index.js
@@ -1,404 +0,1 @@ | ||
'use strict'; | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
var melodyIdom = require('melody-idom'); | ||
/** | ||
* Copyright 2017 trivago N.V. | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS-IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
/** | ||
* Utility function to add capabilities to an object. Such a capability | ||
* is usually called a "mixin" and can be either | ||
* | ||
* - an object that is merged into the prototype of `target` | ||
* - a function taking the prototype and optionally returning an object which | ||
* is merged into the prototype | ||
* - a falsy value (`false`, `null` or `undefined`) which is ignored. | ||
* This is useful for adding a capability optionally. | ||
* | ||
* @param target The constructor of a class | ||
* @param {...Mixin} mixins The mixins applied to the `target` | ||
* @returns {*} | ||
*/ | ||
function mixin(target) { | ||
var obj = typeof target === 'function' ? target.prototype : target; | ||
// If implementation proves to be too slow, rewrite to use a proper loop | ||
for (var i = 1, len = arguments.length; i < len; i++) { | ||
var _mixin = arguments[i]; | ||
_mixin && Object.assign(obj, typeof _mixin === 'function' ? _mixin(obj) : _mixin); | ||
} | ||
return target; | ||
} | ||
/** | ||
* A simple state container which is modified through actions | ||
* by using a reducer. | ||
* | ||
* When the returned state function is invoked without parameters, | ||
* it returns the current state. | ||
* | ||
* If the returned function is invoked with an action, the reducer is executed | ||
* and its return value becomes the new state. | ||
* | ||
* @param reducer | ||
* @returns {Function} | ||
*/ | ||
/** | ||
* Copyright 2017 trivago N.V. | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS-IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
function createState(reducer) { | ||
var state = reducer(undefined, { | ||
type: 'MELODY/@@INIT' | ||
}); | ||
return function store(action) { | ||
if (action) { | ||
state = reducer(state, action) || state; | ||
} | ||
return state; | ||
}; | ||
} | ||
/** | ||
* The `type` of the action which is triggered when the properties of | ||
* a component are changed. | ||
* | ||
* Actions of this type follow the "Standard Flux Action" pattern. They have | ||
* a property `type`, equal to this value, and a property `payload` which is | ||
* an object containing the new properties. | ||
* | ||
* @type {string} | ||
*/ | ||
var RECEIVE_PROPS = 'MELODY/RECEIVE_PROPS'; | ||
/** | ||
* An Action Creator which creates an {@link RECEIVE_PROPS} action. | ||
* @param payload The new properties | ||
* @param meta The component which will receive new properties | ||
* @returns ReceivePropsAction | ||
*/ | ||
/** | ||
* Copyright 2017 trivago N.V. | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS-IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
function setProps(payload, meta) { | ||
return { | ||
type: RECEIVE_PROPS, | ||
payload: payload, | ||
meta: meta | ||
}; | ||
} | ||
/** | ||
* Copyright 2017 trivago N.V. | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS-IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
var hasOwn = Object.prototype.hasOwnProperty; | ||
// based on react-redux | ||
function shallowEquals(a, b) { | ||
if (a === b) { | ||
return true; | ||
} | ||
if (!a || !b) { | ||
return false; | ||
} | ||
var keyOfA = Object.keys(a), | ||
keysOfB = Object.keys(b); | ||
if (keyOfA.length !== keysOfB.length) { | ||
return false; | ||
} | ||
for (var i = 0; i < keyOfA.length; i++) { | ||
if (!hasOwn.call(b, keyOfA[i]) || a[keyOfA[i]] !== b[keyOfA[i]]) { | ||
return false; | ||
} | ||
} | ||
return true; | ||
} | ||
// type ComponentImpl = { | ||
// /** | ||
// * The element associated with this component. | ||
// */ | ||
// el: Node, | ||
// /** | ||
// * A map of references to native HTML elements. | ||
// */ | ||
// refs: { [key: string]: Element }, | ||
// /** | ||
// * Set new properties for the Component. | ||
// * This might cause the component to request an update. | ||
// */ | ||
// apply(props: any): void, | ||
// /** | ||
// * Executed after a component has been mounted or updated. | ||
// * After this method has been triggered, the component is considered stable and | ||
// * accessing its own DOM should be safe. | ||
// * The children of this Component might not have rendered. | ||
// */ | ||
// notify(): void, | ||
// /** | ||
// * Invoked when a component should render itself. | ||
// */ | ||
// render(): void | ||
// }; | ||
function Component(element, reducer) { | ||
// part of the public API | ||
this.el = element; | ||
this.refs = Object.create(null); | ||
// needed for this type of component | ||
this.props = null; | ||
this.oldProps = null; | ||
this.oldState = null; | ||
this['MELODY/STORE'] = createState(reducer); | ||
this.isMounted = false; | ||
this.dispatch = this.dispatch.bind(this); | ||
this.getState = this.getState.bind(this); | ||
this.state = this.getState(); | ||
this.componentDidInitialize(); | ||
this.componentWillMount(); | ||
} | ||
Object.assign(Component.prototype, { | ||
/** | ||
* Set new properties for the Component. | ||
* This might cause the component to request an update. | ||
*/ | ||
apply: function apply(props) { | ||
if (!this.oldProps) { | ||
this.oldProps = this.props; | ||
} | ||
this.dispatch(setProps(props, this)); | ||
}, | ||
/** | ||
* Executed after a component has been mounted or updated. | ||
* After this method has been triggered, the component is considered stable and | ||
* accessing the DOM should be safe. | ||
* The children of this Component might not have been rendered. | ||
*/ | ||
notify: function notify() { | ||
if (this.isMounted) { | ||
this.componentDidUpdate(this.oldProps || this.props, this.oldState || this.state); | ||
if (melodyIdom.options.afterUpdate) { | ||
melodyIdom.options.afterUpdate(this); | ||
} | ||
} else { | ||
this.isMounted = true; | ||
this.componentDidMount(); | ||
if (melodyIdom.options.afterMount) { | ||
melodyIdom.options.afterMount(this); | ||
} | ||
} | ||
this.oldProps = null; | ||
this.oldState = null; | ||
}, | ||
dispatch: function dispatch(action) { | ||
var newState = this['MELODY/STORE'](action); | ||
var newProps = this.props; | ||
var isReceiveProps = action.type === RECEIVE_PROPS; | ||
if (isReceiveProps) { | ||
newProps = action.payload; | ||
} | ||
var shouldUpdate = isReceiveProps && !this.isMounted || this.el && this.shouldComponentUpdate(newProps, newState); | ||
if (shouldUpdate && this.isMounted) { | ||
this.componentWillUpdate(newProps, newState); | ||
} | ||
if (isReceiveProps) { | ||
this.props = newProps; | ||
} | ||
if (shouldUpdate) { | ||
melodyIdom.enqueueComponent(this); | ||
} | ||
return newState || this.state; | ||
}, | ||
getState: function getState() { | ||
return this['MELODY/STORE'](); | ||
}, | ||
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) { | ||
return !shallowEquals(this.state, nextState); | ||
}, | ||
/** | ||
* Invoked when a component should render itself. | ||
*/ | ||
render: function render() {}, | ||
componentDidInitialize: function componentDidInitialize() {}, | ||
componentWillMount: function componentWillMount() {}, | ||
componentDidMount: function componentDidMount() {}, | ||
componentWillUpdate: function componentWillUpdate() {}, | ||
componentDidUpdate: function componentDidUpdate(prevProps, prevState) {}, | ||
/** | ||
* Invoked before a component is unmounted. | ||
*/ | ||
componentWillUnmount: function componentWillUnmount() {} | ||
}); | ||
function mapPropsToState(state, action) { | ||
return action.type === RECEIVE_PROPS ? action.payload : state || {}; | ||
} | ||
function createComponentConstructor(Parent, parentReducer) { | ||
function ChildComponent(el, reducer) { | ||
if (!this || !(this instanceof ChildComponent)) { | ||
var EnhancedChild = createComponentConstructor(ChildComponent, parentReducer); | ||
for (var i = 0, len = arguments.length; i < len; i++) { | ||
mixin(EnhancedChild, arguments[i]); | ||
} | ||
return EnhancedChild; | ||
} | ||
Parent.call(this, el, reducer || parentReducer); | ||
} | ||
ChildComponent.prototype = Object.create(Parent.prototype, { | ||
constructor: { value: ChildComponent } | ||
}); | ||
return ChildComponent; | ||
} | ||
function createComponent(templateFnOrObj, reducer) { | ||
var template = templateFnOrObj.render ? function (props) { | ||
return templateFnOrObj.render(props); | ||
} : templateFnOrObj; | ||
var finalReducer = reducer || mapPropsToState; | ||
var ChildComponent = createComponentConstructor(Component, finalReducer); | ||
ChildComponent.prototype.displayName = template.name || template.displayName || 'Unknown'; | ||
ChildComponent.prototype.render = function () { | ||
this.oldState = this.state; | ||
this.state = this.getState(); | ||
return template(this.state); | ||
}; | ||
for (var i = 2, len = arguments.length; i < len; i++) { | ||
mixin(ChildComponent, arguments[i]); | ||
} | ||
return ChildComponent; | ||
} | ||
/** | ||
* Copyright 2017 trivago N.V. | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS-IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
function render(el, Component, props) { | ||
var result = melodyIdom.patchOuter(el, function () { | ||
melodyIdom.mount(el, Component, props); | ||
}); | ||
if (process.env.NODE_ENV === 'test') { | ||
melodyIdom.flush({ | ||
didTimeout: false, | ||
timeRemaining: function timeRemaining() { | ||
return 10; | ||
} | ||
}); | ||
} | ||
return result; | ||
} | ||
function unmountComponentAtNode(node) { | ||
if (!node) { | ||
return; | ||
} | ||
var data = node['__incrementalDOMData']; | ||
// No data? No component. | ||
if (!data) { | ||
return; | ||
} | ||
// No componentInstance? Unmounting not needed. | ||
var componentInstance = data.componentInstance; | ||
if (!componentInstance) { | ||
return; | ||
} | ||
// Tear down components | ||
melodyIdom.unmountComponent(componentInstance); | ||
// Remove node data | ||
node['__incrementalDOMData'] = undefined; | ||
} | ||
/** | ||
* Copyright 2017 trivago N.V. | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* http://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS-IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
exports.createComponent = createComponent; | ||
exports.setProps = setProps; | ||
exports.RECEIVE_PROPS = RECEIVE_PROPS; | ||
exports.render = render; | ||
exports.unmountComponentAtNode = unmountComponentAtNode; | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("melody-idom");function u(t){for(var n="function"==typeof t?t.prototype:t,e=1,o=arguments.length;e<o;e++){var i=arguments[e];i&&Object.assign(n,"function"==typeof i?i(n):i)}return t}function e(n){var e=n(void 0,{type:"MELODY/@@INIT"});return function(t){return t&&(e=n(e,t)||e),e}}var s="MELODY/RECEIVE_PROPS";function n(t,n){return{type:s,payload:t,meta:n}}var p=Object.prototype.hasOwnProperty;function o(t,n){if(t===n)return!0;if(!t||!n)return!1;var e=Object.keys(t),o=Object.keys(n);if(e.length!==o.length)return!1;for(var i=0;i<e.length;i++)if(!p.call(n,e[i])||t[e[i]]!==n[e[i]])return!1;return!0}function a(t,n){this.el=t,this.refs=Object.create(null),this.props=null,this.oldProps=null,this.oldState=null,this["MELODY/STORE"]=e(n),this.isMounted=!1,this.dispatch=this.dispatch.bind(this),this.getState=this.getState.bind(this),this.state=this.getState(),this.componentDidInitialize(),this.componentWillMount()}function h(t,n){return n.type===s?n.payload:t||{}}function c(r,s){function p(t,n){if(!(this&&this instanceof p)){for(var e=c(p,s),o=0,i=arguments.length;o<i;o++)u(e,arguments[o]);return e}r.call(this,t,n||s)}return p.prototype=Object.create(r.prototype,{constructor:{value:p}}),p}function t(n,t){var e=n.render?function(t){return n.render(t)}:n,o=c(a,t||h);o.prototype.displayName=e.name||e.displayName||"Unknown",o.prototype.render=function(){return this.oldState=this.state,this.state=this.getState(),e(this.state)};for(var i=2,r=arguments.length;i<r;i++)u(o,arguments[i]);return o}function i(t,n,e){return r.patchOuter(t,function(){r.mount(t,n,e)})}function l(t){if(t){var n=t.__incrementalDOMData;if(n){var e=n.componentInstance;e&&(r.unmountComponent(e),t.__incrementalDOMData=void 0)}}}Object.assign(a.prototype,{apply:function(t){this.oldProps||(this.oldProps=this.props),this.dispatch(n(t,this))},notify:function(){this.isMounted?(this.componentDidUpdate(this.oldProps||this.props,this.oldState||this.state),r.options.afterUpdate&&r.options.afterUpdate(this)):(this.isMounted=!0,this.componentDidMount(),r.options.afterMount&&r.options.afterMount(this)),this.oldProps=null,this.oldState=null},dispatch:function(t){var n=this["MELODY/STORE"](t),e=this.props,o=t.type===s;o&&(e=t.payload);var i=o&&!this.isMounted||this.el&&this.shouldComponentUpdate(e,n);return i&&this.isMounted&&this.componentWillUpdate(e,n),o&&(this.props=e),i&&r.enqueueComponent(this),n||this.state},getState:function(){return this["MELODY/STORE"]()},shouldComponentUpdate:function(t,n){return!o(this.state,n)},render:function(){},componentDidInitialize:function(){},componentWillMount:function(){},componentDidMount:function(){},componentWillUpdate:function(){},componentDidUpdate:function(t,n){},componentWillUnmount:function(){}}),exports.createComponent=t,exports.setProps=n,exports.RECEIVE_PROPS=s,exports.render=i,exports.unmountComponentAtNode=l; |
{ | ||
"name": "melody-component", | ||
"version": "1.2.0-commit.f9b4ed0d", | ||
"version": "1.2.0-f61c830.4+f61c830", | ||
"description": "", | ||
@@ -16,5 +16,3 @@ "main": "./lib/index.js", | ||
}, | ||
"devDependencies": { | ||
"rollup-plugin-babel": "^2.6.1" | ||
} | ||
"gitHead": "f61c8303bc847d41f4005c1c969510332ece7d1d" | ||
} |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
0
12
3
40592
788
3
1