openc3 5.20.0 → 6.0.0

data/templates/tool_angular/src/app/app.component.scss

@@ -3,24 +3,16 @@
 @include mat.core();
 
 // Define a dark theme
-$dark-theme: mat.define-dark-theme((
+$dark-theme: mat.m2-define-dark-theme((
  color: (
-   primary: mat.define-palette(mat.$blue-palette),
-   accent: mat.define-palette(mat.$blue-grey-palette),
+   primary: mat.m2-define-palette(mat.$m2-blue-palette),
+   accent: mat.m2-define-palette(mat.$m2-blue-grey-palette),
  ),
   // Only include `typography` and `density` in the default dark theme.
-  typography: mat.define-typography-config(),
+  typography: mat.m2-define-typography-config(),
   density: 0,
 ));
 
-// Define a light theme
-$light-theme: mat.define-light-theme((
- color: (
-   primary: mat.define-palette(mat.$indigo-palette),
-   accent: mat.define-palette(mat.$pink-palette),
- ),
-));
-
 // Apply the dark theme by default
 @include mat.core-theme($dark-theme);
-@include mat.button-theme($dark-theme);
+@include mat.button-theme($dark-theme);

data/templates/tool_angular/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
 import {CdkPortal, DomPortalOutlet} from '@angular/cdk/portal';
-import { OpenC3Api } from "@openc3/tool-common/src/services/openc3-api";
+import { OpenC3Api } from "@openc3/js-common/services";
 
 @Component({
   selector: 'openc3-tool-<%= tool_name %>-root',
@@ -23,7 +23,7 @@ export class AppComponent implements  AfterViewInit, OnDestroy {
     if (elem) {
       return elem
     } else {
-      return new HTMLElement()
+      return document.createElement('span')
     }
   }
   ngAfterViewInit(): void {
@@ -34,11 +34,12 @@ export class AppComponent implements  AfterViewInit, OnDestroy {
     document.title = "<%= tool_name_display %>";
     let tool = document.querySelector('#openc3-tool');
     if (tool == null) {
-      tool = new HTMLElement()
+      tool = document.createElement('div')
     }
     let overlay = document.querySelector('.cdk-overlay-container');
     if (overlay == null) {
-      overlay = new HTMLElement()
+      overlay = document.createElement('div')
+      overlay.classList.add('cdk-overlay-container');
     }
     // Move stuff
     tool.append(overlay);

data/templates/tool_angular/src/app/custom-overlay-container.ts

@@ -9,9 +9,9 @@ export class AppOverlayContainer extends OverlayContainer {
 
     let elem = document.querySelector('#openc3-tool');
     if (!elem) {
-      elem = new HTMLElement();
+      elem = document.createElement('div')
     }
     elem.appendChild(container);
     this._containerElement = container;
   }
-}
+}

data/templates/tool_angular/src/app/openc3-api.d.ts

@@ -1 +1 @@
-declare module '@openc3/tool-common/src/services/openc3-api';
+declare module '@openc3/js-common/services';

data/templates/tool_angular/src/main.single-spa.ts

@@ -30,7 +30,7 @@ const lifecycles = singleSpaAngular({
     if (elem) {
       return elem
     } else {
-      return new HTMLElement()
+      return document.createElement('div')
     }
   },
 });

data/templates/tool_react/package.json

@@ -16,6 +16,7 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^6.1.1",
+    "@openc3/js-common": "6.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "single-spa-react": "^5.1.4"

data/templates/tool_react/src/root.component.js

@@ -5,7 +5,7 @@ import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
-import { OpenC3Api } from "@openc3/tool-common/src/services/openc3-api";
+import { OpenC3Api } from "@openc3/js-common/services";
 
 export default function Root(props) {
   const [anchorEl, setAnchorEl] = React.useState();

data/templates/tool_svelte/package.json

@@ -11,13 +11,14 @@
     "smui-theme": "smui-theme compile build/smui.css -i src/theme"
   },
   "dependencies": {
-    "@astrouxds/astro-web-components": "7.24.0",
-    "@openc3/tool-common": "5.20.0",
-    "@smui/button": "^7.0.0-beta.16",
-    "@smui/card": "^7.0.0-beta.16",
-    "@smui/list": "^7.0.0-beta.16",
-    "@smui/menu": "^7.0.0-beta.16",
-    "axios": "1.7.7",
+    "@astrouxds/astro-web-components": "^7.24.0",
+    "@openc3/js-common": "6.0.0",
+    "@smui/button": "^7.0.0",
+    "@smui/common": "^7.0.0",
+    "@smui/card": "^7.0.0",
+    "@smui/list": "^7.0.0",
+    "@smui/menu": "^7.0.0",
+    "axios": "^1.7.7",
     "single-spa-svelte": "^2.1.1",
     "sirv-cli": "^2.0.2",
     "svelte-portal": "^2.2.0"
@@ -40,8 +41,9 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svelte": "^7.1.6",
     "rollup-plugin-terser": "^7.0.2",
-    "smui-theme": "^7.0.0-beta.16",
+    "smui-theme": "^7.0.0",
     "svelte": "^4.2.19",
     "svelte-jester": "^5.0.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

data/templates/tool_svelte/rollup.config.js

@@ -31,6 +31,8 @@ export default {
     resolve({
       browser: true,
       dedupe: ["svelte"],
+      exportConditions: ['default', 'module', 'import', 'svelte'],
+      extensions: ['.mjs', '.js', '.json', '.node', '.svelte'],
     }),
     commonjs(),
     postcss({

data/templates/tool_svelte/src/App.svelte

@@ -27,7 +27,7 @@
   import List, { Item, Separator, Text } from '@smui/list';
   import Button, { Label } from '@smui/button';
   import Card from '@smui/card';
-  import { OpenC3Api } from "./services/openc3-api";
+  import { OpenC3Api } from '@openc3/js-common/services';
 
   let menu;
 
@@ -39,4 +39,4 @@
 	}
 
   document.title = "<%= tool_name_display %>";
-</script>
+</script>

data/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,
+      },
+    },
+  },
+]

data/templates/tool_vue/jsconfig.json

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

data/templates/tool_vue/package.json

@@ -1,53 +1,36 @@
 {
   "name": "<%= tool_name %>",
-  "version": "5.20.0",
+  "version": "6.0.0",
   "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.20.0",
-    "@astrouxds/astro-web-components": "7.24.0",
-    "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": "2.7.16",
-    "vue-router": "3.5.3",
-    "vuetify": "2.7.1",
-    "vuex": "3.6.2"
+    "@astrouxds/astro-web-components": "^7.24.0",
+    "@openc3/js-common": "6.0.0",
+    "@openc3/vue-common": "6.0.0",
+    "axios": "^1.7.7",
+    "date-fns": "^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",
-    "@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",
-    "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"
+    "@vitejs/plugin-vue": "^5.1.5",
+    "@vue/eslint-config-prettier": "^9.0.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",
+    "prettier": "^3.3.3",
+    "sass": "^1.80.4",
+    "vite": "^5.4.11",
+    "vue": "^3.5.13",
+    "vue-eslint-parser": "^9.4.3"
   }
 }

data/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>

data/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

data/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,
 })

