openc3-cosmos-tool-docs 6.0.0 → 6.0.1

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openc3-cosmos-tool-docs
 version: !ruby/object:Gem::Version
-  version: 6.0.0
+  version: 6.0.1
 platform: ruby
 authors:
 - Ryan Melton
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-12-17 00:00:00.000000000 Z
+date: 2024-12-20 00:00:00.000000000 Z
 dependencies: []
 description: "    This plugin makes the OpenC3 documentation website available as
   a tool\n"
@@ -252,7 +252,7 @@ files:
 - tools/staticdocs/assets/js/6f92e431.c98e31e0.js
 - tools/staticdocs/assets/js/72c6d8a8.1053fbd7.js
 - tools/staticdocs/assets/js/75897369.522ccdd7.js
-- tools/staticdocs/assets/js/75e64983.6b588c87.js
+- tools/staticdocs/assets/js/75e64983.45bf7edc.js
 - tools/staticdocs/assets/js/7690.fc05b8e6.js
 - tools/staticdocs/assets/js/7f5b2696.72e3b019.js
 - tools/staticdocs/assets/js/80c97f38.5a408d9c.js
@@ -266,7 +266,7 @@ files:
 - tools/staticdocs/assets/js/9fb6059a.57936fbe.js
 - tools/staticdocs/assets/js/a677c089.d8d7a8f5.js
 - tools/staticdocs/assets/js/a9987364.2aa836fd.js
-- tools/staticdocs/assets/js/aa6b6c1b.4f484861.js
+- tools/staticdocs/assets/js/aa6b6c1b.993f091d.js
 - tools/staticdocs/assets/js/b4596165.a5fe2cea.js
 - tools/staticdocs/assets/js/b6d70f94.5df56282.js
 - tools/staticdocs/assets/js/b9f60ba6.cdb4a698.js
@@ -293,8 +293,8 @@ files:
 - tools/staticdocs/assets/js/ebec1ccb.086b8668.js
 - tools/staticdocs/assets/js/f15615f1.afd4ba93.js
 - tools/staticdocs/assets/js/fd886806.fa25adc4.js
-- tools/staticdocs/assets/js/main.1a59b278.js
-- tools/staticdocs/assets/js/runtime~main.25e99a76.js
+- tools/staticdocs/assets/js/main.c4acbd62.js
+- tools/staticdocs/assets/js/runtime~main.cb6ff8de.js
 - tools/staticdocs/docs.html
 - tools/staticdocs/docs/configuration.html
 - tools/staticdocs/docs/configuration/accessors.html
@@ -623,10 +623,10 @@ files:
 - tools/staticdocs/img/telemetry_viewer/widgets/verticalbox.png
 - tools/staticdocs/img/telemetry_viewer/widgets/width.png
 - tools/staticdocs/index.html
-- tools/staticdocs/lunr-index-1734474862542.json
+- tools/staticdocs/lunr-index-1734734383200.json
 - tools/staticdocs/lunr-index.json
 - tools/staticdocs/markdown-page.html
-- tools/staticdocs/search-doc-1734474862542.json
+- tools/staticdocs/search-doc-1734734383200.json
 - tools/staticdocs/search-doc.json
 - tools/staticdocs/sitemap.xml
 homepage: https://github.com/OpenC3/cosmos

