wip

first.html

@@ -23,12 +23,12 @@
 
 	<script type="module">
 		import Signalize from 'signalizejs';
-		import ajax from 'signalizejs/ajax';
+		import ajax from 'signalizejs/fetch';
 		import snippets from 'signalizejs/snippets';
 		import spa from 'signalizejs/spa';
 
 		new Signalize({
-			plugins: [ ajax, snippets, spa ]
+			plugins: [ ajax(), snippets(), spa() ]
 		});
 	</script>
 

index.html

@@ -41,27 +41,12 @@
 		}
 	</style>
 
-	<form $items="[]" $value="" @submit="() => {
-		$event.preventDefault();
-		items.set([...new Set([...items(), value()])]);
-		value.set('');
-	}">
-		<!-- Shortcuts for attribute binding -->
-		<input {value} placeholder="Type something" required>
-		<button>Add</button>
-		<br>
-		<!-- Native for of/in loops -->
-		<template :for="item of items">
-			<!-- Iterator feature: count, first, last, odd, even -->
-			<div :text="item + (iterator.last ? '' : ', ')" :style="iterator.odd ? 'color:red': 'color:blue'"></div>
-		</template>
-	</form>
 	<script type="module">
 		import Signalize from 'signalizejs';
 		import directives from 'signalizejs/directives';
 
 		// Use the directives plugin
-		new Signalize({ plugins: [directives()] })
+		const $ = new Signalize({ plugins: [directives()] });
 	</script>
 
 	<!-- <input id="smaller" type="number">
@@ -70,13 +55,18 @@
 	<div id="sum"></div>
  -->
 	<!-- Conditional loop for large amount of elements -->
-	<div $text="'Hello World!'" $count="10">
+	<!-- <div $text="'fu'" $count="1">
+		<template :for="i of count()">
+			<span>-</span>
+		</template>
+	</div> -->
+	<!-- <div id="root" $text="'Hello World!'" $count="1000">
 		<input :value="text">
 		<button @click="count.set(count() + 1)">Přidej<span :text="count"></span></button>
 		<button @click="count.set(count() - 1)">Odeber<span :text="count"></span></button><br>
 		<ul>
 			<template :for="i of count()">
-				<li :key="i">
+				<li>
 					<template :if="i % 2 !== 0">
 						<span :text="'Odd' + i + ' - ' + text"></span>
 					</template>
@@ -86,11 +76,6 @@
 				</li>
 			</template>
 		</ul>
-	</div>
-
-	<!-- <div $text="">
-		<input :value="text">
-		<div :text="text"></div>
 	</div> -->
 
 	<!-- <form $items="{}" $text="" @submit="
@@ -101,12 +86,12 @@
 		<input :value="text">
 		<ul>
 			<template :for="item of Object.keys(items()).sort()">
-				<li :key="item.replace(/s/g, '')">
+				<li :key="item">
 					<a
 						role="button"
 						@click="() => {
 							const newItems = items();
-							delete newItems[item];
+							delete newItems[item()];
 							items.set(newItems);
 						}
 						"
@@ -136,7 +121,7 @@
 		</template>
 	</div> -->
 
-	<!-- <div $items="[]">
+	 <!-- <div $items="[]">
 		<button @click="items.set([items().length, ...items()])" :text="'+' + items().length"></button>
 		<button @click="items.set(items().slice(1))" :text="'-' + items().length"></button>
 
@@ -165,27 +150,6 @@
 		</div>
 	</div> -->
 
-	<!-- <div $number="0">
-		<button @click="number.set(number() + 1)">+</button>
-		<button @click="number.set(number() - 1)">-</button>
-		<template :if="number() > 0">
-			<div>Yupí! <span :html="number"></span></div>
-		</template>
-	</div> -->
-	<!-- <div id="cart-form"></div>
-
-	<div $count="1">
-		<button @click="count.set(count() + 1)">+</button>
-		<button @click="count.set(count() - 1)">-</button>
-		<template id="loop" singleroot :if="count > 0">
-			<div></div>
-
-		</template>
-		<div template="loop">
-			<div></div>
-		</div>
-	</div> -->
-
 	<!-- <div $items="{
 		birth: 0,
 		label: 2

packages/signalizejs/directives/src/index.ts

@@ -385,6 +385,7 @@ export default (options?: PluginOptions): SignalizePlugin => {
 							odd: counter % 2 !== 0,
 							even: counter % 2 === 0
 						});
