Constructos

∯ Purpose

Create and use WinnetouJs web components.

∯ Usage

Create an html file inside constructos folder and define constructos inside tag <winnetou> . After that import transpiled constructo in your javascript code.

∯ Transpitation

In order to transpile your WinnetouJs constructos html files, run command node wbr or node wbr --bundleRelease . Generated js files will have the same name as the original html files.

∯ Example

Converting html to WinnetouJs javascript constructo


[base.html]

<winnetou>
    <div id="[[myFirstDiv]]">{{text}}</div>
</winnetou>
-------------------

[app.js]

import { myFirstDiv } from "./constructos/base.js";
myFirstDiv({ text: "Hello World!" }).create("#app");

∯ Ids

Ids are the constructo identifier. They are defined using double brackets [[]] token in html code;

Type

String

Usage

<div id="[[myFirstDiv]]">{{ text }}</div>

∯ Props

Props are the tokens that will be replaced with text or mutables.

Type

String or Object

Usage

Props are set using double curly braces {{}} token in html code.

props.js



[propsExample.html]
<winnetou>
    <input 
        type="text" 
        class="inputText" 
        id="[[simpleInputText]]"
        placeholder="{{myPlaceholder}}" 
    />
</winnetou>

[form.js]
import { simpleInputText } from "./constructos/propsExample.js";
simpleInputText({ 
    myPlaceholder: "Enter your name here" 
}).create("#myForm");

Optional prop

Add ? token in order to make prop optional.

Descritive prop

In order to add a description to your prop, use % token.

props.js

  
  
  [propsExample.html]
  <winnetou>
      <input 
          type="text" 
          class="inputText {{?class:Optional class to be added}}" 
          id="[[simpleInputText]]"
          placeholder="{{myPlaceholder?}}" 
      />
  </winnetou>
  
  [form.js]
  import { simpleInputText } from "./constructos/propsExample.js";
  simpleInputText({ 
      // this prop is optional
      myPlaceholder: "Enter your name here",
      // this prop is optional
      class:"blueBackground"
  }).create("#myForm");

∯ Options

Options are especial commands to change constructo behaviors.

Type

Object

myAwesomeApp.js

  
  import { myFirstDiv } from "./constructos/base.js";
  myFirstDiv({ text: "Hello World!" }).create("#app",[options]);

• clear

Clear output element before add it.

Type

Boolean

• reverse

Add constructo on top of output. Default is on end of it.

Type

Boolean

∯ Create

Create method will add constructo in app DOM and return its ids.

Type

Method

Return Structure

keyId: [keyId]-win-[identifier]

myAwesomeApp.js


let myDiv = myTextConstructo({ text: "Hello World!" }).create("#app",{
    reverse:true
})
console.log(myDiv.ids.myTextConstructo)

// return 
// myDiv-win-1

Inside ids

Your can create n ids inside your constructo.

Inside ids

  
  [base.html]
  
  <winnetou>
      <div id="[[myFirstDiv]]">
      <h1 id="[[title]]">{{title_txt}}</h1>
      <h2 id="[[sub_title]]">{{sub_title_txt}}</h2>
      </div>
  </winnetou>
  -------------------
  
  [app.js]
  
  import { myFirstDiv } from "./constructos/base.js";
  let myConstructo = myFirstDiv({ title_txt: "Hello", sub_title_txt:"World!" }).create("#app");

  console.log(myConstructo)

  // outputs:
  ids = {
    myFirstDiv:"myFirstDiv-win-1",
    title:"title-win-1",
    sub_title:"sub_title-win-1"
  }

Identifier

The returned string id has this structure: [keyId]-win-[identifier] . The identifier will be a number if none is defined. In order to define it, use identifier option when call a constructo.

Type

String

Inside ids

    
    [base.html]
    
    <winnetou>
        <div id="[[myFirstDiv]]">
        <h1 id="[[title]]">{{title_txt}}</h1>
        <h2 id="[[sub_title]]">{{sub_title_txt}}</h2>
        </div>
    </winnetou>
    -------------------
    
    [app.js]
    
    import { myFirstDiv } from "./constructos/base.js";

    let myConstructo = myFirstDiv({ 
        title_txt: "Hello", 
        sub_title_txt:"World!" 
    },{
        identifier:'ouroboros'
    }).create("#app");
  
    console.log(myConstructo)
  
    // outputs:
    ids = {
      myFirstDiv:"myFirstDiv-win-ouroboros",
      title:"title-win-ouroboros",
      sub_title:"sub_title-win-ouroboros"
    }

∯ constructoString

Return the string of constructo instead of adding it to DOM.

Type

Method

Constructo String

      
[base.html]

<winnetou>
    <div id="[[myFirstDiv]]">
    <h1 id="[[title]]">{{title_txt}}</h1>
    <h2 id="[[sub_title]]">{{sub_title_txt}}</h2>
    </div>
</winnetou>
-------------------

[app.js]

import { myFirstDiv } from "./constructos/base.js";

let myConstructo = myFirstDiv({ 
    title_txt: "Hello", 
    sub_title_txt:"World!" 
},{
    identifier:'ouroboros'
}).constructoString()

console.log(myConstructo)

// outputs:  
`<div id="myFirstDiv-win-ouroboros">
<h1 id="title-win-ouroboros">Hello</h1>
<h2 id="sub_title-win-ouroboros">World!</h2>
</div>`