Implement web components integration for <rg-tag>

reactive-graph · Apr 29, 2024 · 05d4138 · 05d4138
1 parent 64aa398
commit 05d4138
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 34 deletions.
diff --git a/components/01-atoms/tag/_preview.hbs b/components/01-atoms/tag/_preview.hbs
@@ -1,24 +1,97 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/svg+xml" href="{{ path '/favicon/favicon.svg' }}">
-    <link rel="icon" type="image/png" href="{{ path '/favicon/favicon.png' }}">
-    <link rel="stylesheet" href="{{ path '/css/reactive-graph.css' }}">
-    <title>Preview</title>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/svg+xml" href="{{ path '/favicon/favicon.svg' }}">
+  <link rel="icon" type="image/png" href="{{ path '/favicon/favicon.png' }}">
+  <link rel="stylesheet" href="{{ path '/css/reactive-graph.css' }}">
+  <title>Preview</title>
+  <link rel="preload" href="{{ path '/reactive-graph-design_bg.wasm' }}" crossorigin="anonymous" as="fetch" type="application/wasm">
+  <link rel="modulepreload" href="{{ path '/reactive-graph-design.js' }}" crossorigin="anonymous">
 </head>
 <body>
-    <main>
+<main>
+  <details open>
+    <summary>
+      <span class="font-black">&lt;p&gt;
+      {{#if _target.context.renderAsCss}}CSS Styled{{/if}}
+      {{#if _target.context.renderAsWebComponents}}Web Components{{/if}}
+      </span>
+    </summary>
+    <p>This is a {{{ yield }}} tag</p>
+  </details>
+  <details open>
+    <summary>
+      <span class="font-black">&lt;h6&gt;
+        {{#if _target.context.renderAsCss}}CSS Styled{{/if}}
+        {{#if _target.context.renderAsWebComponents}}Web Components{{/if}}
+      </span>
+    </summary>
+    <h6>This is a {{{ yield }}} tag</h6>
+  </details>
+  <details open>
+    <summary>
+      <span class="font-black">&lt;h5&gt;
+        {{#if _target.context.renderAsCss}}CSS Styled{{/if}}
+        {{#if _target.context.renderAsWebComponents}}Web Components{{/if}}
+      </span>
+    </summary>
+    <h5>This is a {{{ yield }}} tag</h5>
+  </details>
+  <details open>
+    <summary>
+      <span class="font-black">&lt;h4&gt;
+        {{#if _target.context.renderAsCss}}CSS Styled{{/if}}
+        {{#if _target.context.renderAsWebComponents}}Web Components{{/if}}
+      </span>
+    </summary>
+    <h4>This is a {{{ yield }}} tag</h4>
+  </details>
+  <details open>
+    <summary>
+      <span class="font-black">&lt;h3&gt;
+        {{#if _target.context.renderAsCss}}CSS Styled{{/if}}
+        {{#if _target.context.renderAsWebComponents}}Web Components{{/if}}
+      </span>
+    </summary>
+    <h3>This is a {{{ yield }}} tag</h3>
+  </details>
+  <details open>
+    <summary>
+      <span class="font-black">&lt;h2&gt;
+        {{#if _target.context.renderAsCss}}CSS Styled{{/if}}
+        {{#if _target.context.renderAsWebComponents}}Web Components{{/if}}
+      </span>
+    </summary>
+    <h2>This is a {{{ yield }}} tag</h2>
+  </details>
+  <details open>
+    <summary>
+      <span class="font-black">&lt;h1&gt;
+        {{#if _target.context.renderAsCss}}CSS Styled{{/if}}
+        {{#if _target.context.renderAsWebComponents}}Web Components{{/if}}
+      </span>
+    </summary>
+    <h1>This is a {{{ yield }}} tag</h1>
+  </details>
+  <details open>
+    <summary>
+      <span class="font-black">&lt;blockquote&gt; &lt;p&gt;
+        {{#if _target.context.renderAsCss}}CSS Styled{{/if}}
+        {{#if _target.context.renderAsWebComponents}}Web Components{{/if}}
+      </span>
+    </summary>
+    <blockquote>
       <p>This is a {{{ yield }}} tag</p>
-      <h6>This is a {{{ yield }}} tag</h6>
-      <h5>This is a {{{ yield }}} tag</h5>
-      <h4>This is a {{{ yield }}} tag</h4>
-      <h3>This is a {{{ yield }}} tag</h3>
-      <h2>This is a {{{ yield }}} tag</h2>
-      <h1>This is a {{{ yield }}} tag</h1>
-      <blockquote><p>This is a {{{ yield }}} tag</p></blockquote>
-    </main>
+    </blockquote>
+  </details>
+</main>
+<script type="module">
+  import init, * as bindings from "{{ path '/reactive-graph-design.js' }}";
+  init("{{ path '/reactive-graph-design_bg.wasm' }}");
+  window.wasmBindings = bindings;
+</script>
 </body>
 </html>
diff --git a/components/01-atoms/tag/tag--component.hbs b/components/01-atoms/tag/tag--component.hbs
diff --git a/components/01-atoms/tag/tag--entity-instance.hbs b/components/01-atoms/tag/tag--entity-instance.hbs
diff --git a/components/01-atoms/tag/tag--entity-type.hbs b/components/01-atoms/tag/tag--entity-type.hbs
diff --git a/components/01-atoms/tag/tag--relation-instance.hbs b/components/01-atoms/tag/tag--relation-instance.hbs
diff --git a/components/01-atoms/tag/tag--relation-type.hbs b/components/01-atoms/tag/tag--relation-type.hbs
diff --git a/components/01-atoms/tag/tag.config.json b/components/01-atoms/tag/tag.config.json
@@ -5,41 +5,99 @@
     {
       "name": "default",
       "context": {
-        "tag": "string"
+        "ty": "string"
       }
     },
     {
-      "name": "component",
+      "name": "component__css",
       "context": {
-        "tag": "component"
+        "ty": "component",
+        "text": "Component",
+        "renderAsCss": true
       }
     },
     {
-      "name": "entity-type",
+      "name": "component__web-components",
       "context": {
-        "tag": "entity type"
+        "ty": "component",
+        "text": "Component",
+        "renderAsCss": false,
+        "renderAsWebComponents": true
       }
     },
     {
-      "name": "entity-instance",
+      "name": "entity-type__css",
       "context": {
-        "tag": "entity instance"
+        "ty": "entity-type",
+        "text": "Entity Type",
+        "renderAsCss": true
       }
     },
     {
-      "name": "relation-type",
+      "name": "entity-type__web-components",
       "context": {
-        "tag": "relation type"
+        "ty": "entity-type",
+        "text": "Entity Type",
+        "renderAsCss": false,
+        "renderAsWebComponents": true
       }
     },
     {
-      "name": "relation-instance",
+      "name": "entity-instance__css",
       "context": {
-        "tag": "relation instance"
+        "ty": "entity-instance",
+        "text": "Entity Instance",
+        "renderAsCss": true
+      }
+    },
+    {
+      "name": "entity-instance__web-components",
+      "context": {
+        "ty": "entity-instance",
+        "text": "Entity Instance",
+        "renderAsCss": false,
+        "renderAsWebComponents": true
+      }
+    },
+    {
+      "name": "relation-type__css",
+      "context": {
+        "ty": "relation-type",
+        "text": "Relation Type",
+        "renderAsCss": true
+      }
+    },
+    {
+      "name": "relation-type__web-components",
+      "context": {
+        "ty": "relation-type",
+        "text": "Relation Type",
+        "renderAsCss": false,
+        "renderAsWebComponents": true
+      }
+    },
+    {
+      "name": "relation-instance__css",
+      "context": {
+        "ty": "relation-instance",
+        "text": "Relation Instance",
+        "renderAsCss": true
+      }
+    },
+    {
+      "name": "relation-instance__web-components",
+      "context": {
+        "ty": "relation-instance",
+        "text": "Relation Instance",
+        "renderAsCss": false,
+        "renderAsWebComponents": true
       }
     }
   ],
   "context": {
-    "tag": "default"
+    "ty": "string",
+    "text": "string",
+    "renderAsCss": true,
+    "renderAsWebComponents": false
   }
 }
diff --git a/components/01-atoms/tag/tag.hbs b/components/01-atoms/tag/tag.hbs
@@ -1 +1,6 @@
-<span class="tag string">{{tag}}</span>
+{{#if renderAsCss}}
+  <span class="tag rg-{{ty}}">{{text}}</span>
+{{/if}}
+{{#if renderAsWebComponents}}
+  <rg-tag ty="{{ty}}">{{text}}</rg-tag>
+{{/if}}