@joystick.js/ui-canary 0.0.0-canary.25 → 0.0.0-canary.250

package/src/lib/types.js

@@ -0,0 +1,59 @@
+const is_any = (value) => {
+  return !!value;
+};
+
+const is_array = (value) => {
+  return !!Array.isArray(value);
+};
+
+const is_boolean = (value) => {
+  return (value === true || value === false);
+};
+
+const is_float = (value) => {
+  return Number(value) === value && value % 1 !== 0;
+};
+
+const is_function = (value) => {
+  return typeof value === 'function';
+};
+
+const is_integer = (value) => {
+  return Number(value) === value && value % 1 === 0;
+};
+
+const is_null = (value) => {
+  return value === null;
+};
+
+const is_number = (value) => {
+  return Number(value) === value;
+};
+
+const is_object = (value) => {
+  return !!(value && typeof value === "object" && !Array.isArray(value));
+};
+
+const is_string = (value) => {
+  return typeof value === "string";
+};
+
+const is_undefined = (value) => {
+  return typeof value === 'undefined';
+};
+
+const types = {
+	is_any,
+	is_array,
+	is_boolean,
+	is_float,
+	is_function,
+	is_integer,
+	is_null,
+	is_number,
+	is_object,
+	is_string,
+	is_undefined,
+};
+
+export default types;

package/src/mount/index.js

@@ -0,0 +1,45 @@
+import add_node_to_tree from "../tree/add_node_to_tree.js";
+import run_tree_job from '../tree/jobs/run.js';
+import track_function_call from "../test/track_function_call.js";
+
+const mount_to_target = (dom_node = {}, target = {}) => {
+  target.replaceChildren();
+  target.appendChild(dom_node);
+};
+
+const mount = (Component, props = {}, target = {}) => {
+  track_function_call(`ui.mount`, [
+    Component,
+    props,
+    target,
+  ]);
+
+  // NOTE: Dump the component tree on mount to account for remounting via HMR. This ensures we
+  // don't keep old node references in the tree which can trip up renders matching on the
+  // wrong/old element.
+  run_tree_job('reset_tree_for_hmr');
+
+  const component_instance = Component({ props });
+  const dom = component_instance.render_for_mount();
+  
+  add_node_to_tree(component_instance);
+
+  run_tree_job('lifecycle.onBeforeMount', { root_instance_id: component_instance?.instance_id });
+  run_tree_job('lifecycle.onBeforeRender', { root_instance_id: component_instance?.instance_id });
+  run_tree_job('css', { is_mount: true });
+
+  mount_to_target(dom, target);
+
+  run_tree_job('attach_event_listeners', { root_instance_id: component_instance?.instance_id });
+
+  run_tree_job('lifecycle.onMount', { root_instance_id: component_instance?.instance_id });
+  run_tree_job('lifecycle.onRender', { root_instance_id: component_instance?.instance_id });
+
+  window.addEventListener('beforeunload', () => {
+    run_tree_job('lifecycle.onBeforeUnmount', { root_instance_id: component_instance?.instance_id });
+  });
+
+  return component_instance;
+};
+
+export default mount;

package/src/test/create_file.js

@@ -0,0 +1,10 @@
+const create_file = (bytes = 128, file_name = 'test.txt', mime_type = 'text/plain') => {
+  const is_blob = bytes instanceof Blob;
+  return new File(
+    is_blob ? bytes : new Blob(new Uint8Array(bytes || 128), { type: mime_type }),
+    file_name,
+    { type: mime_type }
+  );
+};
+
+export default create_file;

package/src/test/index.js

@@ -0,0 +1,13 @@
+import create_file from "./create_file.js";
+import track_function_call from "./track_function_call.js";
+
+const test = {
+  utils: {
+    createFile: create_file,
+    create_file,
+    trackFunctionCall: track_function_call,
+    track_function_call,
+  },
+};
+
+export default test;

package/src/test/track_function_call.js

@@ -0,0 +1,16 @@
+const track_function_call = (path = '', args = []) => {
+  if (typeof window !== 'undefined' && !!window.__joystick_test__) {
+    window.test = {
+      ...(window.test || {}),
+      function_calls: {
+        ...(window?.test?.function_calls || {}),
+        [path]: [
+          ...((window?.test?.function_calls && window?.test?.function_calls[path]) || []),
+          { called_at: new Date().toISOString(), args },
+        ]
+      }
+    }; 
+  }
+};
+
+export default track_function_call;

package/src/tree/add_node_to_tree.js

