search

stephane-vanraes / renderless-svelte

A collection of renderless Svelte components
MIT License
277 stars 11 forks source link

v2.0 #20

Open stephane-vanraes opened 3 years ago

stephane-vanraes commented 3 years ago

I have been thinking of releasing a v2.0 of the library, this would be a major version because of some 'breaking changes'. One of the "complaints" often raised about renderless-svelte is that it is too bare-boned, this made me think of having creating three section in the libray.

1) The components we all love and cherish, this part would be similar to the current library. 2) Actions and other functions 3) Common implementations

To go a bit more in details

Actions and other functions.

Just like the components provide an abstracted way of doing common 'components', actions could be provided for some common other behaviour (clickoutside, select on focus, ...) not entiry sure of these.

The functions would more closely relate to the renderless components themselves as these would provide extra functionality to the components without requiring plenty of configuration options. An example of that could be a carousel auto player as proposed in #18

Common implementations

These would be more fleshed out version of the components, with default styling (configurable through props, custom properties or the new syntax to pass these). These could be a stepping stone as consumers can first use these for prototyping and later if desired move on to the real renderless component for design implementation. (perhaps check if I could devise a way to have reusable styles as well)

stephane-vanraes commented 3 years ago

The carousel autoplayer could be envisioned like this

<script>
  let carousel
  $: autoPlayer = carousel && new AutoPlayer(carousel)
</script>

<Carousel bind:this={carousel} />

with the AutoPlayer returning an interface allowing to play, pause, stop and control tempo or direction:

autoPlayer.stop()