data/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: {

data/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
+    },
+  }
+})

data/templates/widget/package.json

@@ -1,35 +1,28 @@
 {
-  "name": "widget",
-  "version": "5.20.0",
+  "name": "<%= widget_name %>",
+  "version": "6.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "build": "vue-cli-service build --target lib --dest tools/widgets/<%= widget_name %> --formats umd-min <%= widget_path %> --name <%= widget_name %>"
+    "build": "vite build"
   },
   "dependencies": {
-    "@astrouxds/astro-web-components": "7.24.0",
-    "vue": "2.7.16",
-    "vuetify": "2.7.1"
+    "@astrouxds/astro-web-components": "^7.24.0",
+    "@openc3/vue-common": "6.0.0",
+    "vuetify": "^3.7.1"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.25.9",
-    "@rushstack/eslint-patch": "1.10.4",
-    "@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-service": "5.0.8",
-    "@vue/eslint-config-prettier": "9.0.0",
-    "babel-loader": "9.2.1",
-    "babel-plugin-istanbul": "7.0.0",
-    "eslint": "8.56.0",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-vue": "9.30.0",
-    "prettier": "3.3.3",
-    "sass": "1.80.4",
-    "sass-loader": "16.0.2",
-    "vue-cli-plugin-vuetify": "2.5.8",
-    "vue-template-compiler": "2.7.16",
-    "webpack": "5.95.0"
+    "@vitejs/plugin-vue": "^5.1.5",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "eslint": "^9.16.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-vue": "^9.30.0",
+    "prettier": "^3.3.3",
+    "sass": "^1.80.4",
+    "vite": "^5.4.11",
+    "vue": "^3.5.13",
+    "vite-plugin-style-inject": "^0.0.1",
+    "vue-eslint-parser": "^9.4.3"
   }
 }

data/templates/widget/src/Widget.vue

@@ -8,25 +8,23 @@
 
 <template>
   <div class="value-widget-container">
-    <template>
-      <v-text-field
-        solo
-        dense
-        readonly
-        single-line
-        hide-no-data
-        hide-details
-        :value="_value"
-        :class="valueClass"
-        :style="computedStyle"
-        data-test="value"
-      />
-    </template>
+    <v-text-field
+      variant="solo"
+      density="compact"
+      readonly
+      single-line
+      hide-no-data
+      hide-details
+      :value="_value"
+      :class="valueClass"
+      :style="computedStyle"
+      data-test="value"
+    />
   </div>
 </template>
 
 <script>
-import VWidget from '@openc3/tool-common/src/components/widgets/VWidget'
+import { VWidget } from '@openc3/vue-common/widgets'
 
 export default {
   mixins: [VWidget],

data/templates/widget/vite.config.js

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import VitePluginStyleInject from 'vite-plugin-style-inject'
+import vue from '@vitejs/plugin-vue'
+
+const DEFAULT_EXTENSIONS = ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
+
+export default defineConfig({
+  build: {
+    outDir: 'tools/widgets/<%= widget_name %>',
+    emptyOutDir: true,
+    sourcemap: true,
+    lib: {
+      entry: './src/<%= widget_name %>.vue',
+      name: '<%= widget_name %>',
+      fileName: (format, entryName) => `${entryName}.${format}.min.js`,
+      formats: ['umd'],
+    },
+    rollupOptions: {
+      external: ['vue', 'vuetify'],
+    },
+  },
+  plugins: [vue(), VitePluginStyleInject()],
+  resolve: {
+    extensions: [...DEFAULT_EXTENSIONS, '.vue'], // not recommended but saves us from having to change every SFC import
+  },
+})