@joystick.js/ui-canary 0.0.0-canary.28 → 0.0.0-canary.280

package/src/component/virtual_dom/diff_children.js

@@ -0,0 +1,74 @@
+import diff_virtual_dom_nodes from './diff.js';
+import map_patch_functions_to_nodes from './map_patch_functions_to_nodes.js';
+import render_virtual_dom_to_dom from './render_virtual_dom_to_dom.js';
+
+const append_new_children = (new_children_functions = [], parent_node) => {
+  for (let i = 0; i < new_children_functions?.length; i += 1) {
+    const patch_function = new_children_functions[i];
+
+    if (patch_function && typeof patch_function === "function") {
+      patch_function(parent_node);
+    }
+  }
+};
+
+const patch_child_nodes = (patch_node_map = []) => {
+  for (let i = 0; i < patch_node_map?.length; i += 1) {
+    const [patch_function, child_node] = patch_node_map[i];
+    if (patch_function && typeof patch_function === "function") {
+      patch_function(child_node);
+    }
+  }
+};
+
+const get_new_children_functions = (old_virtual_children = [], new_virtual_children = []) => {
+  const new_children_functions = [];
+  const new_children = new_virtual_children.slice(old_virtual_children.length);
+
+  for (let i = 0; i < new_children?.length; i += 1) {
+    const new_child = new_children[i];
+    const new_child_function = (node) => {
+      const new_dom_node = render_virtual_dom_to_dom(new_child);
+      node.appendChild(new_dom_node);
+      return node;
+    };
+
+    new_children_functions.push(new_child_function);
+  }
+
+  return new_children_functions;
+};
+
+const get_patches_for_existing_children = (old_virtual_children = [], new_virtual_children = []) => {
+  const child_patch_functions = [];
+
+  for (let i = 0; i < old_virtual_children?.length; i += 1) {
+    const old_virtual_child = old_virtual_children[i];
+
+    const child_patch_function = diff_virtual_dom_nodes(
+      old_virtual_child,
+      new_virtual_children[i],
+    );
+  
+    child_patch_functions.push(child_patch_function);
+  }
+
+  return child_patch_functions;
+};
+
+const diff_children = (old_virtual_children = [], new_virtual_children = []) => {
+  const child_patch_functions = get_patches_for_existing_children(old_virtual_children, new_virtual_children);
+  const new_children_functions = get_new_children_functions(old_virtual_children, new_virtual_children);
+
+  return (parent_node) => {
+    if (parent_node) {
+      const patch_node_map = map_patch_functions_to_nodes(child_patch_functions, parent_node.childNodes);
+      patch_child_nodes(patch_node_map);
+      append_new_children(new_children_functions, parent_node);
+    }
+
+    return parent_node;
+  };
+};
+
+export default diff_children;

package/src/component/virtual_dom/element_patch_functions.js

@@ -0,0 +1,31 @@
+import diff_attributes from "./diff_attributes.js";
+import diff_children from "./diff_children.js";
+
+const element_patch_functions = {
+  select: (old_virtual_node, new_virtual_node) => {
+    // NOTE: This properly handles re-rendering selects without breaking the
+    // value. Not ideal, but this makes the behavior stable/predictable.
+    return (node) => {
+      const old_value = node.value;
+      node.replaceChildren();
+
+      diff_attributes(old_virtual_node.attributes, new_virtual_node.attributes)(node),
+      diff_children([], new_virtual_node.children)(node);
+
+      const old_value_exists = node.querySelector(`option[value="${old_value}"]`);
+
+      if (old_value_exists) {
+        node.value = old_value;
+      }
+
+      if (!old_value_exists) {
+        const first_option = node.querySelector('option');
+        node.value = first_option?.value || '';
+      }
+
+      return node;
+    };
+  },
+};
+
+export default element_patch_functions;

package/src/component/virtual_dom/map_patch_functions_to_nodes.js

@@ -0,0 +1,14 @@
+const map_patch_functions_to_nodes = (patch_functions = [], nodes = []) => {
+  const map = [];
+  const longest_list_length = Math.max(patch_functions.length, nodes.length);
+
+  for (let i = 0; i < longest_list_length; i += 1) {
+    const patch_function = patch_functions[i];
+    const node = nodes[i];
+    map.push([patch_function, node]);
+  }
+
+  return map;
+};
+
+export default map_patch_functions_to_nodes;

package/src/component/virtual_dom/render_virtual_dom_to_dom.js

