@stacksjs/stx 0.2.176 → 0.2.177

package/dist/client-script.js

@@ -171,7 +171,8 @@ const BROWSER_CORE_IMPORTS = [
   "readableSize",
   "useActiveElement",
   "useDocumentVisibility",
-  "useIntervalFn"
+  "useIntervalFn",
+  "useTimeoutFn"
 ];
 export function injectBrowserCoreAutoImports(code) {
   const searchable = stripCommentsAndLiterals(code), explicitlyImported = new Set;

package/dist/component-registry.d.ts

@@ -47,6 +47,15 @@ export interface ResolvedProps {
     staticNames: Record<string, string>;
     /** Server-side dynamic bindings — e.g. :count="items.length" (evaluated at compile time) */
     serverDynamic: Record<string, unknown>;
+    /**
+     * Original attribute spelling for any `serverDynamic` key that was camelized.
+     *
+     * Same reason as {@link ResolvedProps.staticNames}: a builtin forwarding an
+     * unconsumed binding onto real markup must spell it the way the author wrote
+     * it, or `:some-attr="x"` goes out as `someAttr` and the browser sees an
+     * attribute it does not know.
+     */
+    serverDynamicNames?: Record<string, string>;
     /** Client-side reactive bindings — expression string preserved for signals */
     clientReactive: Record<string, string>;
     /** Event handler bindings — e.g. @click="handler()" */

package/dist/component-renderer.js

@@ -1,4 +1,5 @@
 import { registry } from "./component-registry.js";
+import { processConditionals } from "./conditionals.js";
 import { registerBuiltins } from "./builtins/index.js";
 import { decodeAttributeEntities, decodeStxProp, findComponentTags, parseMultilineAttributes, pascalToKebab, restoreStashedScripts, stashScriptElements } from "./component-processing.js";
 import { maskAtElementPosition, matchHtmlComment } from "./html-masking.js";
@@ -182,6 +183,7 @@ function parseComponentProps(rawProps, context, options) {
     static: {},
     staticNames: {},
     serverDynamic: {},
+    serverDynamicNames: {},
     clientReactive: {},
     events: {}
   }, clientSignalNames = new Set(Array.isArray(context.__stx_client_signal_names) ? context.__stx_client_signal_names : []), referencesClientSignal = (expression) => {
@@ -245,6 +247,8 @@ function parseComponentProps(rawProps, context, options) {
           }
         }
         resolved.serverDynamic[propName] = evaluated;
+        if (propName !== attrName.slice(1) && resolved.serverDynamicNames)
+          resolved.serverDynamicNames[propName] = attrName.slice(1);
       } catch {
         resolved.clientReactive[propName] = expression;
       }
@@ -294,6 +298,21 @@ function parseComponentProps(rawProps, context, options) {
   }
   return resolved;
 }
