Skip to content

Commit e9b0968

Browse files
krausestkrausest
committed
Merge branch 'zouloux-master'
2 parents 7adc46b + 994e614 commit e9b0968

File tree

10 files changed

+375
-36
lines changed

10 files changed

+375
-36
lines changed

‎frameworks/keyed/reflex-js-atomic/esbuild.config.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import esbuild from "esbuild";
2+
3+
// ----------------------------------------------------------------------------- BUILD MODE
4+
const buildMode = (process.argv[2] ?? "dev").toLowerCase();
5+
const isDev = buildMode === "dev"
6+
if ( buildMode !== 'prod' && buildMode !== 'dev' ) {
7+
console.error("Build mode need to be 'prod' or 'dev'.")
8+
process.exit(0)
9+
}
10+
11+
// ----------------------------------------------------------------------------- BUILD CONTEXT
12+
// Create build context
13+
const _buildContext = await esbuild.context({
14+
//target: [ 'chrome58', 'edge18', 'firefox57', 'safari11' ],
15+
platform: "browser",
16+
format: "iife",
17+
// minify: !isDev,
18+
// Mangle all properties starting with an underscore
19+
mangleProps: isDev ? undefined : /^_/,
20+
// Important to keep perfs
21+
// and disable compressing "if ( a ) b()" in "a && b()"
22+
minifyWhitespace: !isDev,
23+
minifyIdentifiers: !isDev,
24+
minifySyntax: false,
25+
keepNames: true,
26+
27+
bundle: true,
28+
loader: {
29+
'.ts' : 'ts',
30+
'.tsx' : 'tsx'
31+
},
32+
metafile: true,
33+
write: true,
34+
plugins: [],
35+
define: {
36+
"process.env.NODE_ENV": isDev ? `"development"` : `"production"`
37+
},
38+
logLevel: "info",
39+
outbase: "./src/",
40+
entryPoints: ["./src/main.tsx"],
41+
outdir: "./dist/"
42+
})
43+
44+
// ----------------------------------------------------------------------------- DEV OR BUILD
45+
46+
// Dev mode
47+
if ( isDev ) {
48+
await _buildContext.watch()
49+
}
50+
// Build mode
51+
else {
52+
await _buildContext.rebuild()
53+
await _buildContext.dispose()
54+
}

‎frameworks/keyed/reflex-js-atomic/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Reflex - Atomic</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet"/>
7+
</head>
8+
<body>
9+
<div id="main"></div>
10+
<script src="./dist/main.js" type="module"></script>
11+
</body>
12+
</html>

‎frameworks/keyed/reflex-js-atomic/package-lock.json

Lines changed: 94 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/keyed/reflex-js-atomic/package.json

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "js-framework-benchmark-reflex-js-atomic",
3+
"version": "0.0.0",
4+
"type": "module",
5+
"js-framework-benchmark": {
6+
"frameworkVersionFromPackage": "reflex-dom",
7+
"frameworkHomeURL": "https://github.com/zouloux/reflex"
8+
},
9+
"description": "Benchmark for Reflex-DOM library",
10+
"scripts": {
11+
"build-dev": "node esbuild.config.js dev",
12+
"build-prod": "node esbuild.config.js prod"
13+
},
14+
"author": "Alexis Bouhet",
15+
"license": "Apache-2.0",
16+
"homepage": "https://github.com/krausest/js-framework-benchmark",
17+
"repository": {
18+
"type": "git",
19+
"url": "https://github.com/krausest/js-framework-benchmark.git"
20+
},
21+
"devDependencies": {
22+
"@types/node": "^20.11.25",
23+
"esbuild": "^0.20.1"
24+
},
25+
"dependencies": {
26+
"reflex-dom": "0.23.1"
27+
}
28+
}

