Skip to content
This repository has been archived by the owner on Oct 27, 2023. It is now read-only.

joao-neves95/js.web.components

Repository files navigation

js.web.components


Observations:

All of this can and will change in the future.

js.web only supports the main browsers (I.e.: Firefox, Chrome, Opera, Safari).
js.web does not support Internet Explorer.


Specification

Component Property Rendering:

<_> [property-to-reder] </_>

Example:

Template:

const testTemplate = `
<div class="container">
    <h1> <_> title </_> </h1>
</div>
`;

Component:

class TestComponent extends Component {

  constructor() {
    super( 'app-test', testTemplate, [''] );

    this.title = 'My Website';
  }

}

Component State Property Rendering with Binding:

<_> state.[property-to-reder] </_>

Example:

Template:

const testTemplate = `
<div class="container">
    <!-- DATA BINDING -->
    <p> <_> state.myName </_> </p>
</div>
`;

Component:

class TestComponent extends Component {

  constructor() {
    super( 'app-test', testTemplate, [''] );

    this.state = this.createState( {
      myName: 'João Neves'
    } );
  }

}

Component Property Iteration Rendering:

Example:

Template:

const nameListTemplate = `
<div class="container">
    <ul>
        <_for let="person of names">
            <li> <_>person</_> </li>
        </_for>
    </ul>
</div>
`;

Component:

class NameListComponent extends Component {

  constructor() {
    super( 'app-nameList', nameListTemplate, [''] );

    this.names = ['John Doe', 'Oliver Hoe', 'Fiona Silva'];

  }

}

Component Property Iteration Rendering with Property Binding:

Example:

Template:

const todoListTemplate = `
<div class="container">
    <ul>
        <_for let="todoItem of state.todoItems">
            <li> <_> todoItem </_> </li>
        </_for>
    </ul>
</div>
`;

Component:

class TodoListComponent extends Component {

  constructor() {
    super( 'app-todoList', todoListTemplate, [''] );

    this.state = {
      todoItems: this.createState( ['Study', 'Learn design patterns', 'Learn data structures'], 'todoItems' )
    };

  }

}

Component Method Calls From Template DOM Events:

Example:

Template:

const todoListTemplate = `
<div class="container">
    <!-- Here is the event listener calling the component method. -->
    <button (click)="addItem()"
            class="btn btn-success" type="button">
        Add Item
    </button>
</div>
`;

Component:

class TodoListComponent extends Component {

  constructor() {
    super( 'app-todoList', todoListTemplate, [''] );
  }

  // The method to call.
  addItem() {
    console.log( 'Someone called me!' );
  }

}

Component Method Calls From Template DOM Events (with property binding):

Example:

Template:

const todoListTemplate = `
<div class="container">
    <label>New Item:
        <input id="new-todo-item" name="new-todo-item" type="text" required />
    <label>
    <!-- Here is the event listener calling the component method. -->
    <button (click)="addItem()"
            class="btn btn-success" type="button">
        Add Item
    </button>
</div>

<div class="container">
    <ul>
        <_for let="todoItem of state.todoItems">
            <li> <_>todoItem</_> </li>
        </_for>
    </ul>
</div>
`;

Component:

class TodoListComponent extends Component {

  constructor() {
    super( 'app-todoList', todoListTemplate, [''] );

    this.state = {
      todoItems: this.createState( ['Study', 'Learn design patterns', 'Learn data structures'], 'todoItems' )
    };
  }

  // The method to call.
  addItem() {
    this.state.todoItems.push( document.getElementById( 'new-todo-item' ).value );
  }

}

Features Roadmap:

  • Implement component property rendering
  • Implement component state property data binding
  • Implement "for" loop template with component property rendering for arrays
  • Implement component state property data binding for "for" loops
  • Implement component method calls from template events
  • Implement component scoped style injections
  • Implement "for" loop template with component property rendering for objects
  • Implement "if" statement template
  • Implement support for having sub-components (render components inside other components)
  • Implement multiple pages
  • Optimize (space and time)

Motivation:

My teacher told the class to make a project using HTML, CSS and JQuery.
I already had experience working with these technologies, so I decided to make my own framework.
It's inspired by Angular, React and even ASP.NET.
This is a work in progress.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages