fix: history API

packages/rax-simulator-renderer/src/renderer.ts

@@ -5,6 +5,8 @@ import { computed, obx } from '@recore/obx';
 import DriverUniversal from 'driver-universal';
 import { EventEmitter } from 'events';
 // @ts-ignore
+import { createMemoryHistory, MemoryHistory } from 'history';
+// @ts-ignore
 import { ComponentType, createElement, render as raxRender, shared } from 'rax';
 import Leaf from './builtin-components/leaf';
 import Slot from './builtin-components/slot';
@@ -13,9 +15,7 @@ import SimulatorRendererView from './renderer-view';
 import { raxFindDOMNodes } from './utils/find-dom-nodes';
 import { getClientRects } from './utils/get-client-rects';
 import loader from './utils/loader';
-// @ts-ignore
-// import { createMemoryHistory, MemoryHistory } from 'history/umd/history.development';
-import { createMemoryHistory, MemoryHistory } from 'history';
+import { parseQuery, withQueryParams } from './utils/url';
 
 const { Instance } = shared;
 
@@ -289,16 +289,16 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
       utils: {
         router: {
           push(path: string, params?: object) {
-            // history.push(withQueryParams(path, params));
+            history.push(withQueryParams(path, params));
           },
           replace(path: string, params?: object) {
-            // history.replace(withQueryParams(path, params));
+            history.replace(withQueryParams(path, params));
           },
         },
         legaoBuiltins: {
           getUrlParams() {
             const search = history.location.search;
-            // return parseQuery(search);
+            return parseQuery(search);
           }
         }
       },

packages/rax-simulator-renderer/src/utils/url.ts

@@ -0,0 +1,74 @@
+/**
+ * Parse queryString
+ * @param  {String} str '?q=query&b=test'
+ * @return {Object}
+ */
+export function parseQuery(str: string): object {
+  const ret: any = {};
+
+  if (typeof str !== 'string') {
+    return ret;
+  }
+
+  const s = str.trim().replace(/^(\?|#|&)/, '');
+
+  if (!s) {
+    return ret;
+  }
+
+  s.split('&').forEach((param) => {
+    const parts = param.replace(/\+/g, ' ').split('=');
+    let key = parts.shift()!;
+    let val: any = parts.length > 0 ? parts.join('=') : undefined;
+
+    key = decodeURIComponent(key);
+
+    val = val === undefined ? null : decodeURIComponent(val);
+
+    if (ret[key] === undefined) {
+      ret[key] = val;
+    } else if (Array.isArray(ret[key])) {
+      ret[key].push(val);
+    } else {
+      ret[key] = [ret[key], val];
+    }
+  });
+
+  return ret;
+}
+
+/**
+ * Stringify object to query parammeters
+ * @param  {Object} obj
+ * @return {String}
+ */
+export function stringifyQuery(obj: any): string {
+  const param: string[] = [];
+  Object.keys(obj).forEach((key) => {
+    let value = obj[key];
+    if (value && typeof value === 'object') {
+      value = JSON.stringify(value);
+    }
+    param.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
+  });
+  return param.join('&');
+}
+
+export function uriEncode(uri: string) {
+  return encodeURIComponent(uri);
+}
+
+export function uriDecode(uri: string) {
+  return decodeURIComponent(uri);
+}
+
+export function withQueryParams(url: string, params?: object) {
+  const queryStr = params ? stringifyQuery(params) : '';
+  if (queryStr === '') {
+    return url;
+  }
+  const urlSplit = url.split('#');
+  const hash = urlSplit[1] ? `#${urlSplit[1]}` : '';
+  const urlWithoutHash = urlSplit[0];
+  return `${urlWithoutHash}${~urlWithoutHash.indexOf('?') ? '&' : '?'}${queryStr}${hash}`;
+}