@lemon-fe/mini-app 0.0.2

package/README.md

@@ -0,0 +1,11 @@
+# `app`
+
+> TODO: description
+
+## Usage
+
+```
+const app = require('app');
+
+// TODO: DEMONSTRATE API
+```

package/es/components/AppContainer/index.css

@@ -0,0 +1,20 @@
+.lemon-routes {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.lemon-transition-enter {
+  transform: translate3d(100%, 0, 0);
+}
+
+.lemon-transition-enter-active {
+  transform: translate3d(0, 0, 0);
+  box-shadow: 0 0 20px #eee;
+}
+
+.lemon-transition-exit {
+  transform: translate3d(100%, 0, 0);
+  box-shadow: 0 0 20px #eee;
+}

package/es/components/AppContainer/index.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import type { NavigationStackScreen } from '../../typings';
+import './index.css';
+interface Props {
+    pages: NavigationStackScreen[];
+    children?: ReactElement | null;
+}
+declare function App(props: Props): JSX.Element;
+export default App;

package/es/components/AppContainer/index.js

@@ -0,0 +1,143 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { cloneElement, useCallback, useEffect, useMemo, useState } from 'react';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { parsePath } from '../../utils/path';
+import { NavigationContext } from '../../context';
+import Screen from '../Screen';
+import { GO_BACK } from '../../constants';
+import './index.css';
+
+function App(props) {
+  var pages = props.pages,
+      children = props.children;
+
+  var _useState = useState({
+    routes: [{
+      route: pages[0]
+    }]
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var navigate = useCallback(function (path) {
+    setState(function (prev) {
+      var routes = prev.routes;
+
+      var _parsePath = parsePath(path),
+          pathname = _parsePath.pathname,
+          search = _parsePath.search;
+
+      var params = search ? Object.fromEntries(Array.from(new URLSearchParams(search).entries())) : undefined;
+      var routeIndex = routes.findIndex(function (item) {
+        return item.route.path === pathname;
+      });
+
+      if (routeIndex >= 0) {
+        var nextRoutes = routes.slice(0, routeIndex + 1);
+        nextRoutes[routeIndex] = _objectSpread(_objectSpread({}, routes[routeIndex]), {}, {
+          params: params
+        });
+        return {
+          routes: nextRoutes
+        };
+      }
+
+      var page = pages.find(function (item) {
+        return item.path === pathname;
+      });
+
+      if (page !== undefined) {
+        var _nextRoutes = _toConsumableArray(routes);
+
+        _nextRoutes.push({
+          route: page,
+          params: params
+        });
+
+        return {
+          routes: _nextRoutes
+        };
+      }
+
+      return prev;
+    });
+  }, []);
+  var goBack = useCallback(function () {
+    setState(function (prev) {
+      var _window$ReactNativeWe;
+
+      var nextRoutes = _toConsumableArray(prev.routes);
+
+      if (nextRoutes.length > 1) {
+        nextRoutes.pop();
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          routes: nextRoutes
+        });
+      }
+
+      (_window$ReactNativeWe = window.ReactNativeWebView) === null || _window$ReactNativeWe === void 0 ? void 0 : _window$ReactNativeWe.postMessage(GO_BACK);
+      return prev;
+    });
+  }, []);
+  useEffect(function () {
+    var _window$mini;
+
+    return (_window$mini = window.mini) === null || _window$mini === void 0 ? void 0 : _window$mini.addListener(function (e) {
+      if (e === GO_BACK) {
+        goBack();
+      }
+    });
+  }, [goBack]);
+  var ctx = useMemo(function () {
+    return {
+      navigation: {
+        navigate: navigate,
+        goBack: goBack
+      }
+    };
+  }, [navigate, goBack]);
+  var screens = /*#__PURE__*/React.createElement(TransitionGroup, {
+    className: "lemon-routes"
+  }, state.routes.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(CSSTransition, {
+      key: item.route.path,
+      timeout: 300,
+      classNames: "lemon-transition"
+    }, /*#__PURE__*/React.createElement(Screen, {
+      route: item.route,
+      params: item.params,
+      index: index
+    }));
+  }));
+  return /*#__PURE__*/React.createElement(NavigationContext.Provider, {
+    value: ctx
+  }, children ? /*#__PURE__*/cloneElement(children, {}, screens) : screens);
+}
+
+export default App;

