Skip to content

<Component.Item> support #46

@bfanger

Description

@bfanger

Desired

<script lang="ts">
  import { Excalidraw, WelcomeScreen, MainMenu } from "@excalidraw/excalidraw";

  const react = sveltify({ Excalidraw, WelcomeScreen, MainMenu });
</script>

<div style="height: 100vh">
  <react.Excalidraw theme="dark">
    <react.WelcomeScreen />
    <react.MainMenu>
      <react.MainMenu.DefaultItems.LoadScene />
      <react.MainMenu.DefaultItems.Export />
      <react.MainMenu.DefaultItems.SaveAsImage />
    </react.MainMenu>
  </react.Excalidraw>
</div>

Current

The static properties are ignored so the sveltified MainMenu doesn't have a DefaultItems property.
To get the LoadScene, Export & SaveAsImage components sveltified, you'd write:

<script lang="ts">
  import { Excalidraw, WelcomeScreen, MainMenu } from "@excalidraw/excalidraw";

  const react = sveltify({
    Excalidraw,
    WelcomeScreen,
    MainMenu,
    LoadScene: MainMenu.DefaultItems.LoadScene,
    Export: MainMenu.DefaultItems.Export,
    SaveAsImage: MainMenu.DefaultItems.SaveAsImage,
  });
</script>

<div style="height: 100vh">
  <react.Excalidraw theme="dark">
    <react.WelcomeScreen />
    <react.MainMenu>
      <react.LoadScene />
      <react.Export />
      <react.SaveAsImage />
    </react.MainMenu>
  </react.Excalidraw>
</div>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions