@txstate-mws/svelte-components 1.1.0 → 1.1.1

package/docs/actions.md

@@ -1,84 +0,0 @@
-# Actions
-
-## use:buttonify
-This action turns any HTML element into an accessible button that responds to keyboard events and has
-role="button" and the tabindex attribute set. You are still responsible for making sure it has
-readable content or a good label. Does NOT change styling at all.
-```svelte
-<div use:buttonify on:click={onClick}>You can tab to me and click me with the Enter key</div>
-```
-
-## use:glue
-This action glues the element it is placed on to the target specified, with a specified alignment
-option. It is most useful for dropdown or autocomplete menus.
-
-The element should have `position: absolute` on it already. It is not moved to a new place in the DOM,
-it just gets `top`/`left`/`bottom`/`right` properties set.
-
-If you have problems with the glued element being clipped by a parent with `overflow: hidden`, you
-may combine it with the `use:portal` action to move it somewhere else; `use:glue` will recalculate
-for the new location.
-
-If you do not specify an `align` setting, the default is `auto`, which will evaluate the current
-viewport and determine which alignment gives the glued element the most space to grow.
-```svelte
-<button bind:this={menubutton}>Activate Menu</button>
-<ul use:glue={{ target: menubutton, align: 'bottomright' }}>
-  <li>Menu Item 1</li>
-  <li>Menu Item 2</li>
-</ul>
-```
-
-## use:offset
-This action allows you to observe any DOM element's position in the body. You pass in a svelte store
-and it will be updated when the element moves.
-
-Another configuration option is `debounce: number`, which will debounce the updates for the specified
-number of milliseconds. Use this option if you will make a complicated calculation after each update and do not
-want to perform the calculation multiple times during a single animation or while the user is resizing
-their viewport/window. It will defer the updates until the animation or resizing stops for at least `debounce`
-milliseconds.
-```svelte
-<script>
-  const offset = writable({ top: 0, left: 0, bottom: 0, right: 0 })
-</script>
-<div use:offset={{ store: offset }}>distance between me and body top is {$offset.top}</div>
-```
-
-## use:portal
-This action allows you to move an element to a new place in the DOM upon mount. It's useful when your component
-is sensitive to getting clipped by parents with overflow: hidden or for anything like a modal or toast message
-that needs to be positioned relative to the body, but created within a smaller component, like a web form.
-
-For convenience, the default is to move it to `document.body` when you `use:portal` without any config:
-```svelte
-<div use:portal>I'm in the body now!</div>
-```
-If you are accepting an optional target as a prop, this may cause unexpected behavior where your parent component
-declines to pass a portal target, but your element ends up in `document.body`. To prevent this, you may pass `null`
-instead of `undefined`, and the element will stay where it was before the change to `null`:
-```svelte
-<script>
-  export let portaltarget = undefined
-</script>
-<div use:portal={portaltarget || null}></div>
-```
-
-## use:resize
-This action allows you to observe an element's width and height with the `ResizeObserver`. Svelte has a built-in
-`bind:clientWidth` functionality, but it works by inserting an invisible iframe into the DOM for each observation,
-which is a little ugly and potentially slow.
-
-You pass in a svelte store and it will be updated when the element's size changes.
-
-Another configuration option is `debounce: number`, which will debounce the updates for the specified
-number of milliseconds. Use this option if you will make a complicated calculation after each update and do not
-want to perform the calculation multiple times during a single animation or while the user is resizing
-their viewport/window. It will defer the updates until the animation or resizing stops for at least `debounce`
-milliseconds.
-```svelte
-<script>
-  const size = writable({ clientWidth: 100, clientHeight: 100, offsetWidth: 100, offsetHeight: 100 })
-</script>
-<div use:offset={{ store: size }}>My dimensions are {$size.offsetWidth}x{$size.offsetHeight}</div>
-```

package/docs/stores.md

