@vcmap/plugin-cli 1.1.1 → 2.0.1

package/src/create.js

@@ -1,12 +1,14 @@
-const fs = require('fs');
-const path = require('path');
-const prompts = require('prompts');
-const semver = require('semver');
-const util = require('util');
-const childProcess = require('child_process');
-const { logger } = require('@vcsuite/cli-logger');
-const { version, name } = require('../package.json');
-const { LicenseType, writeLicense } = require('./licenses');
+import fs from 'fs';
+import path from 'path';
+import prompts from 'prompts';
+import semver from 'semver';
+import util from 'util';
+import childProcess from 'child_process';
+import { logger } from '@vcsuite/cli-logger';
+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());
 
 /**
  * @typedef {Object} PluginTemplateOptions
@@ -18,6 +20,7 @@ const { LicenseType, writeLicense } = require('./licenses');
  * @property {string} license
  * @property {string} mapVersion
  * @property {boolean} addDevDep
+ * @property {Array<string>} peerDeps
  */
 
 /**
@@ -37,8 +40,8 @@ async function createPluginTemplate(options) {
   }
 
   await fs.promises.mkdir(pluginPath);
+  await fs.promises.mkdir(path.join(pluginPath, 'plugin-assets'));
   logger.debug('created plugin directory');
-
   const packageJson = {
     name: options.name,
     version: options.version,
@@ -51,7 +54,7 @@ async function createPluginTemplate(options) {
       vcm: options.mapVersion,
     },
     dependencies: {},
-    devDependencies: options.addDevDep ? { [name]: `^${version}` } : {},
+    devDependencies: options.addDevDep ? { [name]: `^${version}` } : {}, // XXX should we add all our deps here? cesium, ol, vue etc.
   };
 
   const writePackagePromise = fs.promises.writeFile(
@@ -61,7 +64,6 @@ async function createPluginTemplate(options) {
 
   const configJson = {
     name: options.name,
-    version: options.version,
   };
 
   const writeConfigPromise = fs.promises.writeFile(
@@ -82,15 +84,24 @@ async function createPluginTemplate(options) {
 
   const writeIndexPromise = fs.promises.writeFile(
     path.join(pluginPath, 'src', 'index.js'),
-    ['import { version } from \'../package.json\';',
+    [
+      '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\'); },',
+      '  };',
+      '};',
       '',
-      'export default {',
-      '  version,',
-      '  // preInitialize',
-      '  // postInitialize',
-      '  // registerUiPlugin',
-      '  // postUiInitialize',
-      '};'].join('\n'),
+    ].join('\n'),
   );
 
   await Promise.all([
@@ -101,10 +112,15 @@ async function createPluginTemplate(options) {
     writeLicense(options.author, options.license, pluginPath),
   ]);
 
-  logger.spin('installing dependencies...');
+
+  logger.spin('installing dependencies... (this may take a while)');
   const exec = util.promisify(childProcess.exec);
   try {
-    const { stdout, stderr } = await exec('npm i', { cwd: pluginPath });
+    let installCmd = 'npm i';
+    if (options.peerDeps.length > 0) {
+      installCmd = `${installCmd} --save-peer ${options.peerDeps.join(' ')}`;
+    }
+    const { stdout, stderr } = await exec(installCmd, { cwd: pluginPath });
     logger.log(stdout);
     logger.error(stderr);
     logger.success('installed dependencies');
@@ -119,13 +135,24 @@ async function createPluginTemplate(options) {
 /**
  * @returns {Promise<void>}
  */
-async function create() {
+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' } },
   ];
 
