@developer_tribe/react-builder 1.0.8 → 1.0.9

package/src/pages/ProjectDebug.tsx

@@ -0,0 +1,331 @@
+import { type ReactNode, useMemo, useState } from 'react';
+import { RenderPage } from '../RenderPage';
+import { BuilderProvider } from '../components/BuilderProvider';
+import { RenderErrorBoundary } from '../components/RenderErrorBoundary';
+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)} >>`;
+  }
+}
+
+async function copyTextToClipboard(text: string): Promise<boolean> {
+  try {
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+    // fall through to legacy method
+  }
+
+  try {
+    if (typeof document === 'undefined') return false;
+    const el = document.createElement('textarea');
+    el.value = text;
+    el.setAttribute('readonly', 'true');
+    el.style.position = 'fixed';
+    el.style.opacity = '0';
+    document.body.appendChild(el);
+    el.select();
+    const ok = document.execCommand('copy');
+    document.body.removeChild(el);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+
+function parseValidationPrefix(message: string): {
+  path?: string;
+  reason: string;
+} {
+  const idx = message.indexOf(': ');
+  if (idx <= 0) return { reason: message };
+  const maybePath = message.slice(0, idx);
+  const reason = message.slice(idx + 2);
+  if (maybePath.startsWith('root')) return { path: maybePath, reason };
+  return { reason: message };
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function getNodeType(value: unknown): string | null {
+  if (!isObject(value)) return null;
+  const t = value.type;
+  return typeof t === 'string' && t ? t : null;
+}
+
+function getFirstComponentFromReactStack(
+  componentStack?: string,
+): string | null {
+  if (!componentStack) return null;
+  const match = componentStack.match(/\bat\s+([A-Za-z0-9_$]+)/);
+  return match?.[1] ?? null;
+}
+
+function resolveNodeTypeAtPath(
+  root: unknown,
+  path?: string,
+): { nodeType?: string; nodePath?: string } {
+  if (!path || !path.startsWith('root')) return {};
+  let current: unknown = root;
+  let lastNodeType: string | null = getNodeType(current);
+  let lastNodePath: string | null = lastNodeType ? 'root' : null;
+
+  const rest = path === 'root' ? '' : path.replace(/^root\.?/, '');
+  const re = /([A-Za-z0-9_$]+)|\[(\d+)\]/g;
+  let m: RegExpExecArray | null;
+  let cursorPath = 'root';
+
+  // Traverse and remember the last object node that had a `type` field.
+  while ((m = re.exec(rest))) {
+    const prop = m[1];
+    const idx = m[2];
+
+    if (prop) {
+      cursorPath = `${cursorPath}.${prop}`;
+      if (isObject(current)) current = current[prop];
+      else current = undefined;
+    } else if (idx != null) {
+      cursorPath = `${cursorPath}[${idx}]`;
+      if (Array.isArray(current)) current = current[Number(idx)];
+      else current = undefined;
+    }
+
+    const t = getNodeType(current);
+    if (t) {
+      lastNodeType = t;
+      lastNodePath = cursorPath;
+    }
+  }
+
+  return lastNodeType
+    ? { nodeType: lastNodeType, nodePath: lastNodePath ?? undefined }
+    : {};
+}
+
+export type ProjectDebugProps = {
+  name: string;
+  rawData: unknown;
+  validationError: string;
+  validationErrorStack?: string;
+  products: Product[];
+  benefits: PaywallBenefits;
+  canvasBg?: string;
+  belowName?: ReactNode;
+};
+
+export function ProjectDebug({
+  name,
+  rawData,
+  validationError,
+  validationErrorStack,
+  products,
+  benefits,
+  canvasBg,
+  belowName,
+}: ProjectDebugProps) {
+  useSyncHtmlThemeClass();
+  const [previewError, setPreviewError] = useState<{
+    message: string;
+    stack?: string;
+    componentStack?: string;
+  } | null>(null);
+  const [jsonCopyState, setJsonCopyState] = useState<'idle' | 'copied'>('idle');
+  const [errorCopyState, setErrorCopyState] = useState<'idle' | 'copied'>(
+    'idle',
+  );
+
+  const json = useMemo(() => safeStringify(rawData), [rawData]);
+  const previewData = rawData as Node;
+  const rootType = useMemo(() => getNodeType(rawData), [rawData]);
+  const parsedValidation = useMemo(
+    () => parseValidationPrefix(validationError),
+    [validationError],
+  );
+  const validationContext = useMemo(
+    () => resolveNodeTypeAtPath(rawData, parsedValidation.path),
+    [rawData, parsedValidation.path],
+  );
+
+  const validationSummary = useMemo(() => {
+    const lines: string[] = [];
+    lines.push(parsedValidation.reason);
+    if (rootType) lines.push(`Root component: ${rootType}`);
+    if (parsedValidation.path) lines.push(`Path: ${parsedValidation.path}`);
+    if (validationContext.nodeType) {
+      lines.push(
+        `Component at path: ${validationContext.nodeType}${
+          validationContext.nodePath ? ` (${validationContext.nodePath})` : ''
+        }`,
+      );
+    }
+    return lines.join('\n');
+  }, [
+    parsedValidation.reason,
+    parsedValidation.path,
+    rootType,
+    validationContext.nodeType,
+    validationContext.nodePath,
+  ]);
+
+  const renderSummary = useMemo(() => {
+    if (!previewError) return null;
+    const lines: string[] = [];
+    lines.push(previewError.message);
+    if (rootType) lines.push(`Root component: ${rootType}`);
+    if (previewError.componentStack) {
+      lines.push(
+        `Component (from React stack): ${
+          getFirstComponentFromReactStack(previewError.componentStack) ??
+          'unknown'
+        }`,
+      );
+    }
+    return lines.join('\n');
+  }, [previewError, rootType]);
+
+  const fullErrorReport = useMemo(() => {
+    const parts: string[] = [];
+    parts.push('=== Validation ===');
+    parts.push(validationSummary);
+    if (validationErrorStack) {
+      parts.push('');
+      parts.push(validationErrorStack);
+    }
+    if (previewError) {
+      parts.push('');
+      parts.push('=== Render ===');
+      if (renderSummary) parts.push(renderSummary);
+      if (previewError.stack) {
+        parts.push('');
+        parts.push(previewError.stack);
+      }
+      if (previewError.componentStack) {
+        parts.push('');
+        parts.push(previewError.componentStack);
+      }
+    }
+    return parts.join('\n');
+  }, [previewError, renderSummary, validationErrorStack, validationSummary]);
+
+  return (
+    <div className="rb-project-debug">
+      <section className="rb-project-debug__json" aria-label="Debug JSON">
+        <div className="rb-project-debug__meta">
+          <div>
+            <span className="rb-project-debug__meta-label">Name:</span> {name}
+          </div>
+        </div>
+        <div className="rb-project-debug__toolbar">
+          <button
+            type="button"
+            className="editor-button"
+            onClick={async () => {
+              const ok = await copyTextToClipboard(json);
+              if (!ok) return;
+              setJsonCopyState('copied');
+              window.setTimeout(() => setJsonCopyState('idle'), 900);
+            }}
+          >
+            {jsonCopyState === 'copied' ? 'Copied JSON' : 'Copy JSON'}
+          </button>
+        </div>
+        {belowName && (
+          <div className="rb-project-debug__below-name">{belowName}</div>
+        )}
+        <pre className="rb-project-debug__code" tabIndex={0}>
+          {json}
+        </pre>
+      </section>
+
+      <section
+        className="rb-project-debug__preview"
+        aria-label="Preview"
+        style={{
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          ['--rb-canvas-bg' as any]: canvasBg ?? 'none',
+        }}
+      >
+        <BuilderProvider params={{ products, benefits }}>
+          <RenderErrorBoundary
+            subtitle="caught by ProjectDebug preview"
+            onError={(e, componentStack) =>
+              setPreviewError({
+                message: e?.message ?? String(e),
+                stack: e?.stack,
+                componentStack,
+              })
+            }
+          >
+            <RenderPage data={previewData} name={name} />
+          </RenderErrorBoundary>
+        </BuilderProvider>
+      </section>
+
+      <section className="rb-project-debug__error" aria-label="Errors">
+        <div className="rb-project-debug__error-head">
+          <h2 className="rb-project-debug__title">Errors</h2>
+          <button
+            type="button"
+            className="editor-button"
+            onClick={async () => {
+              const ok = await copyTextToClipboard(fullErrorReport);
+              if (!ok) return;
+              setErrorCopyState('copied');
+              window.setTimeout(() => setErrorCopyState('idle'), 900);
+            }}
+          >
+            {errorCopyState === 'copied' ? 'Copied' : 'Copy'}
+          </button>
+        </div>
+        <div className="rb-project-debug__error-block">
+          <div className="rb-project-debug__error-label">Validation</div>
+          <pre className="rb-project-debug__error-pre">{validationSummary}</pre>
+          {validationErrorStack && (
+            <pre className="rb-project-debug__error-pre">
+              {validationErrorStack}
+            </pre>
+          )}
+        </div>
+
+        {previewError && (
+          <div className="rb-project-debug__error-block">
+            <div className="rb-project-debug__error-label">Render</div>
+            <pre className="rb-project-debug__error-pre">{renderSummary}</pre>
+            {previewError.stack && (
+              <pre className="rb-project-debug__error-pre">
+                {previewError.stack}
+              </pre>
+            )}
+            {previewError.componentStack && (
+              <pre className="rb-project-debug__error-pre">
+                {previewError.componentStack}
+              </pre>
+            )}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

package/src/pages/ProjectMigrationPage.tsx

@@ -0,0 +1,92 @@
+import type { ReactNode } from 'react';
+import type { Product } from '../paywall/types/paywall-types';
+import type { PaywallBenefits } from '../paywall/types/benefits';
+import { ProjectDebug } from './ProjectDebug';
+
+export type ProjectMigrationPageProps = {
+  name: string;
+  rawData: unknown;
+
+  projectVersion: string;
+  requiredVersion: string;
+
+  pendingMigrations: Array<{
+    id: string;
+    title: string;
+    fromVersion: string;
+    toVersion: string;
+  }>;
+
+  products: Product[];
+  benefits: PaywallBenefits;
+  canvasBg?: string;
+  belowName?: ReactNode;
+
+  migrating?: boolean;
+  onContinueWithoutValidation?: () => void;
+  onMigrateNow?: () => void;
+};
+
+export function ProjectMigrationPage({
+  name,
+  rawData,
+  projectVersion,
+  requiredVersion,
+  pendingMigrations,
+  products,
+  benefits,
+  canvasBg,
+  belowName,
+  migrating,
+  onContinueWithoutValidation,
+  onMigrateNow,
+}: ProjectMigrationPageProps) {
+  const message = `Migration required: project version ${projectVersion} is lower than ${requiredVersion}.`;
+
+  const stack = [
+    `Required: ${requiredVersion}`,
+    `Current: ${projectVersion}`,
+    '',
+    'Pending migrations:',
+    ...(pendingMigrations.length
+      ? pendingMigrations.map(
+          (m) => `- ${m.id} (${m.fromVersion} -> ${m.toVersion}): ${m.title}`,
+        )
+      : ['- (none)']),
+  ].join('\n');
+
+  return (
+    <ProjectDebug
+      name={name}
+      rawData={rawData}
+      validationError={message}
+      validationErrorStack={stack}
+      products={products}
+      benefits={benefits}
+      canvasBg={canvasBg}
+      belowName={
+        <>
+          <div className="rb-project-validation__actions">
+            <button
+              type="button"
+              className="editor-button"
+              disabled={!!migrating}
+              onClick={() => onMigrateNow?.()}
+            >
+              {migrating ? 'Migrating…' : 'Migrate now'}
+            </button>
+
+            <button
+              type="button"
+              className="editor-button"
+              onClick={() => onContinueWithoutValidation?.()}
+            >
+              Continue without migration
+            </button>
+          </div>
+          {belowName}
+        </>
+      }
+    />
+  );
+}