More a question than an issue

[Ddupasquier]

Here is the repo if you want to fiddle with the code: https://github.com/Ddupasquier/mysvelte_ui/blob/try-html/src/lib/CodeBlock.svelte npm run dev

I am dynamically retrieving my html with this function:

const htmlCode = (component: any) => {
    if (component) {
      const container = document.createElement('div');
      const instance = new component.component({
        target: container,
        props: component.props,
      });
      const html = container.innerHTML;

      instance.$destroy();
      console.log(html);
      return html;
    }
  };

But when I attempt to use this function where I'm passing the 'code' to the highlight component, I'm getting a console error.

Here is the {#each} block where I am passing the html string into the component:

  {#each examples as example}
    <div
      class="code"
      on:mouseenter={() => (copyShown = true)}
      on:mouseleave={() => (copyShown = false)}
    >
      <Highlight language={typescript} code={() => htmlCode(example.component)} let:highlighted>
        <LineNumbers {highlighted} wrapLines />
        {#if copyShown}
          <button class="copy" on:click={() => copyToClipboard(code)}>
            Copy
          </button>
        {/if}
      </Highlight>
    </div>
  {/each}

And here is the structure of the 'example' object:

  examples: [
      {
        component: Button,
        props: {
          disabled: false,
        },
      },
    ],

And here is the error that I am getting in my dev tools:

```js
Uncaught (in promise) TypeError: value.replace is not a function
at escapeHTML (core.js:59:6)
at _highlight (core.js:2173:18)
at Object.highlight2 [as highlight] (core.js:1726:9)
at $$self.$$.update (Highlight.svelte:17:22)
at init (index.mjs:2027:8)
at new Highlight (Highlight.svelte:17:72)
at create_each_block (CodeBlock.svelte:62:23)
at create_fragment (CodeBlock.svelte:54:9)
at init (index.mjs:2031:37)
at new CodeBlock (CodeBlock.svelte:58:46)
```

[metonym]

I think the issue might be this line. The value passed to code should be a string, not a function.

<Highlight code={() => htmlCode(example.component)} />

Try this instead:

<Highlight code={htmlCode(example.component)} />

[Ddupasquier]

I think the issue might be this line. The value passed to code should be a string, not a function.

<Highlight code={() => htmlCode(example.component)} />

Try this instead:

<Highlight code={htmlCode(example.component)} />

Aaaaaaaahhhhhh xD

I've come to figure out that I put in all that work for nothing, anyways. For some reason I thought I wanted to display the compiled html, but what I actually wanted is to display the way I would want the user of the library to use the component. So unfortunately I've opted for just strings anyways.