svelte-on-rails 0.0.1

data/lib/mount_svelte/node_modules/svelte/src/internal/client/dom/elements/custom-element.js

@@ -0,0 +1,338 @@
+import { createClassComponent } from '../../../../legacy/legacy-client.js';
+import { destroy_effect, effect_root, render_effect } from '../../reactivity/effects.js';
+import { append } from '../template.js';
+import { define_property, get_descriptor, object_keys } from '../../../shared/utils.js';
+
+/**
+ * @typedef {Object} CustomElementPropDefinition
+ * @property {string} [attribute]
+ * @property {boolean} [reflect]
+ * @property {'String'|'Boolean'|'Number'|'Array'|'Object'} [type]
+ */
+
+/** @type {any} */
+let SvelteElement;
+
+if (typeof HTMLElement === 'function') {
+	SvelteElement = class extends HTMLElement {
+		/** The Svelte component constructor */
+		$$ctor;
+		/** Slots */
+		$$s;
+		/** @type {any} The Svelte component instance */
+		$$c;
+		/** Whether or not the custom element is connected */
+		$$cn = false;
+		/** @type {Record<string, any>} Component props data */
+		$$d = {};
+		/** `true` if currently in the process of reflecting component props back to attributes */
+		$$r = false;
+		/** @type {Record<string, CustomElementPropDefinition>} Props definition (name, reflected, type etc) */
+		$$p_d = {};
+		/** @type {Record<string, EventListenerOrEventListenerObject[]>} Event listeners */
+		$$l = {};
+		/** @type {Map<EventListenerOrEventListenerObject, Function>} Event listener unsubscribe functions */
+		$$l_u = new Map();
+		/** @type {any} The managed render effect for reflecting attributes */
+		$$me;
+
+		/**
+		 * @param {*} $$componentCtor
+		 * @param {*} $$slots
+		 * @param {*} use_shadow_dom
+		 */
+		constructor($$componentCtor, $$slots, use_shadow_dom) {
+			super();
+			this.$$ctor = $$componentCtor;
+			this.$$s = $$slots;
+			if (use_shadow_dom) {
+				this.attachShadow({ mode: 'open' });
+			}
+		}
+
+		/**
+		 * @param {string} type
+		 * @param {EventListenerOrEventListenerObject} listener
+		 * @param {boolean | AddEventListenerOptions} [options]
+		 */
+		addEventListener(type, listener, options) {
+			// We can't determine upfront if the event is a custom event or not, so we have to
+			// listen to both. If someone uses a custom event with the same name as a regular
+			// browser event, this fires twice - we can't avoid that.
+			this.$$l[type] = this.$$l[type] || [];
+			this.$$l[type].push(listener);
+			if (this.$$c) {
+				const unsub = this.$$c.$on(type, listener);
+				this.$$l_u.set(listener, unsub);
+			}
+			super.addEventListener(type, listener, options);
+		}
+
+		/**
+		 * @param {string} type
+		 * @param {EventListenerOrEventListenerObject} listener
+		 * @param {boolean | AddEventListenerOptions} [options]
+		 */
+		removeEventListener(type, listener, options) {
+			super.removeEventListener(type, listener, options);
+			if (this.$$c) {
+				const unsub = this.$$l_u.get(listener);
+				if (unsub) {
+					unsub();
+					this.$$l_u.delete(listener);
+				}
+			}
+		}
+
+		async connectedCallback() {
+			this.$$cn = true;
+			if (!this.$$c) {
+				// We wait one tick to let possible child slot elements be created/mounted
+				await Promise.resolve();
+				if (!this.$$cn || this.$$c) {
+					return;
+				}
+				/** @param {string} name */
+				function create_slot(name) {
+					/**
+					 * @param {Element} anchor
+					 */
+					return (anchor) => {
+						const slot = document.createElement('slot');
+						if (name !== 'default') slot.name = name;
+
+						append(anchor, slot);
+					};
+				}
+				/** @type {Record<string, any>} */
+				const $$slots = {};
+				const existing_slots = get_custom_elements_slots(this);
+				for (const name of this.$$s) {
+					if (name in existing_slots) {
+						if (name === 'default' && !this.$$d.children) {
+							this.$$d.children = create_slot(name);
+							$$slots.default = true;
+						} else {
+							$$slots[name] = create_slot(name);
+						}
+					}
+				}
+				for (const attribute of this.attributes) {
+					// this.$$data takes precedence over this.attributes
+					const name = this.$$g_p(attribute.name);
+					if (!(name in this.$$d)) {
+						this.$$d[name] = get_custom_element_value(name, attribute.value, this.$$p_d, 'toProp');
+					}
+				}
+				// Port over props that were set programmatically before ce was initialized
+				for (const key in this.$$p_d) {
+					// @ts-expect-error
+					if (!(key in this.$$d) && this[key] !== undefined) {
+						// @ts-expect-error
+						this.$$d[key] = this[key]; // don't transform, these were set through JavaScript
+						// @ts-expect-error
+						delete this[key]; // remove the property that shadows the getter/setter
+					}
+				}
+				this.$$c = createClassComponent({
+					component: this.$$ctor,
+					target: this.shadowRoot || this,
+					props: {
+						...this.$$d,
+						$$slots,
+						$$host: this
+					}
+				});
+
+				// Reflect component props as attributes
+				this.$$me = effect_root(() => {
+					render_effect(() => {
+						this.$$r = true;
+						for (const key of object_keys(this.$$c)) {
+							if (!this.$$p_d[key]?.reflect) continue;
+							this.$$d[key] = this.$$c[key];
+							const attribute_value = get_custom_element_value(
+								key,
+								this.$$d[key],
+								this.$$p_d,
+								'toAttribute'
+							);
+							if (attribute_value == null) {
+								this.removeAttribute(this.$$p_d[key].attribute || key);
+							} else {
+								this.setAttribute(this.$$p_d[key].attribute || key, attribute_value);
+							}
+						}
+						this.$$r = false;
+					});
+				});
+
+				for (const type in this.$$l) {
+					for (const listener of this.$$l[type]) {
+						const unsub = this.$$c.$on(type, listener);
+						this.$$l_u.set(listener, unsub);
+					}
+				}
+				this.$$l = {};
+			}
+		}
+
+		// We don't need this when working within Svelte code, but for compatibility of people using this outside of Svelte
+		// and setting attributes through setAttribute etc, this is helpful
+
+		/**
+		 * @param {string} attr
+		 * @param {string} _oldValue
+		 * @param {string} newValue
+		 */
+		attributeChangedCallback(attr, _oldValue, newValue) {
+			if (this.$$r) return;
+			attr = this.$$g_p(attr);
+			this.$$d[attr] = get_custom_element_value(attr, newValue, this.$$p_d, 'toProp');
+			this.$$c?.$set({ [attr]: this.$$d[attr] });
+		}
+
+		disconnectedCallback() {
+			this.$$cn = false;
+			// In a microtask, because this could be a move within the DOM
+			Promise.resolve().then(() => {
+				if (!this.$$cn && this.$$c) {
+					this.$$c.$destroy();
+					this.$$me();
+					this.$$c = undefined;
+				}
+			});
+		}
+
+		/**
+		 * @param {string} attribute_name
+		 */
+		$$g_p(attribute_name) {
+			return (
+				object_keys(this.$$p_d).find(
+					(key) =>
+						this.$$p_d[key].attribute === attribute_name ||
+						(!this.$$p_d[key].attribute && key.toLowerCase() === attribute_name)
+				) || attribute_name
+			);
+		}
+	};
+}
+
+/**
+ * @param {string} prop
+ * @param {any} value
+ * @param {Record<string, CustomElementPropDefinition>} props_definition
+ * @param {'toAttribute' | 'toProp'} [transform]
+ */
+function get_custom_element_value(prop, value, props_definition, transform) {
+	const type = props_definition[prop]?.type;
+	value = type === 'Boolean' && typeof value !== 'boolean' ? value != null : value;
+	if (!transform || !props_definition[prop]) {
+		return value;
+	} else if (transform === 'toAttribute') {
+		switch (type) {
+			case 'Object':
+			case 'Array':
+				return value == null ? null : JSON.stringify(value);
+			case 'Boolean':
+				return value ? '' : null;
+			case 'Number':
+				return value == null ? null : value;
+			default:
+				return value;
+		}
+	} else {
+		switch (type) {
+			case 'Object':
+			case 'Array':
+				return value && JSON.parse(value);
+			case 'Boolean':
+				return value; // conversion already handled above
+			case 'Number':
+				return value != null ? +value : value;
+			default:
+				return value;
+		}
+	}
+}
+
+/**
+ * @param {HTMLElement} element
+ */
+function get_custom_elements_slots(element) {
+	/** @type {Record<string, true>} */
+	const result = {};
+	element.childNodes.forEach((node) => {
+		result[/** @type {Element} node */ (node).slot || 'default'] = true;
+	});
+	return result;
+}
+
+/**
+ * @internal
+ *
+ * Turn a Svelte component into a custom element.
+ * @param {any} Component  A Svelte component function
+ * @param {Record<string, CustomElementPropDefinition>} props_definition  The props to observe
+ * @param {string[]} slots  The slots to create
+ * @param {string[]} exports  Explicitly exported values, other than props
+ * @param {boolean} use_shadow_dom  Whether to use shadow DOM
+ * @param {(ce: new () => HTMLElement) => new () => HTMLElement} [extend]
+ */
+export function create_custom_element(
+	Component,
+	props_definition,
+	slots,
+	exports,
+	use_shadow_dom,
+	extend
+) {
+	let Class = class extends SvelteElement {
+		constructor() {
+			super(Component, slots, use_shadow_dom);
+			this.$$p_d = props_definition;
+		}
+		static get observedAttributes() {
+			return object_keys(props_definition).map((key) =>
+				(props_definition[key].attribute || key).toLowerCase()
+			);
+		}
+	};
+	object_keys(props_definition).forEach((prop) => {
+		define_property(Class.prototype, prop, {
+			get() {
+				return this.$$c && prop in this.$$c ? this.$$c[prop] : this.$$d[prop];
+			},
+			set(value) {
+				value = get_custom_element_value(prop, value, props_definition);
+				this.$$d[prop] = value;
+				var component = this.$$c;
+
+				if (component) {
+					// // If the instance has an accessor, use that instead
+					var setter = get_descriptor(component, prop)?.get;
+
+					if (setter) {
+						component[prop] = value;
+					} else {
+						component.$set({ [prop]: value });
+					}
+				}
+			}
+		});
+	});
+	exports.forEach((property) => {
+		define_property(Class.prototype, property, {
+			get() {
+				return this.$$c?.[property];
+			}
+		});
+	});
+	if (extend) {
+		// @ts-expect-error - assigning here is fine
+		Class = extend(Class);
+	}
+	Component.element = /** @type {any} */ Class;
+	return Class;
+}

