@developer_tribe/react-builder 1.2.18 → 1.2.19

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}

package/src/pages/ProjectValidationPage.tsx

@@ -1,7 +1,10 @@
-import type { ReactNode } from 'react';
+import { type ReactNode, useEffect, useState } from 'react';
 import type { Product } from '../paywall/types/paywall-types';
 import type { PaywallBenefits } from '../paywall/types/benefits';
 import { ProjectDebug } from './ProjectDebug';
+import { safeJsonStringify } from '../utils/safeJsonStringify';
+import type { Node } from '../types/Node';
+import { wrapNodeInMain } from '../utils/wrapNodeInMain';
 
 export type ProjectValidationPageProps = {
   name: string;
@@ -13,6 +16,7 @@ export type ProjectValidationPageProps = {
   canvasBg?: string;
   belowName?: ReactNode;
   onContinueWithoutValidation?: () => void;
+  onSaveEditedRawData?: (nextRawData: unknown) => void;
 };
 
 export function ProjectValidationPage({
@@ -25,7 +29,40 @@ export function ProjectValidationPage({
   canvasBg,
   belowName,
   onContinueWithoutValidation,
+  onSaveEditedRawData,
 }: ProjectValidationPageProps) {
+  const [jsonText, setJsonText] = useState<string>(() =>
+    safeJsonStringify(rawData),
+  );
+  const [jsonParseError, setJsonParseError] = useState<string | null>(null);
+
+  const wrapInMain = () => {
+    try {
+      const parsed = JSON.parse(jsonText) as unknown;
+      const isRecord = (v: unknown): v is Record<string, unknown> =>
+        typeof v === 'object' && v !== null && !Array.isArray(v);
+
+      const nodeCandidate: unknown =
+        isRecord(parsed) && 'data' in parsed ? (parsed as any).data : parsed;
+
+      const wrapped = wrapNodeInMain(nodeCandidate as Node);
+      const nextValue =
+        isRecord(parsed) && 'data' in parsed
+          ? { ...(parsed as any), data: wrapped }
+          : wrapped;
+
+      setJsonText(JSON.stringify(nextValue, null, 2));
+      setJsonParseError(null);
+    } catch (e) {
+      setJsonParseError(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  useEffect(() => {
+    setJsonText(safeJsonStringify(rawData));
+    setJsonParseError(null);
+  }, [rawData]);
+
   return (
     <ProjectDebug
       name={name}
@@ -35,6 +72,25 @@ export function ProjectValidationPage({
       products={products}
       benefits={benefits}
       canvasBg={canvasBg}
+      jsonEditor={{
+        value: jsonText,
+        onChange: (next) => {
+          setJsonText(next);
+          setJsonParseError(null);
+        },
+        error: jsonParseError,
+        onSave: () => {
+          try {
+            const parsed = JSON.parse(jsonText) as unknown;
+            setJsonParseError(null);
+            onSaveEditedRawData?.(parsed);
+          } catch (e) {
+            setJsonParseError(e instanceof Error ? e.message : String(e));
+          }
+        },
+        saveDisabled: !onSaveEditedRawData,
+        saveLabel: 'Save JSON',
+      }}
       belowName={
         <>
           <div className="rb-project-validation__actions">
@@ -45,6 +101,13 @@ export function ProjectValidationPage({
             >
               Continue without validation
             </button>
+            <button
+              type="button"
+              className="editor-button"
+              onClick={() => wrapInMain()}
+            >
+              Wrap in Main
+            </button>
           </div>
           {belowName}
         </>

package/src/styles/layout/_project-validation.scss

@@ -163,6 +163,35 @@
   background: colors.$canvasColor;
 }
 
+.rb-project-debug__code-editor {
+  @include card;
+  width: 100%;
+  margin: 0;
+  padding: sizes.$spaceCozy;
+  border: 1px solid colors.$borderColor;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre;
+  overflow: auto;
+  resize: vertical;
+  min-height: 220px;
+  max-height: calc(100vh - 60px - 160px);
+  background: colors.$canvasColor;
+  color: colors.$textColor;
+}
+
+.rb-project-debug__json-error {
+  margin: sizes.$spaceTight 0 0 0;
+  font-size: 12px;
+  line-height: 1.35;
+  color: colors.$dangerColor;
+  font-weight: 600;
+  word-break: break-word;
+}
+
 /* Legacy selectors kept for backward compatibility (no-op if unused) */
 .rb-project-validation__error {
   margin: 0 0 sizes.$spaceCozy 0;

package/src/utils/__special_exceptions.ts

@@ -69,9 +69,15 @@ export function normalizeNodeForValidation(
 
   const recordData = node as NodeData<NodeDefaultAttribute>;
 
-  const attributes = isPlainObject(recordData.attributes)
-    ? (normalizeUnknownValue(recordData.attributes) as Record<string, unknown>)
-    : recordData.attributes;
+  let attributes: unknown = recordData.attributes;
+  // Common persisted mistake: attributes saved as an empty array (`[]`).
+  // Treat it as "no attributes" rather than failing validation.
+  if (Array.isArray(attributes) && attributes.length === 0) {
+    attributes = {};
+  }
+  attributes = isPlainObject(attributes)
+    ? (normalizeUnknownValue(attributes) as Record<string, unknown>)
+    : attributes;
 
   const children =
     recordData.children !== undefined

package/src/utils/applyJsonTransform.ts

@@ -0,0 +1,19 @@
+export type ApplyJsonTransformResult =
+  | { ok: true; nextText: string; nextValue: unknown }
+  | { ok: false; error: string };
+
+export function applyJsonTransform(args: {
+  text: string;
+  transform: (value: unknown) => unknown;
+  indent?: number;
+}): ApplyJsonTransformResult {
+  const { text, transform, indent = 2 } = args;
+  try {
+    const parsed = JSON.parse(text) as unknown;
+    const nextValue = transform(parsed);
+    const nextText = JSON.stringify(nextValue, null, indent);
+    return { ok: true, nextText, nextValue };
+  } catch (e) {
+    return { ok: false, error: e instanceof Error ? e.message : String(e) };
+  }
+}

package/src/utils/repairNodeKeys.ts

@@ -0,0 +1,90 @@
+import type { Node, NodeData } from '../types/Node';
+import { generateRandomKeyForNode } from './generateRandomKeyForNode';
+
+function isNodeDataLike(value: unknown): value is NodeData {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    !Array.isArray(value) &&
+    'type' in (value as any) &&
+    'children' in (value as any)
+  );
+}
+
+function normalizeKey(value: unknown): string | undefined {
+  if (typeof value !== 'string') return undefined;
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : undefined;
+}
+
+function collectNodeKeysInto(node: Node, keys: Set<string>) {
+  if (node === null || node === undefined) return;
+  if (typeof node === 'string') return;
+  if (Array.isArray(node)) {
+    node.forEach((child) => collectNodeKeysInto(child, keys));
+    return;
+  }
+  if (!isNodeDataLike(node)) return;
+
+  const key = normalizeKey(node.key);
+  if (key) keys.add(key);
+  collectNodeKeysInto(node.children as Node, keys);
+}
+
+export function collectNodeKeys(root: Node): Set<string> {
+  const keys = new Set<string>();
+  collectNodeKeysInto(root, keys);
+  return keys;
+}
+
+function generateUniqueKey(type: string, usedKeys: Set<string>): string {
+  let next = '';
+  do {
+    next = generateRandomKeyForNode(type || 'Node');
+  } while (usedKeys.has(next));
+  return next;
+}
+
+/**
+ * Ensures that all NodeData-like records in the tree have unique non-empty `key`s.
+ * - Missing keys are generated.
+ * - Duplicate keys (against `usedKeys`) are repaired by generating a new unique key.
+ * - Non NodeData-like objects are left untouched.
+ *
+ * `usedKeys` is mutated by design (to track uniqueness across recursion).
+ */
+export function repairNodeKeys(
+  root: Node,
+  usedKeys: Set<string> = new Set(),
+): Node {
+  if (root === null || root === undefined) return root;
+  if (typeof root === 'string') return root;
+
+  if (Array.isArray(root)) {
+    let changed = false;
+    const next: Node[] = root.map((child): Node => {
+      const repaired: Node = repairNodeKeys(child, usedKeys);
+      if (repaired !== child) changed = true;
+      return repaired;
+    });
+    return changed ? next : root;
+  }
+
+  if (!isNodeDataLike(root)) return root;
+
+  const prev = root as NodeData;
+  const prevKey = normalizeKey(prev.key);
+  const needsNewKey = !prevKey || usedKeys.has(prevKey);
+  const nextKey = needsNewKey
+    ? generateUniqueKey(prev.type, usedKeys)
+    : prevKey;
+  usedKeys.add(nextKey);
+
+  const prevChildren = prev.children as Node;
+  const nextChildren = repairNodeKeys(prevChildren, usedKeys) as Node;
+
+  if (nextKey !== prevKey || nextChildren !== prevChildren) {
+    return { ...prev, key: nextKey, children: nextChildren } as Node;
+  }
+  return root;
+}

package/src/utils/safeJsonStringify.ts

@@ -0,0 +1,18 @@
+export function safeJsonStringify(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)} >>`;
+  }
+}

package/src/utils/wrapNodeInMain.ts

@@ -0,0 +1,67 @@
+import type { Node, NodeData } from '../types/Node';
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function isNodeData(value: unknown): value is NodeData {
+  return (
+    isRecord(value) && typeof value.type === 'string' && 'children' in value
+  );
+}
+
+function isMainLike(node: NodeData): boolean {
+  const t = node.type;
+  // Only treat actual Main nodes as "already wrapped".
+  // Some payloads may incorrectly carry `isMain: true` on non-Main nodes.
+  return t === 'Main' || t === 'main';
+}
+
+function stripNestedIsMain(node: Node, isRoot: boolean): Node {
+  if (node == null || typeof node === 'string') return node;
+
+  if (Array.isArray(node)) {
+    let changed = false;
+    const next = node.map((c) => {
+      const out = stripNestedIsMain(c, false);
+      if (out !== c) changed = true;
+      return out;
+    });
+    return changed ? next : node;
+  }
+
+  if (!isNodeData(node)) return node;
+
+  const prevChildren = node.children as Node;
+  const nextChildren = stripNestedIsMain(prevChildren, false);
+  const shouldDemote = node.isMain === true && !isRoot;
+
+  if (!shouldDemote && nextChildren === prevChildren) return node;
+
+  return {
+    ...(node as any),
+    ...(shouldDemote ? { isMain: false } : null),
+    children: nextChildren,
+  } as NodeData;
+}
+
+export function wrapNodeInMain(node: Node): NodeData {
+  if (isNodeData(node) && isMainLike(node)) {
+    // Ensure no nested nodes keep `isMain: true`.
+    const cleaned = stripNestedIsMain(node, true) as NodeData;
+    // Keep root as main.
+    if (cleaned.isMain !== true) return { ...(cleaned as any), isMain: true };
+    return cleaned;
+  }
+
+  const cleanedChild = stripNestedIsMain(node, false);
+  const children: Node =
+    node === null || typeof node === 'undefined' ? [] : cleanedChild;
+
+  return {
+    type: 'Main',
+    isMain: true,
+    attributes: {},
+    children,
+  };
+}