@pixui-dev/pxw 0.1.16

package/lib/pika-svelte/transition/index.js

@@ -0,0 +1,185 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var easing = require('../easing/index.js');
+var internal = require('../internal/index.js');
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+	var t = {};
+	for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+	if (s != null && typeof Object.getOwnPropertySymbols === 'function')
+		for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+			if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+		}
+	return t;
+}
+
+function blur(node, { delay = 0, duration = 400, easing: easing$1 = easing.cubicInOut, amount = 5, opacity = 0 } = {}) {
+	const style = getComputedStyle(node);
+	const target_opacity = +style.opacity;
+	const f = style.filter === 'none' ? '' : style.filter;
+	const od = target_opacity * (1 - opacity);
+	return {
+		delay,
+		duration,
+		easing: easing$1,
+		css: (_t, u) => `opacity: ${target_opacity - od * u}; filter: ${f} blur(${u * amount}px);`,
+	};
+}
+function fade(node, { delay = 0, duration = 400, easing: easing$1 = easing.linear } = {}) {
+	const o = +getComputedStyle(node).opacity;
+	return {
+		delay,
+		duration,
+		easing: easing$1,
+		css: (t) => `opacity: ${t * o}`,
+	};
+}
+function fly(node, { delay = 0, duration = 400, easing: easing$1 = easing.cubicOut, x = 0, y = 0, opacity = 0 } = {}) {
+	const style = getComputedStyle(node);
+	const target_opacity = +style.opacity;
+	const transform = style.transform === 'none' ? '' : style.transform;
+	const od = target_opacity * (1 - opacity);
+	return {
+		delay,
+		duration,
+		easing: easing$1,
+		css: (t, u) => `
+			transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
+			opacity: ${target_opacity - od * u}`,
+	};
+}
+function slide(node, { delay = 0, duration = 400, easing: easing$1 = easing.cubicOut } = {}) {
+	const style = getComputedStyle(node);
+	const opacity = +style.opacity;
+	const height = parseFloat(style.height);
+	const padding_top = parseFloat(style.paddingTop);
+	const padding_bottom = parseFloat(style.paddingBottom);
+	const margin_top = parseFloat(style.marginTop);
+	const margin_bottom = parseFloat(style.marginBottom);
+	const border_top_width = parseFloat(style.borderTopWidth);
+	const border_bottom_width = parseFloat(style.borderBottomWidth);
+	return {
+		delay,
+		duration,
+		easing: easing$1,
+		css: (t) =>
+			'overflow: hidden;' +
+			`opacity: ${Math.min(t * 20, 1) * opacity};` +
+			`height: ${t * height}px;` +
+			`padding-top: ${t * padding_top}px;` +
+			`padding-bottom: ${t * padding_bottom}px;` +
+			`margin-top: ${t * margin_top}px;` +
+			`margin-bottom: ${t * margin_bottom}px;` +
+			`border-top-width: ${t * border_top_width}px;` +
+			`border-bottom-width: ${t * border_bottom_width}px;`,
+	};
+}
+function scale(node, { delay = 0, duration = 400, easing: easing$1 = easing.cubicOut, start = 0, opacity = 0 } = {}) {
+	const style = getComputedStyle(node);
+	const target_opacity = +style.opacity;
+	const transform = style.transform === 'none' ? '' : style.transform;
+	const sd = 1 - start;
+	const od = target_opacity * (1 - opacity);
+	return {
+		delay,
+		duration,
+		easing: easing$1,
+		css: (_t, u) => `
+			transform: ${transform} scale(${1 - sd * u});
+			opacity: ${target_opacity - od * u}
+		`,
+	};
+}
+function draw(node, { delay = 0, speed, duration, easing: easing$1 = easing.cubicInOut } = {}) {
+	const len = node.getTotalLength();
+	if (duration === undefined) {
+		if (speed === undefined) {
+			duration = 800;
+		}
+		else {
+			duration = len / speed;
+		}
+	}
+	else if (typeof duration === 'function') {
+		duration = duration(len);
+	}
+	return {
+		delay,
+		duration,
+		easing: easing$1,
+		css: (t, u) => `stroke-dasharray: ${t * len} ${u * len}`,
+	};
+}
+function crossfade(_a) {
+	var { fallback } = _a,
+		defaults = __rest(_a, ['fallback']);
+	const to_receive = new Map();
+	const to_send = new Map();
+	function crossfade(from, node, params) {
+		const { delay = 0, duration = (d) => Math.sqrt(d) * 30, easing: easing$1 = easing.cubicOut } = internal.assign(internal.assign({}, defaults), params);
+		const to = node.getBoundingClientRect();
+		const dx = from.left - to.left;
+		const dy = from.top - to.top;
+		const dw = from.width / to.width;
+		const dh = from.height / to.height;
+		const d = Math.sqrt(dx * dx + dy * dy);
+		const style = getComputedStyle(node);
+		const transform = style.transform === 'none' ? '' : style.transform;
+		const opacity = +style.opacity;
+		return {
+			delay,
+			duration: internal.is_function(duration) ? duration(d) : duration,
+			easing: easing$1,
+			css: (t, u) => `
+				opacity: ${t * opacity};
+				transform-origin: top left;
+				transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1 - t) * dw}, ${t + (1 - t) * dh});
+			`,
+		};
+	}
+	function transition(items, counterparts, intro) {
+		return (node, params) => {
+			items.set(params.key, {
+				rect: node.getBoundingClientRect(),
+			});
+			return () => {
+				if (counterparts.has(params.key)) {
+					const { rect } = counterparts.get(params.key);
+					counterparts.delete(params.key);
+					return crossfade(rect, node, params);
+				}
+				// if the node is disappearing altogether
+				// (i.e. wasn't claimed by the other list)
+				// then we need to supply an outro
+				items.delete(params.key);
+				return fallback && fallback(node, params, intro);
+			};
+		};
+	}
+	return [transition(to_send, to_receive, false), transition(to_receive, to_send, true)];
+}
+
+exports.blur = blur;
+exports.crossfade = crossfade;
+exports.draw = draw;
+exports.fade = fade;
+exports.fly = fly;
+exports.scale = scale;
+exports.slide = slide;

