speed up

new reactivitiy engine (observable slim) and awc router implementation
fehmi · Aug 31, 2024 · 290e8ae · 290e8ae
1 parent ff756cd
commit 290e8ae
Show file tree

Hide file tree

Showing 37 changed files with 6,338 additions and 399 deletions.
diff --git a/docs/__sidebar.md b/docs/__sidebar.md
diff --git a/docs/awc-router.md b/docs/awc-router.md
@@ -0,0 +1,3 @@
+## AWC Router
+
+This part of the documentation is work in progress. You can check [AWC router repo](https://github.com/colscott/a-wc-router) for more info.
diff --git a/docs/design-tokens.md b/docs/design-tokens.md
@@ -9,10 +9,12 @@ Simply.js provides several methods for design token management. Just choose one
 <repl-component id="st5t6rasly8yim6"></repl-component>
 
 ## Tokens in a global state object
+
 ?> Only use `state` variables in a global style tag. variables in `data` object cannot pass to children.
+
 <repl-component id="3ar1za5hmuy5fal"></repl-component>
 
-## CSS variable in :host
+## CSS variable in ':host'
 <repl-component id="vi3k3uspqvsrvfl"></repl-component>
 
 ## Manage all with UNO!

diff --git a/docs/electron.md b/docs/electron.md
@@ -1,5 +1,7 @@
 ## Electron Integration
 
+!> The router module is deprecated and will be deleted on upcoming releases. Use [AWC router](docs/awc-router) instead.
+
 Add the index.html path as base href.
 
 ```html

diff --git a/docs/lifecycle.md b/docs/lifecycle.md
@@ -18,4 +18,4 @@
 
 ## Usage Example
 
-<repl-component id="ugyr2hpkpqeithx" donwload="true"></repl-component>
+<repl-component id="sp34gk6ealoxiwu" donwload="true"></repl-component>
diff --git a/docs/reactivity.md b/docs/reactivity.md
@@ -14,11 +14,14 @@ You can disable reactivity for specific elements in your template like below. Th
 
 ## Make changes without triggering react/render
 
+?> This aproach can be unnecessary because new template and reactivity engine is fast enough to handle cases like that. Need more test though. This section can be deleted after some battle tests.
+
 It can be helpful for performance reasons. In that scenario, do your changes withot triggering reaction and then render manually when you finish.
 
 <repl-component id="t509ixnfmmbk0n5" donwload="true"></repl-component>
 
 You can also use built-in method to set data without triggering render. Then you can render manually for increasing performance.
+
 ```js
 simply.setWithoutRender(data, {
   total: response.response.headers["X-WP-Total"],

diff --git a/docs/router.md b/docs/router.md
@@ -1,5 +1,7 @@
 ## Router
 
+!> The router module is deprecated and will be deleted on upcoming releases. Use [AWC router](docs/awc-router) instead.
+
 Add your site path as base href.
 
 ```html

diff --git a/docs/sidebar.md b/docs/sidebar.md
@@ -34,7 +34,7 @@
   - [Design Tokens](docs/design-tokens.md)
 
 - <br>Router
-
+  - [AWC Router](docs/awc-router.md)
   - [Router](docs/router.md)
   - [Electron](docs/electron.md)
 

diff --git a/docs/variables.md b/docs/variables.md
@@ -130,9 +130,7 @@ You can use your reactive data variables as a property value in style tag.
 
 ## Changing variable values in `<html>`
 
-It's totally acceptable to change variables in template. Just do like `{data.name = "marilyn monroe"}`. It will change and render the new value right away and trigger reactions. If you want to change the variable value wihout rendering it just comment it like `<!-- {data.name = "marilyn monroe"} -->`
-
-<repl-component id="pg5njqyn1pyud0g" download="true"></repl-component>
+!> It's totally unacceptable to change variables in template like `{data.name = "marilyn monroe"}` or `<!-- {data.name = "marilyn monroe"} -->`. It will cause infinite reaction/render loop. So, simply just don't do it.
 
 ## Using variables from functions that returns values
 

diff --git a/docs/watch.md b/docs/watch.md
@@ -2,4 +2,4 @@
 
 This special event is triggered when a variable in data, state or prop has changed. Here is an example about how you can use it.
 
-<repl-component id="reb9ov0xtlzmyfk" donwload="true"></repl-component>
+<repl-component id="b6rzcjea60h3xot" donwload="true"></repl-component>
diff --git a/examples/app-router/.htaccess b/examples/app-router/.htaccess
@@ -0,0 +1,9 @@
+
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  #RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . index.html [L]
+</IfModule>
diff --git a/examples/app-router/a-page.html b/examples/app-router/a-page.html
@@ -0,0 +1,40 @@
+<html>
+a pages {state.name}
+</html>
+<style>
+  p {
+    background: aquamarine;
+    border-radius: 30px;
+    padding: 20px;
+    font-size: 20px;
+    text-align: center;
+    width: 300px;
+    margin: 0 auto;
+    color: aquamarine;
+    color: "{data.color}";
+  }
+</style>
+<script>
+  class {
+    data = {
+      name: "fehmi",
+      age: 37,
+      personalities: ["Calm", "Creative", "Passionate"],
+      hobbies: {
+        "Music Producing": "Kırk yılda bir",
+        Gaming: "Aydı yılda bir",
+        Sports: "Meeeh",
+      },
+      color: "blue"
+    };
+    methods = {
+      asd(e) {
+        alert("asd function called");
+        console.log(event);
+      },
+      bcd() {
+        alert("bcd")
+      }
+    };
+  }
+</script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		## AWC Router

		This part of the documentation is work in progress. You can check [AWC router repo](https://github.com/colscott/a-wc-router) for more info.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,4 +18,4 @@

		## Usage Example

		<repl-component id="ugyr2hpkpqeithx" donwload="true"></repl-component>
		<repl-component id="sp34gk6ealoxiwu" donwload="true"></repl-component>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,4 @@

		This special event is triggered when a variable in data, state or prop has changed. Here is an example about how you can use it.

		<repl-component id="reb9ov0xtlzmyfk" donwload="true"></repl-component>
		<repl-component id="b6rzcjea60h3xot" donwload="true"></repl-component>