@vcmap/plugin-cli 2.0.7 → 2.0.10

package/LICENSE.md

@@ -1,4 +1,4 @@
-Copyright 2021 virtualcitySYSTEMS GmbH
+Copyright 2022 virtualcitySYSTEMS GmbH
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/README.md

@@ -79,7 +79,32 @@ By default, this will launch a dev server at localhost:5005 using the @vcmap/ui
 as its base. Alternatively you can provide a URL to a hosted VC Map application
 and use said application as its base instead.
 
-### 4. Building a plugin
+### 4. Building a plugin staging application 
+
+A staging application creates a full deployable VC Map in the `dist` folder with the following components.
+- compiled @vcmap/ui library and all dependencies
+- default @vcmap/ui configurations
+- default @vcmap/ui plugins
+- compiled plugin which is in development. 
+
+Building the staging application will collect all parts and will inject the plugin in development in the default
+map configuration. The staging application can for example be used to deploy the App in an Apache in a postCommit 
+Pipeline. (See .gitlab-ci.yml for an example).
+```bash
+npx vcmplugin buildStagingApp
+```
+To start a webserver to serve the content of the `dist` folder call `npx vite preview`; This will start a static webserver
+on the port 4173.
+
+The Dockerfile in `build/staging/Dockerfile` can be used to create a Docker Container which serves the content of the dist folder.
+```bash
+npx vcmplugin buildStagingApp
+cd dist
+docker build -f ../build/staging/Dockerfile -t vcmap:staging .
+docker run --rm -p 5000:80 vcmap:staging
+```
+
+### 5. Building a plugin
 
 To build your project, run the following from within your projects root:
 ```bash
@@ -87,7 +112,7 @@ npx vcmplugin build
 ```
 This will build your application and place it in the `dist` directory.
 
-### 5. Integrating a plugin in a productive VC MAP
+### 6. Integrating a plugin in a productive VC MAP
 
 To pack your project for productive use, run the following from within your projects root:
 ```bash
@@ -114,7 +139,6 @@ as peer dependencies if you use them in your plugin:
 - @vcmap/cesium
 - ol
 - vue
-- @vue/composition-api
 - vuetify
 
 During the build step, these libraries are automatically externalized by the vcmplugin-cli and in
@@ -154,6 +178,7 @@ to create your project, a template already adhering to these specs will be creat
     - `config.json` with default parameters for the plugins' configuration.
     - `README.md` describing the plugins' capabilities and usage.
     - `src/index.js` JS entry point.
+- A plugin _may_ provide static plugin assets in a `plugin-assets` directory. (See [About Plugin Assets](#About-Plugin-Assets)
 - Plugin names are defined by the plugins' package name and therefore must obey npm [package name guidelines](https://docs.npmjs.com/package-name-guidelines):
     - choose a name that
         - is unique
@@ -167,7 +192,7 @@ to create your project, a template already adhering to these specs will be creat
 - Plugin dependencies have to be defined in the `package.json`.
     - `dependency`: all plugin specific dependencies NOT provided by the `@vcmap/ui`.
     - `peerDependency`: dependencies provided by the `@vcmap/ui`, 
-    - e.g. `@vcmap/core` or `@vcmap/ui` (see [About Peer Dependencies](#About_Peer_Dependencies) for more details)
+    - e.g. `@vcmap/core` or `@vcmap/ui` (see [About Peer Dependencies](#About-Peer-Dependencies) for more details)
     - `devDependency`: all dependencies only required for development, e.g. `eslint`.
 - Plugins can be published to NPM, but should contain both source and minified code 
 to allow seamless integration into the [VC Map UI](https://github.com/virtualcitySYSTEMS/map-ui) environment.
@@ -179,22 +204,24 @@ For this reason the package.json of a plugin defines two exports:
 }
 ```
 
-
 ### Plugin Interface:
 Plugins must provide a function default export which returns an Object complying
