Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

feat: implement custom rendering #1

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Conversation

chaoran-chen
Copy link
Member

@chaoran-chen chaoran-chen commented Jan 8, 2023

I'm trying to implement custom rendering using Svelte's slots. The implementation of this PR allows the library user to define a global custom rendering which will be applied to all items:

<ImageGallery>
  <div slot="render" let:item>
    <!-- ... -->
  </div>
</ImageGallery>

The open issues for which I don't know a solution are:

  1. How can we implement per-item custom rendering? It seems that the name of the slots may not be dynamic: i.e., I think (and I can be wrong!) that we can't dynamically create a slot for each item.
  2. npm run check is throwing an error that I don't understand:
ImageGallery.svelte:542:19
Error: Property 'default' does not exist on type '{ render: { slot: string; item: Partial<{ bulletClass: string; description: string; original: string; originalHeight: number; originalWidth: number; loading: LoadingStrategy; thumbnailHeight: number; ... 13 more ...; sizes: string; }>; }; }'. (ts)
  1. The code is quite ugly. In ImageGallery, we now use <SlideWrapper> four times and in SlideWrapper, we have <Slide> four times..

I added a use custom rendering checkbox to the demo page for trying it out.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant