@vcmap/plugin-cli 2.1.17 → 3.0.0

package/README.md

@@ -18,7 +18,7 @@ The `@vcmap/plugin-cli` helps develop and build plugins for the **VC Map**.
 
 ## Prerequisite
 
-You need [nodejs](https://nodejs.org/en/) 16 and npm installed on your system
+You need [nodejs](https://nodejs.org/en/) 18 and npm installed on your system
 to use this tool.
 
 ## Installation
@@ -51,6 +51,33 @@ All commands have (optional) cli options. Run `vcmplugin --help` or `vcmplugin h
 For `serve` and `preview` you can alternatively define a `vcs.config.js` in your plugin's root directory.
 For more information see [here](#vcm-config-js).
 
+## Folder structure
+
+As of v3, all plugins must follow the same rudimentary folder structure, as depicted below:
+
+```
+-| src/
+-|  index.js
+-| package.json
+-| README.md
+```
+
+And for TS based plugins:
+
+```
+-| src/
+-|  index.ts
+-| package.json
+-| README.md
+-| tsconfig.json
+```
+
+It is important to, not that the entry point for _building_ the plugin (and
+the file which exports the default export for the plugin interface) **MUST** be
+located at `./src/index.js` or `./src/index.ts` respectively. If you have created
+your plugin using any version of the `@vcmap/plugins-cli`, this will already be
+the case.
+
 ### 1. Creating a new plugin
 
 To create a new plugin template, run the following:
@@ -62,7 +89,7 @@ vcmplugin create
 This will open a command prompt helping you to create the basic [structure of a plugin](#vc-map-plugins).
 Be sure to check out the [peer dependecy section](#about-peer-dependencies) as well.
 
-Optionally, in step 7 of the create-prompt you can choose an existing plugin [@vcmap/hello-world](https://www.npmjs.com/package/@vcmap/hello-world) as template.
+Optionally, in the create-prompt you can choose an existing plugin [@vcmap/hello-world](https://www.npmjs.com/package/@vcmap/hello-world) as a template.
 
 ### 2. Serving a plugin for development
 
@@ -173,15 +200,18 @@ export default {
 
 The following parameters are valid:
 
-| parameter | type               | description                                                                                   |
-| --------- | ------------------ | --------------------------------------------------------------------------------------------- |
-| config    | string|Object | an optional configObject or fileName to use for configuring the plugin                        |
-| auth      | string             | potential auth string to download assets (index.html, config) with                            |
-| port      | number             | optional alternative port (default 8008)                                                      |
-| https     | boolean            | whether to use http (default) or https                                                        |
-| appConfig | string|Object | an optional configObject resp. fileName or URL to an app config (for `serve` command)         |
-| vcm       | string             | a filename or URL to a map (for `preview` command)                                            |
-| proxy     | Object             | a server proxy (see [vitejs.dev](https://vitejs.dev/config/server-options.html#server-proxy)) |
+| parameter | type               | description                                                                                                               |
+| --------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------- |
+| config    | string|Object | An optional configObject or fileName to use for configuring the plugin                                                    |
+| auth      | string             | Potential auth string to download assets (index.html, config) with                                                        |
+| port      | number             | Optional alternative port (default 8008)                                                                                  |
+| appConfig | string|Object | An optional configObject resp. fileName or URL to an app config                                                           |
+| vcm       | string             | A filename or URL to a VC Map application. Only works for `preview` command! Takes precedence over `appConfig` parameter. |
+| proxy     | Object             | A server proxy (see [vitejs.dev](https://vitejs.dev/config/server-options.html#server-proxy))                             |
+
+> The `vcm` parameter uses a hosted map application to preview the plugin. The plugin is bundled and added to the application. This parameter is only working for `preview` mode.
+
+> For the `appConfig` option, map and plugin are bundled to create a preview environment. Here only the configuration is loaded from the provided url or object. This parameter is working for both `preview` and `serve` mode.
 
 ## About Peer Dependencies
 
@@ -229,6 +259,24 @@ should be rewritten to:
 import { Cartesian3 } from '@vcmap-cesium/engine';
 ```
 
+### Overwriting Peer Dependencies
+
+If you want to work with a release candidate or a specific branch of @vcmap/core or @vcmap/ui you need to define [overrides](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides) within your plugin's `package.json`.
+This will replace the package(s) in your dependency tree with the corresponding version.
+
+```json
+{
+  "peerDependencies": {
+    "@vcmap/core": "5.1.0-rc.3",
+    "@vcmap/ui": "5.1.0-rc.3"
+  },
+  "overrides": {
+    "@vcmap/core": "5.1.0-rc.3",
+    "@vcmap/ui": "5.1.0-rc.3"
+  }
+}
+```
+
 ### What about openlayers?
 
 openlayers provides a special case, since its modules do not provide a _flat_ namespace.

package/assets/eslintrc.cjs

@@ -0,0 +1,25 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+// const sharedLib = require('eslint-config-airbnb-typescript/lib/shared.js');
+
+module.exports = {
+  root: true,
+  extends: ['@vcsuite/eslint-config/vue-ts'],
+  env: {
+    node: true,
+  },
+  rules: {
+    'no-restricted-syntax': 'off',
+  },
+  overrides: [
+    {
+      files: ['*.ts', '*.vue'],
+      parserOptions: {
+        project: ['./tsconfig.json'],
+      },
+      rules: {
+        '@typescript-eslint/no-non-null-assertion': 'off',
+      },
+    },
+  ],
+  ignorePatterns: ['dist/', 'node_modules/'],
+};

package/assets/index.ts

@@ -0,0 +1,78 @@
+import { VcsPlugin, VcsUiApp, PluginConfigEditor } from '@vcmap/ui';
+import { name, version, mapVersion } from '../package.json';
+
+type PluginConfig = Record<never, never>;
+type PluginState = Record<never, never>;
+
+type MyPlugin = VcsPlugin<PluginConfig, PluginState>;
+
+export default function plugin(
+  config: PluginConfig,
+  baseUrl: string,
+): MyPlugin {
+  // eslint-disable-next-line no-console
+  console.log(config, baseUrl);
+  return {
+    get name(): string {
+      return name;
+    },
+    get version(): string {
+      return version;
+    },
+    get mapVersion(): string {
+      return mapVersion;
+    },
+    initialize(vcsUiApp: VcsUiApp, state?: PluginState): Promise<void> {
+      // eslint-disable-next-line no-console
+      console.log(
+        'Called before loading the rest of the current context. Passed in the containing Vcs UI App ',
+        vcsUiApp,
+        state,
+      );
+      return Promise.resolve();
+    },
+    onVcsAppMounted(vcsUiApp: VcsUiApp): void {
+      // eslint-disable-next-line no-console
+      console.log(
+        'Called when the root UI component is mounted and managers are ready to accept components',
+        vcsUiApp,
+      );
+    },
+    /**
+     * should return all default values of the configuration
+     */
+    getDefaultOptions(): PluginConfig {
+      return {};
+    },
+    /**
+     * should return the plugin's serialization excluding all default values
+     */
+    toJSON(): PluginConfig {
+      // eslint-disable-next-line no-console
+      console.log('Called when serializing this plugin instance');
+      return {};
+    },
+    /**
+     * should return the plugins state
+     * @param {boolean} forUrl
+     * @returns {PluginState}
+     */
+    getState(forUrl?: boolean): PluginState {
+      // eslint-disable-next-line no-console
+      console.log('Called when collecting state, e.g. for create link', forUrl);
+      return {
+        prop: '*',
+      };
+    },
+    /**
+     * components for configuring the plugin and/ or custom items defined by the plugin
+     */
+    getConfigEditors(): PluginConfigEditor[] {
+      return [];
+    },
+    destroy(): void {
+      // eslint-disable-next-line no-console
+      console.log('hook to cleanup');
+    },
+  };
+}

package/assets/ts.gitlab-ci.yml

@@ -0,0 +1,179 @@
+default:
+  image: gitlab.virtualcitysystems.de:5050/vcsuite/devops/gitlabrunner/node:18-bullseye
+
+variables:
+  GIT_CLONE_PATH: $CI_BUILDS_DIR/$CI_PROJECT_PATH_SLUG/$CI_COMMIT_REF_SLUG
+
+stages:
+  - build
+  - test
+  - bundle
+  - deploy
+  - version
+  - publish
+  - deployCluster
+
+.template: &job_definition
+  only:
+    - /^(feature-.*|hotfix-.*|main|release-.*)$/
+  tags:
+    - linux-2.0
+
+build:
+  <<: *job_definition
+  script:
+    - npm ci
+    - npm run ensure-types
+  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
+
+.staging_build_template: &staging_build_template
+  <<: *after_build_definition
+  except:
+    variables:
+      - $PUBLISH
+
+lint:
+  <<: *after_build_definition
+  stage: test
+  script:
+    - npm run lint
+
+type-check:
+  <<: *after_build_definition
+  stage: test
+  script:
+    - npm run type-check
+
+test:
+  <<: *after_build_definition
+  stage: test
+  script:
+    - npm run coverage -- --reporter junit --outputFile test-report.xml
+  coverage: '/^Statements\s*:\s*([^%]+)/'
+  artifacts:
+    reports:
+      junit: test-report.xml
+
+audit:
+  <<: *after_build_definition
+  stage: test
+  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
+  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:"$CI_PROJECT_PATH".git $TAG
+    - git push git@gitlab:"$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 '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}"
+    - npm publish --registry https://registry.npmjs.org --access public

package/assets/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "module": "es2022",
+    "incremental": false,
+    "lib": ["esnext", "dom"],
+    "allowJs": true,
+    "checkJs": false,
+    "declaration": false,
+    "rootDir": ".",
+    /* Strict Type-Checking Options */
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+
+    /* Additional Checks */
+    "noImplicitReturns": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": false,
+    "noImplicitThis": false,
+
+    /* Module Resolution Options */
+    "baseUrl": ".",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "preserveSymlinks": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true
+  },
+  "exclude": ["dist/", "build/", ".tests/"],
+  "include": ["src/"]
+}

