├── .babelrc
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── README.md
├── index.html
├── index.js
├── package-lock.json
├── package.json
├── src
├── MVR.js
└── MVRDom.js
├── test.html
├── test
├── ComponentTests.js
├── KeysTests.js
└── LifecycleTests.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |
3 | "plugins": ["transform-runtime", "transform-class-properties"],
4 |
5 | "presets": ["es2015"]
6 |
7 | }
8 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | "extends": "airbnb",
3 | "plugins": [
4 | "react",
5 | "jsx-a11y",
6 | "import"
7 | ],
8 | "globals": {
9 | document: true,
10 | window: true,
11 | describe: true,
12 | it: true,
13 | before: true,
14 | beforeEach: true,
15 | after: true,
16 | sinon: true,
17 | expect: true
18 | },
19 | "rules": {
20 | "react/jsx-no-bind": [0],
21 | "react/prop-types": [0],
22 | "react/no-multi-comp": [0],
23 | "react/prefer-stateless-function": [0],
24 | "react/style-prop-object": [0],
25 | indent: ["error", 4],
26 | "comma-dangle": ["error", {
27 | "arrays": "never",
28 | "objects": "never",
29 | "imports": "never",
30 | "exports": "never",
31 | "functions": "never"
32 | }],
33 | "max-len": [0],
34 | "no-param-reassign": [0],
35 | "no-console": [0],
36 | "no-underscore-dangle": [0],
37 | "no-else-return": [0],
38 | "new-cap": [0],
39 | "no-lonely-if": [0],
40 | "one-var": [0],
41 | "no-plusplus": [0]
42 | }
43 | };
44 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | lib
4 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | src
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ### Minimum Viable React
2 |
3 | A ~500 line React style framework I created to better understand VDOM.
4 | [Read more here](https://www.vividbytes.io/Minimum-Viable-React_Part-1/)
5 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Todo App
5 |
11 |
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | MVR: require('./lib/MVR').default,
3 | MVRDom: require('./lib/MVRDom').default
4 | };
5 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "minimum-viable-react",
3 | "version": "0.0.3",
4 | "description": "A minimal React type framework",
5 | "repository": {
6 | "type": "git",
7 | "url": "https://github.com/vividbytes/MinimumViableReact.git"
8 | },
9 | "devDependencies": {
10 | "chai": "^3.4.1",
11 | "mocha": "^3.0.1",
12 | "babel": "^6.5.2",
13 | "sinon": "^2.2.0",
14 | "sinon-chai": "^2.8.0",
15 | "babel-core": "^6.22.1",
16 | "babel-eslint": "^7.1.1",
17 | "babel-loader": "^6.2.10",
18 | "babel-plugin-transform-class-properties": "^6.22.0",
19 | "babel-plugin-transform-runtime": "^6.22.0",
20 | "babel-preset-es2015": "^6.22.0",
21 | "babel-preset-react": "^6.22.0",
22 | "babel-preset-stage-0": "^6.22.0",
23 | "eslint": "^3.14.1",
24 | "eslint-config-airbnb": "^14.0.0",
25 | "eslint-plugin-import": "^2.2.0",
26 | "eslint-plugin-jsx-a11y": "^3.0.2",
27 | "eslint-plugin-react": "^6.9.0",
28 | "webpack": "^1.14.0"
29 | },
30 | "dependencies": {
31 | "babel-runtime": "^6.22.0"
32 | },
33 | "scripts": {
34 | "prepublish": "node_modules/.bin/babel -d lib src --copy-files"
35 | },
36 | "author": "vividbytes",
37 | "license": "MIT"
38 | }
39 |
--------------------------------------------------------------------------------
/src/MVR.js:
--------------------------------------------------------------------------------
1 | function flatten(arr) {
2 | return arr.reduce((flat, toFlatten) =>
3 | flat.concat(Array.isArray(toFlatten) ?
4 | flatten(toFlatten) :
5 | toFlatten
6 | )
7 | , []);
8 | }
9 |
10 | const createElement = (type, attributes = {}, children = []) => {
11 | const childElements = flatten(children).map(child => (
12 | typeof child === 'string' ?
13 | createElement('text', { textContent: child }) :
14 | child
15 | )).filter(child => child);
16 |
17 | return {
18 | type,
19 | children: childElements,
20 | props: Object.assign(
21 | { children: childElements },
22 | attributes
23 | )
24 | };
25 | };
26 |
27 | class Component {
28 | constructor(props) {
29 | this.props = props || {};
30 | this.state = {};
31 | this.onStateChange = () => {};
32 | this._domElement = null;
33 | }
34 |
35 | componentWillMount() {}
36 |
37 | componentDidMount() {}
38 |
39 | componentWillReceiveProps() {}
40 |
41 | shouldComponentUpdate() { return true; }
42 |
43 | componentWillUpdate() {}
44 |
45 | componentDidUpdate() {}
46 |
47 | componentWillUnmount() {}
48 |
49 | setState(newState) {
50 | const prevState = this.state;
51 | const nextState = Object.assign({}, prevState || {}, newState);
52 | this.onStateChange(this, nextState);
53 | }
54 |
55 | setStateCallback(cb) {
56 | this.onStateChange = cb;
57 | }
58 |
59 | setChild(component) {
60 | this._child = component;
61 | component._parentComponent = this;
62 | }
63 |
64 | getDomElement() {
65 | return this._domElement;
66 | }
67 |
68 | setDomElement(domElement) {
69 | this._domElement = domElement;
70 | }
71 |
72 | getChild() {
73 | return this._child;
74 | }
75 |
76 | getRoot() {
77 | let component = this;
78 | let res;
79 | while (component) {
80 | res = component;
81 | component = component._parentComponent;
82 | }
83 | return res;
84 | }
85 |
86 | updateProps(newProps) {
87 | this.props = newProps;
88 | }
89 |
90 | updateState(newState) {
91 | this.state = newState;
92 | }
93 |
94 | render() {}
95 | }
96 |
97 | export default {
98 | createElement,
99 | Component
100 | };
101 |
--------------------------------------------------------------------------------
/src/MVRDom.js:
--------------------------------------------------------------------------------
1 | const Reconciler = {
2 |
3 | diff: (virtualElement, container, oldDomElement, parentComponent) => {
4 | const oldVirtualElement = oldDomElement && oldDomElement._virtualElement;
5 | const oldComponent = oldVirtualElement && oldVirtualElement.component;
6 |
7 | if (typeof virtualElement.type === 'function') {
8 | Reconciler.diffComponent(virtualElement, oldComponent, container, oldDomElement, parentComponent);
9 | } else if (
10 | oldVirtualElement &&
11 | oldVirtualElement.type === virtualElement.type &&
12 | oldComponent === virtualElement.component
13 | ) {
14 | if (oldVirtualElement.type === 'text') {
15 | Reconciler.updateTextNode(oldDomElement, virtualElement, oldVirtualElement);
16 | } else {
17 | Reconciler.updateDomElement(oldDomElement, virtualElement, oldVirtualElement);
18 | }
19 |
20 | // save the virtualElement on the domElement
21 | // so that we can retrieve it next time
22 | oldDomElement._virtualElement = virtualElement;
23 |
24 | Reconciler.diffList(virtualElement.children, oldDomElement);
25 | } else {
26 | Reconciler.mountElement(virtualElement, container, oldDomElement);
27 | }
28 | },
29 |
30 | getKey: (virtualElement) => {
31 | if (!virtualElement) { return undefined; }
32 |
33 | const component = virtualElement.component;
34 |
35 | return component ? component.props.key : virtualElement.props.key;
36 | },
37 |
38 | diffList: (virtualElements, parentDomElement) => {
39 | const keyedElements = {};
40 | const unkeyedElements = [];
41 |
42 | for (let i = 0; i < parentDomElement.childNodes.length; i += 1) {
43 | const domElement = parentDomElement.childNodes[i];
44 | const key = Reconciler.getKey(domElement._virtualElement);
45 |
46 | if (key) {
47 | keyedElements[key] = domElement;
48 | } else {
49 | unkeyedElements.push(domElement);
50 | }
51 | }
52 |
53 | let unkeyedIndex = 0;
54 | virtualElements.forEach((virtualElement, i) => {
55 | const key = virtualElement.props.key;
56 | if (key) {
57 | const keyedDomElement = keyedElements[key];
58 | if (keyedDomElement) {
59 | // move to correct location
60 | if (
61 | parentDomElement.childNodes[i] &&
62 | !parentDomElement.childNodes[i].isSameNode(keyedDomElement)
63 | ) {
64 | if (parentDomElement.childNodes[i]) {
65 | parentDomElement.insertBefore(
66 | keyedDomElement,
67 | parentDomElement.childNodes[i]
68 | );
69 | } else {
70 | parentDomElement.append(keyedDomElement);
71 | }
72 | }
73 |
74 | Reconciler.diff(virtualElement, parentDomElement, keyedDomElement);
75 | } else {
76 | const placeholder = document.createElement('span');
77 | if (parentDomElement.childNodes[i]) {
78 | parentDomElement.insertBefore(placeholder, parentDomElement.childNodes[i]);
79 | } else {
80 | parentDomElement.append(placeholder);
81 | }
82 | Reconciler.mountElement(virtualElement, parentDomElement, placeholder);
83 | }
84 | } else {
85 | const unkeyedDomElement = unkeyedElements[unkeyedIndex];
86 | if (unkeyedElements) {
87 | if (
88 | parentDomElement.childNodes[i] &&
89 | !parentDomElement.childNodes[i].isSameNode(unkeyedDomElement)
90 | ) {
91 | if (parentDomElement.childNodes[i]) {
92 | parentDomElement.insertBefore(
93 | unkeyedDomElement,
94 | parentDomElement.childNodes[i]
95 | );
96 | } else {
97 | parentDomElement.append(unkeyedDomElement);
98 | }
99 | }
100 |
101 | Reconciler.diff(virtualElement, parentDomElement, unkeyedDomElement);
102 | } else {
103 | const placeholder = document.createElement('span');
104 | if (parentDomElement.childNodes[i]) {
105 | parentDomElement.insertBefore(placeholder, parentDomElement.childNodes[i]);
106 | } else {
107 | parentDomElement.append(placeholder);
108 | }
109 | Reconciler.mountElement(virtualElement, parentDomElement, placeholder);
110 | }
111 | unkeyedIndex += 1;
112 | }
113 | });
114 |
115 |
116 | // remove extra children
117 | const oldChildren = parentDomElement.childNodes;
118 | while (oldChildren.length > virtualElements.length) {
119 | Reconciler.unmountNode(oldChildren[virtualElements.length]);
120 | }
121 | },
122 |
123 | diffComponent: (newVirtualElement, oldComponent, container, domElement, parentComponent) => {
124 | if (
125 | oldComponent &&
126 | newVirtualElement.type === oldComponent.constructor
127 | ) {
128 | oldComponent.componentWillReceiveProps(newVirtualElement.props);
129 |
130 | if (oldComponent.shouldComponentUpdate(newVirtualElement.props)) {
131 | const prevProps = oldComponent.props;
132 | oldComponent.componentWillUpdate(newVirtualElement.props, oldComponent.state);
133 |
134 | // update component
135 | oldComponent.updateProps(newVirtualElement.props);
136 | const nextElement = oldComponent.render();
137 | nextElement.component = parentComponent || oldComponent;
138 |
139 | const childComponent = oldComponent.getChild();
140 |
141 | if (childComponent) {
142 | Reconciler.diffComponent(
143 | nextElement,
144 | childComponent,
145 | container,
146 | domElement,
147 | oldComponent
148 | );
149 | } else {
150 | Reconciler.diff(nextElement, container, domElement, oldComponent);
151 | }
152 |
153 | oldComponent.componentDidUpdate(prevProps);
154 | }
155 | } else {
156 | let component = oldComponent;
157 | while (component) {
158 | component.componentWillUnmount();
159 | component._didUnmount = true;
160 | component.setDomElement(null);
161 | component = component.getChild();
162 | }
163 |
164 | Reconciler.mountElement(newVirtualElement, container, domElement, parentComponent);
165 | }
166 | },
167 |
168 | unmountNode: (domElement, parentComponent) => {
169 | const virtualElement = domElement._virtualElement;
170 | if (!virtualElement) {
171 | domElement.remove();
172 | return;
173 | }
174 |
175 | if (!parentComponent) {
176 | let component = virtualElement.component;
177 | while (component && !component._didUnmount) {
178 | component.componentWillUnmount();
179 | component.setDomElement(undefined);
180 | component = component.getChild();
181 | }
182 | }
183 |
184 | while (domElement.childNodes.length > 0) {
185 | Reconciler.unmountNode(domElement.firstChild);
186 | }
187 |
188 | if (virtualElement.props.ref) {
189 | virtualElement.props.ref(null);
190 | }
191 |
192 | Object.keys(virtualElement.props).forEach((propName) => {
193 | if (propName.slice(0, 2) === 'on') {
194 | const event = propName.toLowerCase().slice(2);
195 | const handler = virtualElement.props[propName];
196 | domElement.removeEventListener(event, handler);
197 | }
198 | });
199 |
200 | domElement.remove();
201 | },
202 |
203 | updateTextNode: (domElement, newVirtualElement, oldVirtualElement) => {
204 | if (newVirtualElement.props.textContent !== oldVirtualElement.props.textContent) {
205 | domElement.textContent = newVirtualElement.props.textContent;
206 | }
207 |
208 | // save the virtualElement on the domElement
209 | // so that we can retrieve it next time
210 | domElement._virtualElement = newVirtualElement;
211 | },
212 |
213 | updateDomElement: (domElement, newVirtualElement, oldVirtualElement = {}) => {
214 | const newProps = newVirtualElement.props;
215 | const oldProps = oldVirtualElement.props || {};
216 |
217 | Object.keys(newProps).forEach((propName) => {
218 | const newProp = newProps[propName];
219 | const oldProp = oldProps[propName];
220 |
221 | if (newProp !== oldProp) {
222 | if (propName.slice(0, 2) === 'on') {
223 | // prop is an event handler
224 | const eventName = propName.toLowerCase().slice(2);
225 | domElement.addEventListener(eventName, newProp, false);
226 | if (oldProp) {
227 | domElement.removeEventListener(eventName, oldProp, false);
228 | }
229 | } else if (propName === 'value' || propName === 'checked') {
230 | // this are special attributes that cannot be set
231 | // using setAttribute
232 | domElement[propName] = newProp;
233 | } else if (propName !== 'key' && propName !== 'children') { // ignore the 'children' prop
234 | domElement.setAttribute(propName, newProps[propName]);
235 | }
236 | }
237 | });
238 |
239 | // remove oldProps
240 | Object.keys(oldProps).forEach((propName) => {
241 | const newProp = newProps[propName];
242 | const oldProp = oldProps[propName];
243 |
244 | if (!newProp) {
245 | if (propName.slice(0, 2) === 'on') {
246 | // prop is an event handler
247 | domElement.removeEventListener(propName, oldProp, false);
248 | } else if (propName !== 'children') { // ignore the 'children' prop
249 | domElement.removeAttribute(propName);
250 | }
251 | }
252 | });
253 | },
254 |
255 | mountComponent: (virtualElement, container, oldDomElement, parentComponent) => {
256 | const component = new virtualElement.type(virtualElement.props);
257 | component.setStateCallback(Reconciler.handleComponentStateChange);
258 |
259 | const nextElement = component.render();
260 |
261 | if (parentComponent) {
262 | const root = parentComponent.getRoot();
263 | nextElement.component = root;
264 | parentComponent.setChild(component);
265 | } else {
266 | nextElement.component = component;
267 | }
268 |
269 | component.componentWillMount();
270 |
271 | if (typeof nextElement.type === 'function') {
272 | Reconciler.mountComponent(nextElement, container, oldDomElement, component);
273 | } else {
274 | Reconciler.mountElement(nextElement, container, oldDomElement, parentComponent);
275 | }
276 |
277 | component.componentDidMount();
278 |
279 | if (component.props.ref) {
280 | component.props.ref(component);
281 | }
282 | },
283 |
284 | handleComponentStateChange(component, nextState) {
285 | const prevState = component.state;
286 | if (component.shouldComponentUpdate(component.props, nextState)) {
287 | component.componentWillUpdate(component.props, nextState);
288 | component.updateState(nextState);
289 |
290 | const nextElement = component.render();
291 | nextElement.component = component.getRoot();
292 |
293 | // start the normal diffing process here
294 | const domElement = component.getDomElement();
295 | const container = domElement.parentNode;
296 | const childComponent = component.getChild();
297 | if (childComponent) {
298 | Reconciler.diffComponent(
299 | nextElement,
300 | childComponent,
301 | container,
302 | domElement,
303 | component
304 | );
305 | } else {
306 | Reconciler.diff(nextElement, container, domElement, component);
307 | }
308 |
309 | component.componentDidUpdate(component.props, prevState);
310 | }
311 | },
312 |
313 | mountSimpleNode: (virtualElement, container, oldDomElement, parentComponent) => {
314 | let newDomElement;
315 | const nextSibling = oldDomElement && oldDomElement.nextSibling;
316 |
317 | if (virtualElement.type === 'text') {
318 | newDomElement = document.createTextNode(virtualElement.props.textContent);
319 | } else {
320 | newDomElement = document.createElement(virtualElement.type);
321 | // set dom-node attributes
322 | Reconciler.updateDomElement(newDomElement, virtualElement);
323 | }
324 |
325 | // save the virtualElement on the domElement
326 | // so that we can retrieve it next time
327 | newDomElement._virtualElement = virtualElement;
328 |
329 | // remove the old node from the dom if one exists
330 | if (oldDomElement) {
331 | Reconciler.unmountNode(oldDomElement, parentComponent);
332 | }
333 |
334 | // add the newly created node to the dom
335 | if (nextSibling) {
336 | container.insertBefore(newDomElement, nextSibling);
337 | } else {
338 | container.appendChild(newDomElement);
339 | }
340 |
341 | // add reference to domElement into component
342 | let component = virtualElement.component;
343 | while (component) {
344 | component.setDomElement(newDomElement);
345 | component = component.getChild();
346 | }
347 |
348 | // recursively call mountElement with all child virtualElements
349 | virtualElement.children.forEach((childElement) => {
350 | Reconciler.mountElement(childElement, newDomElement);
351 | });
352 |
353 | if (virtualElement.props.ref) {
354 | virtualElement.props.ref(newDomElement);
355 | }
356 | },
357 |
358 | mountElement: (virtualElement, container, oldDomElement, parentComponent) => {
359 | if (typeof virtualElement.type === 'function') {
360 | Reconciler.mountComponent(virtualElement, container, oldDomElement, parentComponent);
361 | } else {
362 | Reconciler.mountSimpleNode(virtualElement, container, oldDomElement, parentComponent);
363 | }
364 | }
365 | };
366 |
367 | export default {
368 |
369 | render: (virtualElement, container) => {
370 | Reconciler.diff(virtualElement, container, container.firstChild);
371 | }
372 |
373 | };
374 |
375 |
--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Mocha Tests
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/test/ComponentTests.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-expressions */
2 | /* eslint-disable no-bitwise */
3 | /* eslint-disable class-methods-use-this */
4 |
5 | import sinon from 'sinon';
6 | import chai from 'chai';
7 | import sinonChai from 'sinon-chai';
8 | import MVR from '../src/part4/MVR';
9 | import MVRDom from '../src/part4/MVRDom';
10 |
11 | const expect = chai.expect;
12 | chai.use(sinonChai);
13 |
14 | function getAttributes(node) {
15 | const attrs = {};
16 | if (node.attributes) {
17 | for (let i = node.attributes.length; i--;) {
18 | attrs[node.attributes[i].name] = node.attributes[i].value;
19 | }
20 | }
21 | return attrs;
22 | }
23 |
24 | // hacky normalization of attribute order across browsers.
25 | function sortAttributes(html) {
26 | return html.replace(/<([a-z0-9-]+)((?:\s[a-z0-9:_.-]+=".*?")+)((?:\s*\/)?>)/gi, (s, pre, attrs, after) => {
27 | const list = attrs.match(/\s[a-z0-9:_.-]+=".*?"/gi).sort((a, b) => (a > b ? 1 : -1));
28 | if (~after.indexOf('/')) after = `>`;
29 | return `<${pre + list.join('') + after}`;
30 | });
31 | }
32 |
33 | describe('Components', () => {
34 | let scratch;
35 |
36 | before(() => {
37 | scratch = document.createElement('div');
38 | (document.body || document.documentElement).appendChild(scratch);
39 | });
40 |
41 | beforeEach(() => {
42 | scratch.innerHTML = '';
43 | });
44 |
45 | after(() => {
46 | scratch.parentNode.removeChild(scratch);
47 | scratch = null;
48 | });
49 |
50 | it('should render components', () => {
51 | class C1 extends MVR.Component {
52 | render() {
53 | return MVR.createElement('div', {}, ['C1']);
54 | }
55 | }
56 |
57 | sinon.spy(C1.prototype, 'render');
58 |
59 | MVRDom.render(MVR.createElement(C1), scratch);
60 |
61 | expect(C1.prototype.render)
62 | .to.have.been.calledOnce
63 | .and.to.have.returned(sinon.match({ type: 'div' }));
64 |
65 | expect(scratch.innerHTML).to.equal('C1
');
66 | });
67 |
68 | it('should render components with props', () => {
69 | const PROPS = { foo: 'bar', onBaz: () => {} };
70 | let constructorProps;
71 |
72 | class C2 extends MVR.Component {
73 | constructor(props) {
74 | super(props);
75 | constructorProps = props;
76 | }
77 |
78 | render() {
79 | return MVR.createElement('div', this.props);
80 | }
81 | }
82 |
83 | sinon.spy(C2.prototype, 'render');
84 |
85 | MVRDom.render(MVR.createElement(C2, PROPS), scratch);
86 |
87 | expect(constructorProps).to.deep.include(PROPS);
88 |
89 | expect(C2.prototype.render)
90 | .to.have.been.calledOnce
91 | .and.to.have.returned(sinon.match({
92 | type: 'div',
93 | props: PROPS
94 | }));
95 |
96 | expect(scratch.innerHTML).to.equal('');
97 | });
98 |
99 | it('should remove orphaned elements replaced by Components', () => {
100 | class Comp extends MVR.Component {
101 | render() {
102 | return MVR.createElement('span', {}, ['span in a component']);
103 | }
104 | }
105 |
106 | let root;
107 | function test(content) {
108 | root = MVRDom.render(content, scratch, root);
109 | }
110 |
111 | test(MVR.createElement(Comp));
112 | test(MVR.createElement('div', {}, ['just a div']));
113 | test(MVR.createElement(Comp));
114 |
115 | expect(scratch.innerHTML).to.equal('span in a component');
116 | });
117 |
118 | describe('High-Order Components', () => {
119 | it('should render nested components', () => {
120 | const PROPS = { foo: 'bar', onBaz: () => {} };
121 |
122 | class Inner extends MVR.Component {
123 | render() {
124 | return MVR.createElement('div', this.props, ['inner']);
125 | }
126 | }
127 |
128 | class Outer extends MVR.Component {
129 | render() {
130 | return MVR.createElement(Inner, this.props);
131 | }
132 | }
133 |
134 | const InnerSpy = sinon.spy(Inner.prototype, 'render');
135 | const OuterSpy = sinon.spy(Outer.prototype, 'render');
136 |
137 | MVRDom.render(MVR.createElement(Outer, PROPS), scratch);
138 |
139 | expect(OuterSpy)
140 | .to.have.been.calledOnce
141 | .and.to.have.returned(sinon.match({
142 | type: Inner,
143 | props: PROPS
144 | }));
145 |
146 | expect(InnerSpy)
147 | .to.have.been.calledOnce
148 | .and.to.have.returned(sinon.match({
149 | type: 'div',
150 | props: PROPS,
151 | children: [MVR.createElement('text', { textContent: 'inner' })]
152 | }));
153 |
154 | expect(scratch.innerHTML).to.equal('inner
');
155 | });
156 |
157 | it('should re-render nested components', () => {
158 | let doRender = null,
159 | alt = false;
160 |
161 | let j = 0;
162 | class Inner extends MVR.Component {
163 | constructor(...args) {
164 | super();
165 | this._constructor(...args);
166 | }
167 | _constructor() {}
168 | componentWillMount() {}
169 | componentDidMount() {}
170 | componentWillUnmount() {}
171 | render() {
172 | return MVR.createElement('div', Object.assign(
173 | {
174 | j: ++j // eslint-disable-line no-plusplus
175 | },
176 | this.props
177 | ), ['inner']);
178 | }
179 | }
180 |
181 | class Outer extends MVR.Component {
182 | componentDidMount() {
183 | let i = 1;
184 | this.state = {};
185 | doRender = () => this.setState({ i: ++i }); // eslint-disable-line no-plusplus
186 | }
187 | componentWillUnmount() {
188 | }
189 | render() {
190 | if (alt) return MVR.createElement('div', { 'is-alt': true });
191 | return MVR.createElement(Inner, Object.assign({ i: this.state.i }, this.props));
192 | }
193 | }
194 |
195 | sinon.spy(Outer.prototype, 'render');
196 | sinon.spy(Outer.prototype, 'componentDidMount');
197 | sinon.spy(Outer.prototype, 'componentWillUnmount');
198 |
199 | sinon.spy(Inner.prototype, '_constructor');
200 | sinon.spy(Inner.prototype, 'render');
201 | sinon.spy(Inner.prototype, 'componentWillMount');
202 | sinon.spy(Inner.prototype, 'componentDidMount');
203 | sinon.spy(Inner.prototype, 'componentWillUnmount');
204 |
205 | MVRDom.render(MVR.createElement(Outer, { foo: 'bar' }), scratch);
206 |
207 | expect(Outer.prototype.componentDidMount).to.have.been.calledOnce;
208 |
209 | doRender();
210 |
211 | expect(Outer.prototype.componentWillUnmount).not.to.have.been.called;
212 |
213 | expect(Inner.prototype._constructor).to.have.been.calledOnce;
214 | expect(Inner.prototype.componentWillUnmount).not.to.have.been.called;
215 | expect(Inner.prototype.componentWillMount).to.have.been.calledOnce;
216 | expect(Inner.prototype.componentDidMount).to.have.been.calledOnce;
217 | expect(Inner.prototype.render).to.have.been.calledTwice;
218 |
219 | expect(Inner.prototype.render.secondCall)
220 | .to.have.returned(sinon.match({
221 | props: {
222 | j: 2,
223 | i: 2,
224 | foo: 'bar'
225 | }
226 | }));
227 |
228 | expect(getAttributes(scratch.firstElementChild)).to.eql({
229 | j: '2',
230 | i: '2',
231 | foo: 'bar'
232 | });
233 |
234 | expect(sortAttributes(scratch.innerHTML)).to.equal(sortAttributes('inner
'));
235 |
236 | doRender();
237 |
238 | expect(Inner.prototype.componentWillUnmount).not.to.have.been.called;
239 | expect(Inner.prototype.componentWillMount).to.have.been.calledOnce;
240 | expect(Inner.prototype.componentDidMount).to.have.been.calledOnce;
241 | expect(Inner.prototype.render).to.have.been.calledThrice;
242 |
243 | expect(Inner.prototype.render.thirdCall)
244 | .to.have.returned(sinon.match({
245 | props: {
246 | j: 3,
247 | i: 3,
248 | foo: 'bar'
249 | }
250 | }));
251 |
252 | expect(getAttributes(scratch.firstElementChild)).to.eql({
253 | j: '3',
254 | i: '3',
255 | foo: 'bar'
256 | });
257 |
258 |
259 | alt = true;
260 | doRender();
261 |
262 | expect(Inner.prototype.componentWillUnmount).to.have.been.calledOnce;
263 |
264 | expect(scratch.innerHTML).to.equal('');
265 |
266 | alt = false;
267 | doRender();
268 |
269 | expect(sortAttributes(scratch.innerHTML)).to.equal(sortAttributes('inner
'));
270 | });
271 |
272 | it('should unmount children of high-order components without unmounting parent', () => {
273 | let outer;
274 | let inner2; // eslint-disable-line no-unused-vars
275 | let counter = 0;
276 |
277 | class Outer extends MVR.Component {
278 | constructor(props, context) {
279 | super(props, context);
280 | outer = this;
281 | this.state = {
282 | child: this.props.child
283 | };
284 | }
285 | componentWillMount() {}
286 | componentDidMount() {}
287 | componentWillUnmount() {
288 | }
289 | render() {
290 | return MVR.createElement(this.state.child);
291 | }
292 | }
293 |
294 | sinon.spy(Outer.prototype, 'render');
295 | sinon.spy(Outer.prototype, 'componentDidMount');
296 | sinon.spy(Outer.prototype, 'componentWillMount');
297 | sinon.spy(Outer.prototype, 'componentWillUnmount');
298 |
299 | class Inner extends MVR.Component {
300 | componentWillUnmount() {}
301 | componentWillMount() {}
302 | componentDidMount() {}
303 | render() {
304 | return MVR.createElement('span', {}, [`element ${++counter}`]);
305 | }
306 | }
307 |
308 | sinon.spy(Inner.prototype, 'render');
309 | sinon.spy(Inner.prototype, 'componentDidMount');
310 | sinon.spy(Inner.prototype, 'componentWillMount');
311 | sinon.spy(Inner.prototype, 'componentWillUnmount');
312 |
313 | class Inner2 extends MVR.Component {
314 | constructor(props, context) {
315 | super(props, context);
316 | inner2 = this;
317 | }
318 | componentWillUnmount() {}
319 | componentWillMount() {}
320 | componentDidMount() {}
321 | render() {
322 | return MVR.createElement('span', {}, [`element ${++counter}`]);
323 | }
324 | }
325 |
326 | sinon.spy(Inner2.prototype, 'render');
327 | sinon.spy(Inner2.prototype, 'componentDidMount');
328 | sinon.spy(Inner2.prototype, 'componentWillMount');
329 | sinon.spy(Inner2.prototype, 'componentWillUnmount');
330 |
331 | MVRDom.render(MVR.createElement(Outer, { child: Inner }), scratch);
332 |
333 | // outer should only have been mounted once
334 | expect(Outer.prototype.componentWillMount, 'outer initial').to.have.been.calledOnce;
335 | expect(Outer.prototype.componentDidMount, 'outer initial').to.have.been.calledOnce;
336 | expect(Outer.prototype.componentWillUnmount, 'outer initial').not.to.have.been.called;
337 |
338 | // inner should only have been mounted once
339 | expect(Inner.prototype.componentWillMount, 'inner initial').to.have.been.calledOnce;
340 | expect(Inner.prototype.componentDidMount, 'inner initial').to.have.been.calledOnce;
341 | expect(Inner.prototype.componentWillUnmount, 'inner initial').not.to.have.been.called;
342 |
343 | outer.setState({ child: Inner2 });
344 |
345 | expect(Inner2.prototype.render).to.have.been.calledOnce;
346 |
347 | // outer should still only have been mounted once
348 | expect(Outer.prototype.componentWillMount, 'outer swap').to.have.been.calledOnce;
349 | expect(Outer.prototype.componentDidMount, 'outer swap').to.have.been.calledOnce;
350 | expect(Outer.prototype.componentWillUnmount, 'outer swap').not.to.have.been.called;
351 |
352 | // inner2 should only have been mounted once
353 | expect(Inner2.prototype.componentWillMount, 'inner2 swap').to.have.been.calledOnce;
354 | expect(Inner2.prototype.componentDidMount, 'inner2 swap').to.have.been.calledOnce;
355 | expect(Inner2.prototype.componentWillUnmount, 'inner2 swap').not.to.have.been.called;
356 |
357 | outer.setState({ child: Inner2 });
358 |
359 | expect(Inner2.prototype.render, 'inner2 update').to.have.been.calledTwice;
360 | expect(Inner2.prototype.componentWillMount, 'inner2 update').to.have.been.calledOnce;
361 | expect(Inner2.prototype.componentDidMount, 'inner2 update').to.have.been.calledOnce;
362 | expect(Inner2.prototype.componentWillUnmount, 'inner2 update').not.to.have.been.called;
363 | });
364 | });
365 | });
366 |
--------------------------------------------------------------------------------
/test/KeysTests.js:
--------------------------------------------------------------------------------
1 | import chai from 'chai';
2 | import sinonChai from 'sinon-chai';
3 | import MVR from '../src/part4/MVR';
4 | import MVRDom from '../src/part4/MVRDom';
5 |
6 | const expect = chai.expect;
7 | chai.use(sinonChai);
8 |
9 | describe('keys', () => {
10 | let scratch;
11 |
12 | before(() => {
13 | scratch = document.createElement('div');
14 | (document.body || document.documentElement).appendChild(scratch);
15 | });
16 |
17 | beforeEach(() => {
18 | scratch.innerHTML = '';
19 | });
20 |
21 | after(() => {
22 | scratch.parentNode.removeChild(scratch);
23 | scratch = null;
24 | });
25 |
26 | // See developit/preact-compat#21
27 | it('should remove orphaned keyed nodes', () => {
28 | MVRDom.render((
29 | MVR.createElement('div', {}, [
30 | MVR.createElement('div', {}, ['1']),
31 | MVR.createElement('li', { key: 'a' }, ['a']),
32 | MVR.createElement('li', { key: 'b' }, ['b'])
33 | ])
34 | ), scratch);
35 |
36 | MVRDom.render((
37 | MVR.createElement('div', {}, [
38 | MVR.createElement('div', {}, ['2']),
39 | MVR.createElement('li', { key: 'b' }, ['b']),
40 | MVR.createElement('li', { key: 'c' }, ['c'])
41 | ])
42 | ), scratch);
43 |
44 | expect(scratch.innerHTML).to.equal('');
45 | });
46 |
47 | it('should remove keyed nodes', () => {
48 | class BusyIndicator extends MVR.Component {
49 | render() {
50 | const { children, busy } = this.props;
51 | return MVR.createElement('div', {
52 | class: busy ? 'busy' : ''
53 | }, [
54 | children && children.length ?
55 | children :
56 | MVR.createElement('div', {
57 | class: 'busy-placeholder'
58 | }),
59 | MVR.createElement('div', {
60 | class: 'indicator'
61 | }, [
62 | MVR.createElement('div', {}, ['indicator']),
63 | MVR.createElement('div', {}, ['indicator']),
64 | MVR.createElement('div', {}, ['indicator'])
65 | ])
66 | ]);
67 | }
68 | }
69 |
70 | class App extends MVR.Component {
71 | componentDidMount() {
72 | setTimeout(() => this.setState({ opened: true, loading: true }), 10);
73 | setTimeout(() => this.setState({ opened: true, loading: false }), 20);
74 | }
75 |
76 | render() {
77 | const { opened, loading } = this.props;
78 | return (
79 | MVR.createElement(BusyIndicator, {
80 | id: 'app',
81 | busy: loading
82 | }, [
83 | MVR.createElement('div', {}, [
84 | 'This div needs to be here for this to break'
85 | ]),
86 | opened && !loading && MVR.createElement('div', {}, [[]])
87 | ])
88 | );
89 | }
90 | }
91 |
92 |
93 | MVRDom.render(MVR.createElement(App), scratch);
94 | MVRDom.render(MVR.createElement(App, {
95 | opened: true,
96 | loading: true
97 | }), scratch);
98 | MVRDom.render(MVR.createElement(App, {
99 | opened: true
100 | }), scratch);
101 |
102 | const html = String(scratch.firstChild.innerHTML).replace(/ class=""/g, '');
103 | expect(html).to.equal('This div needs to be here for this to break
indicator
indicator
indicator