Merge pull request #171 from bytedance/feat/merchant-h5

Feat/merchant h5
bytedance · Oct 26, 2022 · aa84efe · aa84efe
2 parents a39fe5f + e60675e
commit aa84efe
Show file tree

Hide file tree

Showing 56 changed files with 620 additions and 335 deletions.
diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.2.32",
+  "version": "0.2.33",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {

diff --git a/packages/mona-cli/package.json b/packages/mona-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bytedance/mona-cli",
-  "version": "0.2.32",
+  "version": "0.2.33",
   "displayName": "mona",
   "description": "Merchant app's developing and building tools",
   "main": "./bin/mona",
@@ -20,8 +20,8 @@
   "author": "[email protected]",
   "license": "MIT",
   "dependencies": {
-    "@bytedance/mona-service": "0.2.32",
-    "@bytedance/mona-shared": "0.2.32",
+    "@bytedance/mona-service": "0.2.33",
+    "@bytedance/mona-shared": "0.2.33",
     "chalk": "^4.1.2",
     "command-line-usage": "^6.1.1",
     "compare-version": "^0.1.2",

diff --git a/packages/mona-clients/mona-client-mini/package.json b/packages/mona-clients/mona-client-mini/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bytedance/mona-client-mini",
-  "version": "0.2.32",
+  "version": "0.2.33",
   "description": "miniapp for mona",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -21,8 +21,8 @@
   "license": "MIT",
   "sideEffects": false,
   "dependencies": {
-    "@bytedance/mona": "0.2.32",
-    "@bytedance/mona-shared": "0.2.32",
+    "@bytedance/mona": "0.2.33",
+    "@bytedance/mona-shared": "0.2.33",
     "react-reconciler": "^0.26.2",
     "scheduler": "^0.20.2"
   },

diff --git a/packages/mona-clients/mona-client-mini/src/apis/api.ts b/packages/mona-clients/mona-client-mini/src/apis/api.ts
@@ -41,7 +41,7 @@ export const getBackgroundAudioManager: BaseApis['getBackgroundAudioManager'] =
 export const createInnerAudioContext: BaseApis['createInnerAudioContext'] = tt.createInnerAudioContext;
 export const chooseVideo: BaseApis['chooseVideo'] = promisify(tt.chooseVideo);
 export const saveVideoToPhotoAlbum: BaseApis['saveVideoToPhotoAlbum'] = tt.saveVideoToPhotoAlbum;
-export const createVideoContext: BaseApis['createVideoContext'] = promisify(tt.createVideoContext);
+export const createVideoContext: BaseApis['createVideoContext'] = tt.createVideoContext;
 export const createLivePlayerContext: BaseApis['createLivePlayerContext'] = tt.createLivePlayerContext;
 export const preloadVideo: BaseApis['preloadVideo'] = promisify(tt.preloadVideo);
 export const createCameraContext: BaseApis['createCameraContext'] = tt.createCameraContext;

diff --git a/packages/mona-clients/mona-client-plugin/package.json b/packages/mona-clients/mona-client-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bytedance/mona-client-plugin",
-  "version": "0.2.32",
+  "version": "0.2.33",
   "description": "plugin for mona",
   "main": "./dist/index.js",
   "files": [
@@ -17,10 +17,10 @@
     "mona"
   ],
   "dependencies": {
-    "@bytedance/mona": "0.2.32",
-    "@bytedance/mona-client-web": "0.2.32",
-    "@bytedance/mona-plugin-events": "0.2.32",
-    "@bytedance/mona-shared": "0.2.32"
+    "@bytedance/mona": "0.2.33",
+    "@bytedance/mona-client-web": "0.2.33",
+    "@bytedance/mona-plugin-events": "0.2.33",
+    "@bytedance/mona-shared": "0.2.33"
   },
   "peerDependencies": {
     "react": "^17.0.2",

diff --git a/packages/mona-clients/mona-client-web/package.json b/packages/mona-clients/mona-client-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bytedance/mona-client-web",
-  "version": "0.2.32",
+  "version": "0.2.33",
   "description": "web for mona",
   "main": "./dist/index.js",
   "files": [
@@ -19,16 +19,15 @@
     "mona"
   ],
   "dependencies": {
-    "@bytedance/mona": "0.2.32",
-    "@bytedance/mona-shared": "0.2.32",
-    "ahooks": "^3.7.0",
-    "classnames": "^2.3.1",
-    "copyfiles": "^2.4.1"
+    "@bytedance/mona": "0.2.33",
+    "@bytedance/mona-shared": "0.2.33",
+    "ahooks": "^3.7.0"
   },
   "devDependencies": {
     "@types/react-dom": "^17.0.2",
     "@types/react-router": "^5.1.17",
     "@types/react-router-dom": "^5.3.1",
+    "copyfiles": "^2.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0"

diff --git a/...ona-clients/mona-client-web/src/__tests__/components/__snapshots__/Checkbox.spec.tsx.snap b/...ona-clients/mona-client-web/src/__tests__/components/__snapshots__/Checkbox.spec.tsx.snap
@@ -62,7 +62,7 @@ LoadedCheerio {
       class="wrapper"
     >
       <div
-        class="input"
+        class="input "
         style="border-color: #f85959;"
       >
         <input

diff --git a/...lients/mona-client-web/src/__tests__/components/__snapshots__/CheckboxGroup.spec.tsx.snap b/...lients/mona-client-web/src/__tests__/components/__snapshots__/CheckboxGroup.spec.tsx.snap
@@ -11,7 +11,7 @@ LoadedCheerio {
       class="wrapper"
     >
       <div
-        class="input"
+        class="input "
         style="border-color: #f85959;"
       >
         <input
@@ -56,17 +56,15 @@ LoadedCheerio {
 
 exports[`web component: CheckboxGroup should render correctly 1`] = `
 LoadedCheerio {
-  "0": <div
-    class=""
-  >
+  "0": <div>
     <div
       class="checkbox"
     >
       <div
         class="wrapper"
       >
         <div
-          class="input"
+          class="input "
           style="border-color: #f85959;"
         >
           <input
@@ -85,7 +83,7 @@ LoadedCheerio {
         class="wrapper"
       >
         <div
-          class="input"
+          class="input "
           style="border-color: #f85959;"
         >
           <input
@@ -104,7 +102,7 @@ LoadedCheerio {
         class="wrapper"
       >
         <div
-          class="input"
+          class="input "
           style="border-color: #f85959;"
         >
           <input

diff --git a/...es/mona-clients/mona-client-web/src/__tests__/components/__snapshots__/Form.spec.tsx.snap b/...es/mona-clients/mona-client-web/src/__tests__/components/__snapshots__/Form.spec.tsx.snap
@@ -10,7 +10,7 @@ LoadedCheerio {
       class="wrapper"
     >
       <div
-        class="input"
+        class="input "
         style="border-color: #f85959;"
       >
         <input
@@ -55,9 +55,7 @@ LoadedCheerio {
 
 exports[`web component: Form should render correctly 1`] = `
 LoadedCheerio {
-  "0": <form
-    class=""
-  >
+  "0": <form>
     <input
       class="input"
       enterkeyhint="done"
@@ -73,7 +71,7 @@ LoadedCheerio {
         class="wrapper"
       >
         <div
-          class="input"
+          class="input "
           style="border-color: #f85959;"
         >
           <input

diff --git a/...ona-clients/mona-client-web/src/__tests__/components/__snapshots__/Progress.spec.tsx.snap b/...ona-clients/mona-client-web/src/__tests__/components/__snapshots__/Progress.spec.tsx.snap
@@ -49,7 +49,7 @@ LoadedCheerio {
     style="background-color: rgb(235, 235, 235); height: 6px;"
   >
     <div
-      class="inner"
+      class="inner "
       style="width: 0%; background-color: rgb(248, 89, 89); transition-duration: 0ms;"
     />
   </div>,

diff --git a/...s/mona-clients/mona-client-web/src/__tests__/components/__snapshots__/Radio.spec.tsx.snap b/...s/mona-clients/mona-client-web/src/__tests__/components/__snapshots__/Radio.spec.tsx.snap
@@ -10,7 +10,7 @@ LoadedCheerio {
       class="wrapper"
     >
       <div
-        class="input"
+        class="input "
         style="border-color: red;"
       >
         <input
@@ -62,7 +62,7 @@ LoadedCheerio {
       class="wrapper"
     >
       <div
-        class="input"
+        class="input "
         style="border-color: #f85959;"
       >
         <input

diff --git a/...a-clients/mona-client-web/src/__tests__/components/__snapshots__/RadioGroup.spec.tsx.snap b/...a-clients/mona-client-web/src/__tests__/components/__snapshots__/RadioGroup.spec.tsx.snap
@@ -41,9 +41,7 @@ LoadedCheerio {
 
 exports[`web component: RadioGroup should render correctly 1`] = `
 LoadedCheerio {
-  "0": <div
-    class=""
-  />,
+  "0": <div />,
   "_root": LoadedCheerio {
     "0": Document {
       "children": Array [

diff --git a/...ona-clients/mona-client-web/src/__tests__/components/__snapshots__/RichText.spec.tsx.snap b/...ona-clients/mona-client-web/src/__tests__/components/__snapshots__/RichText.spec.tsx.snap
@@ -39,9 +39,7 @@ LoadedCheerio {
 
 exports[`web component: RichText should render correctly 1`] = `
 LoadedCheerio {
-  "0": <div
-    class=""
-  />,
+  "0": <div />,
   "_root": LoadedCheerio {
     "0": Document {
       "children": Array [

diff --git a/...es/mona-clients/mona-client-web/src/__tests__/components/__snapshots__/View.spec.tsx.snap b/...es/mona-clients/mona-client-web/src/__tests__/components/__snapshots__/View.spec.tsx.snap
@@ -41,9 +41,7 @@ LoadedCheerio {
 
 exports[`web component: View should render correctly 1`] = `
 LoadedCheerio {
-  "0": <div
-    class=""
-  />,
+  "0": <div />,
   "_root": LoadedCheerio {
     "0": Document {
       "children": Array [

diff --git a/packages/mona-clients/mona-client-web/src/apis/api.ts b/packages/mona-clients/mona-client-web/src/apis/api.ts
@@ -4,7 +4,7 @@ import {
   createCanvasContext as originCreateCanvasContext,
   canvasToTempFilePath as originCanvasToTempFilePath,
 } from './Canvas';
-import { promisify } from '@bytedance/mona-shared';
+import { promisify } from '@bytedance/mona-shared/dist/promisify';
 
 import {
   webChooseImage,

diff --git a/packages/mona-clients/mona-client-web/src/apis/components/Masking/index.tsx b/packages/mona-clients/mona-client-web/src/apis/components/Masking/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import cs from 'classnames';
 import './index.module.less';
 
-export function Masking({ onHandle, className }: { onHandle: () => void; className?: string }): JSX.Element {
-  return <div className={cs('mona-web-masking', className || '')} onClick={onHandle} />;
+export function Masking({ onHandle, className = '' }: { onHandle: () => void; className?: string }): JSX.Element {
+  return <div className={`mona-web-masking ${className}`} onClick={onHandle} />;
 }
diff --git a/packages/mona-clients/mona-client-web/src/apis/components/NavBar/index.tsx b/packages/mona-clients/mona-client-web/src/apis/components/NavBar/index.tsx
@@ -1,5 +1,4 @@
 import React, { FC } from 'react';
-import cs from 'classnames';
 import './index.module.less';
 
 interface NavBarProps {
@@ -13,7 +12,7 @@ interface NavBarProps {
 }
 
 export const NavBar: FC<NavBarProps> = props => (
-  <div className={cs('mona-web-navbar', props.className)}>
+  <div className={`mona-web-navbar ${props.className}`}>
     <div className="mona-web-navbar-left" onClick={props.onLeftClick}>
       {props.left ? (
         props.left

diff --git a/packages/mona-clients/mona-client-web/src/apis/util.ts b/packages/mona-clients/mona-client-web/src/apis/util.ts
@@ -1,4 +1,4 @@
-import { formatPath } from '@bytedance/mona-shared';
+import formatPath from '@bytedance/mona-shared/dist/formatPath';
 import {
   GetImageInfoSuccessCallbackArgs,
   RequestTask,
@@ -399,7 +399,7 @@ export const webNavigateTo: OriginApis['navigateTo'] = options => {
   let errMsg: string;
   try {
     errMsg = 'navigateTo:ok';
-    const monaHistory = window.__mona_history;
+    const monaHistory = window.__mona_history || history;
     if (options.url.startsWith('..')) {
       monaHistory.push(formatPath(options.url, monaHistory.location.pathname));
     } else {
@@ -417,7 +417,7 @@ export const webRedirectTo: OriginApis['redirectTo'] = options => {
   let errMsg: string;
   try {
     errMsg = 'redirectTo:ok';
-    const monaHistory = window.__mona_history;
+    const monaHistory = window.__mona_history || history;
     monaHistory.replace(formatPath(options.url, monaHistory.location.pathname));
     options.success?.({ errMsg });
   } catch (err) {
@@ -435,9 +435,10 @@ export const webSwitchTab: OriginApis['switchTab'] = ({ url, success, fail, comp
 export const webNavigateBack: OriginApis['navigateBack'] = (options = {}) => {
   let errMsg: string;
   try {
+    const monaHistory = window.__mona_history || history;
     errMsg = 'navigateBack:ok';
     const delta = options.delta || 1;
-    history.go(-delta);
+    monaHistory.go(-delta);
     options.success?.({ errMsg });
   } catch (err) {
     errMsg = `navigateBack:fail${err}`;

diff --git a/packages/mona-clients/mona-client-web/src/components/Checkbox/index.tsx b/packages/mona-clients/mona-client-web/src/components/Checkbox/index.tsx
@@ -1,21 +1,12 @@
 import React, { useState, useEffect, useContext, useRef } from 'react';
 import { CheckboxProps } from '@bytedance/mona';
-import cs from 'classnames';
 import { CheckboxGroupContext } from '../CheckboxGroup';
 import styles from './index.module.less';
 import { useHandlers } from '../hooks';
 import { formatMouseEvent } from '../utils';
 
-const Checkbox: React.FC<CheckboxProps> = (props) => {
-  const {
-    value,
-    disabled,
-    checked,
-    color = '#F85959',
-    children,
-    id,
-    ...restProps
-  } = props;
+const Checkbox: React.FC<CheckboxProps> = props => {
+  const { value, disabled, checked, color = '#F85959', children, id, ...restProps } = props;
 
   const group = useContext(CheckboxGroupContext);
   const orderRef = useRef(-1);
@@ -31,39 +22,39 @@ const Checkbox: React.FC<CheckboxProps> = (props) => {
       group?.toggleChecked(orderRef.current, newIsChecked, formatMouseEvent({ event: e, type: 'change' }));
     }
     onClick(e);
-  }
-  
+  };
+
   // don't change order of useEffects, the order is important
   useEffect(() => {
     setIsChecked(checked);
     if (orderRef.current >= 0) {
       group?.toggleChecked(orderRef.current, checked);
     }
-  }, [checked])
+  }, [checked]);
 
   useEffect(() => {
     orderRef.current = group ? group?.initValue(value, checked, () => setIsChecked(false)) : -1;
-  }, [])
+  }, []);
 
   useEffect(() => {
     if (orderRef.current >= 0) {
       group?.changeValue(orderRef.current, value);
     }
-  }, [value])
+  }, [value]);
 
   return (
-    <div
-      className={handleClassName(styles.checkbox)}
-      {...handlerProps}
-    >
+    <div className={handleClassName(styles.checkbox)} {...handlerProps}>
       <div className={styles.wrapper}>
-        <div className={cs(styles.input, {[styles.checked]: isChecked})} style={{ borderColor: color, backgroundColor: isChecked ? color: '' }}>
+        <div
+          className={`${styles.input} ${isChecked ? styles.checked : ''}`}
+          style={{ borderColor: color, backgroundColor: isChecked ? color : '' }}
+        >
           <input value={value} id={id} onClick={handleClick} type="checkbox" className={styles.inner}></input>
         </div>
         {children}
       </div>
     </div>
-  )
-}
+  );
+};
 
 export default Checkbox;