@solidjs/web 2.0.0-beta.20 → 2.0.0-beta.21

package/dist/dev.cjs

@@ -662,6 +662,13 @@ function hydrate$1(code, element, options = {}) {
     }
   };
   solidJs.sharedConfig.registry = new Map();
+  if (!solidJs.sharedConfig.boundaryScopes) solidJs.sharedConfig.boundaryScopes = new Map();
+  solidJs.sharedConfig.captureBoundaryScope = id => {
+    if (solidJs.sharedConfig.registry) solidJs.sharedConfig.boundaryScopes.set(id, {
+      registry: solidJs.sharedConfig.registry,
+      gather: solidJs.sharedConfig.gather
+    });
+  };
   solidJs.sharedConfig.hydrating = true;
   {
     solidJs.sharedConfig.verifyHydration = () => {

package/dist/dev.js

@@ -661,6 +661,13 @@ function hydrate$1(code, element, options = {}) {
     }
   };
   sharedConfig.registry = new Map();
+  if (!sharedConfig.boundaryScopes) sharedConfig.boundaryScopes = new Map();
+  sharedConfig.captureBoundaryScope = id => {
+    if (sharedConfig.registry) sharedConfig.boundaryScopes.set(id, {
+      registry: sharedConfig.registry,
+      gather: sharedConfig.gather
+    });
+  };
   sharedConfig.hydrating = true;
   {
     sharedConfig.verifyHydration = () => {

package/dist/web.cjs

@@ -657,6 +657,13 @@ function hydrate$1(code, element, options = {}) {
     }
   };
   solidJs.sharedConfig.registry = new Map();
+  if (!solidJs.sharedConfig.boundaryScopes) solidJs.sharedConfig.boundaryScopes = new Map();
+  solidJs.sharedConfig.captureBoundaryScope = id => {
+    if (solidJs.sharedConfig.registry) solidJs.sharedConfig.boundaryScopes.set(id, {
+      registry: solidJs.sharedConfig.registry,
+      gather: solidJs.sharedConfig.gather
+    });
+  };
   solidJs.sharedConfig.hydrating = true;
   const rootMapping = globalThis._$HY.r && globalThis._$HY.r["_assets"];
   if (rootMapping && typeof rootMapping === "object") {

package/dist/web.js

@@ -656,6 +656,13 @@ function hydrate$1(code, element, options = {}) {
     }
   };
   sharedConfig.registry = new Map();
+  if (!sharedConfig.boundaryScopes) sharedConfig.boundaryScopes = new Map();
+  sharedConfig.captureBoundaryScope = id => {
+    if (sharedConfig.registry) sharedConfig.boundaryScopes.set(id, {
+      registry: sharedConfig.registry,
+      gather: sharedConfig.gather
+    });
+  };
   sharedConfig.hydrating = true;
   const rootMapping = globalThis._$HY.r && globalThis._$HY.r["_assets"];
   if (rootMapping && typeof rootMapping === "object") {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/web",
   "description": "Solid's web runtime: client rendering, hydration, SSR, and DOM-specific control flow (Portal, Dynamic).",
-  "version": "2.0.0-beta.20",
+  "version": "2.0.0-beta.21",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -224,10 +224,10 @@
     "seroval-plugins": "~1.5.4"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-beta.20"
+    "solid-js": "^2.0.0-beta.21"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-beta.20"
+    "solid-js": "2.0.0-beta.21"
   },
   "scripts": {
     "build": "npm-run-all -nl build:clean types:copy-jsx build:js",

package/server-functions/dist/client.cjs

@@ -56,9 +56,38 @@ function configureServerFunctionsCodec(codec) {
 function getServerFunctionsCodec() {
   return codecConfig.codec;
 }
+const flightConfig = {
+  consumer: undefined
+};
+function subscribeFlightData(consumer) {
+  flightConfig.consumer = consumer;
+  return () => {
+    if (flightConfig.consumer === consumer) flightConfig.consumer = undefined;
+  };
+}
+function getFlightDataConsumer() {
+  return flightConfig.consumer;
+}
+const SERVER_FUNCTION_METADATA = Symbol.for("solid.ServerFunctionMetadata");
+function getServerFunctionMetadata(fn) {
+  if (typeof fn !== "function") return undefined;
+  return fn[SERVER_FUNCTION_METADATA] || undefined;
+}
+function isServerFunction(fn) {
+  return typeof fn === "function" && !!fn[SERVER_FUNCTION_METADATA];
+}
+function withMeta(fn, meta) {
+  const metadata = getServerFunctionMetadata(fn);
+  if (!metadata) {
+    throw new Error("withMeta expects a server function reference");
+  }
+  Object.assign(metadata, meta);
+  return fn;
+}
 const FUNCTION_HEADER = "X-Server-Function-Id";
 const INSTANCE_HEADER = "X-Server-Function-Instance";
 const BODY_FORMAT_HEADER = "X-Server-Function-Format";
+const SINGLE_FLIGHT_HEADER = "X-Single-Flight";
 const FILE_FORM_KEY = "__server_function_file__";
 const BodyFormat = {
   Serialized: "0",
@@ -271,30 +300,44 @@ async function decodeResponse(response, codecOptions) {
 }
 
 const config = {
-  endpoint: "/_server"
+  endpoint: "/_server",
+  prepareRequest: undefined
 };
 function configureServerFunctionsClient({
   endpoint,
-  codec
+  codec,
+  prepareRequest
 } = {}) {
   if (endpoint !== undefined) config.endpoint = endpoint;
   if (codec !== undefined) configureServerFunctionsCodec(codec);
+  if (prepareRequest !== undefined) config.prepareRequest = prepareRequest;
 }
 let INSTANCE = 0;
-function createRequest(base, id, instance, options) {
-  return fetch(base, {
+async function createRequest(base, id, instance, options, meta) {
+  const headers = {
+    ...options.headers,
+    [FUNCTION_HEADER]: id,
+    [INSTANCE_HEADER]: instance
+  };
+  if (getFlightDataConsumer() && (!options.method || options.method.toUpperCase() !== "GET")) {
+    headers[SINGLE_FLIGHT_HEADER] = "true";
+  }
+  let init = {
     method: "POST",
     ...options,
-    headers: {
-      ...options.headers,
-      [FUNCTION_HEADER]: id,
-      [INSTANCE_HEADER]: instance
-    }
-  });
+    headers
+  };
+  if (config.prepareRequest) {
+    init = (await config.prepareRequest(init, {
+      id,
+      meta
+    })) || init;
+  }
+  return fetch(base, init);
 }
-async function initializeResponse(base, id, instance, options, args) {
+async function initializeResponse(base, id, instance, options, args, meta) {
   if (args.length === 0) {
-    return createRequest(base, id, instance, options);
+    return createRequest(base, id, instance, options, meta);
   }
   if (args.length === 1) {
     const result = getHeadersAndBody(args[0]);
@@ -306,7 +349,7 @@ async function initializeResponse(base, id, instance, options, args) {
           ...options.headers,
           ...result.headers
         }
-      });
+      }, meta);
     }
   }
   return createRequest(base, id, instance, {
@@ -317,12 +360,25 @@ async function initializeResponse(base, id, instance, options, args) {
       "Content-Type": "text/plain",
       [BODY_FORMAT_HEADER]: BodyFormat.Serialized
     }
-  });
+  }, meta);
 }
