From TypeScript to view.tree

The component you wrote in

Getting Started is a plain TypeScript class. It compiles, it runs, and it is a supported way to describe a $mol component — one of several the framework accepts.It also asked you to keep four things in your head that had nothing to do with what the component does. This page takes them one at a time and shows the line of view.tree that removes each one. Then it shows the code the compiler generates, so you can check that the tree is not a second runtime: it produces the class you already wrote.Here is that file again, to compare against:1namespace $ {2 3 export class $my_hello extends $mol_page {4 5 title() {6 return 'Greeting'7 }8 9 body() {10 return [ this.Name(), this.Message() ]11 }12 13 @ $mol_mem14 Name() {15 const obj = new this.$.$mol_string16 obj.hint = () => 'Enter your name'17 obj.value = ( next?: string ) => this.name( next )18 return obj19 }20 21 @ $mol_mem22 name( next?: string ) {23 return next ?? ''24 }25 26 @ $mol_mem27 Message() {28 const obj = new this.$.$mol_view29 obj.sub = () => [ this.greeting() ]30 return obj31 }32 33 greeting() {34 const name = this.name()35 return name ? `Hello, ${ name }!` : 'Please enter your name'36 }37 38 }39 40}Edit this page on GitHubWas this helpful?YesNoPreviousGetting Started NextProject StructureOn this pageThe child is yours to build, and yours to cache The operator says which way the data moves Two-way binding is one keystroke away from silently read-only A localized string stays a string until you make it a key The whole component What the compiler emits What a hand-written class cannot hand to a tool The size of it Which one to write