@@ -1,203 +0,0 @@
-# Overview
-A set of stores to complement svelte stores. These stores perform deep equality checks on the data before updating subscribers, and are easy to subclass and add mutation methods.
-
-## Subclassing
-The most effective way to use a store is to create a Store subclass with mutation
-methods. If you're familiar with redux, these methods would be similar to actions on
-reducers.
-```typescript
-interface MyState {
-  foo: string
-  more: string
-}
-class MyStore extends Store<MyState> {
-  updateFoo (newfoo: string) {
-    // do some business logic here
-    newfoo = newfoo.trim().toLocaleLowerCase()
-    this.set({ ...this.value, foo: newfoo })
-  }
-}
-const store = new MyStore({ foo: 'bar', more: 'state' })
-store.updateFoo('baz')
-```
-This way your store controls all the business logic and your components can be truly
-reactive.
-
-Note that `this.value` contains the current version of the store. You can also use the
-`store.update` method to have the current value passed to you.
-
-### Asynchronous mutations
-Mutation methods become even more powerful when you do asynchronous updates. All of
-your asynchronous code can be encapsulated in a single method, making it much easier
-to think about how you want to handle race conditions and errors. Redux toolkit would
-call these `thunk` functions, but here they are just another method.
-```typescript
-interface BookState {
-  loading?: boolean
-  book?: Book
-  error?: string
-}
-class BookStore extends Store<BookState> {
-  async getBook (id: number) {
-    if (this.value.loading) return // one book at a time!
-    this.set({ loading: true, book: undefined, error: undefined })
-    try {
-      const book = await api.getBook(id)
-      this.set({ loading: false, book, error: undefined })
-    } catch (e) {
-      this.set({ loading: false, book: undefined, error: e.message })
-    }
-  }
-}
-```
-
-### Creating and sharing store instances
-It's up to you to determine how you'd like to create and share stores. The singleton
-pattern works great for end user applications. For instance, a global error store can
-help individual components communicate with the layout component when they experience
-a problem that's fatal for the page. Creating a singleton store for each screen in your
-application is another powerful pattern and helps all your components share the screen
-state.
-
-Context can be very convenient as well. The main benefit of putting a store in Context
-is it can be garbage collected when the context owner is unmounted. In SSR scenarios,
-global stores can leak between clients unless you're careful to reset them on each request,
-so storing in Context can be safer.
-
-Similarly, a store can be created in a component and passed down as a prop, enabling
-efficient two-way communication with its children. The main advantage over binding a
-property is that the components can share the mutation methods.
-
-## Store Types
-
-### Store
-This is the basic store type and performs deep equality checks before notifying subscribers.
-It is intended to contain simple JSON state that is easy to programmatically explore. By
-default, you are expected to update the store with fresh or cloned objects:
-```typescript
-const initialState = { foo: 'bar', more: 'state' }
-const store = new Store(initialState)
-store.update(state => ({ ...state, foo: 'baz' }))
-```
-### SafeStore
-If it's not convenient to clone your objects, you can use a `SafeStore` instead,
-which will allow you to mutate your state and then call `set` on it:
-```typescript
-const initialState = { foo: 'bar', more: 'state' }
-const store = new SafeStore(initialState)
-initialState.foo = 'baz'
-store.set(initialState) // with a regular Store, this would not notify subscribers
-```
-This is only designed to work on pure JSON (objects and arrays, not Maps, Sets, or
-any other data types). There is a slight performance cost due to deep cloning.
-
-### ActiveStore
-This is a store that does no equality checks before notifying subscribers. It can save a couple
-CPU cycles by skipping the deep equality check, but may be an overall performance degradation
-if subscribers are doing significant work and there are many updates that do not change the state.
-It is also vulnerable to unexpected infinite loops if subscribers end up triggering a redundant
-`set` command. This store is safe to use with mutated objects and is the only one that can
-handle non-JSON objects in the state.
-
-### SubStore
-This is a store that makes it convenient to interact with a portion of a larger store. You
-subscribe to a parent store in the constructor, and when you update the SubStore, your
-changes will be sent to the parent store.
-
-#### Getter / Setter version of SubStore
-This requires both a getter and setter function to handle each direction. The setter is given
-the new SubStore state and the existing parent store state and should return a new state for
-the parent store.
-```typescript
-const parentStore = new Store({
-  about: { header: 'About' },
-  events: { header: 'Events' }
-})
-const aboutStore = new SubStore(parentStore, pState => pState.about, (newAboutState, pState) => ({ ...pState, about: newAboutState }))
-aboutStore.set({ header: 'About Us' })
-// aboutStore state is { header: 'About Us' }
-// parentStore state is { about: { header: 'About Us' }, events: { header: 'Events' } }
-```
-
-#### Accessor string version of SubStore
-Alternatively, a dot-prop accessor string can be provided and both the getter and setter will be
-automatically generated.
-```typescript
-const parentStore = new Store({
-  about: { header: 'About' },
-  events: { header: 'Events' }
-})
-const aboutStore = subStore(parentStore, 'about')
-aboutStore.set({ header: 'About Us' })
-// aboutStore state is { header: 'About Us' }
-// parentStore state is { about: { header: 'About Us' }, events: { header: 'Events' } }
-```
-Note the use of a `subStore` function rather than `new SubStore`. `new SubStore` will work just
-fine, but since typescript (at the time of writing) does not allow method overloads on the
-constructor, there was no way to automatically derive types. Make a habit of using the `subStore`
-function if you use typescript.
-
-#### Subclassing SubStore
-If you want to create a class and mutation methods for your SubStore, you'll want to create an
-interface for your parent type that requires a minimum interface of the part you deal with. Then
-you create a custom constructor with your accessor or setter/getter.
-```typescript
-interface AboutType {
-  header: string
-}
-interface HasAboutType {
-  about: AboutType
-}
-class AboutStore<ParentType extends HasAboutType> extends SubStore<AboutType, ParentType> {
-  constructor (parentStore: WritableSubject<ParentType>) {
-    super(parentStore, 'about')
-  }
-
-  updateHeader (newHeader: string) {
-    this.update(state => ({ ...state, header: newHeader }))
-  }
-}
-const parentStore = new Store({
-  about: { header: 'About' },
-  events: { header: 'Events' }
-})
-const aboutStore = new AboutStore(parentStore)
-aboutStore.updateHeader('About Us')
-```
-Note the use of `WritableSubject` in the constructor. This is exported from our library, and is
-a generic way of accepting any kind of store - it accepts anything with a `subscribe` and `update`
-method. So you can write a SubStore that accepts default svelte stores as well as one of our stores.
-
-### derivedStore
-`derivedStore` is designed to allow you to compile data from one or more parent stores into another
-read-only store. Each time any parent store changes, we'll run a function to derive a new state from
-the parent state(s). This is extremely similar to svelte's `derived` store, but subscribers will only
-be notified if the derived state has changed (uses a deep-equal instead of svelte's shallow equality).
-```typescript
-const num1Store = new Store(5)
-const num2Store = new Store(7)
-const sumStore = derivedStore([num1Store, num2Store], ([num1, num2]) => num1 + num2)
-// sumStore state is 12
-num1Store.set(3)
-// sumStore state is 10
-```
-If you only use one parent store, it's possible to use a dot-prop string as the getter, basically a
-read-only version of SubStore.
-
-### convertStore
-`convertStore` is provided to add deep equality checks to a svelte store. The state is duplicated into
-one of our stores, but the duplicate is kept in sync with the parent svelte store and vice-versa. You can
-feel free to `set` and `update` the converted store even if some of your code still uses the parent svelte
-store.
-```typescript
-const svelteStore = writable({ putit: 'there' })
-const deepEqualStore = convertStore(svelteStore)
-svelteStore.set({ putit: 'here' })
-// both stores have state { putit: 'here' }
-deepEqualStore.set({ putit: 'there' })
-// both stores are back to { putit: 'there' }
-deepEqualStore.set({ putit: 'there' })
-// no subscribers are notified, because deepEqualStore caught that nothing was updated
-svelteStore.set({ putit: 'there' })
-// svelteStore subscribers are notified, but deepEqualStore subscribers are not
-```

package/playwright.config.js

@@ -1,112 +0,0 @@
-import { devices } from '@playwright/test';
-
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
-export const config = {
-
-  testDir: './tests',
-
-  /* Maximum time one test can run for. */
-  timeout: 30 * 1000,
-
-  expect: {
-
-    /**
-     * Maximum time expect() should wait for the condition to be met.
-     * For example in `await expect(locator).toHaveText();`
-     */
-    timeout: 5000
-  },
-
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
-
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
-
-  /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
-
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'line',
-
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-  use: {
-
-    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
-    actionTimeout: 0,
-
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://localhost:3000',
-
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
-  },
-
-  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: 'chromium',
-
-      /* Project-specific settings. */
-      use: {
-        ...devices['Desktop Chrome'],
-      },
-    },
-
-    {
-      name: 'firefox',
-      use: {
-        ...devices['Desktop Firefox'],
-      },
-    },
-
-    {
-      name: 'webkit',
-      use: {
-        ...devices['Desktop Safari'],
-      },
-    },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: {
-    //     ...devices['Pixel 5'],
-    //   },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: {
-    //     ...devices['iPhone 12'],
-    //   },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: {
-    //     channel: 'msedge',
-    //   },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: {
-    //     channel: 'chrome',
-    //   },
-    // },
-  ],
-
-  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
-  // outputDir: 'test-results/',
-
-  /* Run your local dev server before starting the tests */
-  webServer: {
-    command: 'npm run build && npm run preview',
-    port: 3000,
-    timeout: 120 * 1000,
-    reuseExistingServer: !process.env.CI
-  }
-};
-export default config;

