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

package/src/api/set.js

@@ -0,0 +1,83 @@
+import generate_cookie_header from "../lib/generate_cookie_header.js";
+import log_request_errors from "../lib/log_request_errors.js";
+import parse_json from "../lib/parse_json.js";
+
+const handle_parse_response = async (response = {}) => {
+  // NOTE: Parse as text and then pass to parse_json so Joystick can explicitly handle
+  // invalid JSON errors.
+  const response_as_text = await response.text();
+  const data_from_response = parse_json(response_as_text);
+  return data_from_response;
+};
+
+const get_body = (setter_options = {}) => {
+  const sanitized_setter_options = { ...setter_options };
+
+  if (sanitized_setter_options?.loader) {
+    delete sanitized_setter_options.loader;
+  }
+
+  return JSON.stringify(sanitized_setter_options);
+};
+
+const set = (setter_name = "", setter_options = {}) => {
+  if (typeof window.fetch !== 'undefined') {
+    // NOTE: Wrap fetch() with another Promise so we can control routing of errors
+    // received in the response (by default they don't go to catch() which is where
+    // set() should return errors).
+    return new Promise((resolve, reject) => {
+      const url = `${window.location.origin}/api/_setters/${setter_name}`;
+      const body = get_body(setter_options);
+      const csrf = document.querySelector('[name="csrf"]')?.getAttribute('content');
+
+      const headers = {
+        ...(setter_options?.headers || {}),
+        "Content-Type": "application/json",
+        'x-joystick-csrf': csrf,
+      };
+
+      if (window?.__joystick_test__) {
+        headers.Cookie = generate_cookie_header({
+          joystick_login_token: window?.__joystick_test_login_token__,
+          joystick_login_token_expires_at: window.__joystick_test_login_token_expires_at__,
+        });
+      }
+
+      if (setter_options?.loader?.instance) {
+        setter_options?.loader?.instance?.setState({ [setter_options?.loader?.state || `${setter_name}_loading`]: true });
+      }
+
+      return fetch(url, {
+        method: 'POST',
+        mode: "cors",
+        headers,
+        body,
+        credentials: "include",
+      }).then(async (response) => {
+        const data_from_response = await handle_parse_response(response);
+        if (setter_options?.loader?.instance) {
+          setter_options?.loader?.instance?.setState({ [setter_options?.loader?.state || `${setter_name}_loading`]: false });
+        }
+
+        if (data_from_response?.errors) {
+          log_request_errors(`Set request`, data_from_response.errors);
+          return reject(data_from_response);
+        }
+
+        return resolve(data_from_response);
+      }).catch((error) => {
+        log_request_errors(`Set request`, [error]);
+
+        if (setter_options?.loader?.instance) {
+          setter_options?.loader?.instance?.setState({ [setter_options?.loader?.state || `${setter_name}_loading`]: false });
+        }
+
+        return reject({ errors: [error] });
+      });
+    });
+  }
+
+  return Promise.resolve();
+};
+
+export default set;

package/src/attach_joystick_to_window.js

@@ -0,0 +1,31 @@
+import throw_framework_error from './lib/throw_framework_error.js';
+
+/**
+ * Safely attach the joystick global to the browser window.
+ *
+ * @param {object} joystick - The joystick global object.
+ */
+const attach_joystick_to_window = (joystick = {}) => {
+  let target = null;
+
+
+  // NOTE: Browser support.
+  if (typeof window !== 'undefined') {
+    target = window;
+  }
+
+  // NOTE: Node.js support (for tests).
+  if (typeof global !== 'undefined') {
+    target = global;
+  }
+
+  if (target) {
+    target.joystick = {
+      ...(target?.joystick || {}),
+      settings: target?.__joystick_settings__,
+      ...joystick,
+    };
+  }
+};
+
+export default attach_joystick_to_window;

package/src/cache/class.js

