TOON + JSON Flat

index.ts

/**
 * PoC: Eficácia do TOON como formato de Transporte para Estado JSON Flat
 */

// 1. O Payload de Transporte (Gerado pela IA ou vindo do Banco)
// Formato TOON: Sem aspas, sem chaves, baseado em indentação e marcadores (@).
const toonPayload = `
@hierarchy
root: header, main, footer
main: banner-1, shelf-1

@components
header (Header)
  sticky: true
banner-1 (HeroBanner)
  title: Promocao de Inverno
  cta: Comprar
shelf-1 (ProductShelf)
  collection: 123
  limit: 4
footer (Footer)
  theme: dark
`;

// 2. O Estado em JSON Flat (O que o D&D e o React precisam para rodar em O(1))
const jsonFlatEquivalent = {
  hierarchy: {
    "root": ["header", "main", "footer"],
    "main": ["banner-1", "shelf-1"]
  },
  components: {
    "header": { type: "Header", props: { sticky: true } },
    "banner-1": { type: "HeroBanner", props: { title: "Promocao de Inverno", cta: "Comprar" } },
    "shelf-1": { type: "ProductShelf", props: { collection: 123, limit: 4 } },
    "footer": { type: "Footer", props: { theme: "dark" } }
  }
};

// 3. O Parser (Executado apenas 1x no Load ou ao receber resposta da IA)
interface FlatState {
  hierarchy: Record<string, string[]>;
  components: Record<string, { type: string; props: Record<string, string | boolean | number> }>;
}

function parseToonTransportToFlatState(toonString: string): FlatState {
  const state: FlatState = { hierarchy: {}, components: {} };
  let currentSection: string | null = null;
  let currentComponent: string | null = null;

  const lines = toonString.trim().split('\n');

  lines.forEach(line => {
    if (!line.trim()) return; // Ignora linhas vazias

    // Troca de Seção
    if (line.startsWith('@')) {
      currentSection = line.substring(1).trim();
      return;
    }

    if (currentSection === 'hierarchy') {
      const [parentId, childrenStr] = line.split(':');
      state.hierarchy[parentId.trim()] = childrenStr.split(',').map(c => c.trim());
    } 
    
    else if (currentSection === 'components') {
      // Se não tem indentação, é a declaração do componente
      if (!line.startsWith('  ')) {
        const match = line.match(/^([\w-]+)\s*\(([\w]+)\)/);
        if (match) {
          currentComponent = match[1];
          state.components[currentComponent] = { type: match[2], props: {} };
        }
      } 
      // Se tem indentação, são as props do componente atual
      else if (currentComponent) {
        const [prop, value] = line.trim().split(':');
        // Conversão de tipos simples
        let parsedValue: string | boolean | number = value.trim();
        if (parsedValue === 'true') parsedValue = true;
        else if (parsedValue === 'false') parsedValue = false;
        else if (!isNaN(Number(parsedValue)) && parsedValue !== '') parsedValue = Number(parsedValue);

        state.components[currentComponent].props[prop.trim()] = parsedValue;
      }
    }
  });

  return state;
}

// 4. Teste e Comprovação de Eficácia (Benchmark de Transporte)
function runPoC() {
  const parsedState = parseToonTransportToFlatState(toonPayload);
  
  // Verifica se o parser funcionou corretamente convertendo TOON -> JSON Flat
  const isStateValid = JSON.stringify(parsedState) === JSON.stringify(jsonFlatEquivalent);
  
  const toonSize = new Blob([toonPayload]).size;
  const jsonSize = new Blob([JSON.stringify(jsonFlatEquivalent)]).size;
  const jsonPrettySize = new Blob([JSON.stringify(jsonFlatEquivalent, null, 2)]).size;

  const savingsPercentage = (((jsonSize - toonSize) / jsonSize) * 100).toFixed(2);

  console.log("=== RESULTADOS DA POC ===");
  console.log(`Conversão TOON -> Flat bem sucedida? ${isStateValid ? '✅ Sim' : '❌ Não'}`);
  console.log(`Peso do JSON Flat (Minificado para Rede): ${jsonSize} bytes`);
  console.log(`Peso do JSON Flat (Formatado p/ IA ler):  ${jsonPrettySize} bytes`);
  console.log(`Peso do TOON (Transporte/IA):             ${toonSize} bytes`);
  console.log(`-----------------------------------------`);
  console.log(`Economia de Banda/Tokens em relação ao minificado: ${savingsPercentage}%`);
  console.log(`Economia em relação ao JSON legível pela IA: > 50%`);
  console.log("Conclusão: TOON é o 'Zip' ideal para comunicar IA <-> Client, enquanto o Client opera nativamente em Flat.");
}

runPoC();