https://github.com/bugs181/declarative
Declarative templating for Render frameworks such as HTML, React, React Native, Vue, etc
https://github.com/bugs181/declarative
declarative declarative-programming html javascript json react react-native template templating vue vuejs vuejs2
Last synced: 7 months ago
JSON representation
Declarative templating for Render frameworks such as HTML, React, React Native, Vue, etc
- Host: GitHub
- URL: https://github.com/bugs181/declarative
- Owner: bugs181
- License: mit
- Created: 2019-02-08T02:54:48.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-09T21:50:49.000Z (over 6 years ago)
- Last Synced: 2025-03-02T14:55:59.653Z (7 months ago)
- Topics: declarative, declarative-programming, html, javascript, json, react, react-native, template, templating, vue, vuejs, vuejs2
- Language: JavaScript
- Homepage:
- Size: 19.5 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Declarative
Declarative templating for Render frameworks such as HTML, React, React Native, Vue, etc
## Setup: ##
### Node: ###
```
const Decl = require('Declarative')
```
### Browser: ###
```
var Decl = Declarative
```
## Example use: ##
```
const template = {}
const appContext = {}
let decl = new Decl(template, appContext)
let output = decl.render()
```
## Template Example: ###
```
{
div: {
someElement: {
condition: function() { return true }, // Accepts Function, Boolean, or String, returns Boolean or String
content: function() { return 'something' }, // Accepts Function, String, or Object, returns String or Object
tag: 'h2', // optional tag string, can be used instead of tags property.
tags: ['
', '
'], // optional tags, can be any valid HTML or framework syntax
props: { class: 'someElCls' }, // optional object which adds properties to tag.
}
}
}
```
## Optional Context Example: ##
```
{
user: { // element name
// props
username: 'Levi',
loggedIn: true,
admin: false,
}
}
```
## Output Example: ##
```
Welcome Levi
```
## TODOs: ##
- [ ] More error checking
- [ ] Element ID's
- [ ] Data binding for elements
- [ ] Events for data binding
- [ ] References to other elements
## License: ##
[MIT](https://github.com/bugs181/DeclarativeJSON/blob/master/LICENSE)