@txstate-mws/svelte-components 1.0.1 → 1.1.0

package/.eslintrc.cjs

@@ -0,0 +1,37 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: 'standard-with-typescript',
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs', 'package/**/*', 'svelte.config.js', 'playwright.config.js'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+  rules: {
+    'import/first': 'off',
+		'no-multiple-empty-lines': 'off',
+    'no-undef-init': 'off',
+		'no-unused-vars': 'off',
+		'no-use-before-define': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/array-type': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-unused-vars': 'off', // typescript does this better
+    '@typescript-eslint/require-await': 'off',
+    '@typescript-eslint/return-await': ['error', 'always'],
+    '@typescript-eslint/strict-boolean-expressions': 'off',
+    '@typescript-eslint/prefer-readonly': ['off']
+  },
+	parserOptions: {
+		project: './tsconfig.json',
+		sourceType: 'module',
+		extraFileExtensions: ['.svelte'],
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

package/README.md

@@ -1,17 +1,36 @@
 # svelte-components
 A set of generically useful components for svelte.
 
-# Components
-[CollapsingTable](/docs/CollapsingTable.md)
-[ConditionalWrapper](/docs/ConditionalWrapper.md)
-[FocusLock](/docs/Modal.md#FocusLock)
-[Modal](/docs/Modal.md#Modal)
-[PopupMenu](/docs/PopupMenu.md)
-[ScreenReaderOnly](/docs/ScreenReaderOnly.md)
-
-# Actions
-[use:buttonify](/docs/actions.md#use:buttonify)
-[use:glue](/docs/actions.md#use:glue)
-[use:offset](/docs/actions.md#use:offset)
-[use:portal](/docs/actions.md#use:portal)
-[use:resize](/docs/actions.md#use:resize)
+## Components
+- [CollapsingTable](/docs/CollapsingTable.md)
+- [ConditionalWrapper](/docs/ConditionalWrapper.md)
+- [FocusLock](/docs/Modal.md#FocusLock)
+- [Modal](/docs/Modal.md#Modal)
+- [PopupMenu](/docs/PopupMenu.md)
+- [ScreenReaderOnly](/docs/ScreenReaderOnly.md)
+
+## Actions
+- [use:buttonify](/docs/actions.md#use:buttonify)
+- [use:glue](/docs/actions.md#use:glue)
+- [use:offset](/docs/actions.md#use:offset)
+- [use:portal](/docs/actions.md#use:portal)
+- [use:resize](/docs/actions.md#use:resize)
+
+## Developing
+
+Installed dependencies with `npm install`, then start the development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Publishing to npm
+
+```bash
+npm run package
+cd package
+npm publish
+```

package/docs/stores.md

@@ -172,7 +172,7 @@ method. So you can write a SubStore that accepts default svelte stores as well a
 `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 fast-deep-equal instead of svelte's shallow equality).
+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)

package/package.json

@@ -1,85 +1,35 @@
 {
   "name": "@txstate-mws/svelte-components",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Svelte components that are generically useful.",
-  "main": "dist/index.js",
-  "module": "esm/index.js",
-  "exports": {
-    ".": {
-      "require": "./dist/index.js",
-      "import": "./esm/index.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "types": "dist/ts/index.d.ts",
   "scripts": {
-    "test": "jest src",
-    "test:watch": "npm run test -- --watch",
-    "svelte-check": "svelte-check --ignore 'dist'",
-    "prebuild": "rm -rf ./dist",
-    "build": "npm run svelte-check && tsc -m commonjs && node scripts/preprocess.js && rm -rf dist/tests",
-    "prepublishOnly": "npm run build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:txstate-etc/svelte-components.git"
+    "dev": "svelte-kit dev",
+    "build": "svelte-kit build",
+    "package": "svelte-kit package",
+    "preview": "svelte-kit preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "eslint --ignore-path .gitignore .",
+    "test": "playwright test tests"
   },
-  "author": "Nick Wing",
-  "license": "MIT",
   "dependencies": {
-    "fast-deep-equal": "^3.1.3",
-    "rfdc": "^1.2.0",
-    "tabbable": "^5.1.5",
-    "txstate-utils": "^1.4.0"
+    "@txstate-mws/svelte-store": "^1.0.3",
+    "tabbable": "^5.2.1",
+    "txstate-utils": "^1.6.0"
   },
   "devDependencies": {
-    "@storybook/svelte": "^6.2.9",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/svelte": "^3.0.3",
-    "@testing-library/user-event": "^13.1.9",
-    "@tsconfig/svelte": "^3.0.0",
-    "@types/jest": "^27.0.2",
-    "@types/node": "^15.3.1",
-    "babel-jest": "^27.3.1",
+    "@playwright/test": "^1.18.1",
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/kit": "next",
+    "@types/tabbable": "^3.1.2",
     "eslint-config-standard-with-typescript": "^21.0.1",
-    "eslint-plugin-svelte3": "^3.0.0",
-    "fs-extra": "^10.0.0",
-    "glob": "^7.1.6",
-    "jest": "^27.3.1",
-    "svelte": "^3.37.0",
-    "svelte-check": "^2.1.0",
-    "svelte-jester": "^2.1.5",
-    "svelte-preprocess": "^4.6.5",
-    "ts-jest": "^27.0.7",
-    "tslib": "^2.1.0",
-    "typescript": "^4.1.3"
-  },
-  "jest": {
-    "testEnvironment": "jsdom",
-    "transform": {
-      "^.+\\.js$": "babel-jest",
-      "^.+\\.ts$": "ts-jest",
-      "^.+\\.svelte$": [
-        "svelte-jester",
-        {
-          "preprocess": true
-        }
-      ]
-    },
-    "transformIgnorePatterns": [],
-    "moduleFileExtensions": [
-      "js",
-      "ts",
-      "svelte"
-    ],
-    "setupFilesAfterEnv": [
-      "@testing-library/jest-dom"
-    ]
+    "eslint-plugin-svelte3": "^3.2.1",
+    "svelte": "^3.44.0",
+    "svelte-check": "^2.2.6",
+    "svelte-preprocess": "^4.9.4",
+    "svelte2tsx": "^0.5.2",
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.3"
   },
-  "sideEffects": false,
-  "files": [
-    "dist",
-    "esm",
-    "docs"
-  ]
+  "type": "module"
 }

package/playwright.config.js

@@ -0,0 +1,112 @@
+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

@@ -0,0 +1,14 @@
+<!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

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

package/src/lib/actions/buttonify.ts

@@ -0,0 +1,27 @@
+/**
+ * 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

@@ -0,0 +1,96 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,72 @@
+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()
+    }
+  }
+}