Skip to content

Commit 5fa1af5

Browse files
NoEgAmNoEgAm
authored
Merge pull request #1 from fp-china/snippets
adding some examples
2 parents 58cf91b + 6f2117c commit 5fa1af5

File tree

7 files changed

+465
-43
lines changed

7 files changed

+465
-43
lines changed

‎README.md

+15-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,20 @@
1-
## Boilerplate project for Respo
1+
# MoonBit code comparison
2+
3+
Run in development mode:
4+
5+
```bash
6+
moon build --target js --debug --watch
7+
8+
yarn
9+
yarn vite
10+
```
11+
12+
Build assets:
213

314
```bash
4-
yarn build
15+
moon build --target js
16+
yarn
17+
yarn vite build --base ./
518
```
619

720
## License

‎index.html

+17
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,23 @@
22
<html>
33
<head>
44
<title>MoonBit is like Rust</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" data-rh="true">
7+
<style>
8+
.ui-compare-by-width {
9+
/** row */
10+
display: flex;
11+
flex-direction: row;
12+
}
13+
@media only screen and (max-width: 800px) {
14+
.ui-compare-by-width {
15+
/** row */
16+
display: flex;
17+
flex-direction: column;
18+
gap: 8px;
19+
}
20+
}
21+
</style>
522
</head>
623
<body>
724
<!-- <script src="./main.mjs" type="module"></script> -->

‎moon.mod.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "tiye/respo-workflow",
33
"version": "0.1.0",
44
"deps": {
5-
"tiye/respo": "0.0.17",
5+
"tiye/respo": "0.0.19",
66
"tiye/dom-ffi": "0.0.6"
77
},
88
"readme": "README.md",

‎src/main/container.mbt

+122-35
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
///|
12
fn comp_container() -> @respo_node.RespoNode[ActionOp] {
23
div(
34
class_name=str_spaced(
@@ -17,55 +18,104 @@ fn comp_container() -> @respo_node.RespoNode[ActionOp] {
1718
),
1819
[
1920
text_node("MoonBit is like Rust (Except that it has GC)"),
20-
text_node("Fork repo if you want to contribute."),
21+
@respo_node.a(
22+
href="https://github.com/fp-china/moonbit-is-like-rust",
23+
target=Blank,
24+
inner_text="Fork repo if you want to contribute.",
25+
),
2126
],
2227
),
2328
div(
2429
style=respo_style(background_color=RawString("#eee")),
2530
[
2631
div(
27-
style=respo_style(max_width=Px(1400), margin=Auto),
32+
class_name=style_section,
33+
[
34+
div(
35+
class_name=style_section_inner,
36+
[
37+
comp_section("BASICS"),
38+
comp_topic("Hello World"),
39+
comp_compare(
40+
"println(\"Hello, World!\")", "println!(\"Hello, World!\");",
41+
),
42+
comp_topic("Variables And Constants"),
43+
comp_compare(mbt_variable, rs_variable),
44+
comp_topic("Explicit Types"),
45+
comp_compare(mbt_explict_type, rs_explict_type),
46+
comp_topic("Type Coercion"),
47+
comp_compare(mbt_type_coercion, rs_type_coercion),
48+
comp_topic("String Interpolation"),
49+
comp_compare(
50+
mbt_string_interpolation, rs_string_interpolation,
51+
),
52+
comp_topic("Range Operator"),
53+
comp_compare(mbt_range_operator, rs_range_operator),
54+
],
55+
),
56+
],
57+
),
58+
div(
59+
class_name=style_section,
60+
[
61+
div(
62+
class_name=style_section_inner,
63+
[
64+
comp_section("COLLECTIONS"),
65+
comp_topic("Arrays"),
66+
comp_compare(mbt_arrays, rs_arrays),
67+
comp_topic("Maps"),
68+
comp_compare(mbt_maps, rs_maps),
69+
],
70+
),
71+
],
72+
),
73+
div(
74+
class_name=style_section,
75+
[
76+
div(
77+
class_name=style_section_inner,
78+
[
79+
comp_section("FUNCTIONS"),
80+
comp_topic("Functions"),
81+
comp_compare(mbt_functions, rs_functions),
82+
comp_topic("Tuple Return"),
83+
comp_compare(mbt_tuple_return, rs_tuple_return),
84+
comp_topic("Function Type"),
85+
comp_compare(mbt_function_type, rs_function_type),
86+
comp_topic("HsahMap"),
87+
comp_compare(mbt_hashmap, rs_hashmap),
88+
comp_topic("Named Arguments"),
89+
comp_compare(mbt_named_arguments, rs_named_arguments),
90+
],
91+
),
92+
],
93+
),
94+
div(
95+
class_name=style_section,
2896
[
29-
comp_section("BASICS"),
30-
comp_topic("Hello World"),
31-
comp_compare(
32-
"println(\"Hello, World!\")", "println!(\"Hello, World!\");",
97+
div(
98+
class_name=style_section_inner,
99+
[
100+
comp_section("TRAITS"),
101+
comp_topic("Methods"),
102+
comp_compare(mbt_struct_methods, rs_struct_methods),
103+
comp_topic("Trait Objects"),
104+
comp_compare(mbt_trait_objects, rs_trait_objects),
105+
comp_topic("Default Implementation"),
106+
comp_compare(mbt_default_trait_impl, rs_default_trait_impl),
107+
],
33108
),
34-
comp_topic("Variables And Constants"),
35-
comp_compare(mbt_variable, rs_variable),
36-
comp_topic("Explicit Types"),
37-
comp_topic("Type Coercion"),
38-
comp_topic("String Interpolation"),
39-
comp_topic("Range Operator"),
40-
comp_topic("Inclusive Range Operator"),
41-
comp_section("COLLECTIONS"),
42-
comp_topic("Arrays"),
43-
comp_topic("Maps"),
44-
comp_topic("Empty Collections"),
45-
comp_section("FUNCTIONS"),
46-
comp_topic("Functions"),
47-
comp_topic("Tuple Return"),
48-
comp_topic("Variable Number Of Arguments"),
49-
comp_topic("Function Type"),
50-
comp_topic("Map"),
51-
comp_topic("Sort"),
52-
comp_topic("Named Arguments"),
53-
comp_section("TRAITS"),
54-
comp_topic("Declaration"),
55-
comp_topic("Usage"),
56-
comp_topic("Default Implementation"),
57-
comp_topic("Downcasting"),
58-
comp_topic("Protocol"),
59-
comp_topic("Extensions"),
60-
@respo_node.space(height=200),
61109
],
62110
),
111+
@respo_node.space(height=400),
63112
],
64113
),
65114
],
66115
)
67116
}
68117

