wip

signalizejs · Oct 21, 2023 · be90424 · be90424
1 parent 0f1023c
commit be90424
Show file tree

Hide file tree

Showing 30 changed files with 204 additions and 256 deletions.
diff --git a/first.html b/first.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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">
+	<meta snippet="spa-cache-control" name="spa-cache-control" content="cache">
+	<title snippet="title">First page</title>
+	<script type="module" src="http://localhost:5173/@vite/client"></script>
+</head>
+
+<body>
+	<style>
+		[cloak] {
+			visibility: hidden;
+		}
+	</style>
+
+	<div snippet="content">
+		<a href="/second.html">Second</a>
+	</div>
+
+	<script type="module">
+		import Signalize from 'signalizejs';
+		import ajax from 'signalizejs/ajax';
+		import snippets from 'signalizejs/snippets';
+		import spa from 'signalizejs/spa';
+
+		const signalize = new Signalize();
+		signalize.use(ajax);
+		signalize.use(snippets);
+		signalize.use(spa);
+	</script>
+
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -5,8 +5,8 @@
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<meta data-snippet="spa-cache-control" name="spa-cache-control" content="cache">
-	<title data-snippet="title">First page</title>
+	<meta snippet="spa-cache-control" name="spa-cache-control" content="cache">
+	<title snippet="title">First page</title>
 	<script type="module" src="http://localhost:5173/@vite/client"></script>
 </head>
 
@@ -117,30 +117,22 @@
 		</template>
 	</div> -->
 
-	<div id="app"></div>
+	<div>
+
+	</div>
 
 	<script type="module">
-		// Import signalize
 		import Signalize from 'signalizejs';
-		// Import Hyperscript Plugin
-		import HyperscriptPlugin from 'signalizejs/h'
-
-		// Init signalize
-		const signalize = new Signalize();
-		// Use Hyperscript Plugin
-		signalize.use(HyperscriptPlugin);
-		const { signal, select, h } = signalize;
-		// Create text signal
-		const text = signal(0);
-
-		select('#app').replaceWith(
-			// Create elements
-			h('div', {id: app},
-				// Bind text signal to element attributes
-				h('input', {value: text}),
-				h('div', text)
-			)
-		);
+
+		const { Signal } = new Signalize();
+		class Number extends Signal {
+			increment() {
+				this.set(this.get() + 1);
+			}
+		}
+		const number = new Number(0);
+		number.increment();
+		console.log(number())
 	</script>
 
 </body>

diff --git a/packages/signalizejs/asset-loader/src/index.ts b/packages/signalizejs/asset-loader/src/index.ts
@@ -138,5 +138,5 @@ export default (signalize: Signalize): void => {
 		})
 	});
 
-	signalize.load = load;
+	signalize.loadAsset = load;
 }
diff --git a/packages/signalizejs/core/package.json b/packages/signalizejs/core/package.json
diff --git a/packages/signalizejs/core/src/Signalize.ts b/packages/signalizejs/core/src/Signalize.ts
diff --git a/packages/signalizejs/core/src/index.global.ts b/packages/signalizejs/core/src/index.global.ts
diff --git a/packages/signalizejs/core/src/index.ts b/packages/signalizejs/core/src/index.ts
diff --git a/packages/signalizejs/core/tests/bind.spec.ts b/packages/signalizejs/core/tests/bind.spec.ts
diff --git a/packages/signalizejs/core/tests/pages/bind.html b/packages/signalizejs/core/tests/pages/bind.html
diff --git a/packages/signalizejs/directives/src/index.ts b/packages/signalizejs/directives/src/index.ts
@@ -1,5 +1,5 @@
-import type Signalize from 'signalizejs/core'
-import type { CustomEventListener, Scope } from 'signalizejs/core';
+import type Signalize from 'signalizejs'
+import type { CustomEventListener, Scope } from 'signalizejs';
 
 declare module '..' {
 	interface Signalize {
@@ -190,11 +190,10 @@ export default (signalize: Signalize): void => {
 		if (!(cacheKey in createFunctionCache)) {
 			const functionDataKeys = Object.keys({...globals, ...context});
 			createFunctionCache[cacheKey] = async function (data) {
-				let functionData = {...globals, ...data}
+				let functionData = {signalize, ...globals, ...data}
 				try {
 					return new AsyncFunction('_context', '_element', `
 						try {
-							console.log('he');
 							let { ${functionDataKeys.join(',')} } = _context;
 							${functionString}
 						} catch(e) {
@@ -653,5 +652,4 @@ export default (signalize: Signalize): void => {
 	})
 
 	signalize.directive = directive;
-
 }
diff --git a/packages/signalizejs/spa/src/index.ts b/packages/signalizejs/spa/src/index.ts
@@ -22,9 +22,15 @@ type StateAction = 'push' | 'replace';
 
 interface VisitData {
 	url: string | URL
+	scrollX?: number
+	scrollY?: number
 	stateAction?: StateAction
 }
 
+interface SpaHistoryState extends Partial<VisitData> {
+	spa?: true
+}
+
 interface SpaDispatchEventData extends VisitData {
 	success?: boolean
 }
@@ -123,10 +129,20 @@ export default (signalize: Signalize): void => {
 				redraw(responseData);
 			}
 
+			console.log(data);
 			if (stateAction === 'replace') {
 				window.history.replaceState(window.history.state, '', urlString);
 			} else if (stateAction === 'push') {
-				window.history.pushState({ spa: true }, '', urlString);
+				window.history.pushState(
+					{
+						url: data.url,
+						spa: true,
+						scrollX: data.scrollX ?? window.scrollX,
+						scrollY: data.scrollY ?? window.scrollY
+					},
+					'',
+					urlString
+				);
 			}
 
 			if (shouldCacheResponse === null) {
@@ -168,7 +184,7 @@ export default (signalize: Signalize): void => {
 						});
 					}
 				} else {
-					window.scrollTo(0, 0)
+					window.scrollTo(data.scrollX ?? 0, data.scrollY ?? 0)
 				}
 			}
 
@@ -182,18 +198,23 @@ export default (signalize: Signalize): void => {
 	}
 
 	const onPopState = (): void => {
-		if (typeof window.history.state?.spa !== 'boolean') {
+		const state = window.history.state as SpaHistoryState;
+		console.log(state?.spa ?? false);
+		if (!(state?.spa ?? false)) {
 			return;
 		}
 
+		console.log(state);
 		const location = new URL(window.location.href);
 
 		if (location === currentLocation || (location.pathname === currentLocation.pathname && location.hash !== currentLocation.hash)) {
 			return;
 		}
 
-		const visitConfig = {
-			url: location
+		const visitConfig: VisitData = {
+			url: location,
+			scrollX: state.scrollX,
+			scrollY: state.scrollY
 		};
 
 		dispatch('spa:popstate', visitConfig);
@@ -230,7 +251,13 @@ export default (signalize: Signalize): void => {
 		}
 
 		if (window.history.state === null) {
-			window.history.replaceState({ spa: true }, '', window.location.href);
+			window.history.replaceState(
+				{
+					spa: true, scrollX: window.scrollX, scrollY: window.scrollY
+				},
+				'',
+				window.location.href
+			);
 		}
 
 		event.preventDefault();