diff --git a/packages/core/src/compiler/__goldens__/pageBuild.preview.html b/packages/core/src/compiler/__goldens__/pageBuild.preview.html index 3a346a3e85c..4d1df005c95 100644 --- a/packages/core/src/compiler/__goldens__/pageBuild.preview.html +++ b/packages/core/src/compiler/__goldens__/pageBuild.preview.html @@ -530,15 +530,22 @@

Title

} }) : window; var __hfResolveGsapTarget = function(target) { - if (typeof target === "string") return __hfQueryAll(target); - if (!Array.isArray(target)) return target; - return target.reduce(function(resolved, item) { + if (typeof target !== "string" && !Array.isArray(target)) return target; + var resolved = typeof target === "string" ? __hfQueryAll(target) : target.reduce(function(resolved2, item) { if (typeof item === "string") { - return resolved.concat(Array.prototype.slice.call(__hfQueryAll(item))); + return resolved2.concat(Array.prototype.slice.call(__hfQueryAll(item))); } - resolved.push(item); - return resolved; + resolved2.push(item); + return resolved2; }, []); + if (!resolved.length) { + var originalTarget = String(target); + resolved = []; + resolved.toString = function() { + return originalTarget; + }; + } + return resolved; }; var __hfScopeTimeline = function(timeline) { if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline; @@ -1067,15 +1074,22 @@

Title

} }) : window; var __hfResolveGsapTarget = function(target) { - if (typeof target === "string") return __hfQueryAll(target); - if (!Array.isArray(target)) return target; - return target.reduce(function(resolved, item) { + if (typeof target !== "string" && !Array.isArray(target)) return target; + var resolved = typeof target === "string" ? __hfQueryAll(target) : target.reduce(function(resolved2, item) { if (typeof item === "string") { - return resolved.concat(Array.prototype.slice.call(__hfQueryAll(item))); + return resolved2.concat(Array.prototype.slice.call(__hfQueryAll(item))); } - resolved.push(item); - return resolved; + resolved2.push(item); + return resolved2; }, []); + if (!resolved.length) { + var originalTarget = String(target); + resolved = []; + resolved.toString = function() { + return originalTarget; + }; + } + return resolved; }; var __hfScopeTimeline = function(timeline) { if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline; @@ -1604,15 +1618,22 @@

Title

} }) : window; var __hfResolveGsapTarget = function(target) { - if (typeof target === "string") return __hfQueryAll(target); - if (!Array.isArray(target)) return target; - return target.reduce(function(resolved, item) { + if (typeof target !== "string" && !Array.isArray(target)) return target; + var resolved = typeof target === "string" ? __hfQueryAll(target) : target.reduce(function(resolved2, item) { if (typeof item === "string") { - return resolved.concat(Array.prototype.slice.call(__hfQueryAll(item))); + return resolved2.concat(Array.prototype.slice.call(__hfQueryAll(item))); } - resolved.push(item); - return resolved; + resolved2.push(item); + return resolved2; }, []); + if (!resolved.length) { + var originalTarget = String(target); + resolved = []; + resolved.toString = function() { + return originalTarget; + }; + } + return resolved; }; var __hfScopeTimeline = function(timeline) { if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline; diff --git a/packages/core/src/compiler/__goldens__/pageBuild.render.html b/packages/core/src/compiler/__goldens__/pageBuild.render.html index 942b9eb97c7..8985a87db1e 100644 --- a/packages/core/src/compiler/__goldens__/pageBuild.render.html +++ b/packages/core/src/compiler/__goldens__/pageBuild.render.html @@ -557,15 +557,22 @@

Title

} }) : window; var __hfResolveGsapTarget = function(target) { - if (typeof target === "string") return __hfQueryAll(target); - if (!Array.isArray(target)) return target; - return target.reduce(function(resolved, item) { + if (typeof target !== "string" && !Array.isArray(target)) return target; + var resolved = typeof target === "string" ? __hfQueryAll(target) : target.reduce(function(resolved2, item) { if (typeof item === "string") { - return resolved.concat(Array.prototype.slice.call(__hfQueryAll(item))); + return resolved2.concat(Array.prototype.slice.call(__hfQueryAll(item))); } - resolved.push(item); - return resolved; + resolved2.push(item); + return resolved2; }, []); + if (!resolved.length) { + var originalTarget = String(target); + resolved = []; + resolved.toString = function() { + return originalTarget; + }; + } + return resolved; }; var __hfScopeTimeline = function(timeline) { if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline; @@ -1095,15 +1102,22 @@

Title

} }) : window; var __hfResolveGsapTarget = function(target) { - if (typeof target === "string") return __hfQueryAll(target); - if (!Array.isArray(target)) return target; - return target.reduce(function(resolved, item) { + if (typeof target !== "string" && !Array.isArray(target)) return target; + var resolved = typeof target === "string" ? __hfQueryAll(target) : target.reduce(function(resolved2, item) { if (typeof item === "string") { - return resolved.concat(Array.prototype.slice.call(__hfQueryAll(item))); + return resolved2.concat(Array.prototype.slice.call(__hfQueryAll(item))); } - resolved.push(item); - return resolved; + resolved2.push(item); + return resolved2; }, []); + if (!resolved.length) { + var originalTarget = String(target); + resolved = []; + resolved.toString = function() { + return originalTarget; + }; + } + return resolved; }; var __hfScopeTimeline = function(timeline) { if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline; @@ -1633,15 +1647,22 @@

Title

} }) : window; var __hfResolveGsapTarget = function(target) { - if (typeof target === "string") return __hfQueryAll(target); - if (!Array.isArray(target)) return target; - return target.reduce(function(resolved, item) { + if (typeof target !== "string" && !Array.isArray(target)) return target; + var resolved = typeof target === "string" ? __hfQueryAll(target) : target.reduce(function(resolved2, item) { if (typeof item === "string") { - return resolved.concat(Array.prototype.slice.call(__hfQueryAll(item))); + return resolved2.concat(Array.prototype.slice.call(__hfQueryAll(item))); } - resolved.push(item); - return resolved; + resolved2.push(item); + return resolved2; }, []); + if (!resolved.length) { + var originalTarget = String(target); + resolved = []; + resolved.toString = function() { + return originalTarget; + }; + } + return resolved; }; var __hfScopeTimeline = function(timeline) { if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline; diff --git a/packages/core/src/compiler/compositionScoping.test.ts b/packages/core/src/compiler/compositionScoping.test.ts index 559d11c5e4a..63b1faf7c3d 100644 --- a/packages/core/src/compiler/compositionScoping.test.ts +++ b/packages/core/src/compiler/compositionScoping.test.ts @@ -631,6 +631,34 @@ globalThis.gsap.to("p", { x: 1 }); expect(targetCompositions).toEqual(["scene", "scene"]); }); + it("preserves missing GSAP selectors without targeting another composition", () => { + const { document } = parseHTML(` +
+
+ `); + const targets: Element[][] = []; + const fakeWindow = { + document, + __timelines: {}, + gsap: { + to(target: Element[]) { + targets.push(target); + }, + }, + }; + const wrapped = wrapScopedCompositionScript( + `gsap.to('[data-part="missing"]', { opacity: 1 });`, + "scene", + ); + + new Function("window", "gsap", wrapped)(fakeWindow, fakeWindow.gsap); + + expect(targets).toHaveLength(1); + expect(Array.isArray(targets[0])).toBe(true); + expect(targets[0]).toHaveLength(0); + expect(String(targets[0])).toBe('[data-part="missing"]'); + }); + it("scopes getElementById when duplicate IDs exist across composition roots", () => { const { document } = parseHTML(`
diff --git a/packages/core/src/compiler/compositionScoping.ts b/packages/core/src/compiler/compositionScoping.ts index 178b70b4f0b..b3f06e52973 100644 --- a/packages/core/src/compiler/compositionScoping.ts +++ b/packages/core/src/compiler/compositionScoping.ts @@ -579,16 +579,22 @@ export function wrapScopedCompositionScript( }) : window; var __hfResolveGsapTarget = function(target) { - if (typeof target === "string") return __hfQueryAll(target); - if (!Array.isArray(target)) return target; - return target.reduce(function(resolved, item) { + if (typeof target !== "string" && !Array.isArray(target)) return target; + var resolved = typeof target === "string" ? __hfQueryAll(target) : target.reduce(function(resolved, item) { if (typeof item === "string") { return resolved.concat(Array.prototype.slice.call(__hfQueryAll(item))); } resolved.push(item); return resolved; }, []); - + if (!resolved.length) { + // GSAP warns "GSAP target " + targets + " not found"; a bare empty match list prints an + // empty name. Keep the authored selector as the text while still targeting nothing here. + var originalTarget = String(target); + resolved = []; + resolved.toString = function() { return originalTarget; }; + } + return resolved; }; var __hfScopeTimeline = function(timeline) { if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;