Using with the <script setup> format.

arthurwolf commented 5 months ago

(absolutely amazing project)

All my views use the newer (and I think I remember recommended) VueJS format <script setup lang='ts'> thing: https://vuejs.org/api/sfc-script-setup.html

They look something like this:

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

They're neater and more compact, and I use them in all my views so I can't really switch back just for this project.

When I try to use the example provided with baklavajs,

<template>
    <!--
        By default, the editor completely fills its parent HTML element.
        If you directly use the editor in the <body> element, make sure to use
        a wrapper <div> with specified width and height properties:
        <div style="width: 90vw; height: 90vh">
            <baklava-editor :view-model="baklava" />
        </div>
    -->
    <baklava-editor :view-model="baklava" />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { EditorComponent, useBaklava } from "@baklavajs/renderer-vue";
import "@baklavajs/themes/dist/syrup-dark.css";

export default defineComponent({
    components: {
        "baklava-editor": EditorComponent,
    },
    setup() {
        const baklava = useBaklava();
        return { baklava };
    },
});
</script>

it doesn't work...

How can I get it to work ? (if I get help/figure it out, I can make a PR to add this to the docs if you want)

Thanks a lot in advance.

PS:

I think I might have gotten a first step to work with

const props = defineProps<{
    "baklava-editor": typeof EditorComponent,
}>()

I don't know if it's actually working or not as nothing is displayed. I try to create a graph following the docs with:

// file: MyNode.ts
import { defineNode, NodeInterface, NumberInterface, SelectInterface } from "baklavajs";

export default defineNode({
    type: "MyNode",
    inputs: {
        number1: () => new NumberInterface("Number", 1),
        number2: () => new NumberInterface("Number", 10),
        operation: () => new SelectInterface("Operation", "Add", ["Add", "Subtract"]).setPort(false),
    },
    outputs: {
        output: () => new NodeInterface("Output", 0),
    },
});

and that in turn fails:

`<script setup>` cannot contain ES module exports.eslint[vue/no-export-in-script-setup](https://eslint.vuejs.org/rules/no-export-in-script-setup.html)
A module cannot have multiple default exports.ts(2528)

arthurwolf commented 5 months ago

Update: Found a working example syntax in another issue:

https://github.com/newcat/baklavajs/issues/221

If you want me to do a PR to the repo adding the newer script setup syntax below the older one, tell me and I'll do it.

Also looking for info about whether this is the right way to do it, and a bit worried maybe I'll run into trouble further down the road and won't have this template/example to guide me anymore.

Cheers.

newcat commented 5 months ago

Updated in v2.4.1

newcat / baklavajs

Using with the <script setup> format. #385