@vcmap/plugin-cli 2.0.1 → 2.0.4

package/README.md

@@ -1,10 +1,11 @@
 # @vcmap/plugin-cli
 > Part of the [VC Map Project](https://github.com/virtualcitySYSTEMS/map-ui)
 
-The `vcmplugin` cli helps develop and build plugins for the **VC Map**.
+> **Note: This documentation is for version 2, compatible with the [VC Map](https://github.com/virtualcitySYSTEMS/map-ui) v5. 
+> For documentation on version 1 compatible with VC Map v4, see [this tag](https://github.com/virtualcitySYSTEMS/map-plugin-cli/tree/v1.1.1)
+> and be sure to install using `npm i -g @vcmap/plugin-cli@^1.1.0`** 
 
-For more information on plugin development refer to [map plugin examples](https://github.com/virtualcitySYSTEMS/map-plugin-examples),
-which provides documentations and a tutorial on plugin development.
+The `vcmplugin` cli helps develop and build plugins for the **VC Map**.
 
 ## Features
 
@@ -29,6 +30,15 @@ npm i -g @vcmap/plugin-cli
 ```
 
 ## Usage
+You can use the following workflow to quickly develop plugins. Note, that
+the `@vcmap/plugin-cli` does _not_ directly depend on `@vcmap/ui` to avoid version 
+conflicts in the used API within a plugin. This means, that _all_ commands
+(except for the `create` command) must be executed from within an installed 
+plugin cli _within the plugin itself_ using npx. When using the `create` 
+command, the `@vcmap/plugin-cli` will automatically be installed as a devDependency in 
+its current major version. You can then use either the scripts defined
+by the template in your package.json `npm start`, `npm run pack` etc. or `npx`
+to execute CLI commands.
 
 ### 1. Creating a new plugin
 
@@ -43,7 +53,7 @@ Be sure to check out the [peer dependecy section](#about_peer_dependencies) as w
 
 To serve your plugin in dev mode, run the following within your projects root:
 ```
-vcmplugin serve
+npx vcmplugin serve
 ```
 The dev mode gives you complete debug information on all integrated libraries (@vcmap/core, ol etc.)
 By default this command will launch a dev server at localhost:8008 using 
@@ -58,7 +68,7 @@ your plugin integrates with others, use the `preview` command.
 
 To serve your plugin in preview mode, run the following within your projects root:
 ```
-vcmplugin preview
+npx vcmplugin preview
 ```
 
 The preview mode allows you to view your plugin _in its destined environment_.
@@ -73,7 +83,7 @@ and use said application as its base instead.
 
 To build your project, run the following from within your projects root:
 ```bash
-vcmplugin build
+npx vcmplugin build
 ```
 This will build your application and place it in the `dist` directory.
 
@@ -81,7 +91,7 @@ This will build your application and place it in the `dist` directory.
 
 To pack your project for productive use, run the following from within your projects root:
 ```bash
-vcmplugin pack
+npx vcmplugin pack
 ```
 
 This will create a folder `dist` with a zip file containing your bundled code and assets.
@@ -137,19 +147,82 @@ or
 import { Feature } from 'ol';
 ```
 
-## Non-Global CLI & npm run
-If you only use the `vcmplugin-cli` as a package dependency, you must add the above scripts to
-the `package.json` and use `npm run` to execute:
+## VC Map Plugins
+The following defines a plugin in its rough structure. If you use the `@vcmap/plugin-cli`
+to create your project, a template already adhering to these specs will be created for you.
+- All plugins must provide the following:
+    - `package.json` with name, description, version, author and dependencies.
+    - `config.json` with default parameters for the plugins' configuration.
+    - `README.md` describing the plugins' capabilities and usage.
+    - `src/index.js` JS entry point.
+- 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
+        - is descriptive
+        - is lowercase
+        - is uri encode-able
+        - doesn't start with `.`, `_` or a digit
+        - doesn't contain white spaces or any special characters like `~\'!()*"`
+    - do not use scope `@vcmap`, since it is only to be used by official plugins provided 
+      by virtual city systems. But you are encouraged to use your own scope.
+- 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)
+    - `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.
+For this reason the package.json of a plugin defines two exports:
 ```json
 {
-  "name": "plugin-name",
-  "main": "src/index.js",
-  "scripts": {
-    "build": "vcmplugin build",
-    "serve": "vcmplugin serve --vcm ./vcm"
-  },
-  "devDependencies": {
-    "@vcmap/plugin-cli": "^0.1.1"
+  ".": "./src/index.js",
+  "./dist": "./dist/index.js"
+}
+```
+
+
+### Plugin Interface:
+Plugins must provide a function default export which returns an Object complying
+with the VC Map Plugin Interface describe below:
+
+```typescript
+declare interface VcsPlugin<T extends Object> {
+    readonly name: string;
+    readonly version: string;
+    initialize(app: VcsUiApp):void;
+    onVcsAppMounted(app: VcsUiApp):void;
+    toJSON():T;
+    destroy():void;
+}
+
+declare function defaultExport<T extends Object>(config: T):VcsPlugin<T>;
+```
+
+A Simple JavaScript implementation of this interface can be seen below::
+```javascript
+// index.js
+/**
+ * @param {PluginExampleConfig} config
+ * @returns {VcsPlugin}
+ */
+export default function defaultExport(config) {
+  return {
+    get name() {
+      return packageJSON.name;
+    },
+    get version() {
+      return packageJSON.version;
+    },
+    initialize(app) {},
+    onVcsAppMounted(app) {},
+    toJSON() {},
+    destroy() {},
   }
 }
 ```
+
+
+## Notes on Developing
+To develop the plugin-cli, be sure to not `npm link` into plugins, since this will
+throw the resolver in resolving the @vcmap/ui peer dependency from the current plugin. 
+Instead run `npm pack` in the plugin cli and install the tarball in the plugin directly.

package/assets/helloWorld/.gitignore

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

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

@@ -0,0 +1,93 @@
+default:
+  image: gitlab.virtualcitysystems.de:5050/vcsuite/devops/gitlabrunner/node:16-bullseye
+
+variables:
+  GIT_CLONE_PATH: $CI_BUILDS_DIR/$CI_PROJECT_PATH_SLUG/$CI_COMMIT_REF_SLUG
+
+stages:
+  - build
+  - test
+  - bundle
+  - version
+  - publish
+
+.template: &job_definition
+  only:
+    - /^(feature-.*|hotfix-.*|main|release-.*)$/
+  tags:
+    - linux-2.0
+
+build:
+  <<: *job_definition
+  script:
+    - npm set registry 'http://npmregistry:4873'
+    - npm ci
+  before_script:
+    - mkdir -p ~/.ssh
+    - chmod 700 ~/.ssh
+    - echo "$SSH_RUNNER_KEY" | tr -d '\r' > ~/.ssh/id_rsa
+    - chmod 600 ~/.ssh/id_rsa
+    - ssh-keyscan gitlab.virtualcitysystems.de >> ~/.ssh/known_hosts
+    - chmod 644 ~/.ssh/known_hosts
+    - git config user.name "Gitlab Runner"
+    - git config user.email "gitlab-runner@vc.systems"
+  stage: build
+
+.after_build_template: &after_build_definition
+  <<: *job_definition
+  variables:
+    GIT_STRATEGY: none
+
+lint:
+  <<: *after_build_definition
+  stage: test
+  script:
+    - npm run lint
+
+audit:
+  <<: *after_build_definition
+  stage: test
+  script:
+    - npm audit --production --audit-level=low
+
+bundle:
+  <<: *after_build_definition
+  stage: bundle
+  script:
+    - npm run build
+
+version:
+  <<: *after_build_definition
+  stage: version
+  only:
+    variables:
+      - $PUBLISH
+    refs:
+      - /^(main|release-v.*)$/
+  script:
+    - npm version patch -m "%s [skip-ci]"
+    - TAG=`git describe --abbrev=0`
+    - echo git push git@gitlab:vcsuite/"$CI_PROJECT_PATH".git
+    - git push git@gitlab:vcsuite/"$CI_PROJECT_PATH".git $TAG
+    - git push git@gitlab:vcsuite/"$CI_PROJECT_PATH".git HEAD:$CI_COMMIT_REF_NAME
+  before_script:
+    - mkdir -p ~/.ssh
+    - chmod 700 ~/.ssh
+    - echo "$SSH_RUNNER_KEY" | tr -d '\r' > ~/.ssh/id_rsa
+    - chmod 600 ~/.ssh/id_rsa
+    - ssh-keyscan gitlab >> ~/.ssh/known_hosts
+    - chmod 644 ~/.ssh/known_hosts
+    - git config user.name "Gitlab Runner"
+    - git config user.email "gitlab-runner@vc.systems"
+
+publish:
+  <<: *after_build_definition
+  stage: publish
+  only:
+    refs:
+      - /^(main|release-v.*)$/
+    variables:
+      - $PUBLISH
+  script:
+    - npm config set '//npmregistry:4873/:_authToken' "${VERDACCIO_TOKEN}"
+    - npm publish --registry http://npmregistry:4873

package/assets/helloWorld/src/helloWorld.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-sheet>
+    <v-card class="pa-2 ma-2">
+      <v-container>
+        <v-row class="justify-center mb-4">
+          <h1>Hello World</h1>
+        </v-row>
+        <v-row class="justify-center">
+          <VcsButton
+            icon="mdi-times"
+            @click="closeSelf"
+          >
+            Close Window
+          </VcsButton>
+        </v-row>
+      </v-container>
+    </v-card>
+  </v-sheet>
+</template>
+
+<script>
+  import { inject } from '@vue/composition-api';
+  import { VcsButton } from '@vcsuite/ui-components';
+
+  export const windowId = 'hello_world_window_id';
+
+  export default {
+    name: 'HelloWorld',
+    components: { VcsButton },
+    setup() {
+      const app = inject('vcsApp');
+
+      return {
+        closeSelf() {
+          app.windowManager.remove(windowId);
+        },
+      };
+    },
+  };
+</script>

package/assets/helloWorld/src/index.js

@@ -0,0 +1,35 @@
+import { WindowSlot } from '@vcmap/ui';
+import { version, name } from '../package.json';
+import HelloWorld, { windowId } from './helloWorld.vue';
+
+/**
+ * @param {VcsApp} app - the app from which this plugin is loaded.
+ * @param {Object} config - the configuration of this plugin instance, passed in from the app.
+ * @returns {VcsPlugin}
+ */
+export default function helloWorld(app, config) {
+  return {
+    get name() { return name; },
+    get version() { return version; },
+    initialize: async (vcsUiApp) => {
+      console.log('Called before loading the rest of the current context. Passed in the containing Vcs UI App ');
+      console.log(app, config);
+      console.log(vcsUiApp);
+    },
+    onVcsAppMounted: async (vcsUiApp) => {
+      console.log('Called when the root UI component is mounted and managers are ready to accept components');
+      vcsUiApp.windowManager.add({
+        id: windowId,
+        component: HelloWorld,
+        WindowSlot: WindowSlot.DETACHED,
+        position: {
+          left: '40%',
+          right: '40%',
+        },
+      }, name);
+    },
+    toJSON: async () => {
+      console.log('Called when serializing this plugin instance');
+    },
+  };
+}

package/cli.js

@@ -3,6 +3,7 @@ import program from 'commander';
 import './src/defaultCommand.js';
 import { create, serve, build, pack, preview } from './index.js';
 import { version } from './src/create.js';
+import setupMapUi from './src/setupMapUi.js';
 
 program.version(version);
 
@@ -44,4 +45,8 @@ program
   .option('--watch', 'watch file changes')
   .safeAction(build);
 
+program
+  .command('setup-map-ui')
+  .safeAction(setupMapUi);
+
 program.parse(process.argv);

package/index.js

@@ -3,3 +3,5 @@ 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 setupMapUi } from './src/setupMapUi.js';
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/plugin-cli",
-  "version": "2.0.1",
+  "version": "2.0.4",
   "description": "A CLI to help develop and build plugins for the VC Map",
   "main": "index.js",
   "type": "module",
@@ -11,6 +11,10 @@
     "lint": "eslint . --env node",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/virtualcitySYSTEMS/map-plugin-cli.git"
+  },
   "author": "Ben Kuster <bkuster@virtualcitysystems.de>",
   "license": "MIT",
   "files": [
@@ -32,21 +36,44 @@
     "semver": "^7.3.5",
     "unplugin-vue-components": "^0.17.21",
     "vinyl-fs": "^3.0.3",
-    "vite": "^2.4.4",
+    "vite": "^2.9.1",
     "vite-plugin-vue2": "^1.7.3",
     "vue-template-compiler": "^2.6.14"
   },
+  "peerDependencies": {
+    "@vcmap/ui": "^5.0.0-rc.7",
+    "vue": "^2.6.14"
+  },
+  "peerDependenciesMeta": {
+    "@vcmap/ui": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@vcsuite/eslint-config": "^2.1.1",
     "eslint": "^8.9.0"
   },
   "eslintIgnore": [
-    "node_modules"
+    "node_modules",
+    "assets/helloWorld"
   ],
   "eslintConfig": {
     "extends": "@vcsuite/eslint-config/node",
     "parserOptions": {
       "ecmaVersion": 2020
+    },
+    "rules": {
+      "import/no-unresolved": [
+        2,
+        {
+          "ignore": [
+            "^@vcmap/ui"
+          ]
+        }
+      ]
     }
   },
   "engines": {

package/src/build.js

@@ -1,11 +1,12 @@
 import path from 'path';
-import { build } from 'vite';
+import fs from 'fs/promises';
 import { createVuePlugin } from 'vite-plugin-vue2';
 import vcsOl from '@vcmap/rollup-plugin-vcs-ol';
 import { logger } from '@vcsuite/cli-logger';
 import { VuetifyResolver } from 'unplugin-vue-components/dist/resolvers.js';
 import Components from 'unplugin-vue-components/dist/vite.js';
 import { getPluginEntry, getPluginName } from './packageJsonHelpers.js';
+import { getContext } from './context.js';
 
 /**
  * @typedef {Object} BuildOptions
@@ -13,38 +14,45 @@ import { getPluginEntry, getPluginName } from './packageJsonHelpers.js';
  * @property {boolean} [watch]
  */
 
+export function getDefaultConfig() {
+  return {
+    publicDir: false,
+    plugins: [
+      createVuePlugin(),
+      Components({
+        resolvers: [
+          VuetifyResolver(),
+        ],
+        dirs: ['./src'],
+        include: [],
+        exclude: [],
+      }),
+      vcsOl(),
+    ],
+  };
+}
+
 /**
  * @param {string} pluginName
  * @returns {Object<string, string>}
  */
-export function getLibraryPaths(pluginName) {
+export async function getLibraryPaths(pluginName) {
+  const { libraries } = await import('@vcmap/ui/build/buildHelpers.js');
   const pluginPath = path.join('plugins', ...pluginName.split('/'));
-
-  const libraries = {
-    vue: 'vue',
-    '@vue/composition-api': 'vue-composition-api',
-    '@vcmap/cesium': 'cesium',
-    ol: 'ol',
-    '@vcmap/core': 'core',
-    'vuetify/lib': 'vuetify',
-    '@vcsuite/ui-components': 'uicomponents',
-    '@vcmap/ui': 'ui',
-  };
-
+  const libraryPaths = {};
   Object.entries(libraries).forEach(([library, assetName]) => {
     const assetPath = path.join('assets', `${assetName}.js`);
 
-    libraries[library] = path.relative(pluginPath, assetPath);
+    libraryPaths[library] = path.relative(pluginPath, assetPath);
   });
-  return libraries;
+  return libraryPaths;
 }
 
 /**
  * @param {BuildOptions} options
- * @param {boolean} [preview]
  * @returns {Promise<void>}
  */
-export default async function buildModule(options, preview) {
+export default async function buildModule(options) {
   const entry = await getPluginEntry();
   if (path.relative('src', entry).startsWith('.')) {
     logger.warning(`detected irregular entry ${entry}`);
@@ -52,67 +60,35 @@ export default async function buildModule(options, preview) {
   }
 
   const pluginName = await getPluginName();
-  const libraries = getLibraryPaths(pluginName);
-
-  await build({
-    publicDir: false,
-    plugins: [
-      createVuePlugin(),
-      Components({
-        resolvers: [
-          VuetifyResolver(),
-        ],
-        dirs: ['./src'],
-        include: [],
-        exclude: [],
-      }),
-      vcsOl(),
-      {
-        name: 'pluginCssLoaderPrefix',
-        generateBundle(opts, bundle) {
-          const indexJs = bundle['index.js'];
-          if (indexJs && indexJs.code) {
-            const resource = preview ?
-              './dist/style.css' :
-              `./plugins/${pluginName}/style.css`;
-
-            indexJs.code = `
-function loadCss(href) {
-  return new Promise((resolve, reject) => {
-    const elem = document.createElement('link');
-    elem.rel = 'stylesheet';
-    elem.href = href;
-    elem.defer = false;
-    elem.async = false;
-    elem.onload = resolve;
-    elem.onerror = reject;
-    document.head.appendChild(elem);
-  });
-}
-await loadCss('${resource}');
-${indexJs.code}
-`;
-          }
-        },
-      },
-    ],
+  const libraryPaths = await getLibraryPaths(pluginName);
+  const distPath = path.join(getContext(), 'dist');
+  await fs.rm(distPath, { recursive: true, force: true });
+  await fs.mkdir(distPath);
+  const external = Object.keys(libraryPaths);
+  const config = {
+    ...getDefaultConfig(),
     esbuild: {
       minify: !options.development,
     },
     build: {
-      emptyOutDir: true,
+      write: false,
+      emptyOutDir: false,
       lib: {
         entry,
         formats: ['es'],
         fileName: () => 'index.js',
       },
       rollupOptions: {
-        external: Object.keys(libraries),
+        external,
         output: {
-          paths: libraries,
+          paths: libraryPaths,
         },
       },
-      watch: options.watch ? {} : null,
+      watch: options.watch ? {
+        skipWrite: true,
+      } : null,
     },
-  });
+  };
+  const { buildLibrary } = await import('@vcmap/ui/build/buildHelpers.js');
+  await buildLibrary(config, '', 'index', '', true);
 }

package/src/create.js

@@ -17,9 +17,10 @@ export const { version, name } = JSON.parse(fs.readFileSync(path.join(getDirname
  * @property {string} description
  * @property {Array<Object>} scripts
  * @property {string} author
+ * @property {string} repository
  * @property {string} license
- * @property {string} mapVersion
- * @property {boolean} addDevDep
+ * @property {string} registry
+ * @property {boolean} addCiCd
  * @property {Array<string>} peerDeps
  */
 
@@ -47,16 +48,42 @@ async function createPluginTemplate(options) {
     version: options.version,
     description: options.description,
     main: 'src/index.js',
-    scripts: Object.assign({}, ...options.scripts),
+    scripts: Object.assign({ prepublishOnly: 'vcmplugin build' }, ...options.scripts),
     author: options.author,
     license: options.license,
-    engines: {
-      vcm: options.mapVersion,
-    },
     dependencies: {},
-    devDependencies: options.addDevDep ? { [name]: `^${version}` } : {}, // XXX should we add all our deps here? cesium, ol, vue etc.
+    keywords: [
+      'vcmap',
+      'plugin',
+    ],
+    files: [
+      'src/',
+      'dist/',
+      'plugin-assets/',
+      'LICENSE.md',
+      'README.md',
+    ],
+    exports: {
+      '.': './src/index.js',
+      './dist': './dist/index.js',
+    },
   };
 
+  if (options.repository) {
+    packageJson.repository = {
+      url: options.repository,
+    };
+  }
+
+  const installEsLint = options.scripts.find(script => script.lint);
+  if (installEsLint) {
+    packageJson.eslintIgnore = ['node_modules'];
+    packageJson.eslintConfig = {
+      root: true,
+      extends: '@vcsuite/eslint-config/vue',
+    };
+  }
+
   const writePackagePromise = fs.promises.writeFile(
     path.join(pluginPath, 'package.json'),
     JSON.stringify(packageJson, null, 2),
@@ -71,6 +98,11 @@ async function createPluginTemplate(options) {
     JSON.stringify(configJson, null, 2),
   );
 
+  const writeNpmrcPromise = fs.promises.writeFile(
+    path.join(pluginPath, '.npmrc'),
+    `registry=${options.registry}\n`,
+  );
+
   const writeReadmePromise = fs.promises.writeFile(
     path.join(pluginPath, 'README.md'),
     [
@@ -79,36 +111,27 @@ async function createPluginTemplate(options) {
     ].join('\n'),
   );
 
+  const writeChangesPromise = fs.promises.writeFile(
+    path.join(pluginPath, 'CHANGES.md'),
+    `# v${options.version}\nDocument features and fixes`,
+  );
+
   await fs.promises.mkdir(path.join(pluginPath, 'src'));
   logger.debug('created src directory');
 
-  const writeIndexPromise = fs.promises.writeFile(
-    path.join(pluginPath, 'src', 'index.js'),
-    [
-      'import { version, name } from \'../package.json\';',
-      '',
-      '/**',
-      ' * @param {VcsApp} app - the app from which this plugin is loaded.',
-      ' * @param {Object} config - the configuration of this plugin instance, passed in from the app.',
-      ' */',
-      'export default function(app, config) {',
-      '  return {',
-      '    get name() { return name; },',
-      '    get version() { return version; },',
-      '    initialize: async (vcsUiApp) => { console.log(\'Called before loading the rest of the current context. Passed in the containing Vcs UI App \'); },',
-      '    onVcsAppMounted: async (vcsUiApp) => { console.log(\'Called when the root UI component is mounted and managers are ready to accept components\'); },',
-      '    toJSON: async () => { console.log(\'Called when serializing this plugin instance\'); },',
-      '  };',
-      '};',
-      '',
-    ].join('\n'),
+  const copyTemplatePromise = fs.promises.cp(
+    path.join(getDirname(), '..', 'assets', 'helloWorld'),
+    pluginPath,
+    { recursive: true },
   );
 
   await Promise.all([
     writePackagePromise,
     writeConfigPromise,
+    writeNpmrcPromise,
     writeReadmePromise,
-    writeIndexPromise,
+    writeChangesPromise,
+    copyTemplatePromise,
     writeLicense(options.author, options.license, pluginPath),
   ]);
 
@@ -116,13 +139,19 @@ async function createPluginTemplate(options) {
   logger.spin('installing dependencies... (this may take a while)');
   const exec = util.promisify(childProcess.exec);
   try {
-    let installCmd = 'npm i';
-    if (options.peerDeps.length > 0) {
-      installCmd = `${installCmd} --save-peer ${options.peerDeps.join(' ')}`;
-    }
+    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);
+    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);
     logger.success('installed dependencies');
   } catch (e) {
     logger.error(e);
@@ -137,15 +166,14 @@ async function createPluginTemplate(options) {
  */
 export default async function create() {
   const scriptChoices = [
-    { title: 'build', value: { build: 'vcmplugin build' } },
-    { title: 'pack', value: { pack: 'vcmplugin pack' } },
-    { title: 'start', value: { start: 'vcmplugin serve' } },
-    { title: 'preview', value: { preview: 'vcmplugin preview' } },
-    { title: 'test', value: { test: 'echo "Error: no test specified" && exit 1' } },
+    { title: 'build', value: { build: 'vcmplugin build' }, selected: true },
+    { 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: 'lint', value: { lint: 'eslint "{src,tests}/**/*.{js,vue}"' }, selected: true },
   ];
 
   const peerDependencyChoices = [
-    { title: '@vcmap/ui', value: '@vcmap/ui', selected: true },
     { title: '@vcsuite/ui-components', value: '@vcsuite/ui-components', selected: true },
     { title: '@vcmap/core', value: '@vcmap/core' },
     { title: '@vcmap/cesium', value: '@vcmap/cesium' },
@@ -195,6 +223,12 @@ export default async function create() {
       message: 'Author',
       initial: 'author <email>',
     },
+    {
+      type: 'text',
+      name: 'repository',
+      message: 'Repository url',
+      // initial: (prev, values) => `https://github.com/virtualcitySYSTEMS/${values.name}.git`,
+    },
     {
       type: 'select',
       name: 'license',
@@ -208,9 +242,9 @@ export default async function create() {
     },
     {
       type: 'text',
-      name: 'mapVersion',
-      message: 'Map version',
-      initial: '>=5.0',
+      name: 'registry',
+      message: 'Set default npm registry',
+      initial: 'https://registry.npmjs.org',
     },
     {
       name: 'peerDeps',
@@ -221,9 +255,9 @@ export default async function create() {
     },
     {
       type: 'toggle',
-      name: 'addDevDep',
-      message: 'Add vcmplugin-cli as dev dependency?',
-      initial: true,
+      name: 'addCiCd',
+      message: 'Add default VCS gitlab ci/cd?',
+      initial: false,
       active: 'yes',
       inactive: 'no',
     },

package/src/hostingHelpers.js

@@ -1,4 +1,6 @@
 import { fileURLToPath, URL } from 'url';
+import { promisify } from 'util';
+import { exec } from 'child_process';
 import https from 'https';
 import http from 'http';
 import fs from 'fs';
@@ -15,8 +17,21 @@ import { getPluginEntry, getPluginName } from './packageJsonHelpers.js';
  * @property {boolean} [https]
  */
 
+/**
+ * @type {(arg1: string, opt?: Object) => Promise<string>}
+ */
+const promiseExec = promisify(exec);
+
+/**
+ * @param {...string} pathSegments
+ * @returns {string}
+ */
+export function resolveMapUi(...pathSegments) {
+  return path.join(getContext(), 'node_modules', '@vcmap', 'ui', ...pathSegments);
+}
+
 export function checkReservedDirectories() {
-  ['assets', 'plugins']
+  ['assets', 'plugins', 'config']
     .forEach((dir) => {
       if (fs.existsSync(path.join(getContext(), dir))) {
         logger.warning(`found reserved directory ${dir}. serving my not work as exptected`);
@@ -69,13 +84,13 @@ export async function readConfigJson(fileName) {
   return config;
 }
 
-let configJson = null;
+const configMap = new Map();
 
 /**
  * @returns {Promise<string>}
  */
 export async function printVcmapUiVersion() {
-  const packageJsonPath = path.join(getContext(), 'node_modules', '@vcmap', 'ui', 'package.json');
+  const packageJsonPath = resolveMapUi('package.json');
   if (!fs.existsSync(packageJsonPath)) {
     throw new Error(`Cannot find the @vcmap/ui package in ${getContext()}. Are you sure you installed it?`);
   }
@@ -85,6 +100,24 @@ export async function printVcmapUiVersion() {
   logger.info(`Using @vcmap/ui version: ${version} found in current project.`);
 }
 
+/**
+ * @param {Object} config
+ * @param {Object} pluginConfig
+ * @param {boolean} production
+ * @returns {Promise<void>}
+ */
+export async function reWriteConfig(config, pluginConfig, production) {
+  config.plugins = config.plugins ?? []; // XXX check if we have plugins in this repos dependencies?
+  pluginConfig.entry = production ? 'dist/index.js' : await getPluginEntry();
+  pluginConfig.name = await getPluginName();
+  const idx = config.plugins.findIndex(p => p.name === pluginConfig.name);
+  if (idx > -1) {
+    config.plugins.splice(idx, 1, pluginConfig);
+  } else {
+    config.plugins.push(pluginConfig);
+  }
+}
+
 /**
  * @param {string} [mapConfig] - fs or https to config. defaults to @vcmap/ui/map.config.json
  * @param {string} [auth]
@@ -93,9 +126,9 @@ export async function printVcmapUiVersion() {
  * @returns {Promise<unknown>}
  */
 export function getConfigJson(mapConfig, auth, production, configFile) {
-  const usedConfig = mapConfig || path.join(getContext(), 'node_modules', '@vcmap', 'ui', 'dist', 'config', 'base.config.json');
-  if (configJson) {
-    return Promise.resolve(configJson);
+  const usedConfig = mapConfig || resolveMapUi('map.config.json');
+  if (configMap.has('map.config.json')) {
+    return Promise.resolve(configMap.get('map.config.json'));
   }
   const isWebVcm = /^https?:\/\//.test(usedConfig);
   return new Promise((resolve, reject) => {
@@ -107,17 +140,10 @@ export function getConfigJson(mapConfig, auth, production, configFile) {
 
       stream.on('close', async () => {
         try {
-          configJson = JSON.parse(data);
-          configJson.plugins = production && configJson.plugins ? configJson.plugins : [];
+          const configJson = JSON.parse(data);
+          configMap.set('map.config.json', configJson);
           const pluginConfig = await readConfigJson(configFile);
-          pluginConfig.entry = production ? 'dist/index.js' : await getPluginEntry();
-          pluginConfig.name = await getPluginName();
-          const idx = configJson.plugins.findIndex(p => p.name === pluginConfig.name);
-          if (idx > -1) {
-            configJson.plugins.splice(idx, 1, pluginConfig);
-          } else {
-            configJson.plugins.push(pluginConfig);
-          }
+          await reWriteConfig(configJson, pluginConfig, production);
           resolve(configJson);
         } catch (e) {
           reject(e);
@@ -167,7 +193,7 @@ export function createConfigJsonReloadPlugin() {
     name: 'ConfigJsonReload',
     handleHotUpdate({ file }) {
       if (file === path.join(getContext(), 'config.json')) {
-        configJson = null;
+        configMap.clear();
       }
     },
   };
@@ -192,13 +218,52 @@ export function addMapConfigRoute(app, mapConfig, auth, configFile, production)
   });
 }
 
+/**
+ * @param {Express} app
+ * @param {string} [auth]
+ * @param {string} [configFileName]
+ * @param {boolean} [production]
+ */
+export async function addConfigRoute(app, auth, configFileName, production) { // IDEA pass in available plugins and strip unavailable ones?
+  const mapUiDir = resolveMapUi();
+  const pluginConfig = await readConfigJson(configFileName);
+
+  app.get('/config*', async (req, res) => {
+    const { url } = req;
+    const fileName = path.join(mapUiDir, ...url.substring(1).split('/'));
+    let response;
+    if (configMap.has(url)) {
+      response = JSON.stringify(configMap.get(url));
+    } else if (fs.existsSync(fileName)) {
+      try {
+        const configContent = await fs.promises.readFile(fileName);
+        const config = JSON.parse(configContent);
+        configMap.set(url, config);
+        await reWriteConfig(config, pluginConfig, production);
+        response = JSON.stringify(config);
+      } catch (e) {
+        configMap.delete(url);
+        logger.warning(`Failed to parse config ${url}`);
+      }
+    }
+
+    if (!response) {
+      res.statusCode = 404;
+    } else {
+      res.setHeader('Content-Type', 'application/json');
+      res.write(response);
+    }
+    res.end();
+  });
+}
+
 /**
  * @param {boolean} [production]
  * @returns {Promise<string>}
  */
 export async function getMapUiIndexHtml(production) {
   const indexHtmlFileName = production ?
-    path.join(getContext(), 'node_modules', '@vcmap', 'ui', 'dist', 'index.html') :
+    resolveMapUi('dist', 'index.html') :
     path.join(getDirname(), '..', 'assets', 'index.html');
   const buffer = await fs.promises.readFile(indexHtmlFileName);
   return buffer.toString();
@@ -217,10 +282,19 @@ export function addIndexRoute(app, server, production, hostedVcm, auth) {
       await getIndexHtml(`${hostedVcm}/`, auth) :
       await getMapUiIndexHtml(production); // TODO change hosted vcm index via option?
 
-    originalIndex = await server.transformIndexHtml('index.html', originalIndex);
+    originalIndex = await server.transformIndexHtml('/index.html', originalIndex);
+
     res.status(200)
       .set({ 'Content-Type': 'text/html' })
       .end(originalIndex);
   });
 }
 
+/**
+ * @param {string} command
+ * @returns {Promise<string>}
+ */
+export function executeUiNpm(command) {
+  const mapUiDir = resolveMapUi();
+  return promiseExec(`npm run ${command}`, { cwd: mapUiDir });
+}

package/src/preview.js

@@ -1,16 +1,19 @@
 import path from 'path';
+import fs from 'fs';
 import { createServer } from 'vite';
 import express from 'express';
 import { logger } from '@vcsuite/cli-logger';
 import {
+  addConfigRoute,
   addIndexRoute,
   addMapConfigRoute,
   checkReservedDirectories,
   createConfigJsonReloadPlugin,
-  printVcmapUiVersion,
+  printVcmapUiVersion, resolveMapUi,
 } from './hostingHelpers.js';
-import build, { getLibraryPaths } from './build.js';
+import build, { getDefaultConfig, getLibraryPaths } from './build.js';
 import { getContext } from './context.js';
+import setupMapUi from './setupMapUi.js';
 
 /**
  * @typedef {HostingOptions} PreviewOptions
@@ -34,8 +37,8 @@ function setAliases(alias, libraryPaths) {
  */
 async function getServerOptions(hostedVcm, https) {
   let proxy;
-  const normalLibraries = getLibraryPaths('normal');
-  const scopedLibraries = getLibraryPaths('@scoped/plugin');
+  const normalLibraries = await getLibraryPaths('normal');
+  const scopedLibraries = await getLibraryPaths('@scoped/plugin');
   const alias = {};
   setAliases(alias, normalLibraries);
   setAliases(alias, scopedLibraries);
@@ -73,7 +76,7 @@ export default async function preview(options) {
     await printVcmapUiVersion();
   }
   checkReservedDirectories();
-  build({ development: false, watch: true }, true);
+  await build({ development: false, watch: true });
   const app = express();
   logger.info('Starting preview server...');
   const server = await createServer(await getServerOptions(options.vcm, options.https));
@@ -82,8 +85,18 @@ export default async function preview(options) {
   addIndexRoute(app, server, true, options.vcm, options.auth);
 
   if (!options.vcm) {
+    logger.spin('compiling preview');
+    if (!fs.existsSync(resolveMapUi('plugins', 'node_modules'))) {
+      logger.info('Could not detect node_modules in map ui plugins. Assuming map UI not setup');
+      await setupMapUi();
+    }
+    const { buildPluginsForPreview } = await import('@vcmap/ui/build/buildHelpers.js');
+    await buildPluginsForPreview(getDefaultConfig(), true);
+    logger.stopSpinner();
+    logger.info('@vcmap/ui built for preview');
     app.use('/assets', express.static(path.join(getContext(), 'node_modules', '@vcmap', 'ui', 'dist', 'assets')));
-    app.use('/plugins', express.static(path.join(getContext(), 'node_modules', '@vcmap', 'ui', 'dist', 'plugins')));
+    app.use('/plugins', express.static(path.join(getContext(), 'dist', 'plugins')));
+    await addConfigRoute(app, options.auth, options.config, true);
   }
 
   app.use(server.middlewares);

package/src/serve.js

@@ -8,18 +8,51 @@ import { VuetifyResolver } from 'unplugin-vue-components/dist/resolvers.js';
 import Components from 'unplugin-vue-components/dist/vite.js';
 import { getContext } from './context.js';
 import {
+  addConfigRoute,
   addIndexRoute,
   addMapConfigRoute,
   checkReservedDirectories,
   createConfigJsonReloadPlugin,
   printVcmapUiVersion,
+  resolveMapUi,
 } from './hostingHelpers.js';
+import { getPluginName } from './packageJsonHelpers.js';
 
 /**
  * @typedef {HostingOptions} ServeOptions
  * @property {string} [mapConfig] - an filename or URL to a map config
  */
 
+async function getProxy(protocol, port) {
+  const { default: getPluginProxies } = await import('@vcmap/ui/build/getPluginProxies.js');
+  const { determineHostIpFromInterfaces } = await import('@vcmap/ui/build/determineHost.js');
+  const { getInlinePlugins } = await import('@vcmap/ui/build/buildHelpers.js');
+
+  const target = `${protocol}://${determineHostIpFromInterfaces()}:${port}`;
+  const proxy = await getPluginProxies(target);
+  const mapUiPlugins = resolveMapUi('plugins');
+  const inlinePlugins = await getInlinePlugins();
+  inlinePlugins.forEach((inlinePlugin) => {
+    proxy[`^/plugins/${inlinePlugin}/.*`] = {
+      target,
+      rewrite: (route) => {
+        const rest = route.replace(new RegExp(`^/plugins/${inlinePlugin}/`), '');
+        const file = rest || 'index.js';
+        return path.posix.join(path.relative(getContext(), mapUiPlugins), inlinePlugin, file);
+      },
+    };
+  });
+
+  const pluginRoutes = Object.keys(proxy);
+  const name = await getPluginName();
+  const hasThisPlugin = pluginRoutes.find(p => p.startsWith(`^/plugins/${name}`));
+
+  if (hasThisPlugin) {
+    delete proxy[hasThisPlugin];
+  }
+  return proxy;
+}
+
 /**
  * @param {ServeOptions} options
  * @returns {Promise<void>}
@@ -32,7 +65,10 @@ export default async function serve(options) {
   await printVcmapUiVersion();
   checkReservedDirectories();
   const app = express();
+  const port = options.port || 8008;
+
   logger.info('Starting development server...');
+  const proxy = await getProxy(options.https ? 'https' : 'http', port);
 
   const server = await createServer({
     root: getContext(),
@@ -66,15 +102,16 @@ export default async function serve(options) {
     server: {
       middlewareMode: 'html',
       https: options.https,
+      proxy,
     },
   });
 
   addMapConfigRoute(app, options.mapConfig, options.auth, options.config);
   addIndexRoute(app, server);
+  await addConfigRoute(app, options.auth, options.config);
 
   app.use(server.middlewares);
 
-  const port = options.port || 8008;
   await app.listen(port);
   logger.info(`Server running on port ${port}`);
 }

package/src/setupMapUi.js

@@ -0,0 +1,9 @@
+import { logger } from '@vcsuite/cli-logger';
+import { executeUiNpm } from './hostingHelpers.js';
+
+export default async function setupMapUi() {
+  logger.spin('installing dev plugins in @vcmap/ui');
+  await executeUiNpm('install-plugins');
+  logger.stopSpinner();
+  logger.info('dev plugins installed');
+}