118+
///|
69119
fn comp_section(title : String) -> @respo_node.RespoNode[ActionOp] {
70120
div(
71121
class_name=str_spaced([]),
@@ -81,6 +131,7 @@ fn comp_section(title : String) -> @respo_node.RespoNode[ActionOp] {
81131
)
82132
}
83133

134+
///|
84135
fn comp_topic(title : String) -> @respo_node.RespoNode[ActionOp] {
85136
div(
86137
class_name=str_spaced([@respo.ui_center]),
@@ -95,12 +146,13 @@ fn comp_topic(title : String) -> @respo_node.RespoNode[ActionOp] {
95146
)
96147
}
97148

149+
///|
98150
fn comp_compare(
99151
mbt_code : String,
100152
rs_code : String
101153
) -> @respo_node.RespoNode[ActionOp] {
102154
div(
103-
class_name=str_spaced([@respo.ui_row]),
155+
class_name="ui-compare-by-width", // Respo does not support media query yet
104156
style=respo_style(padding=Px(12)),
105157
[
106158
div(
@@ -122,7 +174,7 @@ fn comp_compare(
122174
)
123175
}
124176

125-
/// a custom style for code block
177+
///| a custom style for code block
126178
fn code_block[T](
127179
class_name? : String,
128180
style? : @respo_node.RespoStyle,
@@ -142,11 +194,13 @@ fn code_block[T](
142194
)
143195
}
144196

197+
///|
145198
fn str_some_spaced(arr : Array[String?]) -> String {
146199
arr.filter(fn(x) { not(x.is_empty()) }).map(fn(x) { x.unwrap() })
147200
|> String::concat(separator=" ")
148201
}
149202

203+
///|
150204
let style_code_block : String = declare_static_style(
151205
[
152206
(
@@ -158,12 +212,14 @@ let style_code_block : String = declare_static_style(
158212
border_radius=4,
159213
line_height=Em(1.6),
160214
font_size=13,
215+
overflow=Auto,
161216
),
162217
),
163218
("pre&", respo_style(margin=Px(0))),
164219
],
165220
)
166221

222+
///|
167223
let style_lang_name : String = declare_static_style(
168224
[
169225
(
@@ -177,3 +233,34 @@ let style_lang_name : String = declare_static_style(
177233
),
178234
],
179235
)
236+
237+
///|
238+
let style_section : String = declare_static_style(
239+
[
240+
("&", respo_style(background_color=White)),
241+
// set code color
242+
("& .\{style_code_block}", respo_style(background_color=RawString("#eee"))),
243+
// every 2nd of parent
244+
("&:nth-child(2n)", respo_style(background_color=RawString("#eee"))),
245+
// and code block has changed color too
246+
(
247+
"&:nth-child(2n) .\{style_code_block}",
248+
respo_style(background_color=White),
249+
),
250+
],
251+
)
252+
253+
///|
254+
let style_section_inner : String = declare_static_style(
255+
[
256+
(
257+
"&",
258+
respo_style(
259+
max_width=Px(1400),
260+
margin=Auto,
261+
padding_top=Px(60),
262+
padding_bottom=Px(60),
263+
),
264+
),
265+
],
266+
)

‎src/main/main.mbt

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
///|
12
let app_store_key : String = "mbt-workflow"
23

4+
///|
35
fn view(
46
_store : Store
57
) -> @respo_node.RespoNode[ActionOp]!@respo_node.RespoCommonError {
@@ -11,6 +13,7 @@ fn view(
1113
comp_container()
1214
}
1315

16+
///|
1417
fn main {
1518
let window = @dom_ffi.window()
1619
let mount_target = window

0 commit comments

Comments
 (0)