x4js 2.3.17 → 2.3.19

package/src/core/core_router.ts

@@ -92,6 +92,23 @@ export function parseRoute(str: string | RegExp, loose = false): Segment {
 	};
 }
 
+/**
+ * the parameters of the url are encoded (%C3%A9): decoded; a lone % is left as it is
+ */
+
+function decode( s: string ) {
+	if( s===undefined ) {
+		return s;		// an optional parameter that is not there
+	}
+
+	try {
+		return decodeURIComponent( s );
+	}
+	catch {
+		return s;
+	}
+}
+
 /**
  * Defines the events that the `Router` can emit.
  */
@@ -144,15 +161,13 @@ export class Router extends EventSource< RouterEvents > {
 			const url = this._getLocation( );
 			const found = this._find(url);
 
-			if( found.handlers.length==0 ) {
+			if( !found ) {
 				console.log( 'route not found: '+url );
 				this.fire( "error", {code: 404, message: "route not found" } );
 				return;
 			}
 
-			found.handlers.forEach(h => {
-				h(found.params,url);
-			});
+			found.handler( found.params, url );
 
 			this.fire( "change", { value: this._getLocation() } );
 		});
@@ -201,7 +216,8 @@ export class Router extends EventSource< RouterEvents > {
 	 * Behavior summary:
 	 * - If no matching route or no handlers are found, logs a message, fires an "error" event with
 	 *   { code: 404, message: "route not found" } and returns false.
-	 * - If notify is true, invokes the first handler of the matched route with (params, uri).
+	 * - If notify is true, invokes the handler of the first route that matches, in the order of get,
+	 *   with (params, path): the params decoded, the path as the back button gives it ("/detail/5").
 	 * - Always fires a "change" event with { value: this._getLocation() } after performing the navigation.
 	 *
 	 * @param uri - Target URI to navigate to. If it does not start with '/', a leading '/' will be added.
@@ -227,7 +243,7 @@ export class Router extends EventSource< RouterEvents > {
 
 		const found = this._find( uri );
 
-		if( !found || found.handlers.length==0 ) {
+		if( !found ) {
 			//window.history.pushState({}, '', 'error')
 			console.log( 'route not found: '+uri );
 			this.fire( "error", {code: 404, message: "route not found" } );
@@ -249,12 +265,9 @@ export class Router extends EventSource< RouterEvents > {
 			window.history.pushState({}, '', uri );
 		}
 
+		// the path as popstate gives it: "/detail/5", encoded as in the address
 		if( notify ) {
-			//found.handlers.forEach( h => {
-			//	h( found.params, uri );
-			//} );
-			
-			found.handlers[0]( found.params, uri );
+			found.handler( found.params, this._getLocation( ) );
 		}
 
 		this.fire( "change", { value: this._getLocation() } );
@@ -262,47 +275,32 @@ export class Router extends EventSource< RouterEvents > {
 	}
 
 	/**
-	 * 
+	 * the first route that matches, in the order of get, and its parameters decoded; null when none
 	 */
 
-	private _find( url: string ): { params: Record<string,any>, handlers: RouteHandler[] } {
-		
-		let matches = [];
-		let params: Record<string,any> = {};
-		let handlers: RouteHandler[] = [];
+	private _find( url: string ): { params: Record<string,any>, handler: RouteHandler } {
 
 		for (const tmp of this.m_routes ) {
-			if (!tmp.keys ) {
-				matches = tmp.pattern.exec(url);
-				if (!matches) {
-					continue;
-				}
-
-				if (matches['groups']) {
-					for (const k in matches['groups']) {
-						params[k] = matches['groups'][k];
-					}
-				}
-
-				handlers = [...handlers, tmp.handler];
-			} 
-			else if (tmp.keys.length > 0) {
-				matches = tmp.pattern.exec(url);
-				if (matches === null) {
-					continue;
-				}
+			const matches = tmp.pattern.exec( url );
+			if( !matches ) {
+				continue;
+			}
 
-				for ( let j = 0; j < tmp.keys.length;) {
-					params[tmp.keys[j]] = matches[++j];
+			const params: Record<string,any> = {};
+			if( !tmp.keys ) {
+				for (const k in matches.groups ) {
+					params[k] = decode( matches.groups[k] );
 				}
-
-				handlers = [...handlers, tmp.handler];
-			} 
-			else if (tmp.pattern.test(url)) {
-				handlers = [...handlers, tmp.handler];
 			}
+			else {
+				tmp.keys.forEach( ( k, j ) => {
+					params[k] = decode( matches[j+1] );
+				} );
+			}
+
+			return { params, handler: tmp.handler };
 		}
 
-		return { params, handlers };
+		return null;
 	}
 }

package/src/core/core_shortcuts.ts

@@ -51,7 +51,7 @@ interface Keys {
 	key: string;
 }
 
-const isMac = typeof navigator!=="undefined" && /mac|iphone|ipad/i.test( navigator.platform ?? "" );
+const isMac = /mac|iphone|ipad/i.test( navigator.platform ?? "" );
 
 /**
  * "Shift+Mod+K" -> shift, ctrl (cmd on a Mac), k

package/src/core/core_state.ts

@@ -75,8 +75,11 @@ function _path_matches( path: string, watched: string ): boolean {
 	return c==='.' || c==='[';
 }
 
+// asked to a proxy of the state, it gives its raw object
+const RAW = Symbol( "raw" );
+
 /**
- * 
+ *
  */
 
 export class StateManager<T extends State> extends EventSource<StateEvents> {
@@ -90,9 +93,11 @@ export class StateManager<T extends State> extends EventSource<StateEvents> {
 	 * - guarantees referential identity: state.user === state.user
 	 * - WeakMap: entries are collected with their objects, and the whole cache is collected with the manager
 	 * - instance-scoped (not module-level) so the same raw object referenced by two different managers never gets a proxy bound to the wrong manager/path
+	 * - a proxy by object, made for the path it was read at: an object moved
+	 *   in an array (shift, sort...) gets a proxy at its new path
 	 */
 
-	private _cache = new WeakMap<object, any>( );
+	private _cache = new WeakMap<object, { path: string, proxy: any }>( );
 
 	constructor( initialState: T ) {
 		super( );
@@ -127,12 +132,17 @@ export class StateManager<T extends State> extends EventSource<StateEvents> {
 	private _mk_proxy( obj: any, path: string ): any {
 
 		const cached = this._cache.get( obj );
-		if( cached ) return cached;
+		if( cached && cached.path===path ) return cached.proxy;
 
 		const proxy = new Proxy( obj, {
 
 			get: ( target, prop, receiver ) => {
 
+				// the raw object, for set
+				if( prop === RAW ) {
+					return target;
+				}
+
 				// symbols (Symbol.iterator, Symbol.toPrimitive, devtools inspection...): 
 				// pass-through, never an error nor a wrap
 				if( typeof prop === "symbol" ) {
@@ -161,9 +171,16 @@ export class StateManager<T extends State> extends EventSource<StateEvents> {
 
 			set: ( target, prop, value, receiver ) => {
 
+				// shift, sort, reverse... read the elements through the proxy and write them
+				// back: the raw object is stored, never a proxy
+				if( value && value[RAW] ) {
+					value = value[RAW];
+				}
+
 				// no notification when the value doesn't change
 				// (avoids noise and listener → set → listener loops)
-				if( Reflect.get( target, prop, receiver ) === value ) {
+				// read without the receiver: through the proxy, an object would be a proxy, never the raw value
+				if( Reflect.get( target, prop ) === value ) {
 					return true;
 				}
 
@@ -191,7 +208,7 @@ export class StateManager<T extends State> extends EventSource<StateEvents> {
 			}
 		});
 
-		this._cache.set( obj, proxy );
+		this._cache.set( obj, { path, proxy } );
 		return proxy;
 	}
 

package/src/x4.d.ts

@@ -15,6 +15,7 @@
  **/
 export * from "./core/component";
 export * from "./core/core_application";
+export * from "./core/core_clipboard";
 export * from "./core/core_colors";
 export * from "./core/core_data";
 export * from "./core/core_dom";

package/src/x4.ts

@@ -16,6 +16,7 @@
 
 export * from "./core/component"
 export * from "./core/core_application"
+export * from "./core/core_clipboard"
 export * from "./core/core_colors"
 export * from "./core/core_data"
 export * from "./core/core_dom"