package/es/components/Screen/index.css

@@ -0,0 +1,40 @@
+.lemon-route {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0; 
+  background-color: #fff;
+  transition: transform 300ms;
+}
+
+.lemon-route-header-content {
+  position: relative;
+  height: 44px;
+}
+
+.lemon-route-header-left {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  padding-left: 15px;
+  line-height: 1;
+}
+
+.lemon-route-header-center {
+  font-weight: bold;
+  font-size: 16px;
+  color: #333;
+  text-align: center;
+  line-height: 44px;
+}
+
+.lemon-route-body {
+  flex: 1;
+  min-height: 0;
+}

package/es/components/Screen/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { NavigationStackScreen } from '../../typings';
+import './index.css';
+interface Props {
+    route: NavigationStackScreen;
+    params?: Record<string, any>;
+    index: number;
+}
+declare function Screen(props: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Screen>;
+export default _default;

package/es/components/Screen/index.js

@@ -0,0 +1,52 @@
+import React, { createElement, memo, useMemo } from 'react';
+import { ScreenContext } from '../../context';
+import { useNavigation } from '../../hooks';
+import { mini } from '../../global';
+import './index.css';
+
+function Screen(props) {
+  var route = props.route,
+      params = props.params,
+      index = props.index;
+  var ctx = useMemo(function () {
+    return {
+      params: params
+    };
+  }, [params]);
+  var statusBarHeight = useMemo(function () {
+    return mini.getSystemInfoSync().statusBarHeight;
+  }, []);
+  var navigation = useNavigation();
+  return /*#__PURE__*/React.createElement(ScreenContext.Provider, {
+    value: ctx
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "lemon-route"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "lemon-route-header",
+    style: {
+      paddingTop: statusBarHeight
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "lemon-route-header-content"
+  }, index > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "lemon-route-header-left",
+    onClick: function onClick() {
+      return navigation.goBack();
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "12",
+    height: "22",
+    viewBox: "0 0 23 41",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "m23.002 38-2.556 2.5L.713 21.2a.975.975 0 0 1 0-1.4L20.446.5 23.002 3 5.109 20.5 23.002 38Z",
+    fill: "#333",
+    fillRule: "evenodd"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "lemon-route-header-center"
+  }, route.title))), /*#__PURE__*/React.createElement("div", {
+    className: "lemon-route-body"
+  }, /*#__PURE__*/createElement(route.screen))));
+}
+
+export default /*#__PURE__*/memo(Screen);

package/es/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Screen } from './Screen';
+export { default as AppContainer } from './AppContainer';

package/es/components/index.js

@@ -0,0 +1,2 @@
+export { default as Screen } from './Screen';
+export { default as AppContainer } from './AppContainer';

package/es/constants/index.d.ts

@@ -0,0 +1 @@
+export declare const GO_BACK = "GO_BACK";

package/es/constants/index.js

@@ -0,0 +1 @@
+export var GO_BACK = 'GO_BACK';

package/es/context/index.d.ts

@@ -0,0 +1,9 @@
+export declare const NavigationContext: import("react").Context<{
+    navigation: {
+        navigate: (path: string) => void;
+        goBack: () => void;
+    };
+}>;
+export declare const ScreenContext: import("react").Context<{
+    params?: Record<string, any> | undefined;
+}>;

package/es/context/index.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+export var NavigationContext = /*#__PURE__*/createContext({
+  navigation: {
+    navigate: function navigate() {},
+    goBack: function goBack() {}
+  }
+});
+export var ScreenContext = /*#__PURE__*/createContext({});

package/es/global.d.ts

