Merge pull request #15 from katungi/feat/signals

Feat: Add signals to urban core

docs/pages/introduction.mdx

@@ -12,6 +12,8 @@ To Note: The project is currently in development and is subject to change.
 
 - [File-Based Routing (FBR)](routing)
 
+- [Signals](signals)
+
 ## UI Package
 
 ### Overview

docs/pages/signals.mdx

@@ -0,0 +1,41 @@
+# Signals
+
+Urban-js now has signals!! :rocket:
+
+## Introduction
+Signals are trending at the moment as the most recommended way to manage global and local state.
+❤️
+There are even rumours that signals are being considered as a native JS language feature. 
+
+Our implementation of Signals is built on preact's implementation. To make it work, we use a Babel tranformer to convert our components to reactive components.
+
+To read more about what problems signals solve, check out [Introduction to Signals in Preact](https://preactjs.com/blog/introducing-signals/)
+
+## Usage
+
+Using signals is pretty simple. 
+
+ ```js
+import { useSignal } from "urban-core"
+
+ export default Home() {
+    const count = useSignal(0);
+
+     <div>
+                <span className="text-underline mb-8">Signals Demo</span>
+                <p>
+                    <>Value: {count}</>
+                </p>
+                <button onClick={() => count.value++}>Increment</button>
+                <button onClick={() => count.value--}>Decrement</button>
+            </div>
+}
+```
+
+Yes, it's that simple. 
+
+We also export more powerful features like compute, useCompute and effect 
+
+Docs on the above are coming soon. 
+
+Meantime, ENJOY SIGNALS!

packages/urban-core/package.json

@@ -10,11 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "urban-ui": "workspace:urban-ui",
-    "urban-router": "workspace:urban-router",
+    "@preact/signals-react": "^2.0.0",
+    "@preact/signals-react-transform": "^0.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.21.1"
+    "react-router-dom": "^6.21.1",
+    "urban-router": "workspace:urban-router",
+    "urban-ui": "workspace:urban-ui",
+    "vite-plugin-babel": "^1.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

packages/urban-core/src/main.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { BrowserRouter as Router } from 'react-router-dom'
-import { Router as UrbanRouter } from './router'
+import { Router as UrbanRouter } from '../utils/router'
 
 // migrate to this when the below is fixed
 // import { Router as UrbanRouter } from 'urban-router'

packages/urban-core/src/pages/index.tsx

@@ -1,10 +1,23 @@
 import { Link } from "react-router-dom";
+import { useSignal } from "../../utils/signals"
 
 export default function Home() {
+    const count = useSignal(0);
+
     return (
         <div>
-            <h1 style={{color: '#000'}}>Home</h1>
+            <span className="text-underline">Routing Demo</span>
+            <h3 style={{ color: '#000' }}>Home</h3>
             <Link to={'/about'}>About</Link>
+
+            <div>
+                <span className="text-underline mb-8">Signals Demo</span>
+                <p>
+                    <>Value: {count}</>
+                </p>
+                <button onClick={() => count.value++}>Increment</button>
+                <button onClick={() => count.value--}>Decrement</button>
+            </div>
         </div>
     )
-}
+} 

packages/urban-core/tsconfig.json

@@ -20,6 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
+  "include": ["src", "utils"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

packages/urban-core/utils/signals.tsx

@@ -0,0 +1 @@
+export { signal, useSignal, useComputed, computed, effect } from '@preact/signals-react'

packages/urban-core/vite.config.ts

@@ -1,7 +1,12 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
+import babel from 'vite-plugin-babel';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), babel({
+    babelConfig: {
+      plugins: [["module:@preact/signals-react-transform"]]
+    }
+  })],
 })