arc-ux 0.0.10 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arc-ux",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "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

@@ -146,6 +146,14 @@ class ArcUX {
         this.setKeyVal('route', `${this.#rootPath}${_route}`, _suppressEmit);
     }
 
+    pushURI(_newURI, _replace) {
+        const fullHistoryString = decodeURI(_newURI);
+        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/Form.js

@@ -29,6 +29,7 @@ class Form {
         this.#form[_name] = _value;
         this.#validChecks[_name] = _isValid;
         this.emit('change', [this]);
+        this.emit(_name, [_value, _isValid, this]);
     }
 
     modifyField(_name, _value) {

package/src/FrameworkComponents/App.jsx

@@ -24,6 +24,12 @@ class App extends React.Component {
     async componentDidMount() {
         const initialRoute = this.props.ArcUX.getKeyVal('route');
 
+        window.onpopstate = (_event) => {
+            if (_event.state) {
+                this.props.ArcUX.loadPage(_event.state.code);
+            }
+        };
+
         this.props.ArcUX.emit('log', {message: `Our initial route is ${initialRoute}`})
         const match = this.props.ArcUX.renderRoute(initialRoute);
         if(match){