@developer_tribe/react-builder 1.2.18 → 1.2.20

package/src/pages/DebugJsonPage.tsx

@@ -1,10 +1,17 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { Node } from '../types/Node';
+import type { NodeData, NodeDefaultAttribute } from '../types/Node';
 import type { AppConfig } from '../types/PreviewConfig';
 import { Checkbox } from '../components/Checkbox';
 import { JsonTextEditor } from '../components/JsonTextEditor';
 import { analyseAndProccess } from '../utils/analyseNode';
 import { logRenderStore } from '../utils/logRenderStore';
+import { useRenderStore } from '../store';
+import {
+  isNodeArray,
+  isNodeNullOrUndefined,
+  isNodeString,
+} from '../utils/nodeGuards';
 
 export type DebugJsonPageProps = {
   data: Node | null | undefined;
@@ -36,6 +43,7 @@ export function DebugJsonPage({
   setAppConfig,
   logLabel,
 }: DebugJsonPageProps) {
+  const setCurrent = useRenderStore((s) => s.setCurrent);
   const canTogglePreviewMode = typeof setPreviewMode === 'function';
   const canToggleTheme =
     typeof setAppConfig === 'function' && typeof appConfig?.theme === 'string';
@@ -43,6 +51,81 @@ export function DebugJsonPage({
     typeof setAppConfig === 'function' &&
     typeof (appConfig as any)?.isRtl !== 'undefined';
 
+  const isRecord = (v: unknown): v is Record<string, unknown> =>
+    typeof v === 'object' && v !== null && !Array.isArray(v);
+
+  const extractNode = (value: unknown): Node => {
+    // Allow both:
+    // - raw Node JSON
+    // - Project wrapper JSON { name, version, data: Node }
+    if (isRecord(value) && 'data' in value) {
+      return (value as any).data as Node;
+    }
+    return value as Node;
+  };
+
+  function isPlainObject(value: unknown): value is Record<string, unknown> {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+  }
+
+  function migrateStyleToStyles(node: Node): Node {
+    if (isNodeNullOrUndefined(node) || isNodeString(node)) {
+      return node;
+    }
+    if (isNodeArray(node)) {
+      const arr = node as Node[];
+      return arr.map((n) => migrateStyleToStyles(n));
+    }
+    if (!isPlainObject(node)) {
+      return node;
+    }
+
+    const record = node as unknown as NodeData<NodeDefaultAttribute>;
+    const nextChildren = migrateStyleToStyles(record.children);
+
+    if (!isPlainObject(record.attributes)) {
+      return { ...record, children: nextChildren };
+    }
+
+    const attrs = { ...record.attributes };
+    if ('style' in attrs && isPlainObject(attrs.style)) {
+      attrs.styles = attrs.style;
+      delete attrs.style;
+    }
+
+    return {
+      ...record,
+      children: nextChildren,
+      attributes: attrs,
+    };
+  }
+
+  const hasStyleAttribute = useMemo(() => {
+    function checkNode(n: Node): boolean {
+      if (isNodeNullOrUndefined(n) || isNodeString(n)) return false;
+      if (isNodeArray(n)) {
+        const arr = n as Node[];
+        return arr.some(checkNode);
+      }
+      if (!isPlainObject(n)) return false;
+      const record = n as unknown as NodeData<NodeDefaultAttribute>;
+      if (isPlainObject(record.attributes) && 'style' in record.attributes) {
+        return true;
+      }
+      return checkNode(record.children);
+    }
+    return checkNode(data);
+  }, [data]);
+
+  const handleFixStyleToStyles = () => {
+    if (!data) return;
+    const migrated = migrateStyleToStyles(data);
+    // Don't call analyseAndProccess here - let the user apply changes manually
+    // This avoids validation errors for unknown attributes that may exist
+    setData(migrated as Node);
+    setCurrent(migrated as Node);
+  };
+
   return (
     <>
       <div className="modal__header localication-modal__header">
@@ -72,6 +155,17 @@ export function DebugJsonPage({
           Log store
         </button>
 
+        {hasStyleAttribute ? (
+          <button
+            type="button"
+            className="editor-button"
+            title="Migrate attributes.style to attributes.styles (schemaVersion=2)"
+            onClick={handleFixStyleToStyles}
+          >
+            Fix style → styles
+          </button>
+        ) : null}
+
         {onClose ? (
           <button
             type="button"
@@ -123,9 +217,15 @@ export function DebugJsonPage({
           <JsonTextEditor
             rootName="node"
             value={data ?? ({} as any)}
-            onChange={(next) =>
-              setData(analyseAndProccess(next as Node) as Node)
-            }
+            onChange={(next) => {
+              const nodeCandidate = extractNode(next);
+              const processed = analyseAndProccess(
+                nodeCandidate as Node,
+              ) as Node;
+              setData(processed);
+              // Keep selection in sync with the new root.
+              setCurrent(processed);
+            }}
             className="localication-modal__json-editor"
           />
         </div>

package/src/pages/ProjectDebug.tsx

@@ -5,25 +5,7 @@ import type { Node } from '../types/Node';
 import type { Product } from '../paywall/types/paywall-types';
 import type { PaywallBenefits } from '../paywall/types/benefits';
 import { useSyncHtmlThemeClass } from '../hooks/useSyncHtmlThemeClass';
-
-function safeStringify(value: unknown): string {
-  try {
-    const seen = new WeakSet<object>();
-    return JSON.stringify(
-      value,
-      (_key, v) => {
-        if (typeof v === 'object' && v !== null) {
-          if (seen.has(v as object)) return '[Circular]';
-          seen.add(v as object);
-        }
-        return v;
-      },
-      2,
-    );
-  } catch (e) {
-    return `<< Unable to stringify value: ${String(e)} >>`;
-  }
-}
+import { safeJsonStringify } from '../utils/safeJsonStringify';
 
 async function copyTextToClipboard(text: string): Promise<boolean> {
   try {
@@ -68,6 +50,24 @@ function isObject(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
 
+function extractNodeFromRawData(rawData: unknown): unknown {
+  // Support both:
+  // - raw node JSON (root has `type`)
+  // - full project JSON (root has `data`)
+  if (isObject(rawData)) {
+    if (typeof rawData.type === 'string' && rawData.type.trim()) return rawData;
+    const maybeData = rawData.data;
+    if (
+      isObject(maybeData) &&
+      typeof maybeData.type === 'string' &&
+      maybeData.type.trim()
+    ) {
+      return maybeData;
+    }
+  }
+  return rawData;
+}
+
 function getNodeType(value: unknown): string | null {
   if (!isObject(value)) return null;
   const t = value.type;
@@ -132,6 +132,14 @@ export type ProjectDebugProps = {
   benefits: PaywallBenefits;
   canvasBg?: string;
   belowName?: ReactNode;
+  jsonEditor?: {
+    value: string;
+    onChange: (next: string) => void;
+    error?: string | null;
+    onSave?: () => void;
+    saveDisabled?: boolean;
+    saveLabel?: string;
+  };
 };
 
 export function ProjectDebug({
@@ -143,6 +151,7 @@ export function ProjectDebug({
   benefits,
   canvasBg,
   belowName,
+  jsonEditor,
 }: ProjectDebugProps) {
   useSyncHtmlThemeClass();
   const [previewError, setPreviewError] = useState<{
@@ -155,16 +164,18 @@ export function ProjectDebug({
     'idle',
   );
 
-  const json = useMemo(() => safeStringify(rawData), [rawData]);
-  const previewData = rawData as Node;
-  const rootType = useMemo(() => getNodeType(rawData), [rawData]);
+  const json = useMemo(() => safeJsonStringify(rawData), [rawData]);
+  const jsonToCopy = jsonEditor ? jsonEditor.value : json;
+  const nodeRoot = useMemo(() => extractNodeFromRawData(rawData), [rawData]);
+  const previewData = nodeRoot as Node;
+  const rootType = useMemo(() => getNodeType(nodeRoot), [nodeRoot]);
   const parsedValidation = useMemo(
     () => parseValidationPrefix(validationError),
     [validationError],
   );
   const validationContext = useMemo(
-    () => resolveNodeTypeAtPath(rawData, parsedValidation.path),
-    [rawData, parsedValidation.path],
+    () => resolveNodeTypeAtPath(nodeRoot, parsedValidation.path),
+    [nodeRoot, parsedValidation.path],
   );
 
   const validationSummary = useMemo(() => {
@@ -241,7 +252,7 @@ export function ProjectDebug({
             type="button"
             className="editor-button"
             onClick={async () => {
-              const ok = await copyTextToClipboard(json);
+              const ok = await copyTextToClipboard(jsonToCopy);
               if (!ok) return;
               setJsonCopyState('copied');
               window.setTimeout(() => setJsonCopyState('idle'), 900);
@@ -249,13 +260,40 @@ export function ProjectDebug({
           >
             {jsonCopyState === 'copied' ? 'Copied JSON' : 'Copy JSON'}
           </button>
+          {jsonEditor?.onSave && (
+            <button
+              type="button"
+              className="editor-button"
+              disabled={jsonEditor.saveDisabled}
+              onClick={() => jsonEditor.onSave?.()}
+            >
+              {jsonEditor.saveLabel ?? 'Save'}
+            </button>
+          )}
         </div>
         {belowName && (
           <div className="rb-project-debug__below-name">{belowName}</div>
         )}
-        <pre className="rb-project-debug__code" tabIndex={0}>
-          {json}
-        </pre>
+        {jsonEditor ? (
+          <>
+            <textarea
+              className="rb-project-debug__code-editor"
+              value={jsonEditor.value}
+              onChange={(e) => jsonEditor.onChange(e.target.value)}
+              spellCheck={false}
+              aria-label="Edit JSON"
+            />
+            {jsonEditor.error ? (
+              <div className="rb-project-debug__json-error" role="alert">
+                {jsonEditor.error}
+              </div>
+            ) : null}
+          </>
+        ) : (
+          <pre className="rb-project-debug__code" tabIndex={0}>
+            {json}
+          </pre>
+        )}
       </section>
 
       <section

package/src/pages/ProjectMigrationPage.tsx

@@ -9,6 +9,7 @@ export type ProjectMigrationPageProps = {
 
   projectVersion: string;
   requiredVersion: string;
+  showFixVersionMeta?: boolean;
 
   pendingMigrations: Array<{
     id: string;
@@ -25,6 +26,7 @@ export type ProjectMigrationPageProps = {
   migrating?: boolean;
   onContinueWithoutValidation?: () => void;
   onMigrateNow?: () => void;
+  onFixVersionMeta?: () => void;
 };
 
 export function ProjectMigrationPage({
@@ -32,6 +34,7 @@ export function ProjectMigrationPage({
   rawData,
   projectVersion,
   requiredVersion,
+  showFixVersionMeta,
   pendingMigrations,
   products,
   benefits,
@@ -40,6 +43,7 @@ export function ProjectMigrationPage({
   migrating,
   onContinueWithoutValidation,
   onMigrateNow,
+  onFixVersionMeta,
 }: ProjectMigrationPageProps) {
   const message = `Migration required: project version ${projectVersion} is lower than ${requiredVersion}.`;
 
@@ -78,6 +82,17 @@ export function ProjectMigrationPage({
               {migrating ? 'Migrating…' : 'Migrate now'}
             </button>
 
+            {showFixVersionMeta && (
+              <button
+                type="button"
+                className="editor-button"
+                disabled={!!migrating}
+                onClick={() => onFixVersionMeta?.()}
+              >
+                Fix version meta
+              </button>
+            )}
+
             <button
               type="button"
               className="editor-button"

package/src/pages/ProjectPage.tsx

@@ -36,6 +36,8 @@ import {
 import type { Fonts } from '../types/Fonts';
 import { useProjectFonts } from '../hooks/useProjectFonts';
 import { resolveProjectForSave } from './projectPageUtils';
+import { getDefaultProject } from '../utils/getDefaultProject';
+import { CURRENT_PROJECT_VERSION } from '../migrations/migratePipe';
 export type ProjectPageProps = {
   project: Project;
   onSaveProject: (project: Project) => void;
@@ -75,10 +77,6 @@ export function ProjectPage({
     typography.fonts.find((f) => f?.isMain)?.name ??
     typography.fonts[0]?.name;
   useProjectFonts({ fonts: typography.fonts, appFont: resolvedAppFont });
-  const resolvedName = name ?? project.name;
-  const resolvedProjectColors = projectColors ?? project.projectColors;
-  const isEmptyProjectData =
-    isNodeNullOrUndefined(project.data) || isEmptyObject(project.data);
   // useRenderStore will be removed
   const {
     current,
@@ -103,10 +101,15 @@ export function ProjectPage({
   }));
   const resolvedAppConfig = appConfig ?? storeAppConfig ?? defaultAppConfig;
   const [overrideProject, setOverrideProject] = useState<Project | null>(null);
+  const activeProject = overrideProject ?? project;
+  const resolvedName = name ?? activeProject.name;
+  const resolvedProjectColors = projectColors ?? activeProject.projectColors;
+  const isEmptyProjectData =
+    isNodeNullOrUndefined(activeProject.data) ||
+    isEmptyObject(activeProject.data);
   const [editorData, setEditorData] = useState<Node>(() => {
-    if (!isEmptyProjectData) return null;
-    // Empty project should start in a usable state (no loader / no error).
-    return analyseAndProccess({ type: 'Main', children: [] }) as Node;
+    // Empty project: keep data null-ish, show empty state.
+    return null;
   });
   const [validationError, setValidationError] = useState<string | null>(null);
   const [validationErrorStack, setValidationErrorStack] = useState<
@@ -221,7 +224,7 @@ export function ProjectPage({
     setMinLoadingDelayDone(false);
     const timer = setTimeout(() => setMinLoadingDelayDone(true), 1000);
     return () => clearTimeout(timer);
-  }, [project.data]);
+  }, [activeProject.data]);
 
   useEffect(() => {
     try {
@@ -234,7 +237,7 @@ export function ProjectPage({
       setValidationError(null);
       setValidationErrorStack(null);
       // Version gate: if project is older than the current schema, show migration UI.
-      const pipe = getMigrationPipe(project);
+      const pipe = getMigrationPipe(activeProject);
       if (!bypassValidation && pipe.required) {
         setMigrationGate(pipe);
         setEditorData(null);
@@ -245,13 +248,17 @@ 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(project.data as unknown as Node);
-        setCurrent(project.data as unknown as Node);
+        setEditorData(activeProject.data as unknown as Node);
+        setCurrent(activeProject.data as unknown as Node);
         return;
       }
-      const inputNode: Node = isEmptyProjectData
-        ? { type: 'Main', children: [] }
-        : (project.data as Node);
+      if (isEmptyProjectData) {
+        setEditorData(null);
+        setCurrent(null);
+        return;
+      }
+
+      const inputNode: Node = activeProject.data as Node;
 
       const processed = analyseAndProccess(inputNode);
       if (!processed) return;
@@ -268,7 +275,7 @@ export function ProjectPage({
       setEditorData(null);
       setCurrent(null);
     }
-  }, [project, project.data, bypassValidation, setCurrent]);
+  }, [activeProject, activeProject.data, bypassValidation, setCurrent]);
 
   const showLoading =
     !isEmptyProjectData && (editorData === null || !minLoadingDelayDone);
@@ -322,9 +329,10 @@ export function ProjectPage({
       {migrationGate ? (
         <ProjectMigrationPage
           name={resolvedName}
-          rawData={project.data}
+          rawData={activeProject}
           projectVersion={migrationGate.projectVersion}
           requiredVersion={migrationGate.requiredVersion}
+          showFixVersionMeta={migrationGate.projectVersion === '0.0.0'}
           pendingMigrations={migrationGate.pending.map((m) => ({
             id: m.id,
             title: m.title,
@@ -338,15 +346,37 @@ export function ProjectPage({
           onContinueWithoutValidation={() => {
             setBypassValidation(true);
             setMigrationGate(null);
-            setEditorData(project.data as unknown as Node);
-            setCurrent(project.data as unknown as Node);
+            setEditorData(activeProject.data as unknown as Node);
+            setCurrent(activeProject.data as unknown as Node);
             setMinLoadingDelayDone(true);
           }}
           onMigrateNow={() => {
             try {
               setIsMigrating(true);
+              const isRecord = (v: unknown): v is Record<string, unknown> =>
+                typeof v === 'object' && v !== null && !Array.isArray(v);
+              const isNodeLike = (v: unknown): v is { type: string } =>
+                isRecord(v) &&
+                typeof v.type === 'string' &&
+                v.type.trim().length > 0;
+
+              // If the incoming "project" is actually a raw Node (no version),
+              // wrap it into a valid Project shape before migrating/saving.
+              const projectForMigration: Project =
+                isNodeLike(activeProject) &&
+                !(
+                  isRecord(activeProject) &&
+                  typeof (activeProject as any).version === 'string'
+                )
+                  ? getDefaultProject({
+                      name: `imported-${Math.random().toString(36).slice(2, 8)}`,
+                      version: CURRENT_PROJECT_VERSION,
+                      data: activeProject as unknown as Node,
+                    })
+                  : activeProject;
+
               const { project: migratedProject } =
-                runProjectMigrations(project);
+                runProjectMigrations(projectForMigration);
               onSaveProject(migratedProject);
               setOverrideProject(migratedProject);
               setBypassValidation(true);
@@ -358,11 +388,61 @@ export function ProjectPage({
               setIsMigrating(false);
             }
           }}
+          onFixVersionMeta={() => {
+            const isRecord = (v: unknown): v is Record<string, unknown> =>
+              typeof v === 'object' && v !== null && !Array.isArray(v);
+            const isNodeLike = (v: unknown): v is { type: string } =>
+              isRecord(v) &&
+              typeof v.type === 'string' &&
+              v.type.trim().length > 0;
+            const isAllowedProjectType = (
+              v: unknown,
+            ): v is 'paywall' | 'onboard' | 'other' =>
+              v === 'paywall' || v === 'onboard' || v === 'other';
+
+            const fixedName =
+              typeof (activeProject as any)?.name === 'string' &&
+              String((activeProject as any).name).trim()
+                ? String((activeProject as any).name).trim()
+                : `imported-${Math.random().toString(36).slice(2, 8)}`;
+
+            const activeAny = (
+              isRecord(activeProject) ? activeProject : null
+            ) as Record<string, unknown> | null;
+            const nodeCandidate = (
+              activeAny && 'data' in activeAny
+                ? (activeAny as any).data
+                : isNodeLike(activeProject)
+                  ? (activeProject as unknown as Node)
+                  : null
+            ) as Node | null;
+
+            const fixedProject = getDefaultProject({
+              name: fixedName,
+              version: CURRENT_PROJECT_VERSION,
+              data: nodeCandidate,
+              appConfig: (activeAny as any)?.appConfig,
+              projectColors: (activeAny as any)?.projectColors,
+              type: isAllowedProjectType((activeAny as any)?.type)
+                ? ((activeAny as any).type as any)
+                : undefined,
+            });
+
+            // This action only fixes project metadata. It intentionally does NOT
+            // validate/normalize node data (it might still be invalid).
+            onSaveProject(fixedProject);
+            setOverrideProject(fixedProject);
+            setBypassValidation(false);
+            setMigrationGate(null);
+            setValidationError(null);
+            setValidationErrorStack(null);
+            toast.success('Fixed version meta');
+          }}
         />
       ) : validationError ? (
         <ProjectValidationPage
           name={resolvedName}
-          rawData={project.data}
+          rawData={activeProject}
           validationError={validationError}
           validationErrorStack={validationErrorStack ?? undefined}
           products={products}
@@ -372,10 +452,67 @@ export function ProjectPage({
             setBypassValidation(true);
             setValidationError(null);
             setValidationErrorStack(null);
-            setEditorData(project.data as unknown as Node);
-            setCurrent(project.data as unknown as Node);
+            setEditorData(activeProject.data as unknown as Node);
+            setCurrent(activeProject.data as unknown as Node);
             setMinLoadingDelayDone(true);
           }}
+          onSaveEditedRawData={(nextRawData) => {
+            try {
+              const isRecord = (v: unknown): v is Record<string, unknown> =>
+                typeof v === 'object' && v !== null && !Array.isArray(v);
+
+              // Accept both:
+              // - a raw Node (what the app uses internally)
+              // - a full Project-like wrapper { name, version, data: Node }
+              const parsed = nextRawData;
+              let nodeCandidate: unknown = parsed;
+              let nextName: string | undefined;
+              let nextVersion: string | undefined;
+
+              if (isRecord(parsed) && 'data' in parsed) {
+                nodeCandidate = (parsed as Record<string, unknown>).data;
+                const maybeName = (parsed as Record<string, unknown>).name;
+                const maybeVersion = (parsed as Record<string, unknown>)
+                  .version;
+                if (typeof maybeName === 'string') nextName = maybeName;
+                if (typeof maybeVersion === 'string')
+                  nextVersion = maybeVersion;
+              }
+
+              const processed = analyseAndProccess(nodeCandidate as Node);
+              if (!processed) throw new Error('Node is not valid');
+
+              const nextProject: Project = {
+                ...activeProject,
+                ...(nextName ? { name: nextName } : null),
+                ...(nextVersion ? { version: nextVersion } : null),
+                data: nodeCandidate as Project['data'],
+              };
+
+              onSaveProject(nextProject);
+              setOverrideProject(nextProject);
+              setBypassValidation(false);
+              setValidationError(null);
+              setValidationErrorStack(null);
+              setEditorData(processed);
+              setCurrent(processed);
+              setMinLoadingDelayDone(true);
+              toast.success('Saved');
+            } catch (e) {
+              logger.error(
+                'ProjectPage',
+                'save JSON from validation failed',
+                e,
+              );
+              setValidationError(
+                e instanceof Error ? e.message : 'Node is not valid',
+              );
+              setValidationErrorStack(
+                e instanceof Error ? (e.stack ?? null) : null,
+              );
+              toast.error('Save failed');
+            }
+          }}
         />
       ) : (
         <>
@@ -477,7 +614,7 @@ export function ProjectPage({
                 </div>
               )}
               {/* NOTE: In React Native, `products` should come from an IAP wrapper (e.g. `react-native-iap`). */}
-              {!showLoading && editorData && (
+              {!showLoading && (
                 <RenderPage
                   data={editorData}
                   name={resolvedName}