+						console.log(counter, iterator)
 						let destruct = {};
 
 						if (newContextVariables.length > 1) {

packages/signalizejs/fetch/package.json

@@ -0,0 +1,8 @@
+{
+	"name": "signalizejs/fetch",
+	"main": "./dist/fetch.cjs",
+	"module": "./dist/fetch.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"sideEffects": false
+  }

packages/signalizejs/fetch/src/index.ts

@@ -0,0 +1,89 @@
+import type { Signalize, SignalizePlugin, CustomEventListener } from 'signalizejs';
+
+declare module 'signalizejs' {
+	interface Signalize {
+		fetch: <T>(rresource: RequestInfo | URL, options?: RequestInit | undefined) => Promise<FetchReturn<T>>
+	}
+
+	interface CustomEventListeners {
+		'fetch:request:start': CustomEventListener
+		'fetch:request:success': CustomEventListener
+		'fetch:request:error': CustomEventListener
+		'fetch:request:end': CustomEventListener
+	}
+}
+
+export interface FetchReturn {
+	response: Response | null
+	error: any
+}
+
+export interface PluginOptions {
+	requestedWithHeader?: string
+	acceptHeader?: string
+	forceMultipartFormData?: boolean
+}
+
+export default (pluginOptions?: PluginOptions): SignalizePlugin => {
+	return ($: Signalize) => {
+		const { dispatch, merge } = $;
+
+		$.fetch = async (resource: RequestInfo | URL, options?: RequestInit | undefined): Promise<FetchReturn> => {
+			let response: Response | null = null;
+			let error: Error | null = null
+			const isBodyDefined = options?.body !== undefined
+			let requestOptions: RequestInit = {
+				headers: {
+					'X-Requested-With': pluginOptions?.requestedWithHeader ?? 'XMLHttpRequest',
+					Accept: pluginOptions?.acceptHeader ?? '*'
+				}
+			}
+
+			try {
+				if (isBodyDefined) {
+					requestOptions.method = 'POST';
+					if (options.body instanceof FormData) {
+						requestOptions.headers['Content-Type'] = pluginOptions?.forceMultipartFormData === true ||
+							Array.from(options.body.values()).some((value) => {
+								return value instanceof Blob || value instanceof File
+							})
+							? 'multipart/form-data'
+							: 'application/x-www-form-urlencoded';
+					} else if (['string', 'number'].includes(typeof options.body)) {
+						requestOptions.body = JSON.stringify(options.body);
+						requestOptions.headers['Content-Type'] = 'application/json'
+					}
+				}
+
+				requestOptions = merge(requestOptions, options ?? {})
+				const request = fetch(resource, requestOptions);
+
+				dispatch('fetch:request:start', { resource, options: requestOptions, request });
+
+				response = await request;
+
+				if (!response.ok) {
+					throw new Error('Ajax error', {
+						cause: {
+							response
+						}
+					})
+				}
+
+				dispatch('fetch:request:success', { resource, options: requestOptions, request });
+			} catch (requestError: any) {
+				response = requestError.cause?.response ?? undefined;
+				error = requestError
+				console.error(error);
+				dispatch('fetch:request:error', { resource, options: requestOptions, response, error });
+			}
+
+			dispatch('fetch:request:end', { resource, options: requestOptions, response, error });
+
+			return {
+				response,
+				error
+			}
+		}
+	}
+}

packages/signalizejs/logger/src/index.ts

@@ -1,10 +1,7 @@
 import type { Signalize, SignalizePlugin, CustomEventListener } from 'signalizejs';
-import type { AjaxOptions, AjaxReturn } from 'signalizejs/ajax';
+import type { FetchReturn } from 'signalizejs/fetch';
 
 declare module '..' {
-	interface Signalize {
-		sendToServer: (options: AjaxOptions) => Promise<AjaxReturn>
-	}
 
 	interface CustomEventListeners {
 		'logger:log': CustomEventListener
@@ -22,7 +19,7 @@ interface Log {
 }
 
 interface CompleteLogData extends Log {
-	message: string
+	body: Log
 	url: string
 }
 
@@ -34,7 +31,7 @@ export interface PluginOptions {
 
 export default (options: PluginOptions): SignalizePlugin => {
 	return ($: Signalize) => {
-		const { ajax, dispatch } = $;
+		const { fetch, dispatch } = $;
 		let enabledLevels: Levels[] = ['error'];
 
 		const originalConsoleError = console.error;
@@ -43,19 +40,17 @@ export default (options: PluginOptions): SignalizePlugin => {
 		const originalConsoleWarn = console.warn;
 		const originalWindowOnError = window.onerror;
 
-		const sendToServer = async (url: string, data: CompleteLogData): Promise<AjaxReturn> => {
-			return ajax({ url, data });
-		}
-
 		const handler = (log: Log): void => {
 			const data: CompleteLogData = {
-				...log,
+				body: log,
 				url: window.location.href
 			}
 
 			dispatch(`logger:${log.type}`, {
 				data,
-				sendToServer: async (url: string, customData = data): Promise<AjaxReturn> => await sendToServer(url, customData)
+				sendToServer: async (url = window.location.href, options = { body: data }): Promise<FetchReturn> => fetch(
+					url, options
+				)
 			});
 		}
 
@@ -131,7 +126,5 @@ export default (options: PluginOptions): SignalizePlugin => {
 				handler({});
 			}
 		});
-
-		$.sendToServer = sendToServer;
 	}
 }