Skip to content

Commit 87f9ed8

Browse files
mkustermannmkustermann
authored
Add TodoMVC for dart2js & dart2wasm (#502)
Add TodoMVC written in Dart using Jaspr DOM framework This adds a TodoMVC app written in Dart using the Jaspr DOM framework. The app is compiled in two variants: dart2js and dart2wasm. See experimental/todomvc-dart-jaspr/README.md for more details.
1 parent f1eddfe commit 87f9ed8

File tree

27 files changed

+7860
-0
lines changed

27 files changed

+7860
-0
lines changed

‎experimental/todomvc-dart-jaspr/.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/todomvc-dart-jaspr/README.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# TodoMVC: Dart Jaspr
2+
3+
## Description
4+
5+
This is a TodoMVC app written in Dart using the Jaspr DOM framework. It can be
6+
compiled to either JavaScript or WebAssembly (with GC extension).
7+
8+
## Setup
9+
10+
Install [dart](https://dart.dev/get-dart) and fetch dependencies using `dart pub get`.
11+
12+
## Running the project
13+
14+
Run your project using `dart run jaspr_cli:jaspr serve`.
15+
16+
The development server will be available on `http://localhost:8080`.
17+
18+
## Building the project
19+
20+
Build your project using either:
21+
22+
- Generate JavaScript via: `dart run jaspr_cli:jaspr build -O4 --extra-js-compiler-option=--no-minify`
23+
- Generate WebAssembly via: `dart run jaspr_cli:jaspr build -O2 --experimental-wasm --extra-wasm-compiler-option=--no-strip-wasm`
24+
25+
The output will be located inside the `build/jaspr/` directory.
26+
27+
## Updating the checked-in build artifacts
28+
29+
To update the checked-in artifacts in the `dist/` directory, run
30+
31+
```
32+
./build.sh 2>&1 | tee build.log
33+
```

‎experimental/todomvc-dart-jaspr/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/todomvc-dart-jaspr/build.log

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
+ set -e
2+
+ echo 'Current Dart SDK version'
3+
Current Dart SDK version
4+
+ dart --version
5+
Dart SDK version: 3.9.0-333.0.dev (dev) (Fri Jul 11 09:03:09 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 82.0.0 (85.0.0 available)
12+
analyzer 7.4.5 (7.5.7 available)
13+
analyzer_plugin 0.13.1 (0.13.4 available)
14+
dds 4.2.7 (5.0.4 available)
15+
devtools_shared 10.0.2 (12.0.0 available)
16+
dtd 2.5.1 (4.0.0 available)
17+
dwds 24.3.5 (24.4.0 available)
18+
json_rpc_2 3.0.3 (4.0.0 available)
19+
mime 1.0.6 (2.0.0 available)
20+
shelf_web_socket 2.0.1 (3.0.0 available)
21+
vm_service 14.3.1 (15.0.2 available)
22+
webdev 3.7.1 (3.7.2 available)
23+
Got dependencies!
24+
12 packages have newer versions incompatible with dependency constraints.
25+
Try `dart pub outdated` for more information.
26+
+ echo 'Building dart2js version in -O4'
27+
Building dart2js version in -O4
28+
+ rm -rf build dist/out-dart2js-O4
29+
+ dart run jaspr_cli:jaspr build -O4 --extra-js-compiler-option=--disable-program-split
30+
Building jaspr for client rendering mode.
31+
⠋ Building web assets......⠙ Building web assets...... (1ms)✓ Completed building web assets. (11.8s)
32+
Completed building project to /build/jaspr.
33+
+ mkdir -p dist/out-dart2js-O4
34+
+ 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
35+
+ echo 'Building dart2js version in -O4'
36+
Building dart2js version in -O4
37+
+ rm -rf build dist/out-dart2wasm-O2
38+
+ dart run jaspr_cli:jaspr build -O2 --experimental-wasm
39+
Building jaspr for client rendering mode.
40+
⠋ Building web assets......⠙ Building web assets...... (1ms)✓ Completed building web assets. (12.4s)
41+
Completed building project to /build/jaspr.
42+
+ mkdir -p dist/out-dart2wasm-O2
43+
+ 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/todomvc-dart-jaspr/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/todomvc-dart-jaspr/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/todomvc-dart-jaspr/dist/out-dart2js-O4/favicon.ico

2.53 KB
Binary file not shown.

0 commit comments

Comments
 (0)