-async function fetchServerFunction(base, id, options, args) {
+async function fetchServerFunction(base, id, options, args, meta) {
   const instance = `server-function:${INSTANCE++}`;
-  const response = await initializeResponse(base, id, instance, options, args);
-  if (response.headers.has("Location") || response.headers.has("X-Revalidate") || response.headers.has("X-Single-Flight")) {
+  const response = await initializeResponse(base, id, instance, options, args, meta);
+  if (response.headers.has(SINGLE_FLIGHT_HEADER)) {
+    const consumer = getFlightDataConsumer();
+    if (consumer) {
+      const payload = await decodeResponse(response);
+      await consumer(payload.data, {
+        response
+      });
+      if (response.headers.has("X-Server-Function-Error") && !response.headers.has("Location") && !response.headers.has("X-Revalidate")) {
+        throw payload.value;
+      }
+      return payload.value;
+    }
+  }
+  if (response.headers.has("Location") || response.headers.has("X-Revalidate") || response.headers.has(SINGLE_FLIGHT_HEADER)) {
     return response;
   }
   const result = await decodeResponse(response.clone());
@@ -331,40 +387,62 @@ async function fetchServerFunction(base, id, options, args) {
   }
   return result;
 }
-function createServerReference(id) {
-  const fn = (...args) => fetchServerFunction(config.endpoint, id, {}, args);
+function createServerReference(id, name) {
+  const metadata = name === undefined ? {} : {
+    name
+  };
+  const fn = (...args) => fetchServerFunction(config.endpoint, id, {}, args, metadata);
+  fn[SERVER_FUNCTION_METADATA] = metadata;
   return new Proxy(fn, {
-    get(target, prop, receiver) {
+    get(target, prop) {
+      if (prop === "id") return id;
       if (prop === "url") {
         return `${config.endpoint}?id=${encodeURIComponent(id)}`;
       }
-      if (prop === "GET") {
-        return receiver.withOptions({
-          method: "GET"
-        });
-      }
-      if (prop === "withOptions") {
-        const url = `${config.endpoint}?id=${encodeURIComponent(id)}`;
-        return options => {
-          const wrapped = async (...args) => {
-            const encodeArgs = options.method && options.method.toUpperCase() === "GET";
-            return fetchServerFunction(encodeArgs ? url + (args.length ? `&args=${encodeURIComponent(await serializeString(args, getServerFunctionsCodec()))}` : "") : config.endpoint, id, options, encodeArgs ? [] : args);
-          };
-          wrapped.url = url;
-          return wrapped;
-        };
-      }
       return target[prop];
     }
   });
 }
+function GET(fn) {
+  if (!isServerFunction(fn)) {
+    throw new Error("GET expects a server function reference");
+  }
+  const id = fn.id;
+  const metadata = {
+    ...getServerFunctionMetadata(fn)
+  };
+  const wrapped = async (...args) => {
+    let base = `${config.endpoint}?id=${encodeURIComponent(id)}`;
+    if (args.length) {
+      base += `&args=${encodeURIComponent(await serializeString(args, getServerFunctionsCodec()))}`;
+    }
+    return fetchServerFunction(base, id, {
+      method: "GET"
+    }, [], metadata);
+  };
+  wrapped[SERVER_FUNCTION_METADATA] = metadata;
+  wrapped.id = id;
+  Object.defineProperty(wrapped, "url", {
+    get: () => `${config.endpoint}?id=${encodeURIComponent(id)}`,
+    configurable: true
+  });
+  return withMeta(wrapped, {
+    method: "GET"
+  });
+}
 function registerServerReference() {
   throw new Error("registerServerReference must not be called in the client build");
 }
 
 exports.FUNCTION_HEADER = FUNCTION_HEADER;
+exports.GET = GET;
 exports.INSTANCE_HEADER = INSTANCE_HEADER;
+exports.SINGLE_FLIGHT_HEADER = SINGLE_FLIGHT_HEADER;
 exports.configureServerFunctionsClient = configureServerFunctionsClient;
 exports.createServerReference = createServerReference;
 exports.decodeResponse = decodeResponse;
+exports.getServerFunctionMetadata = getServerFunctionMetadata;
+exports.isServerFunction = isServerFunction;
 exports.registerServerReference = registerServerReference;
+exports.subscribeFlightData = subscribeFlightData;
+exports.withMeta = withMeta;

package/server-functions/dist/client.js

@@ -54,9 +54,38 @@ function configureServerFunctionsCodec(codec) {
 function getServerFunctionsCodec() {
   return codecConfig.codec;
 }
+const flightConfig = {
+  consumer: undefined
+};
+function subscribeFlightData(consumer) {
+  flightConfig.consumer = consumer;
+  return () => {
+    if (flightConfig.consumer === consumer) flightConfig.consumer = undefined;
+  };
+}
+function getFlightDataConsumer() {
+  return flightConfig.consumer;
+}
+const SERVER_FUNCTION_METADATA = Symbol.for("solid.ServerFunctionMetadata");
+function getServerFunctionMetadata(fn) {
+  if (typeof fn !== "function") return undefined;
+  return fn[SERVER_FUNCTION_METADATA] || undefined;
+}
+function isServerFunction(fn) {
+  return typeof fn === "function" && !!fn[SERVER_FUNCTION_METADATA];
+}
+function withMeta(fn, meta) {
+  const metadata = getServerFunctionMetadata(fn);
+  if (!metadata) {
+    throw new Error("withMeta expects a server function reference");
+  }
+  Object.assign(metadata, meta);
+  return fn;
+}
 const FUNCTION_HEADER = "X-Server-Function-Id";
 const INSTANCE_HEADER = "X-Server-Function-Instance";
 const BODY_FORMAT_HEADER = "X-Server-Function-Format";
+const SINGLE_FLIGHT_HEADER = "X-Single-Flight";
 const FILE_FORM_KEY = "__server_function_file__";
 const BodyFormat = {
   Serialized: "0",
@@ -269,30 +298,44 @@ async function decodeResponse(response, codecOptions) {
 }
 
 const config = {
-  endpoint: "/_server"
+  endpoint: "/_server",
+  prepareRequest: undefined
 };
 function configureServerFunctionsClient({
   endpoint,
-  codec
+  codec,
+  prepareRequest
 } = {}) {
   if (endpoint !== undefined) config.endpoint = endpoint;
   if (codec !== undefined) configureServerFunctionsCodec(codec);
+  if (prepareRequest !== undefined) config.prepareRequest = prepareRequest;
 }
 let INSTANCE = 0;
-function createRequest(base, id, instance, options) {
-  return fetch(base, {
+async function createRequest(base, id, instance, options, meta) {
+  const headers = {
+    ...options.headers,
+    [FUNCTION_HEADER]: id,
+    [INSTANCE_HEADER]: instance
+  };
+  if (getFlightDataConsumer() && (!options.method || options.method.toUpperCase() !== "GET")) {
+    headers[SINGLE_FLIGHT_HEADER] = "true";
+  }
+  let init = {
     method: "POST",
     ...options,
-    headers: {
-      ...options.headers,
-      [FUNCTION_HEADER]: id,
-      [INSTANCE_HEADER]: instance
-    }
-  });
+    headers
+  };
+  if (config.prepareRequest) {
+    init = (await config.prepareRequest(init, {
+      id,
+      meta
+    })) || init;
+  }
+  return fetch(base, init);
 }
-async function initializeResponse(base, id, instance, options, args) {
+async function initializeResponse(base, id, instance, options, args, meta) {
   if (args.length === 0) {
-    return createRequest(base, id, instance, options);
+    return createRequest(base, id, instance, options, meta);
   }
   if (args.length === 1) {
     const result = getHeadersAndBody(args[0]);
@@ -304,7 +347,7 @@ async function initializeResponse(base, id, instance, options, args) {
           ...options.headers,
           ...result.headers
         }
-      });
+      }, meta);
     }
   }
   return createRequest(base, id, instance, {
@@ -315,12 +358,25 @@ async function initializeResponse(base, id, instance, options, args) {
       "Content-Type": "text/plain",
       [BODY_FORMAT_HEADER]: BodyFormat.Serialized
     }
-  });
+  }, meta);
 }
-async function fetchServerFunction(base, id, options, args) {
+async function fetchServerFunction(base, id, options, args, meta) {
   const instance = `server-function:${INSTANCE++}`;
-  const response = await initializeResponse(base, id, instance, options, args);
-  if (response.headers.has("Location") || response.headers.has("X-Revalidate") || response.headers.has("X-Single-Flight")) {
+  const response = await initializeResponse(base, id, instance, options, args, meta);
+  if (response.headers.has(SINGLE_FLIGHT_HEADER)) {
+    const consumer = getFlightDataConsumer();
+    if (consumer) {
+      const payload = await decodeResponse(response);
+      await consumer(payload.data, {
+        response
+      });
+      if (response.headers.has("X-Server-Function-Error") && !response.headers.has("Location") && !response.headers.has("X-Revalidate")) {
+        throw payload.value;
+      }
+      return payload.value;
+    }
+  }
+  if (response.headers.has("Location") || response.headers.has("X-Revalidate") || response.headers.has(SINGLE_FLIGHT_HEADER)) {
     return response;
   }
   const result = await decodeResponse(response.clone());
@@ -329,35 +385,51 @@ async function fetchServerFunction(base, id, options, args) {
   }
   return result;
 }
-function createServerReference(id) {
-  const fn = (...args) => fetchServerFunction(config.endpoint, id, {}, args);
+function createServerReference(id, name) {
+  const metadata = name === undefined ? {} : {
+    name
+  };
+  const fn = (...args) => fetchServerFunction(config.endpoint, id, {}, args, metadata);
+  fn[SERVER_FUNCTION_METADATA] = metadata;
   return new Proxy(fn, {
-    get(target, prop, receiver) {
+    get(target, prop) {
+      if (prop === "id") return id;
       if (prop === "url") {
         return `${config.endpoint}?id=${encodeURIComponent(id)}`;
       }
-      if (prop === "GET") {
-        return receiver.withOptions({
-          method: "GET"
-        });
-      }
-      if (prop === "withOptions") {
-        const url = `${config.endpoint}?id=${encodeURIComponent(id)}`;
-        return options => {
-          const wrapped = async (...args) => {
-            const encodeArgs = options.method && options.method.toUpperCase() === "GET";
-            return fetchServerFunction(encodeArgs ? url + (args.length ? `&args=${encodeURIComponent(await serializeString(args, getServerFunctionsCodec()))}` : "") : config.endpoint, id, options, encodeArgs ? [] : args);
-          };
-          wrapped.url = url;
-          return wrapped;
-        };
-      }
       return target[prop];
     }
   });
 }
+function GET(fn) {
+  if (!isServerFunction(fn)) {
+    throw new Error("GET expects a server function reference");
+  }
+  const id = fn.id;
+  const metadata = {
+    ...getServerFunctionMetadata(fn)
+  };
+  const wrapped = async (...args) => {
+    let base = `${config.endpoint}?id=${encodeURIComponent(id)}`;
+    if (args.length) {
+      base += `&args=${encodeURIComponent(await serializeString(args, getServerFunctionsCodec()))}`;
+    }
+    return fetchServerFunction(base, id, {
+      method: "GET"
+    }, [], metadata);
+  };
+  wrapped[SERVER_FUNCTION_METADATA] = metadata;
+  wrapped.id = id;
+  Object.defineProperty(wrapped, "url", {
+    get: () => `${config.endpoint}?id=${encodeURIComponent(id)}`,
+    configurable: true
+  });
+  return withMeta(wrapped, {
+    method: "GET"
+  });
+}
 function registerServerReference() {
   throw new Error("registerServerReference must not be called in the client build");
 }
 
-export { FUNCTION_HEADER, INSTANCE_HEADER, configureServerFunctionsClient, createServerReference, decodeResponse, registerServerReference };
+export { FUNCTION_HEADER, GET, INSTANCE_HEADER, SINGLE_FLIGHT_HEADER, configureServerFunctionsClient, createServerReference, decodeResponse, getServerFunctionMetadata, isServerFunction, registerServerReference, subscribeFlightData, withMeta };