@hyperframes/core 0.8.194 → 0.8.195

package/dist/runtime/clipReveal.d.ts

@@ -0,0 +1,8 @@
+/** The visibility pass's mark on a timed clip it hides; the runtime's rules hide the clip's contents by it. */
+export declare const CLIP_HIDDEN_ATTR = "data-hf-clip-hidden";
+/** Shows a clip the visibility pass hid, contents included; returns a function that puts the mark back. */
+export declare function revealClip(el: HTMLElement, priority?: string): () => void;
+/** Called by shader-transitions builds on load: their revealers go through revealClip. */
+export declare function declareClipRevealAware(): void;
+/** A shader-transitions build is on the page whose revealers predate revealClip. */
+export declare function olderShaderBuildOnPage(): boolean;

package/dist/runtime/clipReveal.js

@@ -0,0 +1,23 @@
+/** The visibility pass's mark on a timed clip it hides; the runtime's rules hide the clip's contents by it. */
+export const CLIP_HIDDEN_ATTR = "data-hf-clip-hidden";
+/** Shows a clip the visibility pass hid, contents included; returns a function that puts the mark back. */
+export function revealClip(el, priority = "") {
+    el.style.setProperty("visibility", "visible", priority);
+    if (!el.hasAttribute(CLIP_HIDDEN_ATTR))
+        return () => { };
+    el.removeAttribute(CLIP_HIDDEN_ATTR);
+    return function putClipHiddenMarkBack() {
+        el.setAttribute(CLIP_HIDDEN_ATTR, "");
+    };
+}
+/** Called by shader-transitions builds on load: their revealers go through revealClip. */
+export function declareClipRevealAware() {
+    if (typeof window !== "undefined")
+        window.__hfClipRevealAware = true;
+}
+/** A shader-transitions build is on the page whose revealers predate revealClip. */
+export function olderShaderBuildOnPage() {
+    const win = window;
+    const shaderOnPage = win.HyperShader !== undefined || win.__hf?.transitions !== undefined;
+    return shaderOnPage && win.__hfClipRevealAware !== true;
+}

package/dist/runtime/timedClipHide.d.ts

@@ -1,5 +1,6 @@
-export declare const SKIPPED_CLIP = "[data-start]:not(video, audio, img, [data-hf-upcoming], [data-hf-autostamped])[style*=\"visibility: hidden\"]";
-export declare const CLIP_HIDDEN_ATTR = "data-hf-clip-hidden";
+import { CLIP_HIDDEN_ATTR } from "./clipReveal.js";
+export { CLIP_HIDDEN_ATTR };
+export declare const SKIPPED_CLIP = "[data-start]:not(video, audio, img, [data-hf-upcoming], [data-hf-autostamped])[data-hf-clip-hidden]";
 export declare function showHiddenClips(): () => void;
 export declare function defersMedia(): boolean;
 /** True in Studio's preview, where hidden clips' images are neither fetched nor decoded until due. */
@@ -7,3 +8,4 @@ export declare function skipsHiddenImages(): boolean;
 export declare function hideTimedClipsUntilFirstPass(): void;
 /** True when this call lifted the rule; callers then re-register what skipped hidden elements (grading). */
 export declare function revealTimedClipsAfterFirstPass(): boolean;
+export declare function keepInlineHideRulesForOlderShaders(): void;

package/dist/runtime/timedClipHide.js

@@ -1,3 +1,4 @@
+import { CLIP_HIDDEN_ATTR, olderShaderBuildOnPage, revealClip } from "./clipReveal.js";
 import { RUNTIME_STAMPED_ATTR, STUDIO_PREVIEW_CAPTURE_MODE, STUDIO_PREVIEW_MARK_META, STUDIO_PREVIEW_UPCOMING_ATTR, } from "../studioPreviewMark.js";
 // Hides timed non-media clips from script evaluation until the first visibility pass decides them;
 // before it, a paused page painted every clip at once. Media is left to init's media pass.
@@ -6,24 +7,28 @@ const HIDE_ATTR = "data-hf-first-pass-hide";
 const HIDE_UNTIL_FIRST_PASS = "[data-start]:not(video, audio, img) { visibility: hidden !important; }";
 const PREVIEW_HIDE_UNTIL_FIRST_PASS = 'img[loading="lazy"] { display: none !important; }';
 const SKIP_ATTR = "data-hf-skip-hidden-images";
-export const SKIPPED_CLIP = `[data-start]:not(video, audio, img, [${STUDIO_PREVIEW_UPCOMING_ATTR}], [${RUNTIME_STAMPED_ATTR}])[style*="visibility: hidden"]`;
-const SKIP_HIDDEN_IMAGES = `${SKIPPED_CLIP} img { display: none !important; }`;
+export { CLIP_HIDDEN_ATTR };
+const SKIPPABLE_CLIP = `[data-start]:not(video, audio, img, [${STUDIO_PREVIEW_UPCOMING_ATTR}], [${RUNTIME_STAMPED_ATTR}])`;
+export const SKIPPED_CLIP = `${SKIPPABLE_CLIP}[${CLIP_HIDDEN_ATTR}]`;
 const STUDIO_PREVIEW_MARK = `meta[name="${STUDIO_PREVIEW_MARK_META}"]`;