@@ -0,0 +1,98 @@
+import types from "../lib/types.js";
+
+class Cache {
+  constructor(cache_name = '', default_value = {}) {
+    this.name = cache_name;
+    this.value = default_value || {};
+    this.listeners = {
+      change: [],
+      set: [],
+      unset: [],
+    };
+  }
+
+  _get_value_at_path(path = '') {
+    return path?.split('.').reduce((value = null, path_part = '') => {
+      if (value[path_part]) {
+        value = value[path_part];
+      }
+      
+      return value;
+    }, this.value);
+  }
+
+  get(path = '') {
+    if (path?.trim() === '') {
+      return {
+        ...(this.value || {}),
+      };
+    }
+
+    return this._get_value_at_path(path);
+  }
+
+  set(callback = null, user_event_label = '') {
+    if (!callback || !types.is_function(callback)) {
+      throw new Error('First argument passed to set() must be a function.');
+    }
+
+    const updated_value = callback(this.value);
+
+    if (!types.is_object(updated_value)) {
+      throw new Error('Value to set must be an object representing the current cache state.');
+    }
+    
+    this.value = updated_value;
+    this._handle_event('set', user_event_label);
+    this._handle_event('change', user_event_label);
+  }
+
+  unset(path = '', user_event_label = '') {
+    if (path?.trim() === '') {
+      this.value = {};
+    }
+
+    // NOTE: Adapted from https://youmightnotneed.com/lodash#unset
+    const path_array = path?.split('.');
+    const key_to_delete_index = path_array?.length - 1; 
+
+    path_array.reduce((updated_value, key, i) => {
+      if (i === key_to_delete_index) delete updated_value[key];
+      return updated_value[key];
+    }, this.value);
+
+    this._handle_event('unset', user_event_label);
+    this._handle_event('change', user_event_label);
+  }
+
+  on(event = '', callback = null) {
+    if (!['change', 'set', 'unset'].includes(event)) {
+      throw new Error(`Event to listen for must be change, set, or unset. ${event} is not supported.`);
+    }
+
+    if (!callback || !types.is_function(callback)) {
+      throw new Error('Second argument passed to on('<event>') must be a function.');
+    }
+
+    this.listeners = {
+      [event]: [
+        ...(this.listeners[event] || []),
+        callback,
+      ],
+    };
+  }
+
+  _handle_event(internal_event_label = '', user_event_label = '') {
+    const listeners = this.listeners[internal_event_label] || [];
+
+    for (let i = 0; i < listeners?.length; i += 1) {
+      const listener = listeners[i];
+
+      if (types.is_function(listener)) {
+        listener(this.value, internal_event_label, user_event_label);
+      }
+    }
+  }
+}
+
+export default Cache;

package/src/cache/index.js

@@ -0,0 +1,5 @@
+import Cache from './class.js';
+
+export default (cacheName = '', defaultValue = {}) => {
+  return new Cache(cacheName, defaultValue);
+};

package/src/component/class.js

