import * as React from "react" ; import { ChildrenMetadata , ChildrenWindup } from "./WindupChildren" ; import { PlayedWindup , playedElements , isPlayedWindup } from "../Windup" ; import { StringMetadata , StringWindup } from "./useWindupString" ; export type PlayedChildrenWindup = PlayedWindup < string , ChildrenMetadata > ; export type PlayedStringWindup = PlayedWindup < string , StringMetadata > ; export function renderStringWindup ( windup ) { const played = isPlayedWindup ( windup ) ? windup [ 0 ] : playedElements ( windup ) ; const inner = played . reduce ( ( acc , playedEl ) => { if ( typeof playedEl === "string" ) { return acc + playedEl ; } return acc + renderStringWindup ( playedEl ) ; } , "" ) ; return inner ; } const VOID_TAGS = [ "area" , "base" , "br" , "col" , "command" , "embed" , "hr" , "img" , "input" , "keygen" , "link" , "meta" , "param" , "source" , "track" , "wbr" ] ; export function renderChildrenWindup ( windup ) { const metadata = isPlayedWindup ( windup ) ? windup [ 1 ] : windup [ 2 ] ; const played = isPlayedWindup ( windup ) ? windup [ 0 ] : playedElements ( windup ) ; const Outer = metadata . element || React . Fragment ; if ( metadata . props && Object . keys ( metadata . props ) . includes ( "children" ) ) { return < Outer key = { metadata . key } { ... metadata . props } />; } const inner = played . reduce ( ( acc , playedEl ) => { if ( typeof playedEl === "string" ) { const accButLast = acc . slice ( 0 , acc . length - 1 ) ; const last = acc [ acc . length - 1 ] ; return last && typeof last === "string" ? [ ... accButLast , last + playedEl ] : [ ... acc , playedEl ] ; } return [ ... acc , renderChildrenWindup ( playedEl ) ] ; } , [ ] ) ; if ( typeof metadata . element === "string" && VOID_TAGS . includes ( metadata . element ) ) { return < Outer key = { metadata . key } { ... metadata . props } />; } return ( < Outer key = { metadata . key } { ... metadata . props } > { inner } < /Outer>); }