package/src/app.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="description" content="" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
-		<link rel="stylesheet" href="/layout.css" />
-		%svelte.head%
-	</head>
-	<body>
-		<div id="svelte">%svelte.body%</div>
-	</body>
-</html>

package/src/global.d.ts

@@ -1 +0,0 @@
-/// <reference types="@sveltejs/kit" />

package/src/lib/actions/buttonify.ts

@@ -1,27 +0,0 @@
-/**
- * Turns any HTML element into an accessible button that responds to keyboard events and has
- * role="button" and the tabindex attribute set. You are still responsible for making sure it has
- * readable content or a good label.
- */
-export function buttonify (node: HTMLElement) {
-  function keydown (e: KeyboardEvent) {
-    if (e.key === 'Enter') {
-      if (!e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey) {
-        e.preventDefault()
-        e.stopPropagation()
-        node.dispatchEvent(new CustomEvent('click'))
-      }
-    }
-  }
-
-  node.addEventListener('keydown', keydown)
-  if (node.tabIndex < 0) node.tabIndex = 0
-  node.setAttribute('role', 'button')
-  node.style.cursor = 'pointer'
-
-  return {
-    destroy () {
-      node.removeEventListener('keydown', keydown)
-    }
-  }
-}

package/src/lib/actions/glue.ts