@@ -0,0 +1,361 @@
+import clean_up_tree from "../tree/clean_up.js";
+import compile_state from "./state/compile.js";
+import constants from "../lib/constants.js";
+import debounce from "../lib/debounce.js";
+import diff_virtual_dom from "./virtual_dom/diff.js";
+import generate_id from "../lib/generate_id.js";
+import get_child_instance_ids from "../tree/get_child_instance_ids.js";
+import get_children_from_tree from "../tree/get_children_from_tree.js";
+import register_component_options from "./register_component_options.js";
+import render_methods from './render_methods/index.js';
+import replace_child_in_vdom from "../tree/replace_child_in_vdom.js";
+import run_tree_job from "../tree/jobs/run.js";
+import track_function_call from "../test/track_function_call.js";
+import types from "../lib/types.js";
+
+class Component {
+	constructor(component_options = {}) {
+		register_component_options(this, component_options);
+	}
+
+  cleanup_html(html = '', linkedom_document = null) {
+		const div = (typeof document === 'undefined' ? linkedom_document : document).createElement('div');
+    div.innerHTML = html;
+    return div.innerHTML;
+  }
+
+	compile_render_methods(new_children = {}, existing_children = {}, ssr_tree = null) {
+		return Object.entries(render_methods).reduce((methods, [key, value]) => {
+			let instance_to_bind = {
+				...(this || {}),
+			};
+
+			if (key === 'component') {
+				instance_to_bind = {
+					...(this || {}),
+	        new_children,
+	        existing_children,
+	        ssr_tree: ssr_tree ? {
+	        	push: (node) => {
+	        		ssr_tree.push(node);
+	        	},
+	        } : null,
+	        track_child: !ssr_tree ? (child_component_instance = {}) => {
+	        	const existing_component_id = new_children[child_component_instance?.id];
+
+	        	if (existing_component_id) {
+	        		existing_component_id.push(child_component_instance?.instance_id);
+	        	} else {
+	        		new_children[child_component_instance?.id] = [child_component_instance?.instance_id];
+	        	}
+	        } : null,
+				}
+			}
+
+			if (key !== 'component_ssr') {
+				// NOTE: When rendering for SSR, swap the normal component render method with the SSR version.
+				const render_method_to_bind = key === 'component' && !!ssr_tree ? render_methods.component_ssr : value;
+      	methods[key] = render_method_to_bind.bind(instance_to_bind);
+			}
+
+      return methods;
+    }, {});
+	}
+
+	async fetch_data(api = {}, req = {}, input = {}, component_instance = this) {
+	  if (component_instance?.options?.data && types.is_function(component_instance.options.data)) {
+	    const data = await component_instance.options.data(api, req, input, component_instance);
+	    component_instance.data = data;
+	    return data;
+	  }
+
+	  return null;
+	}
+
+	render_child_dom_node_to_virtual_dom(dom_node = {}) {
+		if (dom_node.tagName === 'WHEN') {
+      return [].flatMap.call(dom_node?.childNodes || [], (child_node) => {
+        if (child_node?.tagName === 'WHEN') {
+          return this.render_child_dom_node_to_virtual_dom(child_node);
+        }
+
+        return this.render_dom_to_virtual_dom(child_node);
+      });
+    }
+
+    return this.render_dom_to_virtual_dom(dom_node);
+	}
+
+	parse_attributes(attributes = {}) {
+		return Object.values(attributes)
+      .reduce((parsed_attributes = {}, attribute) => {
+        parsed_attributes[attribute.name] = attribute.value;
+        return parsed_attributes;
+      }, {});
+	}
+
+	render_for_mount() {
+    track_function_call(`ui.${this?.options?.test?.name || generate_id()}.render_for_mount`, []);
+
+		// NOTE: Pass both new_children and existing_children for consistency,
+		// even though existing_children don't exist at mount time.
+		const new_children = {};
+		const existing_children = {};
+		const component_html = this.render_to_html(new_children, existing_children);
+		const html = this.replace_when_tags(component_html);
+		const dom = this.render_html_to_dom(html);
+		const virtual_dom = this.render_dom_to_virtual_dom(dom);
+
+		this.dom = dom;
+		this.DOMNode = dom;
+		this.virtual_dom = virtual_dom;
+		this.children = new_children;
+
+		this.sync_children_to_parent(this.children, this.dom, this.virtual_dom);
+
+		return dom;
+	}
+
+	async render_for_ssr(api = {}, req = {}, ssr_tree = [], render_for_ssr_options = {}) {
+		return new Promise(async (resolve) => {
+			// NOTE: Fetch data for this component before rendering to HTML so the render() method has
+			// access to the data at render time.
+			const component_data = await this.fetch_data(api, req, {}, this);
+			const new_children = {};
+			const existing_children = {};
+			let component_html = this.render_to_html(new_children, existing_children, ssr_tree, render_for_ssr_options?.linkedom_document);
+			const child_data = {};
+
+			for (let i = 0; i < ssr_tree?.length; i += 1) {
+				const node = ssr_tree[i];
+				const node_data = await this.fetch_data(api, req, {}, node);
+				const node_html = node.render_to_html(new_children, existing_children, ssr_tree, render_for_ssr_options?.linkedom_document);
+				component_html = component_html.replace(`{{${node.id}:${node.instance_id}}}`, node_html);
+				child_data[node?.id] = node_data;
+			}
+
+			ssr_tree.push(this);
+
+			const html = this.replace_when_tags(component_html);
+			const css = run_tree_job('css', { ssr_tree, is_email: render_for_ssr_options?.is_email || false });
+
+			resolve({
+				html,
+				css,
+				data: {
+					[this.id]: component_data,
+					...(child_data || {}),
+				},
+			});
+		});
+	}
+
+	render_html_to_dom(html = '') {
+		const template = document.createElement('template');
+		template.innerHTML = html;
+		return template?.content?.firstChild;
+	}
+
+	replace_when_tags(html = '') {
+    return html;
+	}
+
+	render_to_html(new_children = {}, existing_children = {}, ssr_tree = null, linkedom_document = {}) {
+		const render_methods = this.compile_render_methods(new_children, existing_children, ssr_tree);
+		const html = this.options.render({ ...(this || {}), ...render_methods });
+		const clean_html = this.cleanup_html(html, linkedom_document);
+		const sanitized_html = this.sanitize_html(clean_html);
+		const wrapped_html = this.wrap_html(sanitized_html);
+		return wrapped_html;
+	}
+
+	render_dom_to_virtual_dom(dom_node = {}) {
+		console.log({ dom_node, has_tagName: !!dom_node?.tagName, has_tag_name: !!dom_node?.tag_name });
+		const tag_name = (dom_node && dom_node.tagName && dom_node.tagName.toLowerCase()) || 'text';
+
+		if (tag_name === 'text') {
+			return dom_node.textContent;
+		}
+
+		const virtual_dom_node = {
+			tag_name,
+			attributes: this.parse_attributes(dom_node?.attributes),
+			children: [].flatMap.call(dom_node?.childNodes || [], (child_node) => {
+        return this.render_child_dom_node_to_virtual_dom(child_node);
+      }),
+		};
+
+		const component_id = dom_node?.getAttribute('js-c');
+		const instance_id = dom_node?.getAttribute('js-i');
+
+		if (component_id) {
+			virtual_dom_node.component_id = component_id;
+		}
+
+		if (instance_id) {
+			virtual_dom_node.instance_id = instance_id;
+		}
+
+		return virtual_dom_node;
+	}
+
+	rerender(options = {}) {
+		track_function_call(`ui.${this?.options?.test?.name || generate_id()}.rerender`, [
+			options,
+		]);
+
+		// run_tree_job('clear_timers', { root_instance_id: this?.instance_id });
+		run_tree_job('lifecycle.onBeforeRender', { root_instance_id: this?.instance_id });
+
+		const new_children = {};
+		const existing_children = { ...(this.children || {}) };
+
+		// NOTE: Once we have a copy of current children as existing_children
+		// in memory, dump them from the parent instance.
+		this.children = {};
+
+		// NOTE: Unregister listeners for this root node and its children as they're
+		// going to be removed and re-rendered.
+		run_tree_job('detach_event_listeners', { root_instance_id: this?.instance_id });
+
+		// NOTE: As part of render_to_html(), we expect new_children to be populated
+		// with the new child instance_ids via the track_child method we pass to the
+		// render methods via the .bind() to the parent in compile_render_methods.
+		const component_html = this.render_to_html(new_children, existing_children);
+		const new_html = this.replace_when_tags(component_html);
+		const new_dom = this.render_html_to_dom(new_html);
+		const new_virtual_dom = this.render_dom_to_virtual_dom(new_dom);
+		const dom_node_patches = diff_virtual_dom(this.virtual_dom, new_virtual_dom);
+
+		if (types.is_function(dom_node_patches)) {
+			const patched_dom_node = dom_node_patches(this.dom);
+
+			this.dom = patched_dom_node;
+			this.virtual_dom = new_virtual_dom;
+
+			// NOTE: After all tree-related work is done, set the new children back on the
+			// parent instance. Doing this here ensures any tree jobs don't get tripped up
+			// by children they don't recognize.
+			this.children = new_children;
+			this.sync_children_to_parent(this.children, this.dom, this.virtual_dom);
+
+			// NOTE: Set DOMNode after children are sync'd so this.DOMNode is kept fresh.
+			this.DOMNode = patched_dom_node;
+		};
+		
+		run_tree_job('attach_event_listeners', { root_instance_id: this?.instance_id });
+		run_tree_job('lifecycle.onRender', { root_instance_id: this?.instance_id });
+
+		if (types.is_function(options?.after_set_state_rerender)) {
+			options.after_set_state_rerender();
+		}
+
+		if (types.is_function(options?.after_refetch_data_rerender)) {
+			options.after_refetch_data_rerender();
+		}
+
+		// NOTE: Clean up the linked list by removing any nodes matching an ID
+		// in existing_children as we know they no longer exist.
+		clean_up_tree(existing_children);
+
+		// NOTE: Do after clean up so we don't reattach styles for old nodes.
+		run_tree_job('css');
+	}
+
+	sanitize_html(html = '') {
+		const html_comments_to_replace = html.match(constants.JOYSTICK_COMMENT_REGEX) || [];
+    
+    for (let i = 0; i < html_comments_to_replace?.length; i += 1) {
+    	html = html.replace(html_comments_to_replace[i], '');
+    }
+
+    return html;
+	}
+
+	set_interval(callback = null, delay = 0) {
+		this.setInterval(callback, delay);
+	}
+
+	setInterval(callback = null, delay = 0) {
+		track_function_call(`ui.${this?.options?.test?.name || generate_id()}.set_interval`, [
+			callback,
+			delay,
+		]);
+
+    if (callback) {
+      this.timers.push(window.setInterval(callback, delay));
+    }
+  }
+
+  set_state(state = {}, callback = null) {
+  	return this.setState(state, callback);
+  }
+
+	setState(state = {}, callback = null) {
+		track_function_call(`ui.${this?.options?.test?.name || generate_id()}.set_state`, [
+			state,
+			callback,
+		]);
+
+		this.state = compile_state(this, {
+      ...(this.state || {}),
+      ...state,
+    });
+
+		// NOTE: Use a 0ms debounce here to prevent rapid setState() calls from blocking the
+		// DOM from rendering nodes related to state changes.
+    this.rerender({
+      after_set_state_rerender: () => {
+        if (callback && types.is_function(callback)) {
+          callback();
+        }
+      },
+    });
+	}
+
+  set_timeout(callback = null, delay = 0) {
+  	this.setTimeout(callback, delay);
+  }
+
+	setTimeout(callback = null, delay = 0) {
+		track_function_call(`ui.${this?.options?.test?.name || generate_id()}.set_timeout`, [
+			callback,
+			delay,
+		]);
+
+    if (callback) {
+      this.timers.push(window.setTimeout(callback, delay));
+    }
+  }
+
+  sync_children_to_parent(children = {}, dom = {}, virtual_dom = {}) {
+  	if (dom) {
+	  	const child_instance_ids = get_child_instance_ids(children);
+	  	const child_nodes = get_children_from_tree(child_instance_ids);
+
+	  	// NOTE: Because we ultimately mount the parent's DOM node to the screen, we want to ensure
+	  	// that children of the parent reference the DOM node the *parent* created, not the one the
+	  	// child created when it rendered itself (that only exists temporarily to get back the HTML
+	  	// for the child at render time).
+	  	for (let i = 0; i < child_nodes?.length; i += 1) {
+	  		const child_node = child_nodes[i];
+	  		const child_node_in_parent_dom = dom.querySelector(`[js-i="${child_node?.instance_id}"]`);
+
+	  		child_node.dom = child_node_in_parent_dom;
+	  		child_node.DOMNode = child_node_in_parent_dom;
+
+	  		replace_child_in_vdom(virtual_dom, child_node?.instance_id, child_node?.virtual_dom);
+	  	}
+  	}
+  }
+
+	wrap_html(html = '') {
+		const wrapper_tag = (this.options?.wrapper?.tagName || this.options?.wrapper?.tag_name)?.toLowerCase() || 'div';
+		const wrapper_id = this.options?.wrapper?.id || null;
+		const wrapper_class_list = (this.options?.wrapper?.classList || this.options?.wrapper?.class_list)?.join(' ') || '';
+
+		return `<${wrapper_tag} ${wrapper_id ? `id="${wrapper_id}"` : ''} ${wrapper_class_list ? `class="${wrapper_class_list}"` : ''} js-c="${this.id}" js-i="${this.instance_id}">${html}</${wrapper_tag}>`;
+	}
+}
+
+export default Component;

