@vcmap/plugin-cli 4.0.0-rc.4 → 4.0.0-rc.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/plugin-cli",
-  "version": "4.0.0-rc.4",
+  "version": "4.0.0-rc.5",
   "description": "A CLI to help develop and build plugins for the VC Map",
   "main": "index.js",
   "type": "module",
@@ -31,19 +31,18 @@
   "dependencies": {
     "@vcmap/rollup-plugin-vcs-ol": "^1.0.2",
     "@vcsuite/cli-logger": "^1.0.0",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "vite-plugin-vuetify": "^2.0.3",
+    "@vitejs/plugin-vue": "^5.1.3",
     "commander": "^10.0.1",
-    "express": "^4.18.2",
+    "express": "^4.21.0",
     "prompts": "^2.4.2",
     "sass": "^1.77.1",
     "semver": "^7.5.4",
-    "tar": "^6.1.15",
-    "vite": "^5.2.11",
-    "vue-template-compiler": "~2.7.14"
+    "tar": "^7.4.3",
+    "vite": "^5.4.3",
+    "vite-plugin-vuetify": "^2.0.4"
   },
   "peerDependencies": {
-    "@vcmap/ui": "^6.0.0-rc.1",
+    "@vcmap/ui": "^6.0.0-rc.7",
     "vue": "~3.4.27"
   },
   "peerDependenciesMeta": {

package/src/create.js

@@ -2,7 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import prompts from 'prompts';
 import { minVersion, parse, prerelease, valid } from 'semver';
-import tar from 'tar';
+import * as tar from 'tar';
 import { logger } from '@vcsuite/cli-logger';
 import { LicenseType, writeLicense } from './licenses.js';
 import { DepType, installDeps, setVcMapVersion } from './packageJsonHelpers.js';

package/src/hostingHelpers.js

@@ -6,7 +6,7 @@ import path from 'path';
 import { logger } from '@vcsuite/cli-logger';
 import { getContext, resolveContext } from './context.js';
 import { getPluginName } from './packageJsonHelpers.js';
-import { promiseExec, getDirname } from './pluginCliHelper.js';
+import { promiseExec } from './pluginCliHelper.js';
 
 /**
  * @typedef {Object} HostingOptions
@@ -299,7 +299,7 @@ export async function addConfigRoute(app) {
 export async function getMapUiIndexHtml(production) {
   const indexHtmlFileName = production
     ? resolveMapUi('dist', 'index.html')
-    : path.join(getDirname(), '..', 'assets', 'index.html');
+    : resolveMapUi('index.html');
   const buffer = await fs.promises.readFile(indexHtmlFileName);
   return buffer.toString();
 }

package/src/pack.js

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import tar from 'tar';
+import * as tar from 'tar';
 import { pipeline } from 'stream';
 import { createGzip } from 'zlib';
 import { rm } from 'fs/promises';

package/src/preview.js

@@ -58,7 +58,7 @@ async function getServerOptions(options) {
     resolve: {
       alias: [
         {
-          find: /(\.\.\/)+assets(.*)/,
+          find: /(\.\.?\/)+assets(.*)/,
           replacement: '/assets$2',
           customResolver: {
             resolveId(source) {

package/src/serve.js

@@ -163,14 +163,6 @@ export default async function serve(options) {
       middlewareMode: true,
       proxy: { ...mergedOptions.proxy, ...proxy },
     },
-    css: {
-      preprocessorOptions: {
-        sass: {
-          additionalData:
-            "\n@import './node_modules/@vcmap/ui/src/styles/variables.scss'\n",
-        },
-      },
-    },
   });
 
   addAppConfigRoute(

package/src/update.js

@@ -5,6 +5,7 @@ import {
   DepType,
   getPackageJson,
   installDeps,
+  isTS,
 } from './packageJsonHelpers.js';
 import { name, version, promiseExec } from './pluginCliHelper.js';
 import { getContext } from './context.js';
@@ -13,6 +14,8 @@ import { getContext } from './context.js';
  * @typedef {Object} UpdateOptions
  * @property {string} [mapVersion] - Optional version of @vcmap/ui to update to. Default is latest
  * @property {boolean} [force] - Force install
+ * @property {boolean} [updateDev] - update typescript & vue-tsc
+ * @property {Object} [pluginDev] - provide if providing updateDev
  */
 
 /**
@@ -39,7 +42,11 @@ export async function updatePeerDependencies(
   }
   const { stdout, stderr } = await promiseExec(viewCmd);
   logger.error(stderr);
-  const { name: mapName, peerDependencies: mapPeer } = JSON.parse(stdout);
+  const {
+    name: mapName,
+    peerDependencies: mapPeer,
+    devDependencies: mapDev,
+  } = JSON.parse(stdout);
   const peerDeps = [`${mapName}@${options.mapVersion || 'latest'}`]; // @vcmap/ui is a required peer dep and will be updated in any case
   if (pluginPeer) {
     const pluginPeerDeps = Object.keys(pluginPeer)
@@ -52,8 +59,36 @@ export async function updatePeerDependencies(
   }
   logger.spin('Updating peer dependencies');
   await installDeps(peerDeps, DepType.PEER, pluginPath, options.force);
+
+  if (options.updateDev && options.pluginDev) {
+    logger.spin('Updating dev dependencies');
+    const devDeps = [];
+    if (isTS()) {
+      if (mapDev.typescript) {
+        devDeps.push(`typescript@${mapDev.typescript}`);
+      }
+      if (mapDev['vue-tsc']) {
+        devDeps.push(`vue-tsc@${mapDev['vue-tsc']}`);
+      }
+    }
+
+    if (options.pluginDev?.vitest && mapDev.vitest) {
+      devDeps.push(`vitest@${mapDev.vitest}`);
+    }
+
+    if (
+      options.pluginDev?.['@vitest/coverage-v8'] &&
+      mapDev['@vitest/coverage-v8']
+    ) {
+      devDeps.push(`@vitest/coverage-v8@${mapDev['@vitest/coverage-v8']}`);
+    }
+
+    await installDeps(devDeps, DepType.DEV, pluginPath, options.force);
+  }
   logger.stopSpinner();
-  logger.success('Updated peer dependencies');
+  logger.success(
+    `Updated peer${options.updateDev ? ' & dev' : ''} dependencies`,
+  );
 }
 
 /**
@@ -84,6 +119,8 @@ export default async function update(options) {
   await updateCli(context);
   await updatePeerDependencies(packageJson.peerDependencies, context, {
     force: true,
+    updateDev: true,
+    pluginDev: packageJson.devDependencies,
     ...options,
   });
   await checkVcMapVersion(context);

package/assets/index.html

@@ -1,115 +0,0 @@
-<!DOCTYPE html>
-<html class="vcs-ui" lang="en">
-  <head>
-    <title>VC Map</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link
-      class="vcs-favicon"
-      rel="icon"
-      type="image/png"
-      href="./assets/favicon-32.png"
-      sizes="32x32"
-    >
-    <link
-      class="vcs-favicon"
-      rel="icon"
-      type="image/png"
-      href="./assets/favicon-128.png"
-      sizes="128x128"
-    >
-    <link
-      class="vcs-favicon"
-      rel="icon"
-      type="image/png"
-      href="./assets/favicon-180.png"
-      sizes="180x180"
-    >
-    <link
-      class="vcs-favicon"
-      rel="icon"
-      type="image/png"
-      href="./assets/favicon-192.png"
-      sizes="192x192"
-    >
-    <link class="vcs-favicon" rel="icon" type="image/svg+xml" href="./assets/favicon.svg">
-    <link
-      rel="stylesheet"
-      href="./assets/@mdi/font/css/materialdesignicons.min.css"
-    >
-    <style>
-      #loading-wrapper {
-        position: fixed;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-      }
-
-      #loading-text {
-        display: block;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        color: grey;
-        width: 100px;
-        height: 30px;
-        margin: -7px 0 0 -45px;
-        text-align: center;
-        font-family: 'PT Sans Narrow', sans-serif;
-        font-size: 20px;
-      }
-
-      #loading-content {
-        display: block;
-        position: relative;
-        left: 50%;
-        top: 50%;
-        width: 170px;
-        height: 170px;
-        margin: -85px 0 0 -85px;
-      }
-
-      #loading-content {
-        border: 3px solid transparent;
-        border-top-color: grey;
-        border-bottom-color: grey;
-        border-radius: 50%;
-        -webkit-animation: loader 2s linear infinite;
-        -moz-animation: loader 2s linear infinite;
-        -o-animation: loader 2s linear infinite;
-        animation: loader 2s linear infinite;
-      }
-
-      @keyframes loader {
-        0% {
-          -webkit-transform: rotate(0deg);
-          -ms-transform: rotate(0deg);
-          transform: rotate(0deg);
-        }
-
-        100% {
-          -webkit-transform: rotate(360deg);
-          -ms-transform: rotate(360deg);
-          transform: rotate(360deg);
-        }
-      }
-    </style>
-  </head>
-  <body style="height: 100vh; margin: 0;">
-    <noscript>
-      <strong>...</strong>
-    </noscript>
-    <div id="app">
-      <div id="loading-wrapper">
-        <div id="loading-text">LOADING</div>
-        <div id="loading-content"></div>
-      </div>
-    </div>
-    <script type="module">
-      import { initAppFromAppConfig } from '@vcmap/ui';
-
-      initAppFromAppConfig('#app', 'app.config.json');
-    </script>
-  </body>
-</html>