zmp-cli 3.4.2 → 3.5.2

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 {
@@ -91,7 +94,9 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
91
94
  ZMP_IMPORT_PAGES: () => generatePagesMap(cwd),
92
95
  },
93
96
  }),
94
- dynamicImportVars(),
97
+ dynamicImportVars({
98
+ warnOnError: true,
99
+ }),
95
100
  ],
96
101
  output: {
97
102
  entryFileNames: 'assets/[name].[hash].module.js',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zmp-cli",
3
- "version": "3.4.2",
3
+ "version": "3.5.2",
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:3000/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:3000"></iframe>
126
+ <span id="title"></span>
141
127
  </div>
142
- </body>
128
+ </div>
129
+ </body>
130
+
131
+ <script>
132
+ fetch(`http://localhost:${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 = `http://localhost:${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
 
@@ -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: port,
100
- strictPort: true,
84
+ port: port - 1,
101
85
  ...(previewOnZalo ? publicServer : localServer),
102
86
  },
103
87
  });
@@ -110,10 +94,16 @@ module.exports = async (options = {}, logger, { exitOnError = true } = {}) => {
110
94
  configFile: false,
111
95
  root: __dirname + '/frame',
112
96
  server: {
113
- port: port + 1,
97
+ port: app.httpServer.address().port + 1,
98
+ strictPort: true,
99
+ open: true,
114
100
  },
115
101
  });
116
- serverFrame.listen();
102
+ await serverFrame.listen();
103
+ spinner.stop();
104
+ const info = serverFrame.config.logger.info;
105
+ info(chalk.green(`Zalo Mini App dev server is running at:\n`));
106
+ serverFrame.printUrls();
117
107
  }
118
108
 
119
109
  spinner.stop();