@@ -0,0 +1,37 @@
+import is_valid_attribute_name from "../dom/is_valid_attribute_name.js";
+import types from '../../lib/types.js';
+
+const render_dom_node = (virtual_dom_node = {}) => {
+  const element = document.createElement(virtual_dom_node.tag_name);
+  const attributes = Object.entries(virtual_dom_node.attributes);
+
+  for (let i = 0; i < attributes.length; i += 1) {
+    const [key, value] = attributes[i];
+    if (is_valid_attribute_name(key)) {
+      element.setAttribute(key, value);
+    }
+  }
+
+  for (let i = 0; i < virtual_dom_node?.children?.length; i += 1) {
+    const child_virtual_dom_node = virtual_dom_node?.children[i];
+
+    if (child_virtual_dom_node) {
+      const child_dom_node = render_virtual_dom_to_dom(child_virtual_dom_node);
+      element.appendChild(child_dom_node);
+    }
+  }
+
+  return element;
+};
+
+const render_virtual_dom_to_dom = (virtual_dom_node = null) => {
+  // NOTE: buildVirtualDOM (./build) can potentially return a string if the node
+  // being rendered is text.
+  if (types.is_string(virtual_dom_node)) {
+    return document.createTextNode(virtual_dom_node);
+  }
+
+  return render_dom_node(virtual_dom_node);
+};
+
+export default render_virtual_dom_to_dom;

package/src/external/get.js

@@ -0,0 +1,9 @@
+const get = (external_library_name = '') => {
+  if (joystick._external[external_library_name]) {
+    return joystick._external[external_library_name];
+  }
+  
+  return null;
+};
+
+export default get;

package/src/external/track.js

@@ -0,0 +1,10 @@
+const track = (external_library_name = '', external_data = {}) => {
+  if (typeof window !== 'undefined') {
+    joystick._external[external_library_name] = {
+      ...(joystick._external[external_library_name] || {}),
+      ...external_data,
+    };
+  }
+};
+
+export default track;

package/src/forms/validate.js

