CustomTags

.vscode/settings.json

@@ -39,30 +39,5 @@
             "event": "onFileChange"
         }
     ],
-    "i18n-ally.localesPaths": [],
+    "i18n-ally.localesPaths": []
-    "workbench.colorCustomizations": {
-        "activityBar.activeBackground": "#296221",
-        "activityBar.background": "#296221",
-        "activityBar.foreground": "#ffffff",
-        "activityBar.inactiveForeground": "#ffffff99",
-        "activityBarBadge.background": "#2fce11",
-        "activityBarBadge.foreground": "#15202b",
-        "commandCenter.border": "#00000099",
-        "editorGroup.border": "#296221",
-        "panel.border": "#296221",
-        "sash.hoverBorder": "#296221",
-        "sideBar.border": "#296221",
-        "statusBar.background": "#58585a",
-        "statusBar.border": "#58585a",
-        "statusBar.foreground": "#ffffff",
-        "statusBarItem.hoverBackground": "#296221",
-        "statusBarItem.remoteBackground": "#58585a",
-        "statusBarItem.remoteForeground": "#ffffff",
-        "tab.activeBorder": "#296221",
-        "titleBar.activeBackground": "#58585a",
-        "titleBar.activeForeground": "#ffffff",
-        "titleBar.border": "#58585a",
-        "titleBar.inactiveBackground": "#58585a99",
-        "titleBar.inactiveForeground": "#ffffff99"
-    }
 }

.yarn/global/telemetry.json

@@ -4,7 +4,7 @@
     "*": {
       "hits": {
         "installCount": {
-          "node-modules": 2
+          "node-modules": 4
         }
       },
       "values": {
@@ -16,13 +16,15 @@
         ],
         "commandName": [
           "upgrade-interactive",
-          "add"
+          "add",
+          "install"
         ],
         "workspaceCount": [
           "1"
         ],
         "dependencyCount": [
-          "39"
+          "39",
+          "40"
         ]
       },
       "enumerators": {

package.json

@@ -59,6 +59,7 @@
         "@sentry/tracing": "^7.20.0",
         "@splidejs/svelte-splide": "^0.2.9",
         "core-js": "3.26.1",
+        "html-parser-lite": "^0.2.2",
         "mdi-svelte": "^1.1.2",
         "svelte-i18n": "^3.4.0"
     },

src/components/App.svelte

@@ -10,6 +10,10 @@
     import Header from "./widgets/Header.svelte"
     import Footer from "./widgets/Footer.svelte"
 
+    import "./customTags"
+    import CustomTags from "./customTags/CustomTags.svelte"
+    import tags from "./customTags"
+
     export let url = ""
 
     if (url) {
@@ -60,6 +64,14 @@
 
 <Header />
 
+<CustomTags
+    html="<my-module title='t1' description='d1'>Text
+            <my-module title=t2 description=d2>Text2</my-module>
+            <b>FETT</b> im Slot
+          </my-module>"
+    tags="{tags}"
+/>
+
 <Router url="{url}">
     <Route path="/" let:params>
         <Home />

src/components/customTags/CustomTags.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" context="module">
+    import Parser from "html-parser-lite"
+    export const htmlParser = new Parser()
+</script>
+
+<script lang="ts">
+    import type { SvelteComponent } from "svelte"
+    import CustomTagsChildren from "./CustomTagsChildren.svelte"
+    export let html: string
+    export let tags: { [key: string]: typeof SvelteComponent } = {}
+
+    $: rootNode = htmlParser.parse(html)
+</script>
+
+<CustomTagsChildren nodes="{rootNode.childNodes}" tags="{tags}" />

src/components/customTags/CustomTagsChildren.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import type { SvelteComponent } from "svelte"
+
+    export let nodes
+    console.log(nodes)
+    export let tags: { [key: string]: typeof SvelteComponent } = {}
+
+    const ELEMENT_NODE = 1
+    const TEXT_NODE = 3
+</script>
+
+{#each nodes as node (node)}
+    {#if node.nodeType == TEXT_NODE}{node.textContent}{:else if node.nodeType == ELEMENT_NODE}
+        {#if tags[node.tagName]}
+            <svelte:component this="{tags[node.tagName]}" {...node.attrs}
+                ><svelte:self nodes="{node.childNodes}" tags="{tags}" /></svelte:component
+            >
+        {:else}
+            <svelte:element this="{node.tagName}" {...node.attrs}
+                ><svelte:self nodes="{node.childNodes}" tags="{tags}" /></svelte:element
+            >
+        {/if}
+    {/if}
+{/each}

src/components/customTags/MyModule.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    export let title: string
+    export let description: string
+</script>
+
+<div class="my-module">
+    <h1>{title}</h1>
+    <p>{description}</p>
+    <slot />
+</div>

src/components/customTags/index.ts

@@ -0,0 +1,5 @@
+import MyModule from "./MyModule.svelte"
+
+export default {
+    "my-module": MyModule,
+}

yarn.lock

@@ -5308,6 +5308,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html-parser-lite@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "html-parser-lite@npm:0.2.2"
+  checksum: 77c7f66156c6af9bea69957ab833dbd9dd6f042d35c67abe4db70949f0440dd95cc8aca543a7d53bd535dca7806397741bb1f56b6905c64abacd16a2db025674
+  languageName: node
+  linkType: hard
+
 "http-auth@npm:3.1.x":
   version: 3.1.3
   resolution: "http-auth@npm:3.1.3"
@@ -8604,6 +8611,7 @@ __metadata:
     cypress-terminal-report: ^4.1.2
     esbuild: ^0.15.14
     esbuild-svelte: ^0.7.3
+    html-parser-lite: ^0.2.2
     http-proxy-middleware: ^2.0.6
     less: ^4.1.3
     live-server: ^1.2.2