‎frameworks/keyed/reflex-js-atomic/src/main.tsx

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
2+
import { h, render, state} from "reflex-dom";
3+
import type { IAtom } from "reflex-dom"
4+
import { For, atom, particle } from "reflex-dom/performance-helpers"
5+
6+
// ----------------------------------------------------------------------------- DATA HELPERS
7+
8+
const A = [
9+
"pretty", "large", "big", "small", "tall", "short", "long", "handsome",
10+
"plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful",
11+
"mushy", "odd", "unsightly", "adorable", "important", "inexpensive",
12+
"cheap", "expensive", "fancy"
13+
];
14+
const C = [
15+
"red", "yellow", "blue", "green", "pink", "brown", "purple", "brown",
16+
"white", "black", "orange"
17+
];
18+
const N = [
19+
"table", "chair", "house", "bbq", "desk", "car", "pony", "cookie",
20+
"sandwich", "burger", "pizza", "mouse", "keyboard"
21+
];
22+
23+
const _pick = array => array[Math.floor(Math.random() * array.length)]
24+
25+
// ----------------------------------------------------------------------------- STRUCT & STATES
26+
27+
interface IDataItem
28+
{
29+
id :number
30+
label :IAtom<string>
31+
}
32+
33+
const $data = state<IDataItem[]>([])
34+
const $selected = state<number>( null )
35+
36+
// ----------------------------------------------------------------------------- DATA ACTIONS
37+
38+
const run = () => $data.set( buildData(1000) )
39+
const runLots = () => $data.set( buildData(10000) )
40+
const add = () => $data.set( d => [...d, ...buildData(1000)] )
41+
const update = () => {
42+
const list = $data.peek()
43+
for ( let i = 0; i < list.length; i += 10 )
44+
list[i].label.value += ' !!!';
45+
}
46+
const clear = () => $data.set([])
47+
const swapRows = () => $data.set( d => {
48+
if ( d.length > 998 ) {
49+
let tmp = d[1];
50+
d[1] = d[998];
51+
d[998] = tmp;
52+
return [...d];
53+
}
54+
return d
55+
})
56+
const remove = id => $data.set(d => {
57+
const idx = d.findIndex( d => d.id === id );
58+
return [ ...d.slice(0, idx), ...d.slice(idx + 1) ];
59+
})
60+
const toggleSelection = ( id:number ) => {
61+
$selected.set( $selected.value === id ? null : id )
62+
}
63+
64+
// ----------------------------------------------------------------------------- BUILD DATA
65+
66+
let _counter = 1;
67+
const buildData = (count:number) => {
68+
// eslint-disable-next-line unicorn/no-new-array
69+
const data = new Array(count);
70+
for ( let i = 0; i < count; ++i ) {
71+
data[i] = {
72+
id: _counter++,
73+
label: atom( `${_pick(A)} ${_pick(C)} ${_pick(N)}` ),
74+
};
75+
}
76+
return data;
77+
};
78+
79+
// ----------------------------------------------------------------------------- BUTTON
80+
81+
const Button = ({ id, onClick, title }) =>
82+
<div class="col-sm-6 smallpad">
83+
<button
84+
type="button"
85+
class="btn btn-primary btn-block"
86+
id={ id } onClick={ onClick }
87+
children={[ title ]}
88+
/>
89+
</div>
90+
91+
// ----------------------------------------------------------------------------- ROW
92+
93+
const Row = ( props ) =>
94+
<tr class={ particle( () => $selected.value === props.id ? "danger" : "" ) }>
95+
<td class="col-md-1">{ props.id }</td>
96+
<td class="col-md-4">
97+
<a onClick={ () => toggleSelection( props.id ) }>
98+
{ props.label }
99+
</a>
100+
</td>
101+
<td class="col-md-1">
102+
<a onClick={ () => remove( props.id ) }>
103+
<span class="glyphicon glyphicon-remove" aria-hidden="true" />
104+
</a>
105+
</td>
106+
<td class="col-md-6" />
107+
</tr>
108+
109+
Row.shouldUpdate = () => false
110+
111+
// ----------------------------------------------------------------------------- JUMBOTRON
112+
113+
const Jumbotron = () =>
114+
<div class="jumbotron">
115+
<div class="row">
116+
<div class="col-md-6">
117+
<h1>Reflex - Atomic</h1>
118+
</div>
119+
<div class="col-md-6">
120+
<div class="row">
121+
<Button id="run" title="Create 1,000 rows" onClick={ run } />
122+
<Button id="runlots" title="Create 10,000 rows" onClick={ runLots } />
123+
<Button id="add" title="Append 1,000 rows" onClick={ add } />
124+
<Button id="update" title="Update every 10th row" onClick={ update } />
125+
<Button id="clear" title="Clear" onClick={ clear } />
126+
<Button id="swaprows" title="Swap Rows" onClick={ swapRows } />
127+
</div>
128+
</div>
129+
</div>
130+
</div>
131+
132+
// ----------------------------------------------------------------------------- APP
133+
134+
const App = () =>
135+
<div class="container">
136+
<Jumbotron />
137+
<table class="table table-hover table-striped test-data">
138+
<For as="tbody" each={ $data }>
139+
{ item => <Row
140+
key={ item.id } id={ item.id }
141+
label={ item.label }
142+
/> }
143+
</For>
144+
</table>
145+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
146+
</div>
147+
148+
// eslint-disable-next-line no-undef,unicorn/prefer-query-selector
149+
render(<App />, document.getElementById("main"))

‎frameworks/keyed/reflex-js-atomic/tsconfig.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"compilerOptions": {
3+
"strict": false,
4+
"jsxFactory": "h",
5+
"jsx": "react",
6+
"module": "ESNext",
7+
"target": "ESNext",
8+
"moduleResolution": "node",
9+
"lib": ["DOM", "ESNext"]
10+
},
11+
}

‎frameworks/keyed/reflex-js/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>Reflex-DOM</title>
5+
<title>Reflex</title>
66
<link href="/css/currentStyle.css" rel="stylesheet"/>
77
</head>
88
<body>

‎frameworks/keyed/reflex-js/package-lock.json

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/keyed/reflex-js/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,6 @@
2323
"esbuild": "^0.20.1"
2424
},
2525
"dependencies": {
26-
"reflex-dom": "0.21.7"
26+
"reflex-dom": "0.23.1"
2727
}
2828
}

0 commit comments

Comments
 (0)