enhance dynaticjs.md

2.0
adb-sh 2 years ago
parent e467e40d58
commit 50aa4e5524

@ -12,6 +12,71 @@ meta:
a simple reactive runtime JS framework inspired by Vue a simple reactive runtime JS framework inspired by Vue
## about
- stack: js - stack: js
- repo: [github.com](https://github.com/adb-sh/dynaticjs) - repo: [github.com](https://github.com/adb-sh/dynaticjs)
- boilerplate repo: [github.com](https://github.com/adb-sh/dynaticjs-boilerplate)
- npm: [npmjs.com](https://www.npmjs.com/package/dynaticjs) - npm: [npmjs.com](https://www.npmjs.com/package/dynaticjs)
## current features
- dynamic router
- components (recursive)
- data binding (from component to component)
- trigger rerender components on data change
- scoped references to DOM elements
## simple component example
```javascript
import Component from "dynaticjs/Component";
import { propFactory } from "dynaticjs/helpers.js";
import RouterLink from "dynaticjs/components/RouterLink.js";
import RouterView from "dynaticjs/components/RouterView.js";
import Home from "./pages/Home.js";
export default class App extends Component {
init() {
return {
components: {
RouterLink,
RouterView,
},
};
}
data() {
return {
routes: propFactory([
{
name: 'home',
title: 'Home',
path: '/',
Component: Home,
},
]),
};
}
render(state) {
return `
<div id="app">
<nav ref="nav">
<router-link class="btn btn-primary" to="home">Home</router-link>
<router-link class="btn btn-primary" to="about">About</router-link>
</nav>
<main>
<h1>DynaticJS Boilerplate</h1>
<router-view bind:routes="routes"></router-view>
</main>
</div>
`;
}
setup() {
console.log("Hello World :D");
console.log("#app element", this.$el); //corresponding DOM element
console.log("nav element", this.$refs.nav); //scoped reference to DOM element with the attribute `ref="nav"`
console.log("child components in App", this.$components) //references to child components
}
};
```
[full example](https://github.com/adb-sh/dynaticjs-boilerplate/blob/master/src/App.js)

Loading…
Cancel
Save