Vue 3 Support

[FelixZett]

Hello there,
are there currently any plans on supporting Vue 3? At the moment there seems to be a problem with the new plugin registration. Adding baklavajs to a brand new Vue 3(-CLI) project like so:

import { createApp } from 'vue'
import App from './App.vue'

import { BaklavaVuePlugin } from "@baklavajs/plugin-renderer-vue";
import "@baklavajs/plugin-renderer-vue/dist/styles.css";

createApp(App)
  .use(BaklavaVuePlugin)
  .mount('#app')

results in a runtime error when calling the app:

index.js?0c30:146 Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at extendStatics (index.js?0c30:146)
    at __extends (index.js?0c30:150)
    at eval (index.js?0c30:1428)
    at Object.eval (index.js?0c30:1728)
    at __webpack_require__ (index.js?0c30:30)
    at Object.eval (index.js?0c30:1409)
    at __webpack_require__ (index.js?0c30:30)
    at Object.eval (index.js?0c30:1379)
    at __webpack_require__ (index.js?0c30:30)

[newcat]

Hi Felix, the Vue 3 rework is actually in progress and will be released with Baklava V2. However, as Baklava V2 is basically a complete rewrite of the project, it still takes some time. In the meantime I will have a look if I can release a Vue 3 compatible version of Baklava V1 using the new Vue Migration Build.

[newcat]

Good news: I finally managed to create a version of Baklava v1 for Vue 3. After many failed attempts to do it with the Migration Build, I decided to try it without - and it pretty much worked out of the box.

There are two new packages that support Vue 3:

• @baklavajs/plugin-options-vue3
• @baklavajs/plugin-renderer-vue3

All the other @baklavajs/... packages are compatible with Vue 3, so there are no separate packages for them.

How to get started

1. Unfortunately, using the bundled baklavajs package is not possible for Vue 3 at the moment. To install Baklava, you need to install the packages separately. For example npm install @baklavajs/core @baklavajs/plugin-options-vue3 @baklavajs/plugin-renderer-vue3
2. Register the Vue plugin inside your main.js or main.ts (make sure to not forget the 3 at the end of the package name):

import { createApp } from "vue";
import App from "./App.vue";

import { BaklavaVuePlugin } from "@baklavajs/plugin-renderer-vue3";
import "@baklavajs/plugin-renderer-vue3/dist/styles.css";

createApp(App).use(BaklavaVuePlugin).mount("#app");

3. Now you should be able to use everything like in Vue 2.

Known Issues

• The @baklavajs/plugin-renderer-vue3 package currently has a dependency on @baklavajs/events@1.9.2, which doesn't exist. When installing using Yarn, you can select the correct version 1.8.2. I haven't tested it with npm.

I have tested the basic functionality, but I couldn't test it as much as I did for Vue 2, since all my projects using Baklava are based on Vue 2. So I just tested using the playground.

Please try the new packages in your Vue 3 projects and report any bugs in this issue.

[FelixZett]

Great! Thanks for looking into it, I will test the renderer in our Vue 3 project

[simonrenger]

@newcat is the source code somewhere ? I would kind need it since I need to modify stuff especially in the context menu? Also having the context menu as a extra plugin would be really useful.

[newcat]

Yes, the code can be found on the vue3 branch. The context menu component in particular can be found here: https://github.com/newcat/baklavajs/blob/vue3/packages/baklavajs-plugin-renderer-vue/src/components/ContextMenu.vue

I have pretty much scrapped the idea of the context menu in Baklava v2 and instead replaced it with a toolbar, where you can add custom actions. Therefore I probably won't change the system in v1 anymore unless it's super critical for you.

[TigerHix]

It seems dragging/panning/zooming are not working on Vue 3.2.25 with Vite 2.9.9. I have no clue what may cause this, but here's a repro project:

broken.zip

[newcat]

Very strange indeed. I can reproduce it but so far I have no clue why this happens. I published a new version of the Vue 3 specific packages where they are built using Vue 3.2.33 but it didn't fix the issue. So I'll have to look deeper into it.

[TigerHix]

Very strange indeed. I can reproduce it but so far I have no clue why this happens. I published a new version of the Vue 3 specific packages where they are built using Vue 3.2.33 but it didn't fix the issue. So I'll have to look deeper into it.

Thanks for looking into it! The v2 branch worked for me though - not sure if it could be some dependency issue.

[zpfz]

Very strange indeed. I can reproduce it but so far I have no clue why this happens. I published a new version of the Vue 3 specific packages where they are built using Vue 3.2.33 but it didn't fix the issue. So I'll have to look deeper into it.

Hi~ bro~ thanks for the great project first ! Will multi-lang be added into the project?such as Add Node in right click on menu( i want to change the Add Node into other text). And the nodes is supported changing color like this ->litegraph.js demo

[asdfjupyter]

Hi @newcat and all, thanks very much for the nice package and porting to vue3, but strangely, once I created the template based on the example here:

https://codesandbox.io/s/baklavajs-example-forked-byj64o?file=/src/MathNode.js

and the instructions about vue3, I got the following error in the browser console:

SyntaxError: import not found: Node

It seems the Node class and Nodebuilder class from @baklavajs/core cannot be imported. Anyone else encountered such issue?

Thanks a ton!

[umaxiaotian]

Very strange indeed. I can reproduce it but so far I have no clue why this happens. I published a new version of the Vue 3 specific packages where they are built using Vue 3.2.33 but it didn't fix the issue. So I'll have to look deeper into it.

Hi~ bro~ thanks for the great project first ! Will multi-lang be added into the project?such as Add Node in right click on menu( i want to change the Add Node into other text). And the nodes is supported changing color like this ->litegraph.js demo

Use patch-package in this case.

STEP1, Install Patch-Package on npm
STEP2, Add Setting in package.json patch-package
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"patch": "patch-package", //<==ADD
"postinstall": "nuxt prepare"
},
STEP3, Edit directly inside node-modules.
STEP4, npx patch-package @baklavajs/plugin-renderer-vue3
STEP5, yarn patch
STEP6, yarn dev
https://bagelee.com/programming/javascript-2/patch-package/

Now you can translate it into any language you like.

example:
umaxiaotian/obaflow@301d62b

[umaxiaotian]

@newcat
I found a bug in the VUE3 module.
The focus of the textbox cannot be released after renaming.

STEP1

STEP2

STEP3

[umaxiaotian]

@newcat
The ADD Node submenu also cannot be unfocused...

[tpfau]

I can confirm that there seems to be an issue with unfocussing in the vue3 renderer. Essentially it seems like all components (whether it's nodes or menus) don't notice that they are unforcused.
You can have multiple Rename/delete menus open, one for each Node, and the if you edit the nod name, the editor only closes (i.e. goes back to a label) if you press enter in the label, but not if you click outside.
Has anyone done a patch for this?

[bulatgab]

@newcat
Hello! I would like to use baklavajs with Vue 2. Can I use v2? Or only v1?
Could you please clarify this in README? Thank you.

[newcat]

I'll close this issue - from now on, the only officially supported version in Vue 3 is BaklavaJS v2