Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate ace-diff from Webpack to Vite #1736

Merged
merged 5 commits into from
Dec 8, 2024
Merged

Migrate ace-diff from Webpack to Vite #1736

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7a9ce24
Fix AceDiff import
ryan-pratt Dec 5, 2024
537e0b7
Migrate ace-diff to vite
ryan-pratt Dec 5, 2024
e9386ee
Merge branch 'main' into ace-diff-vite
ryan-pratt Dec 5, 2024
590d29f
fix merge issues
ryan-pratt Dec 5, 2024
bc1ed32
Switch ace-diff to ESM
ryan-pratt Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 0 additions & 11 deletions openc3-cosmos-init/plugins/packages/openc3-cosmos-ace-diff/.babelrc
View file
Open in desktop

This file was deleted.

0 ...ges/openc3-cosmos-ace-diff/.prettierrc.js → ...es/openc3-cosmos-ace-diff/.prettierrc.cjs
View file
Open in desktop
File renamed without changes.
26 changes: 0 additions & 26 deletions openc3-cosmos-init/plugins/packages/openc3-cosmos-ace-diff/babel.config.json
View file
Open in desktop

This file was deleted.

8 changes: 2 additions & 6 deletions openc3-cosmos-init/plugins/packages/openc3-cosmos-ace-diff/eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,8 @@ export default [...compat.extends("plugin:prettier/recommended"), {
...globals.node,
},

ecmaVersion: 5,
sourceType: "commonjs",

parserOptions: {
parser: "@babel/eslint-parser",
},
ecmaVersion: 2020,
sourceType: "module",
},

rules: {
Expand Down
23 changes: 3 additions & 20 deletions openc3-cosmos-init/plugins/packages/openc3-cosmos-ace-diff/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,8 @@
"source": "src/index.js",
"main": "dist/ace-diff.min.js",
"scripts": {
"build": "webpack --mode=production --node-env=production",
"build:dev": "webpack --mode=development",
"build:prod": "webpack --mode=production --node-env=production",
"watch": "webpack --watch"
"build": "vite build",
"lint": "eslint src"
},
"repository": {
"type": "git",
Expand All @@ -18,24 +16,9 @@
"author": "Ben Keen, Jason Thomas",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.26.0",
"@babel/plugin-proposal-class-properties": "7.18.6",
"@babel/plugin-syntax-dynamic-import": "7.8.3",
"@babel/plugin-transform-runtime": "7.25.9",
"@babel/preset-env": "^7.26.0",
"@babel/runtime": "7.26.0",
"@webpack-cli/generators": "^3.0.7",
"babel-loader": "^9.2.1",
"babel-plugin-istanbul": "7.0.0",
"eslint": "9.16.0",
"file-loader": "^6.2.0",
"prettier": "3.3.3",
"sass": "1.80.4",
"sass-loader": "16.0.2",
"webpack": "^5.95.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "5.1.0",
"webpack-merge": "6.0.1",
"webpack-remove-empty-scripts": "^1.0.4"
"vite": "5.4.11"
}
}
16 changes: 16 additions & 0 deletions openc3-cosmos-init/plugins/packages/openc3-cosmos-ace-diff/vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { defineConfig } from 'vite'

export default defineConfig({
build: {
sourcemap: true,
rollupOptions: {
input: ['./src/index.js', './src/styles/ace-diff.scss', './src/styles/ace-diff-dark.scss'],
output: {
format: 'commonjs',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need commonjs output. Should this be changed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can probably re-work it to be ESM, but it was commonjs before, so I was just doing the minimal change to get ace-diff on vite

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually yeah, it looks like it'll probably be happy as ESM, which is what Vite wants anyway, so I can undo the changes to admin's vite config

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think umd is probably the correct option for now? Making this esm I don't think would hurt since this one is being bundled, but for tool-common I don't think we want esm yet. From what I read commonjs is only for node backends.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For linked/bundled deps (which I think is only ace-diff), I'd rather use ESM since it's the default for Vite.

tool-common should be systemjs since that's how we're loading it in the app, and then we can build vue-common and js-common out to multiple formats (including systemjs) for publishing in #1737

entryFileNames: 'ace-diff.min.js',
assetFileNames: '[name].min[extname]',
},
preserveEntrySignatures: 'strict',
},
},
})
57 changes: 0 additions & 57 deletions openc3-cosmos-init/plugins/packages/openc3-cosmos-ace-diff/webpack.config.js
View file
Open in desktop

This file was deleted.

4 changes: 4 additions & 0 deletions openc3-cosmos-init/plugins/packages/openc3-cosmos-tool-admin/vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ export default defineConfig((options) => {
external: ['single-spa', 'vue', 'vuex', 'vue-router', 'vuetify'],
preserveEntrySignatures: 'strict',
},
commonjsOptions: {
include: [/ace-diff/, /node_modules/],
},
},
server: {
port: 2930,
Expand All @@ -47,6 +50,7 @@ export default defineConfig((options) => {
},
optimizeDeps: {
entries: [], // https://github.com/vituum/vituum/issues/25#issuecomment-1690080284
include: ['@openc3/ace-diff'],
},
}
})
12 changes: 6 additions & 6 deletions openc3-cosmos-init/plugins/packages/openc3-tool-base/public/index-allow-http.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,15 +83,15 @@
System.import('vue'),
]).then(function (modules) {
System.set(System.resolve('vue'), window.Vue)
Promise.all([
return Promise.all([
System.import('vue-router'),
System.import('vuex'),
System.import('vuetify')
]).then(function (modules) {
System.set(System.resolve('vue-router'), window.VueRouter)
System.set(System.resolve('vuex'), window.Vuex)
System.import('@openc3/tool-base')
})
])
}).then(function (modules) {
System.set(System.resolve('vue-router'), window.VueRouter)
System.set(System.resolve('vuex'), window.Vuex)
System.import('@openc3/tool-base')
})
})()
</script>
Expand Down
12 changes: 6 additions & 6 deletions openc3-cosmos-init/plugins/packages/openc3-tool-base/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,15 +83,15 @@
System.import('vue'),
]).then(function (modules) {
System.set(System.resolve('vue'), window.Vue)
Promise.all([
return Promise.all([
System.import('vue-router'),
System.import('vuex'),
System.import('vuetify')
]).then(function (modules) {
System.set(System.resolve('vue-router'), window.VueRouter)
System.set(System.resolve('vuex'), window.Vuex)
System.import('@openc3/tool-base')
})
])
}).then(function (modules) {
System.set(System.resolve('vue-router'), window.VueRouter)
System.set(System.resolve('vuex'), window.Vuex)
System.import('@openc3/tool-base')
})
})()
</script>
Expand Down
3 changes: 1 addition & 2 deletions openc3-cosmos-init/plugins/packages/openc3-tool-common/src/tools/admin/PluginDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,8 +118,7 @@ import 'ace-builds/src-min-noconflict/mode-ruby'
import 'ace-builds/src-min-noconflict/theme-twilight'
import 'ace-builds/src-min-noconflict/ext-language_tools'
import 'ace-builds/src-min-noconflict/ext-searchbox'
import * as AceDiff from '@openc3/ace-diff'
import '@openc3/ace-diff/dist/ace-diff.min.css'
import AceDiff from '@openc3/ace-diff'
import '@openc3/ace-diff/dist/ace-diff-dark.min.css'
import { toRaw } from 'vue'

Expand Down
Loading