Add helpers for Vue and Vite extensions

[arnaugiralt]

I create this PR to add some more functionality in the Connect UI Toolkit to make our lives easier when working with Connect extensions.

This PR adds two new features:

• A Vue plugin to use the toolkit app instance in the extensions' Vue components.
• A function to generate a default Vite config to be used in all Connect extensions that use Vite.

---

Toolkit Vue plugin

It is a very straight forward Vue plugin that allows us to have access to the toolkit app instance inside Vue components.
Besides exposing the raw toolkit app instance, it has a reactive property, sharedContext, that is updated when the shared context from the Connect SPA to the Extension changes (this is the state we provide with the value/v-model to c-slot in the SPA).

It can be used in several ways:

Options API:

export default {
  methods: {
    goToDashboard() {
      this.$toolkit.navigateTo('/dashboard');
    },
  },
};

Composition API:

import { useToolkit } from '@cloudblueconnect/connect-ui-toolkit/tools/vue/toolkitPlugin';

const { navigateTo } = useToolkit();
const goToDashboard = () => navigateTo('/dashboard');

import { inject } from 'vue';

const toolkit = inject('toolkit');
const goToDashboard = () => toolkit.navigateTo('/dashboard');

To use it in an extension:

import { createApp } from 'vue';
import createToolkitApp from '@cloudblueconnect/connect-ui-toolkit';
import { toolkitPlugin } from '@cloudblueconnect/connect-ui-toolkit/tools/vue/toolkitPlugin';

createToolkitApp().then((toolkitInstance) => {
  const app = createApp(/* main vue comp here */);

  app.use(toolkitPlugin, toolkitInstance);

  app.mount('#app');
});

Vite config generator

The defineExtensionConfig function is used to generate a default Vite config that works for Connect extensions.
It does the following:

• Creates an alias (~) that points to the extension's source directory (provided by the user)
• Treats every HTML page in {{srcDir}}/pages/{{pageName}}/index.html as an entry point that will be output in the extension's static directory (provided by the user). I'll show this in more detail in a PR for the Connect BI Reporter extension later.
• Flattens output build directory structures, that Vite disables by default. This is pretty important to have consistency for the extension's backends to be able to serve the correct static files.
• Splits node_modules into a "vendor" chunk, and @cloudblueconnect modules into a "connect" chunk, so the static files can be delivered properly by the EaaS backend when developing.

The function has two parameters:

• config: Object, required.
  • config.srcDir: String, required. The absolute path for the source directory.
  • config.srcUrl: URL, required. URL for the src folder, used for aliasing '~'.
  • config.outputDir: String, required. The absolute path for the output directory.
  • config.vuePlugin: Object, required. An instance of the Vue plugin for Vite.
• viteConfig: Object, optional. Any other Vite config options you need.

I attempted to use a configuration file (something like connect.config.js) and guess most of these properties, but it gets really complex really quickly when you are doing things from a package outside the extensions context, like the toolkit is. So this is the easiest way, and I think that it is not very cumbersome to use. Let me know if you have any thoughts on this.

To use it in the extensions, create a vite.config.js file and paste the following:

import path from 'node:path';
import { URL } from 'node:url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

import { defineExtensionConfig } from '@cloudblueconnect/connect-ui-toolkit/tools/build/vite';


const extensionConfig = defineExtensionConfig({
  srcDir: path.resolve(__dirname, 'ui'),
  srcUrl: new URL('./ui', import.meta.url),
  outputDir: path.resolve(__dirname, 'my_extension_name/static'),
  vuePlugin: vue(),
});

export default defineConfig(extensionConfig);

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue

Measures
0 Security Hotspots
99.4% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud