astro-tractstack 2.0.0-rc.0

package/templates/src/utils/compositor/typeGuards.ts

@@ -0,0 +1,193 @@
+import type { PlayerJS } from '@/types/tractstack';
+import type {
+  BaseNode,
+  PaneNode,
+  LinkNode,
+  StoryFragmentNode,
+  PaneFragmentNode,
+  MarkdownPaneFragmentNode,
+  FlatNode,
+  ArtpackImageNode,
+  BgImageNode,
+  Tag,
+} from '@/types/compositorTypes';
+
+interface BreakData {
+  collection: string;
+  image: string;
+  svgFill: string;
+}
+
+interface BreakNode extends FlatNode {
+  breakDesktop: BreakData;
+  breakTablet: BreakData;
+  breakMobile: BreakData;
+}
+
+export const isBreakNode = (node: FlatNode | null): node is BreakNode => {
+  return (
+    node?.nodeType === 'BgPane' &&
+    'type' in node &&
+    node.type === 'visual-break'
+  );
+};
+
+export const isArtpackImageNode = (
+  node: BaseNode | PaneFragmentNode | null
+): node is ArtpackImageNode => {
+  return (
+    node !== null &&
+    node.nodeType === 'BgPane' &&
+    'type' in node &&
+    node.type === 'artpack-image'
+  );
+};
+
+export const isBgImageNode = (
+  node: BaseNode | PaneFragmentNode | null
+): node is BgImageNode => {
+  return (
+    node !== null &&
+    node.nodeType === 'BgPane' &&
+    'type' in node &&
+    node.type === 'background-image'
+  );
+};
+
+export const isPaneNode = (node: BaseNode | undefined): node is PaneNode => {
+  return node?.nodeType === 'Pane';
+};
+
+export const isCodeHookPaneNode = (
+  node: BaseNode | undefined
+): node is PaneNode => {
+  return node?.nodeType === 'Pane' && `codeHookTarget` in node;
+};
+
+export const isContextPaneNode = (
+  node: BaseNode | undefined
+): node is PaneNode & { isContextPane: boolean } => {
+  return Boolean(
+    node?.nodeType === 'Pane' &&
+      'isContextPane' in node &&
+      typeof node.isContextPane === 'boolean' &&
+      node.isContextPane
+  );
+};
+
+export const isStoryFragmentNode = (
+  node: BaseNode | null
+): node is StoryFragmentNode => {
+  return node?.nodeType === 'StoryFragment';
+};
+
+export const isMarkdownPaneFragmentNode = (
+  node: BaseNode | PaneFragmentNode | null
+): node is MarkdownPaneFragmentNode => {
+  return (
+    node !== null &&
+    node.nodeType === 'Markdown' &&
+    'type' in node &&
+    node.type === 'markdown'
+  );
+};
+
+interface WidgetNode extends FlatNode {
+  tagName: 'code';
+  codeHookParams: (string | string[])[];
+  copy: string;
+}
+
+export const isWidgetNode = (
+  node: BaseNode | FlatNode | null
+): node is WidgetNode => {
+  return (
+    node !== null &&
+    'tagName' in node &&
+    node.tagName === 'code' &&
+    'codeHookParams' in node &&
+    Array.isArray(node.codeHookParams)
+  );
+};
+
+export function hasTagName(
+  node: BaseNode | null | undefined
+): node is FlatNode {
+  return node !== null && node !== undefined && 'tagName' in node;
+}
+
+export function isDefined<T>(node: T | null | undefined): node is T {
+  return node !== null && node !== undefined;
+}
+
+export function isValidTag(tagName: string): tagName is Tag {
+  const validTags: Tag[] = [
+    'modal',
+    'parent',
+    'p',
+    'h2',
+    'h3',
+    'h4',
+    'img',
+    'li',
+    'ol',
+    'ul',
+    'signup',
+    'yt',
+    'bunny',
+    'belief',
+    'identify',
+    'toggle',
+    'code',
+  ];
+  return validTags.includes(tagName as Tag);
+}
+
+export function toTag(str: string): Tag | null {
+  return isValidTag(str) ? str : null;
+}
+
+export function hasSpecificTag(
+  node: BaseNode | null | undefined,
+  tag: Tag
+): node is FlatNode {
+  return hasTagName(node) && node.tagName === tag;
+}
+
+export const isLinkNode = (
+  node: BaseNode | FlatNode | null
+): node is LinkNode => {
+  return (
+    node !== null &&
+    'tagName' in node &&
+    (node.tagName === 'a' || node.tagName === 'button')
+  );
+};
+
+export function hasButtonPayload(node: BaseNode): node is LinkNode {
+  return (
+    'tagName' in node &&
+    (node.tagName === 'a' || node.tagName === 'button') &&
+    'buttonPayload' in node &&
+    node.buttonPayload !== undefined
+  );
+}
+
+export const hasBeliefPayload = (node: BaseNode): boolean =>
+  ('heldBeliefs' in node && Object.keys(node.heldBeliefs || {}).length > 0) ||
+  ('withheldBeliefs' in node &&
+    Object.keys(node.withheldBeliefs || {}).length > 0);
+
+export const getType = (node: BaseNode | FlatNode): string => {
+  let type = node.nodeType as string;
+  if ('tagName' in node) {
+    type = node.tagName;
+  }
+  return type;
+};
+
+export function hasPlayerJS(
+  window: Window
+): window is Window & { playerjs: PlayerJS } {
+  return 'playerjs' in window;
+}

package/templates/src/utils/etl/extractor.ts

@@ -0,0 +1,119 @@
+import type { NodesContext } from '@/stores/nodes';
+import type { PaneNode, BaseNode } from '@/types/compositorTypes';
+
+const VERBOSE = false;
+
+export interface PaneSubtree {
+  paneNode: PaneNode;
+  allChildNodes: BaseNode[];
+  relationships: Map<string, string[]>;
+}
+
+export function extractPaneSubtree(
+  ctx: NodesContext,
+  paneId: string
+): PaneSubtree {
+  if (VERBOSE) console.log('🔍 EXTRACTOR START - paneId:', paneId);
+
+  let actualPaneId = paneId;
+  const startNode = ctx.allNodes.get().get(paneId);
+
+  // If we got a StoryFragment, find the first child Pane
+  if (startNode?.nodeType === 'StoryFragment') {
+    const allNodes = Array.from(ctx.allNodes.get().values());
+    const childPanes = allNodes.filter(
+      (node) => node.nodeType === 'Pane' && node.parentId === paneId
+    );
+
+    if (childPanes.length > 0) {
+      actualPaneId = childPanes[0].id;
+      if (VERBOSE)
+        console.log(
+          '📌 EXTRACTOR - Converting StoryFragment to actual pane:',
+          actualPaneId
+        );
+    } else {
+      throw new Error(`No Pane found under StoryFragment ${paneId}`);
+    }
+  }
+
+  const paneNode = ctx.allNodes.get().get(actualPaneId) as PaneNode;
+  if (!paneNode || paneNode.nodeType !== 'Pane') {
+    console.error('❌ EXTRACTOR ERROR - Pane node not found:', actualPaneId);
+    throw new Error(`Pane node not found: ${actualPaneId}`);
+  }
+
+  if (VERBOSE)
+    console.log('✅ EXTRACTOR - Found pane node:', {
+      id: paneNode.id,
+      nodeType: paneNode.nodeType,
+      title: paneNode.title,
+      isDecorative: paneNode.isDecorative,
+      bgColour: paneNode.bgColour,
+    });
+
+  // --- START: REPLACEMENT FOR getNodesRecursively ---
+  // Use a safe, non-recursive breadth-first traversal to gather all descendant
+  // nodes, which preserves the correct sibling order.
+  const allDescendantNodes: BaseNode[] = [];
+  const queue: string[] = [...ctx.getChildNodeIDs(paneNode.id)]; // Start queue with direct children
+
+  while (queue.length > 0) {
+    const currentId = queue.shift();
+    if (!currentId) continue;
+
+    const currentNode = ctx.allNodes.get().get(currentId);
+    if (currentNode) {
+      allDescendantNodes.push(currentNode);
+      // Add this node's children to the end of the queue to continue the traversal
+      const childrenIds = ctx.getChildNodeIDs(currentId);
+      queue.push(...childrenIds);
+    }
+  }
+  // --- END: REPLACEMENT FOR getNodesRecursively ---
+
+  if (VERBOSE)
+    console.log(
+      '📋 EXTRACTOR - All nodes from new traversal:',
+      allDescendantNodes.map((n) => ({ id: n.id, nodeType: n.nodeType }))
+    );
+
+  // Filter out Pane and StoryFragment nodes - only include actual content nodes
+  const allChildNodes = allDescendantNodes.filter(
+    (node) => node.nodeType !== 'Pane' && node.nodeType !== 'StoryFragment'
+  );
+
+  if (VERBOSE)
+    console.log(
+      '🎯 EXTRACTOR - Filtered child nodes (NO Pane/StoryFragment):',
+      allChildNodes.map((n) => ({
+        id: n.id,
+        nodeType: n.nodeType,
+        tagName: (n as any).tagName,
+        copy: (n as any).copy,
+      }))
+    );
+
+  // Extract relationships using existing parentNodes structure
+  const relationships = new Map<string, string[]>();
+  const parentNodes = ctx.parentNodes.get();
+  parentNodes.forEach((children, parentId) => {
+    relationships.set(parentId, [...children]);
+  });
+
+  if (VERBOSE)
+    console.log(
+      '🔗 EXTRACTOR - Relationships:',
+      Object.fromEntries(relationships)
+    );
+
+  const result = { paneNode, allChildNodes, relationships };
+  if (VERBOSE)
+    console.log('✅ EXTRACTOR COMPLETE - Result:', {
+      paneNodeId: result.paneNode.id,
+      childNodeCount: result.allChildNodes.length,
+      relationshipCount: result.relationships.size,
+    });
+
+  return result;
+}

package/templates/src/utils/etl/index.ts

@@ -0,0 +1,88 @@
+export interface BackendSavePayload {
+  id: string;
+  title: string;
+  slug: string;
+  isDecorative: boolean;
+  optionsPayload: OptionsPayload;
+  created?: string;
+  changed: string;
+  isContextPane?: boolean;
+}
+
+export interface BackendPreviewPayload {
+  id: string;
+  title: string;
+  optionsPayload: OptionsPayload;
+}
+
+export interface OptionsPayload {
+  // Top-level pane properties
+  bgColour?: string;
+  isDecorative: boolean;
+  codeHookTarget?: string;
+  heldBeliefs?: any;
+  withheldBeliefs?: any;
+  codeHookPayload?: object;
+
+  // Flattened nodes array - ALL child nodes in flat structure
+  nodes: Array<{
+    id: string;
+    nodeType: string;
+    parentId: string | null;
+
+    // For TagElement nodes:
+    tagName?: string | undefined;
+    copy?: string | undefined;
+    elementCss?: string | undefined;
+    isPlaceholder?: boolean | undefined;
+    src?: string | undefined;
+    href?: string | undefined;
+    alt?: string | undefined;
+    fileId?: string | undefined;
+    codeHookParams?: any[] | undefined;
+    buttonPayload?: object | undefined;
+    overrideClasses?: any | undefined;
+
+    // For BgPane nodes:
+    type?: string | undefined;
+    breakDesktop?:
+      | {
+          collection: string;
+          image: string;
+          svgFill: string;
+        }
+      | undefined;
+    breakMobile?: object | undefined;
+    breakTablet?: object | undefined;
+    collection?: string | undefined;
+    image?: string | undefined;
+    objectFit?: string | undefined;
+    position?: string | undefined;
+    size?: string | undefined;
+    srcSet?: string | undefined;
+    base64Data?: string | undefined;
+
+    // For Markdown nodes:
+    markdownId?: string | undefined;
+    defaultClasses?:
+      | {
+          [tagName: string]: {
+            desktop: Record<string, string>;
+            mobile: Record<string, string>;
+            tablet: Record<string, string>;
+          };
+        }
+      | undefined;
+    parentClasses?: any | undefined;
+    parentCss?: string[] | undefined;
+    hiddenViewportMobile?: boolean | undefined;
+    hiddenViewportTablet?: boolean | undefined;
+    hiddenViewportDesktop?: boolean | undefined;
+  }>;
+}
+
+export {
+  transformStoryFragmentForSave,
+  transformLivePaneForSave,
+  transformLivePaneForPreview,
+} from './transformer';

package/templates/src/utils/etl/loader.ts

@@ -0,0 +1,36 @@
+import type { PaneNode } from '@/types/compositorTypes';
+import type {
+  OptionsPayload,
+  BackendSavePayload,
+  BackendPreviewPayload,
+} from './index';
+
+export function formatForPreview(
+  paneNode: PaneNode,
+  optionsPayload: OptionsPayload
+): BackendPreviewPayload {
+  return {
+    id: paneNode.id,
+    title: paneNode.title,
+    optionsPayload: optionsPayload,
+  };
+}
+
+export function formatForSave(
+  paneNode: PaneNode,
+  optionsPayload: OptionsPayload,
+  isContext?: boolean
+): BackendSavePayload {
+  return {
+    id: paneNode.id,
+    title: paneNode.title,
+    slug: paneNode.slug,
+    isDecorative: paneNode.isDecorative,
+    isContextPane: isContext || paneNode.isContextPane,
+    optionsPayload: optionsPayload,
+    created: paneNode.created
+      ? new Date(paneNode.created).toISOString()
+      : undefined,
+    changed: new Date().toISOString(),
+  };
+}