@vcmap/plugin-cli 2.1.4 → 2.1.6
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 +115 -74
- package/assets/.gitlab-ci.yml +2 -2
- package/assets/index.html +29 -29
- package/assets/index.js +15 -4
- package/cli.js +13 -24
- package/index.js +0 -1
- package/package.json +9 -5
- package/src/build.js +11 -9
- package/src/buildStagingApp.js +32 -9
- package/src/create.js +82 -45
- package/src/defaultCommand.js +15 -7
- package/src/hostingHelpers.js +101 -64
- package/src/pack.js +11 -4
- package/src/pluginCliHelper.js +11 -1
- package/src/preview.js +42 -13
- package/src/serve.js +41 -30
- package/src/update.js +5 -2
package/README.md
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
# @vcmap/plugin-cli
|
|
2
|
+
|
|
2
3
|
> Part of the [VC Map Project](https://github.com/virtualcitySYSTEMS/map-ui)
|
|
3
4
|
|
|
4
|
-
> **Note: This documentation is for version 2, compatible with the [VC Map](https://github.com/virtualcitySYSTEMS/map-ui) v5.
|
|
5
|
+
> **Note: This documentation is for version 2, compatible with the [VC Map](https://github.com/virtualcitySYSTEMS/map-ui) v5.
|
|
5
6
|
> For documentation on version 1 compatible with VC Map v4, see [this tag](https://github.com/virtualcitySYSTEMS/map-plugin-cli/tree/v1.1.1)
|
|
6
|
-
> and be sure to install using `npm i -g @vcmap/plugin-cli@^1.1.0`**
|
|
7
|
+
> and be sure to install using `npm i -g @vcmap/plugin-cli@^1.1.0`**
|
|
7
8
|
|
|
8
9
|
The `@vcmap/plugin-cli` helps develop and build plugins for the **VC Map**.
|
|
9
10
|
|
|
@@ -17,41 +18,47 @@ The `@vcmap/plugin-cli` helps develop and build plugins for the **VC Map**.
|
|
|
17
18
|
|
|
18
19
|
## Prerequisite
|
|
19
20
|
|
|
20
|
-
You need [nodejs](https://nodejs.org/en/) 16 and npm installed on your system
|
|
21
|
+
You need [nodejs](https://nodejs.org/en/) 16 and npm installed on your system
|
|
21
22
|
to use this tool.
|
|
22
23
|
|
|
23
24
|
## Installation
|
|
25
|
+
|
|
24
26
|
To install in your project:
|
|
27
|
+
|
|
25
28
|
```shell
|
|
26
29
|
npm i -D @vcmap/plugin-cli
|
|
27
30
|
```
|
|
28
31
|
|
|
29
32
|
To install globally:
|
|
33
|
+
|
|
30
34
|
```shell
|
|
31
35
|
npm i -g @vcmap/plugin-cli
|
|
32
36
|
```
|
|
33
37
|
|
|
34
38
|
## Usage
|
|
39
|
+
|
|
35
40
|
You can use the following workflow to quickly develop plugins. Note, that
|
|
36
|
-
the `@vcmap/plugin-cli` does _not_ directly depend on `@vcmap/ui` to avoid version
|
|
41
|
+
the `@vcmap/plugin-cli` does _not_ directly depend on `@vcmap/ui` to avoid version
|
|
37
42
|
conflicts in the used API within a plugin. This means, that _all_ commands
|
|
38
|
-
(except for the `create` command) must be executed from within an installed
|
|
39
|
-
plugin cli _within the plugin itself_ using npx. When using the `create`
|
|
40
|
-
command, the `@vcmap/plugin-cli` will automatically be installed as a devDependency in
|
|
43
|
+
(except for the `create` command) must be executed from within an installed
|
|
44
|
+
plugin cli _within the plugin itself_ using npx. When using the `create`
|
|
45
|
+
command, the `@vcmap/plugin-cli` will automatically be installed as a devDependency in
|
|
41
46
|
its current major version. You can then use either the scripts defined
|
|
42
47
|
by the template in your package.json `npm start`, `npm run pack` etc. or `npx`
|
|
43
48
|
to execute CLI commands.
|
|
44
49
|
|
|
45
50
|
All commands have (optional) cli options. Run `vcmplugin --help` or `vcmplugin help [command]` for more information.
|
|
46
|
-
For `serve` and `preview` you can alternatively define a `vcs.config.js` in your plugin's root directory.
|
|
51
|
+
For `serve` and `preview` you can alternatively define a `vcs.config.js` in your plugin's root directory.
|
|
47
52
|
For more information see [here](#vcm-config-js).
|
|
48
53
|
|
|
49
54
|
### 1. Creating a new plugin
|
|
50
55
|
|
|
51
56
|
To create a new plugin template, run the following:
|
|
57
|
+
|
|
52
58
|
```
|
|
53
59
|
vcmplugin create
|
|
54
60
|
```
|
|
61
|
+
|
|
55
62
|
This will open a command prompt helping you to create the basic [structure of a plugin](#vc-map-plugins).
|
|
56
63
|
Be sure to check out the [peer dependecy section](#about-peer-dependencies) as well.
|
|
57
64
|
|
|
@@ -60,13 +67,15 @@ Optionally, in step 7 of the create-prompt you can choose an existing plugin [@v
|
|
|
60
67
|
### 2. Serving a plugin for development
|
|
61
68
|
|
|
62
69
|
To serve your plugin in dev mode, run the following within your projects root:
|
|
70
|
+
|
|
63
71
|
```
|
|
64
72
|
npx vcmplugin serve
|
|
65
73
|
```
|
|
74
|
+
|
|
66
75
|
The dev mode gives you complete debug information on all integrated libraries (@vcmap/core, ol etc.)
|
|
67
|
-
By default, this command will launch a dev server at localhost:8008 using
|
|
76
|
+
By default, this command will launch a dev server at localhost:8008 using
|
|
68
77
|
the @vcmap/ui peer dependency package of your plugin as its base.
|
|
69
|
-
You can provide an alternate
|
|
78
|
+
You can provide an alternate app config if you wish.
|
|
70
79
|
|
|
71
80
|
This is the dev mode, only _your_
|
|
72
81
|
plugin will be served. Any other plugins in the config will be stripped. To view how
|
|
@@ -75,6 +84,7 @@ your plugin integrates with others, use the `preview` command.
|
|
|
75
84
|
### 3. Serving a plugin for integration
|
|
76
85
|
|
|
77
86
|
To serve your plugin in preview mode, run the following within your projects root:
|
|
87
|
+
|
|
78
88
|
```
|
|
79
89
|
npx vcmplugin preview
|
|
80
90
|
```
|
|
@@ -83,28 +93,32 @@ The preview mode allows you to view your plugin _in its destined environment_.
|
|
|
83
93
|
You can see how it interacts with other plugins & other customizations applied to a map.
|
|
84
94
|
Preview will `build` your plugin continuously and serve the production ready
|
|
85
95
|
code using a base application.
|
|
86
|
-
By default, this will launch a dev server at localhost:5005 using the @vcmap/ui package
|
|
96
|
+
By default, this will launch a dev server at localhost:5005 using the @vcmap/ui package
|
|
87
97
|
as its base. Alternatively you can provide a URL to a hosted VC Map application
|
|
88
98
|
and use said application as its base instead.
|
|
89
99
|
|
|
90
|
-
### 4. Building a plugin staging application
|
|
100
|
+
### 4. Building a plugin staging application
|
|
91
101
|
|
|
92
102
|
A staging application creates a full deployable VC Map in the `dist` folder with the following components.
|
|
103
|
+
|
|
93
104
|
- compiled @vcmap/ui library and all dependencies
|
|
94
105
|
- default @vcmap/ui configurations
|
|
95
106
|
- default @vcmap/ui plugins
|
|
96
|
-
- compiled plugin which is in development.
|
|
107
|
+
- compiled plugin which is in development.
|
|
97
108
|
|
|
98
109
|
Building the staging application will collect all parts and will inject the plugin in development in the default
|
|
99
|
-
|
|
110
|
+
app configuration. The staging application can for example be used to deploy the App in an Apache in a postCommit
|
|
100
111
|
Pipeline. (See .gitlab-ci.yml for an example).
|
|
112
|
+
|
|
101
113
|
```bash
|
|
102
114
|
npx vcmplugin buildStagingApp
|
|
103
115
|
```
|
|
116
|
+
|
|
104
117
|
To start a webserver to serve the content of the `dist` folder call `npx vite preview`; This will start a static webserver
|
|
105
118
|
on the port 4173.
|
|
106
119
|
|
|
107
120
|
The Dockerfile in `build/staging/Dockerfile` can be used to create a Docker Container which serves the content of the dist folder.
|
|
121
|
+
|
|
108
122
|
```bash
|
|
109
123
|
npx vcmplugin buildStagingApp
|
|
110
124
|
cd dist
|
|
@@ -115,33 +129,37 @@ docker run --rm -p 5000:80 vcmap:staging
|
|
|
115
129
|
### 5. Building a plugin
|
|
116
130
|
|
|
117
131
|
To build your project, run the following from within your projects root:
|
|
132
|
+
|
|
118
133
|
```bash
|
|
119
134
|
npx vcmplugin build
|
|
120
135
|
```
|
|
136
|
+
|
|
121
137
|
This will build your application and place it in the `dist` directory.
|
|
122
138
|
|
|
123
139
|
### 6. Integrating a plugin in a productive VC MAP
|
|
124
140
|
|
|
125
141
|
To pack your project for productive use, run the following from within your projects root:
|
|
142
|
+
|
|
126
143
|
```bash
|
|
127
144
|
npx vcmplugin pack
|
|
128
145
|
```
|
|
129
146
|
|
|
130
147
|
This will create a folder `dist` with a zip file containing your bundled code and assets.
|
|
131
|
-
To use the plugin productively in a hosted map,
|
|
132
|
-
unzip this file on your server to `{vcm-root}/plugins` and add
|
|
148
|
+
To use the plugin productively in a hosted map,
|
|
149
|
+
unzip this file on your server to `{vcm-root}/plugins` and add
|
|
133
150
|
an entry to your VC MAP `config` plugins section. This zip file can also be unzipped
|
|
134
151
|
in the VC Publishers `plugins` public directory.
|
|
135
152
|
|
|
136
153
|
## vcm config js
|
|
137
154
|
|
|
138
155
|
The `@vcmap/plugin-cli` supports an optional configuration file, which can be used for the commands `serve` and `preview`.
|
|
139
|
-
It's an alternative to providing cli parameters (which will still have precedence) and even has a few extra feature like proxy.
|
|
156
|
+
It's an alternative to providing cli parameters (which will still have precedence) and even has a few extra feature like proxy or inline config files.
|
|
140
157
|
This can be helpful, if you want to share specific parameters valid for a specific plugin.
|
|
141
158
|
In order to do so just save a `vcm.config.js` in your plugin's root directory.
|
|
142
159
|
This file has to return a js object as default export.
|
|
143
160
|
|
|
144
161
|
Example `vcm.config.js` defining proxy and port:
|
|
162
|
+
|
|
145
163
|
```js
|
|
146
164
|
export default {
|
|
147
165
|
// server.proxy see https://vitejs.dev/config/server-options.html#server-proxy
|
|
@@ -150,25 +168,26 @@ export default {
|
|
|
150
168
|
'/foo': 'https://vc.systems',
|
|
151
169
|
},
|
|
152
170
|
port: 5005,
|
|
153
|
-
}
|
|
171
|
+
};
|
|
154
172
|
```
|
|
155
173
|
|
|
156
174
|
The following parameters are valid:
|
|
157
175
|
|
|
158
|
-
| parameter | type
|
|
159
|
-
|
|
160
|
-
| config | string
|
|
161
|
-
|
|
|
162
|
-
|
|
|
163
|
-
|
|
|
164
|
-
|
|
|
165
|
-
|
|
|
166
|
-
|
|
176
|
+
| parameter | type | description |
|
|
177
|
+
| --------- | ------------------ | --------------------------------------------------------------------------------------------- |
|
|
178
|
+
| config | string|Object | an optional configObject or fileName to use for configuring the plugin |
|
|
179
|
+
| auth | string | potential auth string to download assets (index.html, config) with |
|
|
180
|
+
| port | number | optional alternative port (default 8008) |
|
|
181
|
+
| https | boolean | whether to use http (default) or https |
|
|
182
|
+
| appConfig | string|Object | an optional configObject resp. fileName or URL to an app config (for `serve` command) |
|
|
183
|
+
| vcm | string | a filename or URL to a map (for `preview` command) |
|
|
184
|
+
| proxy | Object | a server proxy (see [vitejs.dev](https://vitejs.dev/config/server-options.html#server-proxy)) |
|
|
167
185
|
|
|
168
186
|
## About Peer Dependencies
|
|
187
|
+
|
|
169
188
|
The [@vcmap/ui](https://github.com/virtualcitySYSTEMS/map-ui) uses some _very large libraries_, notably `CesiumJS`. To reduce the amount
|
|
170
|
-
of traffic generated for loading plugins, all large libraries (see the list below),
|
|
171
|
-
are _provided_ in production (instead of bundling them into every plugin). This
|
|
189
|
+
of traffic generated for loading plugins, all large libraries (see the list below),
|
|
190
|
+
are _provided_ in production (instead of bundling them into every plugin). This
|
|
172
191
|
a) guarantees a certain amount of type safety (using the [@vcsuite/check](https://www.npmjs.com/package/@vcsuite/check) parameter assertion library for instance),
|
|
173
192
|
b) reduces the amount of traffic required to load an application and
|
|
174
193
|
c) leverages browser
|
|
@@ -176,6 +195,7 @@ caching more readily.
|
|
|
176
195
|
|
|
177
196
|
The following libraries are provided by the @vcmap/ui in a deployed application. You should define these
|
|
178
197
|
as peer dependencies if you use them in your plugin:
|
|
198
|
+
|
|
179
199
|
- @vcmap/core
|
|
180
200
|
- @vcmap-cesium/engine
|
|
181
201
|
- ol
|
|
@@ -184,9 +204,11 @@ as peer dependencies if you use them in your plugin:
|
|
|
184
204
|
|
|
185
205
|
If you want to update your plugin to a newer version of `@vcmap/ui`, the `@vcmap/plugin-cli` provides a update tool.
|
|
186
206
|
Just change to your plugin's directory and run:
|
|
207
|
+
|
|
187
208
|
```bash
|
|
188
209
|
vcmplugin update
|
|
189
210
|
```
|
|
211
|
+
|
|
190
212
|
This will automatically update all peer dependencies defined in your plugin to the corresponding version of the latest `@vcmap/ui`.
|
|
191
213
|
|
|
192
214
|
During the build step, these libraries are automatically externalized by the `@vcmap/plugin-cli` and in
|
|
@@ -195,56 +217,65 @@ production all plugins & the map core _share_ the same cesium library.
|
|
|
195
217
|
But, to make this work, it is important to define these dependencies as _peer dependencies_ of
|
|
196
218
|
a plugin and _that the provided index files_ are used (over directly importing from the source file).
|
|
197
219
|
|
|
198
|
-
For instance:
|
|
220
|
+
For instance:
|
|
221
|
+
|
|
199
222
|
```js
|
|
200
223
|
import Cartesian3 from '@vcmap-cesium/engine/Source/Core/Cartesian3.js';
|
|
201
224
|
```
|
|
202
225
|
|
|
203
226
|
should be rewritten to:
|
|
227
|
+
|
|
204
228
|
```js
|
|
205
229
|
import { Cartesian3 } from '@vcmap-cesium/engine';
|
|
206
230
|
```
|
|
207
231
|
|
|
208
232
|
### What about openlayers?
|
|
233
|
+
|
|
209
234
|
openlayers provides a special case, since its modules do not provide a _flat_ namespace.
|
|
210
235
|
To circumvent this limitation, _the @vcmap/ui provides a flat namespaced ol.js_ and a mechanic
|
|
211
236
|
to rewrite openlayers imports. This is automatically applied by the `@vcmap/rollup-plugin-vcs-ol`
|
|
212
237
|
used by the `@vcmap/plugin-cli` build step. So openlayers imports can be written as:
|
|
238
|
+
|
|
213
239
|
```js
|
|
214
240
|
import Feature from 'ol/Feature.js';
|
|
215
241
|
```
|
|
216
|
-
|
|
242
|
+
|
|
243
|
+
or
|
|
244
|
+
|
|
217
245
|
```js
|
|
218
246
|
import { Feature } from 'ol';
|
|
219
247
|
```
|
|
220
248
|
|
|
221
249
|
## VC Map Plugins
|
|
250
|
+
|
|
222
251
|
The following defines a plugin in its rough structure. If you use the `@vcmap/plugin-cli`
|
|
223
252
|
to create your project, a template already adhering to these specs will be created for you.
|
|
253
|
+
|
|
224
254
|
- All plugins must provide the following:
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
255
|
+
- `package.json` with name, description, version, author and dependencies.
|
|
256
|
+
- `config.json` with default parameters for the plugins' configuration.
|
|
257
|
+
- `README.md` describing the plugins' capabilities and usage.
|
|
258
|
+
- `src/index.js` JS entry point.
|
|
229
259
|
- A plugin _may_ provide static plugin assets in a `plugin-assets` directory. (See [About Plugin Assets](#About-Plugin-Assets)
|
|
230
260
|
- Plugin names are defined by the plugins' package name and therefore must obey npm [package name guidelines](https://docs.npmjs.com/package-name-guidelines):
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
261
|
+
- choose a name that
|
|
262
|
+
- is unique
|
|
263
|
+
- is descriptive
|
|
264
|
+
- is lowercase
|
|
265
|
+
- is uri encode-able
|
|
266
|
+
- doesn't start with `.`, `_` or a digit
|
|
267
|
+
- doesn't contain white spaces or any special characters like `~\'!()*"`
|
|
268
|
+
- do not use scope `@vcmap`, since it is only to be used by official plugins provided
|
|
269
|
+
by virtual city systems. But you are encouraged to use your own scope.
|
|
240
270
|
- Plugin dependencies have to be defined in the `package.json`.
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
- Plugins can be published to NPM, but should contain both source and minified code
|
|
246
|
-
to allow seamless integration into the [VC Map UI](https://github.com/virtualcitySYSTEMS/map-ui) environment.
|
|
247
|
-
For this reason the package.json of a plugin defines two exports:
|
|
271
|
+
- `dependency`: all plugin specific dependencies NOT provided by the `@vcmap/ui`.
|
|
272
|
+
- `peerDependency`: dependencies provided by the `@vcmap/ui`,
|
|
273
|
+
- e.g. `@vcmap/core` or `@vcmap/ui` (see [About Peer Dependencies](#About-Peer-Dependencies) for more details)
|
|
274
|
+
- `devDependency`: all dependencies only required for development, e.g. `eslint`.
|
|
275
|
+
- Plugins can be published to NPM, but should contain both source and minified code
|
|
276
|
+
to allow seamless integration into the [VC Map UI](https://github.com/virtualcitySYSTEMS/map-ui) environment.
|
|
277
|
+
For this reason the package.json of a plugin defines two exports:
|
|
278
|
+
|
|
248
279
|
```json
|
|
249
280
|
{
|
|
250
281
|
".": "./src/index.js",
|
|
@@ -253,6 +284,7 @@ For this reason the package.json of a plugin defines two exports:
|
|
|
253
284
|
```
|
|
254
285
|
|
|
255
286
|
### Plugin Interface:
|
|
287
|
+
|
|
256
288
|
Plugins must provide a function default export which returns an Object complying
|
|
257
289
|
with the VC Map Plugin Interface describe below. This function is passed the current
|
|
258
290
|
configuration of the plugin as its first argument and the base URL (without the filename)
|
|
@@ -260,19 +292,23 @@ from which the plugin was loaded as its second argument.
|
|
|
260
292
|
|
|
261
293
|
```typescript
|
|
262
294
|
declare interface VcsPlugin<T extends Object, S extends Object> {
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
295
|
+
readonly name: string;
|
|
296
|
+
readonly version: string;
|
|
297
|
+
initialize(app: VcsUiApp, state?: S): Promise<void>;
|
|
298
|
+
onVcsAppMounted(app: VcsUiApp): Promise<void>;
|
|
299
|
+
getState(): Promise<S>;
|
|
300
|
+
toJSON(): Promise<T>;
|
|
301
|
+
destroy(): void;
|
|
270
302
|
}
|
|
271
303
|
|
|
272
|
-
declare function defaultExport<T extends Object, S extends Object>(
|
|
304
|
+
declare function defaultExport<T extends Object, S extends Object>(
|
|
305
|
+
config: T,
|
|
306
|
+
baseUrl: string,
|
|
307
|
+
): VcsPlugin<T, S>;
|
|
273
308
|
```
|
|
274
309
|
|
|
275
310
|
A Simple JavaScript implementation of this interface can be seen below::
|
|
311
|
+
|
|
276
312
|
```javascript
|
|
277
313
|
// index.js
|
|
278
314
|
/**
|
|
@@ -286,26 +322,32 @@ export default function defaultExport(config, baseUrl) {
|
|
|
286
322
|
},
|
|
287
323
|
get version() {
|
|
288
324
|
return packageJSON.version;
|
|
289
|
-
},
|
|
290
|
-
async initialize
|
|
325
|
+
},
|
|
326
|
+
async initialize(app, state) {
|
|
291
327
|
console.log('I was loaded from ', baseUrl);
|
|
292
328
|
},
|
|
293
|
-
async onVcsAppMounted(app) {},
|
|
294
|
-
async getState() {
|
|
295
|
-
|
|
329
|
+
async onVcsAppMounted(app) {},
|
|
330
|
+
async getState() {
|
|
331
|
+
return {};
|
|
332
|
+
},
|
|
333
|
+
async toJSON() {
|
|
334
|
+
return {};
|
|
335
|
+
},
|
|
296
336
|
destroy() {},
|
|
297
|
-
}
|
|
337
|
+
};
|
|
298
338
|
}
|
|
299
339
|
```
|
|
300
340
|
|
|
301
341
|
### About Plugin Assets
|
|
342
|
+
|
|
302
343
|
Plugin assets are considered to be static files, such as images, fonts etc. which shall be
|
|
303
|
-
access from within the plugin. Since plugins have no knowledge of _where_ they will
|
|
344
|
+
access from within the plugin. Since plugins have no knowledge of _where_ they will
|
|
304
345
|
be deployed, the `@vcmap/ui` provides the `getPluginAssetUrl` helper function
|
|
305
346
|
which allows you to generate an asset URL at runtime.
|
|
306
347
|
|
|
307
348
|
Place all your assets into the `plugin-assets` directory in your plugin (top level). Your
|
|
308
349
|
plugin structure should look something like this:
|
|
350
|
+
|
|
309
351
|
```
|
|
310
352
|
-| my-plugin/
|
|
311
353
|
---| src/
|
|
@@ -316,13 +358,10 @@ plugin structure should look something like this:
|
|
|
316
358
|
```
|
|
317
359
|
|
|
318
360
|
To access the `icon.png` from within your code, you would do the following:
|
|
361
|
+
|
|
319
362
|
```vue
|
|
320
363
|
<template>
|
|
321
|
-
<v-img
|
|
322
|
-
:src="icon"
|
|
323
|
-
alt="plugin-icon"
|
|
324
|
-
max-width="200"
|
|
325
|
-
/>
|
|
364
|
+
<v-img :src="icon" alt="plugin-icon" max-width="200" />
|
|
326
365
|
</template>
|
|
327
366
|
|
|
328
367
|
<script>
|
|
@@ -345,9 +384,10 @@ To access the `icon.png` from within your code, you would do the following:
|
|
|
345
384
|
};
|
|
346
385
|
</script>
|
|
347
386
|
```
|
|
387
|
+
|
|
348
388
|
You can of course, use `fetch` to retrieve assets in the same fashion. Should you
|
|
349
389
|
wish to use assets (such as images) in your _css_ make sure that they are embedded or
|
|
350
|
-
you will have to use an inline style & a bound vue property, since the helper
|
|
390
|
+
you will have to use an inline style & a bound vue property, since the helper
|
|
351
391
|
cannot handle css resources.
|
|
352
392
|
|
|
353
393
|
If you have to access assets _before_ your plugin is created (in the exported function of
|
|
@@ -356,12 +396,13 @@ your plugin code), you will have to use the `baseUrl` provided to you to generat
|
|
|
356
396
|
## About testing plugins
|
|
357
397
|
|
|
358
398
|
To test your plugin's API you can use [vitest](https://vitest.dev/).
|
|
359
|
-
The `@vcmap/hello-world` plugin contains a basic setup of a test environment including example spec using vitest.
|
|
399
|
+
The `@vcmap/hello-world` plugin contains a basic setup of a test environment including example spec using vitest.
|
|
360
400
|
You will find the required setup in your created plugin, if you chose to add `test` as script to your `package.json` during the create-prompt.
|
|
361
401
|
|
|
362
402
|
As for now, we don't do any components testing.
|
|
363
403
|
|
|
364
404
|
## Notes on Developing
|
|
405
|
+
|
|
365
406
|
To develop the plugin-cli, be sure to not `npm link` into plugins, since this will
|
|
366
|
-
throw the resolver in resolving the @vcmap/ui peer dependency from the current plugin.
|
|
407
|
+
throw the resolver in resolving the @vcmap/ui peer dependency from the current plugin.
|
|
367
408
|
Instead, run `npm pack` in the plugin cli and install the tarball in the plugin directly.
|
package/assets/.gitlab-ci.yml
CHANGED
|
@@ -93,7 +93,7 @@ deployStaging:
|
|
|
93
93
|
on_stop: stopEnvironment
|
|
94
94
|
image:
|
|
95
95
|
name: gcr.io/kaniko-project/executor:debug
|
|
96
|
-
entrypoint: [
|
|
96
|
+
entrypoint: ['']
|
|
97
97
|
script:
|
|
98
98
|
- /kaniko/executor --context dist/ --dockerfile build/staging/Dockerfile --destination $CI_REGISTRY_IMAGE/staging:$CI_COMMIT_REF_SLUG
|
|
99
99
|
before_script:
|
|
@@ -106,7 +106,7 @@ stopEnvironment:
|
|
|
106
106
|
GIT_STRATEGY: none
|
|
107
107
|
image:
|
|
108
108
|
name: bitnami/kubectl:latest
|
|
109
|
-
entrypoint: [
|
|
109
|
+
entrypoint: ['']
|
|
110
110
|
tags:
|
|
111
111
|
- linux-2.0
|
|
112
112
|
script:
|
package/assets/index.html
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html class="vcs-ui" lang="en">
|
|
3
|
-
<head>
|
|
3
|
+
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
6
|
-
</head>
|
|
7
|
-
<body style="height:
|
|
8
|
-
<noscript>
|
|
9
|
-
|
|
10
|
-
</noscript>
|
|
11
|
-
<div id="app">
|
|
12
|
-
|
|
6
|
+
</head>
|
|
7
|
+
<body style="height: 100vh">
|
|
8
|
+
<noscript>
|
|
9
|
+
<strong>...</strong>
|
|
10
|
+
</noscript>
|
|
11
|
+
<div id="app">
|
|
12
|
+
<div id="loading-wrapper">
|
|
13
13
|
<div id="loading-text">LOADING</div>
|
|
14
14
|
<div id="loading-content"></div>
|
|
15
|
+
</div>
|
|
15
16
|
</div>
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
#loading-wrapper {
|
|
17
|
+
<style>
|
|
18
|
+
#loading-wrapper {
|
|
19
19
|
position: fixed;
|
|
20
20
|
width: 100%;
|
|
21
21
|
height: 100%;
|
|
22
22
|
left: 0;
|
|
23
23
|
top: 0;
|
|
24
|
-
|
|
24
|
+
}
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
#loading-text {
|
|
27
27
|
display: block;
|
|
28
28
|
position: absolute;
|
|
29
29
|
top: 50%;
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
text-align: center;
|
|
36
36
|
font-family: 'PT Sans Narrow', sans-serif;
|
|
37
37
|
font-size: 20px;
|
|
38
|
-
|
|
38
|
+
}
|
|
39
39
|
|
|
40
|
-
|
|
40
|
+
#loading-content {
|
|
41
41
|
display: block;
|
|
42
42
|
position: relative;
|
|
43
43
|
left: 50%;
|
|
@@ -45,9 +45,9 @@
|
|
|
45
45
|
width: 170px;
|
|
46
46
|
height: 170px;
|
|
47
47
|
margin: -85px 0 0 -85px;
|
|
48
|
-
|
|
48
|
+
}
|
|
49
49
|
|
|
50
|
-
|
|
50
|
+
#loading-content {
|
|
51
51
|
border: 3px solid transparent;
|
|
52
52
|
border-top-color: #409d76;
|
|
53
53
|
border-bottom-color: #409d76;
|
|
@@ -56,22 +56,22 @@
|
|
|
56
56
|
-moz-animation: loader 2s linear infinite;
|
|
57
57
|
-o-animation: loader 2s linear infinite;
|
|
58
58
|
animation: loader 2s linear infinite;
|
|
59
|
-
|
|
59
|
+
}
|
|
60
60
|
|
|
61
|
-
|
|
61
|
+
@keyframes loader {
|
|
62
62
|
0% {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
-webkit-transform: rotate(0deg);
|
|
64
|
+
-ms-transform: rotate(0deg);
|
|
65
|
+
transform: rotate(0deg);
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
100% {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
-webkit-transform: rotate(360deg);
|
|
70
|
+
-ms-transform: rotate(360deg);
|
|
71
|
+
transform: rotate(360deg);
|
|
72
72
|
}
|
|
73
|
-
|
|
74
|
-
</style>
|
|
75
|
-
<script type="module" src="./node_modules/@vcmap/ui/start.js"></script>
|
|
76
|
-
</body>
|
|
73
|
+
}
|
|
74
|
+
</style>
|
|
75
|
+
<script type="module" src="./node_modules/@vcmap/ui/start.js"></script>
|
|
76
|
+
</body>
|
|
77
77
|
</html>
|
package/assets/index.js
CHANGED
|
@@ -15,8 +15,12 @@ export default function plugin(config, baseUrl) {
|
|
|
15
15
|
// eslint-disable-next-line no-console
|
|
16
16
|
console.log(config, baseUrl);
|
|
17
17
|
return {
|
|
18
|
-
get name() {
|
|
19
|
-
|
|
18
|
+
get name() {
|
|
19
|
+
return name;
|
|
20
|
+
},
|
|
21
|
+
get version() {
|
|
22
|
+
return version;
|
|
23
|
+
},
|
|
20
24
|
/**
|
|
21
25
|
* @param {import("@vcmap/ui").VcsUiApp} vcsUiApp
|
|
22
26
|
* @param {PluginState=} state
|
|
@@ -24,7 +28,11 @@ export default function plugin(config, baseUrl) {
|
|
|
24
28
|
*/
|
|
25
29
|
initialize: async (vcsUiApp, state) => {
|
|
26
30
|
// eslint-disable-next-line no-console
|
|
27
|
-
console.log(
|
|
31
|
+
console.log(
|
|
32
|
+
'Called before loading the rest of the current context. Passed in the containing Vcs UI App ',
|
|
33
|
+
vcsUiApp,
|
|
34
|
+
state,
|
|
35
|
+
);
|
|
28
36
|
},
|
|
29
37
|
/**
|
|
30
38
|
* @param {import("@vcmap/ui").VcsUiApp} vcsUiApp
|
|
@@ -32,7 +40,10 @@ export default function plugin(config, baseUrl) {
|
|
|
32
40
|
*/
|
|
33
41
|
onVcsAppMounted: async (vcsUiApp) => {
|
|
34
42
|
// eslint-disable-next-line no-console
|
|
35
|
-
console.log(
|
|
43
|
+
console.log(
|
|
44
|
+
'Called when the root UI component is mounted and managers are ready to accept components',
|
|
45
|
+
vcsUiApp,
|
|
46
|
+
);
|
|
36
47
|
},
|
|
37
48
|
/**
|
|
38
49
|
* @returns {T}
|
package/cli.js
CHANGED
|
@@ -1,37 +1,34 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
2
|
import program from 'commander';
|
|
3
3
|
import './src/defaultCommand.js';
|
|
4
|
-
import {
|
|
5
|
-
create, serve, build, pack, preview, update,
|
|
6
|
-
} from './index.js';
|
|
4
|
+
import { create, serve, build, pack, preview, update } from './index.js';
|
|
7
5
|
import { version } from './src/pluginCliHelper.js';
|
|
8
6
|
import setupMapUi from './src/setupMapUi.js';
|
|
9
7
|
import buildStagingApp from './src/buildStagingApp.js';
|
|
10
8
|
|
|
11
9
|
program.version(version);
|
|
12
10
|
|
|
13
|
-
program
|
|
14
|
-
.command('create')
|
|
15
|
-
.defaultOptions()
|
|
16
|
-
.safeAction(create);
|
|
11
|
+
program.command('create').defaultOptions().safeAction(create);
|
|
17
12
|
|
|
18
|
-
program
|
|
19
|
-
.command('pack')
|
|
20
|
-
.defaultOptions()
|
|
21
|
-
.safeAction(pack);
|
|
13
|
+
program.command('pack').defaultOptions().safeAction(pack);
|
|
22
14
|
|
|
23
15
|
program
|
|
24
16
|
.command('preview')
|
|
25
17
|
.defaultOptions()
|
|
26
18
|
.defaultServeOptions()
|
|
27
|
-
.option('--vcm [url]', 'URL to a virtualcityMAP application', val =>
|
|
19
|
+
.option('--vcm [url]', 'URL to a virtualcityMAP application', (val) =>
|
|
20
|
+
val.replace(/\/$/, ''),
|
|
21
|
+
)
|
|
28
22
|
.safeAction(preview);
|
|
29
23
|
|
|
30
24
|
program
|
|
31
25
|
.command('serve')
|
|
32
26
|
.defaultOptions()
|
|
33
27
|
.defaultServeOptions()
|
|
34
|
-
.option(
|
|
28
|
+
.option(
|
|
29
|
+
'--appConfig [config]',
|
|
30
|
+
'an optional app config (either file or URL) to use',
|
|
31
|
+
)
|
|
35
32
|
.safeAction(serve);
|
|
36
33
|
|
|
37
34
|
program
|
|
@@ -41,18 +38,10 @@ program
|
|
|
41
38
|
.option('--watch', 'watch file changes')
|
|
42
39
|
.safeAction(build);
|
|
43
40
|
|
|
44
|
-
program
|
|
45
|
-
.command('buildStagingApp')
|
|
46
|
-
.defaultOptions()
|
|
47
|
-
.safeAction(buildStagingApp);
|
|
41
|
+
program.command('buildStagingApp').defaultOptions().safeAction(buildStagingApp);
|
|
48
42
|
|
|
49
|
-
program
|
|
50
|
-
.command('setup-map-ui')
|
|
51
|
-
.safeAction(setupMapUi);
|
|
43
|
+
program.command('setup-map-ui').safeAction(setupMapUi);
|
|
52
44
|
|
|
53
|
-
program
|
|
54
|
-
.command('update')
|
|
55
|
-
.defaultOptions()
|
|
56
|
-
.safeAction(update);
|
|
45
|
+
program.command('update').defaultOptions().safeAction(update);
|
|
57
46
|
|
|
58
47
|
program.parse(process.argv);
|
package/index.js
CHANGED