data/tools/staticdocs/assets/js/75e64983.6b588c87.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkdocs_openc3_com=self.webpackChunkdocs_openc3_com||[]).push([["2448"],{3896:function(e,n,o){o.r(n),o.d(n,{default:()=>h,frontMatter:()=>r,metadata:()=>i,assets:()=>l,toc:()=>a,contentTitle:()=>c});var i=JSON.parse('{"id":"getting-started/upgrading","title":"Upgrading","description":"How to upgrade and migrate COSMOS","source":"@site/docs/getting-started/upgrading.md","sourceDirName":"getting-started","slug":"/getting-started/upgrading","permalink":"/tools/staticdocs/docs/getting-started/upgrading","draft":false,"unlisted":false,"editUrl":"https://github.com/OpenC3/cosmos/tree/main/docs.openc3.com/docs/getting-started/upgrading.md","tags":[],"version":"current","sidebarPosition":4,"frontMatter":{"sidebar_position":4,"title":"Upgrading","description":"How to upgrade and migrate COSMOS","sidebar_custom_props":{"myEmoji":"\u2B06\uFE0F"}},"sidebar":"defaultSidebar","previous":{"title":"Code Generators","permalink":"/tools/staticdocs/docs/getting-started/generators"},"next":{"title":"Key Concepts","permalink":"/tools/staticdocs/docs/getting-started/key_concepts"}}'),t=o("2322"),s=o("2840");let r={sidebar_position:4,title:"Upgrading",description:"How to upgrade and migrate COSMOS",sidebar_custom_props:{myEmoji:"\u2B06\uFE0F"}},c=void 0,l={},a=[{value:"COSMOS Upgrades",id:"cosmos-upgrades",level:2},{value:"Migrating From COSMOS 5 to COSMOS 6",id:"migrating-from-cosmos-5-to-cosmos-6",level:2},{value:"Updating Vue",id:"updating-vue",level:3},{value:"The quick and dirty way",id:"the-quick-and-dirty-way",level:4},{value:"Step 1: Vue compat mode",id:"step-1-vue-compat-mode",level:4},{value:"(1.a) Update dependencies",id:"1a-update-dependencies",level:5},{value:"(1.b) Update the Vue config file (<code>vue.config.js</code>)",id:"1b-update-the-vue-config-file-vueconfigjs",level:5},{value:"(1.c) Update the eslint config file (<code>.eslintrc</code>)",id:"1c-update-the-eslint-config-file-eslintrc",level:5},{value:"(1.d) Fix build and runtime warnings and errors",id:"1d-fix-build-and-runtime-warnings-and-errors",level:5},{value:"Step 2: Bump compat mode from 2 to 3",id:"step-2-bump-compat-mode-from-2-to-3",level:4},{value:"Step 3: Update Vuetify",id:"step-3-update-vuetify",level:4},{value:"Step 4: Clean up",id:"step-4-clean-up",level:4},{value:"Migrating to the new OpenC3 common packages",id:"migrating-to-the-new-openc3-common-packages",level:3},{value:"Step 1: Update dependencies",id:"step-1-update-dependencies",level:4},{value:"Step 2: Update imports in your code",id:"step-2-update-imports-in-your-code",level:4},{value:"<code>@openc3/js-common</code>",id:"openc3js-common",level:4},{value:"<code>@openc3/vue-common</code>",id:"openc3vue-common",level:4},{value:"Migrating From COSMOS 4 to COSMOS 5",id:"migrating-from-cosmos-4-to-cosmos-5",level:2},{value:"Configuration Migration Tool",id:"configuration-migration-tool",level:3},{value:"Upgrading Custom Tools",id:"upgrading-custom-tools",level:3}];function d(e){let n={a:"a",admonition:"admonition",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",h5:"h5",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h2,{id:"cosmos-upgrades",children:"COSMOS Upgrades"}),"\n",(0,t.jsx)(n.p,{children:"COSMOS is released as Docker containers. Since we're using Docker containers and volumes we can simply stop the existing COSMOS application, then download and run the new release."}),"\n",(0,t.jsx)(n.p,{children:"This example assumes an existing COSMOS project at C:\\cosmos-project."}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"Stop the current COSMOS application"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-batch",children:"C:\\cosmos-project> openc3.bat stop\n"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"Change the release in the .env file to the desired release"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-batch",children:"OPENC3_TAG=5.1.1\n"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"Run the new COSMOS application"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-batch",children:"C:\\cosmos-project> openc3.bat run\n"})}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.admonition,{title:"Downgrades",type:"warning",children:[(0,t.jsx)(n.p,{children:"Downgrades are not necessarily supported. When upgrading COSMOS we need to upgrade databases and sometimes migrate internal data structures. While we perform a full regression test on every release, we recommend upgrading an individual machine with your specific plugins and do local testing before rolling out the upgrade to your production system."}),(0,t.jsxs)(n.p,{children:["In general, patch releases (x.y.Z) can be downgraded, minor releases (x.Y.z) ",(0,t.jsx)(n.em,{children:"might"})," be able to be downgraded and major releases (X.y.z) are NOT able to be downgraded."]})]}),"\n",(0,t.jsx)(n.h2,{id:"migrating-from-cosmos-5-to-cosmos-6",children:"Migrating From COSMOS 5 to COSMOS 6"}),"\n",(0,t.jsx)(n.admonition,{title:"Developers Only",type:"info",children:(0,t.jsx)(n.p,{children:"If you haven't written any custom tools or widgets, there are no special changes required to upgrade from COSMOS 5 to COSMOS 6. Simply follow the normal upgrade instructions above."})}),"\n",(0,t.jsxs)(n.p,{children:["COSMOS 6 introduces some breaking changes for custom tools regarding the Vue framework and our common library code. We've upgraded from Vue 2 (EOL December 31, 2023) to Vue 3. These versions of Vue are not compatible with each other, so any tools written with Vue 2 will need to be updated. Additionally, our ",(0,t.jsx)(n.code,{children:"@openc3/tool-common"})," NPM package has been deprecated with its functionality reorganized into two packages: ",(0,t.jsx)(n.code,{children:"@openc3/js-common"})," and ",(0,t.jsx)(n.code,{children:"@openc3/vue-common"}),". This is to provide a better experience for developers who are building COSMOS tools without the Vue framework."]}),"\n",(0,t.jsxs)(n.p,{children:["We also removed a few rarely used ",(0,t.jsx)(n.a,{href:"../guides/scripting-api#migration-from-cosmos-v5-to-v6",children:"API methods"})," in COSMOS 6."]}),"\n",(0,t.jsx)(n.h3,{id:"updating-vue",children:"Updating Vue"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.em,{children:"If your tool was not built with Vue (e.g. it was built without a frontend framework, or it was built with React, Angular, etc.), then you can skip this section."})}),"\n",(0,t.jsx)(n.h4,{id:"the-quick-and-dirty-way",children:"The quick and dirty way"}),"\n",(0,t.jsxs)(n.p,{children:["Tools that are relatively simple can probably be upgraded in one shot by just updating the dependencies and fixing any build errors that arise, and then fixing any runtime errors you find from testing and using your tool. If you're confident in this upgrade path, you can reference ",(0,t.jsx)(n.a,{href:"https://github.com/OpenC3/cosmos/pull/1747",children:"this pull request"})," to see what will need to change. Otherwise, the rest of this guide will walk you through a more in-depth and complete migration process."]}),"\n",(0,t.jsx)(n.h4,{id:"step-1-vue-compat-mode",children:"Step 1: Vue compat mode"}),"\n",(0,t.jsx)(n.p,{children:"The Vue team provided a compatibility mode to help with migrating from Vue 2 to Vue 3. This will let you get your tool up and running to make it easier to find the necessary changes."}),"\n",(0,t.jsx)(n.h5,{id:"1a-update-dependencies",children:"(1.a) Update dependencies"}),"\n",(0,t.jsx)(n.p,{children:'Use your package manager or edit the package.json file to update the following dependencies (ignore any packages marked "Update" that you aren\'t using)'}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Remove:"})," ",(0,t.jsx)(n.code,{children:"vue-template-compiler"})]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Add:"})," ",(0,t.jsx)(n.code,{children:"@vue/compat"})," >= 3.5 (",(0,t.jsx)(n.a,{href:"https://www.npmjs.com/package/@vue/compat",children:"npmjs.com"}),")"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Add:"})," ",(0,t.jsx)(n.code,{children:"@vue/compiler-sfc"})," >= 3.5 (",(0,t.jsx)(n.a,{href:"https://www.npmjs.com/package/@vue/compiler-sfc",children:"npmjs.com"}),")"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Update:"})," ",(0,t.jsx)(n.code,{children:"@vue/test-utils"})," >= 2.4 (",(0,t.jsx)(n.a,{href:"https://www.npmjs.com/package/@vue/compiler-sfc",children:"npmjs.com"}),")"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Update:"})," ",(0,t.jsx)(n.code,{children:"vue"})," >= 3.5 (",(0,t.jsx)(n.a,{href:"https://www.npmjs.com/package/vue",children:"npmjs.com"}),")"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Update:"})," ",(0,t.jsx)(n.code,{children:"vuex"})," >= 4.1 (",(0,t.jsx)(n.a,{href:"https://www.npmjs.com/package/vuex",children:"npmjs.com"}),")"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Update:"})," ",(0,t.jsx)(n.code,{children:"vue-router"})," >= 4.4 (",(0,t.jsx)(n.a,{href:"https://www.npmjs.com/package/vue-router",children:"npmjs.com"}),")"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Update:"})," ",(0,t.jsx)(n.code,{children:"vuetify"})," >= 3.7 (",(0,t.jsx)(n.a,{href:"https://www.npmjs.com/package/vuetify",children:"npmjs.com"}),")"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Update:"})," ",(0,t.jsx)(n.code,{children:"single-spa-vue"})," >= 3.0 (",(0,t.jsx)(n.a,{href:"https://www.npmjs.com/package/single-spa-vue",children:"npmjs.com"}),")"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Eslint will help call out changes you'll need to make to your code for the migration, so it's recommended to include eslint in your project if you haven't already. There are plenty of guides online that will explain how to do that. If you're using eslint, then make the additional changes to your tool's dependencies:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Add:"})," ",(0,t.jsx)(n.code,{children:"eslint-plugin-vuetify"})," >= 2.5 (",(0,t.jsx)(n.a,{href:"https://www.npmjs.com/package/eslint-plugin-vuetify",children:"npmjs.com"}),")"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Add:"})," ",(0,t.jsx)(n.code,{children:"vue-eslint-parser"})," >= 9.4 (",(0,t.jsx)(n.a,{href:"https://www.npmjs.com/package/vue-eslint-parser",children:"npmjs.com"}),")"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["If you modified your package.json file manually, don't forget to ",(0,t.jsx)(n.code,{children:"yarn"})," or ",(0,t.jsx)(n.code,{children:"npm install"})," at your project's root to apply the changes."]}),"\n",(0,t.jsxs)(n.h5,{id:"1b-update-the-vue-config-file-vueconfigjs",children:["(1.b) Update the Vue config file (",(0,t.jsx)(n.code,{children:"vue.config.js"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["You likely have a ",(0,t.jsx)(n.code,{children:"chainWebpack"})," property in the object that's exported by this file which looks something like this (though your contents might vary)"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"chainWebpack: (config) => {\n  config.module\n    .rule('vue')\n    .use('vue-loader')\n    .tap((options) => {\n      return {\n        prettify: false,\n      }\n    })\n},\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Add a resolution alias for ",(0,t.jsx)(n.code,{children:"@vue/compat"})," to the top of this block and set the compiler to use the Vue 2 compat mode:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"chainWebpack: (config) => {\n  config.resolve.alias.set('vue', '@vue/compat') // Add this line\n  config.module\n    .rule('vue')\n    .use('vue-loader')\n    .tap((options) => {\n      return {\n        prettify: false,\n        compilerOptions: { // Add this block\n          compatConfig: {  //\n            MODE: 2,       //\n          },               //\n        },                 // to here\n      }\n    })\n},\n"})}),"\n",(0,t.jsxs)(n.h5,{id:"1c-update-the-eslint-config-file-eslintrc",children:["(1.c) Update the eslint config file (",(0,t.jsx)(n.code,{children:".eslintrc"}),")"]}),"\n",(0,t.jsxs)(n.p,{children:["Find the string ",(0,t.jsx)(n.code,{children:"'plugin:vue/essential'"})," in your ",(0,t.jsx)(n.code,{children:"extends"})," block and change it to ",(0,t.jsx)(n.code,{children:"'plugin:vue/vue3-essential'"}),". If you don't have that plugin in your ",(0,t.jsx)(n.code,{children:"extends"})," block, or you're missing that block entirely, then add this. It will help find breaking changes in how your code is using the Vue API."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"extends: [\n  'plugin:vue/vue3-essential', // change this from plugin:vue/essential\n  'plugin:prettier/recommended',\n  '@vue/prettier',\n],\n"})}),"\n",(0,t.jsx)(n.h5,{id:"1d-fix-build-and-runtime-warnings-and-errors",children:"(1.d) Fix build and runtime warnings and errors"}),"\n",(0,t.jsxs)(n.p,{children:["Run your linting and build scripts (e.g. ",(0,t.jsx)(n.code,{children:"yarn lint"})," and ",(0,t.jsx)(n.code,{children:"yarn build"}),"). The eslint plugin and Vue's compat mode will find the first set of code changes you need to address. Fix these lint/build errors until your project builds successfully."]}),"\n",(0,t.jsxs)(n.p,{children:["Once it builds, run your project like you would for development. It's recommended to serve it from a local dev server with ",(0,t.jsx)(n.code,{children:"yarn serve"})," and add it to the import map overrides in the browser. Test the functionality of your tool and address any Vue errors and warnings that get printed to the browser console in the dev tools. ",(0,t.jsxs)(n.em,{children:["(NOTE: On ",(0,t.jsx)(n.code,{children:"MODE: 2"})," - your first pass through this section - it's ok if your tool doesn't completely work yet. Just address the warnings and errors that are logged to the browser console. You'll get your tool completely working in the next step.)"]})]}),"\n",(0,t.jsxs)(n.p,{children:["From our experience migrating the COSMOS first-party tools, you'll most likely have to make changes to your ",(0,t.jsx)(n.code,{children:"main.js"})," and ",(0,t.jsx)(n.code,{children:"router.js"}),' files at a minimum. You can reference the PR mentioned above in the "The quick and dirty way" section above to see what we changed, or search the internet for Vue 2 -> Vue 3 migration guides if you need help addressing any warnings or errors.']}),"\n",(0,t.jsx)(n.h4,{id:"step-2-bump-compat-mode-from-2-to-3",children:"Step 2: Bump compat mode from 2 to 3"}),"\n",(0,t.jsxs)(n.p,{children:["Change the ",(0,t.jsx)(n.code,{children:"compatConfig"})," you added to your vue config file (",(0,t.jsx)(n.code,{children:"vue.config.js"}),") from ",(0,t.jsx)(n.code,{children:"MODE: 2"})," to ",(0,t.jsx)(n.code,{children:"MODE: 3"}),". This will tell Vue's compat mode that you've addressed the changes in the previous step, and it will find the next set of issues (since this is a multi-step process). Repeat the \"(1.d) Fix build and runtime warnings and errors\" step."]}),"\n",(0,t.jsx)(n.h4,{id:"step-3-update-vuetify",children:"Step 3: Update Vuetify"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.em,{children:"If you're not using Vuetify, you can skip this step."})}),"\n",(0,t.jsxs)(n.p,{children:["Modify your eslint config (",(0,t.jsx)(n.code,{children:".eslintrc"}),") again to add the Vuetify plugin:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"extends: [\n  'plugin:vue/vue3-essential',\n  'plugin:vuetify/base', // Add this line\n  'plugin:prettier/recommended',\n  '@vue/prettier',\n],\n"})}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Note:"})," The Vuetify eslint plugin is only designed for migrating projects from Vuetify 2 to Vuetify 3 and can cause linting performance issues, so it should be removed once your tool migration is complete."]}),"\n",(0,t.jsxs)(n.p,{children:["Again in ",(0,t.jsx)(n.code,{children:".eslintrc"}),", find your ",(0,t.jsx)(n.code,{children:"parserOptions"})," block and add the ",(0,t.jsx)(n.code,{children:"parser"})," property above it:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"parser: 'vue-eslint-parser', // Add this line\nparserOptions: {\n  ...\n},\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Now when you run eslint, it can tell you about any changes you'll need to address regarding how your code is using the Vuetify API. To find these changes, run eslint on your Vue files (e.g. ",(0,t.jsx)(n.code,{children:"yarn eslint . --ext .vue"}),"). You can address these manually, or if you trust eslint or have good version control, you can have the plugin fix most of them automatically with ",(0,t.jsx)(n.code,{children:"yarn eslint . --ext .vue --fix"})]}),"\n",(0,t.jsxs)(n.p,{children:["Lastly, if you are using the Astro UXDS icons via Vuetify from COSMOS - or any custom icon packs for that matter - then you'll need to change their pack alias format from ",(0,t.jsx)(n.code,{children:"$packName-"})," to ",(0,t.jsx)(n.code,{children:"packName:"}),". Here's an example for the ",(0,t.jsx)(n.code,{children:"antenna-transmit"})," Astro icon:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-html",children:"\x3c!-- Vue 2 / Vuetify 2 (old) --\x3e\n<v-icon> $astro-antenna-transmit </v-icon>\n\n\x3c!-- Vue 3 / Vuetify 3 (new) --\x3e\n<v-icon> astro:antenna-transmit </v-icon>\n"})}),"\n",(0,t.jsx)(n.h4,{id:"step-4-clean-up",children:"Step 4: Clean up"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Remove the ",(0,t.jsx)(n.code,{children:"@vue/compat"})," and ",(0,t.jsx)(n.code,{children:"eslint-plugin-vuetify"})," dependencies you added in step 1.a"]}),"\n",(0,t.jsxs)(n.li,{children:["Remove the ",(0,t.jsx)(n.code,{children:"compatConfig"})," you added in step 1.b"]}),"\n",(0,t.jsxs)(n.li,{children:["Remove the ",(0,t.jsx)(n.code,{children:"'plugin:vuetify/base'"})," you added in step 3"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"migrating-to-the-new-openc3-common-packages",children:"Migrating to the new OpenC3 common packages"}),"\n",(0,t.jsxs)(n.p,{children:["As mentioned in the first paragraph of this guide, we've deprecated the ",(0,t.jsx)(n.code,{children:"@openc3/tool-common"})," NPM package. All of its functionality has remained the same, but everything is organized differently, so you'll have to update your dependencies and imports."]}),"\n",(0,t.jsx)(n.h4,{id:"step-1-update-dependencies",children:"Step 1: Update dependencies"}),"\n",(0,t.jsx)(n.p,{children:"Use your package manager or edit the package.json file to update the following dependencies"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Remove:"})," ",(0,t.jsx)(n.code,{children:"@openc3/tool-common"})]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Add:"})," ",(0,t.jsx)(n.code,{children:"@openc3/js-common"})," >= 6.0 (",(0,t.jsx)(n.a,{href:"https://www.npmjs.com/package/@openc3/js-common",children:"npmjs.com"}),")"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Add:"})," ",(0,t.jsx)(n.code,{children:"@openc3/vue-common"})," >= 6.0 (",(0,t.jsx)(n.a,{href:"https://www.npmjs.com/package/@openc3/vue-common",children:"npmjs.com"}),")","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"This is only needed if you are using our Vue stuff (components, plugins, etc.)"}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h4,{id:"step-2-update-imports-in-your-code",children:"Step 2: Update imports in your code"}),"\n",(0,t.jsxs)(n.p,{children:["In COSMOS 5, things were imported directly from ",(0,t.jsx)(n.code,{children:"@openc3/tool-common"}),"'s ",(0,t.jsx)(n.code,{children:"src"})," directory and subsequently built into your tool by your build process. Everything in COSMOS 6 is now exported through several top-level exports in our new common packages. In general, the pattern is as follows:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["COSMOS 5: ",(0,t.jsx)(n.code,{children:"import bar from '@openc3/tool-common/src/foo/bar'"})]}),"\n",(0,t.jsxs)(n.li,{children:["COSMOS 6: ",(0,t.jsx)(n.code,{children:"import { bar } from '@openc3/vue-common/foo'"})]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["This pattern also lets you combine multiple import statements into one (e.g. ",(0,t.jsx)(n.code,{children:"import { bar, baz } from '@openc3/vue-common/foo'"}),")."]}),"\n",(0,t.jsx)(n.p,{children:"There are three exceptions to this pattern:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Widgets are no longer under the ",(0,t.jsx)(n.code,{children:"components"})," directory but instead get their own top-level export","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Old: ",(0,t.jsx)(n.code,{children:"import foo from '@openc3/tool-common/src/components/widgets/Foo"})]}),"\n",(0,t.jsxs)(n.li,{children:["New: ",(0,t.jsx)(n.code,{children:"import { foo } from '@openc3/vue-common/widgets"})]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["Icons got the same treatment","\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Old: ",(0,t.jsx)(n.code,{children:"import bar from '@openc3/tool-common/src/components/icons/Bar"})]}),"\n",(0,t.jsxs)(n.li,{children:["New: ",(0,t.jsx)(n.code,{children:"import { bar } from '@openc3/vue-common/icons"})]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["The ",(0,t.jsx)(n.code,{children:"TimeFilters"})," mixin was moved from ",(0,t.jsx)(n.code,{children:"tools/base"})," to ",(0,t.jsx)(n.code,{children:"util"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Old: ",(0,t.jsx)(n.code,{children:"import TimeFilters from '@openc3/tool-common/src/tools/base/util/timeFilters"})]}),"\n",(0,t.jsxs)(n.li,{children:["New: ",(0,t.jsx)(n.code,{children:"import { TimeFilters } from '@openc3/vue-common/util"})]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h4,{id:"openc3js-common",children:(0,t.jsx)(n.code,{children:"@openc3/js-common"})}),"\n",(0,t.jsxs)(n.p,{children:["This package contains things previously under ",(0,t.jsx)(n.code,{children:"@openc3/tool-common/src/services"}),". Anything not from that path will be in the ",(0,t.jsx)(n.code,{children:"vue-common"})," package discussed below."]}),"\n",(0,t.jsx)(n.p,{children:"Update any of your imports from that path accordingly. Here's an example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:'// COSMOS 5 (old)\nimport Api from "@openc3/tool-common/src/services/api";\nimport Cable from "@openc3/tool-common/src/services/cable";\nimport { OpenC3Api } from "@openc3/tool-common/src/services/openc3Api";\n\n// COSMOS 6 (new)\nimport { Api, Cable, OpenC3Api } from "@openc3/js-common/services";\n'})}),"\n",(0,t.jsx)(n.p,{children:"This package also provides a couple more top-level imports which you likely will not need, but they might be useful, so I'll call them out here:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"import { prependBasePath } from '@openc3/js-common/utils"})," provides a function that will prepend the base path (e.g. localhost:2900) to Vue Router ",(0,t.jsx)(n.code,{children:"route"})," objects and their children. This can be useful if you run into certain quirks with single-spa and vue-router 4's routing logic where you need the full path. You can see how we use it ",(0,t.jsx)(n.a,{href:"https://github.com/OpenC3/cosmos/blob/f0193f4146e28e1cd383732763a9d27d84b5ca71/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/src/router.js#L76",children:"here"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"import { devServerPlugin } from '@openc3/js-common/viteDevServerPlugin"}),". This Vite plugin is a temporary hack to run a local dev server for tools when migrating from webpack/vue-cli. It should be replaced with Vite's built-in ",(0,t.jsx)(n.code,{children:"vite dev"})," dev server, but that's currently not working - at least in our first-party COSMOS tools. You can see how we use it ",(0,t.jsx)(n.a,{href:"https://github.com/OpenC3/cosmos/blob/f0193f4146e28e1cd383732763a9d27d84b5ca71/openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-cmdtlmserver/vite.config.js#L37",children:"here"}),"."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h4,{id:"openc3vue-common",children:(0,t.jsx)(n.code,{children:"@openc3/vue-common"})}),"\n",(0,t.jsxs)(n.p,{children:["This package provides all the shared Vue components we use to build our first-party tools. The main top-level exports are ",(0,t.jsx)(n.code,{children:"components"}),", ",(0,t.jsx)(n.code,{children:"icons"}),", ",(0,t.jsx)(n.code,{children:"plugins"}),", ",(0,t.jsx)(n.code,{children:"util"}),", and ",(0,t.jsx)(n.code,{children:"widgets"}),". There are also some tool-specific exports that we built for code sharing with COSMOS Enterprise, which you might find useful: ",(0,t.jsx)(n.code,{children:"tool/base"}),", ",(0,t.jsx)(n.code,{children:"tool/admin"}),", and ",(0,t.jsx)(n.code,{children:"tool/calendar"}),". Here's an example, but again, reference the pattern mentioned above."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:'// COSMOS 5 (old)\nimport DetailsDialog from "@openc3/tool-common/src/components/DetailsDialog";\nimport Graph from "@openc3/tool-common/src/components/Graph";\nimport Notify from "@openc3/tool-common/src/plugins/notify";\nimport TimeFilters from "@openc3/tool-common/src/tools/base/util/timeFilters";\nimport VWidget from "@openc3/tool-common/src/components/widgets/VWidget";\n\n// COSMOS 6 (new)\nimport { DetailsDialog, Graph } from "@openc3/vue-common/components";\nimport { Notify } from "@openc3/vue-common/plugins";\nimport { TimeFilters } from "@openc3/vue-common/util";\nimport { VWidget } from "@openc3/vue-common/widgets";\n'})}),"\n",(0,t.jsx)(n.h2,{id:"migrating-from-cosmos-4-to-cosmos-5",children:"Migrating From COSMOS 4 to COSMOS 5"}),"\n",(0,t.jsx)(n.admonition,{title:"All COSMOS Users",type:"info",children:(0,t.jsx)(n.p,{children:"All COSMOS 4 users must upgrade their configuration to 5. However, the command, telemetry and screen definitions (keywords and syntax) have remained the same."})}),"\n",(0,t.jsxs)(n.p,{children:["COSMOS 5 is a new architecture and treats targets as independent ",(0,t.jsx)(n.a,{href:"/tools/staticdocs/docs/configuration/plugins",children:"plugins"}),". Thus the primary effort in porting from COSMOS 4 to COSMOS 5 is converting targets to plugins. We recommend creating plugins for each independent target (with its own interface) but targets which share an interface will need to be part of the same plugin. The reason for independent plugins is it allows the plugin to be versioned separately and more easily shared outside your specific project. If you have very project specific targets (e.g. custom hardware) those can potentially be combined for ease of deployment."]}),"\n",(0,t.jsx)(n.h3,{id:"configuration-migration-tool",children:"Configuration Migration Tool"}),"\n",(0,t.jsx)(n.p,{children:"COSMOS 5 includes a migration tool for converting an existing COSMOS 4 configuration into a COSMOS 5 plugin. This example assumes an existing COSMOS 4 configuration at C:\\COSMOS and a new COSMOS 5 installation at C:\\cosmos-project. Linux users can adjust paths and change from .bat to .sh to follow along."}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:"Change to the existing COSMOS 4 configuration directory. You should see the config, lib, procedures, outputs directory. You can then run the migration tool by specifying the absolute path to the COSMOS 5 installation."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-batch",children:"C:\\COSMOS> C:\\cosmos-project\\openc3.bat cli migrate -a demo\n"})}),"\n",(0,t.jsx)(n.p,{children:"This creates a new COSMOS 5 plugin called openc3-cosmos-demo with a target named DEMO containing the existing lib and procedures files as well as all the existing targets."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-batch",children:"C:\\COSMOS> C:\\cosmos-project\\openc3.bat cli migrate demo-part INST\n"})}),"\n",(0,t.jsx)(n.p,{children:"This would create a new COSMOS 5 plugin called openc3-cosmos-demo-part with a target named DEMO_PART containing the existing lib and procedures files as well as the INST target (but no others)."}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Open the new COSMOS 5 plugin and ensure the ",(0,t.jsx)(n.a,{href:"/tools/staticdocs/docs/configuration/plugins#plugintxt-configuration-file",children:"plugin.txt"})," file is correctly configured. The migration tool doesn't create VARIABLEs or MICROSERVICEs or handle target substitution so those features will have to added manually."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Follow the ",(0,t.jsx)(n.a,{href:"/tools/staticdocs/docs/getting-started/gettingstarted#building-your-plugin",children:"building your plugin"})," part of the Getting Started tutorial to build your new plugin and upload it to COSMOS 5."]}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"upgrading-custom-tools",children:"Upgrading Custom Tools"}),"\n",(0,t.jsxs)(n.p,{children:["COSMOS 4 was a Qt Desktop based application. COSMOS 5 is a completely new architecture which runs natively in the browser using ",(0,t.jsx)(n.a,{href:"https://vuejs.org/",children:"Vue.js"})," as the Javascript framework and ",(0,t.jsx)(n.a,{href:"https://vuetifyjs.com/en/",children:"Vuetify"})," as the GUI library. We utilize ",(0,t.jsx)(n.a,{href:"https://single-spa.js.org/",children:"single-spa"})," to allow you to write COSMOS tool plugins in any language and provide ",(0,t.jsx)(n.a,{href:"https://github.com/OpenC3/cosmos/tree/main/openc3/templates",children:"templates"})," for Vue.js (recommended), Angular, React and Svelte. Any COSMOS 4 custom tools will have to be completely re-written to run in COSMOS 5. We recommend using the native COSMOS ",(0,t.jsx)(n.a,{href:"https://github.com/OpenC3/cosmos/tree/main/openc3-cosmos-init/plugins/packages",children:"tools"})," and finding GUI concepts and functionality that best match the tool you're trying to re-create."]}),"\n",(0,t.jsxs)(n.p,{children:["If you need custom development get in touch at ",(0,t.jsx)(n.a,{href:"mailto:sales@openc3.com",children:"sales@openc3.com"}),"."]})]})}function h(e={}){let{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}},2840:function(e,n,o){o.d(n,{Z:function(){return c},a:function(){return r}});var i=o(2784);let t={},s=i.createContext(t);function r(e){let n=i.useContext(s);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),i.createElement(s.Provider,{value:n},e.children)}}}]);