diff --git a/.changeset/friendly-vans-walk.md b/.changeset/friendly-vans-walk.md new file mode 100644 index 000000000..24eb98c1d --- /dev/null +++ b/.changeset/friendly-vans-walk.md @@ -0,0 +1,5 @@ +--- +'@svelte-put/resize': major +--- + +Better naming for action parameter type diff --git a/.changeset/fuzzy-rivers-visit.md b/.changeset/fuzzy-rivers-visit.md new file mode 100644 index 000000000..e55706357 --- /dev/null +++ b/.changeset/fuzzy-rivers-visit.md @@ -0,0 +1,5 @@ +--- +'@svelte-put/resize': major +--- + +Migrated to vanilla JS (tracked at #203) diff --git a/packages/actions/resize/.gitignore b/packages/actions/resize/.gitignore new file mode 100644 index 000000000..a7c47537d --- /dev/null +++ b/packages/actions/resize/.gitignore @@ -0,0 +1 @@ +types/ diff --git a/packages/actions/resize/api-extractor.json b/packages/actions/resize/api-extractor.json deleted file mode 100644 index 2b09e5bba..000000000 --- a/packages/actions/resize/api-extractor.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", - "extends": "@svelte-put/apirc/base.json", - "projectFolder": ".", - "mainEntryPointFilePath": "/dist/src/index.d.ts" -} diff --git a/packages/actions/resize/api/docs/index.md b/packages/actions/resize/api/docs/index.md deleted file mode 100644 index 7b3c83926..000000000 --- a/packages/actions/resize/api/docs/index.md +++ /dev/null @@ -1,12 +0,0 @@ - - -[Home](./index.md) - -## API Reference - -## Packages - -| Package | Description | -| --- | --- | -| [@svelte-put/resize](./resize.md) | svelte action - use:resize svelte action that wraps [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) | - diff --git a/packages/actions/resize/api/docs/resize.md b/packages/actions/resize/api/docs/resize.md deleted file mode 100644 index b45527fd7..000000000 --- a/packages/actions/resize/api/docs/resize.md +++ /dev/null @@ -1,22 +0,0 @@ - - -[Home](./index.md) > [@svelte-put/resize](./resize.md) - -## resize package - -svelte action - `use:resize` svelte action that wraps [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) - -## Interfaces - -| Interface | Description | -| --- | --- | -| [ResizeAttributes](./resize.resizeattributes.md) | Additional attributes extended from svelte-put/resize | -| [ResizeDetail](./resize.resizedetail.md) | detail payload for resize [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) | -| [ResizeParameters](./resize.resizeparameters.md) | svelte action parameters to config behavior of resize | - -## Variables - -| Variable | Description | -| --- | --- | -| [resize](./resize.resize.md) | Create an [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) that observers this node | - diff --git a/packages/actions/resize/api/docs/resize.resize.md b/packages/actions/resize/api/docs/resize.resize.md deleted file mode 100644 index 0730e268d..000000000 --- a/packages/actions/resize/api/docs/resize.resize.md +++ /dev/null @@ -1,48 +0,0 @@ - - -[Home](./index.md) > [@svelte-put/resize](./resize.md) > [resize](./resize.resize.md) - -## resize variable - -Create an [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) that observers this node - -**Signature:** - -```typescript -resize: Action -``` - -## Remarks - -As with any svelte action, `resize` should be use with element and not component. - -```html -<-- correct usage--> -
- -<-- incorrect usage--> - -``` - -## Example - - -```html - - -
- ... -
- -[Home](./index.md) > [@svelte-put/resize](./resize.md) > [ResizeAttributes](./resize.resizeattributes.md) > ["on:resized"](./resize.resizeattributes._on_resized_.md) - -## ResizeAttributes."on:resized" property - -**Signature:** - -```typescript -'on:resized'?: (event: CustomEvent) => void; -``` diff --git a/packages/actions/resize/api/docs/resize.resizeattributes.md b/packages/actions/resize/api/docs/resize.resizeattributes.md deleted file mode 100644 index 56c81c63f..000000000 --- a/packages/actions/resize/api/docs/resize.resizeattributes.md +++ /dev/null @@ -1,36 +0,0 @@ - - -[Home](./index.md) > [@svelte-put/resize](./resize.md) > [ResizeAttributes](./resize.resizeattributes.md) - -## ResizeAttributes interface - -Additional attributes extended from `svelte-put/resize` - -**Signature:** - -```typescript -export interface ResizeAttributes -``` - -## Remarks - -The ambient types for these extended attributes should be available automatically whenever `svelte-put/resize` is imported. - -```html - - - -
-``` - -## Properties - -| Property | Modifiers | Type | Description | -| --- | --- | --- | --- | -| ["on:resized"?](./resize.resizeattributes._on_resized_.md) | | (event: CustomEvent<[ResizeDetail](./resize.resizedetail.md)>) => void | _(Optional)_ | - diff --git a/packages/actions/resize/api/docs/resize.resizedetail.entry.md b/packages/actions/resize/api/docs/resize.resizedetail.entry.md deleted file mode 100644 index d15d73c77..000000000 --- a/packages/actions/resize/api/docs/resize.resizedetail.entry.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@svelte-put/resize](./resize.md) > [ResizeDetail](./resize.resizedetail.md) > [entry](./resize.resizedetail.entry.md) - -## ResizeDetail.entry property - -list of ResizeObserverEntry passed from ResizeObserver callback - -**Signature:** - -```typescript -readonly entry: ResizeObserverEntry; -``` diff --git a/packages/actions/resize/api/docs/resize.resizedetail.md b/packages/actions/resize/api/docs/resize.resizedetail.md deleted file mode 100644 index 06e89b2b8..000000000 --- a/packages/actions/resize/api/docs/resize.resizedetail.md +++ /dev/null @@ -1,21 +0,0 @@ - - -[Home](./index.md) > [@svelte-put/resize](./resize.md) > [ResizeDetail](./resize.resizedetail.md) - -## ResizeDetail interface - -`detail` payload for `resize` [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) - -**Signature:** - -```typescript -export interface ResizeDetail -``` - -## Properties - -| Property | Modifiers | Type | Description | -| --- | --- | --- | --- | -| [entry](./resize.resizedetail.entry.md) | readonly | ResizeObserverEntry | list of ResizeObserverEntry passed from ResizeObserver callback | -| [observer](./resize.resizedetail.observer.md) | readonly | ResizeObserver | the ResizeObserver itself | - diff --git a/packages/actions/resize/api/docs/resize.resizedetail.observer.md b/packages/actions/resize/api/docs/resize.resizedetail.observer.md deleted file mode 100644 index 8999320cc..000000000 --- a/packages/actions/resize/api/docs/resize.resizedetail.observer.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@svelte-put/resize](./resize.md) > [ResizeDetail](./resize.resizedetail.md) > [observer](./resize.resizedetail.observer.md) - -## ResizeDetail.observer property - -the ResizeObserver itself - -**Signature:** - -```typescript -readonly observer: ResizeObserver; -``` diff --git a/packages/actions/resize/api/docs/resize.resizeparameters.enabled.md b/packages/actions/resize/api/docs/resize.resizeparameters.enabled.md deleted file mode 100644 index ce82605b2..000000000 --- a/packages/actions/resize/api/docs/resize.resizeparameters.enabled.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [@svelte-put/resize](./resize.md) > [ResizeParameters](./resize.resizeparameters.md) > [enabled](./resize.resizeparameters.enabled.md) - -## ResizeParameters.enabled property - -whether to activate the action. Default to `true` - -**Signature:** - -```typescript -enabled?: boolean; -``` diff --git a/packages/actions/resize/api/docs/resize.resizeparameters.md b/packages/actions/resize/api/docs/resize.resizeparameters.md deleted file mode 100644 index e6d40822b..000000000 --- a/packages/actions/resize/api/docs/resize.resizeparameters.md +++ /dev/null @@ -1,21 +0,0 @@ - - -[Home](./index.md) > [@svelte-put/resize](./resize.md) > [ResizeParameters](./resize.resizeparameters.md) - -## ResizeParameters interface - -svelte action parameters to config behavior of `resize` - -**Signature:** - -```typescript -export interface ResizeParameters -``` - -## Properties - -| Property | Modifiers | Type | Description | -| --- | --- | --- | --- | -| [enabled?](./resize.resizeparameters.enabled.md) | | boolean | _(Optional)_ whether to activate the action. Default to true | -| [observer?](./resize.resizeparameters.observer.md) | | 'singleton' \| 'new' \| ResizeObserver | _(Optional)_ | - diff --git a/packages/actions/resize/api/docs/resize.resizeparameters.observer.md b/packages/actions/resize/api/docs/resize.resizeparameters.observer.md deleted file mode 100644 index d94847fe2..000000000 --- a/packages/actions/resize/api/docs/resize.resizeparameters.observer.md +++ /dev/null @@ -1,16 +0,0 @@ - - -[Home](./index.md) > [@svelte-put/resize](./resize.md) > [ResizeParameters](./resize.resizeparameters.md) > [observer](./resize.resizeparameters.observer.md) - -## ResizeParameters.observer property - -**Signature:** - -```typescript -observer?: 'singleton' | 'new' | ResizeObserver; -``` - -## Remarks - -Be default, a singleton ResizeObserver is used for all actions for better performance. You can use this option to create a new ResizeObserver or provide your own. - diff --git a/packages/actions/resize/api/resize.api.md b/packages/actions/resize/api/resize.api.md deleted file mode 100644 index a14d0c78a..000000000 --- a/packages/actions/resize/api/resize.api.md +++ /dev/null @@ -1,31 +0,0 @@ -## API Report File for "@svelte-put/resize" - -> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). - -```ts - -import type { Action } from 'svelte/action'; - -// @public -export const resize: Action; - -// @public -export interface ResizeAttributes { - // (undocumented) - 'on:resized'?: (event: CustomEvent) => void; -} - -// @public -export interface ResizeDetail { - readonly entry: ResizeObserverEntry; - readonly observer: ResizeObserver; -} - -// @public -export interface ResizeParameters { - enabled?: boolean; - // (undocumented) - observer?: 'singleton' | 'new' | ResizeObserver; -} - -``` diff --git a/packages/actions/resize/package.json b/packages/actions/resize/package.json index d167cd42f..e4a4833b2 100644 --- a/packages/actions/resize/package.json +++ b/packages/actions/resize/package.json @@ -2,23 +2,22 @@ "name": "@svelte-put/resize", "version": "2.0.0", "description": "Svelte action that wraps ResizeObserver", - "main": "dist/index.js", - "module": "dist/index.js", - "types": "dist/src/index.d.ts", + "main": "src/index.js", + "module": "src/index.js", + "types": "types/index.d.ts", "type": "module", "publishConfig": { "access": "public" }, "files": [ - "dist" + "src", + "types" ], "scripts": { "lint": "eslint --ignore-path .gitignore \"./**/*/*{ts,js,cjs}\"", "format": "prettier --check --ignore-path .gitignore --plugin-search-dir=. \"./**/*.{ts,js,cjs}\"", - "build": "rollup -c --configPlugin typescript", - "api:extract": "api-extractor run --local --verbose", - "api:document": "api-documenter markdown -i api/temp -o api/docs", - "api": "run-s api:extract api:document" + "dts": "node scripts/generate-dts-bundle.js", + "prepublishOnly": "pnpm dts" }, "repository": { "type": "git", @@ -38,14 +37,7 @@ }, "homepage": "https://github.com/vnphanquang/svelte-put/tree/main/packages/actions/resize", "devDependencies": { - "@microsoft/api-documenter": "^7.22.25", - "@microsoft/api-extractor": "^7.36.1", - "@rollup/plugin-typescript": "^11.0.0", - "@svelte-put/apirc": "workspace:*", "@svelte-put/tsconfig": "workspace:*", - "npm-run-all": "^4.1.5", - "rollup": "^3.20.2", - "tslib": "^2.5.0", - "typescript": "^5.0.3" + "dts-buddy": "^0.1.7" } } diff --git a/packages/actions/resize/rollup.config.ts b/packages/actions/resize/rollup.config.ts deleted file mode 100644 index 1e303286a..000000000 --- a/packages/actions/resize/rollup.config.ts +++ /dev/null @@ -1,19 +0,0 @@ -import ts from '@rollup/plugin-typescript'; -import type { RollupOptions } from 'rollup'; -import typescript from 'typescript'; - -const config: RollupOptions = { - input: 'src/index.ts', - output: { - sourcemap: true, - dir: './dist', - format: 'esm', - }, - plugins: [ - ts({ - typescript, - }), - ], -}; - -export default config; diff --git a/packages/actions/resize/scripts/generate-dts-bundle.js b/packages/actions/resize/scripts/generate-dts-bundle.js new file mode 100644 index 000000000..9b3fc3a66 --- /dev/null +++ b/packages/actions/resize/scripts/generate-dts-bundle.js @@ -0,0 +1,9 @@ +import { createBundle } from 'dts-buddy'; + +await createBundle({ + project: 'tsconfig.json', + output: 'types/index.d.ts', + modules: { + '@svelte-put/resize': 'src/index.js', + }, +}); diff --git a/packages/actions/resize/src/index.ts b/packages/actions/resize/src/index.js similarity index 82% rename from packages/actions/resize/src/index.ts rename to packages/actions/resize/src/index.js index c8788ac99..79e89153c 100644 --- a/packages/actions/resize/src/index.ts +++ b/packages/actions/resize/src/index.js @@ -6,5 +6,4 @@ * @packageDocumentation */ -export * from './resize'; -export * from './resize.types'; +export * from './resize.js'; diff --git a/packages/actions/resize/src/resize.types.ts b/packages/actions/resize/src/public.d.ts similarity index 75% rename from packages/actions/resize/src/resize.types.ts rename to packages/actions/resize/src/public.d.ts index 8b1c4423f..43b3ef1ed 100644 --- a/packages/actions/resize/src/resize.types.ts +++ b/packages/actions/resize/src/public.d.ts @@ -1,3 +1,5 @@ +import { ActionReturn, Action } from 'svelte/action'; + /** * Additional attributes extended from `svelte-put/resize` * @public @@ -23,11 +25,10 @@ export interface ResizeAttributes { } /** - * svelte action parameters to config behavior of `resize` + * config behavior of `resize` * @public - * */ -export interface ResizeParameters { +export interface ResizeConfig { /** * whether to activate the action. Default to `true` * @defaultValue true @@ -44,6 +45,12 @@ export interface ResizeParameters { observer?: 'singleton' | 'new' | ResizeObserver; } +/** + * parameter received from action input + * @public + */ +export type ResizeParameter = ResizeConfig | undefined; + /** * `detail` payload for `resize` {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent | CustomEvent} * @public @@ -54,3 +61,9 @@ export interface ResizeDetail { /** list of ResizeObserverEntry passed from ResizeObserver callback */ readonly entry: ResizeObserverEntry; } + +/** @public */ +export type ResizeAction = Action; + +/** @public */ +export type ResizeActionReturn = ActionReturn; diff --git a/packages/actions/resize/src/resize.ts b/packages/actions/resize/src/resize.js similarity index 72% rename from packages/actions/resize/src/resize.ts rename to packages/actions/resize/src/resize.js index b40bf8b43..9b238f7b7 100644 --- a/packages/actions/resize/src/resize.ts +++ b/packages/actions/resize/src/resize.js @@ -1,7 +1,3 @@ -import type { Action } from 'svelte/action'; - -import { ResizeAttributes, ResizeDetail, ResizeParameters } from './resize.types'; - /** * Create an {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver | ResizeObserver} that observers this node * @public @@ -39,15 +35,12 @@ import { ResizeAttributes, ResizeDetail, ResizeParameters } from './resize.types * * ``` * - * @param node - HTMLElement to observe - * @param parameters - svelte action parameters - * @returns svelte {@link svelte/action#ActionReturn | ActionReturn} + * @param {HTMLElement} node - HTMLElement to observe + * @param {import('./public').ResizeParameter} param - svelte action parameters + * @returns {import('./public').ResizeActionReturn} */ -export const resize: Action = function ( - node, - parameters = {}, -) { - let { enabled = true, observer = 'singleton' } = parameters; +export function resize(node, param = {}) { + let { enabled = true, observer = 'singleton' } = param; let rObserver = resolveObserver(observer); @@ -55,7 +48,7 @@ export const resize: Action = f rObserver.observe(node); } return { - update(update) { + update(update = {}) { const newObserver = update.observer ?? 'singleton'; const newEnabled = update.enabled ?? true; @@ -77,30 +70,34 @@ export const resize: Action = f rObserver.disconnect(); }, }; -}; +} /** - * ResizeObserverCallback * @internal + * @type {ResizeObserverCallback} */ -const callback: ResizeObserverCallback = function (entries) { +function callback(entries) { for (const entry of entries) { - const detail: ResizeDetail = { observer: observerSingleton, entry }; + /** @type {import('./public').ResizeDetail} */ + const detail = { observer: observerSingleton, entry }; entry.target.dispatchEvent(new CustomEvent('resized', { detail })); } -}; +} /** * singleton for all actions to use * @internal + * @type {ResizeObserver} */ -let observerSingleton: ResizeObserver; +let observerSingleton; /** * resolve to a ResizeObserver for use in action * @internal + * @param {import('./public').ResizeConfig['observer']} input + * @returns {ResizeObserver} */ -function resolveObserver(input: ResizeParameters['observer'] = 'singleton'): ResizeObserver { +function resolveObserver(input = 'singleton') { if (input === 'singleton') { if (!observerSingleton) { observerSingleton = new ResizeObserver(callback); diff --git a/packages/actions/resize/tsconfig.json b/packages/actions/resize/tsconfig.json index 7006db28f..dc7ac1d14 100644 --- a/packages/actions/resize/tsconfig.json +++ b/packages/actions/resize/tsconfig.json @@ -1,8 +1,4 @@ { - "include": ["src/**/*.ts", "rollup.config.ts"], - "extends": "@svelte-put/tsconfig/base.package.json", - "compilerOptions": { - "outDir": "./dist", - "declarationDir": "./dist" - } + "include": ["src/**/*"], + "extends": "@svelte-put/tsconfig/base.package.js.json" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2d60499f0..2d33dcca5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -144,33 +144,12 @@ importers: packages/actions/resize: devDependencies: - '@microsoft/api-documenter': - specifier: ^7.22.25 - version: 7.22.25(@types/node@18.16.3) - '@microsoft/api-extractor': - specifier: ^7.36.1 - version: 7.36.1(@types/node@18.16.3) - '@rollup/plugin-typescript': - specifier: ^11.0.0 - version: 11.1.0(rollup@3.21.3)(tslib@2.5.0)(typescript@5.0.4) - '@svelte-put/apirc': - specifier: workspace:* - version: link:../../../configs/apirc '@svelte-put/tsconfig': specifier: workspace:* version: link:../../../configs/tsconfig - npm-run-all: - specifier: ^4.1.5 - version: 4.1.5 - rollup: - specifier: ^3.20.2 - version: 3.21.3 - tslib: - specifier: ^2.5.0 - version: 2.5.0 - typescript: - specifier: ^5.0.3 - version: 5.0.4 + dts-buddy: + specifier: ^0.1.7 + version: 0.1.7 packages/actions/shortcut: devDependencies: diff --git a/sites/docs/src/routes/(main)/docs/(pkg)/resize/+page.svelte b/sites/docs/src/routes/(main)/docs/(pkg)/resize/+page.svelte index ab7c3db2b..5f3a4a728 100644 --- a/sites/docs/src/routes/(main)/docs/(pkg)/resize/+page.svelte +++ b/sites/docs/src/routes/(main)/docs/(pkg)/resize/+page.svelte @@ -2,7 +2,6 @@ import typescript from 'svelte-highlight/languages/typescript'; import ActionUsageNotice from '$client/components/ActionUsageNotice/ActionUsageNotice.svelte'; - import ApiReference from '$client/components/ApiReference/ApiReference.svelte'; import Code from '$client/components/Code/Code.svelte'; import Installation from '$client/components/Installation/Installation.svelte'; import ResourceLink from '$client/components/ResourceLink/ResourceLink.svelte'; @@ -103,6 +102,4 @@ /> - -

Happy resizing! 👨‍💻