Using wrappers

[evadecker]

Hi @mattjennings! Thanks so much for this plugin, it's been a godsend for my current project.

I'm trying to add a global live code wrapper following the docs to insert a React <Provider> but it's unclear how to pass in children from the component. Could you explain how this is accomplished?

Currently I have a wrapper file:

// LiveCodeProviders.tsx
import { TooltipProvider } from "stylus-ui";

// I think the problem is here — how do you pass in children?
export default ({ children }: { children: React.ReactNode }) => {
  return <TooltipProvider>{children}</TooltipProvider>;
};

And I'm declaring that wrapper within the config settings:

// astro.config.mjs
import { defineConfig } from "astro/config";
import liveCode from "astro-live-code";

export default defineConfig({
  // ...Other Astro/Starlight config
  integrations: [
    // ...Other integrations
    liveCode({
      layout: "src/components/LiveCodeLayout.astro",
      wrapper: "src/components/LiveCodeWrapper.tsx",
      defaultProps: {
        "client:load": true,
      },
    }),
  ],
});

This results in a TypeError:

Cannot read properties of undefined (reading 'length')

[evadecker]

Oh — it looks like this might be related to #8

[mattjennings]

eep, let me get that released and see if that fixes it for you. What you're doing should work; I should probably include an example of a Wrapper component on that docs page.

[mattjennings]

@evadecker can you try astro-live-code@0.0.3?

[evadecker]

That fixed it! Thanks so much!