https://github.com/johnfacey/drowjs
Web Component Wrapper for creating HTML Custom Components
https://github.com/johnfacey/drowjs
component component-based component-library html javascript nodejs web-components
Last synced: 12 months ago
JSON representation
Web Component Wrapper for creating HTML Custom Components
- Host: GitHub
- URL: https://github.com/johnfacey/drowjs
- Owner: johnfacey
- License: other
- Created: 2019-10-14T19:56:57.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-10T06:36:43.000Z (almost 2 years ago)
- Last Synced: 2025-01-21T02:45:43.608Z (about 1 year ago)
- Topics: component, component-based, component-library, html, javascript, nodejs, web-components
- Language: HTML
- Homepage:
- Size: 2.03 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://gitpod.io/#https://github.com/johnfacey/drowjs)
# Drow
Simple Web Component Library for creating custom HTML Components.
## Updates
Converted object references to Drow and drow internal elements instead of DrowJS
## Setup
Include the drow.js in an html file:
```
```
Or as an NPM Module
```
import Drow from 'drow';
```
## Define a Drow Component
Define a Drow Object to setup a componet:
Component needs to have a
- **name** : name of HTML Custom Component
- **props** : properties set on the Custom Component
- **template** : standard html template
- **init** : function() - optional
- **watch** : function(obj) - optional
- **templating** : You can now use handlebars/mustache style variables in templates there are applied by prop name
Ex: {{prop1}}
HTML
```
```
JavaScript
```
var config = {
"name" : "my-comp",
"props": ['prop1','prop2'],
"template": `
Every time you click on timestamp it will update the time.
Click for the timestamp{{prop1}}
`,
"init" : function(config) {
let prop1 = this.getProp('prop1') ? this.getAttribute('prop1') : "";
//in the init this.getComp() is used to obtain the component
this.getComp().addEventListener('click', e => {
this.getComp().querySelector("b").innerHTML = new Date();
});
},
watch : function(attribute) {
if (attribute.name == 'name') { //in the watch this.comp is a reference to this component
attribute.comp.querySelector('b').innerHTML = `Hello, ${attribute.newValue}`;
}
}
}
DrowJS.register(config);
```
## Outline
```
//Define Component
//Template for Component
template = `
Title: {{title}}
Link: {{link}}
`
//Component Config
var myComp = {
"name" : "my-comp",
"props": ['title','link'],
"template": template,
"init" : function(config) { //optional init
},
watch : function(attribute) { //optional watch -- hooks/useEffect
}
}
//Register Component
DrowJS.register(myComp); //using the config created earlier
```
## Examples
Basic Example:
[Example 1](src/index.html)
## Setup from npm
First install dependencies:
```
npm install
```
Run commands:
```
npm run server
```
## Credits
Author [johnfacey.dev](https://johnfacey.dev/)
Twitter [twitter.com/johnfacey](https://twitter.com/johnfacey)