@vcmap/plugin-cli 2.0.5 → 2.0.8

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
@@ -185,16 +209,17 @@ 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> {
+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):VcsPlugin<T, S>;
 ```
 
 A Simple JavaScript implementation of this interface can be seen below::
@@ -211,10 +236,11 @@ export default function defaultExport(config) {
     },
     get version() {
       return packageJSON.version;
-    },
-    initialize(app) {},
-    onVcsAppMounted(app) {},
-    toJSON() {},
+    }, 
+    async initialize (app, state) {},
+    async onVcsAppMounted(app) {}, 
+    async getState() { return {}; },
+    async toJSON() { return {}; },
     destroy() {},
   }
 }

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

@@ -8,6 +8,7 @@ stages:
   - build
   - test
   - bundle
+  - deploy
   - version
   - publish
 
@@ -20,7 +21,6 @@ stages:
 build:
   <<: *job_definition
   script:
-    - npm set registry 'http://npmregistry:4873'
     - npm ci
   before_script:
     - mkdir -p ~/.ssh
@@ -38,6 +38,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 +56,72 @@ 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:
+  <<: *staging_build_template
+  stage: deployCluster
+  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 +155,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

@@ -3,14 +3,14 @@
     <v-card class="pa-2 ma-2">
       <v-container>
         <v-row class="justify-center mb-4">
-          <h1>Hello World</h1>
+          <h1>{{ $t('helloWorld.helloWorld')}}</h1>
         </v-row>
         <v-row class="justify-center">
           <VcsButton
             icon="mdi-times"
             @click="closeSelf"
           >
-            Close Window
+            {{ $t('helloWorld.close')}}
           </VcsButton>
         </v-row>
       </v-container>

package/assets/helloWorld/src/index.js

@@ -3,19 +3,27 @@ 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}
+ * @param {T} config - the configuration of this plugin instance, passed in from the app.
+ * @returns {import("@vcmap/ui/src/vcsUiApp").VcsPlugin<T>}
+ * @template {Object} T
+ * @template {Object} S
  */
-export default function helloWorld(app, config) {
+export default function(config) {
   return {
     get name() { return name; },
     get version() { return version; },
-    initialize: async (vcsUiApp) => {
+    /**
+     * @param {import("@vcmap/ui").VcsUiApp} vcsUiApp
+     * @param {S=} state
+     * @returns {Promise<void>}
+     */
+    initialize: async (vcsUiApp, state) => {
       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);
     },
+    /**
+     * @param {import("@vcmap/ui").VcsUiApp} vcsUiApp
+     * @returns {Promise<void>}
+     */
     onVcsAppMounted: async (vcsUiApp) => {
       console.log('Called when the root UI component is mounted and managers are ready to accept components');
       vcsUiApp.windowManager.add({
@@ -28,8 +36,36 @@ export default function helloWorld(app, 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',
+          close: 'Close',
+        },
+      },
+      de: {
+        helloWorld: {
+          helloWorld: 'Hallo Welt',
+          close: 'Schließen',
+        },
+      },
+    },
+    destroy() {
+      console.log('hook to cleanup');
     },
   };
-}
+};

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.5",
+  "version": "2.0.8",
   "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.17.21",
-    "vinyl-fs": "^3.0.3",
-    "vite": "^2.9.1",
-    "vite-plugin-vue2": "^1.7.3",
-    "vue-template-compiler": "^2.6.14"
+    "unplugin-vue-components": "^0.21.1",
+    "vite": "^2.9.14",
+    "vite-plugin-vue2": "^2.0.1",
+    "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(),
@@ -82,6 +86,9 @@ export default async function buildModule(options) {
         external,
         output: {
           paths: libraryPaths,
+          manualChunks() { // ensure only one chunk will be created
+            return 'index';
+          },
         },
       },
       watch: options.watch ? {
@@ -90,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,48 @@
+import fs from 'fs';
+import { cp, copyFile, writeFile } from 'fs/promises';
+import path from 'path';
+import { getContext } 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 fs.rm(distPath, { recursive: true, force: true });
+  await fs.mkdir(distPath);
+  await setupMapUi();
+  const { buildPluginsForPreview } = await import('@vcmap/ui/build/buildHelpers.js');
+  await buildPluginsForPreview(getDefaultConfig(), true);
+  await fs.promises.mkdir(path.join(distPath, 'plugins', pluginName), { recursive: true });
+
+  await buildModule({ outputPath: `plugins/${pluginName}`, keepDistFolder: 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

@@ -19,8 +19,6 @@ 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
  */
 
@@ -100,7 +98,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(
@@ -170,6 +168,7 @@ 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: { preview: 'vcmplugin buildStagingApp' }, selected: true },
     { title: 'lint', value: { lint: 'eslint "{src,tests}/**/*.{js,vue}"' }, selected: true },
   ];
 
@@ -239,12 +238,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 +245,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/pack.js

@@ -1,6 +1,5 @@
-import { Transform } from 'stream';
 import fs from 'fs';
-import vinylFs from 'vinyl-fs';
+import { readFile, writeFile } from 'fs/promises';
 import archiver from 'archiver';
 import { logger } from '@vcsuite/cli-logger';
 import { getPluginName } from './packageJsonHelpers.js';
@@ -11,29 +10,10 @@ 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);
-  });
+async function replaceAssets(name) {
+  let indexJSContent = await readFile(getContext('dist', 'index.js'));
+  indexJSContent = indexJSContent.replace(/\.?\/?(plugin-assets)\//g, `plugins/${name}/$1/`);
+  await writeFile(getContext('dist', 'index.js'), indexJSContent);
 }
 
 /**
@@ -89,7 +69,6 @@ function zip(name) {
       ['README.md'],
       ['config.json'],
       ['dist', 'index.js'],
-      ['dist', 'style.css'],
     ].forEach((fileArray) => {
       const file = resolveContext(...fileArray);
       if (fs.existsSync(file)) {

package/src/serve.js

@@ -103,6 +103,13 @@ export default async function serve(options) {
       https: options.https,
       proxy,
     },
+    css: {
+      preprocessorOptions: {
+        sass: {
+          additionalData: "\n@import './node_modules/@vcmap/ui/src/styles/variables.scss'\n",
+        },
+      },
+    },
   });
 
   addMapConfigRoute(app, options.mapConfig, options.auth, options.config);

package/assets/helloWorld/.gitignore

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