revojs 0.0.84 → 0.0.85

package/dist/index.js

@@ -441,8 +441,12 @@ async function $fetch(scope, input, options) {
 function useState(scope, name, value) {
 	const state = createState(value);
 	if (isClient()) {
-		const element = document.querySelector(`#data-${name}`);
-		if (element?.textContent) state.value = JSON.parse(element.textContent);
+		if (STATES === void 0) {
+			const element = document.getElementById("STATES");
+			STATES = element?.textContent ? JSON.parse(element.textContent) : {};
+		}
+		state.value = STATES[name];
+		createCompute(scope, () => STATES && (STATES[name] = state.value));
 	}
 	if (isServer()) {
 		const { states } = useRuntime(scope);
@@ -458,7 +462,7 @@ function useAsync(scope, name, invoke, options) {
 		isLoading.value = true;
 		try {
 			const result = await invoke();
-			if (options?.viewTransition) await startViewTransition(options.viewTransition, () => state.value = result);
+			if (JSON.stringify(state.value ?? {}) !== JSON.stringify(result)) if (options?.viewTransition) await startViewTransition(options.viewTransition, () => state.value = result);
 			else state.value = result;
 		} catch (error) {
 			options?.catch?.(error);
@@ -488,8 +492,21 @@ async function createRuntime() {
 			const route = routes[path];
 			if (isRoute(route)) return route.fetch(scope);
 			const { states } = useRuntime(scope);
-			const content = await renderToString(scope, await import("#virtual/client").then((module) => module.client), { head: { children: ["<!--DATA-->"] } });
-			return sendHtml(scope, content.replace("<!--DATA-->", Object.entries(states).reduce((data, [name$1, state]) => `${data} <script id="data-${name$1}" type="application/json"> ${JSON.stringify(state.value)} <\/script>`, "")));
+			const content = await renderToString(scope, await import("#virtual/client").then((module) => module.client), { head: { children: ["<!--STATES-->"] } });
+			const entries = Object.entries(states).reduce((states$1, [name$1, state]) => {
+				return {
+					...states$1,
+					[name$1]: state.value
+				};
+			}, {});
+			return sendHtml(scope, content.replace("<!--STATES-->", await renderToString(scope, {
+				tag: "script",
+				attributes: {
+					id: "STATES",
+					type: "application/json"
+				},
+				children: [JSON.stringify(entries)]
+			})));
 		} }));
 	}
 	const assets = await import("#virtual/assets").then((module) => module.default);
@@ -532,6 +549,7 @@ async function createRuntime() {
 		}
 	};
 }
+let STATES;
 const RUNTIME_CONTEXT = defineContext("RUNTIME_CONTEXT");
 const ROUTE_CONTEXT = defineContext("ROUTE_CONTEXT");
 
@@ -977,4 +995,4 @@ function useLocale(scope, context) {
 const LOCALE_CONTEXT = defineContext("LOCALE_CONTEXT");
 
 //#endregion
-export { $fetch, AfterNavigateEvent, CLIENT, Compute, HOST_CONTEXT, Handler, LOCALE_CONTEXT, MountedEvent, NavigateEvent, Page, ROUTER_CONTEXT, ROUTE_CONTEXT, RUNTIME_CONTEXT, Radix, SERVER, Scope, StopEvent, activeCompute, activeViewTransition, components, createApp, createCompute, createElement, createMemo, createRuntime, createState, defineComponent, defineContext, defineMiddleware, defineRoute, fileName, fromValue, hydrate, isClient, isComponent, isCustomElement, isRoute, isServer, isTemplate, mergeObjects, mimeType, onMounted, onViewTransition, preventDefault, provideLocaleContext, provideRouterContext, registerComponent, renderToString, sendBadRequest, sendHtml, sendJson, sendRedirect, sendText, sendUnauthorized, setCookie, startViewTransition, stopImmediatePropagation, stopPropagation, targets, toArray, toCustomElement, toFragment, toPath, toRange, toString, untrack, useAsync, useCookies, useEvent, useFetch, useHost, useLocale, useQuery, useRoute, useRouter, useRuntime, useSetCookies, useState, useUrl };
+export { $fetch, AfterNavigateEvent, CLIENT, Compute, HOST_CONTEXT, Handler, LOCALE_CONTEXT, MountedEvent, NavigateEvent, Page, ROUTER_CONTEXT, ROUTE_CONTEXT, RUNTIME_CONTEXT, Radix, SERVER, STATES, Scope, StopEvent, activeCompute, activeViewTransition, components, createApp, createCompute, createElement, createMemo, createRuntime, createState, defineComponent, defineContext, defineMiddleware, defineRoute, fileName, fromValue, hydrate, isClient, isComponent, isCustomElement, isRoute, isServer, isTemplate, mergeObjects, mimeType, onMounted, onViewTransition, preventDefault, provideLocaleContext, provideRouterContext, registerComponent, renderToString, sendBadRequest, sendHtml, sendJson, sendRedirect, sendText, sendUnauthorized, setCookie, startViewTransition, stopImmediatePropagation, stopPropagation, targets, toArray, toCustomElement, toFragment, toPath, toRange, toString, untrack, useAsync, useCookies, useEvent, useFetch, useHost, useLocale, useQuery, useRoute, useRouter, useRuntime, useSetCookies, useState, useUrl };

package/dist/runtime/index.d.ts

@@ -47,5 +47,6 @@ export declare function useFetch<T, TError = Error>(scope: Scope, input: string
     execute: () => Promise<T | undefined>;
 };
 export declare function createRuntime(): Promise<Runtime>;
+export declare let STATES: Record<string, unknown>;
 export declare const RUNTIME_CONTEXT: import("..").Descriptor<RuntimeContext<Record<string, unknown>>>;
 export declare const ROUTE_CONTEXT: import("..").Descriptor<RouteContext>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "revojs",
-    "version": "0.0.84",
+    "version": "0.0.85",
     "type": "module",
     "repository": "coverbase/revojs",
     "license": "MIT",