@vcmap/plugin-cli 1.1.1 → 2.0.3

package/src/serve.js

@@ -1,204 +1,117 @@
-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');
+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 {
+  addConfigRoute,
+  addIndexRoute,
+  addMapConfigRoute,
+  checkReservedDirectories,
+  createConfigJsonReloadPlugin,
+  printVcmapUiVersion,
+  resolveMapUi,
+} from './hostingHelpers.js';
+import { getPluginName } from './packageJsonHelpers.js';
 
-function httpGet(stringUrl, auth, handler) {
-  const url = new URL(stringUrl);
-  const options = {
-    hostname: url.hostname,
-    port: url.port,
-    path: url.pathname,
-  };
+/**
+ * @typedef {HostingOptions} ServeOptions
+ * @property {string} [mapConfig] - an filename or URL to a map config
+ */
 
-  if (auth) {
-    options.headers = { Authorization: `Basic ${Buffer.from(auth).toString('base64')}` };
-  }
-  if (url.protocol === 'https:') {
-    https.get(options, handler);
-  } else {
-    http.get(options, handler);
-  }
-}
+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');
 
-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);
-    });
+  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);
+      },
+    };
   });
-}
 
-let configJson = null;
+  const pluginRoutes = Object.keys(proxy);
+  const name = await getPluginName();
+  const hasThisPlugin = pluginRoutes.find(p => p.startsWith(`^/plugins/${name}`));
 
-/**
- * @param {string} fileName
- * @returns {Promise<Object>}
- */
-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());
+  if (hasThisPlugin) {
+    delete proxy[hasThisPlugin];
   }
-  // eslint-disable-next-line no-underscore-dangle
-  delete config._esmodule;
-  return config;
+  return proxy;
 }
 
-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();
-      });
-
-      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')));
-    }
-  });
-}
+  await printVcmapUiVersion();
+  checkReservedDirectories();
+  const app = express();
+  const port = options.port || 8008;
 
-async function serve(options) {
-  logger.spin('Starting development server...');
-  // eslint-disable-next-line prefer-const
-  let { vcm, index } = options;
-  const pluginName = options.pluginName || await getPluginName();
-  const isWebVcm = /^https?:\/\//.test(vcm);
+  logger.info('Starting development server...');
+  const proxy = await getProxy(options.https ? 'https' : 'http', port);
 
-  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,
-          followRedirects: true,
-        };
-      });
-  }
-  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,
     },
-    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');
-    }
-  });
+  addMapConfigRoute(app, options.mapConfig, options.auth, options.config);
+  addIndexRoute(app, server);
+  await addConfigRoute(app, options.auth, options.config);
 
-  ['SIGINT', 'SIGTERM'].forEach((signal) => {
-    process.on(signal, () => {
-      server.close(() => {
-        if (isWebVcm) {
-          fs.unlinkSync(resolveContext(index));
-        }
-        process.exit(0);
-      });
-    });
-  });
-}
+  app.use(server.middlewares);
 
-
-module.exports = serve;
+  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');
+}

package/src/getWebpackConfig.js

