@vcmap/plugin-cli 1.0.0 → 2.0.1

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,
-};

package/src/preview.js

@@ -0,0 +1,94 @@
+import path from 'path';
+import { createServer } from 'vite';
+import express from 'express';
+import { logger } from '@vcsuite/cli-logger';
+import {
+  addIndexRoute,
+  addMapConfigRoute,
+  checkReservedDirectories,
+  createConfigJsonReloadPlugin,
+  printVcmapUiVersion,
+} from './hostingHelpers.js';
+import build, { getLibraryPaths } from './build.js';
+import { getContext } from './context.js';
+
+/**
+ * @typedef {HostingOptions} PreviewOptions
+ * @property {string} [vcm]
+ */
+
+/**
+ * @param {Object<string, string>} alias
+ * @param {Object<string, string>} libraryPaths
+ */
+function setAliases(alias, libraryPaths) {
+  Object.values(libraryPaths).forEach((entry) => {
+    alias[entry] = entry.replace(/(..\/)*assets/, '/assets');
+  });
+}
+
+/**
+ * @param {string} [hostedVcm]
+ * @param {boolean} [https]
+ * @returns {Promise<import("vite").InlineConfig>}
+ */
+async function getServerOptions(hostedVcm, https) {
+  let proxy;
+  const normalLibraries = getLibraryPaths('normal');
+  const scopedLibraries = getLibraryPaths('@scoped/plugin');
+  const alias = {};
+  setAliases(alias, normalLibraries);
+  setAliases(alias, scopedLibraries);
+
+  if (hostedVcm) {
+    proxy = {
+      '^/style.css': hostedVcm,
+      '^/assets': hostedVcm,
+      '^/plugins': hostedVcm,
+    };
+  }
+
+  return {
+    publicDir: false,
+    plugins: [
+      createConfigJsonReloadPlugin(),
+    ],
+    resolve: {
+      alias,
+    },
+    server: {
+      middlewareMode: 'html',
+      proxy,
+      https,
+    },
+  };
+}
+
+/**
+ * @param {PreviewOptions} options
+ * @returns {Promise<void>}
+ */
+export default async function preview(options) {
+  if (!options.vcm) {
+    await printVcmapUiVersion();
+  }
+  checkReservedDirectories();
+  build({ development: false, watch: true }, true);
+  const app = express();
+  logger.info('Starting preview server...');
+  const server = await createServer(await getServerOptions(options.vcm, options.https));
+
+  addMapConfigRoute(app, options.vcm ? `${options.vcm}/map.config.json` : null, options.auth, options.config, true);
+  addIndexRoute(app, server, true, options.vcm, options.auth);
+
+  if (!options.vcm) {
+    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(server.middlewares);
+
+  const port = options.port || 5005;
+  await app.listen(port);
+  logger.info(`Server running on port ${port}`);
+}

package/src/serve.js

@@ -1,202 +1,80 @@
-const path = require('path');
-const https = require('https');
-const http = require('http');
-const { URL } = require('url');
-const fs = require('fs');
-const WebpackDevServer = require('webpack-dev-server');
-const webpack = require('webpack');
-const { logger } = require('@vcsuite/cli-logger');
-const { getContext, resolveContext } = require('./context');
-const { getDevWebpackConfig } = require('./getWebpackConfig');
-const { getPluginName } = require('./packageJsonHelpers');
-
-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);
-  }
-}
-
-function getIndexHtml(stringUrl, fileName, auth) {
-  return new Promise((resolve, reject) => {
-    httpGet(stringUrl, auth, (res) => {
-      if (res.statusCode >= 400) {
-        logger.error('got status code: ', res.statusCode);
-        reject(new Error(`StatusCode ${res.statusCode}`));
-      }
-      const write = fs.createWriteStream(resolveContext(fileName));
-      write.on('finish', resolve);
-      write.on('error', (err) => {
-        reject(err);
-      });
-      res.pipe(write);
-    });
-  });
-}
-
-let configJson = null;
+import fs from 'fs';
+import { createServer } from 'vite';
+import { createVuePlugin } from 'vite-plugin-vue2';
+import express from 'express';
+import { logger } from '@vcsuite/cli-logger';
+import path from 'path';
+import { VuetifyResolver } from 'unplugin-vue-components/dist/resolvers.js';
+import Components from 'unplugin-vue-components/dist/vite.js';
+import { getContext } from './context.js';
+import {
+  addIndexRoute,
+  addMapConfigRoute,
+  checkReservedDirectories,
+  createConfigJsonReloadPlugin,
+  printVcmapUiVersion,
+} from './hostingHelpers.js';
 
 /**
- * @param {string} fileName
- * @returns {Promise<Object>}
+ * @typedef {HostingOptions} ServeOptions
+ * @property {string} [mapConfig] - an filename or URL to a map config
  */
-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());
-  }
-  // eslint-disable-next-line no-underscore-dangle
-  delete config._esmodule;
-  return config;
-}
 