@@ -0,0 +1,6 @@
+const add_node_to_tree = (node = {}, ssr_tree = null) => {
+  const tree_on_window = typeof window !== 'undefined' ? window.joystick._internal.tree : [];
+  (ssr_tree || tree_on_window).push(node);
+};
+
+export default add_node_to_tree;

package/src/tree/clean_up.js

@@ -0,0 +1,11 @@
+import get_child_instance_ids from "./get_child_instance_ids.js";
+
+const clean_up = (existing_children = {}) => {
+	const existing_children_instance_ids = get_child_instance_ids(existing_children);
+
+	joystick._internal.tree = joystick?._internal?.tree?.filter((node) => {
+		return !existing_children_instance_ids?.includes(node?.instance_id);
+	});
+};
+
+export default clean_up;

package/src/tree/get_child_instance_ids.js

@@ -0,0 +1,7 @@
+const get_child_instance_ids = (children = {}) => {
+	return Object.values(children)?.flatMap((child_instance_ids = []) => {
+		return child_instance_ids;
+	});
+};
+
+export default get_child_instance_ids;

package/src/tree/get_children_from_tree.js

@@ -0,0 +1,25 @@
+import get_child_instance_ids from "./get_child_instance_ids.js";
+
+const get_children_from_tree = (child_instance_ids = [], existing_child_nodes = []) => {
+	const child_nodes = existing_child_nodes || [];
+
+	const child_nodes_matching_instance_ids = window?.joystick?._internal?.tree?.filter((node) => {
+		return child_instance_ids?.includes(node?.instance_id);
+	});
+
+	for (let i = 0; i < child_nodes_matching_instance_ids?.length; i += 1) {
+		const child_node = child_nodes_matching_instance_ids[i];
+
+		child_nodes.push(child_node);
+		
+		const child_node_children_instance_ids = get_child_instance_ids(child_node.children);
+
+		if (child_node_children_instance_ids?.length > 0) {
+			get_children_from_tree(child_node_children_instance_ids, child_nodes);
+		}
+	}
+
+	return child_nodes;
+};
+
+export default get_children_from_tree;

package/src/tree/get_css_from_tree.js

@@ -0,0 +1,43 @@
+import compile_css from "../component/css/compile.js";
+import constants from "../lib/constants.js";
+
+const handle_prefix_css = (component_id, css_string) => {
+  return (css_string || "")
+    .replace(constants.CSS_COMMENT_REGEX, () => {
+      return "";
+    })
+    .replace(constants.CSS_SELECTOR_REGEX, (match) => {
+      if (["@", ": "].some((skip) => match?.includes(skip))) {
+        return match;
+      }
+
+      return `[js-c="${component_id}"] ${match.trim()}`;
+    })
+    // NOTE: Use @wrapper as a placeholder target for assigning styles
+  	// to the Joystick component's root wrapper element.
+  	.replace(/@wrapper/g, `[js-c="${component_id}"]`)
+    ?.trim();
+};
+
+const get_css_from_tree = (tree = [], css = [], is_email = false) => {
+	for (let i = 0; i < tree?.length; i += 1) {
+		const node = tree[i];
+
+		if (node?.css) {
+	    const component_id = node?.id;
+	    const raw_css = node.options.css;
+	    const compiled_css = compile_css(raw_css, node);
+	    const prefixed_css = !is_email ? handle_prefix_css(component_id, compiled_css) : null;
+
+	    if (is_email) {
+	    	css.push(compiled_css);
+	    } else {
+	    	css.push(prefixed_css);
+	    }
+		}
+	}
+
+  return css;
+};
+
+export default get_css_from_tree;

package/src/tree/get_event_listeners_for_nodes.js

@@ -0,0 +1,15 @@
+import serialize_events from "../component/events/serialize.js";
+
+const get_event_listeners_for_nodes = (nodes = []) => {
+	return nodes?.flatMap((node) => {
+		const events_for_node = serialize_events(node?.events);
+		return events_for_node?.flatMap((event_for_node) => {
+			return {
+				instance: node,
+				...event_for_node,
+			};
+		});
+	});
+};
+
+export default get_event_listeners_for_nodes;

package/src/tree/get_node_from_tree.js

@@ -0,0 +1,7 @@
+const get_node_from_tree = (instance_id = '') => {
+	return window?.joystick?._internal?.tree?.find((node) => {
+		return node?.instance_id === instance_id;
+	});
+};
+
+export default get_node_from_tree;

package/src/tree/get_parent_from_tree.js