@@ -1,290 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const autoprefixer = require('autoprefixer');
-const { getPluginEntry } = require('./packageJsonHelpers');
-const { resolveContext, getContext } = require('./context');
-
-/**
- * @enum {string}
- */
-const buildMode = {
-  DEVELOPMENT: 'development',
-  PRODUCTION: 'production',
-  TESTING: 'testing',
-};
-
-/**
- * @typedef {GetWebpackOptions} DevOptions
- * @property {string|undefined} vcm - the vcm directory
- * @property {number} port - the port number of the dev server // XXX take these options apart
- */
-
-/**
- * @typedef {GetWebpackOptions} ProdOptions
- * @property {string} pluginName - the name of the plugin being built
- * @property {boolean|undefined} modern - build for modern browsers
- */
-
-/**
- * @typedef {Object} GetWebpackOptions
- * @property {string|Object|undefined} entry - an alternative entry point, defaults to 'src/index'
- * @property {string|undefined} mode - 'development', 'production' or 'test'.
- * @property {boolean|undefined} condenseWhitespace - pass whitespace: 'condense' to vue loader
- */
-
-/**
- * @param {GetWebpackOptions} options
- * @returns {webpack.Configuration}
- */
-function getBaseConfig(options) {
-  return {
-    experiments: {
-      outputModule: true,
-    },
-    externals: {
-      '@vcmap/core': 'import @vcmap-core.js',
-    },
-    entry: options.entry,
-    context: getContext(),
-    resolve: {
-      extensions: ['.js', '.vue', '.json'],
-      alias: {
-        '@': resolveContext('src'),
-      },
-      modules: [
-        path.join(__dirname, '..', 'node_modules'),
-        'node_modules',
-        resolveContext('node_modules'),
-      ],
-    },
-    resolveLoader: {
-      modules: [
-        path.join(__dirname, '..', 'node_modules'),
-        'node_modules',
-        resolveContext('node_modules'),
-      ],
-    },
-    module: {
-      rules: [
-        {
-          test: /\.vue$/,
-          loader: 'vue-loader',
-          options: {
-            compilerOptions: {
-              whitespace: options.condenseWhitespace ? 'condense' : 'preserve',
-            },
-          },
-        },
-        {
-          test: /\.js$/,
-          loader: 'babel-loader',
-          include: [resolveContext('src')],
-          options: {
-            presets: [
-              require.resolve('@vue/babel-preset-app'),
-            ],
-          },
-        },
-        {
-          test: /\.(png|jpe?g|gif)(\?.*)?$/,
-          use: [
-            {
-              loader: 'url-loader',
-              options: {
-                limit: 10000,
-                name: 'img/[name].[hash:8].[ext]',
-              },
-            },
-          ],
-        },
-        {
-          test: /\.(svg)(\?.*)?$/,
-          use: [
-            {
-              loader: 'file-loader',
-              options: {
-                name: 'img/[name].[hash:8].[ext]',
-              },
-            },
-          ],
-        },
-        {
-          test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-          use: [
-            {
-              loader: 'url-loader',
-              options: {
-                limit: 10000,
-                name: 'media/[name].[hash:8].[ext]',
-              },
-            },
-          ],
-        },
-        {
-          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
-          use: [
-            {
-              loader: 'url-loader',
-              options: {
-                limit: 10000,
-                name: 'fonts/[name].[hash:8].[ext]',
-              },
-            },
-          ],
-        },
-        {
-          test: /\.css$/,
-          use: [
-            {
-              loader: 'vue-style-loader',
-              options: {
-                base: 1020,
-                shadowMode: false,
-              },
-            },
-            {
-              loader: 'css-loader',
-              options: {
-                sourceMap: false,
-                importLoaders: 2,
-              },
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
-                sourceMap: false,
-                plugins: [
-                  autoprefixer,
-                ],
-              },
-            },
-          ],
-        },
-        {
-          test: /\.p(ost)?css$/,
-          use: [
-            {
-              loader: 'vue-style-loader',
-              options: {
-                base: 1020,
-                shadowMode: false,
-              },
-            },
-            {
-              loader: 'css-loader',
-              options: {
-                sourceMap: false,
-                importLoaders: 2,
-              },
-            },
-            {
-              loader: 'postcss-loader',
-              options: {
-                sourceMap: false,
-                plugins: [
-                  autoprefixer,
-                ],
-              },
-            },
-          ],
-        },
-      ],
-    },
-    plugins: [
-      new VueLoaderPlugin(),
-      new webpack.DefinePlugin({
-        'process.env': { NODE_ENV: `"${options.mode}"`, BASE_URL: '""' },
-      }),
-    ],
-  };
-}
-
-/**
- * @param {ProdOptions} options
- * @returns {Promise<webpack.Configuration>}
- */
-async function getProdWebpackConfig(options) {
-  options.entry = options.entry || { plugin: await getPluginEntry() || './src/index' };
-  options.mode = options.mode || buildMode.PRODUCTION;
-  process.env.VUE_CLI_MODERN_BUILD = true;
-
-  if (typeof options.entry === 'string') {
-    options.entry = { plugin: options.entry };
-  }
-
-  const config = getBaseConfig(options);
-  config.output = {
-    path: resolveContext('dist'),
-    filename: `${options.pluginName}.js`,
-    library: {
-      type: 'module',
-    },
-    publicPath: './',
-  };
-
-  config.mode = options.mode;
-  if (options.mode !== 'development') {
-    config.devtool = false;
-    config.optimization = {
-      minimize: true,
-      minimizer: [
-        new TerserPlugin({
-          extractComments: false,
-        }),
-      ],
-    };
-  }
-
-  return config;
-}
-
-/**
- * @param {DevOptions} options
- * @returns {Promise<webpack.Configuration>}
- */
-async function getDevWebpackConfig(options) {
-  options.entry = options.entry || {
-    plugin: [
-      `webpack-dev-server/client?http://0.0.0.0:${options.port}/`,
-      'webpack/hot/only-dev-server',
-      await getPluginEntry() || './src/index.js',
-    ],
-  };
-  options.mode = options.mode || buildMode.DEVELOPMENT;
-  if (typeof options.entry === 'string') {
-    options.entry = {
-      plugin: [
-        `webpack-dev-server/client?http://0.0.0.0:${options.port}/`,
-        'webpack/hot/only-dev-server',
-        options.entry,
-      ],
-    };
-  }
-  const config = getBaseConfig(options);
-
-  config.output = {
-    globalObject: '(typeof self !== \'undefined\' ? self : this)',
-    path: resolveContext('_dist'),
-    library: {
-      type: 'module',
-    },
-    filename: '[name].js',
-    publicPath: '/_dist',
-  };
-
-  config.plugins.push(
-    new webpack.HotModuleReplacementPlugin(),
-    // new webpack.NoEmitOnErrorsPlugin(),
-  );
-  config.mode = options.mode;
-  config.devtool = 'eval-cheap-module-source-map';
-  return config;
-}
-
-module.exports = {
-  getBaseConfig,
-  getProdWebpackConfig,
-  getDevWebpackConfig,
-};

package/src/webpack.config.js

@@ -1,29 +0,0 @@
-const { getBaseConfig } = require('./getWebpackConfig');
-const { getPluginEntry } = require('./packageJsonHelpers');
-
-/**
- * Use this file to point your ID eslint settings to a webpack resolver. Do to a bug in `eslint-import-resolver-webpack`
- * you must provide the ENTRY env for use with eslint, see example.
- * @example
- * 'import/resolver': {
- *   webpack: {
- *     config: 'node_modules/vcmplugin-cli/src/webpack.config.js'
- *     env: {
- *       ENTRY: './index.js'
- *     }
- *   }
- * }
- * @param {Object=} env
- * @returns {webpack.Configuration|Promise<webpack.Configuration>}
- */
-function getConfig(env) {
-  if (env && env.ENTRY) {
-    return getBaseConfig({ entry: env.ENTRY, mode: 'development' });
-  }
-  return getPluginEntry()
-    .then((entry) => {
-      return getBaseConfig({ entry, mode: 'development' });
-    });
-}
-
-module.exports = getConfig;