-function getConfigJson(vcm, name, { auth, config: configFile }) {
-  if (configJson) {
-    return Promise.resolve(configJson);
+/**
+ * @param {ServeOptions} options
+ * @returns {Promise<void>}
+ */
+export default async function serve(options) {
+  if (!fs.existsSync(path.join(getContext(), 'node_modules', '@vcmap', 'ui'))) {
+    logger.error('Can only serve in dev mode, if the map ui is a dependency of the current context');
+    return;
   }
-  const isWebVcm = /^https?:\/\//.test(vcm);
-  return new Promise((resolve, reject) => {
-    function handleStream(stream) {
-      let data = '';
-      stream.on('data', (chunk) => {
-        data += chunk.toString();
-      });
+  await printVcmapUiVersion();
+  checkReservedDirectories();
+  const app = express();
+  logger.info('Starting development server...');
 
-      stream.on('close', async () => {
-        try {
-          configJson = JSON.parse(data);
-          configJson.plugins = configJson.plugins || [];
-          const pluginConfig = await readConfigJson(configFile);
-          // eslint-disable-next-line no-underscore-dangle
-          pluginConfig.entry = '/_dist/plugin.js';
-          pluginConfig.name = name;
-          const idx = configJson.plugins.findIndex(p => p.name === name);
-          if (idx > -1) {
-            configJson.plugins.splice(idx, 1, pluginConfig);
-          } else {
-            configJson.plugins.push(pluginConfig);
-          }
-          resolve(configJson);
-        } catch (e) {
-          reject(e);
-        }
-      });
-    }
-    if (isWebVcm) {
-      httpGet(`${vcm}config.json`, auth, (res) => {
-        if (res.statusCode < 400) {
-          handleStream(res);
-        }
-      });
-    } else {
-      handleStream(fs.createReadStream(path.join(vcm, 'config.json')));
-    }
-  });
-}
-
-async function serve(options) {
-  logger.spin('Starting development server...');
-  let { vcm, index } = options;
-  const pluginName = options.pluginName || await getPluginName();
-  const isWebVcm = /^https?:\/\//.test(vcm);
-
-  const proxy = {};
-  const indexFilename = 'index.html'; // XXX maybe use some random filename when web to not clobber anything
-  if (isWebVcm) {
-    vcm = `${vcm.replace(/\/$/, '')}/`;
-    await getIndexHtml(`${vcm}/${index}`, indexFilename, options.auth);
-    ['/lib', '/css', '/fonts', '/images', '/img', '/templates', '/datasource-data', '/plugins']
-      .concat(options.proxyRoute) // TODO allow for more complex proxy options, e.g add a target such as --proxyRoute myProxy=myTarget
-      .forEach((p) => {
-        proxy[p] = {
-          target: vcm,
-          changeOrigin: true,
-          auth: options.auth,
-        };
-      });
-  }
-  const webpackConfig = await getDevWebpackConfig(options);
-  const server = new WebpackDevServer(webpack(webpackConfig), {
-    hot: true,
-    hotOnly: true,
-    open: false,
-    injectClient: false,
-    publicPath: '/_dist',
-    logLevel: 'warn',
-    clientLogLevel: 'silent',
-    useLocalIp: true,
-    historyApiFallback: {
-      disableDotRule: true,
-      rewrites: [
-        { from: /./, to: '/index.html' },
+  const server = await createServer({
+    root: getContext(),
+    publicDir: false,
+    optimizeDeps: {
+      exclude: [
+        '@vcmap/ui',
+        '@vcmap/core',
+        'ol',
+        '@vcsuite/ui-components',
+        'proj4',
+      ],
+      include: [
+        'fast-deep-equal',
+        'rbush-knn',
+        'pbf',
+        '@vcmap/cesium',
       ],
     },
-    staticOptions: {
-      fallthrough: false,
-    },
-    before(app) {
-      app.use('/config.json', (req, res) => {
-        getConfigJson(vcm, pluginName, options)
-          .then((config) => {
-            const stringConfig = JSON.stringify(config, null, 2);
-            res.setHeader('Content-Type', 'application/json');
-            res.write(stringConfig);
-            res.end();
-          });
-      });
-    },
-    after(app) {
-      app.use('/', (err, req, res, next) => {
-        if (err.statusCode === 404 && isWebVcm) {
-          httpGet(`${vcm}${req.url.replace(/^\//, '')}`, options.auth, (innerRes) => {
-            if (innerRes.statusCode < 400) {
-              innerRes.pipe(res);
-            }
-          });
-        } else {
-          next();
-        }
-      });
+    plugins: [
+      createVuePlugin(),
+      createConfigJsonReloadPlugin(),
+      Components({
+        resolvers: [
+          VuetifyResolver(),
+        ],
+        include: [],
+        exclude: [],
+      }),
+    ],
+    server: {
+      middlewareMode: 'html',
+      https: options.https,
     },
-    proxy,
-    contentBase: isWebVcm ? getContext() : [options.vcm, getContext()],
-    contentBasePublicPath: '/',
-    index: 'index.html',
-  });
-
-  logger.stopSpinner();
-  server.listen(options.port, '0.0.0.0', (err) => {
-    if (err) {
-      logger.error(err);
-    } else {
-      logger.success('Your application is running');
-    }
   });
 
-  ['SIGINT', 'SIGTERM'].forEach((signal) => {
-    process.on(signal, () => {
-      server.close(() => {
-        if (isWebVcm) {
-          fs.unlinkSync(resolveContext(index));
-        }
-        process.exit(0);
-      });
-    });
-  });
-}
+  addMapConfigRoute(app, options.mapConfig, options.auth, options.config);
+  addIndexRoute(app, server);
 
+  app.use(server.middlewares);
 
-module.exports = serve;
+  const port = options.port || 8008;
+  await app.listen(port);
+  logger.info(`Server running on port ${port}`);
+}