@quilted/quilt 0.5.135 → 0.5.137

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @quilted/quilt
 
+## 0.5.137
+
+### Patch Changes
+
+- [#527](https://github.com/lemonmade/quilt/pull/527) [`a255c7c2`](https://github.com/lemonmade/quilt/commit/a255c7c284391b2c3157fffed5a5feb576cd45ac) Thanks [@lemonmade](https://github.com/lemonmade)! - Improve asset manifests
+
+- Updated dependencies [[`a255c7c2`](https://github.com/lemonmade/quilt/commit/a255c7c284391b2c3157fffed5a5feb576cd45ac)]:
+  - @quilted/assets@0.0.1
+  - @quilted/react-assets@0.0.1
+
+## 0.5.136
+
+### Patch Changes
+
+- [#516](https://github.com/lemonmade/quilt/pull/516) [`575d9033`](https://github.com/lemonmade/quilt/commit/575d9033cfafa438b2998c6fea7e00a307ef0be7) Thanks [@lemonmade](https://github.com/lemonmade)! - Add `routes` to `Routing` component
+
+- [#516](https://github.com/lemonmade/quilt/pull/516) [`575d9033`](https://github.com/lemonmade/quilt/commit/575d9033cfafa438b2998c6fea7e00a307ef0be7) Thanks [@lemonmade](https://github.com/lemonmade)! - Add timeout event helpers
+
 ## 0.5.135
 
 ### Patch Changes

package/build/cjs/App.cjs

@@ -18,22 +18,22 @@ function QuiltApp({
   children,
   performance = true
 }) {
-  const routesContent = routing !== false && routes ? /*#__PURE__*/jsxRuntime.jsx(StaticRoutes, {
-    routes: routes
-  }) : null;
   const htmlContent = typeof html === 'boolean' ? html ? /*#__PURE__*/jsxRuntime.jsx(HtmlUpdater, {}) : null : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(HtmlUpdater, {}), html]
   });
   const httpContent = typeof http === 'boolean' ? null : http;
   const content = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [httpContent, htmlContent, routesContent, children]
+    children: [httpContent, htmlContent, children]
   });
   const withMaybeRouting = typeof routing === 'boolean' ? routing ? /*#__PURE__*/jsxRuntime.jsx(reactRouter.Routing, {
+    routes: routes,
     children: content
   }) : content : 'navigate' in routing ? /*#__PURE__*/jsxRuntime.jsx(reactRouter.Routing, {
+    routes: routes,
     router: routing,
     children: content
   }) : /*#__PURE__*/jsxRuntime.jsx(reactRouter.Routing, {
+    routes: routes,
     ...routing,
     children: content
   });
@@ -68,10 +68,5 @@ function HtmlUpdater() {
   reactHtml.useHtmlUpdater();
   return null;
 }
-function StaticRoutes({
-  routes
-}) {
-  return reactRouter.useRoutes(routes);
-}
 
 exports.QuiltApp = QuiltApp;

package/build/cjs/index.cjs

@@ -1,7 +1,9 @@
 'use strict';
 
+var assets = require('@quilted/assets');
 var async = require('@quilted/async');
 var events = require('@quilted/events');
+var reactAssets = require('@quilted/react-assets');
 var reactAsync = require('@quilted/react-async');
 var reactGraphql = require('@quilted/react-graphql');
 var reactIdle = require('@quilted/react-idle');
@@ -16,6 +18,30 @@ var App = require('./App.cjs');
 
 
 
+Object.defineProperty(exports, 'createBrowserAssetsEntryFromManifest', {
+  enumerable: true,
+  get: function () { return assets.createBrowserAssetsEntryFromManifest; }
+});
+Object.defineProperty(exports, 'createBrowserAssetsFromManifests', {
+  enumerable: true,
+  get: function () { return assets.createBrowserAssetsFromManifests; }
+});
+Object.defineProperty(exports, 'scriptAssetAttributes', {
+  enumerable: true,
+  get: function () { return assets.scriptAssetAttributes; }
+});
+Object.defineProperty(exports, 'scriptAssetPreloadAttributes', {
+  enumerable: true,
+  get: function () { return assets.scriptAssetPreloadAttributes; }
+});
+Object.defineProperty(exports, 'styleAssetAttributes', {
+  enumerable: true,
+  get: function () { return assets.styleAssetAttributes; }
+});
+Object.defineProperty(exports, 'styleAssetPreloadAttributes', {
+  enumerable: true,
+  get: function () { return assets.styleAssetPreloadAttributes; }
+});
 Object.defineProperty(exports, 'createAsyncModule', {
   enumerable: true,
   get: function () { return async.createAsyncModule; }
@@ -28,6 +54,10 @@ Object.defineProperty(exports, 'NestedAbortController', {
   enumerable: true,
   get: function () { return events.NestedAbortController; }
 });
+Object.defineProperty(exports, 'TimedAbortController', {
+  enumerable: true,
+  get: function () { return events.TimedAbortController; }
+});
 Object.defineProperty(exports, 'anyAbortSignal', {
   enumerable: true,
   get: function () { return events.anyAbortSignal; }
@@ -48,6 +78,14 @@ Object.defineProperty(exports, 'raceAgainstAbortSignal', {
   enumerable: true,
   get: function () { return events.raceAgainstAbortSignal; }
 });
+Object.defineProperty(exports, 'sleep', {
+  enumerable: true,
+  get: function () { return events.sleep; }
+});
+Object.defineProperty(exports, 'useUpdateCacheKey', {
+  enumerable: true,
+  get: function () { return reactAssets.useUpdateCacheKey; }
+});
 Object.defineProperty(exports, 'createAsyncComponent', {
   enumerable: true,
   get: function () { return reactAsync.createAsyncComponent; }
@@ -180,10 +218,6 @@ Object.defineProperty(exports, 'useInitialUrl', {
   enumerable: true,
   get: function () { return reactRouter.useInitialUrl; }
 });
-Object.defineProperty(exports, 'useMatch', {
-  enumerable: true,
-  get: function () { return reactRouter.useMatch; }
-});
 Object.defineProperty(exports, 'useNavigate', {
   enumerable: true,
   get: function () { return reactRouter.useNavigate; }
@@ -200,6 +234,14 @@ Object.defineProperty(exports, 'useRouteChangeFocusRef', {
   enumerable: true,
   get: function () { return reactRouter.useRouteChangeFocusRef; }
 });
+Object.defineProperty(exports, 'useRouteMatch', {
+  enumerable: true,
+  get: function () { return reactRouter.useRouteMatch; }
+});
+Object.defineProperty(exports, 'useRouteMatchDetails', {
+  enumerable: true,
+  get: function () { return reactRouter.useRouteMatchDetails; }
+});
 Object.defineProperty(exports, 'useRouter', {
   enumerable: true,
   get: function () { return reactRouter.useRouter; }

package/build/cjs/server/ServerContext.cjs

@@ -1,20 +1,22 @@
 'use strict';
 
+var server$3 = require('@quilted/react-assets/server');
 var reactRouter = require('@quilted/react-router');
-var server$1 = require('@quilted/react-html/server');
-var server$2 = require('@quilted/react-async/server');
-var server = require('@quilted/react-http/server');
+var server$2 = require('@quilted/react-html/server');
+var server = require('@quilted/react-async/server');
+var server$1 = require('@quilted/react-http/server');
 var react = require('../utilities/react.cjs');
 
 function ServerContext({
   url,
   html,
   http,
+  assets,
   asyncAssets,
   children
 }) {
   const normalizedUrl = typeof url === 'string' ? new URL(url) : url;
-  return react.maybeWrapContext(server$2.AsyncAssetContext, asyncAssets, react.maybeWrapContext(server.HttpServerContext, http, react.maybeWrapContext(server$1.HtmlContext, html, react.maybeWrapContext(reactRouter.InitialUrlContext, normalizedUrl, children))));
+  return react.maybeWrapContext(server$3.AssetsContext, assets, react.maybeWrapContext(server.AsyncAssetContext, asyncAssets, react.maybeWrapContext(server$1.HttpServerContext, http, react.maybeWrapContext(server$2.HtmlContext, html, react.maybeWrapContext(reactRouter.InitialUrlContext, normalizedUrl, children)))));
 }
 
 exports.ServerContext = ServerContext;

package/build/cjs/server/index.cjs

@@ -2,13 +2,15 @@
 
 var server = require('@quilted/react-html/server');
 var server$1 = require('@quilted/react-server-render/server');
-var server$2 = require('@quilted/async/server');
+var assets = require('@quilted/assets');
+var server$2 = require('@quilted/react-assets/server');
 var server$3 = require('@quilted/react-async/server');
 var requestRouter = require('@quilted/react-localize/request-router');
 var requestRouter$1 = require('@quilted/request-router');
 var reactLocalize = require('@quilted/react-localize');
 var ServerContext = require('./ServerContext.cjs');
 var requestRouter$2 = require('./request-router.cjs');
+var preload = require('./preload.cjs');
 
 
 
@@ -56,25 +58,45 @@ Object.defineProperty(exports, 'useServerAction', {
   enumerable: true,
   get: function () { return server$1.useServerAction; }
 });
-Object.defineProperty(exports, 'createAssetManifest', {
+Object.defineProperty(exports, 'createBrowserAssetsEntryFromManifest', {
   enumerable: true,
-  get: function () { return server$2.createAssetManifest; }
+  get: function () { return assets.createBrowserAssetsEntryFromManifest; }
+});
+Object.defineProperty(exports, 'createBrowserAssetsFromManifests', {
+  enumerable: true,
+  get: function () { return assets.createBrowserAssetsFromManifests; }
 });
 Object.defineProperty(exports, 'scriptAssetAttributes', {
   enumerable: true,
-  get: function () { return server$2.scriptAssetAttributes; }
+  get: function () { return assets.scriptAssetAttributes; }
 });
 Object.defineProperty(exports, 'scriptAssetPreloadAttributes', {
   enumerable: true,
-  get: function () { return server$2.scriptAssetPreloadAttributes; }
+  get: function () { return assets.scriptAssetPreloadAttributes; }
 });
 Object.defineProperty(exports, 'styleAssetAttributes', {
   enumerable: true,
-  get: function () { return server$2.styleAssetAttributes; }
+  get: function () { return assets.styleAssetAttributes; }
 });
 Object.defineProperty(exports, 'styleAssetPreloadAttributes', {
   enumerable: true,
-  get: function () { return server$2.styleAssetPreloadAttributes; }
+  get: function () { return assets.styleAssetPreloadAttributes; }
+});
+Object.defineProperty(exports, 'ASSETS_SERVER_ACTION_ID', {
+  enumerable: true,
+  get: function () { return server$2.SERVER_ACTION_ID; }
+});
+Object.defineProperty(exports, 'AssetsContext', {
+  enumerable: true,
+  get: function () { return server$2.AssetsContext; }
+});
+Object.defineProperty(exports, 'AssetsManager', {
+  enumerable: true,
+  get: function () { return server$2.AssetsManager; }
+});
+Object.defineProperty(exports, 'useUpdateCacheKey', {
+  enumerable: true,
+  get: function () { return server$2.useUpdateCacheKey; }
 });
 Object.defineProperty(exports, 'ASYNC_ASSETS_SERVER_ACTION_ID', {
   enumerable: true,
@@ -124,3 +146,4 @@ exports.ServerContext = ServerContext.ServerContext;
 exports.createServerRender = requestRouter$2.createServerRender;
 exports.renderAppToResponse = requestRouter$2.renderAppToResponse;
 exports.renderAppToStreamedResponse = requestRouter$2.renderAppToStreamedResponse;
+exports.createAssetPreloader = preload.createAssetPreloader;

package/build/cjs/server/preload.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+var requestRouter = require('@quilted/request-router');
+
+function createAssetPreloader(options) {
+  return async function handler(request, requestContext) {
+    const manifest = await assetsForRequest(request, {
+      ...options,
+      context: requestContext
+    });
+    return requestRouter.json(manifest);
+  };
+}
+async function assetsForRequest(request, {
+  assets,
+  context,
+  cacheKey: getCacheKey
+}) {
+  const url = new URL(request.url);
+  const modules = url.searchParams.get('modules')?.split(',') ?? [];
+  const includeStyles = url.searchParams.get('styles') !== 'false';
+  const includeScripts = url.searchParams.get('scripts') !== 'false';
+  const cacheKey = (await getCacheKey?.(request, context)) ?? (await assets.cacheKey?.(request));
+  const {
+    styles,
+    scripts
+  } = await assets.entry({
+    modules,
+    cacheKey
+  });
+  const result = {};
+  if (includeStyles) result.styles = styles;
+  if (includeScripts) result.scripts = scripts;
+  return result;
+}
+
+exports.createAssetPreloader = createAssetPreloader;

package/build/cjs/server/request-router.cjs

@@ -1,17 +1,17 @@
 'use strict';
 
 var react = require('react');
-var server = require('@quilted/async/server');
-var server$2 = require('@quilted/react-async/server');
-var server$3 = require('@quilted/react-http/server');
-var server$1 = require('@quilted/react-html/server');
+var assets = require('@quilted/assets');
+var server$3 = require('@quilted/react-assets/server');
+var server$1 = require('@quilted/react-async/server');
+var server$2 = require('@quilted/react-http/server');
+var server = require('@quilted/react-html/server');
 var server$4 = require('@quilted/react-server-render/server');
 var requestRouter = require('@quilted/request-router');
 var ServerContext = require('./ServerContext.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 
 function createServerRender(getApp, {
-  context,
   stream,
   ...options
 } = {}) {
@@ -19,23 +19,29 @@ function createServerRender(getApp, {
     const accepts = request.headers.get('Accept');
     if (accepts != null && !accepts.includes('text/html')) return;
     const renderResponse = stream ? renderAppToStreamedResponse : renderAppToResponse;
-    return renderResponse(typeof getApp === 'function' ? () => getApp(request, requestContext) : getApp, request, {
+    return renderResponse(typeof getApp === 'function' ? () => getApp(request, requestContext) : getApp, {
       ...options,
+      request,
+      context: requestContext,
       extract: {
         ...options.extract,
-        context: options.extract ?? context?.(request, requestContext) ?? requestContext
+        context: typeof options.extract?.context === 'function' ? options.extract.context(request, requestContext) : options.extract?.context
       }
     });
   };
 }
-async function renderAppToResponse(getApp, request, {
+async function renderAppToResponse(getApp, {
+  request,
+  context,
   assets,
   extract,
   renderHtml
-} = {}) {
+}) {
   const app = typeof getApp === 'function' ? await getApp() : getApp;
+  const cacheKey = await assets?.cacheKey?.(request);
   const renderDetails = await serverRenderDetailsForApp(app, {
     extract,
+    cacheKey,
     url: request.url,
     headers: request.headers
   });
@@ -50,7 +56,9 @@ async function renderAppToResponse(getApp, request, {
       headers
     });
   }
-  const content = await renderAppDetailsToHtmlString(renderDetails, request, {
+  const content = await renderAppDetailsToHtmlString(renderDetails, {
+    request,
+    context,
     assets,
     renderHtml
   });
@@ -59,25 +67,25 @@ async function renderAppToResponse(getApp, request, {
     status: statusCode
   });
 }
-async function renderAppToStreamedResponse(getApp, request, {
-  assets,
+async function renderAppToStreamedResponse(getApp, {
+  request,
+  context,
+  assets: assets$1,
   extract,
   renderHtml
-} = {}) {
+}) {
   const headers = new Headers();
   const stream = new TransformStream();
-  const assetContext = {
-    userAgent: request.headers.get('User-Agent')
-  };
-  const guaranteedAssets = await assets?.assets({
-    context: assetContext
+  const cacheKey = await assets$1?.cacheKey?.(request);
+  const guaranteedAssets = await assets$1?.entry({
+    cacheKey
   });
   if (guaranteedAssets) {
     for (const style of guaranteedAssets.styles) {
-      headers.append('Link', preloadHeader(server.styleAssetPreloadAttributes(style)));
+      headers.append('Link', preloadHeader(assets.styleAssetPreloadAttributes(style)));
     }
     for (const script of guaranteedAssets.scripts) {
-      headers.append('Link', preloadHeader(server.scriptAssetPreloadAttributes(script)));
+      headers.append('Link', preloadHeader(assets.scriptAssetPreloadAttributes(script)));
     }
   }
   renderResponseToStream();
@@ -89,11 +97,14 @@ async function renderAppToStreamedResponse(getApp, request, {
     const app = typeof getApp === 'function' ? await getApp() : getApp;
     const renderDetails = await serverRenderDetailsForApp(app, {
       extract,
+      cacheKey,
       url: request.url,
       headers: request.headers
     });
-    const content = await renderAppDetailsToHtmlString(renderDetails, request, {
-      assets,
+    const content = await renderAppDetailsToHtmlString(renderDetails, {
+      request,
+      context,
+      assets: assets$1,
       renderHtml
     });
     const encoder = new TextEncoder();
@@ -105,13 +116,17 @@ async function renderAppToStreamedResponse(getApp, request, {
 async function serverRenderDetailsForApp(app, {
   url,
   headers,
+  cacheKey,
   extract: extractOptions
 } = {}) {
-  const html = new server$1.HtmlManager();
-  const asyncAssets = new server$2.AsyncAssetManager();
-  const http = new server$3.HttpManager({
+  const html = new server.HtmlManager();
+  const asyncAssets = new server$1.AsyncAssetManager();
+  const http = new server$2.HttpManager({
     headers
   });
+  const assets = new server$3.AssetsManager({
+    cacheKey
+  });
   const {
     decorate,
     ...rest
@@ -123,6 +138,7 @@ async function serverRenderDetailsForApp(app, {
         http: http,
         html: html,
         url: url,
+        assets: assets,
         children: decorate?.(app) ?? app
       });
     },
@@ -132,66 +148,71 @@ async function serverRenderDetailsForApp(app, {
     rendered,
     http,
     html,
-    asyncAssets
+    asyncAssets,
+    assets
   };
 }
-async function renderAppDetailsToHtmlString(details, request, {
+async function renderAppDetailsToHtmlString(details, {
+  request,
+  context,
   assets,
   renderHtml = defaultRenderHtml
-} = {}) {
+}) {
   const {
-    html: htmlManager,
     http,
     rendered,
-    asyncAssets
+    asyncAssets,
+    html: htmlManager,
+    assets: assetsManager
   } = details;
-  const usedAssets = asyncAssets.used({
+  const usedModules = asyncAssets.used({
     timing: 'load'
   });
-  const assetContext = {
-    userAgent: request.headers.get('User-Agent')
-  };
-  const [entryAssets, preloadAssets] = assets ? await Promise.all([assets.assets({
-    async: usedAssets,
-    context: assetContext
-  }), assets.asyncAssets(asyncAssets.used({
+  const cacheKey = assetsManager.cacheKey;
+  const [entryAssets, preloadAssets] = assets ? await Promise.all([assets.entry({
+    modules: usedModules,
+    cacheKey
+  }), assets.modules(asyncAssets.used({
     timing: 'preload'
   }), {
-    context: assetContext
+    cacheKey
   })]) : [];
-  const htmlElement = await renderHtml(rendered, request, {
+  const htmlElement = await renderHtml(rendered, {
+    request,
+    context,
     html: htmlManager,
     http,
     assets: entryAssets,
     preloadAssets
   });
-  return server$1.renderHtmlToString(htmlElement);
+  return server.renderHtmlToString(htmlElement);
 }
-const defaultRenderHtml = function defaultRenderHtml(content, request, {
+const defaultRenderHtml = function defaultRenderHtml(content, {
+  request,
   html,
-  assets,
+  assets: assets$1,
   preloadAssets
 }) {
   const baseUrl = new URL(request.url);
-  return /*#__PURE__*/jsxRuntime.jsx(server$1.Html, {
+  return /*#__PURE__*/jsxRuntime.jsx(server.Html, {
     manager: html,
     headEndContent: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [assets && [...assets.styles].map(style => {
-        const attributes = server.styleAssetAttributes(style, {
+      children: [assets$1 && assets$1.styles.map(style => {
+        const attributes = assets.styleAssetAttributes(style, {
           baseUrl
         });
         return /*#__PURE__*/jsxRuntime.jsx("link", {
           ...attributes
         }, style.source);
-      }), assets && [...assets.scripts].map(script => {
-        const isModule = script.attributes.type === 'module';
-        const attributes = server.scriptAssetAttributes(script, {
+      }), assets$1 && assets$1.scripts.map(script => {
+        const isModule = script.attributes?.type === 'module';
+        const attributes = assets.scriptAssetAttributes(script, {
           baseUrl
         });
         if (isModule) {
           return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
             children: [/*#__PURE__*/jsxRuntime.jsx("link", {
-              ...server.scriptAssetPreloadAttributes(script)
+              ...assets.scriptAssetPreloadAttributes(script)
             }), /*#__PURE__*/jsxRuntime.jsx("script", {
               ...attributes,
               async: true
@@ -202,15 +223,15 @@ const defaultRenderHtml = function defaultRenderHtml(content, request, {
           ...attributes,
           defer: true
         }, script.source);
-      }), preloadAssets && [...preloadAssets.styles].map(style => {
-        const attributes = server.styleAssetPreloadAttributes(style, {
+      }), preloadAssets && preloadAssets.styles.map(style => {
+        const attributes = assets.styleAssetPreloadAttributes(style, {
           baseUrl
         });
         return /*#__PURE__*/jsxRuntime.jsx("link", {
           ...attributes
         }, style.source);
-      }), preloadAssets && [...preloadAssets.scripts].map(script => {
-        const attributes = server.scriptAssetPreloadAttributes(script, {
+      }), preloadAssets && preloadAssets.scripts.map(script => {
+        const attributes = assets.scriptAssetPreloadAttributes(script, {
           baseUrl
         });
         return /*#__PURE__*/jsxRuntime.jsx("link", {

package/build/cjs/static/StaticContext.cjs

@@ -1,20 +1,22 @@
 'use strict';
 
+var server$3 = require('@quilted/react-assets/server');
 var reactRouter = require('@quilted/react-router');
-var server$1 = require('@quilted/react-html/server');
-var server$2 = require('@quilted/react-async/server');
-var server = require('@quilted/react-http/server');
+var server$2 = require('@quilted/react-html/server');
+var server = require('@quilted/react-async/server');
+var server$1 = require('@quilted/react-http/server');
 var react = require('../utilities/react.cjs');
 
 function StaticContext({
   url,
   html,
   http,
+  assets,
   asyncAssets,
   children
 }) {
   const normalizedUrl = typeof url === 'string' ? new URL(url) : url;
-  return react.maybeWrapContext(server$2.AsyncAssetContext, asyncAssets, react.maybeWrapContext(server.HttpServerContext, http, react.maybeWrapContext(server$1.HtmlContext, html, react.maybeWrapContext(reactRouter.InitialUrlContext, normalizedUrl, children))));
+  return react.maybeWrapContext(server$3.AssetsContext, assets, react.maybeWrapContext(server.AsyncAssetContext, asyncAssets, react.maybeWrapContext(server$1.HttpServerContext, http, react.maybeWrapContext(server$2.HtmlContext, html, react.maybeWrapContext(reactRouter.InitialUrlContext, normalizedUrl, children)))));
 }
 
 exports.StaticContext = StaticContext;