fix(lint): a scene may use Three.js or Lottie loaded by the parent document (#6961)

packages/lint/src/rules/adapters.test.ts

@@ -107,6 +107,20 @@ describe("adapter rules", () => {
     expect(finding?.message).toContain("Three.js");
   });
 
+  it.each([
+    ["missing_three_script", "const scene = new THREE.Scene();"],
+    ["missing_lottie_script", "lottie.loadAnimation({ container: document.body });"],
+  ])(
+    "does not report %s in a scene, since the parent document loads the library",
+    async (code, usage) => {
+      const html = `<template id="scene-template"><div data-composition-id="scene" data-width="1920" data-height="1080"><script>${usage}</script></div></template>`;
+      const sub = await lintHyperframeHtml(html, { isSubComposition: true });
+      const bare = await lintHyperframeHtml(html);
+      expect(sub.findings.map((f) => f.code)).not.toContain(code);
+      expect(bare.findings.map((f) => f.code)).not.toContain(code);
+    },
+  );
+
   it("does not report missing_three_script when Three.js CDN script is present", async () => {
     const html = `
 <html><body>

packages/lint/src/rules/adapters.ts

@@ -1,9 +1,17 @@
 import type { LintContext, HyperframeLintFinding } from "../context";
 import { readAttr, extractScriptTextsAndSrcs } from "../utils";
 
+function inheritsLibrariesFromHost({ options, rawSource }: LintContext): boolean {
+  return (
+    options.isSubComposition === true || rawSource.trimStart().toLowerCase().startsWith("<template")
+  );
+}
+
 export const adapterRules: Array<(ctx: LintContext) => HyperframeLintFinding[]> = [
   // missing_lottie_script
-  ({ tags, scripts }) => {
+  (ctx) => {
+    const { tags, scripts } = ctx;
+    if (inheritsLibrariesFromHost(ctx)) return [];
     const { texts, srcs } = extractScriptTextsAndSrcs(scripts);
 
     const hasLottieAttr = tags.some((t) => readAttr(t.raw, "data-lottie-src") !== null);
@@ -26,7 +34,9 @@ export const adapterRules: Array<(ctx: LintContext) => HyperframeLintFinding[]>
   },
 
   // missing_three_script
-  ({ scripts }) => {
+  (ctx) => {
+    const { scripts } = ctx;
+    if (inheritsLibrariesFromHost(ctx)) return [];
     const { texts, srcs } = extractScriptTextsAndSrcs(scripts);
 
     const usesThree = texts.some((t) => /\bTHREE\./.test(t));