npm - @quilted/create - Versions diffs - 0.1.33 → 0.1.35 - Mend

@quilted/create 0.1.33 → 0.1.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,19 @@
 # @quilted/create
+## 0.1.35
+### Patch Changes
+- [`84e74cb1`](https://github.com/lemonmade/quilt/commit/84e74cb1748ef4c427d6a4dfb854fa6898868918) Thanks [@lemonmade](https://github.com/lemonmade)! - Fix default navigation performance experience
+## 0.1.34
+### Patch Changes
+- [#447](https://github.com/lemonmade/quilt/pull/447) [`6ad741b2`](https://github.com/lemonmade/quilt/commit/6ad741b241027c8d7612e206497935ad938ea6c9) Thanks [@lemonmade](https://github.com/lemonmade)! - Simplify app templates
+- [`7cadc8fd`](https://github.com/lemonmade/quilt/commit/7cadc8fdcc99e7b95292b61c2af6cb3aabfa1d33) Thanks [@lemonmade](https://github.com/lemonmade)! - Add Metrics component to app templates
 ## 0.1.33
 ### Patch Changes

package/package.json CHANGED Viewed

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

package/templates/app-basic/App.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
-import {Router, useRoutes, AppContext} from '@quilted/quilt';
+import {QuiltApp, useRoutes, type PropsWithChildren} from '@quilted/quilt';
 import {Http} from './foundation/Http';
 import {Head} from './foundation/Head';
+import {Metrics} from './foundation/Metrics';
 import {Start} from './features/Start';
@@ -9,13 +10,11 @@ import {Start} from './features/Start';
 // app-wide context in this component.
 export default function App() {
   return (
-    <AppContext>
-      <Router>
-        <Http />
-        <Head />
+    <QuiltApp http={<Http />} html={<Head />}>
+      <AppContext>
         <Routes />
-      </Router>
-    </AppContext>
+      </AppContext>
+    </QuiltApp>
   );
 }
@@ -24,3 +23,8 @@ export default function App() {
 function Routes() {
   return useRoutes([{match: '/', render: () => <Start />}]);
 }
+// This component renders any app-wide context.
+function AppContext({children}: PropsWithChildren) {
+  return <Metrics>{children}</Metrics>;
+}

package/templates/app-basic/features/Start/Start.test.tsx CHANGED Viewed

@@ -5,8 +5,8 @@ import {mountWithAppContext} from '~/tests/mount';
 import {Start} from './Start';
 describe('<Start />', () => {
-  it('includes a welcome message', () => {
-    const start = mountWithAppContext(<Start />);
+  it('includes a welcome message', async () => {
+    const start = await mountWithAppContext(<Start />);
     expect(start).toContainReactText('Hello world!');
   });
 });

package/templates/app-basic/features/Start/Start.tsx CHANGED Viewed

@@ -1,5 +1,12 @@
+import {usePerformanceNavigation} from '@quilted/quilt';
 import styles from './Start.module.css';
 export function Start() {
+  // This hook indicates that the page has loaded. It is used as part of Quilt’s
+  // navigation performance tracking feature. If you have disabled this feature,
+  // you can remove this hook.
+  usePerformanceNavigation();
   return <div className={styles.Start}>Hello world!</div>;
 }

package/templates/app-basic/features/Start.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {Start} from './Start/Start';

package/templates/app-basic/foundation/Head/Head.test.tsx CHANGED Viewed

@@ -6,16 +6,16 @@ import {mountWithAppContext} from '~/tests/mount';
 import {Head} from './Head';
 describe('<Head />', () => {
-  it('includes a responsive viewport tag', () => {
-    const head = mountWithAppContext(<Head />);
+  it('includes a responsive viewport tag', async () => {
+    const head = await mountWithAppContext(<Head />);
     expect(head).toContainReactComponent(Viewport, {
       cover: true,
     });
   });
-  it('prevents search robots from indexing the application', () => {
-    const head = mountWithAppContext(<Head />);
+  it('prevents search robots from indexing the application', async () => {
+    const head = await mountWithAppContext(<Head />);
     expect(head).toContainReactComponent(SearchRobots, {
       index: false,

package/templates/app-basic/foundation/Head/Head.tsx CHANGED Viewed

@@ -4,6 +4,8 @@ import {Title, Viewport, Favicon, SearchRobots} from '@quilted/quilt/html';
 // any of these details based on conditions like the active route, or some
 // state about the user, you can move these components to wherever in your
 // application you can read that state.
+//
+// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/html.md
 export function Head() {
   return (
     <>

package/templates/app-basic/foundation/Head.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {Head} from './Head/Head';

package/templates/app-basic/foundation/Http/Http.test.tsx CHANGED Viewed

@@ -6,16 +6,16 @@ import {mountWithAppContext} from '~/tests/mount';
 import {Http} from './Http';
 describe('<Http />', () => {
-  it('does not cache the response', () => {
-    const http = mountWithAppContext(<Http />);
+  it('does not cache the response', async () => {
+    const http = await mountWithAppContext(<Http />);
     expect(http).toContainReactComponent(CacheControl, {
       cache: false,
     });
   });
-  it('adds a content security policy with a strict default policy', () => {
-    const http = mountWithAppContext(<Http />);
+  it('adds a content security policy with a strict default policy', async () => {
+    const http = await mountWithAppContext(<Http />);
     expect(http).toContainReactComponent(ContentSecurityPolicy, {
       defaultSources: ["'self'"],

package/templates/app-basic/foundation/Http/Http.tsx CHANGED Viewed

@@ -12,6 +12,8 @@ import {
 // requests. If you need to customize any of these details based on conditions like
 // the active route, or some state about the user, you can move these components to
 // wherever in your application you can read that state.
+//
+// @see https://github.com/lemonmade/quilt/blob/main/documentation/features/http.md
 export function Http() {
   const isHttps = useCurrentUrl().protocol === 'https:';

package/templates/app-basic/foundation/Http.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {Http} from './Http/Http';

package/templates/app-basic/foundation/Metrics/Metrics.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import {
+  usePerformanceNavigationEvent,
+  type PropsWithChildren,
+} from '@quilted/quilt';
+import Env from '@quilted/quilt/env';
+// This component records metrics about your application.
+export function Metrics({children}: PropsWithChildren) {
+  usePerformanceNavigationEvent(async (navigation) => {
+    if (Env.MODE === 'development') {
+      // eslint-disable-next-line no-console
+      console.log('Navigation:');
+      // eslint-disable-next-line no-console
+      console.log(navigation);
+      return;
+    }
+    // If you have a service that collects metrics, you can send navigation
+    // data to them here.
+  });
+  return <>{children}</>;
+}

package/templates/app-basic/foundation/Metrics.tsx ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {Metrics} from './Metrics/Metrics';

package/templates/app-basic/tests/mount.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
 import '@quilted/quilt/matchers';
+import {type PropsWithChildren} from '@quilted/quilt';
 import {
   createMount,
-  TestRouter,
+  QuiltAppTesting,
   createTestRouter,
 } from '@quilted/quilt/testing';
@@ -18,6 +19,11 @@ export interface MountOptions {
    * you expect.
    */
   router?: Router;
+  /**
+   * A custom locale to use for this component test.
+   */
+  locale?: string;
 }
 export interface MountContext {
@@ -36,12 +42,32 @@ export interface MountActions extends Record<string, never> {}
 export const mountWithAppContext = createMount<
   MountOptions,
   MountContext,
-  MountActions
+  MountActions,
+  true
 >({
+  // Create context that can be used by the `render` function, and referenced by test
+  // authors on the `root.context` property. Context is used to share data between your
+  // React tree and your test code, and is ideal for mocking out global context providers.
   context({router = createTestRouter()}) {
     return {router};
   },
-  render(element, {router}) {
-    return <TestRouter router={router}>{element}</TestRouter>;
+  // Render all of our app-wide context providers around each component under test.
+  render(element, {router}, {locale}) {
+    return (
+      <QuiltAppTesting routing={router} localization={locale}>
+        <TestAppContext>{element}</TestAppContext>
+      </QuiltAppTesting>
+    );
+  },
+  async afterMount() {
+    // If your components need to resolve data before they can render, you can
+    // use this hook to wait for that data to be ready. This will cause the
+    // `mount` function to return a promise, so that the component is only usable
+    // once the data is ready.
   },
 });
+// This component renders any app-wide context needed for component tests.
+function TestAppContext({children}: PropsWithChildren) {
+  return <>{children}</>;
+}

package/templates/app-single-file/App.tsx CHANGED Viewed

@@ -1,4 +1,10 @@
-import {Router, useRoutes, useCurrentUrl, AppContext} from '@quilted/quilt';
+import {
+  QuiltApp,
+  useCurrentUrl,
+  usePerformanceNavigation,
+  usePerformanceNavigationEvent,
+  type Routes,
+} from '@quilted/quilt';
 import {Title, Viewport, Favicon, SearchRobots} from '@quilted/quilt/html';
 import {
   CacheControl,
@@ -9,29 +15,30 @@ import {
 } from '@quilted/quilt/http';
 import Env from '@quilted/quilt/env';
+// This component renders the routes for your application. If you have a lot
+// of routes, or you need to customize the routes based on React context,
+// you can declare dynamic routes in component with Quilt’s `useRoutes()`
+// hook.
+const routes: Routes = [{match: '/', render: () => <Start />}];
 // The root component for your application. You will typically render any
 // app-wide context in this component.
 export default function App() {
   return (
-    <AppContext>
-      <Router>
-        <Http />
-        <Head />
-        <Routes />
-      </Router>
-    </AppContext>
+    <QuiltApp http={<Http />} html={<Head />} routes={routes}>
+      <Metrics />
+    </QuiltApp>
   );
 }
-// This component renders the routes for your application. If you have a lot
-// of routes, you may want to split this component into its own file.
-function Routes() {
-  return useRoutes([{match: '/', render: () => <Start />}]);
-}
 // This component will be rendered for the root URL of your application. Feel
 // free to edit it, rename it, remove it entirely, or move it to a dedicated file.
 function Start() {
+  // This hook indicates that the page has loaded. It is used as part of Quilt’s
+  // navigation performance tracking feature. If you have disabled this feature,
+  // you can remove this hook.
+  usePerformanceNavigation();
   return <div>Hello world!</div>;
 }
@@ -166,3 +173,21 @@ export function Http() {
     </>
   );
 }
+// This component records metrics about your application.
+export function Metrics() {
+  usePerformanceNavigationEvent(async (navigation) => {
+    if (Env.MODE === 'development') {
+      // eslint-disable-next-line no-console
+      console.log('Navigation:');
+      // eslint-disable-next-line no-console
+      console.log(navigation);
+      return;
+    }
+    // If you have a service that collects metrics, you can send navigation
+    // data to them here.
+  });
+  return null;
+}

package/templates/app-basic/features/Start/index.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {Start} from './Start';

package/templates/app-basic/foundation/Head/index.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {Head} from './Head';

package/templates/app-basic/foundation/Http/index.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export {Http} from './Http';