Skip to content

Commit f843821

Browse files
jjspacejjspace
committed
use correct dependencies in hooks
1 parent f5b807d commit f843821

File tree

1 file changed

+99
-89
lines changed

1 file changed

+99
-89
lines changed

‎packages/sandcastle/src/Bucket.tsx‎

Lines changed: 99 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useEffect, useRef } from "react";
1+
import { useCallback, useEffect, useRef } from "react";
22
import { embedInSandcastleTemplate } from "./Helpers";
33
import "./Bucket.css";
44
import { ConsoleMessageType } from "./ConsoleMirror";
@@ -35,103 +35,106 @@ function Bucket({
3535
const bucket = useRef<HTMLIFrameElement>(null);
3636
const lastRunNumber = useRef<number>(Number.NEGATIVE_INFINITY);
3737

38-
function activateBucketScripts(
39-
bucketFrame: HTMLIFrameElement,
40-
code: string,
41-
html: string,
42-
) {
43-
const bucketDoc = bucketFrame.contentDocument;
44-
if (!bucketDoc) {
45-
return;
46-
}
47-
48-
const headNodes = bucketDoc.head.childNodes;
49-
let node;
50-
const nodes: HTMLScriptElement[] = [];
51-
let i, len;
52-
for (i = 0, len = headNodes.length; i < len; ++i) {
53-
node = headNodes[i];
54-
// header is included in blank frame.
55-
if (
56-
node instanceof HTMLScriptElement &&
57-
node.src.indexOf("Sandcastle-header.js") < 0 &&
58-
node.src.indexOf("Cesium.js") < 0
59-
) {
60-
nodes.push(node);
38+
const activateBucketScripts = useCallback(
39+
function activateBucketScripts(
40+
bucketFrame: HTMLIFrameElement,
41+
code: string,
42+
html: string,
43+
) {
44+
const bucketDoc = bucketFrame.contentDocument;
45+
if (!bucketDoc) {
46+
return;
6147
}
62-
}
63-
64-
for (i = 0, len = nodes.length; i < len; ++i) {
65-
bucketDoc.head.removeChild(nodes[i]);
66-
}
6748

68-
// Apply user HTML to bucket.
69-
const htmlElement = bucketDoc.createElement("div");
70-
htmlElement.innerHTML = html;
71-
bucketDoc.body.appendChild(htmlElement);
72-
73-
const onScriptTagError = function () {
74-
if (bucketFrame.contentDocument === bucketDoc) {
75-
// @ts-expect-error this has type any because it's from anywhere inside the bucket
76-
appendConsole("error", `Error loading ${this.src}`);
77-
appendConsole(
78-
"error",
79-
"Make sure Cesium is built, see the Contributor's Guide for details.",
80-
);
49+
const headNodes = bucketDoc.head.childNodes;
50+
let node;
51+
const nodes: HTMLScriptElement[] = [];
52+
let i, len;
53+
for (i = 0, len = headNodes.length; i < len; ++i) {
54+
node = headNodes[i];
55+
// header is included in blank frame.
56+
if (
57+
node instanceof HTMLScriptElement &&
58+
node.src.indexOf("Sandcastle-header.js") < 0 &&
59+
node.src.indexOf("Cesium.js") < 0
60+
) {
61+
nodes.push(node);
62+
}
8163
}
82-
};
8364

84-
// Load each script after the previous one has loaded.
85-
const loadScript = function () {
86-
if (bucketFrame.contentDocument !== bucketDoc) {
87-
// A newer reload has happened, abort this.
88-
return;
65+
for (i = 0, len = nodes.length; i < len; ++i) {
66+
bucketDoc.head.removeChild(nodes[i]);
8967
}
90-
if (nodes.length > 0) {
91-
while (nodes.length > 0) {
92-
node = nodes.shift();
93-
if (!node) {
94-
continue;
95-
}
96-
const scriptElement = bucketDoc.createElement("script");
97-
let hasSrc = false;
98-
for (
99-
let j = 0, numAttrs = node.attributes.length;
100-
j < numAttrs;
101-
++j
102-
) {
103-
const name = node.attributes[j].name;
104-
const val = node.attributes[j].value;
105-
scriptElement.setAttribute(name, val);
106-
if (name === "src" && val) {
107-
hasSrc = true;
68+
69+
// Apply user HTML to bucket.
70+
const htmlElement = bucketDoc.createElement("div");
71+
htmlElement.innerHTML = html;
72+
bucketDoc.body.appendChild(htmlElement);
73+
74+
const onScriptTagError = function () {
75+
if (bucketFrame.contentDocument === bucketDoc) {
76+
// @ts-expect-error this has type any because it's from anywhere inside the bucket
77+
appendConsole("error", `Error loading ${this.src}`);
78+
appendConsole(
79+
"error",
80+
"Make sure Cesium is built, see the Contributor's Guide for details.",
81+
);
82+
}
83+
};
84+
85+
// Load each script after the previous one has loaded.
86+
const loadScript = function () {
87+
if (bucketFrame.contentDocument !== bucketDoc) {
88+
// A newer reload has happened, abort this.
89+
return;
90+
}
91+
if (nodes.length > 0) {
92+
while (nodes.length > 0) {
93+
node = nodes.shift();
94+
if (!node) {
95+
continue;
96+
}
97+
const scriptElement = bucketDoc.createElement("script");
98+
let hasSrc = false;
99+
for (
100+
let j = 0, numAttrs = node.attributes.length;
101+
j < numAttrs;
102+
++j
103+
) {
104+
const name = node.attributes[j].name;
105+
const val = node.attributes[j].value;
106+
scriptElement.setAttribute(name, val);
107+
if (name === "src" && val) {
108+
hasSrc = true;
109+
}
110+
}
111+
scriptElement.innerHTML = node.innerHTML;
112+
if (hasSrc) {
113+
scriptElement.onload = loadScript;
114+
scriptElement.onerror = onScriptTagError;
115+
bucketDoc.head.appendChild(scriptElement);
116+
} else {
117+
bucketDoc.head.appendChild(scriptElement);
118+
loadScript();
108119
}
109120
}
110-
scriptElement.innerHTML = node.innerHTML;
111-
if (hasSrc) {
112-
scriptElement.onload = loadScript;
113-
scriptElement.onerror = onScriptTagError;
114-
bucketDoc.head.appendChild(scriptElement);
115-
} else {
116-
bucketDoc.head.appendChild(scriptElement);
117-
loadScript();
118-
}
119-
}
120-
} else {
121-
// Apply user JS to bucket
122-
const element = bucketDoc.createElement("script");
123-
element.type = "module";
121+
} else {
122+
// Apply user JS to bucket
123+
const element = bucketDoc.createElement("script");
124+
element.type = "module";
124125

125-
// Firefox line numbers are zero-based, not one-based.
126-
const isFirefox = navigator.userAgent.indexOf("Firefox/") >= 0;
126+
// Firefox line numbers are zero-based, not one-based.
127+
const isFirefox = navigator.userAgent.indexOf("Firefox/") >= 0;
127128

128-
element.textContent = embedInSandcastleTemplate(code, isFirefox);
129-
bucketDoc.body.appendChild(element);
130-
}
131-
};
129+
element.textContent = embedInSandcastleTemplate(code, isFirefox);
130+
bucketDoc.body.appendChild(element);
131+
}
132+
};
132133

133-
loadScript();
134-
}
134+
loadScript();
135+
},
136+
[appendConsole],
137+
);
135138

136139
useEffect(() => {
137140
if (
@@ -197,7 +200,14 @@ function Bucket({
197200
};
198201
window.addEventListener("message", messageHandler);
199202
return () => window.removeEventListener("message", messageHandler);
200-
}, [code, html, highlightLine, resetConsole, appendConsole]);
203+
}, [
204+
code,
205+
html,
206+
highlightLine,
207+
resetConsole,
208+
appendConsole,
209+
activateBucketScripts,
210+
]);
201211

202212
return (
203213
<div className="bucket-container">

0 commit comments

Comments
 (0)