package/src/component/css/compile.js

@@ -0,0 +1,108 @@
+import types from "../../lib/types.js";
+
+const compile = (css = "", component_instance = {}) => {
+  let compiled_css = "";
+
+  if (css && types.is_string(css)) {
+    compiled_css = css;
+    return compiled_css;
+  }
+
+  if (css && types.is_function(css)) {
+    compiled_css = css(component_instance);
+    return compiled_css;
+  }
+
+  if (css && types.is_object(css)) {
+    const has_print_rules =
+      css?.print && (types.is_string(css?.print) || types.is_function(css?.print));
+    const has_min_rules = css?.min && types.is_object(css?.min);
+    const has_min_width_rules = css?.min?.width && types.is_object(css?.min?.width);
+    const has_min_height_rules = css?.min?.height && types.is_object(css?.min?.height);
+    const has_max_rules = css?.max && types.is_object(css?.max);
+    const has_max_width_rules = css?.max?.width && types.is_object(css?.max?.width);
+    const has_max_height_rules = css?.max?.height && types.is_object(css?.max?.height);
+
+    if (has_print_rules) {
+      compiled_css += `
+        @media print {
+          ${
+            typeof css?.print === "function"
+              ? css?.print(component_instance)
+              : css.print
+          }
+        }
+      `;
+    }
+
+    if (has_min_rules && has_min_width_rules) {
+      const min_width_rules = Object.entries(css?.min?.width);
+      for (let i = 0; i < min_width_rules.length; i += 1) {
+        const [min_width, min_width_rule] = min_width_rules[i];
+        compiled_css += `
+          @media screen and (min-width: ${min_width}px) {
+            ${
+              typeof min_width_rule === "function"
+                ? min_width_rule(component_instance)
+                : min_width_rule
+            }
+          }
+        `;
+      }
+    }
+
+    if (has_min_rules && has_min_height_rules) {
+      const min_height_rules = Object.entries(css?.min?.height);
+      for (let i = 0; i < min_height_rules.length; i += 1) {
+        const [min_height, min_height_rule] = min_height_rules[i];
+        compiled_css += `
+          @media screen and (min-height: ${min_height}px) {
+            ${
+              typeof min_height_rule === "function"
+                ? min_height_rule(component_instance)
+                : min_height_rule
+            }
+          }
+        `;
+      }
+    }
+
+    if (has_max_rules && has_max_width_rules) {
+      const max_width_rules = Object.entries(css?.max?.width);
+      for (let i = 0; i < max_width_rules.length; i += 1) {
+        const [max_width, max_width_rule] = max_width_rules[i];
+        compiled_css += `
+          @media screen and (max-width: ${max_width}px) {
+            ${
+              typeof max_width_rule === "function"
+                ? max_width_rule(component_instance)
+                : max_width_rule
+            }
+          }
+        `;
+      }
+    }
+
+    if (has_max_rules && has_max_height_rules) {
+      const max_height_rules = Object.entries(css?.max?.height);
+      for (let i = 0; i < max_height_rules.length; i += 1) {
+        const [max_height, max_height_rule] = max_height_rules[i];
+        compiled_css += `
+          @media screen and (max-height: ${max_height}px) {
+            ${
+              typeof max_height_rule === "function"
+                ? max_height_rule(component_instance)
+                : max_height_rule
+            }
+          }
+        `;
+      }
+    }
+
+    return compiled_css;
+  }
+
+  return "";
+};
+
+export default compile;