Skip to content

Commit 73eeb24

Browse files
krausestkrausest
committed
Merge branch 'WebReflection-neverland'
2 parents 559da40 + 3b48a67 commit 73eeb24

File tree

9 files changed

+78
-172
lines changed

9 files changed

+78
-172
lines changed

‎frameworks/keyed/neverland/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,12 @@
2424
},
2525
"homepage": "https://github.com/krausest/js-framework-benchmark#readme",
2626
"dependencies": {
27-
"neverland": "3.0.4"
27+
"js-framework-benchmark-utils": "0.2.5",
28+
"neverland": "3.1.2"
2829
},
2930
"devDependencies": {
3031
"@ungap/degap": "^0.1.4",
31-
"rollup": "^1.27.4",
32+
"rollup": "^1.27.6",
3233
"rollup-plugin-includepaths": "^0.2.3",
3334
"rollup-plugin-minify-html-literals": "^1.2.2",
3435
"rollup-plugin-node-resolve": "^5.2.0",

‎frameworks/keyed/neverland/rollup.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import resolve from 'rollup-plugin-node-resolve';
22
import includePaths from 'rollup-plugin-includepaths';
33
import minifyHTML from 'rollup-plugin-minify-html-literals';
4-
import { terser } from 'rollup-plugin-terser';
4+
import {terser} from 'rollup-plugin-terser';
55

66
export default {
77
input: 'src/index.js',

‎frameworks/keyed/neverland/src/index.js‎

Lines changed: 35 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
1+
import {State} from 'js-framework-benchmark-utils';
12
import {
23
neverland as $, html, render,
3-
useCallback,
4-
useMemo,
5-
useReducer
6-
} from '../node_modules/neverland/esm/index.js';
7-
8-
import {Scope, listReducer} from './utils.js';
9-
4+
useCallback, useMemo, useReducer
5+
} from 'neverland';
106

117
const GlyphIcon = () => html`<span class="glyphicon glyphicon-remove" aria-hidden="true" />`;
128

13-
const Row = $(({item, dispatch, selected}) => {
14-
const select = useCallback(() => dispatch({type: 'select', id: item.id}), [item]),
15-
remove = useCallback(() => dispatch({type: 'delete', id: item.id}), [item]);
9+
const Row = $(({data, item, dispatch, selected}) => {
10+
const {id, label} = item;
11+
12+
const select = useCallback(() => dispatch({type: 'select', id}), [id]),
13+
remove = useCallback(() => dispatch({type: 'remove', id}), [id]);
1614

17-
return html.for(item)`
15+
return html.for(data, id)`
1816
<tr class=${selected ? "danger" : ""}>
19-
<td class="col-md-1">${item.id}</td>
20-
<td class="col-md-4"><a onclick=${select}>${item.label}</a></td>
17+
<td class="col-md-1">${id}</td>
18+
<td class="col-md-4"><a onclick=${select}>${label}</a></td>
2119
<td class="col-md-1"><a onclick=${remove}>${GlyphIcon()}</a></td>
2220
<td class="col-md-6" />
2321
</tr>
@@ -50,16 +48,38 @@ const Jumbotron = ({dispatch}) => html`
5048
</div>
5149
`;
5250

51+
// This is a bit awkward, but also necessary because all methods in the State
52+
// are self-bound, meaning these will refer to an older state when changes happen.
53+
// With this update, the list reducer will refer always
54+
// to the updated object instead of the previously shallow copied one.
55+
let state = State($ => {state = $});
56+
57+
// As result, the listReducer will always return a shallow copy of the initial state,
58+
// instead of returning a copy of the previous shallow copy that won't be referenced.
59+
const listReducer = (_, action) => {
60+
const {type} = action;
61+
switch (type) {
62+
case 'remove':
63+
case 'select':
64+
state[type](action.id);
65+
break;
66+
default:
67+
state[type]();
68+
break;
69+
}
70+
return {...state};
71+
};
72+
5373
const Main = $(() => {
54-
const [state, dispatch] = useReducer(listReducer, Scope);
74+
const [{data, selected}, dispatch] = useReducer(listReducer, state);
5575
const jumbotron = useMemo(() => Jumbotron({dispatch}), []);
5676

5777
return html`
5878
<div class="container">
5979
${jumbotron}
6080
<table class="table table-hover table-striped test-data">
6181
<tbody>
62-
${state.data.map(item => Row({item, dispatch, selected: item.id === state.selected}))}
82+
${data.map(item => Row({data, item, dispatch, selected: item.id === selected}))}
6383
</tbody>
6484
</table>
6585
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />

‎frameworks/keyed/neverland/src/utils.js‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

‎frameworks/non-keyed/neverland/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<title>neverland non-keyed</title>
5+
<title>neverland keyed</title>
66
<link href="/css/currentStyle.css" rel="stylesheet"/>
77
</head>
88
<body>

‎frameworks/non-keyed/neverland/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,12 @@
2424
},
2525
"homepage": "https://github.com/krausest/js-framework-benchmark#readme",
2626
"dependencies": {
27-
"neverland": "3.0.4"
27+
"js-framework-benchmark-utils": "0.2.5",
28+
"neverland": "3.1.2"
2829
},
2930
"devDependencies": {
3031
"@ungap/degap": "^0.1.4",
31-
"rollup": "^1.27.4",
32+
"rollup": "^1.27.6",
3233
"rollup-plugin-includepaths": "^0.2.3",
3334
"rollup-plugin-minify-html-literals": "^1.2.2",
3435
"rollup-plugin-node-resolve": "^5.2.0",

‎frameworks/non-keyed/neverland/rollup.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import resolve from 'rollup-plugin-node-resolve';
22
import includePaths from 'rollup-plugin-includepaths';
33
import minifyHTML from 'rollup-plugin-minify-html-literals';
4-
import { terser } from 'rollup-plugin-terser';
4+
import {terser} from 'rollup-plugin-terser';
55

66
export default {
77
input: 'src/index.js',

‎frameworks/non-keyed/neverland/src/index.js‎

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
1+
import {State} from 'js-framework-benchmark-utils';
12
import {
23
neverland as $, html, render,
3-
useCallback,
4-
useMemo,
5-
useReducer
6-
} from '../node_modules/neverland/esm/index.js';
7-
8-
import {Scope, listReducer} from './utils.js';
9-
4+
useCallback, useMemo, useReducer
5+
} from 'neverland';
106

117
const GlyphIcon = () => html`<span class="glyphicon glyphicon-remove" aria-hidden="true" />`;
128

13-
const Row = $(({item, dispatch, selected}) => {
14-
const select = useCallback(() => dispatch({type: 'select', id: item.id}), [item]),
15-
remove = useCallback(() => dispatch({type: 'delete', id: item.id}), [item]);
9+
const Row = $(({data, item, dispatch, selected}) => {
10+
const {id, label} = item;
11+
12+
const select = useCallback(() => dispatch({type: 'select', id}), [id]),
13+
remove = useCallback(() => dispatch({type: 'remove', id}), [id]);
1614

1715
return html`
1816
<tr class=${selected ? "danger" : ""}>
19-
<td class="col-md-1">${item.id}</td>
20-
<td class="col-md-4"><a onclick=${select}>${item.label}</a></td>
17+
<td class="col-md-1">${id}</td>
18+
<td class="col-md-4"><a onclick=${select}>${label}</a></td>
2119
<td class="col-md-1"><a onclick=${remove}>${GlyphIcon()}</a></td>
2220
<td class="col-md-6" />
2321
</tr>
@@ -50,16 +48,38 @@ const Jumbotron = ({dispatch}) => html`
5048
</div>
5149
`;
5250

51+
// This is a bit awkward, but also necessary because all methods in the State
52+
// are self-bound, meaning these will refer to an older state when changes happen.
53+
// With this update, the list reducer will refer always
54+
// to the updated object instead of the previously shallow copied one.
55+
let state = State($ => {state = $});
56+
57+
// As result, the listReducer will always return a shallow copy of the initial state,
58+
// instead of returning a copy of the previous shallow copy that won't be referenced.
59+
const listReducer = (_, action) => {
60+
const {type} = action;
61+
switch (type) {
62+
case 'remove':
63+
case 'select':
64+
state[type](action.id);
65+
break;
66+
default:
67+
state[type]();
68+
break;
69+
}
70+
return {...state};
71+
};
72+
5373
const Main = $(() => {
54-
const [state, dispatch] = useReducer(listReducer, Scope);
74+
const [{data, selected}, dispatch] = useReducer(listReducer, state);
5575
const jumbotron = useMemo(() => Jumbotron({dispatch}), []);
5676

5777
return html`
5878
<div class="container">
5979
${jumbotron}
6080
<table class="table table-hover table-striped test-data">
6181
<tbody>
62-
${state.data.map(item => Row({item, dispatch, selected: item.id === state.selected}))}
82+
${data.map(item => Row({data, item, dispatch, selected: item.id === selected}))}
6383
</tbody>
6484
</table>
6585
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />

‎frameworks/non-keyed/neverland/src/utils.js‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

0 commit comments

Comments
 (0)