#385: Rename editor component export, change docs to use `<script set…

…up>`
newcat · Feb 18, 2024 · 67144cd · 67144cd
1 parent 8fbcbcf
commit 67144cd
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 36 deletions.
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -33,26 +33,17 @@ Now you can use Baklava in your Vue application:
         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" />
+            <BaklavaEditor :view-model="baklava" />
         </div>
     -->
-    <baklava-editor :view-model="baklava" />
+    <BaklavaEditor :view-model="baklava" />
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-import { EditorComponent, useBaklava } from "@baklavajs/renderer-vue";
+<script setup lang="ts">
+import { BaklavaEditor, 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 };
-    },
-});
+const baklava = useBaklava();
 </script>
 ```
 

diff --git a/docs/visual-editor/setup.md b/docs/visual-editor/setup.md
@@ -41,24 +41,22 @@ Now you can pass the view model to the editor component:
 
 ```vue
 <template>
-    <baklava-editor :view-model="baklava" />
+    <!--
+        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">
+            <BaklavaEditor :view-model="baklava" />
+        </div>
+    -->
+    <BaklavaEditor :view-model="baklava" />
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-import { EditorComponent, useBaklava } from "@baklavajs/renderer-vue";
-import "@baklavajs/themes/syrup-dark.css";
-
-export default defineComponent({
-    components: {
-        "baklava-editor": EditorComponent,
-    },
-    setup() {
-        const baklava = useBaklava();
-        return { baklava };
-    },
-});
-</script>
+<script setup lang="ts">
+import { BaklavaEditor, useBaklava } from "@baklavajs/renderer-vue";
+import "@baklavajs/themes/dist/syrup-dark.css";
+
+const baklava = useBaklava();
 ```
 
 ## Settings

diff --git a/packages/full/src/bundle.ts b/packages/full/src/bundle.ts
@@ -14,7 +14,7 @@ function createBaklava(element: Element): RendererVue.IBaklavaViewModel {
             return { viewModel };
         },
         render() {
-            return h(RendererVue.EditorComponent, { viewModel: this.viewModel });
+            return h(RendererVue.BaklavaEditor, { viewModel: this.viewModel });
         },
     }).mount(element);
 

diff --git a/packages/renderer-vue/playground/App.vue b/packages/renderer-vue/playground/App.vue
@@ -1,11 +1,11 @@
 <template>
     <div id="app">
-        <EditorComponent :view-model="baklavaView">
+        <BaklavaEditor :view-model="baklavaView">
             <template #node="nodeProps">
                 <CommentNodeRenderer v-if="nodeProps.node.type === 'CommentNode'" v-bind="nodeProps" />
                 <NodeComponent v-else v-bind="nodeProps" />
             </template>
-        </EditorComponent>
+        </BaklavaEditor>
         <button @click="calculate">Calculate</button>
         <button @click="save">Save</button>
         <button @click="load">Load</button>
@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
 import { NodeInstanceOf } from "@baklavajs/core";
-import { EditorComponent, Components, SelectInterface, useBaklava, Commands } from "../src";
+import { BaklavaEditor, Components, SelectInterface, useBaklava, Commands } from "../src";
 import { DependencyEngine, applyResult } from "@baklavajs/engine";
 import { BaklavaInterfaceTypes } from "@baklavajs/interface-types";
 
@@ -98,7 +98,7 @@ const calculate = async () => {
 
 const save = () => {
     const state = JSON.stringify(editor.save());
-    console.log('Saving to localstorage', state);
+    console.log("Saving to localstorage", state);
     window.localStorage.setItem("state", JSON.stringify(editor.save()));
 };
 
@@ -111,7 +111,7 @@ const load = () => {
 
     try {
         editor.load(JSON.parse(state));
-        console.log("Loaded state from localStorage")
+        console.log("Loaded state from localStorage");
     } catch (e) {
         console.error(e);
         return;

diff --git a/packages/renderer-vue/src/index.ts b/packages/renderer-vue/src/index.ts
@@ -2,7 +2,9 @@
  * @module @baklavajs/renderer-vue
  */
 
+/** @deprecated use `BaklavaEditor` instead */
 export { default as EditorComponent } from "./editor/Editor.vue";
+export { default as BaklavaEditor } from "./editor/Editor.vue";
 export * from "./commands";
 export * from "./nodeinterfaces";
 export * from "./viewModel";