@vtbag/utensil-drawer - npm Package Compare versions

Comparing version 0.0.4 to 1.0.0

lib/index.d.ts

 export { setGivenViewTransitionNames, setSelectedViewTransitionNames, setOldPageViewTransitionNames, setNewPageViewTransitionNames, } from './set-view-transition-names';
-export { mayStartViewTransition } from './may-start-view-transition';
-export { beforeAndAfter } from './before-and-after';

lib/index.js

 export { setGivenViewTransitionNames, setSelectedViewTransitionNames, setOldPageViewTransitionNames, setNewPageViewTransitionNames, } from './set-view-transition-names';
-export { mayStartViewTransition } from './may-start-view-transition';
-export { beforeAndAfter } from './before-and-after';

lib/may-start-view-transition.d.ts

@@ -1,2 +0,1 @@
-export declare function mayStartViewTransition(param: StartViewTransitionParameter, breakExisting?: boolean): void | Promise<void>;
-export declare function skipCurrentViewTransition(): void;
+export declare function mayStartViewTransition(param?: StartViewTransitionParameter | UpdateCallback, scope?: Document): ViewTransition;

lib/may-start-view-transition.js

@@ -1,13 +0,30 @@
-import { ensureDrawer } from './drawer';
-export function mayStartViewTransition(param, breakExisting = false) {
-    const drawer = ensureDrawer();
-    if (!document.startViewTransition || (drawer.viewTransition && !breakExisting)) {
-        return param?.update?.();
+/* One version of startViewTransition() for all browsers.
+   Without native view transition support just calls the update function and returns a view transition object with promises. */
+export function mayStartViewTransition(param, scope = document) {
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (param === undefined || param instanceof Function) {
+        if (scope.startViewTransition && !reducedMotion)
+            return scope.startViewTransition(param);
+        return fallback(param, []);
     }
-    else {
-        drawer.viewTransition = document.startViewTransition(drawer.level === 2 ? param : param.update);
-    }
+    if (scope.startViewTransition && !reducedMotion)
+        try {
+            return scope.startViewTransition(param);
+        }
+        catch (e) {
+            return scope.startViewTransition(param.update);
+        }
+    return fallback(param && typeof param === 'object' ? param.update : param, param.types ?? []);
 }
-export function skipCurrentViewTransition() {
-    top.__vtbag.utensilDrawer?.viewTransition?.skipTransition();
+function fallback(update = () => { }, types) {
+    const updateCallbackDone = Promise.resolve(update());
+    const ready = Promise.resolve(updateCallbackDone);
+    const finished = Promise.resolve(ready);
+    return {
+        updateCallbackDone,
+        ready,
+        finished,
+        skipTransition: () => { },
+        types: new Set(types),
+    };
 }

package.json

 {
 	"name": "@vtbag/utensil-drawer",
 	"type": "module",
-	"version": "0.0.4",
+	"version": "1.0.0",
 	"main": "lib/index.js",
@@ -15,3 +15,5 @@ "description": "Pull out just what you need to craft seamless transitions. The Utensil Drawer holds reusable functions to help you build websites with view transitions. It is a bit sparse right now, but like the one in your kitchen, it is bound to fill up over time.",
 		".": "./lib/index.js",
-		"./declarative-names": "./lib/bundled/declarative-names.js"
+		"./declarative-names": "./lib/bundled/declarative-names.js",
+		"./may-start-view-transition": "./lib/may-start-view-transition.js",
+		"./set-view-transition-names": "./lib/set-view-transition-names.js"
 	},
@@ -22,4 +24,5 @@ "scripts": {
 		"format": "prettier --write src | grep -v 'unchanged)$'",
-		"test": "bin/test",
+		"test": "bin/bundle test && npx playwright install --with-deps && playwright test",
 		"changeset": "changeset",
+		"start": "npx serve --debug -l 3000 tests",
 		"release": "changeset publish"
@@ -53,9 +56,11 @@ },
 		"@changesets/cli": "^2.27.12",
-		"@eslint/js": "^9.19.0",
+		"@eslint/js": "^9.20.0",
+		"@playwright/test": "^1.50.0",
 		"@types/dom-navigation": "^1.0.4",
 		"@types/dom-view-transitions": "^1.0.5",
-		"esbuild": "^0.24.2",
-		"prettier": "^3.4.2",
+		"esbuild": "^0.25.0",
+		"prettier": "^3.5.0",
+		"serve": "^14.0.1",
 		"typescript": "^5.7.3"
 	}
 }

README.md

@@ -5,3 +5,3 @@ [⭐️Please star to support this work⭐️](https://github.com/vtbag/utensil-drawer)
 
-Utensil Drawer: Pull out just the tools you need to craft polished transitions.
+Utensil Drawer: Pick the tools you need to craft the view transitions you want!
 
@@ -17,7 +17,10 @@ ![Build Status](https://github.com/vtbag/utensil-drawer/actions/workflows/run-build.yml/badge.svg)
 
-This is an early release.
+Stable: `declarative-names` allows you to assign view transition names to a set of HTML elements, offering a more reliable and controllable alternative to `view-transition-name: auto` that also works for cross-document navigation.
 
+For details see https://vtbag.dev/tools/utensil-drawer/
+
+## What happened before?
+
 For details see the [CHANGELOG](https://github.com/vtbag/utensil-drawer/blob/main/CHANGELOG.md)
 
-
 ## What is it?
@@ -27,2 +30,1 @@
 
-> This preliminary version of the package is not yet supported, not even tested. Be patient.

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

28

increased by12%

Worsened metrics

Total package byte prevSize

7978

decreased by-19.88%

Dev dependency count

9

increased by28.57%

Number of package files

9

decreased by-47.06%

Lines of code

77

decreased by-46.15%

No dependency changes