@@ -1,96 +0,0 @@
-import type { SettableSubject } from '@txstate-mws/svelte-store'
-import { sharedOffsetParent, targetOffset, watchForPositionChangeInContainer } from '../util/index.js'
-import type { ElementOffsets } from '../util/index.js'
-export type GlueAlignOpts = 'auto'|'bottomleft'|'bottomright'|'topleft'|'topright'
-
-export interface GlueArgs<T extends GlueAlignStore = GlueAlignStore> {
-  target: HTMLElement
-  align?: GlueAlignOpts
-  cover?: boolean
-  store?: SettableSubject<T>
-}
-
-export interface GlueAlignStore {
-  valign: 'bottom'|'top'
-  halign: 'left'|'right'
-}
-
-let setBodyRelative = false
-export function glue (el: HTMLElement, { target, align = 'auto', cover = false, store }: GlueArgs) {
-  if (!setBodyRelative) {
-    setBodyRelative = true
-    document.body.style.position = 'relative'
-  }
-  let halign: GlueAlignStore['halign']
-  let valign: GlueAlignStore['valign']
-  let sharedOffset = sharedOffsetParent(el, target)
-
-  function reposition (offset: Required<ElementOffsets>) {
-    if (!target || !sharedOffset || !(el.offsetParent instanceof HTMLElement)) return
-    let autoalign = align
-    const parentoffset = el.offsetParent === sharedOffset && target !== sharedOffset ? { top: 0, left: 0, bottom: 0, right: 0 } : targetOffset(el.offsetParent, sharedOffset)
-    if (align === 'auto') {
-      const rect = target.getBoundingClientRect()
-      const leftright = window.innerWidth - rect.right > rect.left ? 'left' : 'right'
-      const topbottom = window.innerHeight - rect.bottom > rect.top ? 'bottom' : 'top'
-      autoalign = topbottom + leftright as 'auto'
-    }
-    const targetHeight = target.offsetHeight
-    if (autoalign === 'bottomleft') {
-      requestAnimationFrame(() => {
-        el.style.top = `${offset.top + (cover ? 0 : targetHeight) - parentoffset.top}px`
-        el.style.left = `${offset.left - parentoffset.left}px`
-        el.style.bottom = ''
-        el.style.right = ''
-      })
-      valign = 'bottom'
-      halign = 'left'
-    } else if (autoalign === 'bottomright') {
-      requestAnimationFrame(() => {
-        el.style.top = `${offset.top + (cover ? 0 : targetHeight) - parentoffset.top}px`
-        el.style.left = ''
-        el.style.bottom = ''
-        el.style.right = `${offset.right - parentoffset.right}px`
-      })
-      valign = 'bottom'
-      halign = 'right'
-    } else if (autoalign === 'topleft') {
-      requestAnimationFrame(() => {
-        el.style.top = ''
-        el.style.left = `${offset.left - parentoffset.left}px`
-        el.style.bottom = `${offset.bottom + (cover ? 0 : targetHeight) - parentoffset.bottom}px`
-        el.style.right = ''
-      })
-      valign = 'top'
-      halign = 'left'
-    } else if (autoalign === 'topright') {
-      requestAnimationFrame(() => {
-        el.style.top = ''
-        el.style.left = ''
-        el.style.bottom = `${offset.bottom + (cover ? 0 : targetHeight) - parentoffset.bottom}px`
-        el.style.right = `${offset.right - parentoffset.right}px`
-      })
-      valign = 'top'
-      halign = 'right'
-    }
-    store?.update(v => ({ ...v, valign, halign }))
-  }
-  const { destroy, update } = watchForPositionChangeInContainer(target, sharedOffset, reposition)
-
-  return {
-    update ({ target: utarget, align: ualign = 'auto', cover: ucover = false, store: ustore }: GlueArgs) {
-      align = ualign
-      cover = ucover
-      if (ustore && ustore !== store) {
-        ustore.update(v => ({ ...v, valign, halign }))
-        store = ustore
-      }
-      if (target !== utarget) {
-        sharedOffset = sharedOffsetParent(el, utarget)
-        target = utarget
-        update(target, sharedOffset, reposition)
-      }
-    },
-    destroy
-  }
-}