-export const CLIP_HIDDEN_ATTR = "data-hf-clip-hidden";
 const CONTENTS_ATTR = "data-hf-hidden-clip-contents";
-const HIDDEN_CLIP = `[${CLIP_HIDDEN_ATTR}][style*="visibility: hidden"]`;
-const HIDE_HIDDEN_CLIP_CONTENTS = `${HIDDEN_CLIP} * { visibility: hidden !important; }`;
-const FILTER_OUTPUT_LAYERS = [HIDDEN_CLIP, `${HIDDEN_CLIP} *`]
-    .flatMap((layer) => [layer, `${layer}::before`, `${layer}::after`])
-    .join(", ");
-const HIDE_FILTER_OUTPUT = `${FILTER_OUTPUT_LAYERS} { filter: none !important; }`;
+const HIDDEN_CLIP_DOUBLED_FOR_WEIGHT = `[${CLIP_HIDDEN_ATTR}][${CLIP_HIDDEN_ATTR}]`;
+const HIDDEN_CLIP_BY_INLINE_STYLE = `[${CLIP_HIDDEN_ATTR}][style*="visibility: hidden"]`;
+const skipHiddenImages = (clip) => `${SKIPPABLE_CLIP}${clip} img { display: none !important; }`;
+const hideHiddenClipContents = (clip) => {
+    const filterOutputLayers = [clip, `${clip} *`]
+        .flatMap((layer) => [layer, `${layer}::before`, `${layer}::after`])
+        .join(", ");
+    return `${clip} * { visibility: hidden !important; } ${filterOutputLayers} { filter: none !important; }`;
+};
 export function showHiddenClips() {
     const hidden = Array.from(document.querySelectorAll(`[${CLIP_HIDDEN_ATTR}]`));
-    for (const el of hidden)
-        el.style.visibility = "visible";
+    const putMarksBack = hidden.map((el) => revealClip(el));
     return () => {
         for (const el of hidden)
             el.style.visibility = "hidden";
+        for (const putMarkBack of putMarksBack)
+            putMarkBack();
     };
 }
 function appendStyle(parent, attr, css) {
@@ -49,9 +54,9 @@ export function hideTimedClipsUntilFirstPass() {
     const preview = mark !== null;
     const capture = mark?.getAttribute("content") === STUDIO_PREVIEW_CAPTURE_MODE;
     if (preview && !capture && !skipsHiddenImages())
-        appendStyle(parent, SKIP_ATTR, SKIP_HIDDEN_IMAGES);
+        appendStyle(parent, SKIP_ATTR, skipHiddenImages(HIDDEN_CLIP_DOUBLED_FOR_WEIGHT));
     if (!document.querySelector(`style[${CONTENTS_ATTR}]`))
-        appendStyle(parent, CONTENTS_ATTR, `${HIDE_HIDDEN_CLIP_CONTENTS} ${HIDE_FILTER_OUTPUT}`);
+        appendStyle(parent, CONTENTS_ATTR, hideHiddenClipContents(HIDDEN_CLIP_DOUBLED_FOR_WEIGHT));
     const win = window;
     // A runtime that already initialised may never run another pass to lift a new rule.
     if (win.__hfFirstPassHidden || win.__hyperframeRuntimeBootstrapped)
@@ -72,3 +77,13 @@ export function revealTimedClipsAfterFirstPass() {
         style.remove();
     return true;
 }
+export function keepInlineHideRulesForOlderShaders() {
+    if (!olderShaderBuildOnPage())
+        return;
+    const skip = document.querySelector(`style[${SKIP_ATTR}]`);
+    if (skip)
+        skip.textContent = skipHiddenImages(HIDDEN_CLIP_BY_INLINE_STYLE);
+    const contents = document.querySelector(`style[${CONTENTS_ATTR}]`);
+    if (contents)
+        contents.textContent = hideHiddenClipContents(HIDDEN_CLIP_BY_INLINE_STYLE);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/core",
-  "version": "0.8.194",
+  "version": "0.8.195",
   "description": "",
   "repository": {
     "type": "git",
@@ -265,6 +265,10 @@
       "import": "./dist/runtime/clipWindow.js",
       "types": "./dist/runtime/clipWindow.d.ts"
     },
+    "./runtime/clip-reveal": {
+      "import": "./dist/runtime/clipReveal.js",
+      "types": "./dist/runtime/clipReveal.d.ts"
+    },
     "./runtime/stacking-context": {
       "import": "./dist/runtime/stackingContext.js",
       "types": "./dist/runtime/stackingContext.d.ts"
@@ -393,9 +397,9 @@
     "linkedom": "^0.18.12",
     "postcss": "^8.5.8",
     "wawoff2": "^2.0.1",
-    "@hyperframes/lint": "0.8.194",
-    "@hyperframes/parsers": "0.8.194",
-    "@hyperframes/studio-server": "0.8.194"
+    "@hyperframes/lint": "0.8.195",
+    "@hyperframes/parsers": "0.8.195",
+    "@hyperframes/studio-server": "0.8.195"
   },
   "devDependencies": {
     "@fontsource/archivo-black": "^5.2.8",