Upgrade to latest Vue and Framework7 #2151

ThaDaVos · 2023-10-26T08:26:21Z

The problem

It's actually a re-open of an existing issue as it was closed due being stale: #1069

Your suggestion

Check if we can do the upgrade - I am happy to look into this to get Openhab's MainUI up to date.

Your environment

Additional information

florian-h05 · 2023-12-01T08:58:27Z

Hello @ThaDaVos,

thanks for picking this up.
Since Vue 2.x is going to reach EOL, we should IMO upgrade to Vue 3.x.

So: Any help with upgrading is highly appreciated.
I guess it is much work since there is a number of breaking changes both in Vue and Framework7, and in addition our dependencies also need to be compatible with Vue 3.

@gyhs WDYT?

ThaDaVos · 2023-12-02T11:07:26Z

It will mostly be a single-day-a-week effort I can put in, because of work, but at least it will be worked on!

I will focus on the org.openhab.ui - this way I can also learn a bit how it works and maybe look into my feature request for supporting custom widgets and also look into the reactivity from the back-end too - as there's a lot which may be improved there too to make it lighter and easier to work with

florian-h05 · 2023-12-02T11:34:48Z

It will mostly be a single-day-a-week effort I can put in, because of work, but at least it will be worked on!

Sounds great!

MainUI is inside the org.openhab.ui bundle in the web folder, the Java parts of that bundle shouldn’t really matter.
Backend is the openHAB REST API & SSE event stream provided by openHAB Core (https://github.com/openhab/openhab-core) by the org.openhab.core.io.* bundles.

I would recommend to focus on getting MainUI starting with Vue 3 and latest Framework7 first, then check that all features relying on dependencies still work/upgrade the dependencies.

I think working on the backend the same time could be quite overwhelming, and if your UI PR does not only contain the upgrade, but also changes to backend calls etc., it will get bigger and bigger and therefore more difficult to review.
So splitting upgrade and improvements would help.

ThaDaVos · 2023-12-02T16:33:17Z

I will start with the pure upgrade first - saw there are tests or at least a framework for it - so will check that out first

A question though, why was there chosen for SSE and not Websockets? Just curious
Or maybe even Web gRPC 🤣

florian-h05 · 2023-12-03T00:33:59Z

A question though, why was there chosen for SSE and not Websockets?

I don‘t know, that was before my time as maintainer (and even as contributor).
But given that openhab/openhab-core#3345 (SSE log endpoint) was closed in favour of openhab/openhab-core#3859 (WebSocket log endpoint) and the addition of an event WebSocket in openhab/openhab-core#2891, I would say the goal is to switch to WebSockets in MainUI or add least add WebSocket support and keep SSE as an alternative.

ThaDaVos · 2023-12-04T09:11:42Z

Ah good to know - when I have time I'll go through the code (created a fork) and sum up what to do in a pull request so we can keep track and verify it's the correct steps

florian-h05 · 2023-12-04T09:29:18Z

As the MainUI code needs to be changed anyway when switching from SSE to WebSocket, it could probably be done in a way where the MainUI code itself does not know about the implementation details of the event connection, i.e. whether it is SSE or WebSocket (or probably something different in the future?), this only matter for the implementation of that event connection. In the Java world I would say create an Interface for the event stream and then have two implementations, one for WebSockets and one for SSE.
That would be really nice IMO, but is nothing to take care of now.

ThaDaVos · 2023-12-04T09:44:58Z

As the MainUI code needs to be changed anyway when switching from SSE to WebSocket, it could probably be done in a way where the MainUI code itself does not know about the implementation details of the event connection, i.e. whether it is SSE or WebSocket (or probably something different in the future?), this only matter for the implementation of that event connection. In the Java world I would say create an Interface for the event stream and then have two implementations, one for WebSockets and one for SSE. That would be really nice IMO, but is nothing to take care of now.

That was I thinking too - as I probably have to rewrite stuff to be more Vue 3 - I could also take a small detour and check that out - but first I'll check what components are used and how stuff is done - then I can write up a detailed list of steps and tasks to undertake

ThaDaVos · 2023-12-04T09:45:38Z

Quick question, maybe I missed it - but is there a contribution guide?

florian-h05 · 2023-12-04T09:50:26Z

Yes, there is:

https://www.openhab.org/docs/developer/contributing.html for general stuff like sign-off etc.
https://github.com/openhab/openhab-webui/blob/main/bundles/org.openhab.ui/CONTRIBUTING.md explicitely for MainUI, this takes care of the more technical aspects

ThaDaVos · 2023-12-27T14:24:10Z

~~Is it within scope of this to also move to the latest recommended build stack for Vue? So move from webpack to Vite?~~
n.v.m. that - I will first do a straight up upgrade - migration to different buildstack should be done after that

J-N-K · 2023-12-27T19:05:28Z

If you find something missing in the web socket part on server-side, feel free to tag me.

GiviMAD · 2024-01-13T19:44:27Z

I just saw these, I have upgraded webpack in these PR #2267

ThaDaVos · 2024-01-15T10:33:15Z

I just saw these, I have upgraded webpack in these PR #2267

Oh that's great! Will take it into consideration @GiviMAD

florian-h05 · 2024-02-01T09:17:52Z

@ThaDaVos FYI: I have merged #2267, so Main UI is now using webpack 5.

jimtng · 2024-02-20T12:22:40Z

I have about 2-3 weeks experience in Javascript / Vue / Framework7, but I'd be happy to help. I have a lot of free time.

ThaDaVos · 2024-02-20T12:25:01Z

I am first working on indexing all the needed changes and steps to be made - when I've done that, I can may be split off some work - finally getting some time again, so will be picking it up again soon, first of merging the above mentioned PR and then continue indexing the changes - will create a PR with a check list

florian-h05 · 2024-03-21T18:00:47Z

@ThaDaVos FYI I upgraded to the latest Vue 2.7.x version and upgraded most dependencies to their latest version compatible with Vue 2.7.x.

ThaDaVos · 2024-03-21T18:03:07Z

@florian-h05 thank you! Due to work I haven't been able to work on it, so this helps a lot!

florian-h05 · 2024-03-21T18:11:35Z

Yeah, this removes some of the burden of upgrading to Vue 3 because most dependencies are now very close to their Vue 3 compatible versions, but I fear it still is a lot of work.

ThaDaVos · 2024-03-21T18:36:08Z

Yeah, the first step I would have done the same, first upgrade to last minor versions and then go major by major - hope I'll get time soon as I already have experience with Vue 2 to Vue 3 upgrades

florian-h05 · 2024-06-07T09:08:27Z

@ThaDaVos Any updates on your work?

ThaDaVos · 2024-06-13T09:58:58Z

@florian-h05 - slow progress - as I had some really busy days - I hope to be able to give an update within the next two weeks as my schedule is finally clearing up and I finally get some time to tinker with it

florian-h05 · 2024-06-13T13:58:41Z

Thanks for the update, sounds good 👍

miloit · 2024-07-27T20:20:40Z

@ThaDaVos any updates?

florian-h05 · 2024-10-24T09:03:32Z

@ThaDaVos Still on it?

ThaDaVos · 2024-10-24T09:11:38Z

Sadly only half - work has been crushing me - been looking into the code and slowly collecting what needs to be changed and how - but sadly no real progress currently - hopefully I can start on it soon and finish it up

florian-h05 · 2024-10-24T10:13:51Z

Thanks for the update - do you want to share what needs to be changed in this issue?

ThaDaVos · 2024-10-24T11:09:18Z

I'll try to give you an update coming weekend if possible due to time

stefan-hoehn · 2024-11-30T17:30:21Z

@ThaDaVos Did you have the time to look into it as it would be great to be included in the next openHAB version?

ThaDaVos · 2024-12-10T10:09:11Z

I am sorry, due to an increased workload - I haven't been able to look at it - I really hope I'll have time soon, as I am also needing to re-setup my OpenHAB instance.

FYI, I'll checkout the latest version and re-do the list, just to be sure I don't miss anything important.

Question, what version would you want to target this for? I guess it would be fitting for a Major release, like 5.0

florian-h05 · 2024-12-10T10:12:01Z

Thanks for the update.
Do you already have a list? If you have, would be great if you could share it.

ThaDaVos · 2025-01-11T13:48:05Z

Just a small up date - I re-installed my pc over christmas due to instabillity issues - currently doing a clean start on the upgrade/migration - got some commits done regarding setup and preparation - firstly moving to the @vue/compat build (https://v3-migration.vuejs.org/migration-build) to ease the migrations, currently working through the steps of https://v3-migration.vuejs.org/migration-build#preparations and will after that work on F7 - I'll be creating per file commits regarding the above migration step to easily track the changes per file, just finished app.vue - so will commit that in a few minutes to my fork at https://github.com/ThaDaVos/openhab-webui/tree/upgrade/vue-and-framework-to-latest-majors

ThaDaVos · 2025-01-11T17:46:05Z

Quick update - I am forcilbly updating the modules as the above is giving errors probably because of the version of Framework7-Vue - sadly I cannot find anything about what Vue version corresponds to what Framework7-Vue version

But, there are some show stoppers - as certain Vue2 libraries (like vuetrend don't seem to have straight up replacements - what should we do about these dependencies?

(use 👍 ) Comment them out, do the upgrade and see how to replace them
(use 👎 ) Remove them and their functionality
(use 😕 ) Abort upgrade

Secondly - the above comment about migrating to a new buildstack - maybe it's something which we should do at once, as the same counts for certain dev-dependencies too - resulting in replacements or rewrites of the build.js (webpack) file too

ThaDaVos · 2025-01-11T19:35:35Z

So about the webpack thing, vote below:

(Use 👍 ) Switch to Vite based stack
(Use 👎 ) Keep webpack

FYI:

Package.json

{
  "name": "openhab",
  "version": "4.2.0",
  "description": "openHAB",
  "repository": "https://github.com/openhab/openhab-webui",
  "license": "EPL-2.0",
  "framework7": {
    "type": [
      "web",
      "pwa"
    ],
    "name": "openHAB",
    "pkg": "org.openhab.ui",
    "platforms": [
      "ios",
      "android"
    ],
    "framework": "vue",
    "template": "split-view",
    "cssPreProcessor": "stylus",
    "customColor": true,
    "color": "ff7700",
    "bundler": "webpack"
  },
  "scripts": {
    "generate-build-info": "node build/generate-build-info.mjs",
    "build-prod": "cross-env NODE_ENV=production node ./build/build.js",
    "build": "cross-env NODE_ENV=development node ./build/build.js",
    "webpack-analyzer": "cross-env NODE_ENV=production cross-env WEBPACK_ANALYZER=1 node ./build/build.js",
    "webpack-analyzer-report": "cross-env NODE_ENV=production cross-env WEBPACK_ANALYZER=1 WEBPACK_ANALYZER_REPORT=1 node ./build/build.js",
    "webpack-analyzer-report-stats": "cross-env NODE_ENV=production cross-env WEBPACK_ANALYZER=1 WEBPACK_ANALYZER_REPORT=1 WEBPACK_ANALYZER_REPORT_STATS=1 node ./build/build.js",
    "predev:blockly": "cross-env NODE_ENV=development npm run generate-build-info",
    "dev:blockly": "cross-env SOURCE_MAPS=1 NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
    "predev": "cross-env NODE_ENV=development npm run generate-build-info",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
    "start": "npm run dev",
    "lint": "npx eslint --ext js --ext vue src",
    "lint:fix": "npx eslint --fix --ext js --ext vue src",
    "test:unit": "npx jest",
    "test:unit:watch": "npx jest --watch",
    "test:e2e": "npx cypress run",
    "test:e2e:gui": "npx cypress open"
  },
  "browserslist": [
    "Android >= 5",
    "IOS >= 9.3",
    "Edge >= 15",
    "Safari >= 9.1",
    "Chrome >= 49",
    "Firefox >= 31",
    "Samsung >= 5"
  ],
  "dependencies": {
    "@blockly/field-slider": "^7.0.12",
    "@blockly/plugin-typed-variable-modal": "^8.0.12",
    "@blockly/plugin-workspace-search": "^9.1.6",
    "@blockly/shadow-block-converter": "^6.0.13",
    "@blockly/theme-dark": "^7.0.10",
    "@blockly/zoom-to-fit": "^6.0.12",
    "@jsep-plugin/arrow": "^1.0.6",
    "@jsep-plugin/object": "^1.2.2",
    "@jsep-plugin/regex": "^1.0.4",
    "@jsep-plugin/template": "^1.0.5",
    "@mit-app-inventor/blockly-plugin-workspace-multiselect": "^1.0.0",
    "@vue-leaflet/vue-leaflet": "^0.10.1",
    "@vue/compat": "^3.5.13",
    "blockly": "^11.2.0",
    "cronstrue": "^2.52.0",
    "crypto-browserify": "^3.12.1",
    "dayjs": "^1.11.13",
    "diacritic": "^0.0.2",
    "dom7": "^4.0.6",
    "echarts": "^5.6.0",
    "event-source-polyfill": "^1.0.31",
    "fast-deep-equal": "^3.1.3",
    "framework7": "^8.3.4",
    "framework7-icons": "^5.0.5",
    "framework7-vue": "^8.3.4",
    "jse-eval": "^1.5.2",
    "jssip": "^3.10.1",
    "leaflet": "^1.9.4",
    "leaflet-providers": "^2.0.0",
    "lodash": "^4.17.21",
    "marked": "^15.0.6",
    "moo": "^0.5.2",
    "nearley": "^2.20.1",
    "path-browserify": "^1.0.1",
    "pkce-challenge": "^4.1.0",
    "qrcode": "^1.5.4",
    "scope-css": "^1.2.1",
    "stream-browserify": "^3.0.0",
    "template7": "^1.4.2",
    "tern": "^0.24.3",
    "v-clipboard": "^2.2.3",
    "video.js": "^8.21.0",
    "vue": "^3.5.13",
    "vue-async-computed": "^4.0.1",
    "vue-codemirror": "^6.1.1",
    "vue-draggable-resizable": "^3.0.0",
    "vue-echarts": "^7.0.3",
    "vue-fullscreen": "^2.6.1",
    "vue-grid-layout": "^2.4.0",
    "vue-i18n": "^11.0.1",
    "vue-magic-grid": "0.0.4",
    "vue-qrcode": "^2.2.2",
    "vue-round-slider": "^1.0.1",
    "vuedraggable": "^2.24.3",
    "vuex": "^4.1.0",
    "yaml": "^2.7.0"
  },
  "devDependencies": {
    "@babel/core": "^7.26.0",
    "@babel/eslint-parser": "^7.26.5",
    "@babel/eslint-plugin": "^7.25.9",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-syntax-jsx": "^7.25.9",
    "@babel/plugin-transform-modules-commonjs": "^7.26.3",
    "@babel/preset-env": "^7.26.0",
    "@babel/runtime": "^7.26.0",
    "@iconify/vue": "^4.3.0",
    "@types/jest": "^29.5.14",
    "@vue/compiler-sfc": "^3.5.13",
    "@vue/eslint-config-standard": "^8.0.1",
    "@vue/test-utils": "^2.4.6",
    "@vue/vue3-jest": "^29.2.6",
    "babel-jest": "^29.7.0",
    "babel-loader": "^9.2.1",
    "babel-plugin-dynamic-import-node": "^2.3.3",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "chalk": "^4.1.2",
    "compression-webpack-plugin": "^11.1.0",
    "copy-webpack-plugin": "^12.0.2",
    "cross-env": "^7.0.3",
    "css-loader": "^7.1.2",
    "css-minimizer-webpack-plugin": "^7.0.0",
    "cypress": "^13.17.0",
    "eslint": "^8.57.1",
    "eslint-plugin-cypress": "^3.6.0",
    "eslint-plugin-es": "^4.1.0",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-vue": "^9.32.0",
    "eslint-webpack-plugin": "^4.2.0",
    "global-prefix": "^4.0.0",
    "html-webpack-plugin": "^5.6.3",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-serializer-vue": "^3.1.0",
    "jest-transform-nearley": "^2.0.0",
    "jest-transform-stub": "^2.0.0",
    "mini-css-extract-plugin": "^2.9.2",
    "nearley-loader": "^2.0.0",
    "ora": "^5.4.1",
    "postcss-loader": "^8.1.1",
    "postcss-preset-env": "^10.1.3",
    "process": "^0.11.10",
    "rimraf": "^6.0.1",
    "standard": "^17.1.2",
    "style-loader": "^4.0.0",
    "stylus": "^0.64.0",
    "stylus-loader": "^8.1.1",
    "swagger-ui-dist": "^5.18.2",
    "vue-loader": "^17.4.2",
    "vue-masonry-css": "^1.0.3",
    "webpack": "^5.97.1",
    "webpack-bundle-analyzer": "^4.10.2",
    "webpack-cli": "^6.0.1",
    "webpack-dev-server": "^5.2.0",
    "webpack-stats-plugin": "^1.1.3",
    "workbox-webpack-plugin": "^7.3.0"
  }
}

Build output:

ERROR in ./node_modules/vue-echarts/dist/index.js 367:11-12
export 'h' (imported as 'h') was not found in 'vue-demi' (possible exports: Vue2, del, install, isVue2, isVue3, set)
 @ ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/components/pagedesigner/chart/chart-designer.vue?vue&type=script&lang=js 7:0-33 23:22-28
 @ ./src/components/pagedesigner/chart/chart-designer.vue?vue&type=script&lang=js 1:0-186 1:0-186 1:187-362 1:187-362
 @ ./src/components/pagedesigner/chart/chart-designer.vue 2:0-65 3:0-60 3:0-60 8:49-55
 @ ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/pages/settings/pages/chart/chart-edit.vue?vue&type=script&lang=js 5:0-79 17:19-32
 @ ./src/pages/settings/pages/chart/chart-edit.vue?vue&type=script&lang=js 1:0-188 1:0-188 1:189-366 1:189-366
 @ ./src/pages/settings/pages/chart/chart-edit.vue 2:0-61 3:0-56 3:0-56 8:49-55
 @ ./src/js/routes.js 103:11-110
 @ ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[0]!./src/components/app.vue?vue&type=script&lang=js 9:0-36 60:16-22
 @ ./src/components/app.vue?vue&type=script&lang=js 1:0-163 1:0-163 1:164-316 1:164-316
 @ ./src/components/app.vue 2:0-54 3:0-49 3:0-49 8:49-55
 @ ./src/js/app.js 26:0-40 70:13-16 74:9-12

401 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.97.1 compiled with 730 errors and 80 warnings in 24933 ms

Build failed with errors.

florian-h05 · 2025-01-11T19:40:53Z

Great to hear you are making progress!!

But, there are some show stoppers - as certain Vue2 libraries (like vuetrend don't seem to have straight up replacements - what should we do about these dependencies?

As one of the two Main UI maintainers, I would vote for option 1 — Vue 3 & current Framework7 is too important.

Secondly - the above comment about migrating to a new buildstack - maybe it's something which we should do at once, as the same counts for certain dev-dependencies too - resulting in replacements or rewrites of the build.js (webpack) file too

If you think it is easier to migrate to another bundler now, feel free to to migrate to Vite — a build time improvement would be nice, and from my experience Vite is fast.

ThaDaVos · 2025-01-11T19:48:18Z

Yeah, I am slowly starting to think a clean slate is needed though - so many weird build errors - thinking starting clean(er) can help, like starting with empty App.vue and slowly adding stuff back, but firstly getting a base build working in Vue3 with Framework7 - but I guess this is all for OpenHAB 5 (and I don't know it's release date) - but maybe, as it's a large major, bigger steps can be taken to ensure a future with easier maintenance - it takes extra effort now, but hopefully less effort later.

So I would suggest, let's make a list of required dependencies for the stack and build up from there, I guess the following are base requirements:

Vue
Framework7
UI Testing
Blockly
SwaggerUI or OpenAPI

Maybe, as I once suggested, we could look into a way to make the UI pluggable (one example is Laravel Nova) - this way, the MainUI can stay clean and lean regarding dependencies, and add-ons can add their own deps to the stack (the thing I am refering to is allowing AddOns to add complete components including Javascript libraries)

One comment I am always getting from friends and family is that Home Assistant looks so much nicer and simpler from the get-go - maybe we can look into this too while we're re-doing the front-end stack and make OpenHAB V a big booming update!

ThaDaVos · 2025-01-11T20:22:22Z

Just created a clean-slate commit, it's a big one as I moved web to web.old and created a new web with vite - I also updated the stack, by choosing for Vitest instead of Jest and PlayWright instead of Cypress - also, followed the recommendation to go with PInia instead of Vuex - also added Vue-router as it seems important for Single-Page-App support, seems something custom was used, but maybe it's better for opting to go with standards instead (as there is a really annoying routing bug currently in Openhabs own router) - also going Typescript - but before I continue, would love to have some feedback on this.

florian-h05 · 2025-01-11T20:40:11Z

Jest -> Vitest seems reasonable as well as Vuex -> Pinia.
I don’t think you need to worry about Cypress right now, I think is hasn’t been touched and used for years now, so I would actually get rid of it and add it back later if we want E2E tests.

Wrt to Vue-router: We are using Framework7 router right now, which is still available in latest F7 and I think is beneficial of using instead of vanilla Vue router. But I have to admit I didn’t look into it in detail.

ThaDaVos · 2025-01-11T20:41:46Z

Thanks for the quick feedback - didn't see it was F7-Router - thought it was a custom thing - will look into both and see which is better and comeback with a comparison

ThaDaVos · 2025-01-11T20:59:25Z

It seems support is almost the same between both - so I guess it's better to stick with the F7-router if that's preferrred (I read something about page animations being better)

ThaDaVos · 2025-01-13T10:59:16Z

Got Framework7 installed now - little issue, but got a workaround: framework7io/framework7#4302

ThaDaVos · 2025-01-13T12:07:56Z

@florian-h05 - I also noticed Framework7 having it's own store - is there a reason Vuex (now Pinia) was used?
https://framework7.io/vue/store

Just seeing in what area's we can remove extra dependencies and use framework defaults

EDIT:
I see it's not as broad as Vuex/Pinia thought - like no (sub)module support and no separation between Actions/Mutations - Pinia also removed Mutations btw

FYI:
Pinia vs Vuex
Framework7 Store

ThaDaVos · 2025-01-13T12:16:11Z

BTW, maybe instead of convoluting the issue - is there a better channel for communication regarding OpenHAB WebUI upgrades?

florian-h05 · 2025-01-13T13:40:19Z

is there a reason Vuex (now Pinia) was used?

Framework7 v5 didn't include a store so Vuex was needed.
Having no submodules support IMO takes out Framework7 store as the future store.

If you want to migrate from Vuex to Pinia, this would be nice I think, but if you don't want that additional effort we can keep Vuex and migrate later as well.

BTW, maybe instead of convoluting the issue - is there a better channel for communication regarding OpenHAB WebUI upgrades?

I would say this channel is a good place for it, but if we want more features like replies to specific messages, we can switch to GitHub discussions.

ThaDaVos · 2025-01-13T14:00:54Z

I'll migrate it to Pinia - thinking about using the same pattern I used in other projects to decouple the logic from the views and get a more MVVM structure (this eases development and eases upgrades in the future, also shrinks the logic inside the components, especially with the new composition api)

ThaDaVos · 2025-01-13T18:31:25Z

@florian-h05 - would it be a good idea to, while rewriting it, write it more Object-Oriented, perhaps use something like Pinia-ORM see to create an abstraction based on the models used in OpenHAB itself?

Just thinking out loud here, looking into what approach is to best to keep maintainability the lowest and ease upgrading in the future. Also, keeping testing feasible easily, preferably without a running OpenHAB instance needed.

ThaDaVos · 2025-01-13T18:37:22Z

@florian-h05 - do you perhaps know what OpenHAB uses for Websockets? Seeing as there was talk about migrating from SSE to Websockets - I also found this: https://github.com/Atmosphere/atmosphere
Or is it SockJs based?

Below seems nicest solution:
https://socket.io/how-to/use-with-vue

florian-h05 · 2025-01-13T19:07:46Z

would it be a good idea to, while rewriting it, write it more Object-Oriented, perhaps use something like Pinia-ORM see to create an abstraction based on the models used in OpenHAB itself?

Pulling in @ghys, please comment.

do you perhaps know what OpenHAB uses for Websockets? Seeing as there was talk about migrating from SSE to Websockets

We are using the vanilla WebSocket API of the browser, that’s absolutely enough for us. I have recently refactored the WS logic that was added with the new log viewer to ws.js, and have a PR open to make use of topic filtering (I have a core PR for that). My plan is to migrate from SSE to WS step-by-step, but have a switch where users can switch back to SSE during an initial phase.

ThaDaVos added enhancement New feature or request main ui Main UI labels Oct 26, 2023

florian-h05 pinned this issue Dec 2, 2023

florian-h05 mentioned this issue Dec 12, 2023

[MainUI] Closing Location/Equipment/Properties does load a wrong page in Milestone 4.1.0.M4 #2196

Closed

miloit mentioned this issue Nov 30, 2024

Feature Planning for openHAB 5 openhab/openhab-distro#1693

Open

Upgrade to latest Vue and Framework7 #2151

Upgrade to latest Vue and Framework7 #2151

Comments

ThaDaVos commented Oct 26, 2023

The problem

Your suggestion

Your environment

Additional information

florian-h05 commented Dec 1, 2023

ThaDaVos commented Dec 2, 2023

florian-h05 commented Dec 2, 2023

ThaDaVos commented Dec 2, 2023

florian-h05 commented Dec 3, 2023

ThaDaVos commented Dec 4, 2023

florian-h05 commented Dec 4, 2023

ThaDaVos commented Dec 4, 2023

ThaDaVos commented Dec 4, 2023

florian-h05 commented Dec 4, 2023

ThaDaVos commented Dec 27, 2023 • edited Loading

J-N-K commented Dec 27, 2023

GiviMAD commented Jan 13, 2024

ThaDaVos commented Jan 15, 2024

florian-h05 commented Feb 1, 2024

jimtng commented Feb 20, 2024

ThaDaVos commented Feb 20, 2024

florian-h05 commented Mar 21, 2024

ThaDaVos commented Mar 21, 2024

florian-h05 commented Mar 21, 2024

ThaDaVos commented Mar 21, 2024

florian-h05 commented Jun 7, 2024

ThaDaVos commented Jun 13, 2024

florian-h05 commented Jun 13, 2024

miloit commented Jul 27, 2024

florian-h05 commented Oct 24, 2024

ThaDaVos commented Oct 24, 2024

florian-h05 commented Oct 24, 2024

ThaDaVos commented Oct 24, 2024

stefan-hoehn commented Nov 30, 2024

ThaDaVos commented Dec 10, 2024

florian-h05 commented Dec 10, 2024

ThaDaVos commented Jan 11, 2025 • edited Loading

ThaDaVos commented Jan 11, 2025 • edited Loading

ThaDaVos commented Jan 11, 2025 • edited Loading

florian-h05 commented Jan 11, 2025

ThaDaVos commented Jan 11, 2025

ThaDaVos commented Jan 11, 2025 • edited Loading

florian-h05 commented Jan 11, 2025

ThaDaVos commented Jan 11, 2025

ThaDaVos commented Jan 11, 2025

ThaDaVos commented Jan 13, 2025

ThaDaVos commented Jan 13, 2025 • edited Loading

ThaDaVos commented Jan 13, 2025 • edited Loading

florian-h05 commented Jan 13, 2025

ThaDaVos commented Jan 13, 2025

ThaDaVos commented Jan 13, 2025

ThaDaVos commented Jan 13, 2025 • edited Loading

florian-h05 commented Jan 13, 2025

ThaDaVos commented Dec 27, 2023 •

edited

Loading

ThaDaVos commented Jan 11, 2025 •

edited

Loading

ThaDaVos commented Jan 11, 2025 •

edited

Loading

ThaDaVos commented Jan 11, 2025 •

edited

Loading

ThaDaVos commented Jan 11, 2025 •

edited

Loading

ThaDaVos commented Jan 13, 2025 •

edited

Loading

ThaDaVos commented Jan 13, 2025 •

edited

Loading

ThaDaVos commented Jan 13, 2025 •

edited

Loading