arc-ux 0.0.11 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arc-ux",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "A purely functional router for independently evaluating a path against a list of routes",
   "main": "src/ArcUX.js",
   "type": "module",

package/src/ArcUX.js

@@ -1,4 +1,4 @@
-import {ArcRouter, ArcEvents, is} from "arc-lib";
+import {ArcRouter, ArcEvents, is, Log} from "arc-lib";
 import {createRoot} from "react-dom/client";
 import React from "react";
 import Html from "./Html.js";
@@ -146,6 +146,22 @@ class ArcUX {
         this.setKeyVal('route', `${this.#rootPath}${_route}`, _suppressEmit);
     }
 
+    pushURI(_newURI, _replace) {
+        const fullHistoryString = decodeURI(_newURI);
+
+        const routeData = this.#RouteRenderer.travel(fullHistoryString)
+        Log.info('Push uri', [fullHistoryString, routeData]);
+        if(routeData.match){
+            this.setKeyVal('route', fullHistoryString, true);
+            this.setKeyVal('routeData', routeData, true);
+        }
+
+        if (_replace) {
+            return window.history.replaceState({ code: fullHistoryString }, "", fullHistoryString);
+        }
+        return window.history.pushState({ code: fullHistoryString }, "", fullHistoryString);
+    }
+
     renderModal(_Modal, _props) {
         this.emit('modal', [_Modal, _props || {}]);
     }

package/src/FrameworkComponents/App.jsx

@@ -24,7 +24,13 @@ class App extends React.Component {
     async componentDidMount() {
         const initialRoute = this.props.ArcUX.getKeyVal('route');
 
-        this.props.ArcUX.emit('log', {message: `Our initial route is ${initialRoute}`})
+        window.onpopstate = (_event) => {
+            if (_event.state) {
+                this.props.ArcUX.loadPage(_event.state.code);
+            }
+        };
+
+        Log.info( `Our initial route is ${initialRoute}`);
         const match = this.props.ArcUX.renderRoute(initialRoute);
         if(match){
             this.setState({
@@ -52,7 +58,7 @@ class App extends React.Component {
         const RoutedComponent = this.state.target;
 
         if(!RoutedComponent){
-            this.props.ArcUX.emit('log', {message: "Could not render anything. No AppLoader. No route matched. No NotFound handler. Returning null."})
+            Log.info("Could not render anything. No AppLoader. No route matched. No NotFound handler. Returning null.")
             return null;
         }
 
@@ -75,10 +81,10 @@ class App extends React.Component {
     }
 
     loadRoute(_newRoute) {
-        this.props.ArcUX.emit('log', [{message: `New route called:`, data: [_newRoute]}])
+        Log.info(`New route called:`, [_newRoute]);
         const match = this.props.ArcUX.renderRoute(_newRoute);
         if(!match){
-            this.props.ArcUX.emit('log', [{message: 'Not Found handler missing'}]);
+            Log.warning(`Not found handler missing`);
             return;
         }
         const fullHistoryString = decodeURI(_newRoute);