package/cli.js

@@ -5,6 +5,7 @@ import { create, serve, build, pack, preview, update } from './index.js';
 import { version } from './src/pluginCliHelper.js';
 import setupMapUi from './src/setupMapUi.js';
 import buildStagingApp from './src/buildStagingApp.js';
+import ensureTypes from './src/ensureTypes.js';
 
 program.version(version);
 
@@ -12,6 +13,7 @@ program
   .command('create')
   .summary('create new plugin')
   .defaultOptions()
+  .option('-t --typescript', 'Create a plugin using typescript')
   .safeAction(create);
 
 program
@@ -26,7 +28,7 @@ program
   .summary('start preview server')
   .defaultOptions()
   .defaultServeOptions()
-  .option('--vcm [url]', 'URL to a virtualcityMAP application', (val) =>
+  .option('--vcm [url]', 'URL to a VC MAP application', (val) =>
     val.replace(/\/$/, ''),
   )
   .safeAction(preview);
@@ -67,4 +69,6 @@ program
   )
   .safeAction(update);
 
+program.command('ensure-types').action(ensureTypes);
+
 program.parse(process.argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/plugin-cli",
-  "version": "2.1.17",
+  "version": "3.0.0",
   "description": "A CLI to help develop and build plugins for the VC Map",
   "main": "index.js",
   "type": "module",
@@ -38,11 +38,11 @@
     "sass": "1.32.13",
     "semver": "^7.5.4",
     "tar": "^6.1.15",
-    "vite": "^4.4.9",
+    "vite": "^4.5.2",
     "vue-template-compiler": "~2.7.14"
   },
   "peerDependencies": {
-    "@vcmap/ui": "^5.0.1",
+    "@vcmap/ui": "^5.1.0",
     "vue": "~2.7.14"
   },
   "peerDependenciesMeta": {
@@ -54,12 +54,13 @@
     }
   },
   "devDependencies": {
-    "@vcsuite/eslint-config": "^3.0.5",
+    "@vcsuite/eslint-config": "^3.0.6",
     "eslint": "^8.38.0"
   },
   "eslintIgnore": [
     "node_modules",
-    "assets/tests"
+    "assets/tests",
+    "assets/index.ts"
   ],
   "eslintConfig": {
     "extends": "@vcsuite/eslint-config/node",

package/src/build.js

@@ -1,10 +1,10 @@
 import path from 'path';
-import { rm, mkdir } from 'fs/promises';
-import fs from 'fs';
+import { rm, mkdir } from 'node:fs/promises';
+import fs from 'node:fs';
 import vue2 from '@vitejs/plugin-vue2';
 import vcsOl from '@vcmap/rollup-plugin-vcs-ol';
 import { logger } from '@vcsuite/cli-logger';
-import { getPluginEntry, getPluginName } from './packageJsonHelpers.js';
+import { getEntry, getPluginName } from './packageJsonHelpers.js';
 import { getContext } from './context.js';
 import { executeUiNpm, resolveMapUi } from './hostingHelpers.js';
 
@@ -44,14 +44,7 @@ export async function getLibraryPaths(pluginName) {
  * @returns {Promise<void>}
  */
 export default async function buildModule(options) {
-  const entry = await getPluginEntry();
-  if (path.relative('src', entry).startsWith('.')) {
-    logger.warning(`detected irregular entry ${entry}`);
-    logger.warning(
-      'vuetify component resolution expects source files to be within "src"',
-    );
-  }
-
+  const entry = await getEntry();
   const pluginName = await getPluginName();
   const libraryPaths = await getLibraryPaths(pluginName);
   const distPath = path.join(getContext(), 'dist');

package/src/create.js

@@ -1,13 +1,19 @@
 import fs from 'fs';
 import path from 'path';
 import prompts from 'prompts';
-import semver from 'semver';
+import { minVersion, parse, valid } from 'semver';
 import tar from 'tar';
 import { logger } from '@vcsuite/cli-logger';
 import { LicenseType, writeLicense } from './licenses.js';
 import { DepType, installDeps, setVcMapVersion } from './packageJsonHelpers.js';
 import { updatePeerDependencies } from './update.js';
-import { name, version, promiseExec, getDirname } from './pluginCliHelper.js';
+import {
+  name,
+  version,
+  promiseExec,
+  getDirname,
+  peerDependencies as cliPeerDependencies,
+} from './pluginCliHelper.js';
 
 /**
  * @typedef {Object} PluginTemplateOptions
@@ -21,6 +27,7 @@ import { name, version, promiseExec, getDirname } from './pluginCliHelper.js';
  * @property {string} template
  * @property {Array<string>} peerDeps
  * @property {boolean} gitlabCi
+ * @property {boolean} typescript
  */
 
 /**
@@ -29,15 +36,25 @@ import { name, version, promiseExec, getDirname } from './pluginCliHelper.js';
  * @returns {Object}
  */
 function createPackageJson(options) {
+  const typescriptScripts = options.typescript
+    ? {
+        'type-check': 'vue-tsc --noEmit',
+        'ensure-types': 'vcmplugin ensure-types',
+      }
+    : {};
+  const main = options.typescript ? 'dist/index.js' : 'src/index.js';
   return {
     name: options.name,
     version: options.version,
     description: options.description,
     type: 'module',
-    main: 'src/index.js',
+    main,
     scripts: Object.assign(
-      { prepublishOnly: 'vcmplugin build' },
+      {
+        prepublishOnly: 'vcmplugin build',
+      },
       ...options.scripts,
+      typescriptScripts,
     ),
     author: options.author,
     license: options.license,
@@ -52,7 +69,7 @@ function createPackageJson(options) {
       'CHANGELOG.md',
     ],
     exports: {
-      '.': './src/index.js',
+      '.': options.typescript ? 'dist/index.js' : 'src/index.js',
       './dist': './dist/index.js',
     },
   };
@@ -142,10 +159,12 @@ async function createPluginTemplate(options, pluginPath) {
   const installEsLint = options.scripts.find((script) => script.lint);
   if (installEsLint) {
     packageJson.eslintIgnore = ['node_modules', 'dist', 'plugin-assets'];
-    packageJson.eslintConfig = {
-      root: true,
-      extends: '@vcsuite/eslint-config/vue',
-    };
+    if (!options.typescript) {
+      packageJson.eslintConfig = {
+        root: true,
+        extends: '@vcsuite/eslint-config/vue',
+      };
+    }
     packageJson.prettier = '@vcsuite/eslint-config/prettier.js';
   }
 
@@ -172,9 +191,10 @@ async function createPluginTemplate(options, pluginPath) {
       logger.debug('created src directory');
     }
 
+    const indexFile = options.typescript ? 'index.ts' : 'index.js';
     await fs.promises.copyFile(
-      path.join(getDirname(), '..', 'assets', 'index.js'),
-      path.join(pluginPath, 'src', 'index.js'),
+      path.join(getDirname(), '..', 'assets', indexFile),
+      path.join(pluginPath, 'src', indexFile),
     );
   }
 
@@ -196,7 +216,11 @@ async function createPluginTemplate(options, pluginPath) {
       (obj, key) => ({ ...obj, [key]: 'latest' }),
       {},
     );
-    await updatePeerDependencies(peerDependencies, pluginPath);
+    const { major, minor } = parse(
+      minVersion(cliPeerDependencies['@vcmap/ui']),
+    );
+    const mapVersion = `^${major}.${minor}`;
+    await updatePeerDependencies(peerDependencies, pluginPath, { mapVersion });
     logger.spin('installing dependencies... (this may take a while)');
     const devDeps = [`${name}@${version}`];
     if (installEsLint) {
@@ -211,6 +235,9 @@ async function createPluginTemplate(options, pluginPath) {
         'jsdom',
       );
     }
+    if (options.typescript) {
+      devDeps.push('typescript', 'vue-tsc');
+    }
     await installDeps(devDeps, DepType.DEV, pluginPath);
     logger.success('Installed dependencies');
   } catch (e) {
@@ -280,8 +307,11 @@ async function createPlugin(options) {
   ]);
 
   if (options.gitlabCi) {
+    const gitlabFile = options.typescript
+      ? 'ts.gitlab-ci.yml'
+      : '.gitlab-ci.yml';
     await fs.promises.copyFile(
-      path.join(getDirname(), '..', 'assets', '.gitlab-ci.yml'),
+      path.join(getDirname(), '..', 'assets', gitlabFile),
       path.join(pluginPath, '.gitlab-ci.yml'),
     );
     await fs.promises.cp(
@@ -291,6 +321,17 @@ async function createPlugin(options) {
     );
   }
 
+  if (options.typescript) {
+    await fs.promises.copyFile(
+      path.join(getDirname(), '..', 'assets', 'tsconfig.json'),
+      path.join(pluginPath, 'tsconfig.json'),
+    );
+    await fs.promises.copyFile(
+      path.join(getDirname(), '..', 'assets', 'eslintrc.cjs'),
+      path.join(pluginPath, '.eslintrc.cjs'),
+    );
+  }
+
   await createPluginTemplate(options, pluginPath);
   await setVcMapVersion(pluginPath);
   logger.success(`Created plugin ${options.name}`);
@@ -367,7 +408,7 @@ export default async function create() {
       name: 'version',
       message: 'Version',
       initial: '1.0.0',
-      validate: (value) => !!semver.valid(value),
+      validate: (value) => !!valid(value),
     },
     {
       type: 'text',
@@ -397,6 +438,14 @@ export default async function create() {
         value: type,
       })),
     },
+    {
+      type: 'toggle',
+      name: 'typescript',
+      message: 'Create plugin using typescript (recommended).',
+      initial: true,
+      active: 'yes',
+      inactive: 'no',
+    },
     {
       type: 'select',
       name: 'template',
@@ -404,6 +453,13 @@ export default async function create() {
       initial: 0,
       choices: templateChoices,
     },
+    {
+      type: (prev, values) => (values.typescript && prev ? 'confirm' : null),
+      name: 'keepTs',
+      message:
+        'The selected template is not in typescript. You will have to manually transform it. Keep typescript?',
+      initial: true,
+    },
     {
       type: 'multiselect',
       message: 'Add the following scripts to the package.json.',
@@ -434,5 +490,9 @@ export default async function create() {
     },
   });
 
+  if (answers.template && answers.typescript) {
+    answers.typescript = !!answers.keepTs;
+  }
+
   await createPlugin(answers);
 }

package/src/defaultCommand.js

@@ -24,8 +24,7 @@ Command.prototype.defaultServeOptions = function defaultServeOptions() {
     .option(
       '-c, --config <config>',
       'a config override to not use the default plugin config',
-    )
-    .option('--https', 'use https for serving');
+    );
 
   return this;
 };