@@ -0,0 +1,8 @@
+const get_parent_from_tree = (child_component_id = '', child_instance_id = '') => {
+	return joystick?._internal?.tree?.find((node) => {
+		const children_of_component_id = node?.children[child_component_id];
+		return children_of_component_id && children_of_component_id?.includes(child_instance_id);
+	});
+};
+
+export default get_parent_from_tree;

package/src/tree/jobs/index.js

@@ -0,0 +1,196 @@
+import attach_event_listener_for_element from "../../component/events/attach_event_listener_for_element.js";
+import get_child_instance_ids from "../get_child_instance_ids.js";
+import get_children_from_tree from "../get_children_from_tree.js";
+import get_css_from_tree from "../get_css_from_tree.js";
+import get_event_listeners_for_nodes from "../get_event_listeners_for_nodes.js";
+import get_node_from_tree from "../get_node_from_tree.js";
+import generate_id from "../../lib/generate_id.js";
+import track_function_call from "../../test/track_function_call.js";
+import types from "../../lib/types.js";
+
+const get_nodes_for_job = (root_instance_id = '') => {
+	const node = get_node_from_tree(root_instance_id);
+	const child_instance_ids = get_child_instance_ids(node?.children);
+	const child_nodes = get_children_from_tree(child_instance_ids);
+
+	return [
+		node,
+		...(child_nodes || []),
+	];
+};
+
+const clear_timers = (root_instance_id = null, existing_tree = null) => {
+	// NOTE: If we call this as part of reset_tree_for_hmr, we want to wipe out ALL timers
+	// on the tree (the original root instance gets delete on remount).
+	const nodes = root_instance_id && !existing_tree ? get_nodes_for_job(root_instance_id) : (existing_tree || []);
+	const timers = nodes?.flatMap((node) => {
+		return node?.timers ? Object.values(node?.timers) : [];
+	});
+
+	for (let i = 0; i < timers?.length; i += 1) {
+		const timer_id = timers[i];
+		// NOTE: Modern browsers should support both of these the same,
+		// but to guarantee timers get cleared, run both on the timer_id.
+		clearTimeout(timer_id);
+		clearInterval(timer_id);
+	}
+};
+
+const clear_websockets = () => {
+	// NOTE: If we call this as part of reset_tree_for_hmr, we want to wipe out ALL timers
+	// on the tree (the original root instance gets delete on remount).
+	const websockets = window.__joystick_hmr_previous_websockets__;
+	for (let i = 0; i < websockets?.length; i += 1) {
+		const websocket = websockets[i];
+		if (websocket?.client?.close && types.is_function(websocket?.client?.close)) {
+			websocket.client.close(1000);
+		}
+	}
+};
+
+const jobs = {
+	'attach_event_listeners': ({ root_instance_id }) => {
+		const nodes = window?.joystick?._internal?.tree;
+		const event_listeners = get_event_listeners_for_nodes(nodes);
+
+		for (let i = 0; i < event_listeners?.length; i += 1) {
+			const event_listener = event_listeners[i];
+			const elements = document.querySelectorAll(`[js-i="${event_listener?.instance?.instance_id}"] ${event_listener?.selector}`);
+			const render_methods = event_listener?.instance?.compile_render_methods();
+
+			for (let i = 0; i < elements?.length; i += 1) {
+				const element = elements[i];
+				attach_event_listener_for_element(event_listener, element, render_methods);
+			}
+		}
+
+		return event_listeners;
+	},
+	'clear_timers': ({ root_instance_id = null }) => {
+		clear_timers(root_instance_id);
+	},
+	'clear_websockets': ({ root_instance_id = null }) => {
+		clear_websockets();
+	},
+	'css': ({ is_mount = false, is_email = false, ssr_tree = null }) => {
+    const existing_style_tag = typeof window !== 'undefined' ? document.head.querySelector(`style[js-css]`) : null;
+    const css_from_tree = get_css_from_tree(ssr_tree || window.joystick?._internal?.tree, [], is_email);
+    const css = is_mount ? css_from_tree?.reverse().join("").trim() : css_from_tree?.join("").trim();
+
+    if (typeof window !== 'undefined' && existing_style_tag?.innerText === css) {
+      // NOTE: No changes, do not update CSS in DOM.
+      return;
+    }
+
+    if (typeof window !== 'undefined' && existing_style_tag) {
+      existing_style_tag.innerHTML = css;
+    }
+
+    if (typeof window !== 'undefined' && !existing_style_tag) {
+      const style = document.createElement("style");
+      style.setAttribute("js-styles", "");
+      style.innerHTML = css;
+      document.head.appendChild(style);
+    }
+
+    return css;
+	},
+	'detach_event_listeners': ({ root_instance_id }) => {
+		const nodes = window?.joystick?._internal?.tree;
+		const event_listeners = nodes?.filter((node) => {
+			return !!node?._event_listeners;
+		}).flatMap((node) => {
+			return node?._event_listeners;
+		});
+
+		for (let i = 0; i < event_listeners?.length; i += 1) {
+			const event_listener = event_listeners[i];
+			event_listener.element.removeEventListener(event_listener?.type, event_listener?.handler);
+		}
+	},
+	'lifecycle.onBeforeMount': ({ root_instance_id }) => {
+		const nodes = get_nodes_for_job(root_instance_id);
+
+		for (let i = 0; i < nodes?.length; i += 1) {
+			const node = nodes[i];
+			if (types.is_function(node?.lifecycle?.onBeforeMount) || types.is_function(node?.lifecycle?.on_before_mount)) {
+				(node.lifecycle.onBeforeMount || node.lifecycle.on_before_mount)(node);
+				track_function_call(`ui.${node?.options?.test?.name || generate_id()}.lifecycle.on_before_mount`, [node]);
+			}
+		}
+	},
+	'lifecycle.onMount': ({ root_instance_id }) => {
+		const nodes = get_nodes_for_job(root_instance_id);
+
+		for (let i = 0; i < nodes?.length; i += 1) {
+			const node = nodes[i];
+			if (types.is_function(node?.lifecycle?.onMount) || types.is_function(node?.lifecycle?.on_mount)) {
+				(node.lifecycle.onMount || node.lifecycle.on_mount)(node);
+				track_function_call(`ui.${node?.options?.test?.name || generate_id()}.lifecycle.on_mount`, [node]);
+			}
+		}
+	},
+	'lifecycle.onBeforeRender': ({ root_instance_id }) => {
+		const nodes = get_nodes_for_job(root_instance_id);
+
+		for (let i = 0; i < nodes?.length; i += 1) {
+			const node = nodes[i];
+			if (types.is_function(node?.lifecycle?.onBeforeRender) || types.is_function(node?.lifecycle?.on_before_render)) {
+				(node.lifecycle.onBeforeRender || node.lifecycle.on_before_render)(node);
+				track_function_call(`ui.${node?.options?.test?.name || generate_id()}.lifecycle.on_before_render`, [node]);
+			}
+		}
+	},
+	'lifecycle.onRender': ({ root_instance_id }) => {
+		const nodes = get_nodes_for_job(root_instance_id);
+
+		for (let i = 0; i < nodes?.length; i += 1) {
+			const node = nodes[i];
+			if (types.is_function(node?.lifecycle?.onRender) || types.is_function(node?.lifecycle?.on_render)) {
+				(node.lifecycle.onRender || node.lifecycle.on_render)(node);
+				track_function_call(`ui.${node?.options?.test?.name || generate_id()}.lifecycle.on_render`, [node]);
+			}
+		}
+	},
+	'lifecycle.onUpdateProps': ({ root_instance_id }) => {
+		const nodes = get_nodes_for_job(root_instance_id);
+
+		for (let i = 0; i < nodes?.length; i += 1) {
+			const node = nodes[i];
+			if (types.is_function(node?.lifecycle?.onUpdateProps) || types.is_function(node?.lifecycle?.on_update_props)) {
+				(node.lifecycle.onUpdateProps || node.lifecycle.on_update_props)(node);
+				track_function_call(`ui.${node?.options?.test?.name || generate_id()}.lifecycle.on_update_props`, [node]);
+			}
+		}
+	},
+	'lifecycle.onRefetchData': ({ root_instance_id }) => {
+		const nodes = get_nodes_for_job(root_instance_id);
+
+		for (let i = 0; i < nodes?.length; i += 1) {
+			const node = nodes[i];
+			if (types.is_function(node?.lifecycle?.onRefetchData) || types.is_function(node?.lifecycle?.on_refetch_data)) {
+				(node.lifecycle.onRefetchData || node.lifecycle.on_refetch_data)(node);
+				track_function_call(`ui.${node?.options?.test?.name || generate_id()}.lifecycle.on_refetch_data`, [node]);
+			}
+		}
+	},
+	'lifecycle.onBeforeUnmount': ({ root_instance_id }) => {
+		const nodes = get_nodes_for_job(root_instance_id);
+
+		for (let i = 0; i < nodes?.length; i += 1) {
+			const node = nodes[i];
+			if (types.is_function(node?.lifecycle?.onBeforeUnmount) || types.is_function(node?.lifecycle?.on_before_unmount)) {
+				(node.lifecycle.onBeforeUnmount || node.lifecycle.on_before_unmount)(node);
+				track_function_call(`ui.${node?.options?.test?.name || generate_id()}.lifecycle.on_before_unmount`, [node]);
+			}
+		}
+	},
+	'reset_tree_for_hmr': () => {
+		clear_timers(null, window.__joystick_hmr_previous_tree__);
+		clear_websockets();
+		window.__joystick_hmr_previous_tree__ = [];
+		window.__joystick_hmr_previous_websockets__ = [];
+	},
+};
+
+export default jobs;

