autohtml.html

// AutoHtml Demo:

/* instead of jsx,
   Autohtml.tags has a bunch of built in functions which follow the following pattern:

  function tagName(attributes(optional), text, text, text...){
    return html;
  }
*/

// Instead of Typescript, GetTyped retrieves properties from a datastructure, while checking both the validity
// const Get = AutoHtml.getDestructure;  
// const GetTyped = AutoHtml.getDestructureTyped;
//
// this destructures to any possible datastructure depth.
// function Get(objOrItem, DestructuringReferences){
// }
// function GetTyped(objOrItem, DestructuringReferences, DestructuringTypes){
//                              
// 
// }
//
// an app factory encloses all the helper datastructures that need to be initialized.


// props represents immutable configuration, things that can be changed, but don't change when the program is running
// state represents things that can change while the program is running.

const AppProps = {
  
}

// AutoHtml  -- available functions
//
// ### Initialization, Type Checking, and Destructuring ###
//   Default(init, value) -- If value is null or undefined, return init.
//   Get(objOrItem, destructure)  -- use destructure to get appropriate items out of objOrItem
//   GetType(objOrItem, destructure, destructureTypes)  // for d
//
// ### Declaring Views ###
//   AddTemplate(viewName, template(tags, state, props));  // viewname also becomes the name of a tag.
//   WatchTag(tagName, destructure)
//   Start(App, MainViewName) => 
//      updates = App("INIT", [], null) // App(event, args, state)
//      #State = ApplyUpdate(State, updates)
//
// ### Declaring Events ###
//   Every(10).Seconds("click", 30, 30);
//   Wait(10).Seconds("eat pizza");
//   
//   Whenever(trigger[s], condition, target => action)
//   Whenever("people[].hunger", x=>x<0, target=> ['die', 'hunger', target.parent])
//   Whenever("hunger", x=>x<0, "die hunger")
//   Whenever("thirst", x=>x<0, "die thirst")
//   Whenever("fatigue", x=>x<0, "die fatigue")
//   Whenever("people[] ANY hunger thirst fatige", x=> x<1, target => ['die', target.name, target.parent])
//   Whenever("pizzas[] temp", t=> t <= ROOMTEMP, target = ['cry', 'over: cold ' + target.parent.pizzaName])
//   Whenever("ANY hunger thirst fatigue", x=> x <=0).Do
//   Whenever("ALL bottle1 bottle2 botte3"
//   Whenever("TWOORMORE a b c" )
//   Whenever("LESSTHANTHREE a b c")
//   Whenever("NOTALL a b c")
//   Whenever("THREEORLESS a b c", x
//   Whenever("thirst"({thirst}) => thirst<0).Do("die thirst")
//   Whenever(({fatigue}) => fatigue<0).Do("die fatigue").Then.Wait(10).Seconds("respawn");
//
//   Do(event, evargs) =>  | Do(eventText) => [event, evargs...] = eventText.split(" ")
//      App(event, evargs, state)
//   Todo(event, evargs) =>
//      #EventQueue.push([event, evargs])
//      Do.apply(#EventQueue.unshift())
// 
        

window.addEventListener("load", function(){
  // SetTemplate(viewName, statePath, template); the viewName is also the id of the container element.
  // adding templates creates a tag.
  AutoHtml.AddTemplate("Main", MainTemplate); // adds a template that
  AutoHtml.AddTemplate("Person", "people[]", PersonTemplate);
  AutoHtml.AddTemplate("PersonRow", PersonRowTemplate);

  AutoHtml.Start(App, "Main");  //start takes the app and the name of the primary view
  AutoHtml.WatchTag("Main", "") // 
  AutoHtml.AutoPresent();
  AutoHtml.PresentInterval();
  AutoHtml.WatchTag('Main', "");  // update main whenever anything changes.
  AutoHtml.WatchTag('PersonRow', "people[]")  // update the corresponding 'PersonRow' whenever a 'people' entry changes.
  // presentation mode controls what is being called
})