package/lib/preact-router.js

@@ -0,0 +1,395 @@
+import { Component, toChildArray, cloneElement, createElement } from 'preact';
+import {
+	subscribers as subscribers$1,
+	getCurrentUrl as getCurrentUrl$1,
+	exec as exec$1,
+	Link as Link$2,
+} from './preact-router';
+
+const EMPTY$1 = {};
+function assign(obj, props) {
+	// eslint-disable-next-line guard-for-in
+	for (let i in props) {
+		obj[i] = props[i];
+	}
+	return obj;
+}
+function exec(url, route, opts) {
+	// console.log('exec',url,route);
+	if (url == route) return {};
+	if (url.startsWith(route)) return {};
+	let reg = /(?:\?([^#]*))?(#.*)?$/,
+		c = url.match(reg),
+		matches = {},
+		ret;
+	if (c && c[1]) {
+		let p = c[1].split('&');
+		for (let i = 0; i < p.length; i++) {
+			let r = p[i].split('=');
+			matches[decodeURIComponent(r[0])] = decodeURIComponent(
+				r.slice(1).join('=')
+			);
+		}
+	}
+	url = segmentize(url.replace(reg, ''));
+	route = segmentize(route || '');
+	let max = Math.min(url.length, route.length);
+	if (route.length > url.length) max = route.length;
+	for (let i = 0; i < max; i++) {
+		if (route[i] && route[i].charAt(0) === ':') {
+			let param = route[i].replace(/(^:|[+*?]+$)/g, ''),
+				flags = (route[i].match(/[+*?]+$/) || EMPTY$1)[0] || '',
+				plus = ~flags.indexOf('+'),
+				star = ~flags.indexOf('*'),
+				val = url[i] || '';
+			if (!val && !star && (flags.indexOf('?') < 0 || plus)) {
+				ret = false;
+				break;
+			}
+			matches[param] = decodeURIComponent(val);
+			if (plus || star) {
+				matches[param] = url.slice(i).map(decodeURIComponent).join('/');
+				break;
+			}
+		}
+		else if (route[i] !== url[i]) {
+			ret = false;
+			break;
+		}
+	}
+	// console.log('exec',url,route,opts,ret);
+	if (opts.default !== true && ret === false) return false;
+	return matches;
+}
+function pathRankSort(a, b) {
+	return a.rank < b.rank ? 1 : a.rank > b.rank ? -1 : a.index - b.index;
+}
+
+// filter out VNodes without attributes (which are unrankeable), and add `index`/`rank` properties to be used in sorting.
+function prepareVNodeForRanking(vnode, index) {
+	vnode.index = index;
+	vnode.rank = rankChild(vnode);
+	return vnode.props;
+}
+function segmentize(url) {
+	return url.replace(/(^\/+|\/+$)/g, '').split('/');
+}
+function rankSegment(segment) {
+	return segment.charAt(0) == ':'
+		? 1 + '*+?'.indexOf(segment.charAt(segment.length - 1)) || 4
+		: 5;
+}
+function rank(path) {
+	return segmentize(path).map(rankSegment).join('');
+}
+function rankChild(vnode) {
+	return vnode.props.default ? 0 : rank(vnode.props.path);
+}
+
+function _extends() {
+	_extends = Object.assign
+		? Object.assign.bind()
+		: function (target) {
+			for (var i = 1; i < arguments.length; i++) {
+				var source = arguments[i];
+				for (var key in source) {
+					if (Object.prototype.hasOwnProperty.call(source, key)) {
+						target[key] = source[key];
+					}
+				}
+			}
+			return target;
+		};
+	return _extends.apply(this, arguments);
+}
+
+class Match extends Component {
+	componentDidMount() {
+		this.update = (url) => {
+			this.nextUrl = url;
+			this.setState({});
+		};
+		subscribers$1.push(this.update);
+	}
+	componentWillUnmount() {
+		subscribers$1.splice(subscribers$1.indexOf(this.update) >>> 0, 1);
+	}
+	render(props) {
+		let url = this.nextUrl || getCurrentUrl$1(),
+			path = url.replace(/\?.+$/, '');
+		this.nextUrl = null;
+		// console.log('match',path,props.path);
+		return props.children({
+			url,
+			path,
+			matches: exec$1(path, props.path, {}) !== false,
+		});
+	}
+}
+const Link$1 = ({ activeClassName, path, ...props }) =>
+/*#__PURE__*/ React.createElement(
+		Match,
+		{
+			path: path || props.href,
+		},
+		({ matches }) => {
+			let cls = [props.class || props.className, matches && activeClassName]
+				.filter(Boolean)
+				.join(' ');
+			// console.log('link cls',activeClassName,matches,props);
+			return /*#__PURE__*/ React.createElement(
+				Link$2,
+				_extends({}, props, {
+					className: cls,
+				})
+			);
+		}
+	);
+
+let customHistory = null;
+const ROUTERS = [];
+const subscribers = [];
+const EMPTY = {};
+function setUrl(url, type = 'push') {
+	if (customHistory && customHistory[type]) {
+		customHistory[type](url);
+	}
+	else if (typeof history !== 'undefined' && history[type + 'State']) {
+		// console.log('---------------', type);
+		history[type + 'State'](null, null, url);
+	}
+	else;
+}
+function getCurrentUrl() {
+	let url;
+	if (customHistory && customHistory.location) {
+		url = customHistory.location;
+	}
+	else if (customHistory && customHistory.getCurrentLocation) {
+		url = customHistory.getCurrentLocation();
+	}
+	else {
+		url = typeof location !== 'undefined' ? location : EMPTY;
+	}
+	return url.href;
+	// return `${url.pathname || ''}${url.search || ''}`;
+}
+function route(url, replace = false) {
+	if (typeof url !== 'string' && url.url) {
+		replace = url.replace;
+		url = url.url;
+	}
+
+	// only push URL into history if we can handle it
+	if (canRoute(url)) {
+		setUrl(url, replace ? 'replace' : 'push');
+	}
+	return routeTo(url);
+}
+
+/** Check if the given URL can be handled by any router instances. */
+function canRoute(url) {
+	for (let i = ROUTERS.length; i--; ) {
+		if (ROUTERS[i].canRoute(url)) return true;
+	}
+	return false;
+}
+
+/** Tell all router instances to handle the given URL.  */
+function routeTo(url) {
+	let didRoute = false;
+	for (let i = 0; i < ROUTERS.length; i++) {
+		if (ROUTERS[i].routeTo(url) === true) {
+			didRoute = true;
+		}
+	}
+	for (let i = subscribers.length; i--; ) {
+		subscribers[i](url);
+	}
+	return didRoute;
+}
+function routeFromLink(node) {
+	// only valid elements
+	if (!node || !node.getAttribute) return;
+	let href = node.getAttribute('href'),
+		target = node.getAttribute('target');
+
+	// ignore links with targets and non-path URLs
+	if (!href || (target && !target.match(/^_?self$/i))) {
+		console.log('bypass routeFromLink', href, target);
+		return;
+	}
+
+	// attempt to route, if no match simply cede control to browser
+	return route(href);
+}
+function handleLinkClick(e) {
+	if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey || e.button !== 0) {
+		console.log('bypass handleLinkClick', e.button);
+		return;
+	}
+	routeFromLink(e.currentTarget || e.target || this);
+	return prevent(e);
+}
+function prevent(e) {
+	if (e) {
+		if (e.stopImmediatePropagation) e.stopImmediatePropagation();
+		if (e.stopPropagation) e.stopPropagation();
+		e.preventDefault();
+	}
+	return false;
+}
+function delegateLinkHandler(e) {
+	// console.log('delegateLinkHandler',e.button,e.target.nodeName);
+	// ignore events the browser takes care of already:
+	if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey || e.button !== 0)
+		return;
+	let t = e.target;
+	do {
+		if (String(t.nodeName).toUpperCase() === 'A' && t.getAttribute('href')) {
+			if (t.hasAttribute('native')) return;
+			// if link is handled by the router, prevent browser defaults
+			if (routeFromLink(t)) {
+				return prevent(e);
+			}
+		}
+	} while ((t = t.parentNode));
+}
+let eventListenersInitialized = false;
+function initEventListeners() {
+	if (eventListenersInitialized) return;
+	if (typeof addEventListener === 'function') {
+		if (!customHistory) {
+			addEventListener('popstate', () => {
+				routeTo(getCurrentUrl());
+			});
+		}
+		addEventListener('click', delegateLinkHandler);
+	}
+	eventListenersInitialized = true;
+}
+class Router extends Component {
+	constructor(props) {
+		super(props);
+		if (props.history) {
+			customHistory = props.history;
+		}
+		this.state = {
+			url: props.url || getCurrentUrl(),
+		};
+		initEventListeners();
+	}
+	shouldComponentUpdate(props) {
+		if (props.static !== true) return true;
+		return (
+			props.url !== this.props.url || props.onChange !== this.props.onChange
+		);
+	}
+
+	/** Check if the given URL can be matched against any children */
+	canRoute(url) {
+		const children = toChildArray(this.props.children);
+		return this.getMatchingChildren(children, url, false).length > 0;
+	}
+
+	/** Re-render children with a new URL to match against. */
+	routeTo(url) {
+		this.setState({
+			url,
+		});
+		const didRoute = this.canRoute(url);
+
+		// trigger a manual re-route if we're not in the middle of an update:
+		if (!this.updating) this.forceUpdate();
+		return didRoute;
+	}
+	componentWillMount() {
+		ROUTERS.push(this);
+		this.updating = true;
+	}
+	componentDidMount() {
+		if (customHistory) {
+			this.unlisten = customHistory.listen((location) => {
+				this.routeTo(`${location.pathname || ''}${location.search || ''}`);
+			});
+		}
+		this.updating = false;
+	}
+	componentWillUnmount() {
+		if (typeof this.unlisten === 'function') this.unlisten();
+		ROUTERS.splice(ROUTERS.indexOf(this), 1);
+	}
+	componentWillUpdate() {
+		this.updating = true;
+	}
+	componentDidUpdate() {
+		this.updating = false;
+	}
+	getMatchingChildren(children, url, invoke) {
+		return children
+			.filter(prepareVNodeForRanking)
+			.sort(pathRankSort)
+			.map((vnode) => {
+				let matches = exec(url, vnode.props.path, vnode.props);
+				// console.log('match children1',url,JSON.stringify(matches));
+				if (matches) {
+					if (invoke !== false) {
+						let newProps = {
+							url,
+							matches,
+						};
+						assign(newProps, matches);
+						delete newProps.ref;
+						delete newProps.key;
+						// console.log('match children2',vnode,newProps);
+						return cloneElement(vnode, newProps);
+					}
+					return vnode;
+				}
+			})
+			.filter(Boolean);
+	}
+	render({ children, onChange }, { url }) {
+		let active = this.getMatchingChildren(toChildArray(children), url, true);
+		// console.log('Router render', url, active);
+		let current = active[0] || null;
+		let previous = this.previousUrl;
+		if (url !== previous) {
+			this.previousUrl = url;
+			if (typeof onChange === 'function') {
+				onChange({
+					router: this,
+					url,
+					previous,
+					active,
+					current,
+				});
+			}
+		}
+		return current;
+	}
+}
+const Link = (props) =>
+	createElement(
+		'a',
+		assign(
+			{
+				onClick: handleLinkClick,
+			},
+			props
+		)
+	);
+const Route = (props) => createElement(props.component, props);
+
+export {
+	Link,
+	Match,
+	Link$1 as Mlink,
+	Route,
+	Router,
+	Router as default,
+	exec,
+	getCurrentUrl,
+	route,
+	subscribers,
+};