data/lib/mount_svelte/node_modules/svelte/src/internal/client/dom/elements/events.js

@@ -0,0 +1,329 @@
+/** @import { Location } from 'locate-character' */
+import { teardown } from '../../reactivity/effects.js';
+import { define_property, is_array } from '../../../shared/utils.js';
+import { hydrating } from '../hydration.js';
+import { queue_micro_task } from '../task.js';
+import { FILENAME } from '../../../../constants.js';
+import * as w from '../../warnings.js';
+import {
+	active_effect,
+	active_reaction,
+	set_active_effect,
+	set_active_reaction
+} from '../../runtime.js';
+import { without_reactive_context } from './bindings/shared.js';
+
+/** @type {Set<string>} */
+export const all_registered_events = new Set();
+
+/** @type {Set<(events: Array<string>) => void>} */
+export const root_event_handles = new Set();
+
+/**
+ * SSR adds onload and onerror attributes to catch those events before the hydration.
+ * This function detects those cases, removes the attributes and replays the events.
+ * @param {HTMLElement} dom
+ */
+export function replay_events(dom) {
+	if (!hydrating) return;
+
+	if (dom.onload) {
+		dom.removeAttribute('onload');
+	}
+	if (dom.onerror) {
+		dom.removeAttribute('onerror');
+	}
+	// @ts-expect-error
+	const event = dom.__e;
+	if (event !== undefined) {
+		// @ts-expect-error
+		dom.__e = undefined;
+		queueMicrotask(() => {
+			if (dom.isConnected) {
+				dom.dispatchEvent(event);
+			}
+		});
+	}
+}
+
+/**
+ * @param {string} event_name
+ * @param {EventTarget} dom
+ * @param {EventListener} [handler]
+ * @param {AddEventListenerOptions} [options]
+ */
+export function create_event(event_name, dom, handler, options = {}) {
+	/**
+	 * @this {EventTarget}
+	 */
+	function target_handler(/** @type {Event} */ event) {
+		if (!options.capture) {
+			// Only call in the bubble phase, else delegated events would be called before the capturing events
+			handle_event_propagation.call(dom, event);
+		}
+		if (!event.cancelBubble) {
+			return without_reactive_context(() => {
+				return handler?.call(this, event);
+			});
+		}
+	}
+
+	// Chrome has a bug where pointer events don't work when attached to a DOM element that has been cloned
+	// with cloneNode() and the DOM element is disconnected from the document. To ensure the event works, we
+	// defer the attachment till after it's been appended to the document. TODO: remove this once Chrome fixes
+	// this bug. The same applies to wheel events and touch events.
+	if (
+		event_name.startsWith('pointer') ||
+		event_name.startsWith('touch') ||
+		event_name === 'wheel'
+	) {
+		queue_micro_task(() => {
+			dom.addEventListener(event_name, target_handler, options);
+		});
+	} else {
+		dom.addEventListener(event_name, target_handler, options);
+	}
+
+	return target_handler;
+}
+
+/**
+ * Attaches an event handler to an element and returns a function that removes the handler. Using this
+ * rather than `addEventListener` will preserve the correct order relative to handlers added declaratively
+ * (with attributes like `onclick`), which use event delegation for performance reasons
+ *
+ * @param {EventTarget} element
+ * @param {string} type
+ * @param {EventListener} handler
+ * @param {AddEventListenerOptions} [options]
+ */
+export function on(element, type, handler, options = {}) {
+	var target_handler = create_event(type, element, handler, options);
+
+	return () => {
+		element.removeEventListener(type, target_handler, options);
+	};
+}
+
+/**
+ * @param {string} event_name
+ * @param {Element} dom
+ * @param {EventListener} [handler]
+ * @param {boolean} [capture]
+ * @param {boolean} [passive]
+ * @returns {void}
+ */
+export function event(event_name, dom, handler, capture, passive) {
+	var options = { capture, passive };
+	var target_handler = create_event(event_name, dom, handler, options);
+
+	// @ts-ignore
+	if (dom === document.body || dom === window || dom === document) {
+		teardown(() => {
+			dom.removeEventListener(event_name, target_handler, options);
+		});
+	}
+}
+
+/**
+ * @param {Array<string>} events
+ * @returns {void}
+ */
+export function delegate(events) {
+	for (var i = 0; i < events.length; i++) {
+		all_registered_events.add(events[i]);
+	}
+
+	for (var fn of root_event_handles) {
+		fn(events);
+	}
+}
+
+/**
+ * @this {EventTarget}
+ * @param {Event} event
+ * @returns {void}
+ */
+export function handle_event_propagation(event) {
+	var handler_element = this;
+	var owner_document = /** @type {Node} */ (handler_element).ownerDocument;
+	var event_name = event.type;
+	var path = event.composedPath?.() || [];
+	var current_target = /** @type {null | Element} */ (path[0] || event.target);
+
+	// composedPath contains list of nodes the event has propagated through.
+	// We check __root to skip all nodes below it in case this is a
+	// parent of the __root node, which indicates that there's nested
+	// mounted apps. In this case we don't want to trigger events multiple times.
+	var path_idx = 0;
+
+	// @ts-expect-error is added below
+	var handled_at = event.__root;
+
+	if (handled_at) {
+		var at_idx = path.indexOf(handled_at);
+		if (
+			at_idx !== -1 &&
+			(handler_element === document || handler_element === /** @type {any} */ (window))
+		) {
+			// This is the fallback document listener or a window listener, but the event was already handled
+			// -> ignore, but set handle_at to document/window so that we're resetting the event
+			// chain in case someone manually dispatches the same event object again.
+			// @ts-expect-error
+			event.__root = handler_element;
+			return;
+		}
+
+		// We're deliberately not skipping if the index is higher, because
+		// someone could create an event programmatically and emit it multiple times,
+		// in which case we want to handle the whole propagation chain properly each time.
+		// (this will only be a false negative if the event is dispatched multiple times and
+		// the fallback document listener isn't reached in between, but that's super rare)
+		var handler_idx = path.indexOf(handler_element);
+		if (handler_idx === -1) {
+			// handle_idx can theoretically be -1 (happened in some JSDOM testing scenarios with an event listener on the window object)
+			// so guard against that, too, and assume that everything was handled at this point.
+			return;
+		}
+
+		if (at_idx <= handler_idx) {
+			path_idx = at_idx;
+		}
+	}
+
+	current_target = /** @type {Element} */ (path[path_idx] || event.target);
+	// there can only be one delegated event per element, and we either already handled the current target,
+	// or this is the very first target in the chain which has a non-delegated listener, in which case it's safe
+	// to handle a possible delegated event on it later (through the root delegation listener for example).
+	if (current_target === handler_element) return;
+
+	// Proxy currentTarget to correct target
+	define_property(event, 'currentTarget', {
+		configurable: true,
+		get() {
+			return current_target || owner_document;
+		}
+	});
+
+	// This started because of Chromium issue https://chromestatus.com/feature/5128696823545856,
+	// where removal or moving of of the DOM can cause sync `blur` events to fire, which can cause logic
+	// to run inside the current `active_reaction`, which isn't what we want at all. However, on reflection,
+	// it's probably best that all event handled by Svelte have this behaviour, as we don't really want
+	// an event handler to run in the context of another reaction or effect.
+	var previous_reaction = active_reaction;
+	var previous_effect = active_effect;
+	set_active_reaction(null);
+	set_active_effect(null);
+
+	try {
+		/**
+		 * @type {unknown}
+		 */
+		var throw_error;
+		/**
+		 * @type {unknown[]}
+		 */
+		var other_errors = [];
+
+		while (current_target !== null) {
+			/** @type {null | Element} */
+			var parent_element =
+				current_target.assignedSlot ||
+				current_target.parentNode ||
+				/** @type {any} */ (current_target).host ||
+				null;
+
+			try {
+				// @ts-expect-error
+				var delegated = current_target['__' + event_name];
+
+				if (
+					delegated != null &&
+					(!(/** @type {any} */ (current_target).disabled) ||
+						// DOM could've been updated already by the time this is reached, so we check this as well
+						// -> the target could not have been disabled because it emits the event in the first place
+						event.target === current_target)
+				) {
+					if (is_array(delegated)) {
+						var [fn, ...data] = delegated;
+						fn.apply(current_target, [event, ...data]);
+					} else {
+						delegated.call(current_target, event);
+					}
+				}
+			} catch (error) {
+				if (throw_error) {
+					other_errors.push(error);
+				} else {
+					throw_error = error;
+				}
+			}
+			if (event.cancelBubble || parent_element === handler_element || parent_element === null) {
+				break;
+			}
+			current_target = parent_element;
+		}
+
+		if (throw_error) {
+			for (let error of other_errors) {
+				// Throw the rest of the errors, one-by-one on a microtask
+				queueMicrotask(() => {
+					throw error;
+				});
+			}
+			throw throw_error;
+		}
+	} finally {
+		// @ts-expect-error is used above
+		event.__root = handler_element;
+		// @ts-ignore remove proxy on currentTarget
+		delete event.currentTarget;
+		set_active_reaction(previous_reaction);
+		set_active_effect(previous_effect);
+	}
+}
+
+/**
+ * In dev, warn if an event handler is not a function, as it means the
+ * user probably called the handler or forgot to add a `() =>`
+ * @param {() => (event: Event, ...args: any) => void} thunk
+ * @param {EventTarget} element
+ * @param {[Event, ...any]} args
+ * @param {any} component
+ * @param {[number, number]} [loc]
+ * @param {boolean} [remove_parens]
+ */
+export function apply(
+	thunk,
+	element,
+	args,
+	component,
+	loc,
+	has_side_effects = false,
+	remove_parens = false
+) {
+	let handler;
+	let error;
+
+	try {
+		handler = thunk();
+	} catch (e) {
+		error = e;
+	}
+
+	if (typeof handler !== 'function' && (has_side_effects || handler != null || error)) {
+		const filename = component?.[FILENAME];
+		const location = loc ? ` at ${filename}:${loc[0]}:${loc[1]}` : ` in ${filename}`;
+		const phase = args[0]?.eventPhase < Event.BUBBLING_PHASE ? 'capture' : '';
+		const event_name = args[0]?.type + phase;
+		const description = `\`${event_name}\` handler${location}`;
+		const suggestion = remove_parens ? 'remove the trailing `()`' : 'add a leading `() =>`';
+
+		w.event_handler_invalid(description, suggestion);
+
+		if (error) {
+			throw error;
+		}
+	}
+	handler?.apply(element, args);
+}