als-component
Advanced tools
@@ -12,3 +12,4 @@ class Component { | ||
} | ||
} | ||
try {module.exports = Component} catch{} |
{ | ||
"name": "als-component", | ||
"version": "0.2.0", | ||
"version": "0.3.0", | ||
"description": "Managing components and states.", | ||
@@ -5,0 +5,0 @@ "main": "export.js", |
# Als-component | ||
## About | ||
Als-component allows you to manage dom content with JavaScript. | ||
**new in V0.3** : ``router.js`` | ||
To show html colored code inside string in js, use es6-string-html plugin in vsCode and /*html*/`html code`. | ||
@@ -131,1 +137,40 @@ | ||
``` | ||
## router.js | ||
router.js has function ``router(routes)``. The function allows you to use html layout for js files and functions. | ||
Here is example: | ||
```html | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<script src="/node_modules/als-component/component.js"></script> | ||
<script src="/node_modules/als-component/router.js"></script> | ||
<script> | ||
router({ | ||
test1:'/test1.js', | ||
test:() => new Componenet('test',/*html*/` | ||
<main id="main">Hello from test fn</main> | ||
`).update('main') | ||
}) | ||
</script> | ||
<title>Todos</title> | ||
</head> | ||
<body> | ||
<nav> | ||
<a href="?route=test">test</a> | ||
<a href="?route=test1">test1</a> | ||
</nav> | ||
<main id="main"></main> | ||
</body> | ||
</html> | ||
``` | ||
test1.js file | ||
```javascript | ||
new Componenet('test',/*html*/` | ||
<main id="main">Hello from test1.js</main> | ||
`).update('main') | ||
``` |
6463
30.25%5
25%52
33.33%176
34.35%