function MainTemplate(tags, state, props){
  let { h1, h2, h3, h4, h5,
        a, p, span, div, button,
        form, input, numberInput, textInput,
        fileInput, checkInput, radioInput, monthInput,
        passwordInput, urlInput, weekInput,
        dateInput, datetimeLocalInput, hiddenInput, imageInput,
        telInput, colorInput, searchInput
        submit, forEach, // foreach handles arrays or maps.
        label, select, PersonRow, PersonHeight
        table, theader, tbody, tr, th, td,
        ul, ol } = tags;

  // you can add tags
  
  tags["Main"] = AutoHtml

  Template(
  switch(viewName){
    case "Main": MainTemplate(state, AppProps); break;
    case "Person": PersonTemplate(state, AppProps); break
  }
  function MainTemplate(mainState, props){
    let { personFields } = props;
    let { people } = mainState;
    return table(
       thead(
         tr(forEach(personFields, field=>th(field))))
       tbody(
         forEach(people, person=>{
           forEach(personFields, field=>td(person[field]))


props.personFields.map(field => th(field))
         


props.forEach(props.personFields, (field, i)=>th(field))
       forEach(state.persons, (person, i)=>th
    )

    forEach(state.people, 
    let html = "";
    for(let i=0; i<peopleState.length; ++i){
      let preson = peopleState[i]; }
    html += PersonTemplate(peopleState[i]);
    AutoHtml.Present("Person", state);
  }
  function PeopleTemplate(peopleState){
    
  }
  function PersonTemplate(){
  }
}
    let args = event.split(" ");
    let [command, evargs...] = event.split(' ');
function App(event, evargs, state){
  // events come in two types: commands and lifecycle events.
  // commands are dispatched by the user, and MUST be a list of word separated by a single space.
  // AutoHtml will throw an error if there is more than one space in a command.
  // listening is registering an event handler which may invoke a command.
  // There are three all caps *lifecycle* events: "INIT", "EXIT", and "ERROR"
  // These MAY NOT BE INVOKED DIRECTLY.
  // You may recommend invocation of a lifecycle event using the lowercase command version,
  // in which case the app will evaluate when and how it is appropriainvoke a lower case version,
  // the app will then invoke these for you.

  switch(event){
    case "INIT":
      return InitState();
    case "ERROR":
    case "EXIT":
      return;
    case "click":
      let [x, y] = evargs;
      return;
  }
  throw 

    break;
  if(event == "INIT"){
     return {}; // returns new state
  }else if(event == "EXIT"){
     return; // do nothing on exit for now
  }else if(event == "ERROR"){
     return; // do nothing on error for now
  }else
    if(event == "update"){
      // returns html
      // instead of jsx, we use a destructuring assignment
      let a, p, div, ul, ol,
        h1, h2, h3, h4, h5 = AutoHtml.tags;
    }
  }
}
if(event.indexOf("update") == 0){
    let target = 

  } else if(event.indexOf("save") == 0){

  }
}
function AppFactory(props){
  let ExamplePerson = {
   fname: "Joe", lname: "Schmoe",
   email: /[A-Za-z0-9]@/, phone: /[0-9]{3}-[0-9]{3}-[0-9]{4}/,
   weight: 220, height: 72,
  }

  return App;
  function App(event, tags){
    //
    if(event == "INIT"){
      AutoHtml.dispatch("update Main");
    } else if(event == "
   
   

   let p, span, div, table, tbody, theader,
     h1, h2, h3, h4, h5,
     tr, td, th, ul, ol, select,
     form, input, label, footer = tags;
     

   function Main(mainState, props){
   }
   function PersonRow(personState, props){
     return tr(
   }
   app.listen("#person", 


   return 
   function PersonHeaders(_, props){
                  //getProps(item, null, 0);  checks the type of item
                                  [0, 1, 2, 3, 4], [ExamplePerson
     let fields = GetTypes(props, ["personFields"], [""]);  // get Property does typechecking
     for(let i=0; i<fields; ++i){
       
     }
   }
   
   
   if(template_name == "Main"){
      return Main;
   } else if(template_name == "PersonRow"){
      return PersonRow;
   }

   else if(template_name == "
      return (state, props) => {
        let html = h1("Hello " + state.username);
        let tablehtml = "";
        for(let i=0; i<state.people.length; ++i){
           tablehtml += personRow(
        }
      }
   } else if(template_name == "title"){
      

   AutoHtml.unloadTags(); // restores context

   // finish up
   if(template === null){
     throw new error("Unhandled template: " + template_name);
   } else {
     return template;
   }
}