@metricinsights/pp-dev 0.0.1 → 0.0.3
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/README.md +114 -2
- package/dist/client/client.css +65 -5
- package/dist/client/client.js +9 -0
- package/dist/client/client.js.map +1 -1
- package/dist/client/index.html +10 -5
- package/package.json +25 -3
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# pp-dev
|
|
2
2
|
|
|
3
|
-
Portal Page development framework
|
|
3
|
+
Portal Page development framework and build tool.
|
|
4
|
+
|
|
5
|
+
This package is based on [Vite](https://vitejs.dev/) tool.
|
|
4
6
|
|
|
5
7
|
## Usage
|
|
6
8
|
|
|
@@ -10,6 +12,116 @@ Package installation
|
|
|
10
12
|
$ npm i @metricinsights/pp-dev
|
|
11
13
|
```
|
|
12
14
|
|
|
15
|
+
### Define configuration
|
|
16
|
+
|
|
17
|
+
You need to create the file with the name `pp-dev.config` and extension `js` or
|
|
18
|
+
`cjs` (if you define type `module` in package.json) or `ts` if you want to use Typescript, or `json`.
|
|
19
|
+
You also can define configuration in `package.json` with the `pp-dev` key
|
|
20
|
+
|
|
21
|
+
Config examples:
|
|
22
|
+
|
|
23
|
+
- JavaScript
|
|
24
|
+
|
|
25
|
+
```javascript
|
|
26
|
+
// pp-dev.config.js
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* @type {import('@metricinsights/pp-dev').PPDevConfig}
|
|
30
|
+
*/
|
|
31
|
+
module.exports = {
|
|
32
|
+
backendBaseURL: 'https://example.metricinsights.com',
|
|
33
|
+
portalPageId: 1,
|
|
34
|
+
};
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
- Typescript
|
|
38
|
+
|
|
39
|
+
```typescript
|
|
40
|
+
// pp-dev.config.ts
|
|
41
|
+
|
|
42
|
+
import { PPDevConfig } from '@metricinsights/pp-dev';
|
|
43
|
+
|
|
44
|
+
const config: PPDevConfig = {
|
|
45
|
+
backendBaseURL: 'https://example.metricinsights.com',
|
|
46
|
+
portalPageId: 1,
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export default config;
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
- JSON (`pp-dev.config.json`)
|
|
53
|
+
|
|
54
|
+
```json
|
|
55
|
+
{
|
|
56
|
+
"backendBaseURL": "https://example.metricinsights.com",
|
|
57
|
+
"portalPageId": 1
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
- JSON in `package.json` file
|
|
62
|
+
|
|
63
|
+
```json
|
|
64
|
+
{
|
|
65
|
+
"name": "<project-name>",
|
|
66
|
+
"version": "1.0.0",
|
|
67
|
+
"scripts": {},
|
|
68
|
+
"pp-dev": {
|
|
69
|
+
"backendBaseURL": "https://example.metricinsights.com",
|
|
70
|
+
"portalPageId": 1
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Vite configuration
|
|
76
|
+
|
|
77
|
+
If you need to change something in the build you can define `vite.config` file.
|
|
78
|
+
More description you can find [here](https://vitejs.dev/config/)
|
|
79
|
+
|
|
80
|
+
### Configuration API description
|
|
81
|
+
|
|
82
|
+
#### `backendBaseURL`
|
|
83
|
+
|
|
84
|
+
Type: String
|
|
85
|
+
|
|
86
|
+
Example: `https://example.metricinsights.com`
|
|
87
|
+
|
|
88
|
+
Description: Defines the backend URL (Metric Insights instance) that is used for proxying requests to the MI backend
|
|
89
|
+
|
|
90
|
+
#### `portalPageId`
|
|
91
|
+
|
|
92
|
+
Type: Number
|
|
93
|
+
|
|
94
|
+
Example: `1`
|
|
95
|
+
|
|
96
|
+
Description: Defines the Portal Page Id that used to get portal page variables values.
|
|
97
|
+
|
|
98
|
+
#### `miHudLess`
|
|
99
|
+
|
|
100
|
+
Type: Boolean
|
|
101
|
+
|
|
102
|
+
Default: `false`
|
|
103
|
+
|
|
104
|
+
Example: `true`
|
|
105
|
+
|
|
106
|
+
Description: Disables Metric Insights navigation bar for local development
|
|
107
|
+
|
|
108
|
+
#### `templateLess`
|
|
109
|
+
|
|
110
|
+
Type: Boolean
|
|
111
|
+
|
|
112
|
+
Default: `false`
|
|
113
|
+
|
|
114
|
+
Example: `true`
|
|
115
|
+
|
|
116
|
+
Description: Disables template variables transforming. Used when you develop the portal page without a template
|
|
117
|
+
|
|
118
|
+
### CLI API description
|
|
119
|
+
|
|
120
|
+
- `pp-dev help` - show CLI's help
|
|
121
|
+
|
|
122
|
+
- `pp-dev` or `pp-dev serve` or `pp-dev dev` runs application in development mode
|
|
123
|
+
- `pp-dev build` starts the application build. Will create `dist` and `dist-zip` folders. `dist` folder contains unzipped build files. `dist-zip` contains file `<package-name>.zip` with files from the `dist` folder
|
|
124
|
+
|
|
13
125
|
## Migration guide from old portal page helper to new
|
|
14
126
|
|
|
15
127
|
1. You need to initialize npm in your portal page repository (if you have `package.json` file in PP folder, you can skip this step):
|
|
@@ -24,8 +136,8 @@ $ npm i @metricinsights/pp-dev
|
|
|
24
136
|
```shell
|
|
25
137
|
$ npm i @metricinsights/pp-dev
|
|
26
138
|
```
|
|
27
|
-
|
|
28
139
|
3. You need to create two scripts in `package.json` script section.
|
|
140
|
+
|
|
29
141
|
- `start` script: `"start": "pp-dev"`
|
|
30
142
|
- `build` script: `"build": "pp-dev build"`
|
|
31
143
|
|
package/dist/client/client.css
CHANGED
|
@@ -1,18 +1,51 @@
|
|
|
1
1
|
.pp-dev-info {
|
|
2
2
|
position: fixed;
|
|
3
3
|
z-index: 10000;
|
|
4
|
-
|
|
4
|
+
white-space: nowrap;
|
|
5
5
|
width: fit-content;
|
|
6
|
-
height:
|
|
7
|
-
top: calc(100% -
|
|
6
|
+
height: 25px;
|
|
7
|
+
top: calc(100% - 25px);
|
|
8
8
|
right: 0;
|
|
9
9
|
text-align: center;
|
|
10
|
-
padding:
|
|
11
|
-
background-color: #
|
|
10
|
+
padding: 3px 8px 3px 0;
|
|
11
|
+
background-color: #ffffff;
|
|
12
12
|
border-radius: 3px 0 0 0;
|
|
13
13
|
color: #333;
|
|
14
14
|
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
|
|
15
|
+
box-sizing: border-box;
|
|
15
16
|
display: flex;
|
|
17
|
+
transition: all 0.3s;
|
|
18
|
+
}
|
|
19
|
+
.pp-dev-info__wrap-btn {
|
|
20
|
+
box-sizing: content-box;
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
max-width: 13px;
|
|
24
|
+
width: 100%;
|
|
25
|
+
margin-right: 10px;
|
|
26
|
+
padding-left: 10px;
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
}
|
|
29
|
+
.pp-dev-info__wrap-btn:hover {
|
|
30
|
+
animation: arrowHover 0.8s linear infinite;
|
|
31
|
+
}
|
|
32
|
+
.pp-dev-info__wrap-btn-arrow {
|
|
33
|
+
width: 13px;
|
|
34
|
+
}
|
|
35
|
+
.pp-dev-info.closed {
|
|
36
|
+
transform: translateX(calc(100% - 27px));
|
|
37
|
+
height: 20px;
|
|
38
|
+
top: calc(100% - 20px);
|
|
39
|
+
}
|
|
40
|
+
.pp-dev-info.closed .pp-dev-info__wrap-btn:hover {
|
|
41
|
+
animation: arrowHover 1.2s linear infinite;
|
|
42
|
+
}
|
|
43
|
+
.pp-dev-info.closed .pp-dev-info__wrap-btn .pp-dev-info__wrap-btn-arrow {
|
|
44
|
+
transform: rotate(180deg);
|
|
45
|
+
max-width: 12px;
|
|
46
|
+
}
|
|
47
|
+
.pp-dev-info.closed .pp-dev-info__wrap-btn {
|
|
48
|
+
margin-left: -2px;
|
|
16
49
|
}
|
|
17
50
|
.pp-dev-info .sync-button {
|
|
18
51
|
background-color: transparent;
|
|
@@ -26,6 +59,22 @@
|
|
|
26
59
|
.pp-dev-info .sync-button.syncing svg {
|
|
27
60
|
animation: rotation 2s linear infinite;
|
|
28
61
|
}
|
|
62
|
+
.pp-dev-info .margin-5 {
|
|
63
|
+
margin-right: 5px;
|
|
64
|
+
}
|
|
65
|
+
.pp-dev-info .margin-10 {
|
|
66
|
+
margin-right: 10px;
|
|
67
|
+
}
|
|
68
|
+
.pp-dev-info .custom-font {
|
|
69
|
+
font-family: sans-serif;
|
|
70
|
+
font-size: 13px;
|
|
71
|
+
font-weight: 300;
|
|
72
|
+
vertical-align: middle;
|
|
73
|
+
line-height: 1.5;
|
|
74
|
+
}
|
|
75
|
+
.pp-dev-info .custom-font:not(.not-colored) a {
|
|
76
|
+
color: rgb(0, 123, 255);
|
|
77
|
+
}
|
|
29
78
|
@keyframes rotation {
|
|
30
79
|
0% {
|
|
31
80
|
transform: rotate(0deg) matrix(1, 0, 0, -1, 0, 0);
|
|
@@ -33,4 +82,15 @@
|
|
|
33
82
|
100% {
|
|
34
83
|
transform: rotate(360deg) matrix(1, 0, 0, -1, 0, 0);
|
|
35
84
|
}
|
|
85
|
+
}
|
|
86
|
+
@keyframes arrowHover {
|
|
87
|
+
0% {
|
|
88
|
+
transform: translateX(2px);
|
|
89
|
+
}
|
|
90
|
+
50% {
|
|
91
|
+
transform: translateX(-2px);
|
|
92
|
+
}
|
|
93
|
+
100% {
|
|
94
|
+
transform: translateX(2px);
|
|
95
|
+
}
|
|
36
96
|
}
|
package/dist/client/client.js
CHANGED
|
@@ -4,6 +4,15 @@ if (import.meta.hot) {
|
|
|
4
4
|
window.location.href = data.url;
|
|
5
5
|
});
|
|
6
6
|
const syncButton = document.getElementById('sync-template');
|
|
7
|
+
const clientWrapButton = document.querySelector('.pp-dev-info__wrap-btn svg');
|
|
8
|
+
const bottomInfoPanel = document.querySelector('.pp-dev-info');
|
|
9
|
+
if (clientWrapButton && bottomInfoPanel) {
|
|
10
|
+
clientWrapButton.addEventListener('click', (e) => {
|
|
11
|
+
e.preventDefault();
|
|
12
|
+
bottomInfoPanel.classList.toggle('closed');
|
|
13
|
+
clientWrapButton.classList.toggle('closed');
|
|
14
|
+
});
|
|
15
|
+
}
|
|
7
16
|
if (syncButton) {
|
|
8
17
|
hot.on('template:sync:response', (payload) => {
|
|
9
18
|
syncButton.classList.remove('syncing');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"client.js","sources":["index.ts"],"sourcesContent":[null],"names":[],"mappings":"AAIA,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE;AACnB,IAAA,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC;IAE5B,GAAG,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,IAAqB,KAAI;QAC3C,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;AAClC,KAAC,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,QAAQ,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"client.js","sources":["index.ts"],"sourcesContent":[null],"names":[],"mappings":"AAIA,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE;AACnB,IAAA,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC;IAE5B,GAAG,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,IAAqB,KAAI;QAC3C,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;AAClC,KAAC,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,QAAQ,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;IAE5D,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAC9E,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAE/D,IAAI,gBAAgB,IAAI,eAAe,EAAE;QACvC,gBAAgB,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,KAAI;YAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;AAEnB,YAAA,eAAe,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAC3C,YAAA,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAC9C,SAAC,CAAC,CAAC;AACJ,KAAA;AAED,IAAA,IAAI,UAAU,EAAE;QACd,GAAG,CAAC,EAAE,CAAC,wBAAwB,EAAE,CAAC,OAAO,KAAI;AAC3C,YAAA,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;AAEvC,YAAA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACvB,SAAC,CAAC,CAAC;QAEH,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,EAAE,KAAI;YAC1C,EAAE,CAAC,cAAc,EAAE,CAAC;AAEpB,YAAA,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;AAEpC,YAAA,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;AAChC,SAAC,CAAC,CAAC;AACJ,KAAA;AACF","x_google_ignoreList":[0]}
|
package/dist/client/index.html
CHANGED
|
@@ -1,27 +1,32 @@
|
|
|
1
1
|
{%# This is EJS template. Parameters: openDelimiter: "{", closeDelimiter="}" %}
|
|
2
2
|
<div class="pp-dev-info">
|
|
3
|
+
|
|
4
|
+
<div class="pp-dev-info__wrap-btn">
|
|
5
|
+
<svg class="pp-dev-info__wrap-btn-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M218.101 38.101L198.302 57.9c-4.686 4.686-4.686 12.284 0 16.971L353.432 230H12c-6.627 0-12 5.373-12 12v28c0 6.627 5.373 12 12 12h341.432l-155.13 155.13c-4.686 4.686-4.686 12.284 0 16.971l19.799 19.799c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L235.071 38.101c-4.686-4.687-12.284-4.687-16.97 0z"/></svg>
|
|
6
|
+
</div>
|
|
7
|
+
|
|
3
8
|
<span>
|
|
4
|
-
<span
|
|
9
|
+
<span class="margin-5 custom-font not-colored"
|
|
5
10
|
><a href="https://www.npmjs.com/package/{%= PACKAGE_NAME %}/v/{%= VERSION %}" target="_blank">
|
|
6
11
|
<b>{%= PACKAGE_NAME %}</b>: <b style="color: orange">{%= VERSION %}</b></a
|
|
7
12
|
>;
|
|
8
13
|
</span>
|
|
9
14
|
{% if (backendBaseURL) { %}
|
|
10
|
-
<span> Backend URL: <a href="!!{%= backendBaseURL %}" target="_blank">!!{%= backendBaseURL %}</a>; </span>
|
|
15
|
+
<span class="margin-5 custom-font"> Backend URL: <a href="!!{%= backendBaseURL %}" target="_blank">!!{%= backendBaseURL %}</a>; </span>
|
|
11
16
|
{% } %}
|
|
12
|
-
<span>
|
|
17
|
+
<span class="margin-5 custom-font">
|
|
13
18
|
<span>Template mode: </span>
|
|
14
19
|
{% if (templateLess || !backendBaseURL || Number.isNaN(+portalPageId)) { %}
|
|
15
20
|
<b style="color: red">Disabled</b>; {% } else { %} <b style="color: green">Enabled</b>; {% } %}
|
|
16
21
|
</span>
|
|
17
22
|
{% if (backendBaseURL && !Number.isNaN(+portalPageId)) { %}
|
|
18
|
-
<span
|
|
23
|
+
<span class="margin-5 custom-font"
|
|
19
24
|
>Portal page ID:
|
|
20
25
|
<a href="!!{%= backendBaseURL %}/admin/page/edit/id/{%= portalPageId %}" target="_blank">{%= portalPageId %}</a>;
|
|
21
26
|
</span>
|
|
22
27
|
{% } %}
|
|
23
28
|
</span>
|
|
24
|
-
{% if (!templateLess && backendBaseURL && Number.isNaN(+portalPageId)) { %}
|
|
29
|
+
{% if (!templateLess && backendBaseURL && !Number.isNaN(+portalPageId)) { %}
|
|
25
30
|
<button id="sync-template" class="sync-button" title="Sync template (Not implemented yet)">
|
|
26
31
|
<svg
|
|
27
32
|
fill="#007BFF"
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@metricinsights/pp-dev",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.3",
|
|
5
5
|
"description": "Portal Page dev build tool",
|
|
6
6
|
"bin": {
|
|
7
7
|
"pp-dev": "bin/pp-dev.js"
|
|
@@ -13,7 +13,8 @@
|
|
|
13
13
|
"build": "npm run build:node && npm run build:client",
|
|
14
14
|
"build:node": "tsc",
|
|
15
15
|
"build:client": "rollup --config src/client/rollup.config.ts --configPlugin typescript",
|
|
16
|
-
"test": "cd test && npm run build"
|
|
16
|
+
"test": "cd test && npm run build",
|
|
17
|
+
"version": "npm version --commit-hooks false --git-tag-version false"
|
|
17
18
|
},
|
|
18
19
|
"exports": {
|
|
19
20
|
".": {
|
|
@@ -51,6 +52,7 @@
|
|
|
51
52
|
"@types/ejs": "^3.1.2",
|
|
52
53
|
"@types/express": "^4.17.17",
|
|
53
54
|
"@types/jsdom": "^21.1.1",
|
|
55
|
+
"prettier": "^2.8.8",
|
|
54
56
|
"rimraf": "^5.0.1",
|
|
55
57
|
"rollup": "^3.23.0",
|
|
56
58
|
"rollup-plugin-scss": "^3.0.0",
|
|
@@ -64,5 +66,25 @@
|
|
|
64
66
|
"LICENSE.md",
|
|
65
67
|
"pp-dev.d.ts",
|
|
66
68
|
"assets"
|
|
67
|
-
]
|
|
69
|
+
],
|
|
70
|
+
"types": "./dist/index.d.ts",
|
|
71
|
+
"directories": {
|
|
72
|
+
"test": "test"
|
|
73
|
+
},
|
|
74
|
+
"repository": {
|
|
75
|
+
"type": "git",
|
|
76
|
+
"url": "git+https://github.com/mi-examples/pp-dev-js.git"
|
|
77
|
+
},
|
|
78
|
+
"keywords": [
|
|
79
|
+
"mi",
|
|
80
|
+
"metricinsights",
|
|
81
|
+
"pp",
|
|
82
|
+
"portal",
|
|
83
|
+
"pages",
|
|
84
|
+
"helper"
|
|
85
|
+
],
|
|
86
|
+
"bugs": {
|
|
87
|
+
"url": "https://github.com/mi-examples/pp-dev-js/issues"
|
|
88
|
+
},
|
|
89
|
+
"homepage": "https://github.com/mi-examples/pp-dev-js#readme"
|
|
68
90
|
}
|