Macros idea

0readme.md

A macro is effectively a function called at compile time.

You can use {{name}} to just string insert the value right there.

You can use {{children}} to insert the child nodes of the macro invocation there.

Macros are declared by doing

macroName {
  <div id="{{key}}">{{children}}</div>
}

You can call a macro by doing

<macroName() key="value"> <div> children </div> </macroName>

You must use the same keys as used in {{key}} in the macro. Any attributes set on the macro invocation will be passed into the macro as free variables. If a macro references any variables that are not defined they will be defaulted to empty string

You can also require(uri) to load any macros from that file into the current file.

If you require a file and it contains anything that's not a macro then screw that.

Such a HTML file compiles to a javascript file that module.exports = {{HTML AS STRING}}

classic.html

import "./macros"

<question() text="Classic Question"></question>

macros.html

radio {
    <li>
        <label>
            <input type="radio" name="time" value="{{value}}" {{checked}}>
            </input>
            {{children}}
        </label>
    </li>
}

question {
    <div id="question">
        <header>
            <h2 class="left"> {{text}} </h2>
            <button id="cancel" class="right"> cancel </button>
            <div class="clearfix"></div>
        </header>
        <hr></hr>
        <div>
            <textarea id="question" class="input"
                placeholder="type your question"
            ></textarea>
        </div>
        {{children}}
        <ul>
            <radio() value="60"> 1 min </radio>
            <radio() value="30"> 30 sec </radio>
            <radio() value="15"> 15 sec </radio>
            <radio() value="0" checked="checked"> None </radio>
        </ul>
        <footer>
            <button id="send" class="right"> Send </button>
            <div class="clearfix"></div>
        </footer>
    </div>
}

multiple.html

import "./macros"

choice() {
    <li>
        <input id="check{{name}}" type="checkbox"></input>
        <span>
            {{children}}
        </span>
        <input id="input{{name}}"></input>
    </li>
}

<question() text="Multiple Choices">
    <ul>
        <choice() name="A"> A) </choice>
        <choice() name="B"> B) </choice>
        <choice() name="C"> C) </choice>
        <choice() name="D"> D) </choice>
    </ul>
</question>

question.html

import "./macros"

<question() text="True or False"></question>