fix: empty block handling + duplicate toasts on component save

Author: ruchamahabal

frontend/src/components/AppComponent.vue

@@ -57,7 +57,7 @@ import { computed, onMounted, ref, useAttrs, inject, type ComputedRef } from "vu
 import type { ComponentPublicInstance } from "vue"
 import { useRouter } from "vue-router"
 import { createResource } from "frappe-ui"
-import { getComponentRoot, isHTML } from "@/utils/helpers"
+import { getComponentRoot, isHTML, isObjectEmpty } from "@/utils/helpers"
 import { useScreenSize } from "@/utils/useScreenSize"
 import { isDynamicValue } from "@/utils/code"
 
@@ -108,7 +108,7 @@ const evaluationContext = computed(() => {
 })
 
 const getComponentProps = () => {
-	if (!props.block || props.block.isRoot()) return []
+	if (isObjectEmpty(props.block) || props.block.isRoot()) return []
 
 	const propValues = props.block.getPropsAndAttributes()
 	Object.entries(propValues).forEach(([propName, propValue]) => {
@@ -123,7 +123,7 @@ const getComponentProps = () => {
 
 // 2-way binding
 const vModelListeners = computed(() => {
-	if (!props.block || props.block.isRoot()) return {}
+	if (isObjectEmpty(props.block) || props.block.isRoot()) return {}
 
 	const listeners: Record<string, Function> = {}
 	const propValues = props.block.getPropsAndAttributes()

frontend/src/components/StudioComponent.vue

@@ -119,7 +119,7 @@ import ComponentEditor from "@/components/ComponentEditor.vue"
 
 import Block from "@/utils/block"
 import useCanvasStore from "@/stores/canvasStore"
-import { getComponentRoot, isHTML } from "@/utils/helpers"
+import { getComponentRoot, isHTML, isObjectEmpty } from "@/utils/helpers"
 import { isDynamicValue } from "@/utils/code"
 
 import type { CanvasProps } from "@/types/StudioCanvas"
@@ -184,7 +184,7 @@ const evaluationContext = computed(() => {
 })
 
 const getComponentProps = () => {
-	if (!props.block || props.block.isRoot()) return []
+	if (isObjectEmpty(props.block) || props.block.isRoot()) return []
 
 	const propValues = props.block.getPropsAndAttributes()
 	Object.entries(propValues).forEach(([propName, propValue]) => {
@@ -199,7 +199,7 @@ const getComponentProps = () => {
 
 // 2-way binding
 const vModelListeners = computed(() => {
-	if (!props.block || props.block.isRoot()) return {}
+	if (isObjectEmpty(props.block) || props.block.isRoot()) return {}
 
 	const listeners: Record<string, Function> = {}
 	const propValues = props.block.getPropsAndAttributes()

frontend/src/components/StudioComponentEditorWrapper.vue

@@ -17,7 +17,7 @@ const componentEditorStore = useComponentEditorStore()
 const componentBlock = computed(() => componentEditorStore.studioComponentBlock!)
 
 const componentContext = computed(() => {
-	const context = componentBlock.value.getPropsAndAttributes()
+	const context = componentBlock.value?.getPropsAndAttributes() || {}
 	componentEditorStore.componentInputs.forEach((input) => {
 		if (!(input.input_name in context) && input.default !== undefined) {
 			context[input.input_name] = input.default

frontend/src/components/StudioComponentRenderer.vue

@@ -18,7 +18,7 @@ const componentStore = useComponentStore()
 const codeStore = useCodeStore()
 
 const componentContext = computed(() => {
-	const context = props.studioComponent.getPropsAndAttributes()
+	const context = props.studioComponent?.getPropsAndAttributes() || {}
 	const componentDoc = componentStore.getComponentDoc(props.studioComponent.componentName)
 	if (componentDoc?.inputs) {
 		componentDoc.inputs.forEach((input: any) => {

frontend/src/components/StudioComponentWrapper.vue

@@ -18,7 +18,7 @@ const componentStore = useComponentStore()
 const codeStore = useCodeStore()
 
 const componentContext = computed(() => {
-	const context = props.studioComponent.getPropsAndAttributes()
+	const context = props.studioComponent?.getPropsAndAttributes() || {}
 	const componentDoc = componentStore.getComponentDoc(props.studioComponent.componentName)
 	if (componentDoc?.inputs) {
 		componentDoc.inputs.forEach((input: any) => {

frontend/src/pages/StudioPage.vue

@@ -199,7 +199,9 @@ watchEffect(() => {
 
 async function saveFragmentMode() {
 	canvasStore.fragmentData.saveAction?.(fragmentCanvas.value?.getRootBlock())
-	toast.success(`${canvasStore.fragmentData.fragmentName} saved successfully`)
+	if (canvasStore.editingMode === "fragment") {
+		toast.success(`${canvasStore.fragmentData.fragmentName} saved successfully`)
+	}
 }
 
 const debouncedPageSave = useDebounceFn(store.savePage, 300)