https://github.com/ajmd17/blockml-component
A component-based virtual DOM system (similar to React) for blockml.
https://github.com/ajmd17/blockml-component
components react virtual-dom web-components
Last synced: 7 months ago
JSON representation
A component-based virtual DOM system (similar to React) for blockml.
- Host: GitHub
- URL: https://github.com/ajmd17/blockml-component
- Owner: ajmd17
- Created: 2017-09-16T20:04:07.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-21T03:26:11.000Z (about 8 years ago)
- Last Synced: 2024-12-21T11:01:52.366Z (10 months ago)
- Topics: components, react, virtual-dom, web-components
- Language: JavaScript
- Size: 8.79 KB
- Stars: 22
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# blockml-component
A component-based system with a virtual DOM for [blockml](https://github.com/ajmd17/blockml) (a simple language that creates HTML). It is similar to React and Angular, but intended to be as simple as possible.
Example usage:
```
var blockml = require('blockml');
blockml.component = require('blockml-component');
blockml.component('Page', {
render: function (props, children) {
return blockml`
div {
${children}
}
`;
}
});
// a custom "App" component that we can use in our code
blockml.component('App', {
render: function (props, children) {
return blockml`
Page {
h1 {
"Hello World"
}
${children}
}
`;
}
});
// this will hold the rendered html
var html = blockml.render(`
html {
head;
body {
App {
h1 {
"Hello"
}
}
}
}
`);
```