@joystick.js/ui-canary 0.0.0-canary.27 → 0.0.0-canary.270

package/src/component/data/compile.js

@@ -0,0 +1,44 @@
+import api from '../../api/index.js';
+import fetch_data from './fetch.js';
+import generate_id from "../../lib/generate_id.js";
+import track_function_call from "../../test/track_function_call.js";
+import run_tree_job from '../../tree/jobs/run.js';
+
+const compile = (data_from_window = {}, request_from_window = {}, component_instance = {}) => {
+  return {
+    ...data_from_window,
+    refetch: async (input = {}) => {
+      track_function_call(`ui.${component_instance?.options?.test?.name || generate_id()}.data.refetch`, [
+        input
+      ]);
+      
+      const data = await fetch_data(
+        api,
+        request_from_window,
+        input,
+        component_instance,
+      );
+
+      component_instance.data = compile(data, request_from_window, component_instance);
+
+      // NOTE: Make this conditional to avoid errors when refetching data in tests.
+      if (window.__joystick_data__[component_instance?.id]) {
+        // NOTE: Keep data on window up to date so if a parent re-renders a child that's refetched it's data since
+        // mount, the data rendered isn't stale.
+        window.__joystick_data__[component_instance?.id] = atob(data);
+      }
+
+      if (!window?.__joystick_test__) {
+        component_instance.rerender({
+          after_refetch_data_rerender: () => {
+            run_tree_job('lifecycle.onRefetchData', { root_instance_id: component_instance?.instance_id });
+          },
+        });
+      }
+
+      return component_instance.data;
+    },
+  };
+}
+
+export default compile;

package/src/component/data/fetch.js

@@ -0,0 +1,12 @@
+import types from "../../lib/types.js";
+
+const fetch = async (api = {}, req = {}, input = {}, component_instance = {}) => {
+  if (component_instance?.options?.data && types.is_function(component_instance.options.data)) {
+    const data = await component_instance.options.data(api, req, input, component_instance);
+    return Promise.resolve(data);
+  }
+
+  return Promise.resolve();
+};
+
+export default fetch;

package/src/component/data/load_data_from_window.js

@@ -0,0 +1,14 @@
+import compile_data from "./compile.js";
+
+const load_data_from_window = (component_instance = {}) => {
+  if (typeof window !== 'undefined') {
+    const decrypted_data_from_window = window.__joystick_data__ ? JSON.parse(atob(window.__joystick_data__)) : {};
+    const data_from_window = (decrypted_data_from_window && decrypted_data_from_window[component_instance?.id]) || null;
+    const request_from_window = window.__joystick_request__ || {};
+    return compile_data(data_from_window, request_from_window, component_instance);
+  }
+
+  return component_instance?.data || {};
+};
+
+export default load_data_from_window;

package/src/component/dom/is_valid_attribute_name.js

