Merge pull request #1 from fp-china/snippets

adding some examples
fp-china · Dec 20, 2024 · 5fa1af5 · 5fa1af5
2 parents 58cf91b + 6f2117c
commit 5fa1af5
Show file tree

Hide file tree

Showing 7 changed files with 465 additions and 43 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,20 @@
-## Boilerplate project for Respo
+# MoonBit code comparison
+
+Run in development mode:
+
+```bash
+moon build --target js --debug --watch
+
+yarn
+yarn vite
+```
+
+Build assets:
 
 ```bash
-yarn build
+moon build --target js
+yarn
+yarn vite build --base ./
 ```
 
 ## License

diff --git a/index.html b/index.html
@@ -2,6 +2,23 @@
 <html>
   <head>
     <title>MoonBit is like Rust</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" data-rh="true">
+    <style>
+    .ui-compare-by-width {
+      /** row */
+      display: flex;
+      flex-direction: row;
+    }
+    @media only screen and (max-width: 800px) {
+      .ui-compare-by-width {
+        /** row */
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+    }
+    </style>
   </head>
   <body>
     <!-- <script src="./main.mjs" type="module"></script> -->

diff --git a/moon.mod.json b/moon.mod.json
@@ -2,7 +2,7 @@
   "name": "tiye/respo-workflow",
   "version": "0.1.0",
   "deps": {
-    "tiye/respo": "0.0.17",
+    "tiye/respo": "0.0.19",
     "tiye/dom-ffi": "0.0.6"
   },
   "readme": "README.md",

diff --git a/src/main/container.mbt b/src/main/container.mbt
@@ -1,3 +1,4 @@
+///|
 fn comp_container() -> @respo_node.RespoNode[ActionOp] {
   div(
     class_name=str_spaced(
@@ -17,55 +18,104 @@ fn comp_container() -> @respo_node.RespoNode[ActionOp] {
         ),
         [
           text_node("MoonBit is like Rust (Except that it has GC)"),
-          text_node("Fork repo if you want to contribute."),
+          @respo_node.a(
+            href="https://github.com/fp-china/moonbit-is-like-rust",
+            target=Blank,
+            inner_text="Fork repo if you want to contribute.",
+          ),
         ],
       ),
       div(
         style=respo_style(background_color=RawString("#eee")),
         [
           div(
-            style=respo_style(max_width=Px(1400), margin=Auto),
+            class_name=style_section,
+            [
+              div(
+                class_name=style_section_inner,
+                [
+                  comp_section("BASICS"),
+                  comp_topic("Hello World"),
+                  comp_compare(
+                    "println(\"Hello, World!\")", "println!(\"Hello, World!\");",
+                  ),
+                  comp_topic("Variables And Constants"),
+                  comp_compare(mbt_variable, rs_variable),
+                  comp_topic("Explicit Types"),
+                  comp_compare(mbt_explict_type, rs_explict_type),
+                  comp_topic("Type Coercion"),
+                  comp_compare(mbt_type_coercion, rs_type_coercion),
+                  comp_topic("String Interpolation"),
+                  comp_compare(
+                    mbt_string_interpolation, rs_string_interpolation,
+                  ),
+                  comp_topic("Range Operator"),
+                  comp_compare(mbt_range_operator, rs_range_operator),
+                ],
+              ),
+            ],
+          ),
+          div(
+            class_name=style_section,
+            [
+              div(
+                class_name=style_section_inner,
+                [
+                  comp_section("COLLECTIONS"),
+                  comp_topic("Arrays"),
+                  comp_compare(mbt_arrays, rs_arrays),
+                  comp_topic("Maps"),
+                  comp_compare(mbt_maps, rs_maps),
+                ],
+              ),
+            ],
+          ),
+          div(
+            class_name=style_section,
+            [
+              div(
+                class_name=style_section_inner,
+                [
+                  comp_section("FUNCTIONS"),
+                  comp_topic("Functions"),
+                  comp_compare(mbt_functions, rs_functions),
+                  comp_topic("Tuple Return"),
+                  comp_compare(mbt_tuple_return, rs_tuple_return),
+                  comp_topic("Function Type"),
+                  comp_compare(mbt_function_type, rs_function_type),
+                  comp_topic("HsahMap"),
+                  comp_compare(mbt_hashmap, rs_hashmap),
+                  comp_topic("Named Arguments"),
+                  comp_compare(mbt_named_arguments, rs_named_arguments),
+                ],
+              ),
+            ],
+          ),
+          div(
+            class_name=style_section,
             [
-              comp_section("BASICS"),
-              comp_topic("Hello World"),
-              comp_compare(
-                "println(\"Hello, World!\")", "println!(\"Hello, World!\");",
+              div(
+                class_name=style_section_inner,
+                [
+                  comp_section("TRAITS"),
+                  comp_topic("Methods"),
+                  comp_compare(mbt_struct_methods, rs_struct_methods),
+                  comp_topic("Trait Objects"),
+                  comp_compare(mbt_trait_objects, rs_trait_objects),
+                  comp_topic("Default Implementation"),
+                  comp_compare(mbt_default_trait_impl, rs_default_trait_impl),
+                ],
               ),
-              comp_topic("Variables And Constants"),
-              comp_compare(mbt_variable, rs_variable),
-              comp_topic("Explicit Types"),
-              comp_topic("Type Coercion"),
-              comp_topic("String Interpolation"),
-              comp_topic("Range Operator"),
-              comp_topic("Inclusive Range Operator"),
-              comp_section("COLLECTIONS"),
-              comp_topic("Arrays"),
-              comp_topic("Maps"),
-              comp_topic("Empty Collections"),
-              comp_section("FUNCTIONS"),
-              comp_topic("Functions"),
-              comp_topic("Tuple Return"),
-              comp_topic("Variable Number Of Arguments"),
-              comp_topic("Function Type"),
-              comp_topic("Map"),
-              comp_topic("Sort"),
-              comp_topic("Named Arguments"),
-              comp_section("TRAITS"),
-              comp_topic("Declaration"),
-              comp_topic("Usage"),
-              comp_topic("Default Implementation"),
-              comp_topic("Downcasting"),
-              comp_topic("Protocol"),
-              comp_topic("Extensions"),
-              @respo_node.space(height=200),
             ],
           ),
+          @respo_node.space(height=400),
         ],
       ),
     ],
   )
 }
 
+///|
 fn comp_section(title : String) -> @respo_node.RespoNode[ActionOp] {
   div(
     class_name=str_spaced([]),
@@ -81,6 +131,7 @@ fn comp_section(title : String) -> @respo_node.RespoNode[ActionOp] {
   )
 }
 
+///|
 fn comp_topic(title : String) -> @respo_node.RespoNode[ActionOp] {
   div(
     class_name=str_spaced([@respo.ui_center]),
@@ -95,12 +146,13 @@ fn comp_topic(title : String) -> @respo_node.RespoNode[ActionOp] {
   )
 }
 
+///|
 fn comp_compare(
   mbt_code : String,
   rs_code : String
 ) -> @respo_node.RespoNode[ActionOp] {
   div(
-    class_name=str_spaced([@respo.ui_row]),
+    class_name="ui-compare-by-width", // Respo does not support media query yet
     style=respo_style(padding=Px(12)),
     [
       div(
@@ -122,7 +174,7 @@ fn comp_compare(
   )
 }
 
-/// a custom style for code block
+///| a custom style for code block
 fn code_block[T](
   class_name? : String,
   style? : @respo_node.RespoStyle,
@@ -142,11 +194,13 @@ fn code_block[T](
   )
 }
 
+///|
 fn str_some_spaced(arr : Array[String?]) -> String {
   arr.filter(fn(x) { not(x.is_empty()) }).map(fn(x) { x.unwrap() })
   |> String::concat(separator=" ")
 }
 
+///|
 let style_code_block : String = declare_static_style(
   [
     (
@@ -158,12 +212,14 @@ let style_code_block : String = declare_static_style(
         border_radius=4,
         line_height=Em(1.6),
         font_size=13,
+        overflow=Auto,
       ),
     ),
     ("pre&", respo_style(margin=Px(0))),
   ],
 )
 
+///|
 let style_lang_name : String = declare_static_style(
   [
     (
@@ -177,3 +233,34 @@ let style_lang_name : String = declare_static_style(
     ),
   ],
 )
+
+///|
+let style_section : String = declare_static_style(
+  [
+    ("&", respo_style(background_color=White)),
+    // set code color
+    ("& .\{style_code_block}", respo_style(background_color=RawString("#eee"))),
+    // every 2nd of parent
+    ("&:nth-child(2n)", respo_style(background_color=RawString("#eee"))),
+    // and code block has changed color too
+    (
+      "&:nth-child(2n) .\{style_code_block}",
+      respo_style(background_color=White),
+    ),
+  ],
+)
+
+///|
+let style_section_inner : String = declare_static_style(
+  [
+    (
+      "&",
+      respo_style(
+        max_width=Px(1400),
+        margin=Auto,
+        padding_top=Px(60),
+        padding_bottom=Px(60),
+      ),
+    ),
+  ],
+)
diff --git a/src/main/main.mbt b/src/main/main.mbt
@@ -1,5 +1,7 @@
+///|
 let app_store_key : String = "mbt-workflow"
 
+///|
 fn view(
   _store : Store
 ) -> @respo_node.RespoNode[ActionOp]!@respo_node.RespoCommonError {
@@ -11,6 +13,7 @@ fn view(
   comp_container()
 }
 
+///|
 fn main {
   let window = @dom_ffi.window()
   let mount_target = window