bringing back component keyword

[amitu]

Currently we write:

-- ftd.row foo:
integer x:
width: fill

-- end: foo

Here, x, an argument definition, and width a property of root component are "merged" together. What if we wrote:

-- component foo:
integer x:

-- ftd.row:
width: fill

-- end: ftd.row

-- end: foo

UI Builder

Another advantage is we can use "ui builder", so if we do not know the root component type (and do not want to create a wrapper node just for wrapping things) we can do:

-- component foo:
integer x:

-- ui-json:

{
  .. generated json ..
}

-- end: ui-json

-- end: foo

Some UI builder can generate the ui-json's json code. It need to be json, it can also be ftd code included there (if we can somehow demarcate the "region" of ftd code that can be overwritten by the UI generator tool.

Component Can Create More Than One Children

-- component foo:
integer x:

-- ftd.row:
width: fill

-- end: ftd.row

-- ftd.text: yo

-- end: foo

Why not? Main problem is debuggability. Normally the outer child, if there was single child for a component, we can add data-componet=<full-component-name> in generated HTMl, now will have to either put this on each child, or not put it. We can not wrap it in a node because then parent's layout will break.

So maybe we won't allow this.

[Arpita-Jaiswal]

Pros

• component properties and local variables are now distinct.
• We can distinguish between variable and component definition with the' component' keyword. (No need for DI or definition tracker)

Cons

• User can write multiple child components in definitions which are obviously wrong.

[amitu]

For the con we can write a compiler check. User can write intgr instead of integer too.

[Arpita-Jaiswal]

-- ftd.row:

-- ftd.row:
id: r1

-- ftd.row:


-- ftd.text: sgdfj
$container$: r1

-- ftd.column page:
open: true
append-at: body-id

-- ftd.column:
id: header-id

-- ftd.column:
id: body-id

-- end: page



-- page:

-- ftd.row:
$container$: header-id

--  end: ftd.row

-- ftd.text: Hello

-- end: page

-- component foo:
ftd.ui list children:

-- ftd.row:
children: $children

-- end: ftd.row

-- end: foo



-- foo:

-- ftd.text: Hello

-- end: foo

-- component foo:
ftd.ui list children:
ftd.ui list c1:
ftd.ui list c2:

-- ftd.row:
children: $children

;; Syntax#1
-- ftd.column:
children: $c1

;; Syntax#2
-- $obj:
$loop$: $c1 as $obj

-- end: ftd.row

-- end: foo



-- foo:

-- foo.c1:

-- ftd.text: Hello
-- ftd.text: Hello

-- end: foo.c1

-- ftd.text: Hello

-- end: foo

[Arpita-Jaiswal]

;; We'll loose external variable
-- bar:
width: fill
boolean flag: true

-- ftd.text: Hello there
if: $flag

-- ftd.text: Click me!
$on-click$: toggle $flag

-- end: ftd.column


;; Now we have to do this
-- foo:

-- component foo:
boolean flag: true

-- bar:
width: fill

-- ftd.text: Hello there
if: $flag

-- ftd.text: Click me!
$on-click$: toggle $flag

-- end: bar

-- end: foo

We agree on the things more explicit so we're ready to lose the external local variables