From 89478cb057b8d21892e531bf03ee97b01b11bbbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vladim=C3=ADr?= <8machy@seznam.cz>
Date: Sun, 12 Nov 2023 20:26:30 +0100
Subject: [PATCH] wip

---
 first.html                                   |  4 +-
 index.html                                   | 58 +++---------
 packages/signalizejs/ajax/package.json       |  8 --
 packages/signalizejs/ajax/src/index.ts       | 92 --------------------
 packages/signalizejs/directives/src/index.ts |  1 +
 packages/signalizejs/fetch/package.json      |  8 ++
 packages/signalizejs/fetch/src/index.ts      | 89 +++++++++++++++++++
 packages/signalizejs/logger/src/index.ts     | 21 ++---
 packages/signalizejs/package.json            |  8 +-
 packages/signalizejs/spa/src/index.ts        |  7 +-
 rollup.config.js                             | 12 +--
 second.html                                  |  6 +-
 tsconfig.json                                |  2 +-
 vite.config.js                               |  2 +-
 14 files changed, 137 insertions(+), 181 deletions(-)
 delete mode 100755 packages/signalizejs/ajax/package.json
 delete mode 100755 packages/signalizejs/ajax/src/index.ts
 create mode 100755 packages/signalizejs/fetch/package.json
 create mode 100755 packages/signalizejs/fetch/src/index.ts

diff --git a/first.html b/first.html
index 116a437..5bd87d7 100755
--- a/first.html
+++ b/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>
 
diff --git a/index.html b/index.html
index ef83778..872fde7 100755
--- a/index.html
+++ b/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
diff --git a/packages/signalizejs/ajax/package.json b/packages/signalizejs/ajax/package.json
deleted file mode 100755
index 1167aec..0000000
--- a/packages/signalizejs/ajax/package.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-	"name": "signalizejs/ajax",
-	"main": "./dist/ajax.cjs",
-	"module": "./dist/ajax.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"sideEffects": false
-  }
diff --git a/packages/signalizejs/ajax/src/index.ts b/packages/signalizejs/ajax/src/index.ts
deleted file mode 100755
index ab4bedd..0000000
--- a/packages/signalizejs/ajax/src/index.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import type { Signalize, SignalizePlugin, CustomEventListener } from 'signalizejs';
-
-declare module 'signalizejs' {
-	interface Signalize {
-		ajax: (options: AjaxOptions) => Promise<AjaxReturn>
-	}
-
-	interface CustomEventListeners {
-		'ajax:request:start': CustomEventListener
-		'ajax:request:success': CustomEventListener
-		'ajax:request:error': CustomEventListener
-		'ajax:request:end': CustomEventListener
-	}
-}
-
-export interface AjaxReturn {
-	response: Response | null
-	error: any
-}
-
-export interface AjaxRequestOptions extends RequestInit {
-	url: string
-	data?: Record<string, any>
-}
-
-export interface AjaxOptions {
-	requestedWithHeader: string
-}
-
-export default (pluginOptions?: AjaxOptions): SignalizePlugin => {
-	return ($: Signalize) => {
-		const { dispatch } = $;
-
-		$.ajax = async (options: AjaxRequestOptions): Promise<AjaxReturn> => {
-			let response: Response | null = null;
-			let error: Error | null = null
-
-			try {
-				const dataType = typeof options.data;
-
-				if (dataType !== 'undefined') {
-					if (typeof options.body === 'undefined') {
-						options.body = ['string', 'number'].includes(dataType)
-							? options.data
-							: JSON.stringify(options.data);
-					}
-
-					delete options.data;
-				}
-
-				if (typeof options.method === 'undefined' && typeof options.body !== 'undefined') {
-					options.method = 'POST';
-				}
-
-				const url = options.url;
-
-				const requestInit = { ...options };
-				requestInit.headers = { ...{ 'X-Requested-With': pluginOptions?.requestedWithHeader ?? 'XMLHttpRequest' }, ...requestInit.headers ?? {} }
-
-				delete requestInit.url;
-
-				const request = fetch(url, requestInit);
-
-				dispatch('ajax:request:start', { options, request });
-
-				response = await request;
-
-				if (!response.ok) {
-					throw new Error('Ajax error', {
-						cause: {
-							response
-						}
-					})
-				}
-
-				dispatch('ajax:request:success', { options, request });
-			} catch (requestError: any) {
-				response = requestError.cause?.response ?? undefined;
-				error = requestError
-				console.error(error);
-				dispatch('ajax:request:error', { options, response, error });
-			}
-
-			dispatch('ajax:request:end', { options, response, error });
-
-			return {
-				response,
-				error
-			}
-		}
-	}
-}
diff --git a/packages/signalizejs/directives/src/index.ts b/packages/signalizejs/directives/src/index.ts
index e0d8a92..07f805b 100755
--- a/packages/signalizejs/directives/src/index.ts
+++ b/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) {
diff --git a/packages/signalizejs/fetch/package.json b/packages/signalizejs/fetch/package.json
new file mode 100755
index 0000000..3c2f9eb
--- /dev/null
+++ b/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
+  }
diff --git a/packages/signalizejs/fetch/src/index.ts b/packages/signalizejs/fetch/src/index.ts
new file mode 100755
index 0000000..458c3f2
--- /dev/null
+++ b/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
+			}
+		}
+	}
+}
diff --git a/packages/signalizejs/logger/src/index.ts b/packages/signalizejs/logger/src/index.ts
index df860d8..4e4a76e 100755
--- a/packages/signalizejs/logger/src/index.ts
+++ b/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;
 	}
 }
