/// /** * Test Pattern for Superstition #30 * * Tests whether fetchData() can be dynamically instantiated inside .map() * * Claim: * - fetchData() calls cannot be created dynamically inside .map() or reactive callbacks * - Framework requires fetchData to be statically defined at pattern evaluation time * - Dynamic instantiation causes "Frame mismatch" errors or undefined results * * This pattern tests: * 1. Static fetchData at top level (control - should work) * 2. fetchData inside .map() with expression callback (claimed to fail) */ import { computed, Default, NAME, pattern, UI } from "commontools"; import { fetchData } from "commontools"; interface Repo { id: string; name: string; } interface InputSchema { repos: Default; } interface Input { repos: Repo[]; } export default pattern(({ repos }) => { // Approach 1: Static fetchData at top level (control - should work) // Uses computed URL that changes based on first repo const staticUrl = computed(() => repos[0] ? `https://api.github.com/repos/facebook/${repos[0].name}` : "" ); const staticFetch = fetchData({ url: staticUrl, mode: "json" }); // Approach 2: fetchData inside .map() - expression callback (no block syntax) // This is claimed to fail with frame mismatch or return undefined const dynamicFetches = repos.map((repo) => fetchData({ url: computed(() => `https://api.github.com/repos/facebook/${repo.name}`), mode: "json", }) ); // Display results const staticResult = computed(() => staticFetch.pending ? "Loading..." : staticFetch.error ? `Error: ${staticFetch.error}` : staticFetch.result ? `Stars: ${ (staticFetch.result as { stargazers_count?: number }) .stargazers_count ?? "N/A" }` : "No data" ); return { [NAME]: "Test #30: fetchData Dynamic Instantiation", [UI]: (

Superstition #30 Test: fetchData Dynamic Instantiation

Claim Being Tested:

  • fetchData() cannot be created inside{" "} .map()
  • Framework requires static allocation at pattern body top level
  • Dynamic instantiation causes frame mismatch or undefined results
{/* Static fetchData (Control) */}

1. Static fetchData (Control)

fetchData at top level with computed URL
URL: {staticUrl}
Result: {staticResult}
Pending:{" "} {computed(() => String(staticFetch.pending))}
{/* Dynamic fetchData */}

2. Dynamic fetchData (Test)

fetchData inside .map() callback
{dynamicFetches.map((fetch, index) => (
Repo {index + 1}:
Pending: {computed(() => String(fetch.pending))} {" | "} Error:{" "} {computed(() => fetch.error ? String(fetch.error) : "none")} {" | "} Result: {computed(() => fetch.result ? `Stars: ${ (fetch.result as { stargazers_count?: number }) .stargazers_count ?? "N/A" }` : "No data" )}
))}

Expected Behavior (if superstition is TRUE):

  • Static:{" "} Should work - shows star count
  • Dynamic:{" "} Should FAIL - undefined, error, or frame mismatch

If superstition is FALSE:{" "} Both should show star counts.

Test Repos:

    {repos.map((repo, index) => (
  • {repo.name} (id: {repo.id})
  • ))}
), repos, }; });