@@ -0,0 +1,11 @@
+const is_valid_attribute_name = (name = '') => {
+  try {
+    const element = document.createElement('div');
+    element.setAttribute(name, 'Test');
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export default is_valid_attribute_name;

package/src/component/events/attach_event_listener_for_element.js

@@ -0,0 +1,32 @@
+import generate_id from "../../lib/generate_id.js";
+import track_function_call from "../../test/track_function_call.js";
+
+const attach_event_listener_for_element = (event_listener = {}, element = {}, render_methods = {}) => {
+	const handler = function event_handler(DOMEvent) {
+    event_listener.handler(DOMEvent, {
+      ...(event_listener?.instance || {}),
+      set_state: event_listener?.instance?.setState.bind(event_listener?.instance),
+      setState: event_listener?.instance?.setState.bind(event_listener?.instance),
+      ...(render_methods || {}),
+    });
+
+    track_function_call(`ui.${event_listener?.instance?.options?.test?.name || generate_id()}.events.${event_listener.type}.selector_${event_listener?.selector}`, [
+      DOMEvent,
+      {
+        ...(event_listener?.instance || {}),
+        set_state: event_listener?.instance?.setState.bind(event_listener?.instance),
+        setState: event_listener?.instance?.setState.bind(event_listener?.instance),
+        ...(render_methods || {}),
+      }
+    ]);
+  };
+
+	element.addEventListener(event_listener?.type, handler);
+
+  event_listener.instance._event_listeners = [
+    ...(event_listener?.instance?._event_listeners || []),
+    { selector: event_listener?.selector, type: event_listener?.type, element, handler },
+  ];
+};
+
+export default attach_event_listener_for_element;

package/src/component/events/serialize.js

@@ -0,0 +1,12 @@
+const serialize = (events = {}) => {
+  return Object.entries(events).map(([eventSelector, eventHandler]) => {
+    const [type, ...selector] = eventSelector.split(" ");
+    return {
+      type: type.toLowerCase(),
+      selector: selector.join(' '),
+      handler: eventHandler,
+    };
+  });
+};
+
+export default serialize;

package/src/component/index.js

@@ -0,0 +1,17 @@
+import Component from "./class.js";
+import throw_framework_error from "../lib/throw_framework_error.js";
+
+const component = (definition = {}) => {
+	try {
+		return (render_options = {}) => {
+			return new Component({
+				...definition,
+				...render_options,
+			})
+		};
+	} catch (error) {
+		throw_framework_error('component', error);
+	}
+};
+
+export default component;

package/src/component/methods/compile.js

@@ -0,0 +1,28 @@
+import generate_id from "../../lib/generate_id.js";
+import track_function_call from "../../test/track_function_call.js";
+
+const compile = (component_instance = {}, methods = {}) => {
+  return Object.entries(methods).reduce(
+    (methods = {}, [method_name, method_function]) => {
+      methods[method_name] = (...args) => {
+        track_function_call(`ui.${component_instance?.options?.test?.name || generate_id()}.methods.${method_name}`, [...args, {
+          ...component_instance,
+          set_state: component_instance.setState.bind(component_instance),
+          setState: component_instance.setState.bind(component_instance),
+          ...(component_instance.compile_render_methods({}, {}, typeof window === 'undefined' ? [] : null) || {}),
+        }]);
+
+        return method_function(...args, {
+          ...component_instance,
+          set_state: component_instance.setState.bind(component_instance),
+          setState: component_instance.setState.bind(component_instance),
+          ...(component_instance.compile_render_methods({}, {}, typeof window === 'undefined' ? [] : null) || {}),
+        });
+      };
+      return methods;
+    },
+    {}
+  );
+};
+
+export default compile;

package/src/component/props/compile.js

@@ -0,0 +1,21 @@
+import types from "../../lib/types.js";
+
+const compile = (default_props_from_options = {}, props_from_options = {}) => {
+  // NOTE: Combine props and defaultProps key names and filter to uniques only.
+  const props = [...Object.keys(props_from_options), ...Object.keys(default_props_from_options)]
+    .filter((value, index, self) => {
+      return self.indexOf(value) === index;
+    });
+
+  return props.reduce((compiled_props, prop_name) => {
+    const prop = props_from_options[prop_name];
+    const prop_default = default_props_from_options[prop_name] || null;
+    const prop_has_value = !types.is_undefined(prop) && !types.is_null(prop);
+
+    compiled_props[prop_name] = prop_has_value ? prop : prop_default;
+
+    return compiled_props;
+  }, {});
+};
+
+export default compile;

package/src/component/props/compile_default.js

@@ -0,0 +1,21 @@
+import types from "../../lib/types";
+
+const compile = (component_instance = {}, default_props = {}) => {
+  const compiled_default_props = default_props(component_instance);
+
+  if (compiled_default_props && types.is_object(compiled_default_props) && !types.is_array(compiled_default_props)) {
+    return Object.assign({}, compiled_default_props);
+  }
+
+  return {};
+};
+
+const compile_default = (component_instance = {}, default_props = {}) => {
+  if (types.is_function(default_props)) {
+    return compile(component_instance, default_props);
+  }
+
+  return Object.assign({}, default_props);
+};
+
+export default compile_default;

package/src/component/register_component_options.js

@@ -0,0 +1,44 @@
+import compile_default_props from './props/compile_default.js';
+import compile_methods from './methods/compile.js';
+import compile_props from './props/compile.js';
+import compile_state from './state/compile.js';
+import compile_url from './url/compile.js';
+import generate_id from '../lib/generate_id.js';
+import load_data_from_window from './data/load_data_from_window.js';
+import validate_form from '../forms/validate.js';
+import register_websockets_on_component from '../websockets/register_on_component.js';
+import types from '../lib/types.js';
+
+const register_component_options = (component_instance = {}, component_options = {}) => {
+	// NOTE: Set this first as we reference internally in some of the functions below.
+	component_instance.id = component_options?._componentId || null;
+
+	component_instance.css = component_options?.css;
+	component_instance.data = typeof window !== 'undefined' ? load_data_from_window(component_instance) : {};
+	component_instance.defaultProps = compile_default_props(component_instance, component_options?.defaultProps || {});
+	component_instance.default_props = compile_default_props(component_instance, component_options?.default_props || {});
+	component_instance.dom = {};
+	component_instance.DOMNode = null;
+	component_instance.events = component_options?.events;
+	component_instance.instance_id = generate_id(8);
+	component_instance.lifecycle = component_options?.lifecycle || {};
+	component_instance.methods = compile_methods(component_instance, component_options?.methods || {});
+	component_instance.options = component_options;	
+	component_instance.props = compile_props(component_options?.defaultProps || component_options?.default_props, component_options?.props || {});
+	component_instance.state = compile_state(component_instance, component_options?.state || {});
+	component_instance.test = component_options?.test;
+	component_instance.timers = [];
+	component_instance.translations = component_options?.translations || {};
+	component_instance.url = typeof window !== 'undefined' ? compile_url(window.__joystick_url__) : compile_url(component_options?.url);
+	component_instance.user = typeof window !== 'undefined' ? window.__joystick_user__ : component_options?.user;
+	component_instance.validateForm = validate_form;
+	component_instance.validate_form = validate_form;
+	component_instance.virtual_dom = {};
+	component_instance.wrapper = {};
+
+  if (typeof window !== 'undefined' && component_options?.websockets && types.is_function(component_options?.websockets)) {
+  	register_websockets_on_component(component_options, component_instance);
+  }
+};
+
+export default register_component_options;

package/src/component/render_methods/component.js

@@ -0,0 +1,53 @@
+import add_node_to_tree from '../../tree/add_node_to_tree.js';
+import get_node_from_tree from "../../tree/get_node_from_tree.js";
+import nested_object_diff from '../../lib/nested_object_diff.js';
+import types from '../../lib/types.js';
+
+const component = function component(Component = {}, props = {}) {
+	// NOTE: We bind the component() render method to the parent component instance
+	// inside of the component class definition.
+	const parent = this;
+	const component_instance = Component({
+		parent,
+		props,
+		translations: parent?.translations,
+		url: parent?.url,
+	});
+
+	component_instance.parent = parent;
+
+	const existing_component_on_parent = parent?.existing_children[component_instance?.id];
+	const new_component_on_parent = parent?.new_children[component_instance?.id];
+	const existing_instance_id_on_parent = existing_component_on_parent && existing_component_on_parent[new_component_on_parent?.length || 0];
+	const existing_node_in_tree = get_node_from_tree(existing_instance_id_on_parent);
+
+	if (existing_node_in_tree?.state) {
+		component_instance.state = existing_node_in_tree?.state;
+	}
+
+	if (types.is_function(component_instance?.lifecycle?.onUpdateProps) || types.is_function(component_instance?.lifecycle?.on_update_props)) {
+		const has_different_props = nested_object_diff(existing_node_in_tree?.props, props);
+		if (has_different_props) {
+			(component_instance.lifecycle.onUpdateProps || component_instance.lifecycle.on_update_props)(existing_node_in_tree?.props, props, component_instance);
+		}
+	}
+
+	const new_children = {};
+	const existing_children = {};
+	const component_html = component_instance.render_to_html(new_children, existing_children);
+	const html = component_instance.replace_when_tags(component_html);
+	const dom = component_instance.render_html_to_dom(html);
+	const virtual_dom = component_instance.render_dom_to_virtual_dom(dom);
+
+	component_instance.dom = dom;
+	component_instance.DOMNode = dom;
+	component_instance.virtual_dom = virtual_dom;
+	component_instance.children = new_children;
+
+	add_node_to_tree(component_instance);
+	parent.track_child(component_instance);
+
+	return html;
+};
+
+export default component;

package/src/component/render_methods/component_ssr.js

@@ -0,0 +1,22 @@
+import add_node_to_tree from '../../tree/add_node_to_tree.js';
+
+const component_ssr = function component_ssr(Component = {}, props = {}) {
+	// NOTE: We bind the component_ssr() render method to the parent component_ssr instance
+	// inside of the component_ssr class definition.
+
+	const parent = this;
+	const component_instance = Component({
+		parent,
+		props,
+		translations: parent?.translations,
+		url: parent?.url,
+	});
+
+	component_instance.parent = parent;
+
+	add_node_to_tree(component_instance, this.ssr_tree);
+
+	return `{{${component_instance.id}:${component_instance.instance_id}}}`;
+};
+
+export default component_ssr;

package/src/component/render_methods/each.js

@@ -0,0 +1,19 @@
+import types from "../../lib/types.js";
+
+const each = function each(items = [], callback = null) {
+  if (!types.is_function(callback)) {
+    return '';
+  }
+
+  if (items && types.is_array(items)) {
+    return items
+      .map((item, itemIndex) => {
+        return callback(item, itemIndex);
+      })
+      .join("");
+  }
+
+  return '';
+};
+
+export default each;

package/src/component/render_methods/i18n.js

@@ -0,0 +1,50 @@
+const replace_placeholders_in_string = (string = '', replacements_as_array = []) => {
+  return replacements_as_array.reduce((translation, [replacement_key, replacement_value]) => {
+    return translation.replace(`{{${replacement_key}}}`, replacement_value);
+  }, string);
+};
+
+const handle_translation_replacement = (translation = '', replacements_as_array = []) => {
+  const translation_is_string = typeof translation === 'string';
+  const translation_is_array = Array.isArray(translation);
+  const translation_is_object = typeof translation === 'object' && !translation_is_array;
+
+  if (translation_is_string) {
+    return replace_placeholders_in_string(translation, replacements_as_array);
+  }
+
+  if (translation_is_array) {
+    return translation?.map((translation_in_array) => {
+      return handle_translation_replacement(translation_in_array, replacements_as_array);
+    });
+  }
+
+  if (translation_is_object) {
+    return Object.entries(translation)?.reduce((object_with_replacements = {}, [key, value]) => {
+      object_with_replacements[key] = handle_translation_replacement(value, replacements_as_array);
+      return object_with_replacements;
+    }, {});
+  }
+};
+
+const get_translation_at_path = (key = '', translations = {}) => {
+  return key?.split('.').reduce((object_to_traverse, key_to_match)=> {
+    return (object_to_traverse && object_to_traverse[key_to_match]) || '';
+  }, translations);
+};
+
+const i18n = function(key = '', replacements = {}) {
+  const translations = typeof window !== 'undefined' ? window.__joystick_i18n__ : this.translations;
+  const is_dot_notation_path = key?.includes('.');
+  const translation = is_dot_notation_path ? get_translation_at_path(key, translations) : translations[key];
+
+  if (!translations || !translation) {
+    return '';
+  }
+
+  const replacements_as_array = Object.entries(replacements);
+
+  return handle_translation_replacement(translation, replacements_as_array);
+};
+
+export default i18n;

package/src/component/render_methods/index.js

@@ -0,0 +1,19 @@
+import component from './component.js';
+import component_ssr from './component_ssr.js';
+import each from './each.js';
+import i18n from './i18n.js';
+import when from './when.js';
+
+const render_methods = {
+	c: component,
+	component,
+	component_ssr,
+	e: each,
+	each,
+	i: i18n,
+	i18n,
+	w: when,
+	when,
+};
+
+export default render_methods;

package/src/component/render_methods/when.js

@@ -0,0 +1,20 @@
+import types from "../../lib/types.js";
+
+const when = function when(test = false, html_to_render = '') {
+  if (types.is_function(html_to_render)) {
+    return test ? html_to_render() : '<when> </when>'; 
+  }
+
+  if (test) {
+    // NOTE: Run a trim() to avoid whitespace/newlines in HTML passed to <when>
+    // generating unnecessary text nodes that leave <when> tags in the render.
+    return html_to_render.trim();
+  }
+
+  // NOTE: Return default as a text node containing false (we replace this dynamically when
+  // building the DOM so it never renders in the browser). Blank space here is INTENTIONAL
+  // to ensure a text node is returned when the <when></when> tag is dynamically replaced.
+  return '<when> </when>';
+};
+
+export default when;

package/src/component/state/compile.js

@@ -0,0 +1,21 @@
+import types from '../../lib/types.js';
+
+const run_state_function = (component_instance = {}, state = null) => {
+  const compiled_state = state(component_instance);
+
+  if (compiled_state && types.is_object(compiled_state) && !types.is_array(compiled_state)) {
+    return Object.assign({}, compiled_state);
+  }
+
+  return {};
+};
+
+const compile_state = (component_instance = {}, state = {}) => {
+  if (types.is_function(state)) {
+    return run_state_function(component_instance, state);
+  }
+
+  return Object.assign({}, state);
+};
+
+export default compile_state;

package/src/component/url/compile.js

@@ -0,0 +1,39 @@
+import types from "../../lib/types.js";
+
+const is_active = (path = "", url = {}) => {
+  if (types.is_string(path) && url?.route !== "*") {
+    return (
+      path ===
+      (typeof location !== "undefined" ? location.pathname : url.path)
+    );
+  }
+
+  return false;
+};
+
+const compile = (url = {}) => {
+  return {
+    ...url,
+    query: {
+      ...(url?.query || {}),
+      set: (parameterName = "", parameterValue = "") => {
+        if (typeof window !== "undefined") {
+          const url = new URL(window.location);
+          url.searchParams.append(parameterName, parameterValue);
+          window.history.pushState({}, "", url);
+        }
+      },
+      unset: (parameterName = "") => {
+        if (typeof window !== "undefined") {
+          const url = new URL(window.location);
+          url.searchParams.delete(parameterName);
+          window.history.pushState({}, "", url);
+        }
+      },
+    },
+    is_active: (path = '') => is_active(path, url),
+    isActive: (path = '') => is_active(path, url),
+  };
+};
+
+export default compile;

package/src/component/validate_component_options/has_required_options.js

@@ -0,0 +1,9 @@
+import required_options from './required_options.js';
+
+const has_required_options = (component_options = {}) => {
+	return required_options.every((required_options) => {
+		return Object.keys(component_options).includes(required_options);
+	});
+};
+
+export default has_required_options;

package/src/component/validate_component_options/index.js

@@ -0,0 +1,16 @@
+import has_required_options from "./has_required_options.js";
+import required_options from "./required_options.js";
+import throw_framework_error from "../../lib/throw_framework_error.js";
+
+const validate_component_options = (component_options = {}) => {
+	const missing_required_options = has_required_options(component_options);
+
+	if (missing_required_options) {
+		throw_framework_error(
+			'joystick.validate_component_options',
+			new Error(`Component options must include:\n\n${required_options.join("\n")}`)
+		);
+	}
+};
+
+export default validate_component_options;

package/src/component/validate_component_options/required_options.js

@@ -0,0 +1,5 @@
+const required_options = [
+	'render',
+];
+
+export default required_options;

package/src/component/virtual_dom/diff.js

@@ -0,0 +1,61 @@
+import diff_attributes from './diff_attributes.js';
+import diff_children from './diff_children.js';
+import element_patch_functions from './element_patch_functions.js';
+import render_virtual_dom_to_dom from './render_virtual_dom_to_dom.js';
+
+const get_replace_node_patch = (new_virtual_node) => {
+  return (node) => {
+    const new_dom_node = new_virtual_node ? render_virtual_dom_to_dom(new_virtual_node) : null;
+
+    if (node) {
+      node.replaceWith(new_dom_node);
+    }
+
+    return new_dom_node;
+  };
+};
+
+const get_remove_node_patch = () => {
+  return (node) => {
+    if (node) {
+      node.remove();
+    }
+    
+    return undefined;
+  };
+};
+
+const diff = (old_virtual_node = undefined, new_virtual_node = undefined) => {
+  if (old_virtual_node === undefined || new_virtual_node === undefined) {    
+    return get_remove_node_patch();
+  }
+
+  const is_patching_string = typeof old_virtual_node === 'string' || typeof new_virtual_node === "string";
+
+  if (is_patching_string) {
+    return get_replace_node_patch(new_virtual_node, old_virtual_node);
+  }
+
+  const node_tag_name_changed = old_virtual_node.tag_name !== new_virtual_node.tag_name;
+
+  if (node_tag_name_changed) {
+    return get_replace_node_patch(new_virtual_node);
+  }
+
+  if (new_virtual_node.tag_name === 'select') {
+    return element_patch_functions.select(old_virtual_node, new_virtual_node);
+  }
+
+  if (['pre', 'code'].includes(new_virtual_node.tag_name)) {
+    return get_replace_node_patch(new_virtual_node, old_virtual_node);
+  }
+
+  return (node) => {
+    diff_attributes(old_virtual_node.attributes, new_virtual_node.attributes)(node);
+    diff_children(old_virtual_node.children, new_virtual_node.children)(node);
+
+    return node;
+  };
+};
+
+export default diff;

package/src/component/virtual_dom/diff_attributes.js

@@ -0,0 +1,37 @@
+import is_valid_attribute_name from '../dom/is_valid_attribute_name.js';
+
+const diff_attributes = (old_attributes = {}, new_attributes = {}) => {
+  const patches = [];
+
+  for (const [attribute_key, attribute_value] of Object.entries(new_attributes)) {
+    patches.push((node) => {
+      if (node && node.setAttribute && is_valid_attribute_name(attribute_key)) {
+        node.setAttribute(attribute_key, attribute_value);
+      }
+
+      return node;
+    });
+  }
+
+  for (const attribute_key in old_attributes) {
+    if (!(attribute_key in new_attributes)) {
+      patches.push((node) => {
+        if (node && node.removeAttribute) {
+          node.removeAttribute(attribute_key);
+        }
+
+        return node;
+      });
+    }
+  }
+
+  return (node) => {
+    for (const patch of patches) {
+      if (patch && typeof patch === "function") {
+        patch(node);
+      }
+    }
+  };
+};
+
+export default diff_attributes;