package/src/lib/actions/index.ts

@@ -1,7 +0,0 @@
-export * from './buttonify.js'
-export * from './glue.js'
-export * from './offset.js'
-export * from './portal.js'
-export * from './resize.js'
-export * from './sticky.js'
-export * from './stickyfixed.js'

package/src/lib/actions/offset.ts

@@ -1,43 +0,0 @@
-import { Store } from '@txstate-mws/svelte-store'
-import type { WritableSubject } from '@txstate-mws/svelte-store'
-import { debounced, watchForPositionChange } from '../util/index.js'
-import type { ElementOffsets } from '../util/index.js'
-
-interface OffsetConfig<T extends ElementOffsets = ElementOffsets> {
-  debounce?: boolean|number
-  store?: WritableSubject<T>
-}
-
-export class OffsetStore extends Store<ElementOffsets> {
-  constructor (initialState?: ElementOffsets) {
-    super(initialState ?? { top: 0, right: 0, bottom: 0, left: 0 })
-  }
-}
-
-export function offset (el: HTMLElement, config?: OffsetConfig) {
-  if (config?.debounce === true) config.debounce = 100
-  let lastOffset: ElementOffsets = {}
-  function lookforoffsetchange (current: ElementOffsets) {
-    lastOffset = current
-    if (config?.store) config.store.update(v => ({ ...v, ...current }))
-    el.dispatchEvent(new CustomEvent('offset', { detail: current }))
-  }
-  let resolvedchange = config?.debounce ? debounced(lookforoffsetchange, config.debounce) : lookforoffsetchange
-
-  const { destroy, update } = watchForPositionChange(el, resolvedchange)
-
-  return {
-    update (newConfig?: OffsetConfig) {
-      if (newConfig?.debounce === true) newConfig.debounce = 100
-      if (newConfig?.store !== config?.store) {
-        newConfig?.store?.update(v => ({ ...v, ...lastOffset }))
-      }
-      if (newConfig?.debounce !== config?.debounce) {
-        resolvedchange = newConfig?.debounce ? debounced(lookforoffsetchange, newConfig.debounce as any) : lookforoffsetchange
-        update(el, resolvedchange)
-      }
-      config = newConfig
-    },
-    destroy
-  }
-}

