Skip to content

Commit d8adc48

Browse files
NullVoxPopuliNullVoxPopuli
committed
Finish implementation
1 parent c9d43cd commit d8adc48

File tree

8 files changed

+5042
-7193
lines changed

8 files changed

+5042
-7193
lines changed

‎frameworks/keyed/react-starbeam/.babelrc

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"presets": [
3+
[
4+
"@babel/preset-env",
5+
{
6+
"targets": {
7+
"browsers": ["last 1 chrome versions"]
8+
}
9+
}
10+
],
11+
["@babel/preset-react", { "runtime": "automatic"
12+
}]
13+
],
14+
"env": {
15+
"development": {
16+
"presets": [
17+
["@babel/preset-react", { "development": true }]
18+
]
19+
}
20+
}
21+
}

‎frameworks/keyed/react-starbeam/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<title>React</title>
5+
<title>React with Starbeam</title>
66
<link href="/css/currentStyle.css" rel="stylesheet"/>
77
</head>
88
<body>
99
<div id='main'></div>
10+
1011
<script src='dist/main.js'></script>
1112
</body>
1213
</html>

‎frameworks/keyed/react-starbeam/package-lock.json

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

‎frameworks/keyed/react-starbeam/package.json

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
11
{
2-
"name": "js-framework-benchmark-react",
3-
"version": "1.2.0",
4-
"description": "React demo",
2+
"name": "js-framework-benchmark-react-starbeam",
3+
"version": "1.0.0",
4+
"description": "Starbeam demo using React",
55
"main": "index.js",
66
"js-framework-benchmark": {
7-
"frameworkVersionFromPackage": "react"
7+
"frameworkVersionFromPackage": "react:@starbeam/core"
88
},
9-
"browserslist": ["last 1 firefox versions", "last 1 chrome versions"],
109
"scripts": {
10+
"start": "npx live-server",
1111
"build-dev": "webpack --watch",
1212
"build-prod": "webpack"
1313
},
1414
"keywords": [
1515
"react",
16+
"starbeam",
1617
"webpack"
1718
],
18-
"author": "Stefan Krause",
19+
"author": "NullVoxPopuli",
1920
"license": "Apache-2.0",
2021
"homepage": "https://github.com/krausest/js-framework-benchmark",
2122
"repository": {
@@ -27,16 +28,17 @@
2728
"@babel/preset-env": "7.12.1",
2829
"@babel/preset-react": "7.12.1",
2930
"babel-loader": "8.1.0",
30-
"terser-webpack-plugin": "1.3.0",
31-
"webpack": "4.34.0",
32-
"webpack-cli": "3.3.4"
31+
"html-webpack-plugin": "^5.5.0",
32+
"webpack": "^5.0.0",
33+
"webpack-dev-server": "^4.9.3"
3334
},
3435
"dependencies": {
3536
"@starbeam/core": "^0.5.8",
3637
"@starbeam/js": "^0.5.8",
3738
"@starbeam/peer": "^1.0.8",
3839
"@starbeam/react": "^0.5.8",
3940
"react": "^18.2.0",
40-
"react-dom": "^18.2.0"
41+
"react-dom": "^18.2.0",
42+
"webpack-cli": "^4.10.0"
4143
}
4244
}

‎frameworks/keyed/react-starbeam/src/data.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,19 @@ export class TableData {
2828
return this.#selected.current;
2929
}
3030
set selected(value) {
31-
this.#selected.update(value);
31+
this.#selected.set(value);
3232
}
3333