diff --git a/packages/signalizejs/package.json b/packages/signalizejs/package.json
index 946d6a6..734520d 100755
--- a/packages/signalizejs/package.json
+++ b/packages/signalizejs/package.json
@@ -34,10 +34,10 @@
 		},
 		"./dist/*": "./dist/*",
 
-		"./ajax": {
-			"import": "./ajax/dist/ajax.js",
-			"require": "./ajax/dist/ajax.cjs",
-			"types": "./ajax/dist/index.d.ts"
+		"./fetch": {
+			"import": "./fetch/dist/fetch.js",
+			"require": "./fetch/dist/fetch.cjs",
+			"types": "./fetch/dist/index.d.ts"
 		},
 		"./core": {
 			"import": "./core/dist/core.js",
diff --git a/packages/signalizejs/spa/src/index.ts b/packages/signalizejs/spa/src/index.ts
index 37cddda..0abbe49 100755
--- a/packages/signalizejs/spa/src/index.ts
+++ b/packages/signalizejs/spa/src/index.ts
@@ -42,7 +42,7 @@ export interface PluginOptions {
 
 export default (options?: PluginOptions): SignalizePlugin => {
 	return ($: Signalize): void => {
-		const { dispatch, ajax, redraw, select, on } = $;
+		const { dispatch, fetch, redrawSnippet, select, on } = $;
 
 		const spaAttribute = `${$.attributePrefix}spa`;
 		const spaUrlAttribute = `${spaAttribute}${$.attributeSeparator}url`;
@@ -98,7 +98,7 @@ export default (options?: PluginOptions): SignalizePlugin => {
 			} else {
 				dispatch('spa:request:start', { ...dispatchEventData });
 
-				request = await ajax({ url: urlString });
+				request = await fetch(urlString);
 				const requestIsWithoutErroor = request.error === null;
 
 				if (requestIsWithoutErroor) {
@@ -131,7 +131,7 @@ export default (options?: PluginOptions): SignalizePlugin => {
 				}
 
 				if (!isJson(responseData)) {
-					redraw(responseData);
+					redrawSnippet(responseData);
 				}
 
 				if (stateAction === 'replace') {
@@ -283,6 +283,7 @@ export default (options?: PluginOptions): SignalizePlugin => {
 			window.addEventListener('popstate', onPopState);
 		});
 
+		console.log($);
 		$.visit = visit;
 	}
 }
diff --git a/rollup.config.js b/rollup.config.js
index d648dfb..883b488 100755
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -52,25 +52,25 @@ const packages = [
 		]
 	},
 
-	// signalizejs/ajax
+	// signalizejs/fetch
 	{
 		plugins: [
 			typescript({
 				declaration: true,
-				rootDir: `${signalizeDir}/ajax/src`,
-				declarationDir: `${signalizeDir}/ajax/dist`
+				rootDir: `${signalizeDir}/fetch/src`,
+				declarationDir: `${signalizeDir}/fetch/dist`
 			})
 		],
-		input: `${signalizeDir}/ajax/src/index.ts`,
+		input: `${signalizeDir}/fetch/src/index.ts`,
 		treeshake: false,
 		external: ['signalizejs'],
 		output: [
 			{
-				file: `${signalizeDir}/ajax/dist/ajax.js`,
+				file: `${signalizeDir}/fetch/dist/fetch.js`,
 				format: 'esm'
 			},
 			{
-				file: `${signalizeDir}/ajax/dist/ajax.cjs`,
+				file: `${signalizeDir}/fetch/dist/fetch.cjs`,
 				format: 'cjs'
 			}
 		]
diff --git a/second.html b/second.html
index b56bd14..1083bea 100755
--- a/second.html
+++ b/second.html
@@ -6,7 +6,7 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta snippet="spa-cache-control" name="spa-cache-control" content="cache">
-	<title snippet="title">First page</title>
+	<title snippet="title">Second page</title>
 	<script type="module" src="http://localhost:5173/@vite/client"></script>
 </head>
 
@@ -23,12 +23,12 @@
 
 	<script type="module">
 		import Signalize from 'signalizejs';
-		import ajax from 'signalizejs/ajax';
+		import fetch from 'signalizejs/fetch';
 		import snippets from 'signalizejs/snippets';
 		import spa from 'signalizejs/spa';
 
 		new Signalize({
-			plugins: [ ajax, snippets, spa ]
+			plugins: [ fetch(), snippets(), spa() ]
 		});
 	</script>
 
diff --git a/tsconfig.json b/tsconfig.json
index 200128d..f35a1a3 100755
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,7 @@
 		"rootDir": ".",
 		"strict": true,
 		"paths": {
-			"signalizejs/ajax": ["./packages/signalize/ajax"],
+			"signalizejs/fetch": ["./packages/signalize/fetch"],
 			"signalizejs/component": ["./packages/signalize/component"],
 			"signalizejs/dialog": ["./packages/signalize/dialog"],
 			"signalizejs/h": ["./packages/signalize/h"],
diff --git a/vite.config.js b/vite.config.js
index abfefee..7d91b49 100755
--- a/vite.config.js
+++ b/vite.config.js
@@ -8,7 +8,7 @@ export default defineConfig({
 	resolve: {
 		conditions: ['development', 'browser'],
 		alias: {
-			'signalizejs/ajax': `${packagesDir}/ajax/src/index.ts`,
+			'signalizejs/fetch': `${packagesDir}/fetch/src/index.ts`,
 			'signalizejs/asset-loader': `${packagesDir}/asset-loader/src/index.ts`,
 			'signalizejs/dialog': `${packagesDir}/dialog/src/index.ts`,
 			'signalizejs/directives': `${packagesDir}/directives/src/index.ts`,