metonym/svelte-highlight

More a question than an issue

Closed this issue · 2 comments

Ddupasquier commented

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 commented

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 commented

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.

  • 👍1