chore: Update version to 0.2.2 and refactor state management in main.ts

Author: riccardodebenedictis

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ratiosolver/flick",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "description": "A tiny and focused UI framework designed for clarity and speed",
   "main": "dist/index.js",

package.json

@@ -7,57 +7,54 @@ enum Tabs {
   About,
   Contact
 }
-let currentTab: Tabs = Tabs.Home;
 
 enum Pages {
   Dashboard,
   Settings,
   Profile,
   Help
 }
-let currentPage: Pages = Pages.Dashboard;
 
 const table_headers = ['ID', 'Name', 'Role'];
 const table = [
   { id: 1, name: 'Alice', role: 'Admin' },
   { id: 2, name: 'Bob', role: 'User' },
   { id: 3, name: 'Charlie', role: 'Moderator' }
 ]
-let current_row: number | null = null;
 
 flick.mount(() => {
   const navbar = Navbar(OffcanvasBrand('Flick'), NavbarList([
     NavbarItem('Home', () => {
-      currentTab = Tabs.Home;
+      flick.ctx.currentTab = Tabs.Home;
       flick.redraw();
-    }, currentTab === Tabs.Home),
+    }, flick.ctx.currentTab === Tabs.Home),
     NavbarItem('About', () => {
-      currentTab = Tabs.About;
+      flick.ctx.currentTab = Tabs.About;
       flick.redraw();
-    }, currentTab === Tabs.About),
+    }, flick.ctx.currentTab === Tabs.About),
     NavbarItem('Contact', () => {
-      currentTab = Tabs.Contact;
+      flick.ctx.currentTab = Tabs.Contact;
       flick.redraw();
-    }, currentTab === Tabs.Contact)
+    }, flick.ctx.currentTab === Tabs.Contact)
   ]));
 
   const offcanvas_content = ListGroup([
     ListGroupItem('Dashboard', () => {
-      currentPage = Pages.Dashboard;
+      flick.ctx.currentPage = Pages.Dashboard;
       flick.redraw();
-    }, currentPage === Pages.Dashboard),
+    }, flick.ctx.currentPage === Pages.Dashboard),
     ListGroupItem('Settings', () => {
-      currentPage = Pages.Settings;
+      flick.ctx.currentPage = Pages.Settings;
       flick.redraw();
-    }, currentPage === Pages.Settings),
+    }, flick.ctx.currentPage === Pages.Settings),
     ListGroupItem('Profile', () => {
-      currentPage = Pages.Profile;
+      flick.ctx.currentPage = Pages.Profile;
       flick.redraw();
-    }, currentPage === Pages.Profile),
+    }, flick.ctx.currentPage === Pages.Profile),
     ListGroupItem('Help', () => {
-      currentPage = Pages.Help;
+      flick.ctx.currentPage = Pages.Help;
       flick.redraw();
-    }, currentPage === Pages.Help),
+    }, flick.ctx.currentPage === Pages.Help),
     ListGroupCheckbox('Enable Notifications', false, (checked) => {
       console.log('Notifications toggled:', checked);
     }),
@@ -72,9 +69,9 @@ flick.mount(() => {
     Button('Click Me', () => console.log('Button clicked!')),
     Table(table_headers, table.map(item => Row([item.id.toString(), item.name, item.role], () => {
       console.log('Row clicked:', item);
-      current_row = item.id;
+      flick.ctx.currentRow = item.id;
       flick.redraw();
-    }, current_row === item.id))),
+    }, flick.ctx.currentRow === item.id))),
     Offcanvas(
       OffcanvasBody(offcanvas_content),
       OffcanvasHeader('Flick Offcanvas')

playground/main.ts

@@ -8,6 +8,7 @@ export type Component = () => VNode;
 class Flick {
     private old_node: VNode | Element | null = null;
     private root: Component | null = null;
+    public ctx: Record<string | symbol, unknown> = {};
 
     public mount(root: Component = () => App(), container_id: string = 'app') {
         this.old_node = document.getElementById(container_id)!;