@@ -0,0 +1,35 @@
+declare global {
+    interface Window {
+        ReactNativeWebView?: {
+            postMessage(e: string): void;
+        };
+        mini?: {
+            getSystemInfoSync(): {
+                statusBarHeight: number;
+                pixelRatio: number;
+                safeArea: {
+                    top: number;
+                    right: number;
+                    bottom: number;
+                    left: number;
+                };
+            };
+            addListener(cb: (e: string) => void): void;
+            getExtraPayload(): unknown;
+        };
+    }
+}
+export declare const mini: {
+    getSystemInfoSync(): {
+        statusBarHeight: number;
+        pixelRatio: number;
+        safeArea: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+    };
+    addListener(cb: (e: string) => void): void;
+    getExtraPayload(): unknown;
+};

package/es/global.js

@@ -0,0 +1,20 @@
+if (window.mini === undefined) {
+  window.mini = {
+    getSystemInfoSync: function getSystemInfoSync() {
+      return {
+        statusBarHeight: 0,
+        pixelRatio: window.devicePixelRatio,
+        safeArea: {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0
+        }
+      };
+    },
+    addListener: function addListener() {},
+    getExtraPayload: function getExtraPayload() {}
+  };
+}
+
+export var mini = window.mini;

package/es/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export declare function useNavigation(): {
+    navigate: (path: string) => void;
+    goBack: () => void;
+};
+export declare function useParams<T extends Record<string, any> | void = void>(): T;

package/es/hooks/index.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { NavigationContext, ScreenContext } from '../context';
+export function useNavigation() {
+  var ctx = useContext(NavigationContext);
+  return ctx.navigation;
+}
+export function useParams() {
+  var ctx = useContext(ScreenContext);
+  return ctx.params;
+}

package/es/index.d.ts

@@ -0,0 +1,4 @@
+export * from './global';
+export { AppContainer } from './components';
+export * from './hooks';
+export type { NavigationStackScreen, Path } from './typings';

package/es/index.js

@@ -0,0 +1,3 @@
+export * from './global';
+export { AppContainer } from './components';
+export * from './hooks';

package/es/typings.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentType } from 'react';
+
+export interface NavigationStackScreen {
+  title: string;
+  path: string;
+  screen: ComponentType;
+}
+
+export interface Path {
+  pathname: string;
+  search: string;
+  hash: string;
+}

package/es/utils/path.d.ts

@@ -0,0 +1,3 @@
+import type { Path } from '../typings';
+export declare function createPath({ pathname, search, hash }: Partial<Path>): string;
+export declare function parsePath(path: string): Partial<Path>;

package/es/utils/path.js

@@ -0,0 +1,36 @@
+export function createPath(_ref) {
+  var _ref$pathname = _ref.pathname,
+      pathname = _ref$pathname === void 0 ? '/' : _ref$pathname,
+      _ref$search = _ref.search,
+      search = _ref$search === void 0 ? '' : _ref$search,
+      _ref$hash = _ref.hash,
+      hash = _ref$hash === void 0 ? '' : _ref$hash;
+  if (search && search !== '?') pathname += search.charAt(0) === '?' ? search : '?' + search;
+  if (hash && hash !== '#') pathname += hash.charAt(0) === '#' ? hash : '#' + hash;
+  return pathname;
+}
+export function parsePath(path) {
+  var parsedPath = {};
+
+  if (path) {
+    var hashIndex = path.indexOf('#');
+
+    if (hashIndex >= 0) {
+      parsedPath.hash = path.substr(hashIndex);
+      path = path.substr(0, hashIndex);
+    }
+
+    var searchIndex = path.indexOf('?');
+
+    if (searchIndex >= 0) {
+      parsedPath.search = path.substr(searchIndex);
+      path = path.substr(0, searchIndex);
+    }
+
+    if (path) {
+      parsedPath.pathname = path;
+    }
+  }
+
+  return parsedPath;
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@lemon-fe/mini-app",
+  "version": "0.0.2",
+  "description": "> TODO: description",
+  "author": "鲁盛杰 <lusj@cnlemon.net>",
+  "homepage": "",
+  "license": "ISC",
+  "main": "es/index.js",
+  "directories": {
+    "es": "es"
+  },
+  "files": [
+    "es"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@gitlab.nhsoft.cn:lemon-fe/kits-next.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-transition-group": "^4.4.2"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.2"
+  },
+  "devDependencies": {
+    "@types/react-transition-group": "^4.4.4"
+  }
+}