Component declaration

Component declaration

Define a component in trebor is just write an html like file. The structure of this file is quite simple. All the sections are optionals, even the template section. There are three parts in a component file, <style>, <script> and the template content who is the rest of the file content. Let's explain this with an example:

<!-- The style section is were the component css is declared -->
<style>
  h1 { color: green }
</style>

<!-- This section is were the template is declared -->
<h1>Hello, {{ someBody }}!</h1>

<!-- The script section is were the component logic is declared -->
<script>
  export default class {
    someBody = 'World'
  };
</script>

Style section

In the style section all valid css is allowed and some tricks are included. One of them are the Browser Prefixes in the properties, who can be easily declared using one line notation. See below an example of this notation:

<style>
  h1 { 
    color: green;
    /* 
      Look how in one line we can declare all browser prefixes: 
      (w: webkit, m: moz, s: ms, o: o) 
     */
    -wmso-user-select: none;
  }
</style>

The above code is transpiled to:

<style>
  h1 { 
    color: green;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
  }
</style>

Script section

In this section all valid javascript code is permitted, the only two restriction are that the script tag must be unique and must have a class as default export:

<script>
  // You can place any helper code here...

  class MyClass {
    someBody = 'World'
  }

  export default MyClass;
</script>

The ES2015 and above syntax can be used as well. Expressions like Class fields, Arrow function, Rest parameters and Spread Operators can be used without fear, and other features of the most recent syntax too. The code of this section are trasnpiled with the TypeScript compiler, so, you can write all the code that TypeScript Language acept.

Template section

The template section are all the html code except the <style> and <script> tag. The order of code doesn't matter, you can choose the order of tags and put them wherever you want.