Convert src/runtime/internal/style_manager.ts to JavaScript

src/runtime/internal/style_manager.ts

@@ -1,76 +1,66 @@
 import { append_empty_stylesheet, detach, get_root_for_style } from './dom';
 import { raf } from './environment';
-
-interface StyleInformation {
-	stylesheet: CSSStyleSheet;
-	rules: Record<string, true>;
-}
-
 // we need to store the information for multiple documents because a Svelte application could also contain iframes
 // https://github.com/sveltejs/svelte/issues/3624
-const managed_styles = new Map<Document | ShadowRoot, StyleInformation>();
+const managed_styles = new Map();
 let active = 0;
-
 // https://github.com/darkskyapp/string-hash/blob/master/index.js
-function hash(str: string) {
+/** @param {string} str
+ * @returns {number}
+ */
+function hash(str) {
     let hash = 5381;
     let i = str.length;
-
+    while (i--)
-	while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
+        hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
     return hash >>> 0;
 }
-
+/** @param {Document | ShadowRoot} doc
-function create_style_information(
+ * @param {Element & ElementCSSInlineStyle} node
-	doc: Document | ShadowRoot,
+ * @returns {{ stylesheet: any; rules: {}; }}
-	node: Element & ElementCSSInlineStyle
+ */
-) {
+function create_style_information(doc, node) {
     const info = { stylesheet: append_empty_stylesheet(node), rules: {} };
     managed_styles.set(doc, info);
     return info;
 }
-
+/** @param {Element & ElementCSSInlineStyle} node
-export function create_rule(
+ * @param {number} a
-	node: Element & ElementCSSInlineStyle,
+ * @param {number} b
-	a: number,
+ * @param {number} duration
-	b: number,
+ * @param {number} delay
-	duration: number,
+ * @param {(t: number) => number} ease
-	delay: number,
+ * @param {(t: number, u: number) => string} fn
-	ease: (t: number) => number,
+ * @param {number} uid
-	fn: (t: number, u: number) => string,
+ * @returns {string}
-	uid: number = 0
+ */
-) {
+export function create_rule(node, a, b, duration, delay, ease, fn, uid = 0) {
     const step = 16.666 / duration;
     let keyframes = '{\n';
-
     for (let p = 0; p <= 1; p += step) {
         const t = a + (b - a) * ease(p);
         keyframes += p * 100 + `%{${fn(t, 1 - t)}}\n`;
     }
-
     const rule = keyframes + `100% {${fn(b, 1 - b)}}\n}`;
     const name = `__svelte_${hash(rule)}_${uid}`;
     const doc = get_root_for_style(node);
-
     const { stylesheet, rules } = managed_styles.get(doc) || create_style_information(doc, node);
-
     if (!rules[name]) {
         rules[name] = true;
         stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);
     }
-
     const animation = node.style.animation || '';
-	node.style.animation = `${
+    node.style.animation = `${animation ? `${animation}, ` : ''}${name} ${duration}ms linear ${delay}ms 1 both`;
-		animation ? `${animation}, ` : ''
-	}${name} ${duration}ms linear ${delay}ms 1 both`;
-
     active += 1;
     return name;
 }
-
+/** @param {Element & ElementCSSInlineStyle} node
-export function delete_rule(node: Element & ElementCSSInlineStyle, name?: string) {
+ * @param {string} name
+ * @returns {void}
+ */
+export function delete_rule(node, name) {
     const previous = (node.style.animation || '').split(', ');
-	const next = previous.filter(
+    const next = previous.filter(name
-		name
         ? (anim) => anim.indexOf(name) < 0 // remove specific animation
         : (anim) => anim.indexOf('__svelte') === -1 // remove all Svelte animations
     );
@@ -78,18 +68,29 @@ export function delete_rule(node: Element & ElementCSSInlineStyle, name?: string
     if (deleted) {
         node.style.animation = next.join(', ');
         active -= deleted;
-		if (!active) clear_rules();
+        if (!active)
+            clear_rules();
     }
 }
-
+/** @returns {void} */
 export function clear_rules() {
     raf(() => {
-		if (active) return;
+        if (active)
+            return;
         managed_styles.forEach((info) => {
             const { ownerNode } = info.stylesheet;
             // there is no ownerNode if it runs on jsdom.
-			if (ownerNode) detach(ownerNode);
+            if (ownerNode)
+                detach(ownerNode);
         });
         managed_styles.clear();
     });
 }
+
+
+
+
+/** @typedef {Object} StyleInformation
+ * @property {CSSStyleSheet} stylesheet
+ * @property {Record<string,true>} rules 
+ */