How can I register a node with a custom vue component with Browser build? #348

seafloyd16 · 2023-12-07T17:16:56Z

seafloyd16
Dec 7, 2023

I am creating an Electron app.
Basically, Electron is using CommonJS so I cannot use, and If possible, I don't want to use ESModule Import and Export.
This is why I use the browser build.

This code is what I tried at first.
A button won't be appended to a node.

const {createApp, markRaw, defineComponent, ref} = Vue;
const {createBaklava, Engine, Core, RendererVue} = BaklavaJS;

const button = defineComponent
(
    {
        props:
        {
            modelValue:
            {
                type: Number,
                require: true,
            },
        },
        emit:['update:modelValur'],
        setup(props, {emit})
        {
            const count = () =>
            {
                emit('update:modelValue', props.modelValue + 1);
            };
            return {count};
        },
        template: `<button @click="count ++;">{{count}}</button>`,
    }
);

const nodeBTN = Core.defineNode
(
    {
        type: 'Button',
        inputs:
        {
            data: () => new Core.NodeInterface("My Interface", 0).setComponent(markRaw(button)).setPort(false)
        }
    }
);

const visualEditor = createBaklava($('#node')[0]);
const engine = new Engine.DependencyEngine(visualEditor.editor);
visualEditor.editor.registerNodeType(nodeBTN)

And then I tried this code:

const {createApp, markRaw, defineComponent, ref} = Vue;
const {createBaklava, Engine, Core, RendererVue} = BaklavaJS;

const button = defineComponent
(
    {
        props:
        {
            modelValue:
            {
                type: Number,
                require: true,
            },
        },
        emit:['update:modelValur'],
        setup(props, {emit})
        {
            const count = () =>
            {
                emit('update:modelValue', props.modelValue + 1);
            };
            return {count};
        },
        template: `<button @click="count ++;">{{count}}</button>`,
    }
);

const nodeBTN = Core.defineNode
(
    {
        type: 'Button',
        inputs:
        {
            data: () => new Core.NodeInterface("My Interface", 0).setComponent(markRaw(button)).setPort(false)
        }
    }
);

createApp
(
    {
        components:
        {
            'baklava-editor': RendererVue.EditorComponent,
        },
        setup()
        {
            const baklava = RendererVue.useBaklava();
            baklava.editor.registerNodeType(nodeBTN);
            return {baklava};
        },
    }
).mount('#node');

This gives me such an error:

TypeError: Cannot read properties of null (reading 'isCE')
    at Ae (baklavajs.js:12:13010)
    at Proxy.<anonymous> (baklavajs.js:12:102224)
    at hn (vue.global.prod.js:1:17868)
    at ve.fn (vue.global.prod.js:3:22336)
    at ve.run (vue.global.prod.js:1:6046)
    at L.e.update (vue.global.prod.js:3:22587)
    at L (vue.global.prod.js:3:22613)
    at M (vue.global.prod.js:3:21048)
    at F (vue.global.prod.js:3:19314)
    at y (vue.global.prod.js:3:16449)

Any solutions please?

Thank you.

newcat · 2024-01-24T22:12:35Z

newcat
Jan 24, 2024
Maintainer

When using template strings, you need to have a compiler included with the Vue build. The BaklavaJS bundle ships without that compiler included in its Vue build to save bundle size. Therefore, using template strings doesn't work in that case. Your example works when using render functions:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@baklavajs/[email protected]/dist/syrup-dark.css"
    />
    <style>
      html,
      body {
        margin: 0;
      }

      #editor {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="editor"></div>

    <script>
      var __VUE_PROD_DEVTOOLS__ = false;
    </script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle.js"></script>
    <script>
      const { createApp, markRaw, defineComponent, ref, h } = Vue;
      const { createBaklava, Engine, Core, RendererVue } = BaklavaJS;

      const button = defineComponent({
        props: {
          modelValue: {
            type: Number,
            required: true,
          },
        },
        emit: ["update:modelValue"],
        setup(props, { emit }) {
          const count = () => {
            emit("update:modelValue", props.modelValue + 1);
          };
          return () => h("button", { onClick: count }, props.modelValue);
        },
      });

      const nodeBTN = Core.defineNode({
        type: "Button",
        inputs: {
          data: () =>
            new Core.NodeInterface("My Interface", 0)
              .setComponent(markRaw(button))
              .setPort(false),
        },
      });

      const visualEditor = createBaklava(document.getElementById("editor"));
      const engine = new Engine.DependencyEngine(visualEditor.editor);
      visualEditor.editor.registerNodeType(nodeBTN);
    </script>
  </body>
</html>

Still, I wouldn't recommend using BaklavaJS's browser build - it is primarily designed for quick testing and tinkering, not for building production apps.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How can I register a node with a custom vue component with Browser build? #348

{{title}}

Replies: 1 comment

{{title}}

Select a reply

How can I register a node with a custom vue component with Browser build? #348

seafloyd16 Dec 7, 2023

Replies: 1 comment

newcat Jan 24, 2024 Maintainer

seafloyd16
Dec 7, 2023

newcat
Jan 24, 2024
Maintainer