import { start } from "@thi.ng/hdom/start" ; import type { TransformSubSpec } from "@thi.ng/transducers" ; import { deepTransform } from "@thi.ng/transducers/deep-transform" ; import "./style.css" ; let db = [ { meta : { author : { name : "Alice Bobbera" , email : "a@b.it" , } , created : "2018-02-03T12:13:14Z" , tags : [ "drama" , "queen" ] , } , title : "UI components for Dummies" , content : "Sed doloribus molestias voluptatem ut delectus vitae quo eum. Ut praesentium sed omnis sequi rerum praesentium aperiam modi. Occaecati voluptatum quis vel facere quis quisquam." , } , { meta : { author : { name : "Charlie Doran" , email : "c@d.es" , } , created : "2018-02-02T01:23:45Z" , tags : [ "simplicity" , "rules" ] , } , title : "Look ma, so simple" , content : "Ratione necessitatibus doloremque itaque. Nihil hic alias cumque beatae esse sapiente incidunt. Illum vel eveniet officia." , } , ] ; const item = ( theme ) => ( item ) => [ `div.item.${ theme }` , item . title , item . meta , item . content ] ; const meta = ( meta ) => [ "div.meta" , meta . author , meta . created , meta . tags ] ; const author = ( author ) => [ "div" , [ "strong" , "author: " ] , link ( `mailto:${ author . email }` , author . name ) , ] ; const date = ( iso ) => [ "div" , [ "strong" , "date: " ] , new Date ( Date . parse ( iso ) ) . toLocaleString ( ) , ] ; const link = ( href , body ) => [ "a" , { href } , body ] ; const tag = ( tag ) => [ "li" , link ( "#" , tag ) ] ; const tags = ( tags ) => [ "ul.tags" , ... tags . map ( tag ) ] ; const title = ( title , level = 3 ) => [ `h${ level }` , title ] ; const content = ( body ) => [ "div" , body ] ; const itemSpec = { meta : [ meta , { author , tags , created : date , } , ] , title , content , } ; const itemLight = deepTransform ( [ item ( "light" ) , itemSpec ] ) ; const itemDark = deepTransform ( [ item ( "dark" ) , itemSpec ] ) ; const editor = ( ( ) => { let body = JSON . stringify ( db , null , 2 ) ; return [ "textarea" , { oninput : ( e ) => { try { db = JSON . parse ( ( < HTMLTextAreaElement > e . target ) . value ) ; } catch ( _ ) { } } , } , body , ] ; } ) ( ) ; start ( ( ) => [ "div#container" , [ "div" , editor ] , [ "div" , [ "div" , [ "h2" , "Light theme" ] , ... db . map ( itemLight ) ] , [ "div" , [ "h2" , "Dark theme" ] , ... db . map ( itemDark ) ] , ] , ] ) ;