wip

signalizejs · Nov 27, 2023 · 46843d4 · 46843d4
1 parent c716dc1
commit 46843d4
Show file tree

Hide file tree

Showing 18 changed files with 278 additions and 354 deletions.
diff --git a/first.html b/first.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<head snippet="head">
+<head>
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -10,30 +10,41 @@
 	<script type="module" src="http://localhost:5173/@vite/client"></script>
 </head>
 
-<body snippet="body">
+<body>
 	<style>
 		[cloak] {
 			visibility: hidden;
 		}
 	</style>
 
-	<a href="/second.html">Second</a>
-
 	<script type="module">
 		import Signalize from 'signalizejs';
 		import fetch from 'signalizejs/fetch';
 		import snippets from 'signalizejs/snippets';
+		import directives from 'signalizejs/directives';
 		import spa from 'signalizejs/spa';
 
-		new Signalize({
+		const { scope } = new Signalize({
 			plugins: [
 				fetch(),
 				snippets(),
-				spa()
+				spa(),
+				directives()
 			]
 		});
+
+		scope('test', ({ data }) => {
+			data.click = () => alert('meh');
+		});
 	</script>
 
+	<div snippet="body">
+		<a href="/second.html">Second</a>
+		<div scope="test">
+			<button @click="click()">Click</button>
+		</div>
+	</div>
+
 </body>
 
 </html>
diff --git a/index.html b/index.html
@@ -38,49 +38,21 @@
 		});
 	</script> -->
 
-	<input id="title-input" placeholder="Add Title">
-<input id="content-input" placeholder="Add Content">
-
-<div id="output"></div>
-
-<script type="module">
-import Signalize from 'signalizejs';
-
-const { Signal, bind } = new Signalize();
-
-// 1. Create article signal
-const article = new Signal({
-	title: 'Hello World!',
-	content: 'Lorem Ipsum'
-});
-
-// 2. Bind article signal to title input
-bind(document.querySelector('#title-input'), {
-	// 2.1 Watch article signal
-	value: [article, {
-		// 2.2 Setter for title proerty
-		set: (title) => article.set({ ...article(), title }),
-		// 2.3 Getter for title property
-		get: () => article().title
-	}]
-});
-
-// 3. Bind article signal to content input
-bind(document.querySelector('#content-input'), {
-	// 3.1 Watch article signal
-	value: [article, {
-		// 3.2 Setter for content property
-		set: (content) => article.set({ ...article(), content }),
-		// 3.3 Getter for content property
-		get: () => article().content
-	}]
-});
-
-// 4. Bind output
-bind(document.querySelector('#output'), {
-	html: [article, () => `Title: ${article().title}<br>Description: ${article().content}` ]
-});
-</script>
+	<script type="module">
+		import Signalize from 'signalizejs';
+		// Import directives core
+		import directives from 'signalizejs/directives';
+		// Import only those directives, you use
+		import forDirective from 'signalizejs/directives/for';
+
+		// Use the directives plugin
+		new Signalize({
+			plugins: [
+				directives(),
+				forDirective()
+			]
+		})
+	</script>
 
 	<!-- <div $count="1">
 		<template :for="i of 1">

diff --git a/packages/signalizejs/package.json b/packages/signalizejs/package.json
@@ -48,11 +48,6 @@
 			"require": "./dist/plugins/directives.cjs",
 			"types": "./dist/plugins/directives.d.ts"
 		},
-		"./directives/bind": {
-			"import": "./dist/plugins/directives/bind.js",
-			"require": "./dist/plugins/directives/bind.cjs",
-			"types": "./dist/plugins/directives/bind.d.ts"
-		},
 		"./directives/for": {
 			"import": "./dist/plugins/directives/for.js",
 			"require": "./dist/plugins/directives/for.cjs",
@@ -63,16 +58,6 @@
 			"require": "./dist/plugins/directives/if.cjs",
 			"types": "./dist/plugins/directives/if.d.ts"
 		},
-		"./directives/on": {
-			"import": "./dist/plugins/directives/on.js",
-			"require": "./dist/plugins/directives/on.cjs",
-			"types": "./dist/plugins/directives/on.d.ts"
-		},
-		"./directives/signal": {
-			"import": "./dist/plugins/directives/signal.js",
-			"require": "./dist/plugins/directives/signal.cjs",
-			"types": "./dist/plugins/directives/signal.d.ts"
-		},
 		"./h": {
 			"import": "./dist/plugins/h.js",
 			"require": "./dist/plugins/h.cjs",

diff --git a/packages/signalizejs/src/Signalize.ts b/packages/signalizejs/src/Signalize.ts
@@ -50,7 +50,58 @@ export class Signalize {
 	#plugins = new Set();
 
 	constructor (options: Partial<SignalizeOptions> = {}) {
-		this.#init(options);
+		this.root = options?.root ?? document;
+		const readyListeners: CallableFunction[] = [];
+		let inited = false;
+
+		const usePlugins = (signalizeInstance: Signalize, plugins: SignalizePlugin[]) => {
+			for (const plugin of plugins) {
+				signalizeInstance.use(plugin);
+			}
+		}
+
+		if (this.root?.__signalize === undefined) {
+			this.attributePrefix = options?.attributePrefix ?? '';
+			this.attributeSeparator = options?.attributeSeparator ?? '-';
+			this.globals = { ...this.globals, ...options?.globals ?? {} };
+			task(this);
+			dispatch(this);
+			on(this);
+			this.customEventListener('signalize:ready', ({ listener }) => {
+				if (inited) {
+					listener(this);
+					return;
+				}
+				readyListeners.push(listener);
+			});
+			off(this);
+			domReady(this);
+			select(this);
+			traverseDom(this);
+			scope(this);
+			signal(this);
+			bind(this);
+			mutationsObserver(this);
+
+			usePlugins(this, options?.plugins ?? []);
+
+			while (readyListeners.length > 0) {
+				readyListeners.shift()();
+			}
+
+			this.on('dom:ready', () => {
+				this.observeMutations(this.root);
+			});
+
+			this.root.__signalize = this;
+			inited = true;
+		}
+
+		const signalizeInstance = this.root.__signalize;
+		signalizeInstance.globals = { ...signalizeInstance.globals, ...options?.globals ?? {} };
+
+		usePlugins(signalizeInstance, options?.plugins ?? []);
+
 		return this.root.__signalize;
 	}
 
@@ -66,10 +117,10 @@ export class Signalize {
 	}
 
 	readonly #init = (options: Partial<SignalizeOptions>): void => {
-		this.root = options?.root ?? document;
+		/* this.root = options?.root ?? document;
 
 		if (this.root?.__signalize !== undefined) {
-			throw new Error('Signalize already initialized for the root');
+			return;
 		}
 
 		this.attributePrefix = options?.attributePrefix ?? '';
@@ -104,7 +155,7 @@ export class Signalize {
 			this.observeMutations(this.root);
 		});
 
-		this.root.__signalize = this;
+		this.root.__signalize = this; */
 	}
 }
 

diff --git a/packages/signalizejs/src/plugins/asset-loader.ts b/packages/signalizejs/src/plugins/asset-loader.ts
diff --git a/packages/signalizejs/src/plugins/bind.ts b/packages/signalizejs/src/plugins/bind.ts
@@ -93,7 +93,6 @@ export default ($: Signalize): void => {
 
 			let getListener: CallableFunction | null = null;
 			let setListener: CallableFunction | null = null;
-
 			if (attributeBinderIsSignal) {
 				getListener = () => attributeBinder();
 				setListener = (value) => attributeBinder.set(value);