Skip to content

updated to remove 772 error and pass the iskeyed test #861

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Mar 13, 2021
Merged

updated to remove 772 error and pass the iskeyed test #861

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b3e17ed
upgrade AppRun example to use TypeScript strict
yysun Apr 20, 2020
06a2d4f
Merge branch 'master' of https://github.com/krausest/js-framework-ben…
Nov 16, 2020
77bfa3d
remove direct DOM munipulation
Nov 16, 2020
8015095
npm upgrade
Nov 16, 2020
f4ae176
upgrade AppRun example to use TypeScript strict
yysun Apr 20, 2020
ce64d75
remove direct DOM munipulation
Nov 16, 2020
c86e44d
npm upgrade
Nov 16, 2020
c50e3d3
use esbuild
yysun Mar 3, 2021
36d0ae5
use app.h
yysun Mar 3, 2021
d7e5d4b
upgrade apprun
yysun Mar 4, 2021
ce7df0c
Merge remote-tracking branch 'upstream/master'
yysun Mar 4, 2021
e147486
remove 772 from package.jsom
yysun Mar 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4,066 changes: 11 additions & 4,055 deletions frameworks/keyed/apprun/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

15 changes: 5 additions & 10 deletions frameworks/keyed/apprun/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,11 @@
"description": "AppRun demo",
"main": "index.js",
"js-framework-benchmark": {
"frameworkVersionFromPackage": "apprun",
"issues": [772]
"frameworkVersionFromPackage": "apprun"
},
"scripts": {
"build-dev": "webpack -w -d",
"build-prod": "webpack -p"
"build-dev": "esbuild src/main.tsx --bundle --outfile=dist/main.js --serve=8080 --servedir=.",
"build-prod": "esbuild src/main.tsx --bundle --outfile=dist/main.js --minify"
},
"keywords": [
"apprun",
Expand All @@ -23,13 +22,9 @@
"url": "https://github.com/yysun/js-framework-benchmark.git"
},
"devDependencies": {
"json-loader": "0.5.7",
"ts-loader": "6.2.2",
"typescript": "3.8.3",
"webpack": "4.42.1",
"webpack-cli": "3.3.11"
"esbuild": "^0.8.54"
},
"dependencies": {
"apprun": "2.23.12"
"apprun": "^2.27.7"
}
}
5 changes: 5 additions & 0 deletions frameworks/keyed/apprun/src/jsx.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
declare namespace JSX {
interface IntrinsicElements {
[key: string]: any
}
}
199 changes: 67 additions & 132 deletions frameworks/keyed/apprun/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,139 +1,74 @@
import { app, Component } from 'apprun';
import Store from './store';
import { app, View } from 'apprun';
import { state, update, State, Events } from './store';

const store = new Store();
const getId = (elem: any) => elem.closest('tr').id;

const update = {

run(store) {
store.run();
return store;
},

add(store) {
store.add();
return store;
},

remove(store, id) {
store.delete(id);
document.getElementById(id).remove();
},

select(store, id) {
if (store.selected) {
document.getElementById(store.selected).className = '';
}
store.select(id);
document.getElementById(id).className = 'danger';
},

update(store) {
store.update();
return store;
},

runlots(store) {
store.runLots();
return store;
},

clear(store) {
store.clear();
document.getElementById("main-table").innerHTML = "";
},

swaprows(store) {
store.swapRows();
return store;
}
const click = (state: State, e: Event) => {
const t = e.target as HTMLElement;
if (!t) return;
e.preventDefault();
if (t.tagName === 'BUTTON' && t.id) {
component.run(t.id as Events);
} else if (t.matches('.remove')) {
const id = getId(t);
component.run('delete', id);
} else if (t.matches('.lbl')) {
const id = getId(t);
component.run('select', id);
}
}

const view = (model) => {
const rows = model.data.map((curr) => {
const selected = curr.id == model.selected ? 'danger' : undefined;
const id = curr.id;
return <tr className={selected} id={id} key={id}>
<td className="col-md-1">{id}</td>
<td className="col-md-4">
<a className="lbl">{curr.label}</a>
</td>
<td className="col-md-1">
<a className="remove">
<span className="glyphicon glyphicon-remove remove" aria-hidden="true"></span>
</a>
</td>
<td className="col-md-6"></td>
</tr>;
});

return (<div className="container" onclick={click}>
<div className="jumbotron">
<div className="row">
<div className="col-md-6">
<h1>AppRun</h1>
</div>
<div className="col-md-6">
<div className="row">
<div className="col-sm-6 smallpad">
<button type="button" className="btn btn-primary btn-block" id="run">Create 1,000 rows</button>
</div>
<div className="col-sm-6 smallpad">
<button type="button" className="btn btn-primary btn-block" id="runlots">Create 10,000 rows</button>
</div>
<div className="col-sm-6 smallpad">
<button type="button" className="btn btn-primary btn-block" id="add">Append 1,000 rows</button>
</div>
<div className="col-sm-6 smallpad">
<button type="button" className="btn btn-primary btn-block" id="update">Update every 10th row</button>
</div>
<div className="col-sm-6 smallpad">
<button type="button" className="btn btn-primary btn-block" id="clear">Clear</button>
</div>
<div className="col-sm-6 smallpad">
<button type="button" className="btn btn-primary btn-block" id="swaprows">Swap Rows</button>
</div>
</div>
</div>
</div>
const view:View<State> = state => <div class="container" $onclick={click}>
<div class="jumbotron">
<div class="row">
<div class="col-md-6">
<h1>AppRun</h1>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="run">Create 1,000 rows</button>
</div>
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="runlots">Create 10,000 rows</button>
</div>
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="add">Append 1,000 rows</button>
</div>
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="update">Update every 10th row</button>
</div>
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="clear">Clear</button>
</div>
<div class="col-sm-6 smallpad">
<button type="button" class="btn btn-primary btn-block" id="swaprows">Swap Rows</button>
</div>
</div>
<table className="table table-hover table-striped test-data" id="main-table">
<tbody>
{rows}
</tbody>
</table>
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
</div>);
}
</div>
</div>
</div>
<table class="table table-hover table-striped test-data" id="main-table">
<tbody>
{state.data.map(item => {
const selected = item.id == state.selected ? 'danger' : undefined;
return <tr class={selected} id={item.id} key={item.id}>
<td class="col-md-1">{item.id}</td>
<td class="col-md-4">
<a class="lbl">{item.label}</a>
</td>
<td class="col-md-1">
<a class="remove">
<span class="glyphicon glyphicon-remove remove" aria-hidden="true"></span>
</a>
</td>
<td class="col-md-6"></td>
</tr>;
})}
</tbody>
</table>
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
</div>;

const getId = (elem) => {
while (elem) {
if (elem.tagName === "TR") {
return elem.id;
}
elem = elem.parentNode;
}
return undefined;
}

const click = (e) => {
const t = e.target as HTMLElement;
if (!t) return;
if (t.tagName === 'BUTTON' && t.id) {
e.preventDefault();
component.run(t.id);
} else if (t.matches('.remove')) {
e.preventDefault();
component.run('remove', getId(t));
} else if (t.matches('.lbl')) {
e.preventDefault();
component.run('select', getId(t));
}
};
const component = app.start<State, Events>('main', state, view, update);

const component = new Component(store, view, update);
component['-patch-vdom-on'] = true;
component.rendered = () => {
store.selected && (document.getElementById(store.selected).className = 'danger');
}
component.start(document.getElementById('main'));
Loading