+const TAG_CONDITIONAL_PAIRS = [
+  [/@if\s*\(/, "@endif"],
+  [/@unless\s*\(/, "@endunless"]
+];
+function resolveTagConditionals(attributesStr, context, filePath) {
+  if (!attributesStr.includes("@"))
+    return attributesStr;
+  if (!TAG_CONDITIONAL_PAIRS.some(([open, close]) => open.test(attributesStr) && attributesStr.includes(close)))
+    return attributesStr;
+  try {
+    return processConditionals(attributesStr, context, filePath);
+  } catch {
+    return attributesStr;
+  }
+}
 function parseAllAttributes(attributesStr) {
   const props = {};
   let pos = 0;
@@ -611,7 +630,7 @@ async function processCustomElementTags(template, context, filePath, options, de
     let result = html;
     const tags = findComponentTags(result, tagPattern, skipTags);
     for (let i = tags.length - 1;i >= 0; i--) {
-      const tag = tags[i], componentPath = isPascalCase ? pascalToKebab(tag.tagName) : tag.tagName, rawProps = parseAllAttributes(tag.attributes), resolvedProps = parseComponentProps(rawProps, context, options), builtinDef = registry.getBuiltin(tag.tagName), overriddenByUser = builtinDef ? await userComponentFileExists(componentPath, componentsDir, context, filePath, options) : !1;
+      const tag = tags[i], componentPath = isPascalCase ? pascalToKebab(tag.tagName) : tag.tagName, rawProps = parseAllAttributes(resolveTagConditionals(tag.attributes, context, filePath)), resolvedProps = parseComponentProps(rawProps, context, options), builtinDef = registry.getBuiltin(tag.tagName), overriddenByUser = builtinDef ? await userComponentFileExists(componentPath, componentsDir, context, filePath, options) : !1;
       if (builtinDef && !overriddenByUser) {
         const renderCtx = {
           context,

package/dist/composables/use-fetch.d.ts

@@ -41,14 +41,19 @@ export declare interface FetchOptions<T = unknown> extends Omit<RequestInit, 'bo
   refetchInterval?: number
   initialData?: T | null
 }
+/** How one run of the request should behave. */
+export declare interface RefetchOptions {
+  background?: boolean
+}
 /** Signal-shaped fetch result. Matches the runtime's `useFetch` return. */
 export declare interface FetchRef<T> {
   data: Signal<T | null>
   loading: Signal<boolean>
+  isFetching: Signal<boolean>
   error: Signal<Error | null>
   status: Signal<number | null>
   statusText: Signal<string | null>
-  refetch: () => Promise<void>
+  refetch: (_options?: RefetchOptions) => Promise<void>
   execute: () => Promise<void>
   abort: () => void
 }

package/dist/composables/use-fetch.js

@@ -30,7 +30,7 @@ export function useFetch(url, options = {}) {
     query,
     body,
     ...fetchOptions
-  } = options, data = state(initialData), loading = state(!1), error = state(null), status = state(null), statusText = state(null);
+  } = options, data = state(initialData), loading = state(!1), isFetching = state(!1), error = state(null), status = state(null), statusText = state(null);
   let abortController = null, focusHandler = null, intervalId = null;
   const getURL = () => {
     const rawURL = typeof url === "function" ? url() : url;
@@ -45,19 +45,23 @@ export function useFetch(url, options = {}) {
   }, setCache = (value) => {
     if (cacheTime > 0)
       fetchCache.set(getCacheKey(), { data: value, timestamp: Date.now() });
-  }, doFetch = async (attempt = 0) => {
+  }, doFetch = async (attempt = 0, background = !1) => {
     const cached = getFromCache();
     if (cached !== null) {
       data.set(cached);
       loading.set(!1);
+      isFetching.set(!1);
       error.set(null);
       return;
     }
     if (abortController)
       abortController.abort();
     abortController = new AbortController;
-    loading.set(!0);
-    error.set(null);
+    if (!background)
+      loading.set(!0);
+    isFetching.set(!0);
+    if (!background)
+      error.set(null);
     const timeoutId = setTimeout(() => abortController?.abort(), timeout);
     try {
       let requestBody;
@@ -113,30 +117,36 @@ export function useFetch(url, options = {}) {
         payload = transform(payload);
       setCache(payload);
       data.set(payload);
-      loading.set(!1);
+      if (background)
+        error.set(null);
+      if (!background)
+        loading.set(!1);
+      isFetching.set(!1);
     } catch (err) {
       clearTimeout(timeoutId);
       if (err instanceof Error && err.name === "AbortError")
         return;
       if (attempt < retry) {
         await new Promise((resolve) => setTimeout(resolve, retryDelay));
-        return doFetch(attempt + 1);
+        return doFetch(attempt + 1, background);
       }
       error.set(err instanceof Error ? err : Error(String(err)));
-      loading.set(!1);
+      if (!background)
+        loading.set(!1);
+      isFetching.set(!1);
     }
   }, setupRefetchOnFocus = () => {
     if (!refetchOnFocus || typeof window > "u")
       return;
     focusHandler = () => {
       if (document.visibilityState === "visible")
-        doFetch();
+        doFetch(0, !0);
     };
     document.addEventListener("visibilitychange", focusHandler);
   }, setupRefetchInterval = () => {
     if (!refetchInterval || typeof window > "u")
       return;
-    intervalId = setInterval(() => void doFetch(), refetchInterval);
+    intervalId = setInterval(() => void doFetch(0, !0), refetchInterval);
   };
   if (immediate) {
     doFetch();
@@ -146,10 +156,11 @@ export function useFetch(url, options = {}) {
   return {
     data,
     loading,
+    isFetching,
     error,
     status,
     statusText,
-    refetch: () => doFetch(),
+    refetch: (refetchOptions) => doFetch(0, !!refetchOptions?.background),
     execute: async () => {
       await doFetch();
       setupRefetchOnFocus();
@@ -176,7 +187,7 @@ export function useAsyncData(fetcher, options = {}) {
     initialData = null,
     key,
     cacheTime = 0
-  } = options, data = state(initialData), loading = state(!1), error = state(null), status = state(null), statusText = state(null), getCacheKey = () => key || fetcher.toString(), getFromCache = () => {
+  } = options, data = state(initialData), loading = state(!1), isFetching = state(!1), error = state(null), status = state(null), statusText = state(null), getCacheKey = () => key || fetcher.toString(), getFromCache = () => {
     if (cacheTime <= 0)
       return null;
     const cached = fetchCache.get(getCacheKey());
@@ -186,26 +197,36 @@ export function useAsyncData(fetcher, options = {}) {
   }, setCache = (value) => {
     if (cacheTime > 0)
       fetchCache.set(getCacheKey(), { data: value, timestamp: Date.now() });
-  }, doFetch = async () => {
+  }, doFetch = async (background = !1) => {
     const cached = getFromCache();
     if (cached !== null) {
       data.set(cached);
       loading.set(!1);
+      isFetching.set(!1);
       error.set(null);
       return;
     }
-    loading.set(!0);
-    error.set(null);
+    if (!background)
+      loading.set(!0);
+    isFetching.set(!0);
+    if (!background)
+      error.set(null);
     try {
       let payload = await fetcher();
       if (transform)
         payload = transform(payload);
       setCache(payload);
       data.set(payload);
-      loading.set(!1);
+      if (background)
+        error.set(null);
+      if (!background)
+        loading.set(!1);
+      isFetching.set(!1);
     } catch (err) {
       error.set(err instanceof Error ? err : Error(String(err)));
-      loading.set(!1);
+      if (!background)
+        loading.set(!1);
+      isFetching.set(!1);
     }
   };
   if (immediate)
@@ -213,11 +234,12 @@ export function useAsyncData(fetcher, options = {}) {
   return {
     data,
     loading,
+    isFetching,
     error,
     status,
     statusText,
-    refetch: doFetch,
-    execute: doFetch,
+    refetch: (refetchOptions) => doFetch(!!refetchOptions?.background),
+    execute: () => doFetch(),
     abort: () => {}
   };
 }

package/dist/composables/use-query.d.ts

@@ -17,13 +17,18 @@ export declare interface UseQueryOptions<T = unknown> {
   onSuccess?: (data: T) => void
   onError?: (error: Error) => void
 }
+/** How one run of a request should behave. */
+export declare interface QueryRefetchOptions {
+  background?: boolean
+}
 export declare interface UseQueryResult<T = unknown> {
   data: { (): T | null, set: (v: T | null) => void }
   loading: { (): boolean, set: (v: boolean) => void }
+  isFetching: { (): boolean, set: (v: boolean) => void }
   error: { (): string | null, set: (v: string | null) => void }
   isStale: { (): boolean, set: (v: boolean) => void }
-  refetch: () => Promise<void>
-  invalidate: () => Promise<void>
+  refetch: (options?: QueryRefetchOptions) => Promise<void>
+  invalidate: (options?: QueryRefetchOptions) => Promise<void>
 }
 export declare interface UseMutationOptions<T = unknown> {
   method?: 'POST' | 'PUT' | 'PATCH' | 'DELETE'

package/dist/cookie-serialize.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Build one `Set-Cookie` header value.
+ *
+ * Name and value are percent-encoded, so a session token containing `;` or `=`
+ * cannot terminate the cookie early or invent an attribute.
+ *
+ * `maxAge` is compared against `undefined` rather than tested for truthiness:
+ * `Max-Age=0` is how a cookie is DELETED, and a truthiness check drops exactly
+ * that case — leaving the cookie in place while the caller believes it cleared
+ * it.
+ */
+export declare function serializeSetCookie(name: string, value: string, options?: SetCookieOptions): string;
+/**
+ * One `Set-Cookie` serializer.
+ *
+ * There were three, byte-identical in behaviour and separately maintained:
+ * `ssr.ts` (private), `edge-runtime.ts` (`createCookie`, exported) and
+ * `composables/use-cookie.ts` (client-side, writes `document.cookie`). Page
+ * actions needed a fourth (stacksjs/stx#1927), which is the point at which
+ * copying it again stops being cheaper than sharing it — the way a set of
+ * duplicated implementations goes wrong is by drifting, and an attribute that
+ * one of them emits and another does not is a cookie that works on one code
+ * path and silently does not on the next.
+ *
+ * The client-side one in `use-cookie.ts` is deliberately left alone: it runs in
+ * a browser against `document.cookie`, where `HttpOnly` is meaningless and the
+ * encoding rules differ.
+ *
+ * @module cookie-serialize
+ */
+/** Attributes of a `Set-Cookie` header. */
+export declare interface SetCookieOptions {
+  maxAge?: number
+  expires?: Date
+  path?: string
+  domain?: string
+  secure?: boolean
+  httpOnly?: boolean
+  sameSite?: 'Strict' | 'Lax' | 'None'
+}

package/dist/cookie-serialize.js

@@ -0,0 +1,18 @@
+export function serializeSetCookie(name, value, options = {}) {
+  let cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
+  if (options.maxAge !== void 0)
+    cookie += `; Max-Age=${options.maxAge}`;
+  if (options.expires)
+    cookie += `; Expires=${options.expires.toUTCString()}`;
+  if (options.path)
+    cookie += `; Path=${options.path}`;
+  if (options.domain)
+    cookie += `; Domain=${options.domain}`;
+  if (options.secure)
+    cookie += "; Secure";
+  if (options.httpOnly)
+    cookie += "; HttpOnly";
+  if (options.sameSite)
+    cookie += `; SameSite=${options.sameSite}`;
+  return cookie;
+}