+  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' },
+    { title: 'ol', value: 'ol@~6.13.0' },
+    { title: '@vue/composition-api', value: '@vue/composition-api@~1.4.5' },
+  ];
+
   const questions = [
     {
       type: 'text',
@@ -183,7 +210,14 @@ async function create() {
       type: 'text',
       name: 'mapVersion',
       message: 'Map version',
-      initial: '>=4.0',
+      initial: '>=5.0',
+    },
+    {
+      name: 'peerDeps',
+      type: 'multiselect',
+      message: 'Add the following peer dependencies to the package.json.',
+      choices: peerDependencyChoices,
+      hint: '- Space to select. Enter to submit',
     },
     {
       type: 'toggle',
@@ -199,5 +233,3 @@ async function create() {
 
   await createPluginTemplate(answers);
 }
-
-module.exports = create;

package/src/defaultCommand.js

@@ -1,25 +1,23 @@
-const { Command } = require('commander');
-const { logger } = require('@vcsuite/cli-logger');
-const { setContext } = require('./context');
+import { Command } from 'commander';
+import { logger } from '@vcsuite/cli-logger';
+import { setContext } from './context.js';
 
 Command.prototype.defaultOptions = function defaultOptions() {
   this
-    .option('-n, --plugin-name [name]', 'a name override to use. extracts the name from the package.json by default')
     .option('--context [path]', 'an optional context, default is cwd', (value) => {
       setContext(value);
       return value;
-    })
-    .option('--no-condense-whitespace', 'do not condense white space')
-    .option('-e, --entry <entry>', 'entrypoint override');
+    });
 
   return this;
 };
 
-Command.prototype.defaultBuildOptions = function defaultBuildOptions() {
+Command.prototype.defaultServeOptions = function defaultServeOptions() {
   this
-    .defaultOptions()
-    .option('-l, --library [name]', 'whether to create a library with [name] or not')
-    .option('--library-target [target]', 'library target', 'commonjs2');
+    .option('-p, --port [port]', 'the port to listen on', /\d+/)
+    .option('--auth <user:password>', 'an optional auth to append to proxy requests')
+    .option('-c, --config <config>', 'a config override to not use the default plugin config')
+    .option('--https', 'use https for serving');
 
   return this;
 };

package/src/hostingHelpers.js

@@ -0,0 +1,226 @@
+import { fileURLToPath, URL } from 'url';
+import https from 'https';
+import http from 'http';
+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';
+
+/**
+ * @typedef {Object} HostingOptions
+ * @property {string} [config] - an optional 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]
+ */
+
+export function checkReservedDirectories() {
+  ['assets', 'plugins']
+    .forEach((dir) => {
+      if (fs.existsSync(path.join(getContext(), dir))) {
+        logger.warning(`found reserved directory ${dir}. serving my not work as exptected`);
+      }
+    });
+}
+
+/**
+ * @returns {string}
+ */
+export function getDirname() {
+  return path.dirname(fileURLToPath(import.meta.url));
+}
+
+/**
+ * @param {string} stringUrl
+ * @param {string} auth
+ * @param {function(http.IncomingMessage)} handler
+ */
+export function httpGet(stringUrl, auth, handler) {
+  const url = new URL(stringUrl);
+  const options = {
+    hostname: url.hostname,
+    port: url.port,
+    path: url.pathname,
+  };
+
+  if (auth) {
+    options.headers = { Authorization: `Basic ${Buffer.from(auth).toString('base64')}` };
+  }
+  if (url.protocol === 'https:') {
+    https.get(options, handler);
+  } else {
+    http.get(options, handler);
+  }
+}
+
+/**
+ * @param {string} fileName
+ * @returns {Promise<Object>}
+ */
+export async function readConfigJson(fileName) {
+  const configFileName = fileName || resolveContext('config.json');
+  let config = {};
+  if (fs.existsSync(configFileName)) {
+    const content = await fs.promises.readFile(configFileName);
+    config = JSON.parse(content.toString());
+  }
+
+  return config;
+}
+
+let configJson = null;
+
+/**
+ * @returns {Promise<string>}
+ */
+export async function printVcmapUiVersion() {
+  const packageJsonPath = path.join(getContext(), 'node_modules', '@vcmap', 'ui', 'package.json');
+  if (!fs.existsSync(packageJsonPath)) {
+    throw new Error(`Cannot find the @vcmap/ui package in ${getContext()}. Are you sure you installed it?`);
+  }
+
+  const content = await fs.promises.readFile(packageJsonPath);
+  const { version } = JSON.parse(content.toString());
+  logger.info(`Using @vcmap/ui version: ${version} found in current project.`);
+}
+
+/**
+ * @param {string} [mapConfig] - fs or https to config. defaults to @vcmap/ui/map.config.json
+ * @param {string} [auth]
+ * @param {boolean} [production]
+ * @param {string} [configFile]
+ * @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 isWebVcm = /^https?:\/\//.test(usedConfig);
+  return new Promise((resolve, reject) => {
+    function handleStream(stream) {
+      let data = '';
+      stream.on('data', (chunk) => {
+        data += chunk.toString();
+      });
+
+      stream.on('close', async () => {
+        try {
+          configJson = JSON.parse(data);
+          configJson.plugins = production && configJson.plugins ? configJson.plugins : [];
+          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);
+          }
+          resolve(configJson);
+        } catch (e) {
+          reject(e);
+        }
+      });
+    }
+    if (isWebVcm) {
+      httpGet(usedConfig, auth, (res) => {
+        if (res.statusCode < 400) {
+          handleStream(res);
+        }
+      });
+    } else {
+      handleStream(fs.createReadStream(path.join(usedConfig)));
+    }
+  });
+}
+
+/**
+ * @param {string} stringUrl
+ * @param {string} auth
+ * @returns {Promise<string>}
+ */
+function getIndexHtml(stringUrl, auth) {
+  return new Promise((resolve, reject) => {
+    httpGet(stringUrl, auth, (res) => {
+      let index = '';
+      if (res.statusCode >= 400) {
+        logger.error('got status code: ', res.statusCode);
+        reject(new Error(`StatusCode ${res.statusCode}`));
+      }
+      res.on('data', (chunk) => {
+        index += chunk.toString();
+      });
+      res.on('end', () => {
+        resolve(index);
+      });
+    });
+  });
+}
+
+/**
+ * @returns {import("vite").Plugin}
+ */
+export function createConfigJsonReloadPlugin() {
+  return {
+    name: 'ConfigJsonReload',
+    handleHotUpdate({ file }) {
+      if (file === path.join(getContext(), 'config.json')) {
+        configJson = null;
+      }
+    },
+  };
+}
+
+/**
+ * @param {Express} app
+ * @param {string} mapConfig
+ * @param {string} [auth]
+ * @param {string} [configFile]
+ * @param {boolean} [production]
+ */
+export function addMapConfigRoute(app, mapConfig, auth, configFile, production) {
+  app.get('/map.config.json', (req, res) => {
+    getConfigJson(mapConfig, auth, production, configFile)
+      .then((config) => {
+        const stringConfig = JSON.stringify(config, null, 2);
+        res.setHeader('Content-Type', 'application/json');
+        res.write(stringConfig);
+        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') :
+    path.join(getDirname(), '..', 'assets', 'index.html');
+  const buffer = await fs.promises.readFile(indexHtmlFileName);
+  return buffer.toString();
+}
+
+/**
+ * @param {Express} app
+ * @param {import("vite").ViteDevServer} server
+ * @param {boolean} [production]
+ * @param {string} [hostedVcm]
+ * @param {string} [auth]
+ */
+export function addIndexRoute(app, server, production, hostedVcm, auth) {
+  app.get('/', async (req, res) => {
+    let originalIndex = hostedVcm ?
+      await getIndexHtml(`${hostedVcm}/`, auth) :
+      await getMapUiIndexHtml(production); // TODO change hosted vcm index via option?
+
+    originalIndex = await server.transformIndexHtml('index.html', originalIndex);
+    res.status(200)
+      .set({ 'Content-Type': 'text/html' })
+      .end(originalIndex);
+  });
+}
+

package/src/licenses.js

@@ -1,5 +1,5 @@
-const fs = require('fs');
-const path = require('path');
+import fs from 'fs';
+import path from 'path';
 
 /**
  * @param {string} user
@@ -97,7 +97,7 @@ OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 /**
  * @enum {string}
  */
-const LicenseType = {
+export const LicenseType = {
   MIT: 'MIT',
   ISC: 'ISC',
   'APACHE-2.0': 'APACHE-2.0',
@@ -120,14 +120,9 @@ const LicenseTypeFunctions = {
  * @param {string} pluginPath
  * @returns {Promise<void>}
  */
-function writeLicense(user, type, pluginPath) {
+export function writeLicense(user, type, pluginPath) {
   const year = new Date().getFullYear();
   const text = LicenseTypeFunctions[type](user, year);
 
   return fs.promises.writeFile(path.join(pluginPath, 'LICENSE.md'), text);
 }
-
-module.exports = {
-  writeLicense,
-  LicenseType,
-};

package/src/pack.js

@@ -1,12 +1,11 @@
-const { Transform } = require('stream');
-const fs = require('fs');
-const webpack = require('webpack');
-const vinylFs = require('vinyl-fs');
-const archiver = require('archiver');
-const { logger } = require('@vcsuite/cli-logger');
-const { getProdWebpackConfig } = require('./getWebpackConfig');
-const { getPluginName } = require('./packageJsonHelpers');
-const { resolveContext, getContext } = require('./context');
+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 build from './build.js';
 
 /**
  * @param {string} name
@@ -17,7 +16,7 @@ function replaceAssets(name) {
     objectMode: true,
     transform(data, encoding, callback) {
       data.contents = Buffer.from(String(data.contents)
-        .replace(/\.?\/?(assets|img|fonts|media)\//g, `plugins/${name}/$1/`));
+        .replace(/\.?\/?(plugin-assets)\//g, `plugins/${name}/$1/`));
 
       callback(null, data);
     },
@@ -69,7 +68,7 @@ async function ensureConfigJson() {
  */
 function zip(name) {
   return new Promise((resolve, reject) => {
-    const zipStream = fs.createWriteStream(resolveContext('dist', `${name}.zip`));
+    const zipStream = fs.createWriteStream(resolveContext('dist', `${name.replace(/\//, '-')}.zip`));
     const archive = archiver('zip', { zlib: { level: 5 } });
 
     zipStream.on('close', () => {
@@ -88,61 +87,38 @@ function zip(name) {
     [
       ['package.json'],
       ['README.md'],
-      ['dist', 'config.json'],
-      ['dist', `${name}.js`],
+      ['config.json'],
+      ['dist', 'index.js'],
+      ['dist', 'style.css'],
     ].forEach((fileArray) => {
-      archive.file(resolveContext(...fileArray), { name: `${name}/${fileArray.pop()}` });
-    });
-
-    ['assets', 'img'].forEach((dir) => {
-      if (fs.existsSync(resolveContext(dir))) {
-        archive.directory(resolveContext(dir), `${name}/${dir}`);
+      const file = resolveContext(...fileArray);
+      if (fs.existsSync(file)) {
+        archive.file(file, { name: `${name}/${fileArray.pop()}` });
       }
     });
 
-    archive.finalize();
-  });
-}
+    if (fs.existsSync(resolveContext('plugin-assets'))) {
+      archive.directory(resolveContext('plugin-assets'), `${name}/plugin-assets`);
+    }
 
-/**
- * @param {ProdOptions} options
- * @returns {Promise<void>}
- */
-function compile(options) {
-  return getProdWebpackConfig(options)
-    .then((webpackConfig) => {
-      return new Promise((resolve, reject) => {
-        webpack(webpackConfig, (err, stats) => {
-          if (err) {
-            logger.error(err);
-            reject(err);
-          } else if (stats.hasErrors()) {
-            logger.log(stats.compilation.errors);
-            reject(stats.compilation.errors[0].Error);
-          } else {
-            logger.success(`build ${options.pluginName}`);
-            resolve();
-          }
-        });
-      });
+    archive.finalize().then(() => {
+      resolve();
     });
+  });
 }
 
 /**
- * @param {ProdOptions} options
  * @returns {Promise<void>}
  */
-async function pack(options) {
-  options.pluginName = options.pluginName || await getPluginName();
-  logger.spin(`building plugin: ${options.pluginName}`);
-  await compile(options);
-  await replaceAssets(options.pluginName);
+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(options.pluginName);
+  await zip(pluginName);
   logger.stopSpinner();
   logger.success('build finished');
 }
-
-module.exports = pack;

package/src/packageJsonHelpers.js

@@ -1,6 +1,5 @@
-const fs = require('fs');
-const path = require('path');
-const { resolveContext } = require('./context');
+import fs from 'fs';
+import { resolveContext } from './context.js';
 
 /** @type {Object|null} */
 let packageJson = null;
@@ -25,28 +24,25 @@ async function getPackageJson() {
 /**
  * @returns {Promise<string>}
  */
-async function getPluginName() {
+export async function getPluginName() {
   const { name } = await getPackageJson();
   if (!name) {
-    throw new Error('please speciy the plugins name in the package.json');
+    throw new Error('please specify the plugins name in the package.json');
   }
   return name;
 }
 
 /**
- * @returns {Promise<string|undefined>}
+ * @returns {Promise<string>}
  */
-async function getPluginEntry() {
+export async function getPluginEntry() {
   const { main, module, type } = await getPackageJson();
 
-  const entry = type === 'module' ? module : main;
-  if (entry && !path.isAbsolute(entry) && !/^\./.test(entry)) { // webpack requires a dot for relative paths
-    return `./${entry}`;
+  let entry = type === 'module' ? module : null;
+  entry = entry || main;
+  if (!entry) {
+    throw new Error('Could not determine entry point');
   }
   return entry;
 }
 
-module.exports = {
-  getPluginName,
-  getPluginEntry,
-};