zmp-cli 3.4.3 → 3.5.3-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/build/index.js CHANGED
@@ -17,7 +17,9 @@ const generatePagesMap = require('../utils/generate-pages-map');
17
17
  const env = process.env.NODE_ENV || 'production';
18
18
 
19
19
  const waitText = chalk.gray('Building... (Please wait, it can take a while)');
20
-
20
+ const frameworkWarning = chalk.yellow(
21
+ 'Warning: This CLI version will work better with zmp-framework version 1.5.0 or higher'
22
+ );
21
23
  const spinner = ora(
22
24
  env === 'production'
23
25
  ? 'Building for production...'
@@ -45,6 +47,7 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
45
47
  error() {},
46
48
  };
47
49
  }
50
+ logger.text(frameworkWarning);
48
51
  spinner.start();
49
52
  logger.statusStart(waitText);
50
53
  try {
@@ -84,6 +87,7 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
84
87
  outDir: path.join(cwd, 'www'),
85
88
  assetsInlineLimit: 0,
86
89
  cssCodeSplit: false,
90
+ cssTarget: ['es2015', 'safari13.1'],
87
91
  rollupOptions: {
88
92
  plugins: [
89
93
  replace({
@@ -91,7 +95,9 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
91
95
  ZMP_IMPORT_PAGES: () => generatePagesMap(cwd),
92
96
  },
93
97
  }),
94
- dynamicImportVars(),
98
+ dynamicImportVars({
99
+ warnOnError: true,
100
+ }),
95
101
  ],
96
102
  output: {
97
103
  entryFileNames: 'assets/[name].[hash].module.js',
package/config/index.js CHANGED
@@ -44,5 +44,6 @@ module.exports = {
44
44
  testChunks: true,
45
45
  throttleProgressCallbacks: 1,
46
46
  method: 'octet',
47
+ forceChunkSize: true,
47
48
  },
48
49
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zmp-cli",
3
- "version": "3.4.3",
3
+ "version": "3.5.3-0",
4
4
  "description": "ZMP command line utility (CLI)",
5
5
  "main": "index.js",
6
6
  "bin": {
@@ -86,7 +86,7 @@
86
86
  "terser-webpack-plugin": "^5.1.1",
87
87
  "toastr": "^2.1.4",
88
88
  "touch": "^3.1.0",
89
- "vite": "^2.1.5",
89
+ "vite": "^2.6.14",
90
90
  "vite-plugin-replace": "^0.1.1",
91
91
  "xhr2": "^0.2.1",
92
92
  "xmlhttprequest": "^1.8.0",
@@ -1,143 +1,156 @@
1
1
  <!DOCTYPE html>
2
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta
6
- http-equiv="Content-Security-Policy"
7
- content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:"
8
- />
9
- <meta
10
- name="viewport"
11
- content="width=device-width, initial-scale=1, viewport-fit=cover"
12
- />
13
-
14
- <meta name="theme-color" content="#007aff" />
15
- <meta name="format-detection" content="telephone=no" />
16
- <meta name="msapplication-tap-highlight" content="no" />
17
- <link rel="icon" href="/src/static/icons/favicon.png" />
18
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
19
- <script>
20
- fetch('http://localhost:2999/app-config.json')
21
- .then(response => response.json())
22
- .then(data => {
23
- if (data.app.title) {
24
- document.getElementById('title').innerHTML = data.app.title;
25
- document.title = data.app.title;
26
- }
27
- if (data.app.headerColor) {
28
- document.getElementById('header').style.backgroundColor = data.app.headerColor;
29
- }
30
- if (data.app.statusBarColor) {
31
- document.getElementById('statusbar').style.backgroundColor = data.app.statusBarColor;
32
- }
33
- if (data.app.textColor) {
34
- document.getElementById('statusbar').style.color = data.app.textColor;
35
- document.getElementById('header').style.color = data.app.textColor;
36
- }
37
- });
38
- </script>
39
-
40
- <title>Water Reminder1</title>
41
- <style>
42
- body {
43
- font-family: -apple-system, BlinkMacSystemFont, sans-serif;
44
- margin: 0px;
45
- }
46
- #zalo-frame {
47
- width: 100%;
48
- height: calc(100vh - 74px);
49
- border: none;
50
- overflow: auto;
51
- cursor: grab;
52
- }
53
- .wrapper-frame {
54
- width: 100%;
55
- height: 100vh;
56
- background-color: black;
57
- margin: auto;
58
- }
59
- .status-bar {
60
- height: 30px;
61
- background-color: #0068FF;
62
- color: white;
63
- font-size: 13px;
64
- }
65
- .status-bar .right {
66
- float: right;
67
- padding: 6px;
68
- }
69
- .status-bar .left {
70
- float: left;
71
- padding: 6px;
72
- margin-left: 5px;
73
- }
74
- .status-bar .right i {
75
- margin-right: 5px;
76
- }
77
- .header {
78
- position: relative;
79
- height: 32px;
80
- background-color: #0068FF;
81
- text-align: center;
82
- color: #fff;
83
- padding-top: 12px;
84
- }
85
- .header .home {
86
- font-size: 14px;
87
- position: absolute;
88
- left: 6px;
89
- top: 6px;
90
- padding-top: 6px;
91
- height: 24px;
92
- width: 30px;
93
- background-color: rgba(0, 0, 0, 0.15);
94
- border-radius: 100%;
95
- border: 1px solid rgba(255, 255, 255, 0.25);
96
- }
97
3
 
98
- .header .setting {
99
- font-size: 14px;
100
- position: absolute;
101
- right: 6px;
102
- top: 6px;
103
- padding-top: 6px;
104
- height: 24px;
105
- width: 85px;
106
- background-color: rgba(0, 0, 0, 0.15);
107
- border-radius: 16px;
108
- border: 1px solid rgba(255, 255, 255, 0.25);
109
- }
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta http-equiv="Content-Security-Policy"
7
+ content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:" />
8
+ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
110
9
 
111
- .header .setting i:first-child {
112
- border-right: 1px solid rgba(255, 255, 255, 0.25);
113
- padding-right: 12px;
114
- margin-right: 12px;
115
- }
116
- </style>
117
- </head>
118
- <body>
119
- <div class="wrapper-frame">
120
- <div id="statusbar" class="status-bar">
121
- <div class="right">
122
- <i class="fas fa-wifi"></i>
123
- <i class="fas fa-battery-full"></i>
124
- </div>
125
- <div class="left">
126
- 12:00
127
- </div>
10
+ <meta name="theme-color" content="#007aff" />
11
+ <meta name="format-detection" content="telephone=no" />
12
+ <meta name="msapplication-tap-highlight" content="no" />
13
+ <link rel="icon" href="/src/static/icons/favicon.png" />
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
15
+ integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
16
+ crossorigin="anonymous" referrerpolicy="no-referrer" />
17
+
18
+ <title>Water Reminder1</title>
19
+ <style>
20
+ body {
21
+ font-family: -apple-system, BlinkMacSystemFont, sans-serif;
22
+ margin: 0px;
23
+ }
24
+
25
+ #zalo-frame {
26
+ width: 100%;
27
+ height: calc(100vh - 74px);
28
+ border: none;
29
+ overflow: auto;
30
+ cursor: grab;
31
+ }
32
+
33
+ .wrapper-frame {
34
+ width: 100%;
35
+ height: 100vh;
36
+ background-color: black;
37
+ margin: auto;
38
+ overflow: hidden;
39
+ }
40
+
41
+ .status-bar {
42
+ height: 30px;
43
+ background-color: #0068FF;
44
+ color: white;
45
+ font-size: 13px;
46
+ }
47
+
48
+ .status-bar .right {
49
+ float: right;
50
+ padding: 6px;
51
+ }
52
+
53
+ .status-bar .left {
54
+ float: left;
55
+ padding: 6px;
56
+ margin-left: 5px;
57
+ }
58
+
59
+ .status-bar .right i {
60
+ margin-right: 5px;
61
+ }
62
+
63
+ .header {
64
+ position: relative;
65
+ height: 32px;
66
+ background-color: #0068FF;
67
+ text-align: center;
68
+ color: #fff;
69
+ padding-top: 12px;
70
+ }
71
+
72
+ .header .home {
73
+ font-size: 14px;
74
+ position: absolute;
75
+ left: 6px;
76
+ top: 6px;
77
+ padding-top: 6px;
78
+ height: 24px;
79
+ width: 30px;
80
+ background-color: rgba(0, 0, 0, 0.15);
81
+ border-radius: 100%;
82
+ border: 1px solid rgba(255, 255, 255, 0.25);
83
+ }
84
+
85
+ .header .setting {
86
+ font-size: 14px;
87
+ position: absolute;
88
+ right: 6px;
89
+ top: 6px;
90
+ padding-top: 6px;
91
+ height: 24px;
92
+ width: 85px;
93
+ background-color: rgba(0, 0, 0, 0.15);
94
+ border-radius: 16px;
95
+ border: 1px solid rgba(255, 255, 255, 0.25);
96
+ }
97
+
98
+ .header .setting i:first-child {
99
+ border-right: 1px solid rgba(255, 255, 255, 0.25);
100
+ padding-right: 12px;
101
+ margin-right: 12px;
102
+ }
103
+ </style>
104
+ </head>
105
+
106
+ <body>
107
+ <div class="wrapper-frame">
108
+ <div id="statusbar" class="status-bar">
109
+ <div class="right">
110
+ <i class="fas fa-wifi"></i>
111
+ <i class="fas fa-battery-full"></i>
112
+ </div>
113
+ <div class="left">
114
+ 12:00
128
115
  </div>
116
+ </div>
129
117
 
130
- <div id="header" class="header">
131
- <div class="home">
132
- <i class="fas fa-home"></i>
133
- </div>
134
- <div class="setting">
135
- <i class="fas fa-ellipsis-h"></i>
136
- <i class="fas fa-power-off"></i>
137
- </div>
138
- <span id="title"></span>
118
+ <div id="header" class="header">
119
+ <div class="home">
120
+ <i class="fas fa-home"></i>
121
+ </div>
122
+ <div class="setting">
123
+ <i class="fas fa-ellipsis-h"></i>
124
+ <i class="fas fa-power-off"></i>
139
125
  </div>
140
- <iframe id="zalo-frame" src="http://localhost:2999"></iframe>
126
+ <span id="title"></span>
141
127
  </div>
142
- </body>
128
+ </div>
129
+ </body>
130
+
131
+ <script>
132
+ fetch(`${window.location.protocol}//${window.location.hostname}:${window.location.port - 1}/app-config.json`)
133
+ .then(response => response.json())
134
+ .then(data => {
135
+ if (data.app.title) {
136
+ document.getElementById('title').innerHTML = data.app.title;
137
+ document.title = data.app.title;
138
+ }
139
+ if (data.app.headerColor) {
140
+ document.getElementById('header').style.backgroundColor = data.app.headerColor;
141
+ }
142
+ if (data.app.statusBarColor) {
143
+ document.getElementById('statusbar').style.backgroundColor = data.app.statusBarColor;
144
+ }
145
+ if (data.app.textColor) {
146
+ document.getElementById('statusbar').style.color = data.app.textColor;
147
+ document.getElementById('header').style.color = data.app.textColor;
148
+ }
149
+ });
150
+ const iframe = document.createElement('iframe');
151
+ iframe.id = 'zalo-frame'
152
+ iframe.src = `${window.location.protocol}//${window.location.hostname}:${window.location.port - 1}`
153
+ document.body.firstElementChild.appendChild(iframe);
154
+ </script>
155
+
143
156
  </html>
package/start/index.js CHANGED
@@ -6,13 +6,11 @@ const path = require('path');
6
6
  const qrcode = require('qrcode-terminal');
7
7
  const logSymbols = require('log-symbols');
8
8
  const { createServer } = require('vite');
9
- const { replaceCodePlugin } = require('vite-plugin-replace');
10
9
 
11
10
  const config = require('../config');
12
11
  const envUtils = require('../utils/env');
13
12
  const fs = require('../utils/fs-extra');
14
13
  const fse = require('../utils/fs-extra');
15
- const generatePagesMap = require('../utils/generate-pages-map');
16
14
 
17
15
  const spinner = ora('Starting mini app...');
18
16
 
@@ -24,11 +22,11 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
24
22
  if (!logger) {
25
23
  // eslint-disable-next-line
26
24
  logger = {
27
- statusStart() { },
28
- statusDone() { },
29
- statusError() { },
30
- text() { },
31
- error() { },
25
+ statusStart() {},
26
+ statusDone() {},
27
+ statusError() {},
28
+ text() {},
29
+ error() {},
32
30
  };
33
31
  }
34
32
  spinner.start();
@@ -82,22 +80,8 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
82
80
  previewOnZalo ? 'production' : 'development'
83
81
  ),
