@quilted/create 0.2.41 → 0.2.43

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @quilted/create
 
+## 0.2.43
+
+### Patch Changes
+
+- [`93c5767`](https://github.com/lemonmade/quilt/commit/93c5767e31a5c968bf1fe23cb448bf1c297c91ca) Thanks [@lemonmade](https://github.com/lemonmade)! - Update browser global definitions in app template
+
+- [`33cf6c8`](https://github.com/lemonmade/quilt/commit/33cf6c87e899b54865fe6f1d82b5dab469e7a5fe) Thanks [@lemonmade](https://github.com/lemonmade)! - Move headers to be server-only in default templates
+
+## 0.2.42
+
+### Patch Changes
+
+- [#843](https://github.com/lemonmade/quilt/pull/843) [`5a8036d`](https://github.com/lemonmade/quilt/commit/5a8036d39d93c576812428ecc8fe537a30696dba) Thanks [@lemonmade](https://github.com/lemonmade)! - Make browser context creation implicit on the client
+
 ## 0.2.41
 
 ### Patch Changes

package/build/esm/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/index.mjs

@@ -3,8 +3,8 @@ import './providers/async.mjs';
 import './providers/sync.mjs';
 import './settings.mjs';
 import { __exports as settings } from '../../../../../../../_virtual/settings3.mjs';
-import { __exports as async$1 } from '../../../../../../../_virtual/async4.mjs';
-import { __exports as sync$1 } from '../../../../../../../_virtual/sync4.mjs';
+import { __exports as async$1 } from '../../../../../../../_virtual/async5.mjs';
+import { __exports as sync$1 } from '../../../../../../../_virtual/sync5.mjs';
 
 Object.defineProperty(out, "__esModule", {
   value: true

package/build/esm/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/providers/async.mjs

@@ -1,4 +1,4 @@
-import { __exports as async } from '../../../../../../../../_virtual/async4.mjs';
+import { __exports as async } from '../../../../../../../../_virtual/async5.mjs';
 
 Object.defineProperty(async, "__esModule", {
   value: true

package/build/esm/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/providers/sync.mjs

@@ -1,4 +1,4 @@
-import { __exports as sync } from '../../../../../../../../_virtual/sync4.mjs';
+import { __exports as sync } from '../../../../../../../../_virtual/sync5.mjs';
 
 Object.defineProperty(sync, "__esModule", {
   value: true

package/build/esm/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/providers/async.mjs

@@ -1,6 +1,6 @@
 import { __exports as async } from '../../../../../../../../_virtual/async3.mjs';
 import '../readers/async.mjs';
-import { __exports as async$1 } from '../../../../../../../../_virtual/async5.mjs';
+import { __exports as async$1 } from '../../../../../../../../_virtual/async4.mjs';
 
 Object.defineProperty(async, "__esModule", {
   value: true

package/build/esm/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/providers/stream.mjs

@@ -1,7 +1,7 @@
 import { __exports as stream } from '../../../../../../../../_virtual/stream4.mjs';
 import require$$0 from 'node:stream';
 import '../readers/async.mjs';
-import { __exports as async } from '../../../../../../../../_virtual/async5.mjs';
+import { __exports as async } from '../../../../../../../../_virtual/async4.mjs';
 
 Object.defineProperty(stream, "__esModule", {
   value: true

package/build/esm/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/providers/sync.mjs

@@ -1,6 +1,6 @@
 import { __exports as sync } from '../../../../../../../../_virtual/sync3.mjs';
 import '../readers/sync.mjs';
-import { __exports as sync$1 } from '../../../../../../../../_virtual/sync5.mjs';
+import { __exports as sync$1 } from '../../../../../../../../_virtual/sync4.mjs';
 
 Object.defineProperty(sync, "__esModule", {
   value: true

package/build/esm/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/readers/async.mjs

@@ -1,4 +1,4 @@
-import { __exports as async } from '../../../../../../../../_virtual/async5.mjs';
+import { __exports as async } from '../../../../../../../../_virtual/async4.mjs';
 import require$$2 from 'node:events';
 import '../../../../../../@nodelib_fs.scandir@2.1.5/node_modules/@nodelib/fs.scandir/out/index.mjs';
 import { queueExports } from '../../../../../../fastq@1.13.0/node_modules/fastq/queue.mjs';

package/build/esm/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/readers/sync.mjs

@@ -1,4 +1,4 @@
-import { __exports as sync } from '../../../../../../../../_virtual/sync5.mjs';
+import { __exports as sync } from '../../../../../../../../_virtual/sync4.mjs';
 import '../../../../../../@nodelib_fs.scandir@2.1.5/node_modules/@nodelib/fs.scandir/out/index.mjs';
 import './common.mjs';
 import './reader.mjs';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quilted/create",
   "type": "module",
-  "version": "0.2.41",
+  "version": "0.2.43",
   "license": "MIT",
   "repository": {
     "type": "git",

package/templates/app-basic/App.tsx

@@ -4,7 +4,7 @@ import {NotFound} from '@quilted/quilt/server';
 import {Navigation} from '@quilted/quilt/navigation';
 import {Localization} from '@quilted/quilt/localize';
 
-import {HTML} from './foundation/html.ts';
+import {Head} from './foundation/html.ts';
 import {Frame} from './foundation/frame.ts';
 
 import {Home} from './features/home.ts';
@@ -41,9 +41,8 @@ const routes = [
 export function App({context}: AppProps) {
   return (
     <AppContext context={context}>
-      <HTML>
-        <Navigation router={context.router} routes={routes} context={context} />
-      </HTML>
+      <Head />
+      <Navigation router={context.router} routes={routes} context={context} />
     </AppContext>
   );
 }

package/templates/app-basic/browser.tsx

@@ -1,24 +1,19 @@
 import '@quilted/quilt/globals';
-import {hydrate} from 'preact';
-import {Browser, BrowserContext} from '@quilted/quilt/browser';
+import {hydrate} from '@quilted/quilt/browser';
 import {Router} from '@quilted/quilt/navigation';
 
 import type {AppContext} from '~/shared/context.ts';
 import {App} from './App.tsx';
 
-const element = document.querySelector('#app')!;
-const browser = new Browser();
-
 const context = {
-  router: new Router(browser.request.url),
+  router: new Router(),
 } satisfies AppContext;
 
 // Makes key parts of the app available in the browser console
-Object.assign(globalThis, {app: context});
+Object.defineProperty(globalThis, 'app', {
+  value: {context},
+  enumerable: false,
+  configurable: true,
+});
 
-hydrate(
-  <BrowserContext browser={browser}>
-    <App context={context} />
-  </BrowserContext>,
-  element,
-);
+hydrate(<App context={context} />);

package/templates/app-basic/foundation/html/Head.test.tsx

@@ -0,0 +1,42 @@
+import {describe, it, expect} from 'vitest';
+import {Title, Favicon} from '@quilted/quilt/browser';
+import {SearchRobots, Viewport} from '@quilted/quilt/server';
+
+import {renderApp} from '~/tests/render.ts';
+
+import {Head} from './Head.tsx';
+
+describe('<Head />', () => {
+  it('sets the default title', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(Title, {
+      children: 'App',
+    });
+  });
+
+  it('uses a fun, emoji favicon', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(Favicon, {
+      emoji: '🧶',
+    });
+  });
+
+  it('includes a responsive viewport tag', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(Viewport, {
+      cover: true,
+    });
+  });
+
+  it('prevents search robots from indexing the application', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(SearchRobots, {
+      index: false,
+      follow: false,
+    });
+  });
+});

package/templates/app-basic/foundation/html/Head.tsx

@@ -0,0 +1,34 @@
+import {Title, Favicon} from '@quilted/quilt/browser';
+import {SearchRobots, Viewport} from '@quilted/quilt/server';
+
+// This component sets default `<head>` details of the HTML page. If you need
+// to customize any of these details based on conditions or application data, you
+// can render these same components deeper in the application to override these defaults.
+//
+// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
+export function Head() {
+  return (
+    <>
+      {/* Sets the default `<title>` for this application. */}
+      <Title>App</Title>
+
+      {/*
+       * Sets the default favicon used by the application. You can
+       * change this to a different emoji, make it `blank`, or pass
+       * a URL with the `source` prop.
+       */}
+      <Favicon emoji="🧶" />
+
+      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
+      <Viewport cover />
+
+      {/*
+       * Disables all search indexing for this application. If you are
+       * building an unauthenticated app, you probably want to remove
+       * this component, or update it to control how your site is indexed
+       * by search engines.
+       */}
+      <SearchRobots index={false} follow={false} />
+    </>
+  );
+}

package/templates/app-basic/foundation/html.ts

@@ -1 +1 @@
-export {HTML} from './html/HTML.tsx';
+export {Head} from './html/Head.tsx';

package/templates/app-basic/server.tsx

@@ -1,7 +1,16 @@
 import '@quilted/quilt/globals';
+
 import {RequestRouter} from '@quilted/quilt/request-router';
-import {renderToResponse} from '@quilted/quilt/server';
 import {Router} from '@quilted/quilt/navigation';
+import {
+  renderAppToHTMLResponse,
+  cacheControlHeader,
+  contentSecurityPolicyHeader,
+  permissionsPolicyHeader,
+  strictTransportSecurityHeader,
+} from '@quilted/quilt/server';
+
+import Env from 'quilt:module/env';
 import {BrowserAssets} from 'quilt:module/assets';
 
 import type {AppContext} from '~/shared/context.ts';
@@ -11,15 +20,92 @@ import {App} from './App.tsx';
 const router = new RequestRouter();
 const assets = new BrowserAssets();
 
-// For all GET requests, render our React application.
+// For all GET requests, render our Preact application.
 router.get(async (request) => {
   const context = {
     router: new Router(request.url),
   } satisfies AppContext;
 
-  const response = await renderToResponse(<App context={context} />, {
+  const isHttps = request.url.startsWith('https://');
+
+  const response = await renderAppToHTMLResponse(<App context={context} />, {
     request,
     assets,
+    headers: {
+      // Controls how much information about the current page is included in
+      // requests (through the `Referer` header). The default value
+      // (strict-origin-when-cross-origin) means that only the origin is included
+      // for cross-origin requests, while the origin, path, and querystring
+      // are included for same-origin requests.
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
+      'Referrer-Policy': 'strict-origin-when-cross-origin',
+
+      // Disables the cache for this page, which is generally the best option
+      // when dealing with authenticated content. If your site doesn't have
+      // authentication, or you have a better cache policy that works for your
+      // app or deployment, make sure to update this component accordingly!
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
+      'Cache-Control': cacheControlHeader({
+        cache: false,
+      }),
+
+      // Sets a strict content security policy for this page. If you load
+      // assets from other origins, or want to allow some more dangerous
+      // resource loading techniques like `eval`, you can change the
+      // `defaultSources` to be less restrictive, or add additional items
+      // to the allowlist for more specific directives.
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
+      'Content-Security-Policy': contentSecurityPolicyHeader({
+        // By default, only allow sources from the page's origin.
+        defaultSources: ["'self'"],
+        // In development, allow connections to local websockets for hot reloading.
+        connectSources:
+          Env.MODE === 'development'
+            ? ["'self'", `${isHttps ? 'ws' : 'wss'}://localhost:*`]
+            : undefined,
+        // Includes `'unsafe-inline'` because CSS is often necessary in development,
+        // and can be difficult to avoid in production.
+        styleSources: ["'self'", "'unsafe-inline'"],
+        // Includes `data:` so that an inline image can be used for the favicon.
+        // If you do not use the `emoji` or `blank` favicons in your app, and you
+        // do not load any other images as data URIs, you can remove this directive.
+        imageSources: ["'self'", 'data:'],
+        // Don't allow this page to be rendered as a frame from a different origin.
+        frameAncestors: false,
+        // Ensure that all requests made by this page are made over https, unless
+        // it is being served over http (typically, during local development)
+        upgradeInsecureRequests: isHttps,
+      }),
+
+      // Sets a strict permissions policy for this page, which limits access
+      // to some native browser features.
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
+      'Permissions-Policy': permissionsPolicyHeader({
+        // Disables Google's Federated Learning of Cohorts ("FLoC") tracking initiative.
+        // @see https://www.eff.org/deeplinks/2021/03/googles-floc-terrible-idea
+        interestCohort: false,
+        // Don't use synchronous XHRs!
+        // @see https://featurepolicy.info/policies/sync-xhr
+        syncXhr: false,
+        // Disables access to a few device APIs that are infrequently used
+        // and prone to abuse. If your application uses these APIs intentionally,
+        // feel free to remove the prop, or pass an array containing the origins
+        // that should be allowed to use this feature (e.g., `['self']` to allow
+        // only the main page's origin).
+        camera: false,
+        microphone: false,
+        geolocation: false,
+      }),
+
+      // Instructs browsers to only load this page over HTTPS.
+      //
+      // @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security
+      'Strict-Transport-Security': strictTransportSecurityHeader(),
+    },
   });
 
   return response;

package/templates/app-basic/tests/render/render.tsx

@@ -1,5 +1,8 @@
 import {createRender} from '@quilted/quilt/testing';
-import {BrowserContext, BrowserTestMock} from '@quilted/quilt/browser/testing';
+import {
+  BrowserDetailsContext,
+  BrowserTestMock,
+} from '@quilted/quilt/browser/testing';
 import {Navigation, TestRouter} from '@quilted/quilt/navigation/testing';
 import {Localization} from '@quilted/quilt/localize';
 
@@ -29,11 +32,11 @@ export const renderApp = createRender<
 
     return (
       <AppContextReact.Provider value={context}>
-        <BrowserContext browser={browser}>
+        <BrowserDetailsContext.Provider value={browser}>
           <Localization locale={locale}>
             <Navigation router={router}>{element}</Navigation>
           </Localization>
-        </BrowserContext>
+        </BrowserDetailsContext.Provider>
       </AppContextReact.Provider>
     );
   },

package/templates/app-empty/server.tsx

@@ -1,6 +1,7 @@
 import '@quilted/quilt/globals';
+
 import {RequestRouter} from '@quilted/quilt/request-router';
-import {renderToResponse} from '@quilted/quilt/server';
+import {renderAppToHTMLResponse} from '@quilted/quilt/server';
 import {BrowserAssets} from 'quilt:module/assets';
 
 import {App} from './App.tsx';
@@ -8,9 +9,9 @@ import {App} from './App.tsx';
 const router = new RequestRouter();
 const assets = new BrowserAssets();
 
-// For all GET requests, render our React application.
+// For all GET requests, render our Preact application.
 router.get(async (request) => {
-  const response = await renderToResponse(<App />, {
+  const response = await renderAppToHTMLResponse(<App />, {
     request,
     assets,
   });

package/templates/app-graphql/App.tsx

@@ -5,7 +5,7 @@ import {GraphQLContext} from '@quilted/quilt/graphql';
 import {Navigation} from '@quilted/quilt/navigation';
 import {Localization} from '@quilted/quilt/localize';
 
-import {HTML} from './foundation/html.ts';
+import {Head} from './foundation/html.ts';
 import {Frame} from './foundation/frame.ts';
 
 import {Home, homeQuery} from './features/home.ts';
@@ -42,9 +42,8 @@ const routes = [
 export function App({context}: AppProps) {
   return (
     <AppContext context={context}>
-      <HTML>
-        <Navigation router={context.router} routes={routes} context={context} />
-      </HTML>
+      <Head />
+      <Navigation router={context.router} routes={routes} context={context} />
     </AppContext>
   );
 }

package/templates/app-graphql/browser.tsx

@@ -1,22 +1,18 @@
 import '@quilted/quilt/globals';
 
-import {hydrate} from 'preact';
-import {createGraphQLFetch, GraphQLCache} from '@quilted/quilt/graphql';
-import {Browser, BrowserContext} from '@quilted/quilt/browser';
+import {hydrate} from '@quilted/quilt/browser';
 import {Router} from '@quilted/quilt/navigation';
+import {createGraphQLFetch, GraphQLCache} from '@quilted/quilt/graphql';
 
 import type {AppContext} from '~/shared/context.ts';
 
 import {App} from './App.tsx';
 
-const element = document.querySelector('#app')!;
-const browser = new Browser();
-
 const graphQLFetch = createGraphQLFetch({url: '/api/graphql'});
 const graphQLCache = new GraphQLCache({fetch: graphQLFetch});
 
 const context = {
-  router: new Router(browser.request.url),
+  router: new Router(),
   graphql: {
     fetch: graphQLFetch,
     cache: graphQLCache,
@@ -24,11 +20,10 @@ const context = {
 } satisfies AppContext;
 
 // Makes key parts of the app available in the browser console
-Object.assign(globalThis, {app: context});
+Object.defineProperty(globalThis, 'app', {
+  value: {context},
+  enumerable: false,
+  configurable: true,
+});
 
-hydrate(
-  <BrowserContext browser={browser}>
-    <App context={context} />
-  </BrowserContext>,
-  element,
-);
+hydrate(<App context={context} />);

package/templates/app-graphql/foundation/html/Head.test.tsx

@@ -0,0 +1,42 @@
+import {describe, it, expect} from 'vitest';
+import {Title, Favicon} from '@quilted/quilt/browser';
+import {SearchRobots, Viewport} from '@quilted/quilt/server';
+
+import {renderApp} from '~/tests/render.ts';
+
+import {Head} from './Head.tsx';
+
+describe('<Head />', () => {
+  it('sets the default title', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(Title, {
+      children: 'App',
+    });
+  });
+
+  it('uses a fun, emoji favicon', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(Favicon, {
+      emoji: '🧶',
+    });
+  });
+
+  it('includes a responsive viewport tag', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(Viewport, {
+      cover: true,
+    });
+  });
+
+  it('prevents search robots from indexing the application', async () => {
+    const head = await renderApp(<Head />);
+
+    expect(head).toContainPreactComponent(SearchRobots, {
+      index: false,
+      follow: false,
+    });
+  });
+});

package/templates/app-graphql/foundation/html/Head.tsx

@@ -0,0 +1,34 @@
+import {Title, Favicon} from '@quilted/quilt/browser';
+import {SearchRobots, Viewport} from '@quilted/quilt/server';
+
+// This component sets default `<head>` details of the HTML page. If you need
+// to customize any of these details based on conditions or application data, you
+// can render these same components deeper in the application to override these defaults.
+//
+// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
+export function Head() {
+  return (
+    <>
+      {/* Sets the default `<title>` for this application. */}
+      <Title>App</Title>
+
+      {/*
+       * Sets the default favicon used by the application. You can
+       * change this to a different emoji, make it `blank`, or pass
+       * a URL with the `source` prop.
+       */}
+      <Favicon emoji="🧶" />
+
+      {/* Adds a responsive-friendly `viewport` `<meta>` tag. */}
+      <Viewport cover />
+
+      {/*
+       * Disables all search indexing for this application. If you are
+       * building an unauthenticated app, you probably want to remove
+       * this component, or update it to control how your site is indexed
+       * by search engines.
+       */}
+      <SearchRobots index={false} follow={false} />
+    </>
+  );
+}

package/templates/app-graphql/foundation/html.ts

@@ -1 +1 @@
-export {HTML} from './html/HTML.tsx';
+export {Head} from './html/Head.tsx';