Skip to content

Commit 70e0f87

Browse files
mkustermannmkustermann
committed
Add TodoMVC for dart2js & dart2wasm
This is a Jaspr Dart Web TodoMVC app compiled with dart2js and dart2wasm. We compile with * dart2js in unsound (-O4) mode * dart2wasm in sound (-O2) mode as those are the default settings in e.g. flutter tooling. To remember this difference we specify the optimization mode in the benchmark name. The app can be compiled by installing the Dart SDK and running ``` experimental/dart-jaspr-todomvc % ./build.sh |& tee build.log ... ```
1 parent bb9e3e1 commit 70e0f87

File tree

27 files changed

+7884
-104
lines changed

27 files changed

+7884
-104
lines changed

‎experimental/dart-jaspr-todomvc/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.dart_tool/
2+
build/

‎experimental/dart-jaspr-todomvc/README.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# todomvc
2+
3+
A Jaspr implementation of todomvc, written in Dart and compilable to either JavaScript or WebAssembly.
4+
5+
## Setup
6+
7+
Install [dart](https://dart.dev/get-dart).
8+
9+
## Running the project
10+
11+
Run your project using `dart run jaspr_cli:jaspr serve`.
12+
13+
The development server will be available on `http://localhost:8080`.
14+
15+
## Building the project
16+
17+
Build your project using either:
18+
19+
- Generate JavaScript via: `jaspr build -O4 --extra-js-compiler-option=--no-minify`
20+
- Generate WebAssembly via: `jaspr build -O4 --experimental-wasm --extra-wasm-compiler-option=--no-strip-wasm`
21+
22+
The output will be located inside the `build/jaspr/` directory.

‎experimental/dart-jaspr-todomvc/analysis_options.yaml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
include: package:lints/recommended.yaml
2+
3+
analyzer:
4+
# Jaspr has a custom lint package 'jaspr_lints', which needs the 'custom_lint' analyzer plugin.
5+
#
6+
# Unfortunately, running 'dart analyze' does not pick up the custom lints. Instead, you need to
7+
# run a separate command for this: `jaspr analyze`
8+
plugins:
9+
- custom_lint

‎experimental/dart-jaspr-todomvc/build.log

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
+ set -e
2+
+ echo 'Current Dart SDK version'
3+
Current Dart SDK version
4+
+ dart --version
5+
Dart SDK version: 3.9.0-edge.eb41d43c0dba5021ba37b11e54e0fe09f7b192b5 (main) (Tue May 6 04:09:12 2025 -0700) on "macos_arm64"
6+
+ echo 'Fetching dependencies'
7+
Fetching dependencies
8+
+ dart pub get
9+
Resolving dependencies...
10+
Downloading packages...
11+
_fe_analyzer_shared 80.0.0 (82.0.0 available)
12+
analyzer 7.3.0 (7.4.4 available)
13+
analyzer_plugin 0.12.0 (0.13.0 available)
14+
custom_lint 0.7.3 (0.7.5 available)
15+
custom_lint_builder 0.7.3 (0.7.5 available)
16+
custom_lint_core 0.7.1 (0.7.5 available)
17+
dds 4.2.7 (5.0.0 available)
18+
devtools_shared 10.0.2 (11.2.0 available)
19+
dwds 24.3.5 (24.3.10 available)
20+
freezed_annotation 2.4.4 (3.0.0 available)
21+
http 1.3.0 (1.4.0 available)
22+
json_rpc_2 3.0.3 (4.0.0 available)
23+
mime 1.0.6 (2.0.0 available)
24+
shelf_web_socket 2.0.1 (3.0.0 available)
25+
vm_service 14.3.1 (15.0.0 available)
26+
web 1.1.0 (1.1.1 available)
27+
Got dependencies!
28+
16 packages have newer versions incompatible with dependency constraints.
29+
Try `dart pub outdated` for more information.
30+
+ echo 'Building dart2js version in -O4'
31+
Building dart2js version in -O4
32+
+ rm -rf build dist/out-dart2js-O4
33+
+ dart run jaspr_cli:jaspr build -O4 --extra-js-compiler-option=--disable-program-split
34+
Building jaspr for client rendering mode.
35+
⠋ Building web assets......⠙ Building web assets...... (0ms)✓ Completed building web assets. (10.7s)
36+
Completed building project to /build/jaspr.
37+
+ mkdir -p dist/out-dart2js-O4
38+
+ cp build/jaspr/index.html build/jaspr/base.css build/jaspr/index.css build/jaspr/favicon.ico build/jaspr/main.dart.js dist/out-dart2js-O4
39+
+ echo 'Building dart2js version in -O4'
40+
Building dart2js version in -O4
41+
+ rm -rf build dist/out-dart2wasm-O2
42+
+ dart run jaspr_cli:jaspr build -O2 --experimental-wasm
43+
Building jaspr for client rendering mode.
44+
⠋ Building web assets......⠙ Building web assets...... (0ms)✓ Completed building web assets. (11.3s)
45+
Completed building project to /build/jaspr.
46+
+ mkdir -p dist/out-dart2wasm-O2
47+
+ cp build/jaspr/index.html build/jaspr/base.css build/jaspr/index.css build/jaspr/favicon.ico build/jaspr/main.dart.js build/jaspr/main.mjs build/jaspr/main.wasm dist/out-dart2wasm-O2

‎experimental/dart-jaspr-todomvc/build.sh

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
#!/bin/bash
2+
3+
JS_OUT=dist/out-dart2js-O4
4+
WASM_OUT=dist/out-dart2wasm-O2
5+
6+
set -x
7+
set -e
8+
9+
echo "Current Dart SDK version"
10+
dart --version
11+
12+
echo "Fetching dependencies"
13+
dart pub get
14+
15+
# NOTE: For profiling add the following argument to get symbols
16+
# --extra-js-compiler-option=--no-minify
17+
echo "Building dart2js version in -O4"
18+
rm -rf build $JS_OUT
19+
dart run jaspr_cli:jaspr build -O4 --extra-js-compiler-option=--disable-program-split
20+
mkdir -p $JS_OUT
21+
cp build/jaspr/{index.html,base.css,index.css,favicon.ico,main.dart.js} $JS_OUT
22+
23+
# NOTE: For profiling add the following argument to get symbols
24+
# --extra-wasm-compiler-option=--no-strip-wasm
25+
echo "Building dart2js version in -O4"
26+
rm -rf build $WASM_OUT
27+
dart run jaspr_cli:jaspr build -O2 --experimental-wasm
28+
mkdir -p $WASM_OUT
29+
cp build/jaspr/{index.html,base.css,index.css,favicon.ico,main.dart.js,main.mjs,main.wasm} $WASM_OUT

‎experimental/dart-jaspr-todomvc/dist/out-dart2js-O4/base.css

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
hr {
2+
margin: 20px 0;
3+
border: 0;
4+
border-top: 1px dashed #c5c5c5;
5+
border-bottom: 1px dashed #f7f7f7;
6+
}
7+
8+
.learn a {
9+
font-weight: normal;
10+
text-decoration: none;
11+
color: #b83f45;
12+
}
13+
14+
.learn a:hover {
15+
text-decoration: underline;
16+
color: #787e7e;
17+
}
18+
19+
.learn h3,
20+
.learn h4,
21+
.learn h5 {
22+
margin: 10px 0;
23+
font-weight: 500;
24+
line-height: 1.2;
25+
color: #000;
26+
}
27+
28+
.learn h3 {
29+
font-size: 24px;
30+
}
31+
32+
.learn h4 {
33+
font-size: 18px;
34+
}
35+
36+
.learn h5 {
37+
margin-bottom: 0;
38+
font-size: 14px;
39+
}
40+
41+
.learn ul {
42+
padding: 0;
43+
margin: 0 0 30px 25px;
44+
}
45+
46+
.learn li {
47+
line-height: 20px;
48+
}
49+
50+
.learn p {
51+
font-size: 15px;
52+
font-weight: 300;
53+
line-height: 1.3;
54+
margin-top: 0;
55+
margin-bottom: 0;
56+
}
57+
58+
#issue-count {
59+
display: none;
60+
}
61+
62+
.quote {
63+
border: none;
64+
margin: 20px 0 60px 0;
65+
}
66+
67+
.quote p {
68+
font-style: italic;
69+
}
70+
71+
.quote p:before {
72+
content: "“";
73+
font-size: 50px;
74+
opacity: 0.15;
75+
position: absolute;
76+
top: -20px;
77+
left: 3px;
78+
}
79+
80+
.quote p:after {
81+
content: "”";
82+
font-size: 50px;
83+
opacity: 0.15;
84+
position: absolute;
85+
bottom: -42px;
86+
right: 3px;
87+
}
88+
89+
.quote footer {
90+
position: absolute;
91+
bottom: -40px;
92+
right: 0;
93+
}
94+
95+
.quote footer img {
96+
border-radius: 3px;
97+
}
98+
99+
.quote footer a {
100+
margin-left: 5px;
101+
vertical-align: middle;
102+
}
103+
104+
.speech-bubble {
105+
position: relative;
106+
padding: 10px;
107+
background: rgba(0, 0, 0, 0.04);
108+
border-radius: 5px;
109+
}
110+
111+
.speech-bubble:after {
112+
content: "";
113+
position: absolute;
114+
top: 100%;
115+
right: 30px;
116+
border: 13px solid transparent;
117+
border-top-color: rgba(0, 0, 0, 0.04);
118+
}
119+
120+
.learn-bar > .learn {
121+
position: absolute;
122+
width: 272px;
123+
top: 8px;
124+
left: -300px;
125+
padding: 10px;
126+
border-radius: 5px;
127+
background-color: rgba(255, 255, 255, 0.6);
128+
transition-property: left;
129+
transition-duration: 500ms;
130+
}
131+
132+
@media (min-width: 899px) {
133+
.learn-bar {
134+
width: auto;
135+
padding-left: 300px;
136+
}
137+
138+
.learn-bar > .learn {
139+
left: 8px;
140+
}
141+
}

‎experimental/dart-jaspr-todomvc/dist/out-dart2js-O4/favicon.ico

2.53 KB
Binary file not shown.

0 commit comments

Comments
 (0)