@stackflow/plugin-history-sync - npm Package Compare versions

Comparing version 0.1.1-alpha.164 to 0.1.1-alpha.172

dist/index.js

@@ -1,2 +0,221 @@
-var G=Object.create;var f=Object.defineProperty,U=Object.defineProperties,b=Object.getOwnPropertyDescriptor,L=Object.getOwnPropertyDescriptors,O=Object.getOwnPropertyNames,w=Object.getOwnPropertySymbols,R=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var P=(t,e,n)=>e in t?f(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,l=(t,e)=>{for(var n in e||(e={}))T.call(e,n)&&P(t,n,e[n]);if(w)for(var n of w(e))M.call(e,n)&&P(t,n,e[n]);return t},g=(t,e)=>U(t,L(e));var $=(t,e)=>{for(var n in e)f(t,n,{get:e[n],enumerable:!0})},k=(t,e,n,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of O(e))!T.call(t,a)&&a!==n&&f(t,a,{get:()=>e[a],enumerable:!(i=b(e,a))||i.enumerable});return t};var x=(t,e,n)=>(n=t!=null?G(R(t)):{},k(e||!t||!t.__esModule?f(n,"default",{value:t,enumerable:!0}):n,t)),D=t=>k(f({},"__esModule",{value:!0}),t);var V={};$(V,{historySyncPlugin:()=>Q});module.exports=D(V);var d=require("@stackflow/core");var E=x(require("url-pattern"));function j(t){return new URL(t,"file://")}function C(t){let e={};return t.forEach((n,i)=>{e[i]=n}),e}function H(t){return t.endsWith("/")?t:`${t}/`}function q(t){return t.toString().length>0?`?${t}`:t}function m(t){let e=new E.default(`${t}(/)`);return{fill(n){let i=e.stringify(n),a=e.match(i),r=l({},n);Object.keys(a).forEach(y=>{delete r[y]});let c=new URLSearchParams(r);return H(i)+q(c)},parse(n){let i=j(n),a=e.match(i.pathname),r=C(i.searchParams);return a?l(l({},r),a):null}}}var S="@stackflow/plugin-history-sync@0.1.0",F=1e3,A=60*F;function v(t){let e=t;return typeof e=="object"&&e!==null&&"_TAG"in e&&typeof e._TAG=="string"&&e._TAG===S?t:null}function K(t,e){window.history.pushState(t,"",e)}function I(t,e){window.history.replaceState(t,"",e)}function Q(t){return({context:e})=>{let n=!1,i=null;return{key:"historySync",initialPushedEvent(){var y;let a=v(window.history.state);if(a)return g(l({},a.activity.pushedBy),{name:"Pushed"});let r=(y=e==null?void 0:e.req)!=null&&y.path?e.req.path:typeof window!="undefined"?window.location.pathname+window.location.search:null;if(!r)return null;let c=Object.keys(t.routes);for(let p=0;p<c.length;p+=1){let h=c[p],u=m(t.routes[h]).parse(r);if(u)return(0,d.makeEvent)("Pushed",{activityId:(0,d.id)(),activityName:h,params:u,eventDate:new Date().getTime()-A})}return(0,d.makeEvent)("Pushed",{activityId:(0,d.id)(),activityName:t.fallbackActivity({context:e}),params:{},eventDate:new Date().getTime()-A})},onInit({actions:{getState:a,dispatchEvent:r}}){let c=a().activities[0],y=m(t.routes[c.name]);I({_TAG:S,activity:c},y.fill(c.params));let p=h=>{let o=v(h.state);if(!o)return;let{activities:u}=a(),s=u.find(B=>B.id===o.activity.pushedBy.activityId),N=!s&&o.activity.pushedBy.activityId<u[0].id||(s==null?void 0:s.transitionState)==="enter-active"||(s==null?void 0:s.transitionState)==="enter-done",_=!s&&o.activity.pushedBy.activityId>u[u.length-1].id||(s==null?void 0:s.transitionState)==="exit-active"||(s==null?void 0:s.transitionState)==="exit-done";N&&(r("Popped",{}),s||(n=!0,r("Pushed",l({},o.activity.pushedBy)))),_&&(n=!0,r("Pushed",{activityId:o.activity.pushedBy.activityId,activityName:o.activity.pushedBy.activityName,params:o.activity.pushedBy.params}))};i==null||i(),window.addEventListener("popstate",p),i=()=>{window.removeEventListener("popstate",p)}},onPushed({effect:{activity:a}}){if(n){n=!1;return}let r=m(t.routes[a.name]);K({_TAG:S,activity:a},r.fill(a.params))},onReplaced({effect:{activity:a}}){let r=m(t.routes[a.name]);I({_TAG:S,activity:a},r.fill(a.params))},onBeforePop({actions:{preventDefault:a}}){a();do window.history.back();while(!v(window.history.state))}}}}
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  historySyncPlugin: () => historySyncPlugin
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/historySyncPlugin.tsx
+var import_core = require("@stackflow/core");
+
+// src/makeTemplate.ts
+var import_url_pattern = __toESM(require("url-pattern"));
+function pathToUrl(path) {
+  return new URL(path, "file://");
+}
+function urlSearchParamsToMap(urlSearchParams) {
+  const map = {};
+  urlSearchParams.forEach((value, key) => {
+    map[key] = value;
+  });
+  return map;
+}
+function appendTrailingSlashInPathname(pathname) {
+  if (pathname.endsWith("/")) {
+    return pathname;
+  }
+  return `${pathname}/`;
+}
+function prependQuestionMarkInSearchParams(searchParams) {
+  const searchParamsStr = searchParams.toString();
+  if (searchParamsStr.length > 0) {
+    return `?${searchParams}`;
+  }
+  return searchParams;
+}
+function makeTemplate(templateStr) {
+  const pattern = new import_url_pattern.default(`${templateStr}(/)`);
+  return {
+    fill(params) {
+      var _a;
+      const pathname = pattern.stringify(params);
+      const pathParams = (_a = pattern.match(pathname)) != null ? _a : {};
+      const searchParamsMap = __spreadValues({}, params);
+      Object.keys(pathParams).forEach((key) => {
+        delete searchParamsMap[key];
+      });
+      const searchParams = new URLSearchParams(searchParamsMap);
+      return appendTrailingSlashInPathname(pathname) + prependQuestionMarkInSearchParams(searchParams);
+    },
+    parse(path) {
+      const url = pathToUrl(path);
+      const pathParams = pattern.match(url.pathname);
+      const searchParams = urlSearchParamsToMap(url.searchParams);
+      if (!pathParams) {
+        return null;
+      }
+      return __spreadValues(__spreadValues({}, searchParams), pathParams);
+    }
+  };
+}
+
+// src/historySyncPlugin.tsx
+var STATE_TAG = `${"@stackflow/plugin-history-sync"}@${"0.1.0"}`;
+var SECOND = 1e3;
+var MINUTE = 60 * SECOND;
+function parseState(state) {
+  const _state = state;
+  if (typeof _state === "object" && _state !== null && "_TAG" in _state && typeof _state._TAG === "string" && _state._TAG === STATE_TAG) {
+    return state;
+  }
+  return null;
+}
+function pushState(state, url) {
+  window.history.pushState(state, "", url);
+}
+function replaceState(state, url) {
+  window.history.replaceState(state, "", url);
+}
+function historySyncPlugin(options) {
+  return ({ context }) => {
+    let pushFlag = false;
+    let onPopStateDisposer = null;
+    return {
+      key: "historySync",
+      initialPushedEvent() {
+        var _a;
+        const initHistoryState = parseState(window.history.state);
+        if (initHistoryState) {
+          return __spreadProps(__spreadValues({}, initHistoryState.activity.pushedBy), {
+            name: "Pushed"
+          });
+        }
+        const path = ((_a = context == null ? void 0 : context.req) == null ? void 0 : _a.path) ? context.req.path : typeof window !== "undefined" ? window.location.pathname + window.location.search : null;
+        if (!path) {
+          return null;
+        }
+        const activityNames = Object.keys(options.routes);
+        for (let i = 0; i < activityNames.length; i += 1) {
+          const activityName = activityNames[i];
+          const template = makeTemplate(options.routes[activityName]);
+          const params = template.parse(path);
+          if (params) {
+            return (0, import_core.makeEvent)("Pushed", {
+              activityId: (0, import_core.id)(),
+              activityName,
+              params,
+              eventDate: new Date().getTime() - MINUTE
+            });
+          }
+        }
+        return (0, import_core.makeEvent)("Pushed", {
+          activityId: (0, import_core.id)(),
+          activityName: options.fallbackActivity({ context }),
+          params: {},
+          eventDate: new Date().getTime() - MINUTE
+        });
+      },
+      onInit({ actions: { getState, dispatchEvent } }) {
+        const rootActivity = getState().activities[0];
+        const template = makeTemplate(options.routes[rootActivity.name]);
+        replaceState({
+          _TAG: STATE_TAG,
+          activity: rootActivity
+        }, template.fill(rootActivity.params));
+        const onPopState = (e) => {
+          const historyState = parseState(e.state);
+          if (!historyState) {
+            return;
+          }
+          const { activities } = getState();
+          const targetActivity = activities.find((activity) => activity.id === historyState.activity.pushedBy.activityId);
+          const isBackward = !targetActivity && historyState.activity.pushedBy.activityId < activities[0].id || (targetActivity == null ? void 0 : targetActivity.transitionState) === "enter-active" || (targetActivity == null ? void 0 : targetActivity.transitionState) === "enter-done";
+          const isForward = !targetActivity && historyState.activity.pushedBy.activityId > activities[activities.length - 1].id || (targetActivity == null ? void 0 : targetActivity.transitionState) === "exit-active" || (targetActivity == null ? void 0 : targetActivity.transitionState) === "exit-done";
+          if (isBackward) {
+            dispatchEvent("Popped", {});
+            if (!targetActivity) {
+              pushFlag = true;
+              dispatchEvent("Pushed", __spreadValues({}, historyState.activity.pushedBy));
+            }
+          }
+          if (isForward) {
+            pushFlag = true;
+            dispatchEvent("Pushed", {
+              activityId: historyState.activity.pushedBy.activityId,
+              activityName: historyState.activity.pushedBy.activityName,
+              params: historyState.activity.pushedBy.params
+            });
+          }
+        };
+        onPopStateDisposer == null ? void 0 : onPopStateDisposer();
+        window.addEventListener("popstate", onPopState);
+        onPopStateDisposer = () => {
+          window.removeEventListener("popstate", onPopState);
+        };
+      },
+      onPushed({ effect: { activity } }) {
+        if (pushFlag) {
+          pushFlag = false;
+          return;
+        }
+        const template = makeTemplate(options.routes[activity.name]);
+        pushState({
+          _TAG: STATE_TAG,
+          activity
+        }, template.fill(activity.params));
+      },
+      onReplaced({ effect: { activity } }) {
+        const template = makeTemplate(options.routes[activity.name]);
+        replaceState({
+          _TAG: STATE_TAG,
+          activity
+        }, template.fill(activity.params));
+      },
+      onBeforePop({ actions: { preventDefault } }) {
+        preventDefault();
+        do {
+          window.history.back();
+        } while (!parseState(window.history.state));
+      }
+    };
+  };
+}
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@stackflow/plugin-history-sync",
-  "version": "0.1.1-alpha.164+73076db",
+  "version": "0.1.1-alpha.172+f372be6",
   "license": "Apache-2.0",
@@ -30,4 +30,4 @@ "exports": {
   "devDependencies": {
-    "@stackflow/core": "^0.1.1-alpha.164+73076db",
-    "@stackflow/esbuild-config": "^0.1.1-alpha.164+73076db",
+    "@stackflow/core": "^0.1.1-alpha.172+f372be6",
+    "@stackflow/esbuild-config": "^0.1.1-alpha.172+f372be6",
     "@types/react": "^18.0.10",
@@ -54,3 +54,3 @@ "react": "^18.1.0",
   },
-  "gitHead": "73076db6cd02ee5db769db240fcc59c01b8d3984"
+  "gitHead": "f372be6903b87738dabf3d0d50f85da26d5419b8"
 }

src/makeTemplate.ts

@@ -39,3 +39,3 @@ import UrlPattern from "url-pattern";
       const pathname = pattern.stringify(params);
-      const pathParams = pattern.match(pathname);
+      const pathParams = pattern.match(pathname) ?? {};
 
@@ -42,0 +42,0 @@ const searchParamsMap = { ...params };

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

58298

increased by21.83%

Lines of code

663

increased by139.35%

Number of low quality alerts

2

decreased by-33.33%

No dependency changes