@wirekyt/vue 0.0.1 → 0.0.3

package/dist/utils-XrBZd2Yk.cjs

@@ -0,0 +1,625 @@
+let vue = require("vue");
+let _wirekyt_dom = require("@wirekyt/dom");
+let _wirekyt_dom_types = require("@wirekyt/dom/types");
+let _wirekyt_dom_utils = require("@wirekyt/dom/utils");
+//#region src/utils/create-context.ts
+const createContext = (id) => {
+	const contextId = Symbol(id);
+	const provider = (value) => (0, vue.provide)(contextId, value);
+	const consumer = (fallback) => (0, vue.inject)(contextId, fallback);
+	return [
+		provider,
+		consumer,
+		contextId
+	];
+};
+//#endregion
+//#region src/utils/use-emits-as-props.ts
+function useEmitAsProps(emit) {
+	const vm = (0, vue.getCurrentInstance)();
+	const events = vm?.type.emits;
+	const result = {};
+	if (!events?.length) console.warn(`No emitted event found. Please check component: ${vm?.type.__name}`);
+	for (const event of events) result[(0, vue.toHandlerKey)((0, vue.camelize)(event))] = (...arg) => emit(event, ...arg);
+	return result;
+}
+//#endregion
+//#region src/utils/unref-element.ts
+function unrefElement(elRef) {
+	const plain = (0, vue.toValue)(elRef);
+	return plain?.$el ?? plain;
+}
+//#endregion
+//#region src/utils/use-forward-expose.ts
+const isElement = (el) => Object.prototype.hasOwnProperty.call(el, "nodeName") && typeof el.nodeName === "string";
+function useForwardExpose() {
+	const instance = (0, vue.getCurrentInstance)();
+	const currentRef = (0, vue.ref)();
+	const currentElement = (0, vue.computed)(() => {
+		return ["#text", "#comment"].includes(currentRef.value?.$el.nodeName) ? currentRef.value?.$el.nextElementSibling : unrefElement(currentRef);
+	});
+	const localExpose = Object.assign({}, instance.exposed);
+	const ret = {};
+	for (const key in instance.props) Object.defineProperty(ret, key, {
+		enumerable: true,
+		configurable: true,
+		get: () => instance.props[key]
+	});
+	if (Object.keys(localExpose).length > 0) for (const key in localExpose) Object.defineProperty(ret, key, {
+		enumerable: true,
+		configurable: true,
+		get: () => localExpose[key]
+	});
+	Object.defineProperty(ret, "$el", {
+		enumerable: true,
+		configurable: true,
+		get: () => instance.vnode.el
+	});
+	instance.exposed = ret;
+	function forwardRef(ref) {
+		currentRef.value = ref;
+		if (!ref) return;
+		Object.defineProperty(ret, "$el", {
+			enumerable: true,
+			configurable: true,
+			get: () => isElement(ref) ? ref : ref.$el
+		});
+		instance.exposed = ret;
+	}
+	return {
+		forwardRef,
+		currentRef,
+		currentElement
+	};
+}
+//#endregion
+//#region src/utils/use-forward-props.ts
+function useForwardProps(props) {
+	const vm = (0, vue.getCurrentInstance)();
+	const propOptions = vm?.type.props ?? {};
+	const defaultProps = Object.keys(propOptions).reduce((prev, curr) => {
+		const defaultValue = propOptions[curr].default;
+		if (defaultValue !== void 0) prev[curr] = defaultValue;
+		return prev;
+	}, {});
+	const refProps = (0, vue.toRef)(props);
+	return (0, vue.computed)(() => {
+		const preservedProps = {};
+		const assignedProps = vm?.vnode.props ?? {};
+		Object.keys(assignedProps).forEach((key) => {
+			preservedProps[(0, vue.camelize)(key)] = assignedProps[key];
+		});
+		return Object.keys({
+			...defaultProps,
+			...preservedProps
+		}).reduce((prev, curr) => {
+			if (refProps.value[curr] !== void 0) prev[curr] = refProps.value[curr];
+			return prev;
+		}, {});
+	});
+}
+//#endregion
+//#region src/utils/use-forward-props-emits.ts
+function useForwardPropsEmits(props, emit) {
+	const parsedProps = useForwardProps(props);
+	const emitsAsProps = emit ? useEmitAsProps(emit) : {};
+	return (0, vue.computed)(() => ({
+		...parsedProps.value,
+		...emitsAsProps
+	}));
+}
+//#endregion
+//#region src/core/normalize-props.ts
+function toCase(txt) {
+	return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+}
+const propMap = {
+	htmlFor: "for",
+	className: "class",
+	onDoubleClick: "onDblclick",
+	onChange: "onInput",
+	onFocus: "onFocusin",
+	onBlur: "onFocusout",
+	defaultValue: "value",
+	defaultChecked: "checked"
+};
+const preserveKeys = "viewBox,className,preserveAspectRatio,fillRule,clipPath,clipRule,strokeWidth,strokeLinecap,strokeLinejoin,strokeDasharray,strokeDashoffset,strokeMiterlimit".split(",");
+function toVueProp(prop) {
+	if (prop in propMap) return propMap[prop];
+	if (prop.startsWith("on")) return `on${toCase(prop.substr(2))}`;
+	if (preserveKeys.includes(prop)) return prop;
+	return prop.toLowerCase();
+}
+const normalizeProps = (0, _wirekyt_dom_types.createNormalizer)((props) => {
+	const normalized = {};
+	for (const key in props) {
+		const value = props[key];
+		if (key === "children") {
+			if (typeof value === "string") normalized["innerHTML"] = value;
+			else if (process.env.NODE_ENV !== "production" && value != null) console.warn("[Vue Normalize Prop] : avoid passing non-primitive value as `children`");
+		} else normalized[toVueProp(key)] = props[key];
+	}
+	return normalized;
+});
+//#endregion
+//#region src/core/bindable.ts
+function bindable(props) {
+	const initial = props().defaultValue ?? props().value;
+	const eq = props().isEqual ?? Object.is;
+	const v = (0, vue.shallowRef)(initial);
+	const controlled = (0, vue.computed)(() => props().value !== void 0);
+	return {
+		initial,
+		ref: (0, vue.shallowRef)(controlled.value ? props().value : v.value),
+		get() {
+			return controlled.value ? props().value : v.value;
+		},
+		set(val) {
+			const prev = controlled.value ? props().value : v.value;
+			const next = (0, _wirekyt_dom_utils.isFunction)(val) ? val(prev) : val;
+			if (props().debug) console.log(`[bindable > ${props().debug}] setValue`, {
+				next,
+				prev
+			});
+			if (!controlled.value) v.value = next;
+			if (!eq(next, prev)) props().onChange?.(next, prev);
+		},
+		invoke(nextValue, prevValue) {
+			props().onChange?.(nextValue, prevValue);
+		},
+		hash(value) {
+			return props().hash?.(value) ?? String(value);
+		}
+	};
+}
+bindable.cleanup = (fn) => {
+	(0, vue.onUnmounted)(() => fn());
+};
+bindable.ref = (defaultValue) => {
+	let value = defaultValue;
+	return {
+		get: () => value,
+		set: (next) => {
+			value = next;
+		}
+	};
+};
+//#endregion
+//#region src/core/refs.ts
+function useRefs(refs) {
+	const ref = { current: refs };
+	return {
+		get(key) {
+			return ref.current[key];
+		},
+		set(key, value) {
+			ref.current[key] = value;
+		}
+	};
+}
+//#endregion
+//#region src/core/track.ts
+const useTrack = (deps, effect) => {
+	(0, vue.watch)(() => deps.map((d) => d()), (current, previous) => {
+		let changed = false;
+		for (let i = 0; i < current.length; i++) if (!(0, _wirekyt_dom_utils.isEqual)(previous[i], (0, vue.toValue)(current[i]))) {
+			changed = true;
+			break;
+		}
+		if (changed) effect();
+	});
+};
+//#endregion
+//#region src/core/machine.ts
+function useMachine(machine, userProps = {}) {
+	const scope = (0, vue.computed)(() => {
+		const { id, ids, getRootNode } = (0, vue.toValue)(userProps);
+		return (0, _wirekyt_dom.createScope)({
+			id,
+			ids,
+			getRootNode
+		});
+	});
+	const debug = (...args) => {
+		if (machine.debug) console.log(...args);
+	};
+	const prop = useProp((0, vue.computed)(() => machine.props?.({
+		props: (0, _wirekyt_dom_utils.compact)((0, vue.toValue)(userProps)),
+		get scope() {
+			return scope.value;
+		}
+	}) ?? (0, vue.toValue)(userProps)));
+	const context = machine.context?.({
+		prop,
+		bindable,
+		get scope() {
+			return scope.value;
+		},
+		flush,
+		getContext() {
+			return ctx;
+		},
+		getComputed() {
+			return computed;
+		},
+		getRefs() {
+			return refs;
+		},
+		getEvent() {
+			return getEvent();
+		}
+	});
+	const ctx = {
+		get(key) {
+			return context[key]?.get();
+		},
+		set(key, value) {
+			context[key]?.set(value);
+		},
+		initial(key) {
+			return context[key]?.initial;
+		},
+		hash(key) {
+			const current = context[key]?.get();
+			return context[key]?.hash(current);
+		}
+	};
+	let effects = /* @__PURE__ */ new Map();
+	let transitionRef = null;
+	let previousEventRef = { current: null };
+	let eventRef = { current: { type: "" } };
+	const getEvent = () => ({
+		...eventRef.current,
+		current() {
+			return eventRef.current;
+		},
+		previous() {
+			return previousEventRef.current;
+		}
+	});
+	const getState = () => ({
+		...state,
+		matches(...values) {
+			const currentState = state.get();
+			return values.some((value) => (0, _wirekyt_dom.matchesState)(currentState, value));
+		},
+		hasTag(tag) {
+			return (0, _wirekyt_dom.hasTag)(machine, state.get(), tag);
+		}
+	});
+	const refs = useRefs(machine.refs?.({
+		prop,
+		context: ctx
+	}) ?? {});
+	const getParams = () => ({
+		state: getState(),
+		context: ctx,
+		event: getEvent(),
+		prop,
+		send,
+		action,
+		guard,
+		track: useTrack,
+		refs,
+		computed,
+		flush,
+		get scope() {
+			return scope.value;
+		},
+		choose
+	});
+	const action = (keys) => {
+		const strs = (0, _wirekyt_dom_utils.isFunction)(keys) ? keys(getParams()) : keys;
+		if (!strs) return;
+		const fns = strs.map((s) => {
+			const fn = machine.implementations?.actions?.[s];
+			if (!fn) (0, _wirekyt_dom_utils.warn)(`[wirekyt] No implementation found for action "${JSON.stringify(s)}"`);
+			return fn;
+		});
+		for (const fn of fns) fn?.(getParams());
+	};
+	const guard = (str) => {
+		if ((0, _wirekyt_dom_utils.isFunction)(str)) return str(getParams());
+		const fn = machine.implementations?.guards?.[str];
+		if (!fn) (0, _wirekyt_dom_utils.warn)(`[wirekyt] No implementation found for guard "${JSON.stringify(str)}"`);
+		return fn?.(getParams());
+	};
+	const effect = (keys) => {
+		const strs = (0, _wirekyt_dom_utils.isFunction)(keys) ? keys(getParams()) : keys;
+		if (!strs) return;
+		const fns = strs.map((s) => {
+			const fn = machine.implementations?.effects?.[s];
+			if (!fn) (0, _wirekyt_dom_utils.warn)(`[wirekyt] No implementation found for effect "${JSON.stringify(s)}"`);
+			return fn;
+		});
+		const cleanups = [];
+		for (const fn of fns) {
+			const cleanup = fn?.(getParams());
+			if (cleanup) cleanups.push(cleanup);
+		}
+		return () => cleanups.forEach((fn) => fn?.());
+	};
+	const choose = (transitions) => {
+		return (0, _wirekyt_dom_utils.toArray)(transitions).find((t) => {
+			let result = !t.guard;
+			if ((0, _wirekyt_dom_utils.isString)(t.guard)) result = !!guard(t.guard);
+			else if ((0, _wirekyt_dom_utils.isFunction)(t.guard)) result = t.guard(getParams());
+			return result;
+		});
+	};
+	const computed = (key) => {
+		(0, _wirekyt_dom_utils.ensure)(machine.computed, () => `[wirekyt] No computed object found on machine`);
+		const fn = machine.computed[key];
+		return fn({
+			context: ctx,
+			event: getEvent(),
+			prop,
+			refs,
+			get scope() {
+				return scope.value;
+			},
+			computed
+		});
+	};
+	const state = bindable(() => ({
+		defaultValue: (0, _wirekyt_dom.resolveStateValue)(machine, machine.initialState({ prop })),
+		onChange(nextState, prevState) {
+			const { exiting, entering } = (0, _wirekyt_dom.getExitEnterStates)(machine, prevState, nextState, transitionRef?.reenter);
+			exiting.forEach((item) => {
+				effects.get(item.path)?.();
+				effects.delete(item.path);
+			});
+			exiting.forEach((item) => {
+				action(item.state?.exit);
+			});
+			action(transitionRef?.actions);
+			entering.forEach((item) => {
+				const cleanup = effect(item.state?.effects);
+				if (cleanup) {
+					const existing = effects.get(item.path);
+					effects.set(item.path, existing ? (0, _wirekyt_dom_utils.callAll)(existing, cleanup) : cleanup);
+				}
+			});
+			if (prevState === _wirekyt_dom.INIT_STATE) {
+				action(machine.entry);
+				const cleanup = effect(machine.effects);
+				if (cleanup) {
+					const existing = effects.get(_wirekyt_dom.INIT_STATE);
+					effects.set(_wirekyt_dom.INIT_STATE, existing ? (0, _wirekyt_dom_utils.callAll)(existing, cleanup) : cleanup);
+				}
+			}
+			entering.forEach((item) => {
+				action(item.state?.entry);
+			});
+		}
+	}));
+	let status = _wirekyt_dom.MachineStatus.NotStarted;
+	let pendingEvents = [];
+	(0, vue.onMounted)(() => {
+		const started = status === _wirekyt_dom.MachineStatus.Started;
+		status = _wirekyt_dom.MachineStatus.Started;
+		debug(started ? "rehydrating..." : "initializing...");
+		state.invoke(state.initial, _wirekyt_dom.INIT_STATE);
+		const events = pendingEvents;
+		pendingEvents = [];
+		for (const event of events) send(event);
+	});
+	(0, vue.onBeforeUnmount)(() => {
+		status = _wirekyt_dom.MachineStatus.Stopped;
+		pendingEvents = [];
+		debug("unmounting...");
+		const fns = effects.values();
+		for (const fn of fns) fn?.();
+		effects = /* @__PURE__ */ new Map();
+		action(machine.exit);
+	});
+	const send = (event) => {
+		if (status !== _wirekyt_dom.MachineStatus.Started) {
+			pendingEvents.push(event);
+			return;
+		}
+		previousEventRef.current = eventRef.current;
+		eventRef.current = event;
+		let currentState = state.get();
+		const { transitions, source } = (0, _wirekyt_dom.findTransition)(machine, currentState, event.type);
+		const transition = choose(transitions);
+		if (!transition) return;
+		transitionRef = transition;
+		const target = (0, _wirekyt_dom.resolveStateValue)(machine, transition.target ?? currentState, source);
+		debug("transition", event.type, transition.target || currentState, `(${transition.actions})`);
+		if (target !== currentState) state.set(target);
+		else if (transition.reenter) state.invoke(currentState, currentState);
+		else action(transition.actions);
+	};
+	machine.watch?.(getParams());
+	return {
+		state: getState(),
+		send,
+		context: ctx,
+		prop,
+		get scope() {
+			return scope.value;
+		},
+		refs,
+		computed,
+		event: getEvent(),
+		getStatus: () => status
+	};
+}
+function useProp(valueRef) {
+	return function get(key) {
+		return valueRef.value[key];
+	};
+}
+const flush = (fn) => {
+	(0, vue.nextTick)().then(() => {
+		fn();
+	});
+};
+//#endregion
+//#region src/core/use-sync-external-store.ts
+function useSyncExternalStore(subscribe, getSnapshot, _getServerSnapshot) {
+	const snapshot = (0, vue.shallowRef)(getSnapshot());
+	let unsubscribe;
+	(0, vue.onMounted)(() => {
+		snapshot.value = getSnapshot();
+		unsubscribe = subscribe(() => {
+			snapshot.value = getSnapshot();
+		});
+	});
+	(0, vue.onUnmounted)(() => {
+		unsubscribe?.();
+	});
+	return (0, vue.readonly)(snapshot);
+}
+//#endregion
+//#region src/utils/dynamic.ts
+const Dynamic = (0, vue.defineComponent)({
+	name: "Dynamic",
+	inheritAttrs: false,
+	setup(_, { attrs, slots }) {
+		return () => {
+			if (!slots.default) return null;
+			const children = renderSlotFragments(slots.default());
+			const [firstChildren, ...otherChildren] = children;
+			if (firstChildren && Object.keys(attrs).length > 0) {
+				delete firstChildren.props?.ref;
+				const mergedProps = (0, _wirekyt_dom.mergeProps)(attrs, firstChildren.props ?? {});
+				const cloned = (0, vue.cloneVNode)(firstChildren, mergedProps);
+				for (const prop in mergedProps) if (prop.startsWith("on")) {
+					cloned.props ||= {};
+					cloned.props[prop] = mergedProps[prop];
+				}
+				return children.length === 1 ? cloned : [cloned, ...otherChildren];
+			}
+			return children;
+		};
+	}
+});
+function renderSlotFragments(children) {
+	if (!children) return [];
+	return children.flatMap((child) => {
+		if (child.type === vue.Fragment) return renderSlotFragments(child.children);
+		return [child];
+	});
+}
+//#endregion
+//#region src/utils/use-render-strategy.ts
+const [RenderStrategyPropsProvider, useRenderStrategyProps] = createContext("RenderStrategyProps");
+//#endregion
+//#region src/utils/use-v-model.ts
+function useVModel(props, key, emit, options = {}) {
+	const { passive = false, eventName, defaultValue } = options;
+	const vm = (0, vue.getCurrentInstance)();
+	const _emit = emit || vm?.emit || vm?.$emit?.bind(vm) || vm?.proxy?.$emit?.bind(vm?.proxy);
+	const prop = key || "modelValue";
+	const getValue = () => props[prop] ?? defaultValue;
+	const triggerEmit = (value) => {
+		if (!eventName) _emit(eventName || `update:${prop.toString()}`, value);
+		else for (const event of eventName) _emit(event, value);
+	};
+	if (passive) {
+		const proxy = (0, vue.ref)(getValue());
+		let isUpdating = false;
+		(0, vue.watch)(() => props[prop], (v) => {
+			if (!isUpdating) {
+				isUpdating = true;
+				proxy.value = v;
+				(0, vue.nextTick)(() => {
+					isUpdating = false;
+				});
+			}
+		});
+		(0, vue.watch)(proxy, (v) => {
+			if (!isUpdating && v !== props[prop]) triggerEmit(v);
+		});
+		return proxy;
+	}
+	return (0, vue.computed)({
+		get() {
+			return getValue();
+		},
+		set(value) {
+			triggerEmit(value);
+		}
+	});
+}
+//#endregion
+Object.defineProperty(exports, "Dynamic", {
+	enumerable: true,
+	get: function() {
+		return Dynamic;
+	}
+});
+Object.defineProperty(exports, "RenderStrategyPropsProvider", {
+	enumerable: true,
+	get: function() {
+		return RenderStrategyPropsProvider;
+	}
+});
+Object.defineProperty(exports, "createContext", {
+	enumerable: true,
+	get: function() {
+		return createContext;
+	}
+});
+Object.defineProperty(exports, "normalizeProps", {
+	enumerable: true,
+	get: function() {
+		return normalizeProps;
+	}
+});
+Object.defineProperty(exports, "unrefElement", {
+	enumerable: true,
+	get: function() {
+		return unrefElement;
+	}
+});
+Object.defineProperty(exports, "useEmitAsProps", {
+	enumerable: true,
+	get: function() {
+		return useEmitAsProps;
+	}
+});
+Object.defineProperty(exports, "useForwardExpose", {
+	enumerable: true,
+	get: function() {
+		return useForwardExpose;
+	}
+});
+Object.defineProperty(exports, "useForwardProps", {
+	enumerable: true,
+	get: function() {
+		return useForwardProps;
+	}
+});
+Object.defineProperty(exports, "useForwardPropsEmits", {
+	enumerable: true,
+	get: function() {
+		return useForwardPropsEmits;
+	}
+});
+Object.defineProperty(exports, "useMachine", {
+	enumerable: true,
+	get: function() {
+		return useMachine;
+	}
+});
+Object.defineProperty(exports, "useRenderStrategyProps", {
+	enumerable: true,
+	get: function() {
+		return useRenderStrategyProps;
+	}
+});
+Object.defineProperty(exports, "useSyncExternalStore", {
+	enumerable: true,
+	get: function() {
+		return useSyncExternalStore;
+	}
+});
+Object.defineProperty(exports, "useVModel", {
+	enumerable: true,
+	get: function() {
+		return useVModel;
+	}
+});