Update tool templates for COSMOS 6

openc3/templates/tool_vue/eslint.config.mjs

@@ -0,0 +1,68 @@
+import prettier from 'eslint-plugin-prettier'
+import globals from 'globals'
+import parser from 'vue-eslint-parser'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import js from '@eslint/js'
+import { FlatCompat } from '@eslint/eslintrc'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
+
+export default [
+  ...compat.extends(
+    'plugin:vue/vue3-essential',
+    'plugin:prettier/recommended',
+    '@vue/prettier',
+  ),
+  {
+    plugins: {
+      prettier,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+
+      parser: parser,
+      ecmaVersion: 2022,
+      sourceType: 'module',
+    },
+
+    rules: {
+      'no-console': 'error',
+      'no-debugger': 'error',
+
+      'prettier/prettier': [
+        'warn',
+        {
+          endOfLine: 'auto',
+        },
+      ],
+
+      'vue/multi-word-component-names': 'off',
+
+      'vue/valid-v-slot': [
+        'error',
+        {
+          allowModifiers: true,
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+
+    languageOptions: {
+      globals: {
+        ...globals.jest,
+      },
+    },
+  },
+]

openc3/templates/tool_vue/jsconfig.json

@@ -1,6 +1,6 @@
 {
   "exclude": ["node_modules"],
   "vueCompilerOptions": {
-    "target": 2.7
+    "target": "auto"
   }
 }

openc3/templates/tool_vue/package.json

@@ -2,52 +2,35 @@
   "name": "<%= tool_name %>",
   "version": "5.21.0-beta0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build --no-module",
-    "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint",
-    "serve:standalone": "vue-cli-service serve --mode standalone",
-    "test:components": "vue-cli-service test:components"
+    "serve": "vite build --watch --mode dev-server",
+    "build": "vite build",
+    "lint": "eslint src",
+    "serve:standalone": "vite preview --mode standalone"
   },
   "dependencies": {
-    "@openc3/tool-common": "5.21.0-beta0",
     "@astrouxds/astro-web-components": "7.24.0",
+    "@openc3/js-common": "5.21.0-beta0",
+    "@openc3/vue-common": "5.21.0-beta0",
     "axios": "1.7.7",
     "date-fns": "4.1.0",
-    "portal-vue": "2.1.7",
-    "single-spa-vue": "2.5.1",
-    "sprintf-js": "1.1.3",
-    "systemjs-webpack-interop": "2.3.7",
-    "vue": "3.5.4",
-    "vue-router": "4.4.4",
-    "vuetify": "3.7.1",
-    "vuex": "4.1.0"
+    "lodash": "4.17.21",
+    "single-spa-vue": "3.0.0",
+    "sprintf-js": "1.1.3"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.25.9",
-    "@vue/babel-preset-app": "5.0.8",
-    "@vue/cli": "5.0.8",
-    "@vue/cli-plugin-babel": "5.0.8",
-    "@vue/cli-plugin-eslint": "5.0.8",
-    "@vue/cli-plugin-router": "5.0.8",
-    "@vue/cli-plugin-vuex": "5.0.8",
-    "@vue/cli-service": "5.0.8",
+    "@vitejs/plugin-vue": "5.1.5",
     "@vue/eslint-config-prettier": "9.0.0",
-    "@vue/test-utils": "1.3.0",
-    "babel-loader": "9.2.1",
-    "babel-plugin-istanbul": "7.0.0",
-    "eslint": "8.56.0",
+    "@vue/test-utils": "2.4.6",
+    "eslint": "9.16.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-vue": "9.30.0",
-    "html-webpack-plugin": "^5.6.0",
     "prettier": "3.3.3",
     "sass": "1.80.4",
-    "sass-loader": "16.0.2",
-    "vue-cli-plugin-single-spa": "3.3.0",
-    "vue-cli-plugin-vuetify": "2.5.8",
-    "vue-template-compiler": "2.7.16",
-    "webpack": "5.95.0"
+    "vite": "5.4.11",
+    "vue": "3.5.13",
+    "vue-eslint-parser": "9.4.3"
   }
 }

openc3/templates/tool_vue/src/App.vue

@@ -7,9 +7,7 @@
 -->
 
 <template>
-  <div>
-    <v-app id="innerapp">
-      <router-view></router-view>
-    </v-app>
-  </div>
+  <v-app id="innerapp">
+    <router-view></router-view>
+  </v-app>
 </template>

openc3/templates/tool_vue/src/main.js

@@ -1,36 +1,25 @@
-import 'systemjs-webpack-interop/auto-public-path/2'
-import Vue from 'vue'
+import { createApp, h } from 'vue'
 import singleSpaVue from 'single-spa-vue'
 
 import App from './App.vue'
 import router from './router'
-import store from '@openc3/tool-common/src/plugins/store'
-
-Vue.config.productionTip = false
-
-import '@openc3/tool-common/src/assets/stylesheets/layout/layout.scss'
-import vuetify from '@openc3/tool-common/src/plugins/vuetify'
-import Dialog from '@openc3/tool-common/src/plugins/dialog'
-import PortalVue from 'portal-vue'
-import Notify from '@openc3/tool-common/src/plugins/notify'
-
-Vue.use(PortalVue)
-Vue.use(Dialog)
-Vue.use(Notify, { store })
+import { Dialog, Notify, store, vuetify } from '@openc3/vue-common/plugins'
 
 const vueLifecycles = singleSpaVue({
-  Vue,
+  createApp,
   appOptions: {
-    router,
-    store,
-    vuetify,
-    render(h) {
-      return h(App, {
-        props: {},
-      })
+    render() {
+      return h(App, {})
     },
     el: '#openc3-tool',
   },
+  handleInstance: (app) => {
+    app.use(router)
+    app.use(store)
+    app.use(vuetify)
+    app.use(Dialog)
+    app.use(Notify, { store })
+  },
 })
 
 export const bootstrap = vueLifecycles.bootstrap

openc3/templates/tool_vue/src/router.js

@@ -6,24 +6,25 @@
 # if purchased from OpenC3, Inc.
 */
 
-import Vue from 'vue'
-import Router from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
+import { prependBasePath } from '@openc3/js-common/utils'
+import { NotFound } from '@openc3/vue-common/components'
 
-Vue.use(Router)
+const routes = [
+  {
+    path: '/',
+    name: 'jruby',
+    component: () => import('./tools/<%= tool_name %>/<%= tool_name %>.vue'),
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'NotFound',
+    component: NotFound,
+  },
+]
+routes.forEach(prependBasePath)
 
-export default new Router({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  routes: [
-    {
-      path: '/',
-      name: '<%= tool_name %>',
-      component: () => import('./tools/<%= tool_name %>/<%= tool_name %>.vue'),
-    },
-    {
-      path: '*',
-      name: 'NotFound',
-      component: () => import('@openc3/tool-common/src/components/NotFound'),
-    },
-  ],
+export default createRouter({
+  history: createWebHistory(),
+  routes,
 })

openc3/templates/tool_vue/src/tools/tool_name/tool_name.vue

@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import { OpenC3Api } from '@openc3/tool-common/src/services/openc3-api'
-import TopBar from '@openc3/tool-common/src/components/TopBar'
+import { OpenC3Api } from '@openc3/js-common/services'
+import { TopBar } from '@openc3/vue-common/components'
 
 export default {
   components: {

openc3/templates/tool_vue/vite.config.js

@@ -0,0 +1,52 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { devServerPlugin } from '@openc3/js-common/viteDevServerPlugin'
+
+const DEFAULT_EXTENSIONS = ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
+
+export default defineConfig((options) => {
+  return {
+    build: {
+      outDir: 'tools/<%= tool_name %>',
+      emptyOutDir: true,
+      rollupOptions: {
+        input: 'src/main.js',
+        output: {
+          format: 'systemjs',
+          hashCharacters: 'hex',
+          entryFileNames: '[name].js',
+          chunkFileNames: '[name]-[hash:20].js',
+          assetFileNames: 'assets/[name]-[hash][extname]',
+        },
+        external: ['single-spa', 'vue', 'vuex', 'vue-router', 'vuetify'],
+        preserveEntrySignatures: 'strict',
+      },
+    },
+    server: {
+      port: 2999,
+    },
+    plugins: [
+      vue({
+        template: {
+          compilerOptions: {
+            isCustomElement: (tag) => tag.startsWith('rux-'),
+          },
+        },
+      }),
+      devServerPlugin(options),
+    ],
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, './src'),
+      },
+      extensions: [...DEFAULT_EXTENSIONS, '.vue'], // not recommended but saves us from having to change every SFC import
+    },
+    define: {
+      __BASE_URL__: JSON.stringify('/tools/<%= tool_name %>'),
+    },
+    optimizeDeps: {
+      entries: [], // https://github.com/vituum/vituum/issues/25#issuecomment-1690080284
+    },
+  }
+})