3434
/**
3535
* Reactive version of a native Array.
36+
* (could be handled via decorator)
3637
*/
37-
#data = reactive.array();
38+
#data = Cell([])
3839
get data() {
39-
return this.#data;
40+
return this.#data.current;
4041
}
4142
set data(newArray) {
42-
this.#data = reactive.array(newArray);
43+
this.#data.set(reactive.array(newArray));
4344
}
4445
/*******************************
4546
* End Reactive versions of data
@@ -66,9 +67,9 @@ export class TableData {
6667
}
6768
};
6869

69-
clear = () => this.data.clear();
70+
clear = () => this.data = [];
7071
swapRows = () => {
71-
if (data.length > 998) {
72+
if (this.data.length > 998) {
7273
let second = this.data[1];
7374
let nearEnd = this.data[998];
7475

@@ -108,6 +109,7 @@ const nouns = [
108109
"burger", "pizza", "mouse", "keyboard"
109110
];
110111

112+
let rowId = 1;
111113
function buildData(count = DATA_SIZE) {
112114
const data = new Array(count);
113115

‎frameworks/keyed/react-starbeam/src/jumbotron.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import React from 'react';
2+
13
function Button({ id, title, onClick }) {
24
return (
35
<div className="col-sm-6 smallpad">
@@ -15,7 +17,7 @@ export function Jumbotron({ table }) {
1517
<div className="jumbotron">
1618
<div className="row">
1719
<div className="col-md-6">
18-
<h1>React keyed</h1>
20+
<h1>React with starbeam keyed</h1>
1921
</div>
2022
<div className="col-md-6">
2123
<div className="row">

‎frameworks/keyed/react-starbeam/src/main.jsx

Lines changed: 35 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,51 @@
1-
import { useStarbeam } from "@starbeam/react";
2-
import { createRoot } from "react-dom/client";
1+
import { useReactiveSetup } from "@starbeam/react";
2+
import ReactDOM from "react-dom/client";
3+
import React, { StrictMode } from 'react';
34

45
import { Jumbotron } from './jumbotron';
56
import { TableData } from './data';
67

7-
function Row({ selected, item, table }) {
8-
return (
9-
<tr className={selected ? "danger" : ""}>
10-
<td className="col-md-1">{item.id}</td>
11-
<td className="col-md-4">
12-
<a onClick={() => table.select(item.id)}>{item.label}</a>
13-
</td>
14-
<td className="col-md-1">
15-
<a onClick={() => table.remove(item.id)}>
16-
<span className="glyphicon glyphicon-remove" aria-hidden="true" />
17-
</a>
18-
</td>
19-
<td className="col-md-6" />
20-
</tr>
21-
);
22-
}
23-
248
function Main() {
25-
return useStarbeam(() => {
9+
return useReactiveSetup(() => {
2610
const table = new TableData();
2711

2812
return () => {
29-
<div className="container">
30-
<Jumbotron table={table} />
31-
<table className="table table-hover table-striped test-data">
32-
<tbody>
33-
{table.data.map((item) => (
34-
<Row
35-
key={item.id}
36-
item={item}
37-
selected={selected === item.id}
38-
table={table}
39-
/>
40-
))}
41-
</tbody>
42-
</table>
43-
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
13+
return (
14+
<div className="container">
15+
<Jumbotron table={table} />
16+
<table className="table table-hover table-striped test-data">
17+
<tbody>
18+
{table.data.map(({ id, label }) => (
19+
<tr key={id} className={id === table.selected ? "danger" : ""}>
20+
<td className="col-md-1">{id}</td>
21+
<td className="col-md-4">
22+
<a onClick={() => table.select(id)}>{label}</a>
23+
</td>
24+
<td className="col-md-1">
25+
<a onClick={() => table.remove(id)}>
26+
<span className="glyphicon glyphicon-remove" aria-hidden="true" />
27+
</a>
28+
</td>
29+
<td className="col-md-6" />
30+
</tr>
31+
))}
32+
</tbody>
33+
</table>
34+
35+
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true" />
4436
</div>
37+
);
4538
};
4639
});
4740
}
4841

4942

5043
let main = document.getElementById('main')
5144

52-
createRoot(main).render(<Main />);
45+
46+
let root = ReactDOM.createRoot(main);
47+
root.render(
48+
<StrictMode>
49+
<Main />
50+
</StrictMode>
51+
);

‎frameworks/keyed/react-starbeam/webpack.config.js

Lines changed: 4 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
const path = require('path');
22
const webpack = require('webpack');
3-
const TerserPlugin = require('terser-webpack-plugin');
43

54
module.exports = {
6-
mode: 'production',
7-
// mode: 'development',
5+
// mode: 'production',
6+
mode: 'development',
87
entry: {
98
main: path.join(__dirname, 'src', 'main.jsx'),
109
},
1110
output: {
1211
path: path.join(__dirname, 'dist'),
13-
filename: '[name].js'
1412
},
1513
resolve: {
1614
extensions: ['.js', '.jsx']
@@ -19,59 +17,8 @@ module.exports = {
1917
rules: [{
2018
test: /\.jsx?$/,
2119
exclude: /node_modules/,
22-
use: [
23-
{
24-
loader: 'babel-loader',
25-
options: {
26-
presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }]]
27-
}
28-
}
29-
]
20+
loader: 'babel-loader',
3021
}]
3122
},
32-
optimization: {
33-
minimizer: [
34-
new TerserPlugin({
35-
terserOptions: {
36-
parse: {
37-
// we want terser to parse ecma 8 code. However, we don't want it
38-
// to apply any minfication steps that turns valid ecma 5 code
39-
// into invalid ecma 5 code. This is why the 'compress' and 'output'
40-
// sections only apply transformations that are ecma 5 safe
41-
// https://github.com/facebook/create-react-app/pull/4234
42-
ecma: 8,
43-
},
44-
compress: {
45-
ecma: 5,
46-
warnings: false,
47-
// Disabled because of an issue with Uglify breaking seemingly valid code:
48-
// https://github.com/facebook/create-react-app/issues/2376
49-
// Pending further investigation:
50-
// https://github.com/mishoo/UglifyJS2/issues/2011
51-
comparisons: false,
52-
},
53-
mangle: {
54-
safari10: true,
55-
},
56-
output: {
57-
ecma: 5,
58-
comments: false,
59-
// Turned on because emoji and regex is not minified properly using default
60-
// https://github.com/facebook/create-react-app/issues/2488
61-
ascii_only: true,
62-
},
63-
},
64-
// Use multi-process parallel running to improve the build speed
65-
// Default number of concurrent runs: os.cpus().length - 1
66-
parallel: true,
67-
// Enable file caching
68-
cache: true,
69-
}),
70-
]
71-
},
72-
plugins: [
73-
new webpack.DefinePlugin({
74-
'process.env': { NODE_ENV: JSON.stringify('production') }
75-
}),
76-
],
23+
plugins: [],
7724
};

0 commit comments

Comments
 (0)