@jomae/catalog 0.4.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -3
- package/dist/baseline.d.ts +25 -0
- package/dist/baseline.d.ts.map +1 -1
- package/dist/baseline.js +25 -1
- package/dist/baseline.js.map +1 -1
- package/dist/categories.d.ts +20 -0
- package/dist/categories.d.ts.map +1 -0
- package/dist/categories.js +62 -0
- package/dist/categories.js.map +1 -0
- package/dist/detect.d.ts +2 -1
- package/dist/detect.d.ts.map +1 -1
- package/dist/detect.js +17 -2
- package/dist/detect.js.map +1 -1
- package/dist/generated/baseline-history.d.ts +21 -0
- package/dist/generated/baseline-history.d.ts.map +1 -0
- package/dist/generated/baseline-history.js +20 -0
- package/dist/generated/baseline-history.js.map +1 -0
- package/dist/generated/baseline.d.ts +10 -0
- package/dist/generated/baseline.d.ts.map +1 -1
- package/dist/generated/baseline.js +250 -67
- package/dist/generated/baseline.js.map +1 -1
- package/dist/generated/guides.d.ts +16 -0
- package/dist/generated/guides.d.ts.map +1 -0
- package/dist/generated/guides.js +153 -0
- package/dist/generated/guides.js.map +1 -0
- package/dist/generated/sizes.d.ts.map +1 -1
- package/dist/generated/sizes.js +280 -55
- package/dist/generated/sizes.js.map +1 -1
- package/dist/generated/support-claims.d.ts +15 -0
- package/dist/generated/support-claims.d.ts.map +1 -0
- package/dist/generated/support-claims.js +69 -0
- package/dist/generated/support-claims.js.map +1 -0
- package/dist/guides.d.ts +46 -0
- package/dist/guides.d.ts.map +1 -0
- package/dist/guides.js +55 -0
- package/dist/guides.js.map +1 -0
- package/dist/history.d.ts +11 -0
- package/dist/history.d.ts.map +1 -0
- package/dist/history.js +14 -0
- package/dist/history.js.map +1 -0
- package/dist/index.d.ts +7 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +7 -1
- package/dist/index.js.map +1 -1
- package/dist/markdown.d.ts +24 -0
- package/dist/markdown.d.ts.map +1 -0
- package/dist/markdown.js +194 -0
- package/dist/markdown.js.map +1 -0
- package/dist/rules/abort-controller.d.ts.map +1 -1
- package/dist/rules/abort-controller.js +2 -1
- package/dist/rules/abort-controller.js.map +1 -1
- package/dist/rules/accordion.d.ts.map +1 -1
- package/dist/rules/accordion.js +3 -0
- package/dist/rules/accordion.js.map +1 -1
- package/dist/rules/array-grouping.d.ts +3 -0
- package/dist/rules/array-grouping.d.ts.map +1 -0
- package/dist/rules/array-grouping.js +29 -0
- package/dist/rules/array-grouping.js.map +1 -0
- package/dist/rules/aspect-ratio.d.ts.map +1 -1
- package/dist/rules/aspect-ratio.js +1 -0
- package/dist/rules/aspect-ratio.js.map +1 -1
- package/dist/rules/base64.d.ts +3 -0
- package/dist/rules/base64.d.ts.map +1 -0
- package/dist/rules/base64.js +41 -0
- package/dist/rules/base64.js.map +1 -0
- package/dist/rules/broadcast-channel.d.ts.map +1 -1
- package/dist/rules/broadcast-channel.js +1 -0
- package/dist/rules/broadcast-channel.js.map +1 -1
- package/dist/rules/carousel.d.ts.map +1 -1
- package/dist/rules/carousel.js +7 -0
- package/dist/rules/carousel.js.map +1 -1
- package/dist/rules/clipboard.d.ts.map +1 -1
- package/dist/rules/clipboard.js +4 -1
- package/dist/rules/clipboard.js.map +1 -1
- package/dist/rules/color-functions.d.ts.map +1 -1
- package/dist/rules/color-functions.js +1 -0
- package/dist/rules/color-functions.js.map +1 -1
- package/dist/rules/compression-streams.d.ts.map +1 -1
- package/dist/rules/compression-streams.js +2 -1
- package/dist/rules/compression-streams.js.map +1 -1
- package/dist/rules/container-queries.d.ts.map +1 -1
- package/dist/rules/container-queries.js +2 -0
- package/dist/rules/container-queries.js.map +1 -1
- package/dist/rules/content-visibility.d.ts.map +1 -1
- package/dist/rules/content-visibility.js +3 -1
- package/dist/rules/content-visibility.js.map +1 -1
- package/dist/rules/custom-highlight.d.ts +3 -0
- package/dist/rules/custom-highlight.d.ts.map +1 -0
- package/dist/rules/custom-highlight.js +39 -0
- package/dist/rules/custom-highlight.js.map +1 -0
- package/dist/rules/date-time-input.d.ts.map +1 -1
- package/dist/rules/date-time-input.js +2 -0
- package/dist/rules/date-time-input.js.map +1 -1
- package/dist/rules/dialog.d.ts.map +1 -1
- package/dist/rules/dialog.js +8 -0
- package/dist/rules/dialog.js.map +1 -1
- package/dist/rules/discrete-transitions.d.ts.map +1 -1
- package/dist/rules/discrete-transitions.js +6 -0
- package/dist/rules/discrete-transitions.js.map +1 -1
- package/dist/rules/drag-and-drop.d.ts.map +1 -1
- package/dist/rules/drag-and-drop.js +26 -8
- package/dist/rules/drag-and-drop.js.map +1 -1
- package/dist/rules/duration-format.d.ts +3 -0
- package/dist/rules/duration-format.d.ts.map +1 -0
- package/dist/rules/duration-format.js +37 -0
- package/dist/rules/duration-format.js.map +1 -0
- package/dist/rules/event-target.d.ts +3 -0
- package/dist/rules/event-target.d.ts.map +1 -0
- package/dist/rules/event-target.js +51 -0
- package/dist/rules/event-target.js.map +1 -0
- package/dist/rules/fetch.d.ts +3 -0
- package/dist/rules/fetch.d.ts.map +1 -0
- package/dist/rules/fetch.js +46 -0
- package/dist/rules/fetch.js.map +1 -0
- package/dist/rules/field-sizing.d.ts.map +1 -1
- package/dist/rules/field-sizing.js +3 -1
- package/dist/rules/field-sizing.js.map +1 -1
- package/dist/rules/fluid-type.d.ts.map +1 -1
- package/dist/rules/fluid-type.js +3 -1
- package/dist/rules/fluid-type.js.map +1 -1
- package/dist/rules/focus-visible.d.ts.map +1 -1
- package/dist/rules/focus-visible.js +1 -0
- package/dist/rules/focus-visible.js.map +1 -1
- package/dist/rules/fullscreen.d.ts.map +1 -1
- package/dist/rules/fullscreen.js +2 -1
- package/dist/rules/fullscreen.js.map +1 -1
- package/dist/rules/height-animation.d.ts.map +1 -1
- package/dist/rules/height-animation.js +2 -0
- package/dist/rules/height-animation.js.map +1 -1
- package/dist/rules/index.d.ts.map +1 -1
- package/dist/rules/index.js +64 -3
- package/dist/rules/index.js.map +1 -1
- package/dist/rules/inert.d.ts +3 -0
- package/dist/rules/inert.d.ts.map +1 -0
- package/dist/rules/inert.js +37 -0
- package/dist/rules/inert.js.map +1 -0
- package/dist/rules/intersection-observer.d.ts.map +1 -1
- package/dist/rules/intersection-observer.js +2 -0
- package/dist/rules/intersection-observer.js.map +1 -1
- package/dist/rules/lazy-loading.d.ts.map +1 -1
- package/dist/rules/lazy-loading.js +2 -0
- package/dist/rules/lazy-loading.js.map +1 -1
- package/dist/rules/line-clamp.d.ts.map +1 -1
- package/dist/rules/line-clamp.js +2 -1
- package/dist/rules/line-clamp.js.map +1 -1
- package/dist/rules/masonry.d.ts.map +1 -1
- package/dist/rules/masonry.js +1 -0
- package/dist/rules/masonry.js.map +1 -1
- package/dist/rules/natural-sort.d.ts +3 -0
- package/dist/rules/natural-sort.d.ts.map +1 -0
- package/dist/rules/natural-sort.js +41 -0
- package/dist/rules/natural-sort.js.map +1 -0
- package/dist/rules/number-format.d.ts.map +1 -1
- package/dist/rules/number-format.js +3 -1
- package/dist/rules/number-format.js.map +1 -1
- package/dist/rules/page-visibility.d.ts.map +1 -1
- package/dist/rules/page-visibility.js +5 -0
- package/dist/rules/page-visibility.js.map +1 -1
- package/dist/rules/popover.d.ts.map +1 -1
- package/dist/rules/popover.js +8 -1
- package/dist/rules/popover.js.map +1 -1
- package/dist/rules/random-uuid.d.ts +3 -0
- package/dist/rules/random-uuid.d.ts.map +1 -0
- package/dist/rules/random-uuid.js +31 -0
- package/dist/rules/random-uuid.js.map +1 -0
- package/dist/rules/relative-time.d.ts.map +1 -1
- package/dist/rules/relative-time.js +1 -0
- package/dist/rules/relative-time.js.map +1 -1
- package/dist/rules/resizable-panels.d.ts.map +1 -1
- package/dist/rules/resizable-panels.js +4 -7
- package/dist/rules/resizable-panels.js.map +1 -1
- package/dist/rules/resize-observer.d.ts.map +1 -1
- package/dist/rules/resize-observer.js +2 -1
- package/dist/rules/resize-observer.js.map +1 -1
- package/dist/rules/screen-wake-lock.d.ts.map +1 -1
- package/dist/rules/screen-wake-lock.js +3 -1
- package/dist/rules/screen-wake-lock.js.map +1 -1
- package/dist/rules/scroll-animations.d.ts.map +1 -1
- package/dist/rules/scroll-animations.js +9 -1
- package/dist/rules/scroll-animations.js.map +1 -1
- package/dist/rules/scroll-lock.d.ts.map +1 -1
- package/dist/rules/scroll-lock.js +8 -7
- package/dist/rules/scroll-lock.js.map +1 -1
- package/dist/rules/scrollbars.d.ts.map +1 -1
- package/dist/rules/scrollbars.js +5 -0
- package/dist/rules/scrollbars.js.map +1 -1
- package/dist/rules/select.d.ts.map +1 -1
- package/dist/rules/select.js +7 -0
- package/dist/rules/select.js.map +1 -1
- package/dist/rules/server-sent-events.d.ts +3 -0
- package/dist/rules/server-sent-events.d.ts.map +1 -0
- package/dist/rules/server-sent-events.js +38 -0
- package/dist/rules/server-sent-events.js.map +1 -0
- package/dist/rules/smooth-scroll.d.ts.map +1 -1
- package/dist/rules/smooth-scroll.js +2 -0
- package/dist/rules/smooth-scroll.js.map +1 -1
- package/dist/rules/speech-recognition.d.ts.map +1 -1
- package/dist/rules/speech-recognition.js +19 -10
- package/dist/rules/speech-recognition.js.map +1 -1
- package/dist/rules/speech-synthesis.d.ts.map +1 -1
- package/dist/rules/speech-synthesis.js +3 -0
- package/dist/rules/speech-synthesis.js.map +1 -1
- package/dist/rules/sticky.d.ts.map +1 -1
- package/dist/rules/sticky.js +2 -0
- package/dist/rules/sticky.js.map +1 -1
- package/dist/rules/structured-clone.d.ts.map +1 -1
- package/dist/rules/structured-clone.js +13 -2
- package/dist/rules/structured-clone.js.map +1 -1
- package/dist/rules/text-box-trim.d.ts.map +1 -1
- package/dist/rules/text-box-trim.js +3 -1
- package/dist/rules/text-box-trim.js.map +1 -1
- package/dist/rules/text-wrap-balance.d.ts.map +1 -1
- package/dist/rules/text-wrap-balance.js +2 -0
- package/dist/rules/text-wrap-balance.js.map +1 -1
- package/dist/rules/url-search-params.d.ts +3 -0
- package/dist/rules/url-search-params.d.ts.map +1 -0
- package/dist/rules/url-search-params.js +42 -0
- package/dist/rules/url-search-params.js.map +1 -0
- package/dist/rules/view-transitions.d.ts.map +1 -1
- package/dist/rules/view-transitions.js +9 -0
- package/dist/rules/view-transitions.js.map +1 -1
- package/dist/rules/web-bluetooth.d.ts.map +1 -1
- package/dist/rules/web-bluetooth.js +1 -0
- package/dist/rules/web-bluetooth.js.map +1 -1
- package/dist/rules/web-crypto.d.ts +3 -0
- package/dist/rules/web-crypto.d.ts.map +1 -0
- package/dist/rules/web-crypto.js +32 -0
- package/dist/rules/web-crypto.js.map +1 -0
- package/dist/rules/web-share.d.ts.map +1 -1
- package/dist/rules/web-share.js +1 -0
- package/dist/rules/web-share.js.map +1 -1
- package/dist/schema.d.ts +22 -0
- package/dist/schema.d.ts.map +1 -1
- package/dist/schema.js +63 -4
- package/dist/schema.js.map +1 -1
- package/dist/search.d.ts +29 -0
- package/dist/search.d.ts.map +1 -0
- package/dist/search.js +84 -0
- package/dist/search.js.map +1 -0
- package/dist/support.d.ts +11 -0
- package/dist/support.d.ts.map +1 -0
- package/dist/support.js +31 -0
- package/dist/support.js.map +1 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-visibility.d.ts","sourceRoot":"","sources":["../../src/rules/page-visibility.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"page-visibility.d.ts","sourceRoot":"","sources":["../../src/rules/page-visibility.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,cAAc,EAAE,IA6B5B,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export const pageVisibility = {
|
|
2
2
|
id: "page-visibility",
|
|
3
3
|
title: "Tab visibility",
|
|
4
|
+
category: "async-data",
|
|
4
5
|
replaces: ["react-page-visibility", "visibilityjs"],
|
|
5
6
|
featureIds: ["page-visibility"],
|
|
6
7
|
native: "document.visibilityState and the visibilitychange event",
|
|
@@ -20,5 +21,9 @@ export const pageVisibility = {
|
|
|
20
21
|
],
|
|
21
22
|
snippet: `document.addEventListener("visibilitychange", () => { ... });`,
|
|
22
23
|
},
|
|
24
|
+
guides: [
|
|
25
|
+
"detect-initial-visibility-state",
|
|
26
|
+
"calculate-total-foreground-time",
|
|
27
|
+
],
|
|
23
28
|
};
|
|
24
29
|
//# sourceMappingURL=page-visibility.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-visibility.js","sourceRoot":"","sources":["../../src/rules/page-visibility.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAS;IAClC,EAAE,EAAE,iBAAiB;IACrB,KAAK,EAAE,gBAAgB;IACvB,QAAQ,EAAE,CAAC,uBAAuB,EAAE,cAAc,CAAC;IACnD,UAAU,EAAE,CAAC,iBAAiB,CAAC;IAC/B,MAAM,EAAE,yDAAyD;IACjE,KAAK,EAAE;QACL,SAAS,EACP,wRAAwR;QAC1R,OAAO,EAAE;;;IAGT;QACA,MAAM,EACJ,kFAAkF;KACrF;IACD,KAAK,EAAE;QACL,IAAI,EAAE,kGAAkG;QACxG,MAAM,EAAE;YACN,+GAA+G;YAC/G,yIAAyI;SAC1I;QACD,OAAO,EAAE,+DAA+D;KACzE;CACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"page-visibility.js","sourceRoot":"","sources":["../../src/rules/page-visibility.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAS;IAClC,EAAE,EAAE,iBAAiB;IACrB,KAAK,EAAE,gBAAgB;IACvB,QAAQ,EAAE,YAAY;IACtB,QAAQ,EAAE,CAAC,uBAAuB,EAAE,cAAc,CAAC;IACnD,UAAU,EAAE,CAAC,iBAAiB,CAAC;IAC/B,MAAM,EAAE,yDAAyD;IACjE,KAAK,EAAE;QACL,SAAS,EACP,wRAAwR;QAC1R,OAAO,EAAE;;;IAGT;QACA,MAAM,EACJ,kFAAkF;KACrF;IACD,KAAK,EAAE;QACL,IAAI,EAAE,kGAAkG;QACxG,MAAM,EAAE;YACN,+GAA+G;YAC/G,yIAAyI;SAC1I;QACD,OAAO,EAAE,+DAA+D;KACzE;IACD,MAAM,EAAE;QACN,iCAAiC;QACjC,iCAAiC;KAClC;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/rules/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/rules/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,IAuErB,CAAC"}
|
package/dist/rules/popover.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export const popover = {
|
|
2
2
|
id: "popover-anchor-positioning",
|
|
3
3
|
title: "Tooltips, dropdowns and popovers",
|
|
4
|
+
category: "forms",
|
|
4
5
|
replaces: [
|
|
5
6
|
"@floating-ui/react",
|
|
6
7
|
"@floating-ui/react-dom",
|
|
@@ -13,6 +14,7 @@ export const popover = {
|
|
|
13
14
|
"react-tooltip",
|
|
14
15
|
"floating-vue",
|
|
15
16
|
"v-tooltip",
|
|
17
|
+
"@oddbird/popover-polyfill",
|
|
16
18
|
],
|
|
17
19
|
featureIds: ["popover", "anchor-positioning"],
|
|
18
20
|
native: "The Popover API with CSS anchor positioning",
|
|
@@ -43,7 +45,7 @@ export const popover = {
|
|
|
43
45
|
agent: {
|
|
44
46
|
when: "building a tooltip, dropdown menu or popover anchored to a trigger",
|
|
45
47
|
unless: [
|
|
46
|
-
"You need Baseline-level support for the positioning.
|
|
48
|
+
"You need Baseline-level support for the positioning. Anchor positioning is in all three engines now, but only from Chrome {{chrome:css.properties.anchor-name}}, Safari {{safari:css.properties.anchor-name}} and Firefox {{firefox:css.properties.anchor-name}}, so anything older needs a JavaScript fallback or a static position.",
|
|
47
49
|
"You need collision handling beyond position-try-fallbacks, such as shifting along an axis to stay in view rather than flipping.",
|
|
48
50
|
"You need an arrow that tracks the trigger across a flip.",
|
|
49
51
|
"A popover must stay open while a second one opens, or nest inside another. Auto popovers close their ancestors.",
|
|
@@ -61,5 +63,10 @@ export const popover = {
|
|
|
61
63
|
}
|
|
62
64
|
</style>`,
|
|
63
65
|
},
|
|
66
|
+
guides: [
|
|
67
|
+
"position-aware-tooltips",
|
|
68
|
+
"interest-triggered-tooltips",
|
|
69
|
+
"resilient-context-menus-and-nested-dropdowns",
|
|
70
|
+
],
|
|
64
71
|
};
|
|
65
72
|
//# sourceMappingURL=popover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../src/rules/popover.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,OAAO,GAAS;IAC3B,EAAE,EAAE,4BAA4B;IAChC,KAAK,EAAE,kCAAkC;IACzC,QAAQ,EAAE;QACR,oBAAoB;QACpB,wBAAwB;QACxB,kBAAkB;QAClB,gBAAgB;QAChB,WAAW;QACX,UAAU;QACV,gBAAgB;QAChB,cAAc;QACd,eAAe;QACf,cAAc;QACd,WAAW;
|
|
1
|
+
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../src/rules/popover.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,OAAO,GAAS;IAC3B,EAAE,EAAE,4BAA4B;IAChC,KAAK,EAAE,kCAAkC;IACzC,QAAQ,EAAE,OAAO;IACjB,QAAQ,EAAE;QACR,oBAAoB;QACpB,wBAAwB;QACxB,kBAAkB;QAClB,gBAAgB;QAChB,WAAW;QACX,UAAU;QACV,gBAAgB;QAChB,cAAc;QACd,eAAe;QACf,cAAc;QACd,WAAW;QACX,2BAA2B;KAC5B;IACD,UAAU,EAAE,CAAC,SAAS,EAAE,oBAAoB,CAAC;IAC7C,MAAM,EAAE,6CAA6C;IACrD,KAAK,EAAE;QACL,SAAS,EACP,ugBAAugB;QACzgB,OAAO,EAAE;;;;;;;;;;;;;;;;;;SAkBJ;QACL,OAAO,EAAE,6CAA6C;QACtD,MAAM,EAAE,8DAA8D;KACvE;IACD,KAAK,EAAE;QACL,IAAI,EAAE,oEAAoE;QAC1E,MAAM,EAAE;YACN,uUAAuU;YACvU,iIAAiI;YACjI,0DAA0D;YAC1D,iHAAiH;YACjH,uEAAuE;SACxE;QACD,OAAO,EAAE;;;;;;;;;;SAUJ;KACN;IACD,MAAM,EAAE;QACN,yBAAyB;QACzB,6BAA6B;QAC7B,8CAA8C;KAC/C;CACF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"random-uuid.d.ts","sourceRoot":"","sources":["../../src/rules/random-uuid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,UAAU,EAAE,IA+BxB,CAAC"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
export const randomUuid = {
|
|
2
|
+
id: "random-uuid",
|
|
3
|
+
title: "Generating UUIDs",
|
|
4
|
+
category: "async-data",
|
|
5
|
+
replaces: ["uuid", "uuidv4", "@lukeed/uuid", "uuid-random"],
|
|
6
|
+
featureIds: [],
|
|
7
|
+
manualBaseline: {
|
|
8
|
+
status: "widely",
|
|
9
|
+
verifiedOn: "2026-09-06",
|
|
10
|
+
note: "web-features has no ID for crypto.randomUUID() on its own. The nearest is 'web-cryptography', which spans the whole Web Crypto API and reports Safari {{safari:web-cryptography}}, where randomUUID needs Safari {{safari:api.Crypto.randomUUID}}, Chrome {{chrome:api.Crypto.randomUUID}} and Firefox {{firefox:api.Crypto.randomUUID}}. Deriving from that ID would publish a support table this rule cannot honour. The tier is widely available on the method's own dates: Safari {{safari:api.Crypto.randomUUID}} shipped in March 2022.",
|
|
11
|
+
},
|
|
12
|
+
native: "crypto.randomUUID()",
|
|
13
|
+
human: {
|
|
14
|
+
explainer: "The uuid package exists because producing a v4 identifier used to mean pulling random bytes and formatting the hyphens by hand. crypto.randomUUID() returns the finished string from the same cryptographically strong source the library uses, with nothing to import and nothing to bundle. Every current browser has it, and Node exposes it on the global crypto object from v19 and on node:crypto well before that.",
|
|
15
|
+
snippet: `const id = crypto.randomUUID();
|
|
16
|
+
// "36b8f84d-df4e-4d49-b662-bcde71a8764f"`,
|
|
17
|
+
mdnUrl: "https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID",
|
|
18
|
+
},
|
|
19
|
+
agent: {
|
|
20
|
+
when: "generating a random v4 UUID",
|
|
21
|
+
unless: [
|
|
22
|
+
"You need a version other than 4. randomUUID only makes v4, so v1, v5 and v7 still need the library, and v7 sorting by creation time is a common reason to want it.",
|
|
23
|
+
"You parse, validate or stringify UUIDs you already have. The library exports validate(), parse() and stringify(); the platform covers generation only.",
|
|
24
|
+
"The code runs on plain http somewhere other than localhost. randomUUID is only defined in a secure context, so an insecure page throws a TypeError.",
|
|
25
|
+
"You support browsers below Chrome {{chrome:api.Crypto.randomUUID}}, Firefox {{firefox:api.Crypto.randomUUID}} or Safari {{safari:api.Crypto.randomUUID}}. randomUUID landed years later than the rest of Web Crypto, so the surrounding API being present is not proof this method is.",
|
|
26
|
+
"You need identifiers shorter or differently shaped than a 36-character UUID, which is what nanoid and short-uuid are for.",
|
|
27
|
+
],
|
|
28
|
+
snippet: "const id = crypto.randomUUID();",
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
//# sourceMappingURL=random-uuid.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"random-uuid.js","sourceRoot":"","sources":["../../src/rules/random-uuid.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,UAAU,GAAS;IAC9B,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,YAAY;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,cAAc,EAAE,aAAa,CAAC;IAC3D,UAAU,EAAE,EAAE;IACd,cAAc,EAAE;QACd,MAAM,EAAE,QAAQ;QAChB,UAAU,EAAE,YAAY;QACxB,IAAI,EAAE,+gBAA+gB;KACthB;IACD,MAAM,EAAE,qBAAqB;IAC7B,KAAK,EAAE;QACL,SAAS,EACP,2ZAA2Z;QAC7Z,OAAO,EAAE;0CAC6B;QACtC,MAAM,EACJ,oEAAoE;KACvE;IACD,KAAK,EAAE;QACL,IAAI,EAAE,6BAA6B;QACnC,MAAM,EAAE;YACN,oKAAoK;YACpK,wJAAwJ;YACxJ,qJAAqJ;YACrJ,wRAAwR;YACxR,2HAA2H;SAC5H;QACD,OAAO,EAAE,iCAAiC;KAC3C;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"relative-time.d.ts","sourceRoot":"","sources":["../../src/rules/relative-time.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"relative-time.d.ts","sourceRoot":"","sources":["../../src/rules/relative-time.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,YAAY,EAAE,IAyB1B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"relative-time.js","sourceRoot":"","sources":["../../src/rules/relative-time.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAS;IAChC,EAAE,EAAE,eAAe;IACnB,KAAK,EAAE,0BAA0B;IACjC,QAAQ,EAAE,CAAC,qBAAqB,EAAE,YAAY,EAAE,eAAe,CAAC;IAChE,UAAU,EAAE,CAAC,2BAA2B,CAAC;IACzC,MAAM,EAAE,yBAAyB;IACjC,KAAK,EAAE;QACL,SAAS,EACP,gTAAgT;QAClT,OAAO,EAAE;6CACgC;QACzC,MAAM,EACJ,0GAA0G;KAC7G;IACD,KAAK,EAAE;QACL,IAAI,EAAE,iFAAiF;QACvF,MAAM,EAAE;YACN,iQAAiQ;YACjQ,iNAAiN;YACjN,uIAAuI;SACxI;QACD,OAAO,EACL,8EAA8E;KACjF;CACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"relative-time.js","sourceRoot":"","sources":["../../src/rules/relative-time.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAS;IAChC,EAAE,EAAE,eAAe;IACnB,KAAK,EAAE,0BAA0B;IACjC,QAAQ,EAAE,YAAY;IACtB,QAAQ,EAAE,CAAC,qBAAqB,EAAE,YAAY,EAAE,eAAe,CAAC;IAChE,UAAU,EAAE,CAAC,2BAA2B,CAAC;IACzC,MAAM,EAAE,yBAAyB;IACjC,KAAK,EAAE;QACL,SAAS,EACP,gTAAgT;QAClT,OAAO,EAAE;6CACgC;QACzC,MAAM,EACJ,0GAA0G;KAC7G;IACD,KAAK,EAAE;QACL,IAAI,EAAE,iFAAiF;QACvF,MAAM,EAAE;YACN,iQAAiQ;YACjQ,iNAAiN;YACjN,uIAAuI;SACxI;QACD,OAAO,EACL,8EAA8E;KACjF;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resizable-panels.d.ts","sourceRoot":"","sources":["../../src/rules/resizable-panels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,eAAe,EAAE,
|
|
1
|
+
{"version":3,"file":"resizable-panels.d.ts","sourceRoot":"","sources":["../../src/rules/resizable-panels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,eAAe,EAAE,IA+B7B,CAAC"}
|
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
export const resizablePanels = {
|
|
2
2
|
id: "resizable-panels",
|
|
3
3
|
title: "Resizable panels",
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
"re-resizable",
|
|
7
|
-
"react-split-pane",
|
|
8
|
-
"splitpanes",
|
|
9
|
-
],
|
|
4
|
+
category: "layout",
|
|
5
|
+
replaces: ["re-resizable"],
|
|
10
6
|
featureIds: ["resize"],
|
|
11
7
|
native: "resize",
|
|
12
8
|
human: {
|
|
@@ -22,7 +18,8 @@ export const resizablePanels = {
|
|
|
22
18
|
agent: {
|
|
23
19
|
when: "letting someone drag-resize a single panel, such as a sidebar or a textarea",
|
|
24
20
|
unless: [
|
|
25
|
-
"
|
|
21
|
+
"The panels have to be resizable on a phone. Safari on iOS does not implement the resize property at all, so the handle simply is not there.",
|
|
22
|
+
"You need the block/inline logical values rather than horizontal/vertical/both. Those reached Chrome {{chrome:css.properties.resize.block}}, Firefox {{firefox:css.properties.resize.block}} and Safari {{safari:css.properties.resize.block}}; the classic physical-direction values have been supported everywhere for over a decade.",
|
|
26
23
|
"You need multiple panels to resize together, such as a split view where dragging one edge shrinks its neighbor. resize only affects the element it is set on.",
|
|
27
24
|
"You need to read back or persist the size someone chose. resize has no resize event; ResizeObserver still covers that, and it is a JavaScript API, not CSS.",
|
|
28
25
|
"You need to style the drag handle itself, or place it somewhere other than the element's edge or corner. The native handle's appearance is fixed.",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resizable-panels.js","sourceRoot":"","sources":["../../src/rules/resizable-panels.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAS;IACnC,EAAE,EAAE,kBAAkB;IACtB,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE
|
|
1
|
+
{"version":3,"file":"resizable-panels.js","sourceRoot":"","sources":["../../src/rules/resizable-panels.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAS;IACnC,EAAE,EAAE,kBAAkB;IACtB,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,CAAC,cAAc,CAAC;IAC1B,UAAU,EAAE,CAAC,QAAQ,CAAC;IACtB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE;QACL,SAAS,EACP,ubAAub;QACzb,OAAO,EAAE;;;;;EAKX;QACE,MAAM,EAAE,yDAAyD;KAClE;IACD,KAAK,EAAE;QACL,IAAI,EAAE,6EAA6E;QACnF,MAAM,EAAE;YACN,6IAA6I;YAC7I,wUAAwU;YACxU,+JAA+J;YAC/J,6JAA6J;YAC7J,mJAAmJ;YACnJ,uJAAuJ;SACxJ;QACD,OAAO,EACL,sFAAsF;KACzF;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resize-observer.d.ts","sourceRoot":"","sources":["../../src/rules/resize-observer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"resize-observer.d.ts","sourceRoot":"","sources":["../../src/rules/resize-observer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,cAAc,EAAE,IA2B5B,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export const resizeObserver = {
|
|
2
2
|
id: "resize-observer",
|
|
3
3
|
title: "Element resize tracking",
|
|
4
|
+
category: "async-data",
|
|
4
5
|
replaces: ["resize-observer-polyfill", "@juggle/resize-observer"],
|
|
5
6
|
featureIds: ["resize-observer"],
|
|
6
7
|
native: "ResizeObserver",
|
|
@@ -19,7 +20,7 @@ observer.observe(document.querySelector("#panel"));`,
|
|
|
19
20
|
unless: [
|
|
20
21
|
"You need a framework hook's ergonomics, such as a ref and a reactive size value, rather than managing an observer instance yourself.",
|
|
21
22
|
"You're targeting an engine old enough that the polyfill's manual measurement fallback is still doing real work.",
|
|
22
|
-
"You need devicePixelContentBoxSize specifically.
|
|
23
|
+
"You need devicePixelContentBoxSize specifically. Chrome has it from {{chrome:api.ResizeObserverEntry.devicePixelContentBoxSize}} and Firefox from {{firefox:api.ResizeObserverEntry.devicePixelContentBoxSize}}, but Safari does not implement it at all.",
|
|
23
24
|
],
|
|
24
25
|
snippet: "new ResizeObserver((entries) => { ... }).observe(el);",
|
|
25
26
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resize-observer.js","sourceRoot":"","sources":["../../src/rules/resize-observer.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAS;IAClC,EAAE,EAAE,iBAAiB;IACrB,KAAK,EAAE,yBAAyB;IAChC,QAAQ,EAAE,CAAC,0BAA0B,EAAE,yBAAyB,CAAC;IACjE,UAAU,EAAE,CAAC,iBAAiB,CAAC;IAC/B,MAAM,EAAE,gBAAgB;IACxB,KAAK,EAAE;QACL,SAAS,EACP,+RAA+R;QACjS,OAAO,EAAE;;;;;oDAKuC;QAChD,MAAM,EAAE,iEAAiE;KAC1E;IACD,KAAK,EAAE;QACL,IAAI,EAAE,4EAA4E;QAClF,MAAM,EAAE;YACN,sIAAsI;YACtI,iHAAiH;YACjH,
|
|
1
|
+
{"version":3,"file":"resize-observer.js","sourceRoot":"","sources":["../../src/rules/resize-observer.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAS;IAClC,EAAE,EAAE,iBAAiB;IACrB,KAAK,EAAE,yBAAyB;IAChC,QAAQ,EAAE,YAAY;IACtB,QAAQ,EAAE,CAAC,0BAA0B,EAAE,yBAAyB,CAAC;IACjE,UAAU,EAAE,CAAC,iBAAiB,CAAC;IAC/B,MAAM,EAAE,gBAAgB;IACxB,KAAK,EAAE;QACL,SAAS,EACP,+RAA+R;QACjS,OAAO,EAAE;;;;;oDAKuC;QAChD,MAAM,EAAE,iEAAiE;KAC1E;IACD,KAAK,EAAE;QACL,IAAI,EAAE,4EAA4E;QAClF,MAAM,EAAE;YACN,sIAAsI;YACtI,iHAAiH;YACjH,2PAA2P;SAC5P;QACD,OAAO,EAAE,uDAAuD;KACjE;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"screen-wake-lock.d.ts","sourceRoot":"","sources":["../../src/rules/screen-wake-lock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"screen-wake-lock.d.ts","sourceRoot":"","sources":["../../src/rules/screen-wake-lock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,cAAc,EAAE,IAyB5B,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export const screenWakeLock = {
|
|
2
2
|
id: "screen-wake-lock",
|
|
3
3
|
title: "Keeping the screen awake",
|
|
4
|
+
category: "device-apis",
|
|
4
5
|
replaces: ["nosleep.js", "react-use-wake-lock"],
|
|
5
6
|
featureIds: ["screen-wake-lock"],
|
|
6
7
|
native: 'navigator.wakeLock.request("screen")',
|
|
@@ -14,7 +15,8 @@ await lock.release();`,
|
|
|
14
15
|
agent: {
|
|
15
16
|
when: "keeping the screen from sleeping while a page is active, such as during a recipe, presentation, or workout",
|
|
16
17
|
unless: [
|
|
17
|
-
"You support Safari
|
|
18
|
+
"You support Safari below {{safari:api.WakeLock}} on desktop or below {{safari_ios:api.WakeLock}} on iOS. The phone cases this rule is for, a recipe or a workout screen, are exactly the ones iOS was last to allow.",
|
|
19
|
+
"You need the lock to survive the tab losing focus. The platform releases it the moment the tab backgrounds, with no way to opt out, so a library that re-acquires on visibilitychange is doing real work.",
|
|
18
20
|
"You need this in a non-secure (non-HTTPS) context, where the API isn't available at all.",
|
|
19
21
|
],
|
|
20
22
|
snippet: `const lock = await navigator.wakeLock.request("screen");`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"screen-wake-lock.js","sourceRoot":"","sources":["../../src/rules/screen-wake-lock.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAS;IAClC,EAAE,EAAE,kBAAkB;IACtB,KAAK,EAAE,0BAA0B;IACjC,QAAQ,EAAE,CAAC,YAAY,EAAE,qBAAqB,CAAC;IAC/C,UAAU,EAAE,CAAC,kBAAkB,CAAC;IAChC,MAAM,EAAE,sCAAsC;IAC9C,KAAK,EAAE;QACL,SAAS,EACP,0RAA0R;QAC5R,OAAO,EAAE;;sBAES;QAClB,MAAM,EACJ,uEAAuE;KAC1E;IACD,KAAK,EAAE;QACL,IAAI,EAAE,4GAA4G;QAClH,MAAM,EAAE;YACN,
|
|
1
|
+
{"version":3,"file":"screen-wake-lock.js","sourceRoot":"","sources":["../../src/rules/screen-wake-lock.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAS;IAClC,EAAE,EAAE,kBAAkB;IACtB,KAAK,EAAE,0BAA0B;IACjC,QAAQ,EAAE,aAAa;IACvB,QAAQ,EAAE,CAAC,YAAY,EAAE,qBAAqB,CAAC;IAC/C,UAAU,EAAE,CAAC,kBAAkB,CAAC;IAChC,MAAM,EAAE,sCAAsC;IAC9C,KAAK,EAAE;QACL,SAAS,EACP,0RAA0R;QAC5R,OAAO,EAAE;;sBAES;QAClB,MAAM,EACJ,uEAAuE;KAC1E;IACD,KAAK,EAAE;QACL,IAAI,EAAE,4GAA4G;QAClH,MAAM,EAAE;YACN,sNAAsN;YACtN,2MAA2M;YAC3M,0FAA0F;SAC3F;QACD,OAAO,EAAE,0DAA0D;KACpE;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll-animations.d.ts","sourceRoot":"","sources":["../../src/rules/scroll-animations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,gBAAgB,EAAE,
|
|
1
|
+
{"version":3,"file":"scroll-animations.d.ts","sourceRoot":"","sources":["../../src/rules/scroll-animations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,gBAAgB,EAAE,IAmE9B,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export const scrollAnimations = {
|
|
2
2
|
id: "scroll-driven-animations",
|
|
3
3
|
title: "Scroll-triggered animations",
|
|
4
|
+
category: "animation",
|
|
4
5
|
replaces: ["aos", "scrollreveal", "wowjs", "wow.js", "scrollmagic", "rellax"],
|
|
5
6
|
featureIds: ["scroll-driven-animations"],
|
|
6
7
|
native: "animation-timeline: view() and scroll()",
|
|
@@ -40,7 +41,7 @@ export const scrollAnimations = {
|
|
|
40
41
|
agent: {
|
|
41
42
|
when: "fading or moving elements in as they scroll into view, or driving a reading-progress bar",
|
|
42
43
|
unless: [
|
|
43
|
-
"You need
|
|
44
|
+
"You need Firefox support. Chrome {{chrome:scroll-driven-animations}} and Safari {{safari:scroll-driven-animations}} ship scroll-driven animations but Firefox does not, so wrap them in @supports and make sure the un-animated state is the visible one.",
|
|
44
45
|
"You need a callback in JavaScript when an element enters view, for analytics, lazy loading or infinite scroll. That is what IntersectionObserver is for and CSS does not replace it.",
|
|
45
46
|
"You need to animate something that is not a descendant of, or a sibling reachable from, the scrolling element. Timeline scope is limited.",
|
|
46
47
|
"The animation must run once and stay put. A view timeline is scrubbed, so it reverses when the user scrolls back up.",
|
|
@@ -55,5 +56,12 @@ export const scrollAnimations = {
|
|
|
55
56
|
}
|
|
56
57
|
}`,
|
|
57
58
|
},
|
|
59
|
+
guides: [
|
|
60
|
+
"parallax-scroll-effects",
|
|
61
|
+
"scrollytelling",
|
|
62
|
+
"scroll-entry-exit-effects",
|
|
63
|
+
"scroll-progress-indicator",
|
|
64
|
+
"shrinking-header-on-scroll",
|
|
65
|
+
],
|
|
58
66
|
};
|
|
59
67
|
//# sourceMappingURL=scroll-animations.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll-animations.js","sourceRoot":"","sources":["../../src/rules/scroll-animations.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAS;IACpC,EAAE,EAAE,0BAA0B;IAC9B,KAAK,EAAE,6BAA6B;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,CAAC;IAC7E,UAAU,EAAE,CAAC,0BAA0B,CAAC;IACxC,MAAM,EAAE,yCAAyC;IACjD,KAAK,EAAE;QACL,SAAS,EACP,ugBAAugB;QACzgB,OAAO,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BX;QACE,MAAM,EACJ,qEAAqE;KACxE;IACD,KAAK,EAAE;QACL,IAAI,EAAE,0FAA0F;QAChG,MAAM,EAAE;YACN,
|
|
1
|
+
{"version":3,"file":"scroll-animations.js","sourceRoot":"","sources":["../../src/rules/scroll-animations.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAS;IACpC,EAAE,EAAE,0BAA0B;IAC9B,KAAK,EAAE,6BAA6B;IACpC,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,CAAC;IAC7E,UAAU,EAAE,CAAC,0BAA0B,CAAC;IACxC,MAAM,EAAE,yCAAyC;IACjD,KAAK,EAAE;QACL,SAAS,EACP,ugBAAugB;QACzgB,OAAO,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BX;QACE,MAAM,EACJ,qEAAqE;KACxE;IACD,KAAK,EAAE;QACL,IAAI,EAAE,0FAA0F;QAChG,MAAM,EAAE;YACN,2PAA2P;YAC3P,sLAAsL;YACtL,2IAA2I;YAC3I,sHAAsH;YACtH,4IAA4I;SAC7I;QACD,OAAO,EAAE;;;;;;;EAOX;KACC;IACD,MAAM,EAAE;QACN,yBAAyB;QACzB,gBAAgB;QAChB,2BAA2B;QAC3B,2BAA2B;QAC3B,4BAA4B;KAC7B;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll-lock.d.ts","sourceRoot":"","sources":["../../src/rules/scroll-lock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"scroll-lock.d.ts","sourceRoot":"","sources":["../../src/rules/scroll-lock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,UAAU,EAAE,IA0CxB,CAAC"}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
export const scrollLock = {
|
|
2
2
|
id: "overscroll-behavior",
|
|
3
3
|
title: "Scroll chaining and body scroll lock",
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
"
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
category: "scrolling",
|
|
5
|
+
replaces: ["body-scroll-lock"],
|
|
6
|
+
featureIds: [],
|
|
7
|
+
manualBaseline: {
|
|
8
|
+
status: "widely",
|
|
9
|
+
verifiedOn: "2026-09-06",
|
|
10
|
+
note: "web-features rolls the logical longhands (overscroll-behavior-block and -inline) into the 'overscroll-behavior' ID, which reports Chrome {{chrome:overscroll-behavior}}, Firefox {{firefox:overscroll-behavior}} and no Safari at all. All this rule uses is overscroll-behavior: contain, which BCD puts at Chrome {{chrome:css.properties.overscroll-behavior.contain}}, Firefox {{firefox:css.properties.overscroll-behavior.contain}} and Safari {{safari:css.properties.overscroll-behavior.contain}}. Deriving from that ID would badge a technique every engine has had for years as limited availability.",
|
|
11
|
+
},
|
|
11
12
|
native: "overscroll-behavior: contain",
|
|
12
13
|
human: {
|
|
13
14
|
explainer: "Reaching the end of a scrollable modal and having the page behind it start scrolling is scroll chaining. overscroll-behavior: contain stops the scroll at that boundary, which is the behaviour body-scroll-lock reimplements by fixing the body and compensating for the scrollbar. contain also disables pull-to-refresh inside that element, which is usually what you want in a drawer. Note that a modal opened with showModal() already blocks background scrolling, so check whether you need this at all.",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll-lock.js","sourceRoot":"","sources":["../../src/rules/scroll-lock.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,UAAU,GAAS;IAC9B,EAAE,EAAE,qBAAqB;IACzB,KAAK,EAAE,sCAAsC;IAC7C,QAAQ,EAAE;
|
|
1
|
+
{"version":3,"file":"scroll-lock.js","sourceRoot":"","sources":["../../src/rules/scroll-lock.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,UAAU,GAAS;IAC9B,EAAE,EAAE,qBAAqB;IACzB,KAAK,EAAE,sCAAsC;IAC7C,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,CAAC,kBAAkB,CAAC;IAC9B,UAAU,EAAE,EAAE;IACd,cAAc,EAAE;QACd,MAAM,EAAE,QAAQ;QAChB,UAAU,EAAE,YAAY;QACxB,IAAI,EAAE,mlBAAmlB;KAC1lB;IACD,MAAM,EAAE,8BAA8B;IACtC,KAAK,EAAE;QACL,SAAS,EACP,mfAAmf;QACrf,OAAO,EAAE;;;;;;;;;;EAUX;QACE,MAAM,EACJ,sEAAsE;KACzE;IACD,KAAK,EAAE;QACL,IAAI,EAAE,4FAA4F;QAClG,MAAM,EAAE;YACN,0KAA0K;YAC1K,2MAA2M;YAC3M,0IAA0I;YAC1I,kFAAkF;SACnF;QACD,OAAO,EAAE;;;EAGX;KACC;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scrollbars.d.ts","sourceRoot":"","sources":["../../src/rules/scrollbars.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"scrollbars.d.ts","sourceRoot":"","sources":["../../src/rules/scrollbars.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,UAAU,EAAE,IAoDxB,CAAC"}
|
package/dist/rules/scrollbars.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export const scrollbars = {
|
|
2
2
|
id: "styled-scrollbars",
|
|
3
3
|
title: "Styled scrollbars",
|
|
4
|
+
category: "scrolling",
|
|
4
5
|
replaces: [
|
|
5
6
|
"react-custom-scrollbars",
|
|
6
7
|
"react-custom-scrollbars-2",
|
|
@@ -44,5 +45,9 @@ html {
|
|
|
44
45
|
scrollbar-color: #666 transparent;
|
|
45
46
|
}`,
|
|
46
47
|
},
|
|
48
|
+
guides: [
|
|
49
|
+
"customize-scrollbar-color-and-thickness",
|
|
50
|
+
"adapt-scrollbar-to-contrast-preferences",
|
|
51
|
+
],
|
|
47
52
|
};
|
|
48
53
|
//# sourceMappingURL=scrollbars.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scrollbars.js","sourceRoot":"","sources":["../../src/rules/scrollbars.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,UAAU,GAAS;IAC9B,EAAE,EAAE,mBAAmB;IACvB,KAAK,EAAE,mBAAmB;IAC1B,QAAQ,EAAE;QACR,yBAAyB;QACzB,2BAA2B;QAC3B,WAAW;QACX,iBAAiB;QACjB,mBAAmB;QACnB,yBAAyB;QACzB,mBAAmB;QACnB,uBAAuB;QACvB,uBAAuB;QACvB,uBAAuB;KACxB;IACD,UAAU,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,kBAAkB,CAAC;IACtE,MAAM,EAAE,uDAAuD;IAC/D,KAAK,EAAE;QACL,SAAS,EACP,wdAAwd;QAC1d,OAAO,EAAE;;;;;;;;;;EAUX;QACE,MAAM,EAAE,kEAAkE;KAC3E;IACD,KAAK,EAAE;QACL,IAAI,EAAE,gGAAgG;QACtG,MAAM,EAAE;YACN,iMAAiM;YACjM,yGAAyG;YACzG,6HAA6H;YAC7H,iHAAiH;SAClH;QACD,OAAO,EAAE;;;;EAIX;KACC;CACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"scrollbars.js","sourceRoot":"","sources":["../../src/rules/scrollbars.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,UAAU,GAAS;IAC9B,EAAE,EAAE,mBAAmB;IACvB,KAAK,EAAE,mBAAmB;IAC1B,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE;QACR,yBAAyB;QACzB,2BAA2B;QAC3B,WAAW;QACX,iBAAiB;QACjB,mBAAmB;QACnB,yBAAyB;QACzB,mBAAmB;QACnB,uBAAuB;QACvB,uBAAuB;QACvB,uBAAuB;KACxB;IACD,UAAU,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,kBAAkB,CAAC;IACtE,MAAM,EAAE,uDAAuD;IAC/D,KAAK,EAAE;QACL,SAAS,EACP,wdAAwd;QAC1d,OAAO,EAAE;;;;;;;;;;EAUX;QACE,MAAM,EAAE,kEAAkE;KAC3E;IACD,KAAK,EAAE;QACL,IAAI,EAAE,gGAAgG;QACtG,MAAM,EAAE;YACN,iMAAiM;YACjM,yGAAyG;YACzG,6HAA6H;YAC7H,iHAAiH;SAClH;QACD,OAAO,EAAE;;;;EAIX;KACC;IACD,MAAM,EAAE;QACN,yCAAyC;QACzC,yCAAyC;KAC1C;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/rules/select.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/rules/select.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,MAAM,EAAE,IAsEpB,CAAC"}
|
package/dist/rules/select.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export const select = {
|
|
2
2
|
id: "customizable-select",
|
|
3
3
|
title: "Custom select menus",
|
|
4
|
+
category: "forms",
|
|
4
5
|
replaces: [
|
|
5
6
|
"react-select",
|
|
6
7
|
"choices.js",
|
|
@@ -60,5 +61,11 @@ export const select = {
|
|
|
60
61
|
select, select::picker(select) { appearance: base-select; }
|
|
61
62
|
</style>`,
|
|
62
63
|
},
|
|
64
|
+
guides: [
|
|
65
|
+
"animated-select-picker",
|
|
66
|
+
"branded-select-styling",
|
|
67
|
+
"custom-select-picker-layouts",
|
|
68
|
+
"select-menu-interaction",
|
|
69
|
+
],
|
|
63
70
|
};
|
|
64
71
|
//# sourceMappingURL=select.js.map
|
package/dist/rules/select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/rules/select.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,MAAM,GAAS;IAC1B,EAAE,EAAE,qBAAqB;IACzB,KAAK,EAAE,qBAAqB;IAC5B,QAAQ,EAAE;QACR,cAAc;QACd,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,YAAY;QACZ,iBAAiB;QACjB,sBAAsB;QACtB,eAAe;KAChB;IACD,UAAU,EAAE,CAAC,qBAAqB,CAAC;IACnC,MAAM,EAAE,qCAAqC;IAC7C,KAAK,EAAE;QACL,SAAS,EACP,+YAA+Y;QACjZ,OAAO,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;SA0BJ;QACL,MAAM,EAAE,6DAA6D;KACtE;IACD,KAAK,EAAE;QACL,IAAI,EAAE,4EAA4E;QAClF,MAAM,EAAE;YACN,0LAA0L;YAC1L,qFAAqF;YACrF,gLAAgL;YAChL,qEAAqE;SACtE;QACD,OAAO,EAAE;;;;;;SAMJ;KACN;CACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/rules/select.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,MAAM,GAAS;IAC1B,EAAE,EAAE,qBAAqB;IACzB,KAAK,EAAE,qBAAqB;IAC5B,QAAQ,EAAE,OAAO;IACjB,QAAQ,EAAE;QACR,cAAc;QACd,YAAY;QACZ,SAAS;QACT,YAAY;QACZ,YAAY;QACZ,iBAAiB;QACjB,sBAAsB;QACtB,eAAe;KAChB;IACD,UAAU,EAAE,CAAC,qBAAqB,CAAC;IACnC,MAAM,EAAE,qCAAqC;IAC7C,KAAK,EAAE;QACL,SAAS,EACP,+YAA+Y;QACjZ,OAAO,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;SA0BJ;QACL,MAAM,EAAE,6DAA6D;KACtE;IACD,KAAK,EAAE;QACL,IAAI,EAAE,4EAA4E;QAClF,MAAM,EAAE;YACN,0LAA0L;YAC1L,qFAAqF;YACrF,gLAAgL;YAChL,qEAAqE;SACtE;QACD,OAAO,EAAE;;;;;;SAMJ;KACN;IACD,MAAM,EAAE;QACN,wBAAwB;QACxB,wBAAwB;QACxB,8BAA8B;QAC9B,yBAAyB;KAC1B;CACF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"server-sent-events.d.ts","sourceRoot":"","sources":["../../src/rules/server-sent-events.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,gBAAgB,EAAE,IAqC9B,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
export const serverSentEvents = {
|
|
2
|
+
id: "server-sent-events",
|
|
3
|
+
title: "Server-sent events",
|
|
4
|
+
category: "async-data",
|
|
5
|
+
replaces: ["eventsource", "event-source-polyfill"],
|
|
6
|
+
featureIds: ["server-sent-events"],
|
|
7
|
+
native: "EventSource",
|
|
8
|
+
human: {
|
|
9
|
+
explainer: "EventSource opens a one-way stream from the server and hands you each message as an event. The browser owns the reconnection: if the connection drops it backs off and reconnects on its own, and it replays the last event ID so the server can resume where it left off. Both packages are ports of this API, written for Node or for browsers that predate it.",
|
|
10
|
+
snippet: `const source = new EventSource("/api/updates", {
|
|
11
|
+
withCredentials: true,
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
source.addEventListener("price", (event) => {
|
|
15
|
+
update(JSON.parse(event.data));
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
source.addEventListener("error", () => {
|
|
19
|
+
// The browser is already retrying. Close only to stop for good.
|
|
20
|
+
if (source.readyState === EventSource.CLOSED) reportOffline();
|
|
21
|
+
});`,
|
|
22
|
+
mdnUrl: "https://developer.mozilla.org/en-US/docs/Web/API/EventSource",
|
|
23
|
+
},
|
|
24
|
+
agent: {
|
|
25
|
+
when: "subscribing to a one-way stream of updates from a server",
|
|
26
|
+
unless: [
|
|
27
|
+
"You send an Authorization header on the connection. EventSource cannot set request headers at all, which is the single most common reason projects install the polyfill instead.",
|
|
28
|
+
"The stream needs a POST body or a method other than GET, in which case fetch with a ReadableStream is the platform answer rather than EventSource.",
|
|
29
|
+
"You need control over the reconnection: your own backoff, a retry cap, or a hard failure after N attempts. The browser's loop is not configurable from script.",
|
|
30
|
+
"The code runs in Node rather than a browser. A global EventSource arrived there only recently, and this package is the established client for older runtimes.",
|
|
31
|
+
"You need to inspect response status or headers on connect, for example to tell a 401 apart from a network drop. EventSource surfaces one opaque error event.",
|
|
32
|
+
],
|
|
33
|
+
snippet: `const source = new EventSource("/api/updates");
|
|
34
|
+
source.addEventListener("price", (e) => update(JSON.parse(e.data)));
|
|
35
|
+
source.close();`,
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=server-sent-events.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"server-sent-events.js","sourceRoot":"","sources":["../../src/rules/server-sent-events.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAS;IACpC,EAAE,EAAE,oBAAoB;IACxB,KAAK,EAAE,oBAAoB;IAC3B,QAAQ,EAAE,YAAY;IACtB,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,CAAC;IAClD,UAAU,EAAE,CAAC,oBAAoB,CAAC;IAClC,MAAM,EAAE,aAAa;IACrB,KAAK,EAAE;QACL,SAAS,EACP,mWAAmW;QACrW,OAAO,EAAE;;;;;;;;;;;IAWT;QACA,MAAM,EAAE,8DAA8D;KACvE;IACD,KAAK,EAAE;QACL,IAAI,EAAE,0DAA0D;QAChE,MAAM,EAAE;YACN,kLAAkL;YAClL,oJAAoJ;YACpJ,gKAAgK;YAChK,+JAA+J;YAC/J,8JAA8J;SAC/J;QACD,OAAO,EAAE;;gBAEG;KACb;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"smooth-scroll.d.ts","sourceRoot":"","sources":["../../src/rules/smooth-scroll.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"smooth-scroll.d.ts","sourceRoot":"","sources":["../../src/rules/smooth-scroll.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,YAAY,EAAE,IA4C1B,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export const smoothScroll = {
|
|
2
2
|
id: "smooth-scroll",
|
|
3
3
|
title: "Smooth scrolling and scroll-to-anchor",
|
|
4
|
+
category: "scrolling",
|
|
4
5
|
replaces: [
|
|
5
6
|
"react-scroll",
|
|
6
7
|
"smoothscroll-polyfill",
|
|
@@ -39,5 +40,6 @@ export const smoothScroll = {
|
|
|
39
40
|
}
|
|
40
41
|
[id] { scroll-margin-top: 5rem; }`,
|
|
41
42
|
},
|
|
43
|
+
guides: ["scroll-target-on-load"],
|
|
42
44
|
};
|
|
43
45
|
//# sourceMappingURL=smooth-scroll.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"smooth-scroll.js","sourceRoot":"","sources":["../../src/rules/smooth-scroll.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAS;IAChC,EAAE,EAAE,eAAe;IACnB,KAAK,EAAE,uCAAuC;IAC9C,QAAQ,EAAE;QACR,cAAc;QACd,uBAAuB;QACvB,0BAA0B;QAC1B,eAAe;QACf,SAAS;QACT,cAAc;KACf;IACD,UAAU,EAAE,CAAC,iBAAiB,CAAC;IAC/B,MAAM,EAAE,gDAAgD;IACxD,KAAK,EAAE;QACL,SAAS,EACP,mYAAmY;QACrY,OAAO,EAAE;;;;;;;;;;EAUX;QACE,MAAM,EAAE,kEAAkE;KAC3E;IACD,KAAK,EAAE;QACL,IAAI,EAAE,6DAA6D;QACnE,MAAM,EAAE;YACN,mHAAmH;YACnH,6GAA6G;YAC7G,gFAAgF;YAChF,8KAA8K;SAC/K;QACD,OAAO,EAAE;;;kCAGqB;KAC/B;
|
|
1
|
+
{"version":3,"file":"smooth-scroll.js","sourceRoot":"","sources":["../../src/rules/smooth-scroll.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAS;IAChC,EAAE,EAAE,eAAe;IACnB,KAAK,EAAE,uCAAuC;IAC9C,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE;QACR,cAAc;QACd,uBAAuB;QACvB,0BAA0B;QAC1B,eAAe;QACf,SAAS;QACT,cAAc;KACf;IACD,UAAU,EAAE,CAAC,iBAAiB,CAAC;IAC/B,MAAM,EAAE,gDAAgD;IACxD,KAAK,EAAE;QACL,SAAS,EACP,mYAAmY;QACrY,OAAO,EAAE;;;;;;;;;;EAUX;QACE,MAAM,EAAE,kEAAkE;KAC3E;IACD,KAAK,EAAE;QACL,IAAI,EAAE,6DAA6D;QACnE,MAAM,EAAE;YACN,mHAAmH;YACnH,6GAA6G;YAC7G,gFAAgF;YAChF,8KAA8K;SAC/K;QACD,OAAO,EAAE;;;kCAGqB;KAC/B;IACD,MAAM,EAAE,CAAC,uBAAuB,CAAC;CAClC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"speech-recognition.d.ts","sourceRoot":"","sources":["../../src/rules/speech-recognition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,iBAAiB,EAAE,
|
|
1
|
+
{"version":3,"file":"speech-recognition.d.ts","sourceRoot":"","sources":["../../src/rules/speech-recognition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,iBAAiB,EAAE,IAoC/B,CAAC"}
|
|
@@ -1,27 +1,36 @@
|
|
|
1
1
|
export const speechRecognition = {
|
|
2
2
|
id: "speech-recognition",
|
|
3
3
|
title: "Voice input",
|
|
4
|
+
category: "device-apis",
|
|
4
5
|
replaces: ["annyang", "react-speech-recognition"],
|
|
5
6
|
featureIds: ["speech-recognition"],
|
|
6
7
|
native: "SpeechRecognition",
|
|
7
8
|
human: {
|
|
8
|
-
explainer: "annyang and react-speech-recognition both wrap the same underlying API, adding phrase matching or restart-on-silence logic around it. The API itself lets a page listen for speech and
|
|
9
|
-
snippet:
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
9
|
+
explainer: "annyang and react-speech-recognition both wrap the same underlying API, adding phrase matching or restart-on-silence logic around it. The API itself lets a page listen for speech and hands back a transcript with confidence scores. The constructor is the one part worth copying carefully: the unprefixed name only arrived in Chrome {{chrome:speech-recognition}}, and Safari has exposed it as webkitSpeechRecognition for years, so read both off the window before calling it.",
|
|
10
|
+
snippet: `// Unprefixed is Chrome {{chrome:speech-recognition}} and up. Safari has only
|
|
11
|
+
// the prefixed name,
|
|
12
|
+
// and reading it off window avoids a ReferenceError everywhere else.
|
|
13
|
+
const SpeechRecognitionCtor =
|
|
14
|
+
window.SpeechRecognition ?? window.webkitSpeechRecognition;
|
|
15
|
+
|
|
16
|
+
if (SpeechRecognitionCtor) {
|
|
17
|
+
const recognition = new SpeechRecognitionCtor();
|
|
18
|
+
recognition.onresult = (event) => {
|
|
19
|
+
console.log(event.results[0][0].transcript);
|
|
20
|
+
};
|
|
21
|
+
recognition.start();
|
|
22
|
+
}`,
|
|
14
23
|
mdnUrl: "https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition",
|
|
15
24
|
},
|
|
16
25
|
agent: {
|
|
17
26
|
when: "capturing a speech-to-text transcript directly in the browser",
|
|
18
27
|
unless: [
|
|
19
|
-
"You
|
|
28
|
+
"You want one constructor name that works everywhere. The unprefixed SpeechRecognition is Chrome and Edge {{chrome:speech-recognition}} and up, Safari has only webkitSpeechRecognition, and Firefox ships neither, so the feature detection is yours to write.",
|
|
20
29
|
"You need continuous recognition that automatically restarts after the browser's built-in silence timeout. That restart logic is exactly what these libraries still add.",
|
|
21
|
-
"You need
|
|
30
|
+
"You need recognition to stay on the device. Chrome sends audio to Google's servers by default, and on-device transcription is a separate opt-in rather than the behaviour you get for free.",
|
|
22
31
|
],
|
|
23
|
-
snippet: `const
|
|
24
|
-
|
|
32
|
+
snippet: `const Ctor = window.SpeechRecognition ?? window.webkitSpeechRecognition;
|
|
33
|
+
if (Ctor) new Ctor().start();`,
|
|
25
34
|
},
|
|
26
35
|
};
|
|
27
36
|
//# sourceMappingURL=speech-recognition.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"speech-recognition.js","sourceRoot":"","sources":["../../src/rules/speech-recognition.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,iBAAiB,GAAS;IACrC,EAAE,EAAE,oBAAoB;IACxB,KAAK,EAAE,aAAa;IACpB,QAAQ,EAAE,CAAC,SAAS,EAAE,0BAA0B,CAAC;IACjD,UAAU,EAAE,CAAC,oBAAoB,CAAC;IAClC,MAAM,EAAE,mBAAmB;IAC3B,KAAK,EAAE;QACL,SAAS,EACP,
|
|
1
|
+
{"version":3,"file":"speech-recognition.js","sourceRoot":"","sources":["../../src/rules/speech-recognition.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,iBAAiB,GAAS;IACrC,EAAE,EAAE,oBAAoB;IACxB,KAAK,EAAE,aAAa;IACpB,QAAQ,EAAE,aAAa;IACvB,QAAQ,EAAE,CAAC,SAAS,EAAE,0BAA0B,CAAC;IACjD,UAAU,EAAE,CAAC,oBAAoB,CAAC;IAClC,MAAM,EAAE,mBAAmB;IAC3B,KAAK,EAAE;QACL,SAAS,EACP,0dAA0d;QAC5d,OAAO,EAAE;;;;;;;;;;;;EAYX;QACE,MAAM,EACJ,oEAAoE;KACvE;IACD,KAAK,EAAE;QACL,IAAI,EAAE,+DAA+D;QACrE,MAAM,EAAE;YACN,gQAAgQ;YAChQ,yKAAyK;YACzK,6LAA6L;SAC9L;QACD,OAAO,EAAE;8BACiB;KAC3B;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"speech-synthesis.d.ts","sourceRoot":"","sources":["../../src/rules/speech-synthesis.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,eAAe,EAAE,
|
|
1
|
+
{"version":3,"file":"speech-synthesis.d.ts","sourceRoot":"","sources":["../../src/rules/speech-synthesis.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,eAAe,EAAE,IAwB7B,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export const speechSynthesis = {
|
|
2
2
|
id: "speech-synthesis",
|
|
3
3
|
title: "Text to speech",
|
|
4
|
+
category: "device-apis",
|
|
4
5
|
replaces: ["speak-tts", "react-text-to-speech"],
|
|
5
6
|
featureIds: ["speech-synthesis"],
|
|
6
7
|
native: "SpeechSynthesis and SpeechSynthesisUtterance",
|
|
@@ -13,6 +14,8 @@ speechSynthesis.speak(utterance);`,
|
|
|
13
14
|
agent: {
|
|
14
15
|
when: "reading text aloud with the browser's own text-to-speech engine",
|
|
15
16
|
unless: [
|
|
17
|
+
"You need the voice list on first paint. speechSynthesis.getVoices() returns an empty array until the voiceschanged event fires, so a voice picker has to wait for it, and that timing is most of what speak-tts wraps.",
|
|
18
|
+
"You speak long passages in Chrome, which cuts an utterance off after roughly fifteen seconds unless something keeps resuming it.",
|
|
16
19
|
"You need a specific voice bundled with your app rather than whatever the person's operating system happens to have installed. Voice availability and quality vary by device.",
|
|
17
20
|
"You need the callback-based API wrapped in a promise, or queueing logic across multiple utterances. The library still saves real code there.",
|
|
18
21
|
],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"speech-synthesis.js","sourceRoot":"","sources":["../../src/rules/speech-synthesis.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAS;IACnC,EAAE,EAAE,kBAAkB;IACtB,KAAK,EAAE,gBAAgB;IACvB,QAAQ,EAAE,CAAC,WAAW,EAAE,sBAAsB,CAAC;IAC/C,UAAU,EAAE,CAAC,kBAAkB,CAAC;IAChC,MAAM,EAAE,8CAA8C;IACtD,KAAK,EAAE;QACL,SAAS,EACP,oOAAoO;QACtO,OAAO,EAAE;kCACqB;QAC9B,MAAM,EAAE,kEAAkE;KAC3E;IACD,KAAK,EAAE;QACL,IAAI,EAAE,iEAAiE;QACvE,MAAM,EAAE;YACN,8KAA8K;YAC9K,8IAA8I;SAC/I;QACD,OAAO,EAAE,4DAA4D;KACtE;CACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"speech-synthesis.js","sourceRoot":"","sources":["../../src/rules/speech-synthesis.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAS;IACnC,EAAE,EAAE,kBAAkB;IACtB,KAAK,EAAE,gBAAgB;IACvB,QAAQ,EAAE,aAAa;IACvB,QAAQ,EAAE,CAAC,WAAW,EAAE,sBAAsB,CAAC;IAC/C,UAAU,EAAE,CAAC,kBAAkB,CAAC;IAChC,MAAM,EAAE,8CAA8C;IACtD,KAAK,EAAE;QACL,SAAS,EACP,oOAAoO;QACtO,OAAO,EAAE;kCACqB;QAC9B,MAAM,EAAE,kEAAkE;KAC3E;IACD,KAAK,EAAE;QACL,IAAI,EAAE,iEAAiE;QACvE,MAAM,EAAE;YACN,wNAAwN;YACxN,kIAAkI;YAClI,8KAA8K;YAC9K,8IAA8I;SAC/I;QACD,OAAO,EAAE,4DAA4D;KACtE;CACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sticky.d.ts","sourceRoot":"","sources":["../../src/rules/sticky.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"sticky.d.ts","sourceRoot":"","sources":["../../src/rules/sticky.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,MAAM,EAAE,IA2CpB,CAAC"}
|
package/dist/rules/sticky.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export const sticky = {
|
|
2
2
|
id: "sticky-positioning",
|
|
3
3
|
title: "Sticky headers and sidebars",
|
|
4
|
+
category: "layout",
|
|
4
5
|
replaces: [
|
|
5
6
|
"sticky-js",
|
|
6
7
|
"stickyfill",
|
|
@@ -38,5 +39,6 @@ export const sticky = {
|
|
|
38
39
|
snippet: `.header { position: sticky; top: 0; z-index: 10; }
|
|
39
40
|
.sidebar { position: sticky; top: 5rem; align-self: start; }`,
|
|
40
41
|
},
|
|
42
|
+
guides: ["state-aware-sticky-headers", "scroll-position-aware-elements"],
|
|
41
43
|
};
|
|
42
44
|
//# sourceMappingURL=sticky.js.map
|
package/dist/rules/sticky.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sticky.js","sourceRoot":"","sources":["../../src/rules/sticky.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,MAAM,GAAS;IAC1B,EAAE,EAAE,oBAAoB;IACxB,KAAK,EAAE,6BAA6B;IACpC,QAAQ,EAAE;QACR,WAAW;QACX,YAAY;QACZ,cAAc;QACd,YAAY;QACZ,YAAY;QACZ,sBAAsB;QACtB,YAAY;KACb;IACD,UAAU,EAAE,CAAC,oBAAoB,CAAC;IAClC,MAAM,EAAE,kBAAkB;IAC1B,KAAK,EAAE;QACL,SAAS,EACP,iaAAia;QACna,OAAO,EAAE;;;;;;;;;;;EAWX;QACE,MAAM,EAAE,kEAAkE;KAC3E;IACD,KAAK,EAAE;QACL,IAAI,EAAE,0EAA0E;QAChF,MAAM,EAAE;YACN,iLAAiL;YACjL,kLAAkL;YAClL,qFAAqF;SACtF;QACD,OAAO,EAAE;6DACgD;KAC1D;
|
|
1
|
+
{"version":3,"file":"sticky.js","sourceRoot":"","sources":["../../src/rules/sticky.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,MAAM,GAAS;IAC1B,EAAE,EAAE,oBAAoB;IACxB,KAAK,EAAE,6BAA6B;IACpC,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE;QACR,WAAW;QACX,YAAY;QACZ,cAAc;QACd,YAAY;QACZ,YAAY;QACZ,sBAAsB;QACtB,YAAY;KACb;IACD,UAAU,EAAE,CAAC,oBAAoB,CAAC;IAClC,MAAM,EAAE,kBAAkB;IAC1B,KAAK,EAAE;QACL,SAAS,EACP,iaAAia;QACna,OAAO,EAAE;;;;;;;;;;;EAWX;QACE,MAAM,EAAE,kEAAkE;KAC3E;IACD,KAAK,EAAE;QACL,IAAI,EAAE,0EAA0E;QAChF,MAAM,EAAE;YACN,iLAAiL;YACjL,kLAAkL;YAClL,qFAAqF;SACtF;QACD,OAAO,EAAE;6DACgD;KAC1D;IACD,MAAM,EAAE,CAAC,4BAA4B,EAAE,gCAAgC,CAAC;CACzE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"structured-clone.d.ts","sourceRoot":"","sources":["../../src/rules/structured-clone.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,mBAAmB,EAAE,
|
|
1
|
+
{"version":3,"file":"structured-clone.d.ts","sourceRoot":"","sources":["../../src/rules/structured-clone.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,mBAAmB,EAAE,IA+BjC,CAAC"}
|