feat: allow passing class and style attributes (#17)

* feat: allow passing "class" and "style" attributes
marko-js · Apr 28, 2023 · 23d051b · 23d051b
1 parent cc259f4
commit 23d051b
Show file tree

Hide file tree

Showing 27 changed files with 124 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -194,6 +194,26 @@ It is removed after the request has either errored, or successfully loaded.
 </micro-frame>
 ```
 
+## `class`
+
+Optional `class` attribute which works the same way as [Marko class attribute](https://markojs.com/docs/syntax/#class-attribute).
+
+```marko
+<micro-frame src="..." class="a c"/>
+<micro-frame src="..." class={ a:true, b:false, c:true }/>
+<micro-frame src="..." class=["a", null, { c:true }]/>
+```
+
+## `style`
+
+Optional `style` attribute which works the same way as [Marko style attribute](https://markojs.com/docs/syntax/#style-attribute).
+
+```marko
+<micro-frame src="..." style="display:block;margin-right:16px"/>
+<micro-frame src="..." style={ display: "block", color: false, marginRight: 16 }/>
+<micro-frame src="..." style=["display:block", null, { marginRight: 16 }]/>
+```
+
 # Communicating between host and child
 
 Communicating with the embedded application happens primarily in one of two ways, either you want to do a full reload of and get new HTML, or you want to orchestrate a client side rendered update.

diff --git a/src/components/micro-frame-slot/component/node.marko b/src/components/micro-frame-slot/component/node.marko
@@ -7,7 +7,7 @@ $ {
   const loadingPromise =
     input.loading && new Promise((res) => (finishLoading = res));
 }
-<div id=component.id data-slot=input.slot data-from=input.from>
+<div id=component.id class=input.class style=input.style data-slot=input.slot data-from=input.from>
   <macro name="wait">
     <await(stream.next())
       client-reorder=input.clientReorder

diff --git a/src/components/micro-frame-slot/component/web.marko b/src/components/micro-frame-slot/component/web.marko
@@ -1,6 +1,6 @@
 static function noop() {}
 
-<div>
+<div class=input.class style=input.style>
   <${
     state.err
       ? input.catch || noop

diff --git a/src/components/micro-frame-slot/marko-tag.json b/src/components/micro-frame-slot/marko-tag.json
@@ -50,5 +50,19 @@
         "description": "A block rendered while the resource is loading and removed after loading is complete"
       }
     ]
+  },
+  "@class": {
+    "autocomplete": [
+      {
+        "description": "Marko class attribute"
+      }
+    ]
+  },
+  "@style": {
+    "autocomplete": [
+      {
+        "description": "Marko style attribute"
+      }
+    ]
   }
 }
diff --git a/src/components/micro-frame-sse/README.md b/src/components/micro-frame-sse/README.md
@@ -216,6 +216,26 @@ It is removed after the request has either errored, or successfully loaded.
 </micro-frame-slot>
 ```
 
+## `class`
+
+Optional `class` attribute which works the same way as [Marko class attribute](https://markojs.com/docs/syntax/#class-attribute).
+
+```marko
+<micro-frame-slot from="..." slot="..." class="a c"/>
+<micro-frame-slot from="..." slot="..." class={ a:true, b:false, c:true }/>
+<micro-frame-slot from="..." slot="..." class=["a", null, { c:true }]/>
+```
+
+## `style`
+
+Optional `style` attribute which works the same way as [Marko style attribute](https://markojs.com/docs/syntax/#style-attribute).
+
+```marko
+<micro-frame-slot from="..." slot="..." style="display:block;margin-right:16px"/>
+<micro-frame-slot from="..." slot="..." style={ display: "block", color: false, marginRight: 16 }/>
+<micro-frame-slot from="..." slot="..." style=["display:block", null, { marginRight: 16 }]/>
+```
+
 # Communicating between host and child
 
 Communicating between host and child works the same way as [micro-frame](../../../README.md).

diff --git a/...rame-sse/__tests__/__snapshots__/micro-frame-sse/csr-only/renders.expected/loading.1.html b/...rame-sse/__tests__/__snapshots__/micro-frame-sse/csr-only/renders.expected/loading.1.html
@@ -2,7 +2,10 @@
   Host app
 </div>
 <div />
-<div />
+<div
+  class="test"
+  style="display:block;margin-right:16px;"
+/>
 <div />
 <div />
 <div />

diff --git a/...rame-sse/__tests__/__snapshots__/micro-frame-sse/csr-only/renders.expected/loading.2.html b/...rame-sse/__tests__/__snapshots__/micro-frame-sse/csr-only/renders.expected/loading.2.html
@@ -2,7 +2,10 @@
   Host app
 </div>
 <div />
-<div />
+<div
+  class="test"
+  style="display:block;margin-right:16px;"
+/>
 <div />
 <div />
 <div>

diff --git a/...rame-sse/__tests__/__snapshots__/micro-frame-sse/csr-only/renders.expected/loading.3.html b/...rame-sse/__tests__/__snapshots__/micro-frame-sse/csr-only/renders.expected/loading.3.html
@@ -2,7 +2,10 @@
   Host app
 </div>
 <div />
-<div />
+<div
+  class="test"
+  style="display:block;margin-right:16px;"
+/>
 <div />
 <div />
 <div>

diff --git a/...rame-sse/__tests__/__snapshots__/micro-frame-sse/csr-only/renders.expected/loading.4.html b/...rame-sse/__tests__/__snapshots__/micro-frame-sse/csr-only/renders.expected/loading.4.html
@@ -2,7 +2,10 @@
   Host app
 </div>
 <div />
-<div />
+<div
+  class="test"
+  style="display:block;margin-right:16px;"
+/>
 <div />
 <div />
 <div>

diff --git a/...rame-sse/__tests__/__snapshots__/micro-frame-sse/csr-only/renders.expected/loading.5.html b/...rame-sse/__tests__/__snapshots__/micro-frame-sse/csr-only/renders.expected/loading.5.html
@@ -2,7 +2,10 @@
   Host app
 </div>
 <div />
-<div>
+<div
+  class="test"
+  style="display:block;margin-right:16px;"
+>
   <p>
     test_html for slot_1
   </p>

diff --git a/...rame-sse/__tests__/__snapshots__/micro-frame-sse/csr-only/renders.expected/loading.6.html b/...rame-sse/__tests__/__snapshots__/micro-frame-sse/csr-only/renders.expected/loading.6.html
@@ -2,7 +2,10 @@
   Host app
 </div>
 <div />
-<div>
+<div
+  class="test"
+  style="display:block;margin-right:16px;"
+>
   <p>
     test_html for slot_1
   </p>

diff --git a/...rame-sse/__tests__/__snapshots__/micro-frame-sse/csr-only/renders.expected/loading.7.html b/...rame-sse/__tests__/__snapshots__/micro-frame-sse/csr-only/renders.expected/loading.7.html
@@ -2,7 +2,10 @@
   Host app
 </div>
 <div />
-<div>
+<div
+  class="test"
+  style="display:block;margin-right:16px;"
+>
   <p>
     test_html for slot_1
   </p>

diff --git a/...rame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.0.html b/...rame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.0.html
@@ -10,7 +10,9 @@
   />
 </div>
 <div
+  class="test"
   data-from="test"
   data-slot="slot_1"
   id="GENERATED-2"
+  style="display:block;margin-right:16px;"
 />
diff --git a/...rame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.1.html b/...rame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.1.html
@@ -10,9 +10,11 @@
   />
 </div>
 <div
+  class="test"
   data-from="test"
   data-slot="slot_1"
   id="GENERATED-2"
+  style="display:block;margin-right:16px;"
 >
   <p>
     test_html for slot_1

diff --git a/...rame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.2.html b/...rame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.2.html
@@ -10,9 +10,11 @@
   />
 </div>
 <div
+  class="test"
   data-from="test"
   data-slot="slot_1"
   id="GENERATED-2"
+  style="display:block;margin-right:16px;"
 >
   <p>
     test_html for slot_1

diff --git a/...rame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.3.html b/...rame-sse/__tests__/__snapshots__/micro-frame-sse/ssr-only/renders.expected/loading.3.html
@@ -6,9 +6,11 @@
   id="GENERATED-0"
 />
 <div
+  class="test"
   data-from="test"
   data-slot="slot_1"
   id="GENERATED-1"
+  style="display:block;margin-right:16px;"
 >
   <p>
     test_html for slot_1

diff --git a/src/components/micro-frame-sse/__tests__/fixtures/csr-only/components/app.marko b/src/components/micro-frame-sse/__tests__/fixtures/csr-only/components/app.marko
@@ -9,7 +9,7 @@ class {
 
 <if(state.mounted)>
   <micro-frame-sse src="embed" name="test" read=(e => [e.lastEventId, e.data]) />
-  <micro-frame-slot from="test" slot="slot_1" />
+  <micro-frame-slot from="test" slot="slot_1" class={"test": true} style=["display:block", null, { marginRight: 16 }] />
   <micro-frame-slot from="test" slot="slot_2" />
   <micro-frame-sse src="embed" name="test2" read=(e => [e.lastEventId, e.data.replace("test", "test_2")]) />
   <micro-frame-slot from="test2" slot="slot_1" />

diff --git a/src/components/micro-frame-sse/__tests__/fixtures/ssr-only/index.marko b/src/components/micro-frame-sse/__tests__/fixtures/ssr-only/index.marko
@@ -9,7 +9,7 @@
 <body>
   <div>Host app</div>
   <micro-frame-sse src="embed" name="test" read=(e => [e.lastEventId, e.data]) />
-  <micro-frame-slot from="test" slot="slot_1" />
+  <micro-frame-slot from="test" slot="slot_1" class={"test": true} style=["display:block", null, { marginRight: 16 }] />
   <micro-frame-slot from="test" slot="slot_2" />
 </body>
 </html>
diff --git a/src/components/micro-frame/__tests__/__snapshots__/csr-only/renders.expected/loading.1.html b/src/components/micro-frame/__tests__/__snapshots__/csr-only/renders.expected/loading.1.html
@@ -1,7 +1,10 @@
 <div>
   Host app
 </div>
-<div />
+<div
+  class="test"
+  style="display:block;margin-right:16px;"
+/>
 <script>
   $csr_only_index_C=(window.$csr_only_index_C||[]).concat({"l":1,"w":[["s0-8",0,{},{"f":1}]],"t":["XTAXV1jy"]})
 </script>
diff --git a/src/components/micro-frame/__tests__/__snapshots__/csr-only/renders.expected/loading.2.html b/src/components/micro-frame/__tests__/__snapshots__/csr-only/renders.expected/loading.2.html
@@ -1,7 +1,10 @@
 <div>
   Host app
 </div>
-<div>
+<div
+  class="test"
+  style="display:block;margin-right:16px;"
+>
   <div>
     Embedded App.
   </div>

diff --git a/src/components/micro-frame/__tests__/__snapshots__/ssr-only/renders.expected/loading.0.html b/src/components/micro-frame/__tests__/__snapshots__/ssr-only/renders.expected/loading.0.html
@@ -2,6 +2,8 @@
   Host app
 </div>
 <div
+  class="test"
   data-src="embed"
   id="GENERATED-0"
+  style="display:block;margin-right:16px;"
 />
diff --git a/src/components/micro-frame/__tests__/__snapshots__/ssr-only/renders.expected/loading.1.html b/src/components/micro-frame/__tests__/__snapshots__/ssr-only/renders.expected/loading.1.html
@@ -2,8 +2,10 @@
   Host app
 </div>
 <div
+  class="test"
   data-src="embed"
   id="GENERATED-0"
+  style="display:block;margin-right:16px;"
 >
   <div>
     Embedded App.

diff --git a/src/components/micro-frame/__tests__/fixtures/csr-only/components/app.marko b/src/components/micro-frame/__tests__/fixtures/csr-only/components/app.marko
@@ -8,5 +8,5 @@ class {
 }
 
 <if(state.mounted)>
-  <micro-frame src="embed"/>
+  <micro-frame src="embed" class={"test": true} style=["display:block", null, { marginRight: 16 }] />
 </if>
diff --git a/src/components/micro-frame/__tests__/fixtures/ssr-only/index.marko b/src/components/micro-frame/__tests__/fixtures/ssr-only/index.marko
@@ -8,6 +8,6 @@
 </head>
 <body>
   <div>Host app</div>
-  <micro-frame src="embed"/>
+  <micro-frame src="embed" class={"test": true} style=["display:block", null, { marginRight: 16 }] />
 </body>
 </html>
diff --git a/src/components/micro-frame/component/node.marko b/src/components/micro-frame/component/node.marko
@@ -38,7 +38,7 @@ static async function fetchStream(input, out) {
   return res.body[Symbol.asyncIterator]();
 }
 
-<div id=component.id data-src=input.src>
+<div id=component.id class=input.class style=input.style data-src=input.src>
   <if(input.loading)>
     <${input.loading}/>
     <!-- output a comment used as a marker to detect where the loading content starts so it can be removed -->

diff --git a/src/components/micro-frame/component/web.marko b/src/components/micro-frame/component/web.marko
@@ -1,6 +1,6 @@
 static function noop() {}
 
-<div>
+<div class=input.class style=input.style>
   <${
     state.err
       ? input.catch || noop

diff --git a/src/components/micro-frame/marko-tag.json b/src/components/micro-frame/marko-tag.json
@@ -67,5 +67,19 @@
         "description": "A block rendered while the resource is loading and removed after loading is complete"
       }
     ]
+  },
+  "@class": {
+    "autocomplete": [
+      {
+        "description": "Marko class attribute"
+      }
+    ]
+  },
+  "@style": {
+    "autocomplete": [
+      {
+        "description": "Marko style attribute"
+      }
+    ]
   }
 }