@quilted/quilt 0.6.13 → 0.6.15

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @quilted/quilt
 
+## 0.6.15
+
+### Patch Changes
+
+- [#716](https://github.com/lemonmade/quilt/pull/716) [`7daafca`](https://github.com/lemonmade/quilt/commit/7daafca900b3d9ea66be179394eadf7998cc94be) Thanks [@lemonmade](https://github.com/lemonmade)! - Refactor browser APIs
+
+- Updated dependencies [[`c402a9a`](https://github.com/lemonmade/quilt/commit/c402a9a1c98efa24deed160ba2eaddeaad3b008a), [`7daafca`](https://github.com/lemonmade/quilt/commit/7daafca900b3d9ea66be179394eadf7998cc94be)]:
+  - @quilted/react-async@0.4.2
+  - @quilted/react-localize@0.2.2
+  - @quilted/react-browser@0.0.1
+  - @quilted/react-router@0.4.1
+  - @quilted/react-dom@18.2.11
+  - @quilted/graphql@3.0.3
+  - @quilted/assets@0.1.2
+
+## 0.6.14
+
+### Patch Changes
+
+- [#714](https://github.com/lemonmade/quilt/pull/714) [`d4bda43`](https://github.com/lemonmade/quilt/commit/d4bda430900d0e4afd5ccecb04abe9ac81245486) Thanks [@lemonmade](https://github.com/lemonmade)! - Update GraphQL dependencies
+
+- [#699](https://github.com/lemonmade/quilt/pull/699) [`8335c47`](https://github.com/lemonmade/quilt/commit/8335c47fa1896ad65d5cd218fe068f22627815d9) Thanks [@lemonmade](https://github.com/lemonmade)! - Update async APIs
+
+- Updated dependencies [[`8335c47`](https://github.com/lemonmade/quilt/commit/8335c47fa1896ad65d5cd218fe068f22627815d9), [`d4bda43`](https://github.com/lemonmade/quilt/commit/d4bda430900d0e4afd5ccecb04abe9ac81245486), [`8335c47`](https://github.com/lemonmade/quilt/commit/8335c47fa1896ad65d5cd218fe068f22627815d9)]:
+  - @quilted/async@0.4.1
+  - @quilted/react-async@0.4.1
+  - @quilted/graphql@3.0.2
+  - @quilted/react-assets@0.1.1
+  - @quilted/react-signals@0.2.4
+
 ## 0.6.13
 
 ### Patch Changes

package/build/esm/assets.mjs

@@ -1,2 +1 @@
 export { BrowserAssetsFromManifests, createBrowserAssetsEntryFromManifest, scriptAssetAttributes, scriptAssetPreloadAttributes, styleAssetAttributes, styleAssetPreloadAttributes } from '@quilted/assets';
-export { useAssetsCacheKey, useModuleAssets } from '@quilted/react-assets';

package/build/esm/async.mjs

@@ -1,3 +1,3 @@
-export { createAsyncModule } from '@quilted/async';
-export { createAsyncComponent, useAsyncModule, useAsyncModulePreload, usePreload } from '@quilted/react-async';
+export { AsyncAction, AsyncActionDeferred, AsyncActionPromise, AsyncModule } from '@quilted/async';
+export { AsyncComponent, AsyncContext, useAsyncModule, useAsyncModuleAssets, useAsyncModulePreload, useHydrated } from '@quilted/react-async';
 export { useIdleCallback } from '@quilted/react-idle';

package/build/esm/browser.mjs

@@ -0,0 +1,2 @@
+import '@quilted/react-signals';
+export * from '@quilted/react-browser';

package/build/esm/globals.mjs

@@ -1,9 +1,9 @@
-import { createAsyncModulesGlobal } from '@quilted/async';
+import { AsyncModulesGlobal } from '@quilted/async';
 
 const property = Symbol.for('quilt');
 const quilt = globalThis[property] ?? {};
-quilt.AsyncModules = createAsyncModulesGlobal({
-  cache: quilt.AsyncModules
+quilt.asyncModules = new AsyncModulesGlobal({
+  cache: quilt.asyncModules
 });
 Object.defineProperty(globalThis, property, {
   value: quilt,

package/build/esm/navigate.mjs

@@ -1 +1 @@
-export { Link, NavigationBlock, Redirect, RoutePreloading, Routing, useCurrentUrl, useInitialUrl, useNavigate, useNavigationBlock, useRedirect, useRouteChangeFocusRef, useRouteMatch, useRouteMatchDetails, useRouter, useRoutes, useScrollRestoration } from '@quilted/react-router';
+export { Link, NavigationBlock, Redirect, RoutePreloading, Routing, useCurrentUrl, useInitialURL, useNavigate, useNavigationBlock, useRedirect, useRouteChangeFocusRef, useRouteMatch, useRouteMatchDetails, useRouter, useRoutes, useScrollRestoration } from '@quilted/react-router';

package/build/esm/server/ServerContext.mjs

@@ -1,34 +1,22 @@
-import { AssetsContext } from '@quilted/react-assets/server';
-import { InitialUrlContext } from '@quilted/react-router';
-import { HTMLContext } from '@quilted/react-html/server';
-import { HttpServerContext } from '@quilted/react-http/server';
+import { InitialURLContext } from '@quilted/react-router';
+import { BrowserDetailsContext } from '@quilted/react-browser/server';
 import { jsx } from 'react/jsx-runtime';
 
 function ServerContext({
-  url,
-  html,
-  http,
-  assets,
+  browser,
   children
 }) {
-  const normalizedUrl = typeof url === 'string' ? new URL(url) : url;
-  const withInitialURL = normalizedUrl ? /*#__PURE__*/jsx(InitialUrlContext.Provider, {
-    value: normalizedUrl,
+  const requestURL = browser?.request.url;
+  const initialURL = requestURL && new URL(requestURL);
+  const withInitialURL = initialURL ? /*#__PURE__*/jsx(InitialURLContext.Provider, {
+    value: initialURL,
     children: children
   }) : children;
-  const withHTML = html ? /*#__PURE__*/jsx(HTMLContext.Provider, {
-    value: html,
+  const withBrowser = browser ? /*#__PURE__*/jsx(BrowserDetailsContext.Provider, {
+    value: browser,
     children: withInitialURL
   }) : withInitialURL;
-  const withHTTPServer = http ? /*#__PURE__*/jsx(HttpServerContext.Provider, {
-    value: http,
-    children: withHTML
-  }) : withHTML;
-  const withAssets = assets ? /*#__PURE__*/jsx(AssetsContext.Provider, {
-    value: assets,
-    children: withHTTPServer
-  }) : withHTTPServer;
-  return withAssets;
+  return withBrowser;
 }
 
 export { ServerContext };

package/build/esm/server/request-router.mjs

@@ -1,11 +1,8 @@
 import { isValidElement } from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
+import { renderToStringAsync, renderToStaticMarkup } from 'preact-render-to-string';
 import { styleAssetPreloadAttributes, scriptAssetPreloadAttributes } from '@quilted/assets';
-import { AssetsManager } from '@quilted/react-assets/server';
-import { HttpManager } from '@quilted/react-http/server';
-import { HTMLManager, Head, Script, Style, StylePreload, ScriptPreload } from '@quilted/react-html/server';
-import { extract } from '@quilted/react-server-render/server';
-import { RedirectResponse, HTMLResponse } from '@quilted/request-router';
+import { BrowserResponse, ScriptAsset, StyleAsset, StyleAssetPreload, ScriptAssetPreload } from '@quilted/react-browser/server';
+import { HTMLResponse } from '@quilted/request-router';
 import { ServerContext } from './ServerContext.mjs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -21,59 +18,29 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
   const {
     request,
     assets,
+    status: explicitStatus,
     cacheKey: explicitCacheKey,
     headers: explicitHeaders,
+    serializations: explicitSerializations,
     waitUntil = noop,
     stream: shouldStream = false,
     renderHTML = true
   } = options;
-  const baseUrl = request.URL ?? new URL(request.url);
+  const baseURL = request.URL ?? new URL(request.url);
   const cacheKey = explicitCacheKey ?? (await assets?.cacheKey?.(request)) ?? {};
-  const html = new HTMLManager();
-  const http = new HttpManager({
-    headers: request.headers
-  });
-  const assetsManager = new AssetsManager({
-    cacheKey
+  const browserResponse = new BrowserResponse({
+    request,
+    cacheKey,
+    status: explicitStatus,
+    headers: new Headers(explicitHeaders),
+    serializations: explicitSerializations
   });
-  let responseStatus = 200;
   let appStream;
-  const headers = new Headers(explicitHeaders);
   if (shouldStream === false && element != null) {
-    const rendered = await extract(element, {
-      decorate(element) {
-        return /*#__PURE__*/jsx(ServerContext, {
-          http: http,
-          html: html,
-          url: baseUrl,
-          assets: assetsManager,
-          children: element
-        });
-      }
-    });
-    const {
-      headers: appHeaders,
-      statusCode = 200,
-      redirectUrl
-    } = http.state;
-    const hasSetCookieHeader = typeof appHeaders.getSetCookie === 'function';
-    if (hasSetCookieHeader) {
-      for (const cookie of appHeaders.getSetCookie()) {
-        headers.append('Set-Cookie', cookie);
-      }
-    }
-    for (const [header, value] of appHeaders.entries()) {
-      if (hasSetCookieHeader && header.toLowerCase() === 'set-cookie') continue;
-      headers.set(header, value);
-    }
-    if (redirectUrl) {
-      return new RedirectResponse(redirectUrl, {
-        status: statusCode,
-        headers: headers,
-        request
-      });
-    }
-    responseStatus = statusCode;
+    const rendered = await renderToStringAsync( /*#__PURE__*/jsx(ServerContext, {
+      browser: browserResponse,
+      children: element
+    }));
     const appTransformStream = new TransformStream();
     const appWriter = appTransformStream.writable.getWriter();
     appStream = appTransformStream.readable;
@@ -86,17 +53,10 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
     const renderAppStream = async function renderAppStream() {
       const appWriter = appTransformStream.writable.getWriter();
       if (element != null) {
-        const rendered = await extract(element, {
-          decorate(element) {
-            return /*#__PURE__*/jsx(ServerContext, {
-              http: http,
-              html: html,
-              url: baseUrl,
-              assets: assetsManager,
-              children: element
-            });
-          }
-        });
+        const rendered = await renderToStringAsync( /*#__PURE__*/jsx(ServerContext, {
+          browser: browserResponse,
+          children: element
+        }));
         appWriter.write(rendered);
       }
       appWriter.close();
@@ -105,32 +65,31 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
   }
   const body = await renderToHTMLBody(appStream);
   return new HTMLResponse(body, {
-    status: responseStatus,
-    headers
+    status: browserResponse.status.value,
+    headers: browserResponse.headers
   });
   async function renderToHTMLBody(content) {
     const [synchronousAssets, preloadAssets] = await Promise.all([assets?.entry({
       cacheKey,
-      modules: assetsManager.usedModules({
+      modules: browserResponse.assets.get({
         timing: 'load'
       })
-    }), assets?.modules(assetsManager.usedModules({
+    }), assets?.modules(browserResponse.assets.get({
       timing: 'preload'
     }), {
       cacheKey
     })]);
     if (synchronousAssets) {
       for (const style of synchronousAssets.styles) {
-        headers.append('Link', preloadHeader(styleAssetPreloadAttributes(style)));
+        browserResponse.headers.append('Link', preloadHeader(styleAssetPreloadAttributes(style)));
       }
       for (const script of synchronousAssets.scripts) {
-        headers.append('Link', preloadHeader(scriptAssetPreloadAttributes(script)));
+        browserResponse.headers.append('Link', preloadHeader(scriptAssetPreloadAttributes(script)));
       }
     }
     if (typeof renderHTML === 'function') {
       const body = await renderHTML(content, {
-        manager: html,
-        headers,
+        response: browserResponse,
         assets: synchronousAssets,
         preloadAssets
       });
@@ -143,31 +102,30 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
     const renderFullHTML = async function renderFullHTML() {
       const writer = responseStream.writable.getWriter();
       writer.write(`<!DOCTYPE html>`);
-      const {
-        htmlAttributes,
-        bodyAttributes,
-        ...headProps
-      } = html.state;
       const htmlContent = renderToStaticMarkup( /*#__PURE__*/jsxs("html", {
-        ...htmlAttributes,
+        ...browserResponse.htmlAttributes.value,
         children: [/*#__PURE__*/jsxs("head", {
-          children: [/*#__PURE__*/jsx(Head, {
-            ...headProps
-          }), synchronousAssets?.scripts.map(script => /*#__PURE__*/jsx(Script, {
+          children: [browserResponse.title.value && /*#__PURE__*/jsx("title", {
+            children: browserResponse.title.value
+          }), browserResponse.links.value.map((link, index) => /*#__PURE__*/jsx("link", {
+            ...link
+          }, index)), browserResponse.metas.value.map((meta, index) => /*#__PURE__*/jsx("meta", {
+            ...meta
+          }, index)), synchronousAssets?.scripts.map(script => /*#__PURE__*/jsx(ScriptAsset, {
             asset: script,
-            baseUrl: baseUrl
-          }, script.source)), synchronousAssets?.styles.map(style => /*#__PURE__*/jsx(Style, {
+            baseURL: baseURL
+          }, script.source)), synchronousAssets?.styles.map(style => /*#__PURE__*/jsx(StyleAsset, {
             asset: style,
-            baseUrl: baseUrl
-          }, style.source)), preloadAssets?.styles.map(style => /*#__PURE__*/jsx(StylePreload, {
+            baseURL: baseURL
+          }, style.source)), preloadAssets?.styles.map(style => /*#__PURE__*/jsx(StyleAssetPreload, {
             asset: style,
-            baseUrl: baseUrl
-          }, style.source)), preloadAssets?.scripts.map(script => /*#__PURE__*/jsx(ScriptPreload, {
+            baseURL: baseURL
+          }, style.source)), preloadAssets?.scripts.map(script => /*#__PURE__*/jsx(ScriptAssetPreload, {
             asset: script,
-            baseUrl: baseUrl
+            baseURL: baseURL
           }, script.source))]
         }), /*#__PURE__*/jsx("body", {
-          ...bodyAttributes,
+          ...browserResponse.bodyAttributes.value,
           dangerouslySetInnerHTML: {
             __html: '%%CONTENT%%'
           }
@@ -190,10 +148,10 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
       if (element != null) writer.write(`</div>`);
       const [newSynchronousAssets, newPreloadAssets] = await Promise.all([assets?.entry({
         cacheKey,
-        modules: assetsManager.usedModules({
+        modules: browserResponse.assets.get({
           timing: 'load'
         })
-      }), assets?.modules(assetsManager.usedModules({
+      }), assets?.modules(browserResponse.assets.get({
         timing: 'preload'
       }), {
         cacheKey
@@ -202,18 +160,18 @@ async function renderToResponse(optionsOrElement, definitelyOptions) {
         const diffedSynchronousAssets = diffBrowserAssetsEntries(newSynchronousAssets, synchronousAssets);
         const diffedPreloadAssets = diffBrowserAssetsEntries(newPreloadAssets, preloadAssets);
         const additionalAssetsContent = renderToStaticMarkup( /*#__PURE__*/jsxs(Fragment, {
-          children: [diffedSynchronousAssets.scripts.map(script => /*#__PURE__*/jsx(Script, {
+          children: [diffedSynchronousAssets.scripts.map(script => /*#__PURE__*/jsx(ScriptAsset, {
             asset: script,
-            baseUrl: baseUrl
-          }, script.source)), diffedSynchronousAssets.styles.map(style => /*#__PURE__*/jsx(Style, {
+            baseURL: baseURL
+          }, script.source)), diffedSynchronousAssets.styles.map(style => /*#__PURE__*/jsx(StyleAsset, {
             asset: style,
-            baseUrl: baseUrl
-          }, style.source)), diffedPreloadAssets.styles.map(style => /*#__PURE__*/jsx(StylePreload, {
+            baseURL: baseURL
+          }, style.source)), diffedPreloadAssets.styles.map(style => /*#__PURE__*/jsx(StyleAssetPreload, {
             asset: style,
-            baseUrl: baseUrl
-          }, style.source)), diffedPreloadAssets.scripts.map(script => /*#__PURE__*/jsx(ScriptPreload, {
+            baseURL: baseURL
+          }, style.source)), diffedPreloadAssets.scripts.map(script => /*#__PURE__*/jsx(ScriptAssetPreload, {
             asset: script,
-            baseUrl: baseUrl
+            baseURL: baseURL
           }, script.source))]
         }));
         writer.write(additionalAssetsContent);

package/build/esm/server.mjs

@@ -1,9 +1,5 @@
-export { HTMLContext, HTMLManager, SERVER_ACTION_ID as HTML_SERVER_ACTION_ID, Head, Serialize } from '@quilted/react-html/server';
-export { ServerRenderManager, ServerRenderManagerContext, extract } from '@quilted/react-server-render/server';
+export * from '@quilted/react-browser/server';
 export { BrowserAssetsFromManifests, createBrowserAssetsEntryFromManifest, scriptAssetAttributes, scriptAssetPreloadAttributes, styleAssetAttributes, styleAssetPreloadAttributes } from '@quilted/assets';
-export { SERVER_ACTION_ID as ASSETS_SERVER_ACTION_ID, AssetsContext, AssetsManager, useAssetsCacheKey, useModuleAssets } from '@quilted/react-assets/server';
 export { parseAcceptLanguageHeader } from '@quilted/react-localize';
 export { createRequestRouterLocalization } from '@quilted/react-localize/request-router';
-export { ServerAction, useServerAction, useServerContext } from '@quilted/react-server-render';
-export { ServerContext } from './server/ServerContext.mjs';
 export { renderToResponse } from './server/request-router.mjs';

package/build/esm/signals.mjs

@@ -1,2 +1 @@
-export { Signal, batch, computed, effect, isSignal, resolveSignalOrValue, signal, signalToIterator } from '@quilted/signals';
-export { useComputed, useSignal, useSignalEffect } from '@quilted/react-signals';
+export * from '@quilted/react-signals';

package/build/esnext/assets.esnext

@@ -1,2 +1 @@
 export { BrowserAssetsFromManifests, createBrowserAssetsEntryFromManifest, scriptAssetAttributes, scriptAssetPreloadAttributes, styleAssetAttributes, styleAssetPreloadAttributes } from '@quilted/assets';
-export { useAssetsCacheKey, useModuleAssets } from '@quilted/react-assets';

package/build/esnext/async.esnext

@@ -1,3 +1,3 @@
-export { createAsyncModule } from '@quilted/async';
-export { createAsyncComponent, useAsyncModule, useAsyncModulePreload, usePreload } from '@quilted/react-async';
+export { AsyncAction, AsyncActionDeferred, AsyncActionPromise, AsyncModule } from '@quilted/async';
+export { AsyncComponent, AsyncContext, useAsyncModule, useAsyncModuleAssets, useAsyncModulePreload, useHydrated } from '@quilted/react-async';
 export { useIdleCallback } from '@quilted/react-idle';

package/build/esnext/browser.esnext

@@ -0,0 +1,2 @@
+import '@quilted/react-signals';
+export * from '@quilted/react-browser';

package/build/esnext/globals.esnext

@@ -1,9 +1,9 @@
-import { createAsyncModulesGlobal } from '@quilted/async';
+import { AsyncModulesGlobal } from '@quilted/async';
 
 const property = Symbol.for("quilt");
 const quilt = globalThis[property] ?? {};
-quilt.AsyncModules = createAsyncModulesGlobal({
-  cache: quilt.AsyncModules
+quilt.asyncModules = new AsyncModulesGlobal({
+  cache: quilt.asyncModules
 });
 Object.defineProperty(globalThis, property, {
   value: quilt,

package/build/esnext/navigate.esnext

@@ -1 +1 @@
-export { Link, NavigationBlock, Redirect, RoutePreloading, Routing, useCurrentUrl, useInitialUrl, useNavigate, useNavigationBlock, useRedirect, useRouteChangeFocusRef, useRouteMatch, useRouteMatchDetails, useRouter, useRoutes, useScrollRestoration } from '@quilted/react-router';
+export { Link, NavigationBlock, Redirect, RoutePreloading, Routing, useCurrentUrl, useInitialURL, useNavigate, useNavigationBlock, useRedirect, useRouteChangeFocusRef, useRouteMatch, useRouteMatchDetails, useRouter, useRoutes, useScrollRestoration } from '@quilted/react-router';

package/build/esnext/server/ServerContext.esnext

@@ -1,22 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
-import { AssetsContext } from '@quilted/react-assets/server';
-import { InitialUrlContext } from '@quilted/react-router';
-import { HTMLContext } from '@quilted/react-html/server';
-import { HttpServerContext } from '@quilted/react-http/server';
+import { InitialURLContext } from '@quilted/react-router';
+import { BrowserDetailsContext } from '@quilted/react-browser/server';
 
-function ServerContext({
-  url,
-  html,
-  http,
-  assets,
-  children
-}) {
-  const normalizedUrl = typeof url === "string" ? new URL(url) : url;
-  const withInitialURL = normalizedUrl ? /* @__PURE__ */ jsx(InitialUrlContext.Provider, { value: normalizedUrl, children }) : children;
-  const withHTML = html ? /* @__PURE__ */ jsx(HTMLContext.Provider, { value: html, children: withInitialURL }) : withInitialURL;
-  const withHTTPServer = http ? /* @__PURE__ */ jsx(HttpServerContext.Provider, { value: http, children: withHTML }) : withHTML;
-  const withAssets = assets ? /* @__PURE__ */ jsx(AssetsContext.Provider, { value: assets, children: withHTTPServer }) : withHTTPServer;
-  return withAssets;
+function ServerContext({ browser, children }) {
+  const requestURL = browser?.request.url;
+  const initialURL = requestURL && new URL(requestURL);
+  const withInitialURL = initialURL ? /* @__PURE__ */ jsx(InitialURLContext.Provider, { value: initialURL, children }) : children;
+  const withBrowser = browser ? /* @__PURE__ */ jsx(BrowserDetailsContext.Provider, { value: browser, children: withInitialURL }) : withInitialURL;
+  return withBrowser;
 }
 
 export { ServerContext };