package/src/ensureTypes.js

@@ -0,0 +1,16 @@
+import { existsSync } from 'node:fs';
+import { executeUiNpm, resolveMapUi } from './hostingHelpers.js';
+import { getPackageJson } from './packageJsonHelpers.js';
+
+export default async function ensureTypes() {
+  const packageJson = await getPackageJson();
+  if (packageJson.devDependencies?.typescript) {
+    const indexTs = resolveMapUi('index.d.ts');
+
+    if (!existsSync(indexTs)) {
+      console.log('building types');
+      await executeUiNpm('build-types -- --skipValidation');
+    }
+    console.log('types ensured');
+  }
+}

package/src/hostingHelpers.js

@@ -5,7 +5,7 @@ import fs from 'fs';
 import path from 'path';
 import { logger } from '@vcsuite/cli-logger';
 import { getContext, resolveContext } from './context.js';
-import { getPluginEntry, getPluginName } from './packageJsonHelpers.js';
+import { getPluginName, getEntry } from './packageJsonHelpers.js';
 import { promiseExec, getDirname } from './pluginCliHelper.js';
 
 /**
@@ -13,7 +13,6 @@ import { promiseExec, getDirname } from './pluginCliHelper.js';
  * @property {string|Object} [config] - an optional configObject or fileName to use for configuring the plugin
  * @property {string} [auth] - potential auth string to download assets (index.html, config) with
  * @property {number} [port]
- * @property {boolean} [https]
  */
 
 /**
@@ -120,14 +119,14 @@ export async function printVcmapUiVersion() {
 export async function reWriteAppConfig(appConfig, pluginConfig, production) {
   const name = await getPluginName();
   pluginConfig.name = name;
-  pluginConfig.entry = production ? 'dist/index.js' : await getPluginEntry();
+  pluginConfig.entry = production ? 'dist/index.js' : await getEntry();
   appConfig.modules = appConfig.modules ?? [];
   appConfig.modules.forEach((config) => {
     if (Array.isArray(config.plugins)) {
       config.plugins = config.plugins.filter((p) => p.name !== name);
     }
   });
-  appConfig.modules.push({ plugins: [pluginConfig] });
+  appConfig.modules.push({ _id: 'plugin-cli-module', plugins: [pluginConfig] });
 }
 
 /**
@@ -143,7 +142,8 @@ export function getAppConfigJson(appConfig, auth, production, configFile) {
     return Promise.resolve(configMap.get('app.config.json'));
   }
   const isObject = typeof appConfig === 'object' && appConfig !== null;
-  const isWebVcm = !isObject && /^https?:\/\//.test(usedConfig);
+  const isURL = (url) => /^https?:\/\//.test(url);
+  const isWebVcm = !isObject && isURL(usedConfig);
   return new Promise((resolve, reject) => {
     async function handleAppConfig(data) {
       try {
@@ -151,6 +151,15 @@ export function getAppConfigJson(appConfig, auth, production, configFile) {
         configMap.set('app.config.json', appConfigJson);
         const pluginConfig = await getPluginConfig(configFile);
         await reWriteAppConfig(appConfigJson, pluginConfig, production);
+        if (isWebVcm) {
+          // replace relative URLs by absolute ones
+          appConfigJson.modules = appConfigJson.modules.map((m) => {
+            if (typeof m === 'string' && !isURL(m)) {
+              return new URL(m, usedConfig).toString();
+            }
+            return m;
+          });
+        }
         resolve(appConfigJson);
       } catch (e) {
         reject(e);

package/src/packageJsonHelpers.js

@@ -3,7 +3,7 @@ import { writeFile, readFile } from 'fs/promises';
 import { parse, satisfies, validRange } from 'semver';
 import { logger } from '@vcsuite/cli-logger';
 import path from 'path';
-import { getContext } from './context.js';
+import { getContext, resolveContext } from './context.js';
 import { promiseExec } from './pluginCliHelper.js';
 
 /** @type {Object|null} */