-with the VC Map Plugin Interface describe below:
+with the VC Map Plugin Interface describe below. This function is passed the current
+configuration of the plugin as its first argument and the base URL (without the filename)
+from which the plugin was loaded as its second argument.
 
 ```typescript
-declare interface VcsPlugin<T extends Object> {
+declare interface VcsPlugin<T extends Object, S extends Object> {
     readonly name: string;
     readonly version: string;
-    initialize(app: VcsUiApp):void;
-    onVcsAppMounted(app: VcsUiApp):void;
-    toJSON():T;
+    initialize(app: VcsUiApp, state?: S):Promise<void>;
+    onVcsAppMounted(app: VcsUiApp):Promise<void>;
+    getState():Promise<S>;
+    toJSON():Promise<T>;
     destroy():void;
 }
 
-declare function defaultExport<T extends Object>(config: T):VcsPlugin<T>;
+declare function defaultExport<T extends Object, S extends Object>(config: T, baseUrl: string):VcsPlugin<T, S>;
 ```
 
 A Simple JavaScript implementation of this interface can be seen below::
@@ -204,22 +231,79 @@ A Simple JavaScript implementation of this interface can be seen below::
  * @param {PluginExampleConfig} config
  * @returns {VcsPlugin}
  */
-export default function defaultExport(config) {
+export default function defaultExport(config, baseUrl) {
   return {
     get name() {
       return packageJSON.name;
     },
     get version() {
       return packageJSON.version;
+    }, 
+    async initialize (app, state) {
+      console.log('I was loaded from ', baseUrl);
     },
-    initialize(app) {},
-    onVcsAppMounted(app) {},
-    toJSON() {},
+    async onVcsAppMounted(app) {}, 
+    async getState() { return {}; },
+    async toJSON() { return {}; },
     destroy() {},
   }
 }
 ```
 
+### About Plugin Assets
+Plugin assets are considered to be static files, such as images, fonts etc. which shall be
+access from within the plugin. Since plugins have no knowledge of _where_ they will 
+be deployed, the `@vcmap/ui` provides the `getPluginAssetUrl` helper function
+which allows you to generate an asset URL at runtime.
+
+Place all your assets into the `plugin-assets` directory in your plugin (top level). Your
+plugin structure should look something like this:
+```
+-| my-plugin/
+---| src/
+-----| index.js
+---| plugin-assets/
+-----| icon.png
+---| package.json
+```
+
+To access the `icon.png` from within your code, you would do the following:
+```vue
+<template>
+  <v-img
+    :src="icon"
+    alt="plugin-icon"
+    max-width="200"
+  />
+</template>
+
+<script>
+  import { inject } from 'vue';
+  import { getPluginAssetUrl } from '@vcmap/ui';
+  import { name } from '../package.json';
+
+  export const windowId = 'hello_world_window_id_plugin-cli';
+
+  export default {
+    name: 'HelloWorld',
+    components: { VcsButton },
+    setup() {
+      const app = inject('vcsApp');
+
+      return {
+        icon: getPluginAssetUrl(app, name, 'plugin-assets/icon.png'),
+      };
+    },
+  };
+</script>
+```
+You can of course, use `fetch` to retrieve assets in the same fashion. Should you
+wish to use assets (such as images) in your _css_ make sure that they are embedded or
+you will have to use an inline style & a bound vue property, since the helper 
+cannot handle css resources.
+
+If you have to access assets _before_ your plugin is created (in the exported function of
+your plugin code), you will have to use the `baseUrl` provided to you to generate the URL yourself.
 
 ## Notes on Developing
 To develop the plugin-cli, be sure to not `npm link` into plugins, since this will

package/assets/helloWorld/.gitlab-ci.yml

@@ -8,8 +8,10 @@ stages:
   - build
   - test
   - bundle
+  - deploy
   - version
   - publish
+  - deployCluster
 
 .template: &job_definition
   only:
@@ -20,7 +22,6 @@ stages:
 build:
   <<: *job_definition
   script:
-    - npm set registry 'http://npmregistry:4873'
     - npm ci
   before_script:
     - mkdir -p ~/.ssh
@@ -38,6 +39,12 @@ build:
   variables:
     GIT_STRATEGY: none
 
+.staging_build_template: &staging_build_template
+  <<: *after_build_definition
+  except:
+    variables:
+      - $PUBLISH
+
 lint:
   <<: *after_build_definition
   stage: test
@@ -50,12 +57,74 @@ audit:
   script:
     - npm audit --production --audit-level=low
 
+buildPreview:
+  <<: *staging_build_template
+  stage: bundle
+  script:
+    - npm run buildStagingApp
+
 bundle:
   <<: *after_build_definition
   stage: bundle
+  only:
+    variables:
+      - $PUBLISH
+    refs:
+      - /^(main|release-v.*)$/
   script:
     - npm run build
 
+deployStaging:
+  <<: *staging_build_template
+  stage: deploy
+  environment:
+    name: staging/$CI_COMMIT_REF_SLUG
+    url: http://$CI_PROJECT_PATH_SLUG-$CI_COMMIT_REF_SLUG.stagingcluster.intern.virtualcitysystems.de
+    on_stop: stopEnvironment
+  image:
+    name: gcr.io/kaniko-project/executor:debug
+    entrypoint: [ "" ]
+  script:
+    - /kaniko/executor --context dist/ --dockerfile build/staging/Dockerfile --destination $CI_REGISTRY_IMAGE/staging:$CI_COMMIT_REF_SLUG
+  before_script:
+    - mkdir -p /kaniko/.docker
+    - echo "{\"auths\":{\"$CI_REGISTRY\":{\"username\":\"$CI_REGISTRY_USER\",\"password\":\"$CI_REGISTRY_PASSWORD\"}}}" > /kaniko/.docker/config.json
+
+stopEnvironment:
+  stage: deploy
+  variables:
+    GIT_STRATEGY: none
+  image:
+    name: bitnami/kubectl:latest
+    entrypoint: [""]
+  tags:
+    - linux-2.0
+  script:
+    - echo "Stop environment staging/$CI_COMMIT_REF_NAME"
+    - echo "Delete namespace on k9s $CI_PROJECT_PATH_SLUG-$CI_COMMIT_REF_SLUG"
+    - kubectl config use-context vcsuite/cluster-management:agent
+    - kubectl delete namespace $CI_PROJECT_PATH_SLUG-$CI_COMMIT_REF_SLUG
+  when: manual
+  environment:
+    name: staging/$CI_COMMIT_REF_SLUG
+    action: stop
+
+deployStagingCluster:
+  stage: deployCluster
+  except:
+    variables:
+      - $PUBLISH
+  inherit:
+    variables: false
+  variables:
+    STAGE_BRANCH: $CI_COMMIT_REF_SLUG
+    STAGE_PROJECT_NAME: $CI_PROJECT_PATH_SLUG
+    STAGE_REGISTRY_IMAGE: $CI_REGISTRY_IMAGE
+    STAGE_NAMESPACE: $CI_PROJECT_PATH_SLUG-$CI_COMMIT_REF_SLUG
+  trigger:
+    project: vcsuite/devops/manifests
+    branch: main
+
 version:
   <<: *after_build_definition
   stage: version
@@ -89,5 +158,5 @@ publish:
     variables:
       - $PUBLISH
   script:
-    - npm config set '//npmregistry:4873/:_authToken' "${VERDACCIO_TOKEN}"
-    - npm publish --registry http://npmregistry:4873
+    - npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}"
+    - npm publish --registry https://registry.npmjs.org --access public

package/assets/helloWorld/build/staging/Dockerfile

@@ -0,0 +1,2 @@
+FROM httpd:2-buster
+COPY * /usr/local/apache2/htdocs/

package/assets/helloWorld/src/helloWorld.vue

@@ -1,9 +1,16 @@
 <template>
-  <v-sheet>
+  <v-sheet class="hello-world">
     <v-card class="pa-2 ma-2">
       <v-container>
         <v-row class="justify-center mb-4">
-          <h1>{{ $t('helloWorld.helloWorld')}}</h1>
+          <h1>{{ $t('helloWorld.helloWorld') }}</h1>
+        </v-row>
+        <v-row class="justify-center mb-4">
+          <v-img
+            :src="logoUrl"
+            alt="plugin-assets example"
+            max-width="200"
+          />
         </v-row>
         <v-row class="justify-center">
           <VcsButton
@@ -18,11 +25,17 @@
   </v-sheet>
 </template>
 
+<style>
+.hello-world {
+  background-color: aqua;
+}
+</style>
 <script>
-  import { inject } from '@vue/composition-api';
-  import { VcsButton } from '@vcmap/ui';
+  import { inject } from 'vue';
+  import { VcsButton, getPluginAssetUrl } from '@vcmap/ui';
+  import { name } from '../package.json';
 
-  export const windowId = 'hello_world_window_id';
+  export const windowId = 'hello_world_window_id_plugin-cli';
 
   export default {
     name: 'HelloWorld',
@@ -34,6 +47,7 @@
         closeSelf() {
           app.windowManager.remove(windowId);
         },
+        logoUrl: getPluginAssetUrl(app, name, 'plugin-assets/vcs_logo.png'),
       };
     },
   };

package/assets/helloWorld/src/index.js

@@ -4,18 +4,21 @@ import HelloWorld, { windowId } from './helloWorld.vue';
 
 /**
  * @param {T} config - the configuration of this plugin instance, passed in from the app.
+ * @param {string} baseUrl - the absolute URL from which the plugin was loaded (without filename, ending on /)
  * @returns {import("@vcmap/ui/src/vcsUiApp").VcsPlugin<T>}
  * @template {Object} T
+ * @template {Object} S
  */
-export default function(config) {
+export default function(config, baseUrl) {
   return {
     get name() { return name; },
     get version() { return version; },
     /**
      * @param {import("@vcmap/ui").VcsUiApp} vcsUiApp
+     * @param {S=} state
      * @returns {Promise<void>}
      */
-    initialize: async (vcsUiApp) => {
+    initialize: async (vcsUiApp, state) => {
       console.log('Called before loading the rest of the current context. Passed in the containing Vcs UI App ');
     },
     /**
@@ -34,22 +37,30 @@ export default function(config) {
         },
       }, name);
     },
+    /**
+     * @returns {Promise<S>}
+     */
+    getState: async () => {
+      console.log('Called when serializing this plugin instance');
+      return {};
+    },
     /**
      * @returns {Promise<T>}
      */
     toJSON: async () => {
       console.log('Called when serializing this plugin instance');
+      return {};
     },
     i18n: {
       en: {
         helloWorld: {
-          helloWorld: 'Hello World',
+          helloWorld: '@vcmap/plugin-cli - Hello World',
           close: 'Close',
         },
       },
       de: {
         helloWorld: {
-          helloWorld: 'Hallo Welt',
+          helloWorld: '@vcmap/plugin-cli - Hallo Welt',
           close: 'Schließen',
         },
       },

package/cli.js

@@ -1,9 +1,12 @@
 #!/usr/bin/env node
 import program from 'commander';
 import './src/defaultCommand.js';
-import { create, serve, build, pack, preview } from './index.js';
+import {
+  create, serve, build, pack, preview,
+} from './index.js';
 import { version } from './src/create.js';
 import setupMapUi from './src/setupMapUi.js';
+import buildStagingApp from './src/buildStagingApp.js';
 
 program.version(version);
 
@@ -45,6 +48,11 @@ program
   .option('--watch', 'watch file changes')
   .safeAction(build);
 
+program
+  .command('buildStagingApp')
+  .defaultOptions()
+  .safeAction(buildStagingApp);
+
 program
   .command('setup-map-ui')
   .safeAction(setupMapUi);

package/index.js

@@ -3,5 +3,6 @@ export { default as serve } from './src/serve.js';
 export { default as build } from './src/build.js';
 export { default as pack } from './src/pack.js';
 export { default as preview } from './src/preview.js';
+export { default as buildStagingApp } from './src/buildStagingApp.js';
 export { default as setupMapUi } from './src/setupMapUi.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/plugin-cli",
-  "version": "2.0.7",
+  "version": "2.0.10",
   "description": "A CLI to help develop and build plugins for the VC Map",
   "main": "index.js",
   "type": "module",
@@ -34,15 +34,14 @@
     "prompts": "^2.4.1",
     "sass": "1.32.13",
     "semver": "^7.3.5",
-    "unplugin-vue-components": "^0.19.6",
-    "vinyl-fs": "^3.0.3",
-    "vite": "^2.9.12",
+    "unplugin-vue-components": "^0.21.1",
+    "vite": "^2.9.14",
     "vite-plugin-vue2": "^2.0.1",
-    "vue-template-compiler": "~2.6.14"
+    "vue-template-compiler": "~2.7.3"
   },
   "peerDependencies": {
-    "@vcmap/ui": "^5.0.0-rc.9",
-    "vue": "~2.6.14"
+    "@vcmap/ui": "^5.0.0-rc.11",
+    "vue": "~2.7.3"
   },
   "peerDependenciesMeta": {
     "@vcmap/ui": {

package/src/build.js

@@ -12,6 +12,8 @@ import { getContext } from './context.js';
  * @typedef {Object} BuildOptions
  * @property {boolean} [development]
  * @property {boolean} [watch]
+ * @property {string} [outputPath] path where the plugin should be written, relative to the dist folder, default ''
+ * @property {boolean} [keepDistFolder] will not clear the dist folder if set to true
  */
 
 export function getDefaultConfig() {
@@ -62,8 +64,10 @@ export default async function buildModule(options) {
   const pluginName = await getPluginName();
   const libraryPaths = await getLibraryPaths(pluginName);
   const distPath = path.join(getContext(), 'dist');
-  await fs.rm(distPath, { recursive: true, force: true });
-  await fs.mkdir(distPath);
+  if (!options.keepDistFolder) {
+    await fs.rm(distPath, { recursive: true, force: true });
+    await fs.mkdir(distPath);
+  }
   const external = Object.keys(libraryPaths);
   const config = {
     ...getDefaultConfig(),
@@ -93,5 +97,5 @@ export default async function buildModule(options) {
     },
   };
   const { buildLibrary } = await import('@vcmap/ui/build/buildHelpers.js');
-  await buildLibrary(config, '', 'index', '', true);
+  await buildLibrary(config, options.outputPath ?? '', 'index', '', true);
 }

package/src/buildStagingApp.js

@@ -0,0 +1,58 @@
+import { cp, copyFile, writeFile, rm, mkdir } from 'fs/promises';
+import path from 'path';
+import fs from 'fs';
+import { getContext, resolveContext } from './context.js';
+import { getConfigJson } from './hostingHelpers.js';
+import { getPluginName } from './packageJsonHelpers.js';
+import buildModule, { getDefaultConfig } from './build.js';
+import setupMapUi from './setupMapUi.js';
+
+
+/**
+ * creates production preview application in the dist folder based on the @vcmap/ui default map configuration.
+ * @returns {Promise<void>}
+ */
+export default async function buildStagingApp() {
+  const pluginName = await getPluginName();
+  const distPath = path.join(getContext(), 'dist');
+  // Clear dist folder
+  await rm(distPath, { recursive: true, force: true });
+  await mkdir(distPath);
+  await setupMapUi();
+  const { buildPluginsForPreview } = await import('@vcmap/ui/build/buildHelpers.js');
+  await buildPluginsForPreview(getDefaultConfig(), true);
+  await mkdir(path.join(distPath, 'plugins', pluginName), { recursive: true });
+
+  await buildModule({ outputPath: `plugins/${pluginName}`, keepDistFolder: true });
+
+  // copy assets folder if exists
+  if (fs.existsSync(resolveContext('plugin-assets'))) {
+    await cp(
+      resolveContext('plugin-assets'),
+      path.join(distPath, 'plugins', pluginName, 'plugin-assets'),
+      { recursive: true },
+    );
+  }
+
+  await copyFile(
+    path.join(getContext(), 'node_modules', '@vcmap', 'ui', 'dist', 'index.html'),
+    path.join(distPath, 'index.html'),
+  );
+  const config = await getConfigJson();
+  // update Entry
+  const pluginConfig = config.plugins.find(p => p.name === pluginName);
+  if (pluginConfig) {
+    pluginConfig.entry = `plugins/${pluginName}/index.js`;
+  }
+  await writeFile(path.join(distPath, 'map.config.json'), JSON.stringify(config, null, 2));
+  await cp(
+    path.join(getContext(), 'node_modules', '@vcmap', 'ui', 'dist', 'assets'),
+    path.join(distPath, 'assets'),
+    { recursive: true },
+  );
+  await cp(
+    path.join(getContext(), 'node_modules', '@vcmap', 'ui', 'config'),
+    path.join(distPath, 'config'),
+    { recursive: true },
+  );
+}

package/src/create.js

@@ -9,6 +9,7 @@ import { LicenseType, writeLicense } from './licenses.js';
 import { getDirname } from './hostingHelpers.js';
 
 export const { version, name } = JSON.parse(fs.readFileSync(path.join(getDirname(), '..', 'package.json')).toString());
+const exec = util.promisify(childProcess.exec);
 
 /**
  * @typedef {Object} PluginTemplateOptions
@@ -19,11 +20,54 @@ export const { version, name } = JSON.parse(fs.readFileSync(path.join(getDirname
  * @property {string} author
  * @property {string} repository
  * @property {string} license
- * @property {string} registry
- * @property {boolean} addCiCd
  * @property {Array<string>} peerDeps
  */
 
+/**
+ * @enum {number}
+ */
+const DepType = {
+  DEP: 1,
+  PEER: 2,
+  DEV: 3,
+};
+
+/**
+ * @param {Array<string>} deps
+ * @param {DepType} type
+ * @param {string} pluginPath
+ * @returns {Promise<void>}
+ */
+async function installDeps(deps, type, pluginPath) {
+  let save = '--save';
+  if (type === DepType.PEER) {
+    save = '--save-peer';
+  } else if (type === DepType.DEV) {
+    save = '--save-dev';
+  }
+  const installCmd = `npm i ${save} ${deps.join(' ')}`;
+  const { stdout, stderr } = await exec(installCmd, { cwd: pluginPath });
+  logger.log(stdout);
+  logger.error(stderr);
+}
+
+/**
+ * @param {Array<string>} deps
+ * @param {string} pluginPath
+ * @returns {Promise<void>}
+ */
+async function setUiPeerDepVersions(deps, pluginPath) {
+  const uiPackageJsonContent = await fs.promises.readFile(
+    path.join(pluginPath, 'node_modules', '@vcmap', 'ui', 'package.json'),
+  );
+  const uiPackageJson = JSON.parse(uiPackageJsonContent);
+  deps.forEach((dep, index) => {
+    if (uiPackageJson.peerDependencies[dep]) {
+      deps[index] = `${dep}@${uiPackageJson.peerDependencies[dep]}`;
+    }
+  });
+}
+
 /**
  * @param {PluginTemplateOptions} options
  */
@@ -100,7 +144,7 @@ async function createPluginTemplate(options) {
 
   const writeNpmrcPromise = fs.promises.writeFile(
     path.join(pluginPath, '.npmrc'),
-    `registry=${options.registry}\n`,
+    'registry=https://registry.npmjs.org\n',
   );
 
   const writeReadmePromise = fs.promises.writeFile(
@@ -137,21 +181,15 @@ async function createPluginTemplate(options) {
 
 
   logger.spin('installing dependencies... (this may take a while)');
-  const exec = util.promisify(childProcess.exec);
   try {
-    options.peerDeps.push('@vcmap/ui');
-    const installCmd = `npm i --save-peer ${options.peerDeps.join(' ')}`;
-    const { stdout, stderr } = await exec(installCmd, { cwd: pluginPath });
-    logger.log(stdout);
-    logger.error(stderr);
+    await installDeps(['@vcmap/ui'], DepType.PEER, pluginPath);
+    await setUiPeerDepVersions(options.peerDeps, pluginPath);
+    await installDeps(options.peerDeps, DepType.PEER, pluginPath);
     const devDeps = [`${name}@${version}`];
     if (installEsLint) {
       devDeps.push('@vcsuite/eslint-config');
     }
-    const installDevCmd = `npm i --save-dev ${devDeps.join(' ')}`;
-    const { stdout: stdoutDev, stderr: stderrDev } = await exec(installDevCmd, { cwd: pluginPath });
-    logger.log(stdoutDev);
-    logger.error(stderrDev);
+    await installDeps(devDeps, DepType.DEV, pluginPath);
     logger.success('installed dependencies');
   } catch (e) {
     logger.error(e);
@@ -170,14 +208,16 @@ export default async function create() {
     { title: 'pack', value: { pack: 'vcmplugin pack' }, selected: true },
     { title: 'start', value: { start: 'vcmplugin serve' }, selected: true },
     { title: 'preview', value: { preview: 'vcmplugin preview' }, selected: true },
+    { title: 'buildStagingApp', value: { buildStagingApp: 'vcmplugin buildStagingApp' }, selected: true },
     { title: 'lint', value: { lint: 'eslint "{src,tests}/**/*.{js,vue}"' }, selected: true },
   ];
 
   const peerDependencyChoices = [
     { title: '@vcmap/core', value: '@vcmap/core' },
     { title: '@vcmap/cesium', value: '@vcmap/cesium' },
-    { title: 'ol', value: 'ol@~6.13.0' },
-    { title: '@vue/composition-api', value: '@vue/composition-api@~1.4.5' },
+    { title: 'ol', value: 'ol' },
+    { title: 'vue', value: 'vue' },
+    { title: 'vuetify', value: 'vuetify' },
   ];
 
   const questions = [
@@ -239,12 +279,6 @@ export default async function create() {
           value: type,
         })),
     },
-    {
-      type: 'text',
-      name: 'registry',
-      message: 'Set default npm registry',
-      initial: 'https://registry.npmjs.org',
-    },
     {
       name: 'peerDeps',
       type: 'multiselect',
@@ -252,14 +286,6 @@ export default async function create() {
       choices: peerDependencyChoices,
       hint: '- Space to select. Enter to submit',
     },
-    {
-      type: 'toggle',
-      name: 'addCiCd',
-      message: 'Add default VCS gitlab ci/cd?',
-      initial: false,
-      active: 'yes',
-      inactive: 'no',
-    },
   ];
 
   const answers = await prompts(questions, { onCancel() { process.exit(0); } });

package/src/hostingHelpers.js

@@ -269,6 +269,16 @@ export async function getMapUiIndexHtml(production) {
   return buffer.toString();
 }
 
+/**
+ * @param {Express} app
+ * @param {string} base
+ */
+export function addPluginAssets(app, base) {
+  app.use(`/${base}/plugin-assets*`, (req, res) => {
+    res.redirect(308, req.originalUrl.replace(`/${base}`, ''));
+  });
+}
+
 /**
  * @param {Express} app
  * @param {import("vite").ViteDevServer} server

package/src/pack.js

@@ -1,40 +1,10 @@
-import { Transform } from 'stream';
 import fs from 'fs';
-import vinylFs from 'vinyl-fs';
 import archiver from 'archiver';
 import { logger } from '@vcsuite/cli-logger';
 import { getPluginName } from './packageJsonHelpers.js';
-import { resolveContext, getContext } from './context.js';
+import { resolveContext } from './context.js';
 import build from './build.js';
 
-/**
- * @param {string} name
- * @returns {Promise<void>}
- */
-function replaceAssets(name) {
-  const replaceTransform = new Transform({
-    objectMode: true,
-    transform(data, encoding, callback) {
-      data.contents = Buffer.from(String(data.contents)
-        .replace(/\.?\/?(plugin-assets)\//g, `plugins/${name}/$1/`));
-
-      callback(null, data);
-    },
-  });
-
-  const context = getContext();
-  const stream = vinylFs.src([resolveContext('dist', '*')], {
-    cwd: context,
-    allowEmpty: false,
-  })
-    .pipe(replaceTransform)
-    .pipe(vinylFs.dest(resolveContext('dist')));
-
-  return new Promise((resolve, reject) => {
-    stream.on('finish', () => { resolve(); });
-    stream.on('error', reject);
-  });
-}
 
 /**
  * @returns {Promise<void>}
@@ -89,7 +59,6 @@ function zip(name) {
       ['README.md'],
       ['config.json'],
       ['dist', 'index.js'],
-      ['dist', 'style.css'],
     ].forEach((fileArray) => {
       const file = resolveContext(...fileArray);
       if (fs.existsSync(file)) {
@@ -114,8 +83,6 @@ export default async function pack() {
   const pluginName = await getPluginName();
   logger.spin(`building plugin: ${pluginName}`);
   await build({});
-  await replaceAssets(pluginName);
-  logger.debug('fixed asset paths');
   await ensureConfigJson();
   logger.debug('ensuring config.json');
   await zip(pluginName);

package/src/preview.js

@@ -7,6 +7,7 @@ import {
   addConfigRoute,
   addIndexRoute,
   addMapConfigRoute,
+  addPluginAssets,
   checkReservedDirectories,
   createConfigJsonReloadPlugin,
   printVcmapUiVersion, resolveMapUi,
@@ -83,6 +84,7 @@ export default async function preview(options) {
 
   addMapConfigRoute(app, options.vcm ? `${options.vcm}/map.config.json` : null, options.auth, options.config, true);
   addIndexRoute(app, server, true, options.vcm, options.auth);
+  addPluginAssets(app, 'dist');
 
   if (!options.vcm) {
     logger.spin('compiling preview');

package/src/serve.js

@@ -10,7 +10,7 @@ import { getContext } from './context.js';
 import {
   addConfigRoute,
   addIndexRoute,
-  addMapConfigRoute,
+  addMapConfigRoute, addPluginAssets,
   checkReservedDirectories,
   createConfigJsonReloadPlugin,
   printVcmapUiVersion,
@@ -114,6 +114,7 @@ export default async function serve(options) {
 
   addMapConfigRoute(app, options.mapConfig, options.auth, options.config);
   addIndexRoute(app, server);
+  addPluginAssets(app, 'src');
   await addConfigRoute(app, options.auth, options.config);
 
   app.use(server.middlewares);

package/assets/helloWorld/.gitignore

@@ -1,2 +0,0 @@
-node_modules/
-dist/