package/src/lib/actions/portal.ts

@@ -1,13 +0,0 @@
-export function portal (el: HTMLElement, target: HTMLElement|null = document.body) {
-  function update (target: HTMLElement|null = document.body) {
-    target?.appendChild(el)
-  }
-  function destroy () {
-    el.parentElement?.removeChild(el)
-  }
-  update(target)
-  return {
-    update,
-    destroy
-  }
-}

package/src/lib/actions/resize.ts

@@ -1,72 +0,0 @@
-import { equal } from 'txstate-utils'
-import { Store } from '@txstate-mws/svelte-store'
-import type { SettableSubject } from '@txstate-mws/svelte-store'
-import { debounced } from '../util/index.js'
-
-export interface ElementSize {
-  clientWidth?: number
-  clientHeight?: number
-  offsetWidth?: number
-  offsetHeight?: number
-}
-
-interface ResizeConfig {
-  debounce?: boolean|number
-  store?: SettableSubject<ElementSize>
-}
-
-export class ResizeStore extends Store<ElementSize> {
-  constructor (initialState?: ElementSize) {
-    super(initialState ?? typeof window === 'undefined'
-      ? {
-          clientWidth: 1024,
-          clientHeight: 1024,
-          offsetWidth: 1024,
-          offsetHeight: 1024
-        }
-      : {
-          clientWidth: window.innerWidth,
-          clientHeight: window.innerHeight,
-          offsetWidth: window.innerWidth,
-          offsetHeight: window.innerHeight
-        }
-    )
-  }
-}
-
-export function resize (el: HTMLElement, config?: ResizeConfig) {
-  if (config?.debounce === true) config.debounce = 100
-  let lastSize: ElementSize = {}
-  function watch () {
-    const current = { clientWidth: el.clientWidth, clientHeight: el.clientHeight, offsetWidth: el.offsetWidth, offsetHeight: el.offsetHeight }
-    if (!equal(lastSize, current)) {
-      lastSize = current
-      if (config?.store) config.store.set(current)
-      el.dispatchEvent(new CustomEvent('resize', { detail: current }))
-    }
-  }
-
-  if (typeof ResizeObserver === 'undefined') return watch() // support SSR
-
-  let observer = new ResizeObserver(config?.debounce ? debounced(watch, config.debounce) : watch)
-  observer.observe(el)
-  watch()
-
-  return {
-    update (newConfig?: ResizeConfig) {
-      if (newConfig?.debounce === true) newConfig.debounce = 100
-      if (newConfig?.store !== config?.store) {
-        newConfig?.store?.set(lastSize)
-      }
-      if (!!newConfig?.debounce !== !!config?.debounce) {
-        observer.disconnect()
-        observer = new ResizeObserver(newConfig?.debounce ? debounced(watch, newConfig.debounce) : watch)
-        observer.observe(el)
-      }
-      config = newConfig
-    },
-    destroy () {
-      observer.disconnect()
-    }
-  }
-}