@@ -42,17 +42,15 @@ export async function getPluginName() {
 }
 
 /**
+ * Gets the entry of the package
  * @returns {Promise<string>}
  */
-export async function getPluginEntry() {
-  const { main, module, type } = await getPackageJson();
-
-  let entry = type === 'module' ? module : null;
-  entry = entry || main;
-  if (!entry) {
-    throw new Error('Could not determine entry point');
+export async function getEntry() {
+  const isTS = resolveContext('src', 'index.ts');
+  if (existsSync(isTS)) {
+    return 'src/index.ts';
   }
-  return entry;
+  return 'src/index.js';
 }
 
 /**

package/src/pluginCliHelper.js

@@ -17,7 +17,7 @@ export function getDirname() {
  * @type {string} version
  * @type {string} name
  */
-export const { version, name } = JSON.parse(
+export const { version, name, peerDependencies } = JSON.parse(
   fs.readFileSync(path.join(getDirname(), '..', 'package.json')).toString(),
 );
 
@@ -27,7 +27,7 @@ export const { version, name } = JSON.parse(
 export const promiseExec = util.promisify(childProcess.exec);
 
 /**
- * @typedef {ServeOptions} VcmConfigJs
+ * @typedef {PreviewOptions} VcmConfigJs
  * @property {Object} proxy - see https://vitejs.dev/config/server-options.html#server-proxy
  */
 

package/src/preview.js

@@ -23,8 +23,8 @@ import setupMapUi from './setupMapUi.js';
 import { getVcmConfigJs } from './pluginCliHelper.js';
 
 /**
- * @typedef {HostingOptions} PreviewOptions
- * @property {string} [vcm]
+ * @typedef {ServeOptions} PreviewOptions
+ * @property {string} [vcm] - an optional URL to a VC Map application
  */
 
 /**
@@ -38,12 +38,11 @@ function setAliases(alias, libraryPaths) {
 }
 
 /**
- * @param {string} [hostedVcm]
- * @param {boolean} [https]
+ * @param {VcmConfigJs} options
  * @returns {Promise<import("vite").InlineConfig>}
  */
-async function getServerOptions(hostedVcm, https) {
-  let proxy;
+async function getServerOptions(options) {
+  let proxy = options.proxy || {};
   const normalLibraries = await getLibraryPaths('normal');
   const scopedLibraries = await getLibraryPaths('@scoped/plugin');
   const alias = {
@@ -52,11 +51,24 @@ async function getServerOptions(hostedVcm, https) {
   setAliases(alias, normalLibraries);
   setAliases(alias, scopedLibraries);
 
-  if (hostedVcm) {
+  if (options.vcm) {
+    const proxyOptions = {
+      target: options.vcm,
+      changeOrigin: true,
+      secure: false,
+      configure(httpProxy) {
+        httpProxy.on('proxyRes', (proxyRes) => {
+          delete proxyRes.headers['Content-Security-Policy'];
+          delete proxyRes.headers['content-security-policy'];
+        });
+      },
+    };
+
     proxy = {
-      '^/style.css': hostedVcm,
-      '^/assets': hostedVcm,
-      '^/plugins': hostedVcm,
+      ...proxy,
+      '^/style.css': proxyOptions,
+      '^/assets': proxyOptions,
+      '^/plugins': proxyOptions,
     };
   }
 
@@ -69,7 +81,6 @@ async function getServerOptions(hostedVcm, https) {
     server: {
       middlewareMode: true,
       proxy,
-      https,
     },
   };
 }
@@ -87,18 +98,21 @@ export default async function preview(options) {
     if (!fs.existsSync(resolveMapUi('dist'))) {
       await buildMapUI();
     }
+  } else {
+    logger.info(`Using hosted VC Map application ${mergedOptions.vcm}`);
   }
   checkReservedDirectories();
   await build({ development: false, watch: true });
   const app = express();
   logger.info('Starting preview server...');
-  const server = await createServer(
-    await getServerOptions(mergedOptions.vcm, mergedOptions.https),
-  );
+  const inlineConfig = await getServerOptions(mergedOptions);
+  const server = await createServer(inlineConfig);
 
   addAppConfigRoute(
     app,
-    mergedOptions.vcm ? `${mergedOptions.vcm}/app.config.json` : null,
+    mergedOptions.vcm
+      ? `${mergedOptions.vcm}/app.config.json`
+      : mergedOptions.appConfig,
     mergedOptions.auth,
     mergedOptions.config,
     true,

package/src/serve.js

@@ -92,6 +92,7 @@ export default async function serve(options) {
   }
   const vcmConfigJs = await getVcmConfigJs();
   const mergedOptions = { ...vcmConfigJs, ...options };
+
   await printVcmapUiVersion();
   /*
   // In case @vcmap/ui is linked via git+ssh, dist folder is not available and must be built first
@@ -105,7 +106,7 @@ export default async function serve(options) {
   const port = mergedOptions.port || 8008;
 
   logger.info('Starting development server...');
-  const proxy = await getProxy(mergedOptions.https ? 'https' : 'http', port);
+  const proxy = await getProxy('http', port);
   const { peerDependencies } = await getPackageJson();
 
   const optimizationIncludes = [
@@ -152,7 +153,6 @@ export default async function serve(options) {
     plugins: [vue2(), createConfigJsonReloadPlugin()],
     server: {
       middlewareMode: true,
-      https: mergedOptions.https,
       proxy: { ...mergedOptions.proxy, ...proxy },
     },
     css: {

package/src/update.js

@@ -1,5 +1,5 @@
 import { logger } from '@vcsuite/cli-logger';
-import { valid } from 'semver';
+import { validRange } from 'semver';
 import {
   checkVcMapVersion,
   DepType,
@@ -26,7 +26,7 @@ export async function updatePeerDependencies(
   pluginPath,
   options = {},
 ) {
-  if (options.mapVersion && !valid(options.mapVersion)) {
+  if (options.mapVersion && !validRange(options.mapVersion)) {
     logger.error(
       `The mapVersion ${options.mapVersion} is not valid. Using 'latest' instead`,
     );