fix readme

atellmer · Jul 14, 2022 · 1b48bd9 · 1b48bd9
1 parent 6f163d0
commit 1b48bd9
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,13 @@
-# Dark
+# Dark 🌒
 
 Dark is lightweight (10 Kb gzipped) component-and-hook-based UI rendering engine for javascript apps without dependencies and written in Typescript 💫
 
+![Dark](./assets/cover.jpg)
+
 ## Notice
 This project was written in my free time as a hobby. I challenged myself: can I write something similar to React without third-party dependencies and alone. It took me about 4 years to bring it to an acceptable quality (but this is not accurate). It would probably take you much less time to do it. I rewrote it many times from scratch because I didn't like a lot of it. In the end, I decided to bring it to release, since the "ideal" is still unattainable. In addition, it is necessary to bring the work started to the end. I didn't get to do a lot of what I wanted to do. That is life. You can use the code at your own risk.
 
-The biggest discovery for me: writing a rendering library is not difficult, it is difficult to write one that is fast and consumes little memory. And this is a really difficult task.
+The biggest discovery for me: writing a rendering library is not difficult, it is difficult to write one that is fast and consumes little memory. And this is a really hard task.
 
 ## Installation
 npm:
@@ -16,6 +18,12 @@ yarn:
 ```
 yarn add @dark-engine/core @dark-engine/platform-browser
 ```
+CDN:
+```html
+<script src="https://unpkg.com/@dark-engine/core/umd/dark-core.production.min.js"></script>
+<script src="https://unpkg.com/@dark-engine/platform-browser/umd/dark-platform-browser.production.min.js"></script>
+```
+
 ## API overview
 The public API is partially similar to the React API and includes 2 packages - core and browser support.
 
@@ -227,7 +235,7 @@ const Component = createComponent(({ isOpen }) => {
   return (
     <Fragment>
       <div>Hello</div>
-      {isOpen ? <ComponentOne> : <ComponentTwo>}
+      {isOpen ? <ComponentOne /> : <ComponentTwo />}
       <div>world</div>
     </Fragment>
   );

diff --git a/assets/cover.jpg b/assets/cover.jpg
diff --git a/examples/old-school/index.html b/examples/old-school/index.html
@@ -10,68 +10,50 @@
       box-sizing: border-box;
     }
     html, body {
-      position: relative;
       width: 100%;
-      min-height: 100vh;
       margin: 0;
       padding: 0;
     }
     body {
-      color: black;
       background-color: #222;
       color: white;
     }
   </style>
 </head>
 <body>
   <div id="root"></div>
-  <div id="portal"></div>
   <!-- deps start -->
-  <script src='./js/core.prod.umd.min.js'></script>
-  <script src='./js/browser.prod.umd.min.js'></script>
+  <script src="https://unpkg.com/@dark-engine/core/umd/dark-core.production.min.js"></script>
+  <script src="https://unpkg.com/@dark-engine/platform-browser/umd/dark-platform-browser.production.min.js"></script>
   <!-- deps end -->
   <script>
     // export from global variables
-    const { View, Text, createComponent, useState, useEffect } = DarkCore;
-    const { render, createPortal } = DarkPlatformBrowser;
+    const { View, Text, createComponent, useState } = DarkCore;
+    const { render } = DarkPlatformBrowser;
 
     // start coding...
     const div = props => View({ ...props, as: 'div' });
+    const input = props => View({ ...props, void: true, as: 'input' });
 
-    // Timer component
-    const Timer = createComponent(({ slot }) => {
-    const [seconds, setSeconds] = useState(0);
+    // App component
+    const App = createComponent(() => {
+      const [value, setValue] = useState('xxx');
 
-    useEffect(() => {
-      const timerId = setInterval(() => {
-        setSeconds(x => x + 1);
-      }, 1000);
+      const handleInput = e => setValue(e.target.value);
 
-      return () => clearInterval(timerId);
-    }, []);
+      return [
+        div({
+          slot: Text(`Hello: ${value}`),
+        }),
+        input({
+          value,
+          onInput: handleInput,
+        }),
+      ];
+    });
 
-    return slot(seconds);
-  });
-
-  // App component
-  const App = createComponent(() => {
-    return [
-      div({
-        slot: Text('Timer component...')
-      }),
-      Timer({
-        slot: seconds => div({
-          slot: [
-            Text(`timer: ${seconds}`),
-            createPortal(Text(`hello from portal! ${seconds}`), document.getElementById('portal')),
-          ]
-        })
-      })
-    ];
-  });
-
-  // render app
-  render(App(), document.getElementById('root'));
+    // render app
+    render(App(), document.getElementById('root'));
   </script>
 </body>
 </html>
diff --git a/examples/old-school/js/browser.prod.umd.min.js b/examples/old-school/js/browser.prod.umd.min.js
diff --git a/examples/old-school/js/core.prod.umd.min.js b/examples/old-school/js/core.prod.umd.min.js
diff --git a/packages/core/README.md b/packages/core/README.md
@@ -1 +1,5 @@
-# Dark
+# Dark 🌒
+
+Dark is lightweight (10 Kb gzipped) component-and-hook-based UI rendering engine for javascript apps without dependencies and written in Typescript 💫
+
+[README](https://github.com/atellmer/dark)
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dark-engine/core",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Dark is lightweight (10 Kb gzipped) component-and-hook-based UI rendering engine for javascript apps without dependencies and written in Typescript 💫",
   "author": "AlexPlex",
   "license": "MIT",

diff --git a/packages/platform-browser/README.md b/packages/platform-browser/README.md
@@ -1 +1,5 @@
-# Dark
+# Dark 🌒
+
+Dark is lightweight (10 Kb gzipped) component-and-hook-based UI rendering engine for javascript apps without dependencies and written in Typescript 💫
+
+[README](https://github.com/atellmer/dark)
diff --git a/packages/platform-browser/package.json b/packages/platform-browser/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dark-engine/platform-browser",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Dark is lightweight (10 Kb gzipped) component-and-hook-based UI rendering engine for javascript apps without dependencies and written in Typescript 💫",
   "author": "AlexPlex",
   "license": "MIT",