https://github.com/jfdelarosa/VanillaJS-components

Web components using vanilla JS only
https://github.com/jfdelarosa/VanillaJS-components

javascript js vanilla webcomponents

Last synced: about 2 months ago
JSON representation

Web components using vanilla JS only

• Host: GitHub
• URL: https://github.com/jfdelarosa/VanillaJS-components
• Owner: jfdelarosa
• License: gpl-3.0
• Created: 2017-09-27T00:59:08.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-17T06:23:45.000Z (over 6 years ago)
• Last Synced: 2024-02-15T17:33:17.360Z (11 months ago)
• Topics: javascript, js, vanilla, webcomponents
• Language: JavaScript
• Homepage: http://jfdelarosa.me/VanillaJS-components/
• Size: 20.5 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# VanillaJS Components

A set of cross-browser web componens made using only vanilla js

[Demo](http://jfdelarosa.me/VanillaJS-components/)

### Installation

```

$ npm install jfdelarosa/vanillajs-components

```

Alternatively, you can [download](https://github.com/jfdelarosa/vanillajs-components/archive/master.zip)  the repo.

### Run server

```

$ npm start

```

## Basic usage

**index.html**

```HTML

  

  VanillaJS components

  Hello 

  

  

  

    loadComponent('path/to/my-hello');

  

```

**my-hello.js**

```JAVASCRIPT

registerComponent('my-hello', {

  template: function(){

    return `
Hello  ${this.myText}!
`;

  },

  stylesheet: 'path/to/component-stylesheet.css',

  attributes: ['my-text', 'debug'],

  functions: {

    'debug': function(value, template){

      console.log(value);

      console.log(template);

    }

  }

});

```


## Methods

```JAVASCRIPT

loadComponent(path);

```

**path**

A string wich contains the path of the component script.

```JAVASCRIPT

registerComponent(componentTag, options);

```

**componentTag**

The tag of the component.

**options**

An object containing the configuration of the component, the options are listed below.

## Options

**template** (required)

> A **function** that returns the template, you can pass any component attribute using ES6 template literals `${this.attribute}`.

> Also, you can use external variables if the `this` keyword is omitted `$(globalVar)`.

> Parameters containing hyphens are converted to camel case.

> You can use the `` tag to use the text inside the component tags in the template, as seen on the example above.

**stylesheet** (optional)

> A **string** containing the path to the component stylesheet.

> Stylesheets are NOT component specific, and can affect other the layout of the page or other components as well.

**attributes** (optional)

> An **array** containing the names of the atributes of the component.

**functions** (optional)

> An **object** containing component parameters as keys and functions as values, each of this functions has the value of the specified component parameter and the component template as parameters.

## Browser Support

|    | IE | Chrome | Firefox | Safari | Chrome Android | Safari iOS |

| :--------------------: | :---: | :----: | :-----: | :-------: | :------------: | :-----------: |

| Version  | x | x | x | x | x | x |

## TODO

- [ ] Check Browser support

- [ ] Attatch events to the component

- [x] Component ``

- [ ] Refactor code

- [ ] Better documentation