@vtbag/utensil-drawer - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

lib/bundled/declarative-names.js

@@ -1,1 +0,1 @@
-"use strict";(()=>{function r(t,e,n=!1){c([...document.querySelectorAll(t)],e,n)}function c(t,e,n=!1){e[e.length-1]==="~"&&(e=e.slice(0,-1)+"-",d(t)),t.forEach((o,s,a)=>{let i=`${e}${a.length>1&&e!==""&&e!=="none"&&e!=="auto"?s:""}`;n&&(o.style.viewTransitionName=i)||(o.style.viewTransitionName||=i)})}function d(t){for(let e=t.length-1;e>0;--e){let n=Math.floor(Math.random()*(e+1));[t[e],t[n]]=[t[n],t[e]]}return t}function u(){addEventListener("DOMContentLoaded",l("old")),addEventListener("pagereveal",l("new")),addEventListener("pageswap",l("old"))}function l(t){return()=>{document.querySelectorAll("script").forEach(e=>{((e.getAttribute("data-vtbag-decl")??"")+";"+(e.getAttribute(`data-vtbag-decl-${t}`)??"")).split(/\s*;\s*/).forEach(o=>{let[s,a]=o.split(/=/,2);if(a!==void 0){let i=s.endsWith("~");i&&(s=s.slice(0,-1)),r(s.trim(),a.trim(),!i)}})})}}u();})();
+"use strict";(()=>{function u(n){let e=[],s="",i=n.match(/^-*[0-9]/);i&&(e.push(i[0].slice(0,-1)),e.push("\\3"+i[0].slice(-1)),s=" ",n=n.slice(i[0].length));for(let o of n){let t=o.codePointAt(0);if(t){if(t>=48&&t<=57||t>=65&&t<=70||t>=97&&t<=102){e.push(s+o),s="";continue}if(s="",t>127||t>=71&&t<=90||t>=103&&t<=122||t===45||t===95){e.push(o);continue}if(t===127||t<32){e.push(`\\${t.toString(16)}`),s=" ";continue}e.push("\\"+o)}}return e.join("")}function c(n,e,s=!1){g([...document.querySelectorAll(n)],e,s)}function g(n,e,s=!1){e[e.length-1]==="~"&&(e=e.slice(0,-1)+"-",f(n)),e=u(e),n.forEach((i,o,t)=>{let a=`${e}${t.length>1&&e!==""&&e!=="none"&&e!=="auto"?o:""}`;s&&(i.style.viewTransitionName=a)||(i.style.viewTransitionName||=a)})}function f(n){for(let e=n.length-1;e>0;--e){let s=Math.floor(Math.random()*(e+1));[n[e],n[s]]=[n[s],n[e]]}return n}function h(){addEventListener("DOMContentLoaded",l("old")),addEventListener("pagereveal",l("new")),addEventListener("pageswap",l("old"))}function l(n){return()=>{document.querySelectorAll("script").forEach(e=>{((e.getAttribute("data-vtbag-decl")??"")+";"+(e.getAttribute(`data-vtbag-decl-${n}`)??"")).split(/\s*;\s*/).forEach((i,o)=>{if(i=i.trim(),i.length>0){let t=i.split("=");if(t.length>1){let a=t.slice(0,-1).join("="),d=t[t.length-1],r=a.endsWith("~");r&&(a=a.slice(0,-1)),c(a.trim(),d.trim(),!r)}else c(i.trim(),`vtbag-decl-${o}-`,!1)}})})}}h();})();

lib/set-view-transition-names.js

@@ -0,1 +1,2 @@
+import { escapeCustomIdent } from './escape-custom-ident';
 /* Sets the view transition name in the style attribute of selected elements, see setGivenViewTransitionNames.
@@ -18,2 +19,3 @@ `selector´is an arbitrary CSS selector for the current document
     }
+    prefix = escapeCustomIdent(prefix);
     elements.forEach((element, idx, array) => {
@@ -20,0 +22,0 @@ const name = `${prefix}${array.length > 1 && prefix !== '' && prefix !== 'none' && prefix !== 'auto' ? idx : ''}`;

package.json

 {
 	"name": "@vtbag/utensil-drawer",
 	"type": "module",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"main": "lib/index.js",
@@ -14,6 +14,15 @@ "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.",
 	"exports": {
-		".": "./lib/index.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"
+		"./may-start-view-transition": {
+			"types": "./lib/may-start-view-transition.d.ts",
+			"import": "./lib/may-start-view-transition.js"
+		},
+		"./set-view-transition-names": {
+			"types": "./lib/set-view-transition-names.d.ts",
+			"import": "./lib/set-view-transition-names.js"
+		},
+		"./custom-ident": {
+			"types": "./lib/escape-custom-ident.d.ts",
+			"import": "./lib/escape-custom-ident.js"
+		}
 	},
@@ -24,3 +33,3 @@ "scripts": {
 		"format": "prettier --write src | grep -v 'unchanged)$'",
-		"test": "bin/bundle test && npx playwright install --with-deps && playwright test",
+		"test": "bin/test",
 		"changeset": "changeset",
@@ -27,0 +36,0 @@ "start": "npx serve --debug -l 3000 tests",

README.md

@@ -16,3 +16,3 @@ [⭐️Please star to support this work⭐️](https://github.com/vtbag/utensil-drawer)
 
-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.
+`customIdent()` is a function that escapes your view transition names so you are not limited to the `A-Za-Z0-9-_` characters. "😀"!
 
@@ -23,2 +23,4 @@ For details see https://vtbag.dev/tools/utensil-drawer/
 
+> 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 works cross-browser and also for cross-document navigation.
+
 For details see the [CHANGELOG](https://github.com/vtbag/utensil-drawer/blob/main/CHANGELOG.md)
@@ -25,0 +27,0 @@

No alert changes

Improved metrics

Total package byte prevSize

10036

increased by24.41%

Number of package files

11

increased by22.22%

Lines of code

116

increased by48.72%

Number of lines in readme file

30

increased by7.14%

No dependency changes