@@ -0,0 +1,306 @@
+import debounce from "../lib/debounce.js";
+import validators from "./validators/index.js";
+
+class ValidateForm {
+  constructor(form, options = {}) {
+    this.fields_to_listen_to_for_changes = [
+      "checkbox",
+      "color",
+      "date",
+      "datetime-local",
+      "email",
+      "file",
+      "hidden",
+      "month",
+      "number",
+      "password",
+      "radio",
+      "range",
+      "search",
+      "tel",
+      "text",
+      "time",
+      "url",
+      "week",
+    ];
+
+    this.default_validation_errors = {
+      credit_card: () => "Must be a valid credit card number.",
+      creditCard: () => "Must be a valid credit card number.",
+      custom: () => "Must return true.",
+      email: () => "Must be a valid email.",
+      equals: (rule) => `Value must equal ${rule}.`,
+      matches: (rule) => `Field must match ${rule}.`,
+      max_length: (rule) => `Field value can be no greater than ${rule}.`,
+      maxLength: (rule) => `Field value can be no greater than ${rule}.`,
+      min_length: (rule) => `Field value can be no less than ${rule}.`,
+      minLength: (rule) => `Field value can be no less than ${rule}.`,
+      phone: () => `Field value must be a valid telephone number.`,
+      postal_code: () => `Field value must be a valid postal code.`,
+      postalCode: () => `Field value must be a valid postal code.`,
+      regex: () => "Must match regex.",
+      required: () => "This field is required.",
+      semver: () => `Field value must be a valid semantic version.`,
+      semVer: () => `Field value must be a valid semantic version.`,
+      slug: () => `Field value must be a valid URL slug.`,
+      strong_password: () => `Field value must be a valid password.`,
+      strongPassword: () => `Field value must be a valid password.`,
+      url: () => `Field value must be a valid URL.`,
+      vat: () => `Field value must be a valid VAT code.`,
+    };
+
+    if (!form) {
+      console.warn(
+        "[validate_form] Must pass an HTML <form></form> element to validate."
+      );
+    }
+
+    this.form = form;
+    this.set_options(options);
+    this.attach_event_listeners();
+  }
+
+  set_options(options = {}) {
+    this.rules = options.rules || {};
+    this.messages = options.messages || {};
+    this.onSubmit = options.onSubmit;
+    this.on_render_error = options.on_render_error || options.onRenderError;
+    this.fields = this.serialize();
+  }
+
+  update_options(options = {}) {
+    this.set_options(options);
+  }
+
+  serialize() {
+    if (this.form) {
+      const fields = Object.keys(this.rules).map((name) => {
+        const element = this.form.querySelector(`[name="${name}"]`);
+        const type = element?.type;
+        const listen_for_changes = this.fields_to_listen_to_for_changes.includes(type);
+
+        return {
+          listen_for_changes,
+          type,
+          name,
+          element,
+          validations: Object.entries(this.rules[name])
+            .map(([validation_name, validation_rule]) => {
+              return {
+                name: validation_name,
+                rule: validation_rule,
+                valid: false,
+              };
+            })
+            .sort((v1, v2) => {
+              if (v1.name > v2.name) {
+                return 1;
+              } else {
+                return -1;
+              }
+            }),
+          errorMessages: this.messages[name] ? Object.keys(this.messages[name]) : {},
+        };
+      });
+
+      return fields?.filter((field) => {
+        return !!field?.element;
+      });
+    }
+  }
+
+  attach_event_listeners() {
+    if (this.form) {
+      const submit_event_listener = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+
+        const is_valid = this.validate();
+
+        if (is_valid && this.onSubmit) {
+          this.onSubmit();
+        }
+      };
+
+      if (this.form.listeners?.length > 0) {
+        for (let i = 0; i < this.form.listeners.length; i += 1) {
+          const listener = this.form.listeners[i];
+          this.form.removeEventListener("submit", listener);
+        }
+      }
+
+      this.form.addEventListener("submit", submit_event_listener);
+      this.form.listeners = [
+        ...(this.form.listeners || []),
+        submit_event_listener,
+      ];
+    }
+
+    for (let i = 0; i < this?.fields?.length; i += 1) {
+      const field = this?.fields[i];
+      if (field?.element && field?.listen_for_changes) {
+        const field_event_listener = () => {
+          debounce(() => {
+            this.validate(field.name);
+          }, 100);
+        };
+
+        field.element.removeEventListener("input", field_event_listener);
+        field.element.addEventListener("input", field_event_listener);
+
+        field.element.removeEventListener("change", field_event_listener);
+        field.element.addEventListener("change", field_event_listener);
+      }
+    }
+  }
+
+  validate(fieldName = null) {
+    if (!fieldName) {
+      this.clear_existing_errors();
+
+      for (let i = 0; i < this.fields.length; i += 1) {
+        const field = this.fields[i];
+        this.validate_field(field);
+      }
+
+      return this.check_if_valid();
+    } else {
+      const field = this.fields.find((field) => field.name === fieldName);
+      this.clear_existing_error(fieldName);
+      this.validate_field(field);
+      return this.check_if_valid();
+    }
+  }
+
+  check_if_valid() {
+    const fields_with_validations = this.fields.map((field) => {
+      return field.validations.some((validation) => {
+        return !validation.valid;
+      });
+    });
+
+    return !fields_with_validations.includes(true);
+  }
+
+  validate_field(field) {
+    const field_input = this.form.querySelector(`[name="${field.name}"]`);
+    const is_checked = ["checkbox", "radio"].includes(field.type);
+    const value = !is_checked ? field?.element?.value?.trim() : null;
+    const checked = is_checked ? field?.element?.checked : null;
+
+    for (let i = 0; i < field.validations.length; i += 1) {
+      const validation = field.validations[i];
+      if (
+        !this.is_valid_value(is_checked, is_checked ? checked : value, validation)
+      ) {
+        const error_message = this.messages[field.name] && this.messages[field.name][validation.name];
+        this.mark_validation_as_invalid(field, validation.name);
+        this.render_error(
+          field.element,
+          error_message || this.default_validation_errors[validation.name](validation.rule, value)
+        );
+      } else {
+        this.mark_validation_as_valid(field, validation.name);
+      }
+    }
+
+    const has_invalid_validations = field.validations.some((validation) => {
+      return !validation.valid;
+    });
+
+    if (has_invalid_validations) {
+      field_input.classList.add("error");
+      field_input.focus();
+    }
+
+    if (!has_invalid_validations) {
+      field_input.classList.remove("error");
+      this.clear_existing_error(field.name);
+    }
+
+    return !has_invalid_validations;
+  }
+
+  mark_validation_as_invalid(field, validation) {
+    const updated_validations = [...field.validations];
+    const validation_to_mark = updated_validations.find(
+      (updated_validation) => updated_validation.name === validation
+    );
+    validation_to_mark.valid = false;
+  }
+
+  mark_validation_as_valid(field, validation) {
+    const updated_validations = [...field.validations];
+    const validation_to_mark = updated_validations.find(
+      (updated_validation) => updated_validation.name === validation
+    );
+    validation_to_mark.valid = true;
+  }
+
+  is_valid_value(is_checked, value, validation) {
+    const validator = validators[validation.name];
+
+    if (validator) {
+      return validator(validation.rule, value, { is_checked });
+    }
+
+    return true;
+  }
+
+  clear_existing_errors() {
+    if (this.form) {
+      const error_elements = this.form.querySelectorAll(".input-hint.error");
+      for (let i = 0; i < error_elements?.length; i += 1) {
+        const error_element = error_elements[i];
+        error_element.parentNode.removeChild(error_element);
+      }
+    }
+  }
+
+  clear_existing_error(name = "") {
+    const existing_error = document.getElementById(`error-${name}`);
+    if (existing_error) {
+      existing_error.parentNode.removeChild(existing_error);
+    }
+  }
+
+  render_error(element, message = "") {
+    if (element) {
+      this.clear_existing_error(element.name);
+
+      // NOTE: Developer has provided an on_render_error hook. Prefer that here
+      // instead of doing the default error rendering.
+      if (typeof this.on_render_error === 'function') {
+        return this.on_render_error(element, message);
+      }
+
+      const error = document.createElement("p");
+
+      error.classList.add("input-hint");
+      error.classList.add("error");
+      error.setAttribute("id", `error-${element.name}`);
+      error.innerText = message;
+
+      element.after(error);
+    }
+  }
+}
+
+const validate_form = (form, options) => {
+  return new Promise((resolve, reject) => {
+    try {
+      const validation = new ValidateForm(form, options);
+      const is_valid = validation.validate();
+    
+      if (is_valid) {
+        resolve();
+      } else {
+        reject();
+      }
+    } catch (exception) {
+      console.warn(exception);
+    }
+  });
+};
+
+export default validate_form;