84
82
  },
85
- optimizeDeps: {
86
- exclude: ['zmp-import-pages'],
87
- },
88
- plugins: [
89
- replaceCodePlugin({
90
- replacements: [
91
- {
92
- from: 'ZMP_IMPORT_PAGES',
93
- to: () => generatePagesMap(cwd),
94
- },
95
- ],
96
- }),
97
- ],
98
83
  server: {
99
- port: 2999,
100
- strictPort: true,
84
+ port: port - 1,
101
85
  ...(previewOnZalo ? publicServer : localServer),
102
86
  },
103
87
  });
@@ -110,15 +94,16 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
110
94
  configFile: false,
111
95
  root: __dirname + '/frame',
112
96
  server: {
113
- port: port,
114
- open: true
97
+ port: app.httpServer.address().port + 1,
98
+ strictPort: true,
99
+ open: true,
115
100
  },
116
101
  });
117
102
  await serverFrame.listen();
118
103
  spinner.stop();
119
- const info = server.config.logger.info
120
- info(chalk.green(`Zalo Mini App dev server is running at:\n`))
121
- serverFrame.printUrls()
104
+ const info = serverFrame.config.logger.info;
105
+ info(chalk.green(`Zalo Mini App dev server is running at:\n`));
106
+ serverFrame.printUrls();
122
107
  }
123
108
 
124
109
  spinner.stop();