From 50aa4e55247b95b29e6b83d46fa48f9c88f55f02 Mon Sep 17 00:00:00 2001
From: adb-sh <git@adb.sh>
Date: Sun, 11 Dec 2022 23:02:14 +0100
Subject: [PATCH] enhance dynaticjs.md

---
 src/projects/dynaticjs.md | 65 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/src/projects/dynaticjs.md b/src/projects/dynaticjs.md
index deb35d9..e67392e 100644
--- a/src/projects/dynaticjs.md
+++ b/src/projects/dynaticjs.md
@@ -12,6 +12,71 @@ meta:
 
 a simple reactive runtime JS framework inspired by Vue
 
+## about
 - stack: js
 - 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)
+
+## 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)