package/src/forms/validators/credit_card.js

@@ -0,0 +1,19 @@
+import types from "../../lib/types.js";
+
+const regex = /^(?:4[0-9]{12}(?:[0-9]{3,6})?|5[1-5][0-9]{14}|(222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0-9]|2720)[0-9]{12}|6(?:011|5[0-9][0-9])[0-9]{12,15}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11}|6[27][0-9]{14}|^(81[0-9]{14,17}))$/;
+
+const credit_card = (rule, value = "") => {
+  if (!value) {
+    return true;
+  }
+
+  if (value && !types.is_string(value)) {
+    return false;
+  }
+
+  const card_number = value ? value.replace(/[- ]+/g, '') : '';
+
+  return rule === true ? card_number.match(new RegExp(regex)) : !card_number.match(new RegExp(regex));
+};
+
+export default credit_card;

package/src/forms/validators/custom.js

@@ -0,0 +1,5 @@
+const custom = (custom_function = '', value = "") => {
+  return custom_function(value);
+};
+
+export default custom;

package/src/forms/validators/email.js

@@ -0,0 +1,12 @@
+/**
+ * Email Regex
+ * https://emailregex.com
+ */
+
+const regex = /^((?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\]))$/;
+
+const email = (rule, value = "") => {
+  return rule === true ? !!value.match(regex) : !value.match(regex);
+};
+
+export default email;

package/src/forms/validators/equals.js

@@ -0,0 +1,5 @@
+const equals = (rule, value = "") => {
+  return rule === value;
+};
+
+export default equals;

package/src/forms/validators/index.js

@@ -0,0 +1,43 @@
+import credit_card from './credit_card.js';
+import custom from './custom.js';
+import email from './email.js';
+import equals from './equals.js';
+import matches from './matches.js';
+import max_length from './max_length.js';
+import min_length from './min_length.js';
+import phone from './phone.js';
+import postal_code from './postal_code.js';
+import regex from './regex.js';
+import required from './required.js';
+import semver from './semver.js';
+import slug from './slug.js';
+import strong_password from './strong_password.js';
+import url from './url.js';
+import vat from './vat.js';
+
+const validators = {
+  creditCard: credit_card,
+  credit_card,
+  custom,
+  email,
+  equals,
+  matches,
+  maxLength: max_length,
+  max_length,
+  minLength: min_length,
+  min_length,
+  phone,
+  postalCode: postal_code,
+  postal_code,
+  regex,
+  required,
+  semVer: semver,
+  semver,
+  slug,
+  strongPassword: strong_password,
+  strong_password,
+  url,
+  vat,
+};
+
+export default validators;

package/src/forms/validators/matches.js

@@ -0,0 +1,5 @@
+const matches = (rule, value = "") => {
+  return rule === value;
+};
+
+export default matches;

package/src/forms/validators/max_length.js

@@ -0,0 +1,5 @@
+const max_length = (rule, value = "") => {
+  return value.length <= rule;
+};
+
+export default max_length;

package/src/forms/validators/min_length.js

@@ -0,0 +1,5 @@
+const min_length = (rule, value = "") => {
+  return value.length >= rule;
+};
+
+export default min_length;

package/src/forms/validators/phone.js

@@ -0,0 +1,14 @@
+/**
+ * Phone
+ * https://ihateregex.io/expr/phone/
+ */
+
+const regex = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/;
+
+const phone = (rule, value = "") => {
+  return rule === true
+    ? !!value.match(regex)
+    : !value.match(regex);
+};
+
+export default phone;