Skip to content

Commit 0e044a1

Browse files
tbranyentbranyen
committed
Latest components build
1 parent ccc0d43 commit 0e044a1

12 files changed

Lines changed: 5845 additions & 471 deletions

File tree

‎packages/diffhtml-components/.babelrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"presets": ["es2015"]
2+
"plugins": ["add-module-exports", "transform-es2015-modules-commonjs"]
33
}

‎packages/diffhtml-components/dist/cjs/component.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
class Component {
7+
constructor(props) {
8+
const { constructor } = this;
9+
const { defaultProps = {}, propTypes = {} } = constructor;
10+
11+
this.props = assign({}, props);
12+
this.state = {};
13+
14+
if (process.env.NODE_ENV !== 'production') {
15+
Object.keys(defaultProps).forEach(prop => {
16+
if (this.props[prop] === undefined) {
17+
this.props[prop] = defaultProps[prop];
18+
}
19+
});
20+
21+
Object.keys(propTypes).forEach(prop => {
22+
const err = propTypes[prop](this.props, prop, constructor.name, 'prop');
23+
if (err) {
24+
throw err;
25+
}
26+
});
27+
}
28+
}
29+
30+
setState(newState) {
31+
this.state = freeze(assign({}, this.state, newState));
32+
33+
if (this.shouldComponentUpdate()) {
34+
this.rerender();
35+
}
36+
}
37+
38+
shouldComponentUpdate() {
39+
return true;
40+
}
41+
componentWillReceiveProps() {}
42+
componentWillMount() {}
43+
componentDidMount() {}
44+
componentDidUpdate() {}
45+
componentWillUnmount() {}
46+
componentDidUnmount() {}
47+
}
48+
exports.default = Component;
49+
module.exports = exports['default'];

‎packages/diffhtml-components/dist/cjs/index.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
7+
var _webcomponent = require('./webcomponent');
8+
9+
Object.defineProperty(exports, 'WebComponent', {
10+
enumerable: true,
11+
get: function () {
12+
return _interopRequireDefault(_webcomponent).default;
13+
}
14+
});
15+
16+
var _proptypes = require('proptypes');
17+
18+
Object.defineProperty(exports, 'PropTypes', {
19+
enumerable: true,
20+
get: function () {
21+
return _interopRequireDefault(_proptypes).default;
22+
}
23+
});
24+
25+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

‎packages/diffhtml-components/dist/cjs/webcomponent.js‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
7+
var _diffhtml = require('diffhtml');
8+
9+
const Debounce = new WeakMap();
10+
const { setPrototypeOf, freeze, assign, keys } = Object;
11+
12+
// Convert observed attributes from passed PropTypes.
13+
const getObserved = ({ propTypes }) => propTypes ? keys(propTypes) : [];
14+
15+
// Creates the `component.props` object.
16+
const createProps = domNode => {
17+
const observedAttributes = getObserved(domNode.constructor);
18+
19+
return freeze(observedAttributes.reduce((props, attr) => assign(props, {
20+
[attr]: attr in domNode ? domNode[attr] : domNode.getAttribute(attr)
21+
}), {}));
22+
};
23+
24+
// Creates the `component.state` object.
25+
const createState = (domNode, newState) => {
26+
return freeze(assign({}, domNode.state, newState));
27+
};
28+
29+
// Facilities a component re-render.
30+
const rerenderComponent = domNode => {
31+
const nextProps = createProps(domNode);
32+
33+
domNode.props = nextProps;
34+
(0, _diffhtml.innerHTML)(domNode.shadowRoot, domNode.render());
35+
domNode.componentDidUpdate();
36+
};
37+
38+
class WebComponent extends HTMLElement {
39+
static get observedAttributes() {
40+
return getObserved(this).map(key => key.toLowerCase());
41+
}
42+
43+
constructor() {
44+
super();
45+
46+
this.props = createProps(this);
47+
this.state = createState(this);
48+
this.componentWillMount();
49+
}
50+
51+
setState(newState) {
52+
this.state = assign({}, this.state, newState);
53+
54+
if (!Debounce.has(this) && this.shouldComponentUpdate()) {
55+
rerenderComponent(this);
56+
57+
Debounce.set(this, setTimeout(() => {
58+
Debounce.delete(this);
59+
rerenderComponent(this);
60+
}));
61+
}
62+
}
63+
64+
connectedCallback() {
65+
this.attachShadow({ mode: 'open' });
66+
const nextProps = createProps(this);
67+
this.componentWillReceiveProps(nextProps);
68+
rerenderComponent(this);
69+
this.componentDidMount();
70+
}
71+
72+
disconnectedCallback() {
73+
// TODO Figure out a better place for `willUnmount`, use the detached
74+
// transition to determine if a Node is removed would be very accurate
75+
// as this fires just before an element is removed, also if the user
76+
// is using a detached animation this would allow them to do something
77+
// before the animation completes, giving you two nice callbacks to use
78+
// for detaching.
79+
this.componentWillUnmount();
80+
this.componentDidUnmount();
81+
}
82+
83+
attributeChangedCallback() {
84+
if (this.shadowRoot && !Debounce.has(this)) {
85+
const nextProps = createProps(this);
86+
this.componentWillReceiveProps(nextProps);
87+
rerenderComponent(this);
88+
89+
Debounce.set(this, setTimeout(() => {
90+
Debounce.delete(this);
91+
rerenderComponent(this);
92+
}));
93+
}
94+
}
95+
96+
shouldComponentUpdate() {
97+
return true;
98+
}
99+
componentWillReceiveProps() {}
100+
componentWillMount() {}
101+
componentDidMount() {}
102+
componentDidUpdate() {}
103+
componentWillUnmount() {}
104+
componentDidUnmount() {}
105+
}exports.default = WebComponent;
106+
;
107+
module.exports = exports['default'];

0 commit comments

Comments
 (0)