@developer_tribe/react-builder 1.2.24 → 1.2.25

package/src/pages/ProjectPage.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { Node, NodeData } from '../types/Node';
-import type { Project, ProjectColors } from '../types/Project';
+import type { Project, ProjectColors, ProjectMeta } from '../types/Project';
 import { ToastContainer, toast } from 'react-toastify';
 import { RenderPage } from '../RenderPage';
 import { EditorHeader } from '../components/EditorHeader';
@@ -31,16 +31,16 @@ import {
   deleteNodeFromTree,
   findNodeByKey,
   isNodeRecord,
-  nodeHasChild,
 } from '../utils/nodeTree';
 import type { Fonts } from '../types/Fonts';
 import { useProjectFonts } from '../hooks/useProjectFonts';
-import { resolveProjectForSave } from './projectPageUtils';
+import { resolveProjectForSave, toProjectMeta } from './projectPageUtils';
 import { getDefaultProject } from '../utils/getDefaultProject';
 import { CURRENT_PROJECT_VERSION } from '../migrations/migratePipe';
 export type ProjectPageProps = {
   project: Project;
-  onSaveProject: (project: Project) => void;
+  // TODO: Tüm onSaveProject call-site'ları toProjectMeta kullanacak şekilde migrate et
+  onSaveProject: (project: ProjectMeta) => void;
   appConfig?: AppConfig;
   logLevel?: LogLevel;
   projectColors?: ProjectColors;
@@ -151,14 +151,15 @@ export function ProjectPage({
         return;
       }
 
-      if (isNodeRecord(current) && nodeHasChild(current, nodeToDelete)) {
-        const currentKey = current.key;
-        if (currentKey) {
-          const nextCurrent = findNodeByKey(updated, currentKey);
-          setCurrent(nextCurrent ?? updated);
-        } else {
-          setCurrent(updated);
-        }
+      // Refresh current's reference so the Builder re-renders the updated subtree.
+      // deleteNodeFromTree creates new objects for ancestors of the removed node,
+      // so the old `current` reference becomes stale when the deleted node was a
+      // descendant of `current`.
+      if (isNodeRecord(current) && current.key) {
+        const nextCurrent = findNodeByKey(updated, current.key);
+        setCurrent(nextCurrent ?? updated);
+      } else {
+        setCurrent(updated);
       }
     },
     [editorData, current],
@@ -226,8 +227,26 @@ export function ProjectPage({
     return () => clearTimeout(timer);
   }, [activeProject.data]);
 
+  // Ref for the full project (used inside effect for migration check etc.)
+  const activeProjectRef = useRef(activeProject);
+  activeProjectRef.current = activeProject;
+  // Ref for current editorData so the effect can compare without depending on it.
+  const editorDataRef = useRef(editorData);
+  editorDataRef.current = editorData;
+
   useEffect(() => {
     try {
+      const currentProject = activeProjectRef.current;
+      const projectData = currentProject.data;
+
+      // Guard: skip reinit when the incoming project data is the same reference
+      // we already hold in editorData. After a save round-trip the parent pushes
+      // a new project object whose .data is the very same reference as editorData.
+      // Re-processing it would flash a loading state and discard in-flight changes.
+      if (projectData != null && projectData === editorDataRef.current) {
+        return;
+      }
+
       // Reset to "loading" immediately on project change so the loader is shown
       // until a valid node is available (and for at least 2 seconds).
       if (!isEmptyProjectData) {
@@ -237,7 +256,7 @@ export function ProjectPage({
       setValidationError(null);
       setValidationErrorStack(null);
       // Version gate: if project is older than the current schema, show migration UI.
-      const pipe = getMigrationPipe(activeProject);
+      const pipe = getMigrationPipe(currentProject);
       if (!bypassValidation && pipe.required) {
         setMigrationGate(pipe);
         setEditorData(null);
@@ -248,8 +267,8 @@ export function ProjectPage({
       if (bypassValidation) {
         // Best-effort: let the user continue with the raw data even if invalid.
         // This may still crash the preview, but it unblocks users for debugging.
-        setEditorData(activeProject.data as Node);
-        setCurrent(activeProject.data as Node);
+        setEditorData(currentProject.data as Node);
+        setCurrent(currentProject.data as Node);
         return;
       }
       if (isEmptyProjectData) {
@@ -258,7 +277,7 @@ export function ProjectPage({
         return;
       }
 
-      const inputNode: Node = activeProject.data as Node;
+      const inputNode: Node = currentProject.data as Node;
 
       const processed = analyseAndProccess(inputNode);
       if (!processed) return;
@@ -275,7 +294,9 @@ export function ProjectPage({
       setEditorData(null);
       setCurrent(null);
     }
-  }, [activeProject, activeProject.data, bypassValidation, setCurrent]);
+    // Note: depend on activeProject.data (not activeProject object) to avoid
+    // reinit when the project wrapper changes but data is the same reference.
+  }, [activeProject.data, isEmptyProjectData, bypassValidation, setCurrent]);
 
   const showLoading =
     !isEmptyProjectData && (editorData === null || !minLoadingDelayDone);
@@ -300,13 +321,15 @@ export function ProjectPage({
             if (onSaveProjectColors && resolvedProjectColors) {
               onSaveProjectColors(resolvedProjectColors);
             }
-            onSaveProject(
+            const projectMeta = toProjectMeta(
               resolveProjectForSave({
                 project,
                 overrideProject,
                 data: editorData,
               }),
             );
+            logger.info('ProjectPage', 'saving project meta', projectMeta);
+            onSaveProject(projectMeta);
             toast.success('Saved');
           } catch (e) {
             logger.error('ProjectPage', 'save project failed', e);
@@ -377,7 +400,7 @@ export function ProjectPage({
 
               const { project: migratedProject } =
                 runProjectMigrations(projectForMigration);
-              onSaveProject(migratedProject);
+              onSaveProject(toProjectMeta(migratedProject));
               setOverrideProject(migratedProject);
               setBypassValidation(true);
               setMigrationGate(null);
@@ -430,7 +453,7 @@ export function ProjectPage({
 
             // This action only fixes project metadata. It intentionally does NOT
             // validate/normalize node data (it might still be invalid).
-            onSaveProject(fixedProject);
+            onSaveProject(toProjectMeta(fixedProject));
             setOverrideProject(fixedProject);
             setBypassValidation(false);
             setMigrationGate(null);
@@ -488,7 +511,7 @@ export function ProjectPage({
                 data: nodeCandidate as Project['data'],
               };
 
-              onSaveProject(nextProject);
+              onSaveProject(toProjectMeta(nextProject));
               setOverrideProject(nextProject);
               setBypassValidation(false);
               setValidationError(null);

package/src/pages/projectPageUtils.ts

@@ -1,4 +1,4 @@
-import type { Project } from '../types/Project';
+import type { Project, ProjectMeta } from '../types/Project';
 import type { Node } from '../types/Node';
 import { getDefaultProject } from '../utils/getDefaultProject';
 
@@ -13,3 +13,17 @@ export function resolveProjectForSave(args: {
     data: args.data,
   });
 }
+
+/**
+ * Strips a full Project down to its essential persistence fields.
+ * Use before handing the project to onSaveProject so consumers only
+ * receive the canonical metadata (name, version, type, data).
+ */
+export function toProjectMeta(project: Project): ProjectMeta {
+  return {
+    name: project.name,
+    version: project.version,
+    ...(project.type ? { type: project.type } : {}),
+    data: project.data,
+  };
+}

package/src/types/Project.ts

@@ -29,6 +29,13 @@ export interface ProjectBase<T> {
 
 export interface Project extends ProjectBase<Node> {}
 
+/**
+ * Lightweight subset of Project containing only the essential metadata
+ * needed for persistence (name, version, type, data).
+ * Excludes runtime/editor-only fields like appConfig and projectColors.
+ */
+export type ProjectMeta = Pick<Project, 'name' | 'version' | 'type' | 'data'>;
+
 export type LogLevel = 'NONE' | 'ERROR' | 'WARN' | 'INFO' | 'VERBOSE';
 
 export type LogSource = string;

package/src/utils/patterns.ts

@@ -48,6 +48,8 @@ type Pattern = {
   schemaVersion: number;
   pattern: {
     type: string;
+    title?: string;
+    description?: string;
     children: unknown;
     attributes?: Record<string, string | string[]>;
   };