package/src/tree/jobs/run.js

@@ -0,0 +1,11 @@
+import jobs from './index.js';
+
+const run_tree_job = (job_name = '', options = {}) => {
+	const job_to_run = jobs[job_name];
+	
+	if (typeof job_to_run === 'function') {
+		return job_to_run(options);
+	}
+};
+
+export default run_tree_job;

package/src/tree/replace_child_in_vdom.js

@@ -0,0 +1,18 @@
+import types from "../lib/types.js";
+
+const replace_child_in_vdom = (virtual_dom = {}, child_instance_id = '', updated_vdom_node = {}) => {
+  for (let i = 0; i < virtual_dom?.children?.length; i += 1) {
+    const child = virtual_dom?.children[i];
+
+    if (types.is_object(child) && child.attributes && child.attributes['js-i'] && child.attributes['js-i'] === child_instance_id) {
+      virtual_dom.children[i] = updated_vdom_node;
+      break;
+    }
+
+    if (types.is_object(child)) {
+      replace_child_in_vdom(child, child_instance_id, updated_vdom_node);
+    }
+  }
+};
+
+export default replace_child_in_vdom;

package/src/upload/index.js

@@ -0,0 +1,72 @@
+import generate_id from "../lib/generate_id.js";
+import log_request_errors from "../lib/log_request_errors.js";
+import track_function_call from "../test/track_function_call.js";
+import websocket_client from "../websockets/client.js";
+
+export default (uploader_name = '', uploader_options = {}) => {
+  if (window?.__joystick_test__) {
+    // NOTE: In a test, do not try to upload anything, just track the call and return.
+    track_function_call(`ui.upload.${uploader_name}`, [
+      uploader_name,
+      uploader_options,
+    ]);
+
+    return;
+  }
+
+  return new Promise((resolve, reject) => {
+    const upload_id = generate_id(16);
+    let last_progress = 0;
+
+    websocket_client({
+      url: `${window?.process?.env.NODE_ENV === 'development' ? 'ws' : 'wss'}://${location.host}/api/_websockets/uploaders`,
+      options: {
+        logging: process.env.NODE_ENV === 'development',
+        autoReconnect: true,
+        reconnectAttempts: 12,
+        reconnectDelayInSeconds: 5,
+      },
+      query: {
+        id: upload_id,
+      },
+      events: {
+        on_message: (message = {}) => {
+          if (message?.type === 'PROGRESS' && (uploader_options?.onProgress || uploader_options?.on_progress) && last_progress < 100 && last_progress !== message?.progress) {
+            last_progress = message?.progress;
+            (uploader_options.onProgress || uploader_options?.on_progress)(message?.progress, message?.provider);
+          }
+        },
+      },
+    }, () => {
+      let formData;
+
+      if (uploader_options?.files?.length > 0) {
+        formData = new FormData();
+        const files = Array.from(uploader_options?.files);
+
+        for (let i = 0; i < files?.length; i += 1) {
+          const file = files[i];
+          formData.append('files', file, file.name);
+        }
+      }
+
+      fetch(`${window.location.origin}/api/_uploaders/${uploader_name}`, {
+        method: 'POST',
+        headers: {
+          'x-joystick-upload-id': upload_id,
+          'x-joystick-upload-input': JSON.stringify(uploader_options?.input || {}),
+        },
+        body: formData,
+      }).then(async (data) => {
+        const response = await data.json();
+
+        if (response && response.errors) {
+          log_request_errors('upload', response.errors);
+          reject({ errors: response.errors });
+        } else {
+          resolve(response?.uploads);
+        }
+      });
+    });
+  });
+};