@vcmap/plugin-cli 4.0.1 → 4.0.2

package/README.md

@@ -426,12 +426,25 @@ If a plugin does not provide a config editor, the JsonEditor is always used as f
 To provide a custom editor, the plugin has to implement a `getConfigEditors` method returning one or more editors.
 A plugin config editor definition consists of
 
-- component: The vue component providing the ui of the editor. This vue component has to extend the `AbstractConfigEditor.vue`, which can be imported from `@vcmap/ui`. The component has to provide two props: `getConfig` for getting the serialized configuration and `setConfig` to update the changed configuration.
+- component: The vue component providing the ui of the editor. This vue component has to extend the `AbstractConfigEditor.vue`, which can be imported from `@vcmap/ui`.
+  The component has to provide two props:
+  - `getConfig` for getting the serialized configuration and
+  - `setConfig` to update the changed configuration (do not pass proxies or anything by reference to setConfig! See note below for more information)
 - title: An optional title displayed in the window header of the editor and on action buttons (e.g. tooltip)
 - collectionName: The collection the item belongs to. Default is `plugins` collection. For a layer config editor you would provide `layers`.
 - itemName: The item the editor can be used for. Can be a name or className. Default is the plugin's name. For a layer you would provide `MyNewLayer.className`.
 - infoUrlCallback: An optional function returning an url referencing help or further information regarding the config editor.
 
+> IMPORTANT NOTE:
+>
+> Make sure you do not pass proxy elements or internals by reference to `setConfig`!
+>
+> - proxies can be removed by using vue's `toRaw` function
+> - `toRaw` is not deep, therefor nested proxy elements like arrays have to be manually removed, e.g. by iterating over the array and calling `toRaw` on each array item
+> - everything passed by reference has to be deeply cloned, e.g. using `structuredClone`
+>
+> Best practice: Use `setConfig(structuredClone(...))` because it will throw, if you pass a proxy
+
 An example of plugin config editor can look like this:
 
 ```vue
@@ -462,7 +475,7 @@ An example of plugin config editor can look like this:
     VcsLabel,
     VcsTextField,
   } from '@vcmap/ui';
-  import { ref } from 'vue';
+  import { ref, toRaw } from 'vue';
   import { getDefaultOptions } from '../defaultOptions.js';
 
   export default {
@@ -492,7 +505,8 @@ An example of plugin config editor can look like this:
       const localConfig = ref({ ...defaultOptions, ...config });
 
       const apply = () => {
-        props.setConfig(localConfig.value);
+        // Do not pass proxy elements or internals by reference! See note above example for more information
+        props.setConfig(structuredClone(toRaw(localConfig.value)));
       };
 
       return {

package/assets/tests/vcsPluginInterface.spec.js

@@ -9,8 +9,8 @@ function sleep(ms = 0) {
   });
 }
 
-window.VcsPluginLoaderFunction = (name, module) => ({
-  default: () => plugin({ name }, module),
+window.VcsPluginLoaderFunction = () => ({
+  default: (config, baseUrl) => plugin(config, baseUrl),
 });
 
 const testPropSymbol = Symbol('testProp');

package/assets/testsTypescript/vcsPluginInterface.spec.ts

@@ -12,14 +12,11 @@ function sleep(ms = 0): Promise<void> {
 type TestPluginInstance = VcsPlugin<object, object>;
 
 // @ts-expect-error: not defined on global
-window.VcsPluginLoaderFunction = (
-  name: string,
-  module: string,
-): {
-  default: () => TestPluginInstance;
+window.VcsPluginLoaderFunction = (): {
+  default: (config: object, module: string) => TestPluginInstance;
 } => ({
   // @ts-expect-error: interface may not use this
-  default: () => plugin({ name }, module),
+  default: (config, baseUrl) => plugin(config, baseUrl),
 });
 
 const testPropSymbol = Symbol('testProp');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/plugin-cli",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "A CLI to help develop and build plugins for the VC Map",
   "main": "index.js",
   "type": "module",
@@ -42,7 +42,7 @@
     "vite-plugin-vuetify": "^2.0.4"
   },
   "peerDependencies": {
-    "@vcmap/ui": "^6.0.0",
+    "@vcmap/ui": "^6.0",
     "vue": "~3.4.38"
   },
   "peerDependenciesMeta": {

package/src/buildStagingApp.js

@@ -9,6 +9,38 @@ import buildModule, { buildMapUI, getDefaultConfig } from './build.js';
 import setupMapUi from './setupMapUi.js';
 import { getVcmConfigJs } from './pluginCliHelper.js';
 
+/**
+ * @param {VcmConfigJs} config
+ * @returns {string | undefined}
+ */
+function getHtaccess(config) {
+  let htaccess;
+  if (config.htaccess) {
+    ({ htaccess } = config);
+  } else if (config.proxy) {
+    const htaccessLines = Object.keys(config.proxy).map((key) => {
+      const value = config.proxy[key];
+      let target;
+      if (typeof value === 'string') {
+        target = value;
+      } else {
+        ({ target } = value);
+        console.log(
+          `proxy settings for ${key} may be more complex, simply using rewrite to target: ${target}`,
+        );
+      }
+      return `RewriteRule ^${key.replace(/^\^/, '')} ${target} [P,L]`;
+    });
+
+    if (htaccessLines.length > 0) {
+      htaccessLines.unshift('RewriteEngine On');
+      htaccess = htaccessLines.join('\n');
+    }
+  }
+
+  return htaccess;
+}
+
 /**
  * creates production preview application in the dist folder based on the @vcmap/ui default configuration.
  * @returns {Promise<void>}
@@ -70,6 +102,12 @@ export default async function buildStagingApp() {
   if (pluginConfig) {
     pluginConfig.entry = `plugins/${pluginName}/index.js`;
   }
+  const htaccess = getHtaccess(vcmConfigJs);
+  if (htaccess) {
+    await writeFile(path.join(distPath, '.htaccess'), htaccess);
+    logger.log('built .htaccess');
+  }
+
   await writeFile(
     path.join(distPath, 'app.config.json'),
     JSON.stringify(appConfig, null, 2),

package/src/pluginCliHelper.js

@@ -28,7 +28,8 @@ export const promiseExec = util.promisify(childProcess.exec);
 
 /**
  * @typedef {PreviewOptions} VcmConfigJs
- * @property {Object} proxy - see https://vitejs.dev/config/server-options.html#server-proxy
+ * @property {Object} [proxy] - see https://vitejs.dev/config/server-options.html#server-proxy. when building a staging app, we try to deduce an .htaccess from it.
+ * @property {string} [htaccess] - a string representing an .htaccess file content for use in staging apps.
  */
 
 /**