npm - @quilted/create - Versions diffs - 0.1.77 → 0.1.79 - Mend

@quilted/create 0.1.77 → 0.1.79

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 (112) hide show

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

@@ -1,20 +1,40 @@
-import {QuiltApp, useRoutes, type PropsWithChildren} from '@quilted/quilt';
+import {HTML} from '@quilted/quilt/html';
+import {Routing, useRoutes} from '@quilted/quilt/navigate';
+import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
+import {type PropsWithChildren} from '@quilted/quilt/react/tools';
-import {Http} from './foundation/Http.tsx';
-import {Head} from './foundation/Head.tsx';
-import {Metrics} from './foundation/Metrics.tsx';
+import {Head} from './foundation/html.ts';
+import {Headers} from './foundation/http.ts';
+import {Frame} from './foundation/frame.ts';
-import {Start} from './features/Start.tsx';
+import {Start} from './features/start.ts';
+import {
+  AppContextReact,
+  type AppContext as AppContextType,
+} from './shared/context.ts';
+export interface AppProps extends AppContextType {}
 // The root component for your application. You will typically render any
 // app-wide context in this component.
-export default function App() {
+export function App(props: AppProps) {
+  const locale = useLocaleFromEnvironment() ?? 'en';
   return (
-    <QuiltApp http={<Http />} html={<Head />}>
-      <AppContext>
-        <Routes />
-      </AppContext>
-    </QuiltApp>
+    <HTML>
+      <Localization locale={locale}>
+        <Routing>
+          <AppContext {...props}>
+            <Headers />
+            <Head />
+            <Frame>
+              <Routes />
+            </Frame>
+          </AppContext>
+        </Routing>
+      </Localization>
+    </HTML>
   );
 }
@@ -27,6 +47,10 @@ function Routes() {
 }
 // This component renders any app-wide context.
-function AppContext({children}: PropsWithChildren) {
-  return <Metrics>{children}</Metrics>;
+function AppContext({children, ...context}: PropsWithChildren<AppProps>) {
+  return (
+    <AppContextReact.Provider value={context}>
+      {children}
+    </AppContextReact.Provider>
+  );
 }

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

@@ -1,7 +1,7 @@
-import '@quilted/quilt/global';
+import '@quilted/quilt/globals';
 import {hydrateRoot} from 'react-dom/client';
-import App from './App.tsx';
+import {App} from './App.tsx';
 const element = document.querySelector('#app')!;

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

@@ -0,0 +1,5 @@
+import styles from './Start.module.css';
+export default function Start() {
+  return <div className={styles.Start}>Hello world!</div>;
+}

package/templates/app-basic/features/start.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import {createAsyncComponent} from '@quilted/quilt/async';
+export const Start = createAsyncComponent(
+  () => import('./start/Start/Start.tsx'),
+);

package/templates/app-basic/foundation/frame/Frame.module.css ADDED Viewed

@@ -0,0 +1,14 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+html,
+body {
+  margin: 0;
+}
+.Frame {
+  padding: 1rem;
+}

package/templates/app-basic/foundation/frame/Frame.tsx ADDED Viewed

@@ -0,0 +1,7 @@
+import type {PropsWithChildren} from '@quilted/quilt/react/tools';
+import styles from './Frame.module.css';
+export function Frame({children}: PropsWithChildren) {
+  return <div className={styles.Frame}>{children}</div>;
+}

package/templates/app-basic/foundation/frame.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {Frame} from './frame/Frame.tsx';

package/templates/app-basic/foundation/{Head → html}/Head.test.tsx RENAMED Viewed

@@ -1,13 +1,13 @@
-import {Viewport, SearchRobots} from '@quilted/quilt/html';
 import {describe, it, expect} from '@quilted/quilt/testing';
+import {Viewport, SearchRobots} from '@quilted/quilt/html';
-import {renderWithAppContext} from '~/tests/render.tsx';
+import {renderApp} from '~/tests/render.tsx';
 import {Head} from './Head.tsx';
 describe('<Head />', () => {
   it('includes a responsive viewport tag', async () => {
-    const head = await renderWithAppContext(<Head />);
+    const head = await renderApp(<Head />);
     expect(head).toContainReactComponent(Viewport, {
       cover: true,
@@ -15,7 +15,7 @@ describe('<Head />', () => {
   });
   it('prevents search robots from indexing the application', async () => {
-    const head = await renderWithAppContext(<Head />);
+    const head = await renderApp(<Head />);
     expect(head).toContainReactComponent(SearchRobots, {
       index: false,

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

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

package/templates/{app-trpc/foundation/Http/Http.test.tsx → app-basic/foundation/http/Headers.test.tsx} RENAMED Viewed

@@ -1,23 +1,23 @@
-import {CacheControl, ContentSecurityPolicy} from '@quilted/quilt/http';
 import {describe, it, expect} from '@quilted/quilt/testing';
+import {CacheControl, ContentSecurityPolicy} from '@quilted/quilt/http';
-import {renderWithAppContext} from '~/tests/render.tsx';
+import {renderApp} from '~/tests/render.tsx';
-import {Http} from './Http.tsx';
+import {Headers} from './Headers.tsx';
-describe('<Http />', () => {
+describe('<Headers />', () => {
   it('does not cache the response', async () => {
-    const http = await renderWithAppContext(<Http />);
+    const headers = await renderApp(<Headers />);
-    expect(http).toContainReactComponent(CacheControl, {
+    expect(headers).toContainReactComponent(CacheControl, {
       cache: false,
     });
   });
   it('adds a content security policy with a strict default policy', async () => {
-    const http = await renderWithAppContext(<Http />);
+    const headers = await renderApp(<Headers />);
-    expect(http).toContainReactComponent(ContentSecurityPolicy, {
+    expect(headers).toContainReactComponent(ContentSecurityPolicy, {
       defaultSources: ["'self'"],
     });
   });

package/templates/app-basic/foundation/{Http/Http.tsx → http/Headers.tsx} RENAMED Viewed

@@ -1,5 +1,5 @@
 import Env from '@quilted/quilt/env';
-import {useCurrentUrl} from '@quilted/quilt';
+import {useInitialUrl} from '@quilted/quilt/navigate';
 import {
   CacheControl,
   ResponseHeader,
@@ -14,8 +14,8 @@ import {
 // 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:';
+export function Headers() {
+  const isHttps = useInitialUrl().protocol === 'https:';
   return (
     <>

package/templates/app-basic/foundation/http.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {Headers} from './http/Headers.tsx';

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

@@ -1,20 +1,23 @@
-import '@quilted/quilt/global';
-import {createRequestRouter, createServerRender} from '@quilted/quilt/server';
-import {createBrowserAssets} from '@quilted/quilt/magic/assets';
+import '@quilted/quilt/globals';
+import {RequestRouter} from '@quilted/quilt/request-router';
+import {BrowserAssets} from '@quilted/quilt/magic/assets';
-const router = createRequestRouter();
+const router = new RequestRouter();
+const assets = new BrowserAssets();
 // For all GET requests, render our React application.
-router.get(
-  createServerRender(
-    async () => {
-      const {default: App} = await import('./App.tsx');
-      return <App />;
-    },
-    {
-      assets: createBrowserAssets(),
-    },
-  ),
-);
+router.get(async (request) => {
+  const [{App}, {renderToResponse}] = await Promise.all([
+    import('./App.tsx'),
+    import('@quilted/quilt/server'),
+  ]);
+  const response = await renderToResponse(<App />, {
+    request,
+    assets,
+  });
+  return response;
+});
 export default router;

package/templates/app-basic/shared/context.ts CHANGED Viewed

@@ -1,14 +1,9 @@
 import {
   createOptionalContext,
   createUseContextHook,
-  createUseOptionalValueHook,
-} from '@quilted/quilt';
+} from '@quilted/quilt/react/tools';
 export interface AppContext {}
 export const AppContextReact = createOptionalContext<AppContext>();
 export const useAppContext = createUseContextHook(AppContextReact);
-export function createUseAppContextHook<T>(hook: (context: AppContext) => T) {
-  return createUseOptionalValueHook<T>(() => hook(useAppContext()));
-}

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

@@ -1,8 +1,6 @@
-import {
-  createRender,
-  QuiltAppTesting,
-  createTestRouter,
-} from '@quilted/quilt/testing';
+import {createRender} from '@quilted/quilt/react/testing';
+import {TestRouting, TestRouter} from '@quilted/quilt/navigate/testing';
+import {Localization} from '@quilted/quilt/localize';
 import {AppContextReact} from '~/shared/context.ts';
@@ -21,19 +19,21 @@ export const renderApp = createRender<
   // 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()}) {
+  context({router = new TestRouter()}) {
     return {router};
   },
   // Render all of our app-wide context providers around each component under test.
-  render(element, context, {locale}) {
+  render(element, context, {locale = 'en'}) {
     const {router} = context;
     return (
-      <QuiltAppTesting routing={router} localization={locale}>
-        <AppContextReact.Provider value={context}>
-          {element}
-        </AppContextReact.Provider>
-      </QuiltAppTesting>
+      <Localization locale={locale}>
+        <TestRouting router={router}>
+          <AppContextReact.Provider value={context}>
+            {element}
+          </AppContextReact.Provider>
+        </TestRouting>
+      </Localization>
     );
   },
   async afterRender() {

package/templates/app-basic/tests/render/types.ts CHANGED Viewed

@@ -1,9 +1,7 @@
-import type {createTestRouter} from '@quilted/quilt/testing';
+import type {TestRouter} from '@quilted/quilt/navigate/testing';
 import type {AppContext} from '~/shared/context.ts';
-type Router = ReturnType<typeof createTestRouter>;
 export interface RenderOptions {
   /**
    * A custom router to use for this component test. You can use a
@@ -11,7 +9,7 @@ export interface RenderOptions {
    * its navigation method to check that components navigate as
    * you expect.
    */
-  readonly router?: Router;
+  readonly router?: TestRouter;
   /**
    * A custom locale to use for this component test.
@@ -23,7 +21,7 @@ export interface RenderContext extends AppContext {
   /**
    * The router used for this component test.
    */
-  readonly router: Router;
+  readonly router: TestRouter;
 }
 export interface RenderActions extends Record<string, never> {}

package/templates/app-basic/tests/render.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import '@quilted/quilt/matchers';
+import '@quilted/quilt/react/testing';
-export {createTestRouter} from '@quilted/quilt/testing';
+export {TestRouter} from '@quilted/quilt/navigate/testing';
 export * from './render/types.ts';
 export {renderApp} from './render/render.tsx';

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

@@ -1,3 +1,3 @@
-export default function App() {
+export function App() {
   return <div>Hello world!</div>;
 }

package/templates/app-empty/browser.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import {hydrateRoot} from 'react-dom/client';
-import App from './App.tsx';
+import {App} from './App.tsx';
 const element = document.querySelector('#app')!;

package/templates/app-empty/server.tsx CHANGED Viewed

@@ -1,19 +1,23 @@
-import {createRequestRouter, createServerRender} from '@quilted/quilt/server';
-import {createBrowserAssets} from '@quilted/quilt/magic/assets';
+import '@quilted/quilt/globals';
+import {RequestRouter} from '@quilted/quilt/request-router';
+import {BrowserAssets} from '@quilted/quilt/magic/assets';
-const router = createRequestRouter();
+const router = new RequestRouter();
+const assets = new BrowserAssets();
 // For all GET requests, render our React application.
-router.get(
-  createServerRender(
-    async () => {
-      const {default: App} = await import('./App.tsx');
-      return <App />;
-    },
-    {
-      assets: createBrowserAssets(),
-    },
-  ),
-);
+router.get(async (request) => {
+  const [{App}, {renderToResponse}] = await Promise.all([
+    import('./App.tsx'),
+    import('@quilted/quilt/server'),
+  ]);
+  const response = await renderToResponse(<App />, {
+    request,
+    assets,
+  });
+  return response;
+});
 export default router;

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

@@ -1,11 +1,9 @@
 import {useMemo} from 'react';
-import {
-  QuiltApp,
-  useRoutes,
-  RoutePreloading,
-  type PropsWithChildren,
-} from '@quilted/quilt';
+import {HTML} from '@quilted/quilt/html';
+import {Routing, useRoutes} from '@quilted/quilt/navigate';
+import {Localization, useLocaleFromEnvironment} from '@quilted/quilt/localize';
+import {type PropsWithChildren} from '@quilted/quilt/react/tools';
 import {
   GraphQLContext,
   createGraphQLHttpFetch,
@@ -15,27 +13,40 @@ import {
 import {ReactQueryContext} from '@quilted/react-query';
 import {QueryClient} from '@tanstack/react-query';
-import {Http} from './foundation/Http.tsx';
-import {Head} from './foundation/Head.tsx';
-import {Metrics} from './foundation/Metrics.tsx';
+import {Head} from './foundation/html.ts';
+import {Headers} from './foundation/http.ts';
+import {Frame} from './foundation/frame.ts';
+import {Start} from './features/start.ts';
-import {Start} from './features/Start.tsx';
+import {
+  AppContextReact,
+  type AppContext as AppContextType,
+} from './shared/context.ts';
-export interface Props {
+export interface AppProps extends AppContextType {
   fetchGraphQL?: GraphQLFetch;
 }
 // The root component for your application. You will typically render any
 // app-wide context in this component.
-export default function App(props: Props) {
+export function App(props: AppProps) {
+  const locale = useLocaleFromEnvironment() ?? 'en';
   return (
-    <QuiltApp http={<Http />} html={<Head />}>
-      <RoutePreloading>
-        <AppContext {...props}>
-          <Routes />
-        </AppContext>
-      </RoutePreloading>
-    </QuiltApp>
+    <HTML>
+      <Localization locale={locale}>
+        <Routing>
+          <AppContext {...props}>
+            <Headers />
+            <Head />
+            <Frame>
+              <Routes />
+            </Frame>
+          </AppContext>
+        </Routing>
+      </Localization>
+    </HTML>
   );
 }
@@ -43,11 +54,7 @@ export default function App(props: Props) {
 // of routes, you may want to split this component into its own file.
 function Routes() {
   return useRoutes([
-    {
-      match: '/',
-      render: <Start />,
-      renderPreload: <Start.Preload />,
-    },
+    {match: '/', render: <Start />, renderPreload: <Start.Preload />},
   ]);
 }
@@ -55,7 +62,8 @@ function Routes() {
 function AppContext({
   children,
   fetchGraphQL: customFetchGraphQL,
-}: PropsWithChildren<Props>) {
+  ...context
+}: PropsWithChildren<AppProps>) {
   const {fetchGraphQL, queryClient} = useMemo(() => {
     return {
       fetchGraphQL:
@@ -67,7 +75,9 @@ function AppContext({
   return (
     <GraphQLContext fetch={fetchGraphQL}>
       <ReactQueryContext client={queryClient}>
-        <Metrics>{children}</Metrics>
+        <AppContextReact.Provider value={context}>
+          {children}
+        </AppContextReact.Provider>
       </ReactQueryContext>
     </GraphQLContext>
   );

package/templates/app-graphql/browser.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import '@quilted/quilt/global';
+import '@quilted/quilt/globals';
 import {hydrateRoot} from 'react-dom/client';
 import App from './App.tsx';

package/templates/app-graphql/features/{Start → start/Start}/Start.test.tsx RENAMED Viewed

@@ -1,10 +1,6 @@
 import {describe, it, expect} from '@quilted/quilt/testing';
-import {
-  renderApp,
-  fillGraphQL,
-  createGraphQLController,
-} from '~/tests/render.tsx';
+import {renderApp, fillGraphQL, GraphQLController} from '~/tests/render.ts';
 import Start from './Start.tsx';
 import startQuery from './StartQuery.graphql';
@@ -12,11 +8,11 @@ import startQuery from './StartQuery.graphql';
 describe('<Start />', () => {
   it('welcomes the user with their name', async () => {
     const name = 'Winston';
-    const graphql = createGraphQLController(fillGraphQL(startQuery, {name}));
+    const graphql = new GraphQLController([fillGraphQL(startQuery, {name})]);
     const start = await renderApp(<Start />, {graphql});
-    expect(graphql).toHavePerformedGraphQLOperation(startQuery);
+    expect(graphql).toHavePerformedGraphQLQuery(startQuery);
     expect(start).toContainReactText(`Hello ${name}!`);
   });
 });

package/templates/app-graphql/features/start/Start/Start.tsx ADDED Viewed

@@ -0,0 +1,14 @@
+import {useGraphQLQuery} from '@quilted/react-query';
+import styles from './Start.module.css';
+import startQuery from './StartQuery.graphql';
+export default function Start() {
+  const {data} = useGraphQLQuery(startQuery);
+  return (
+    <div className={styles.Start}>
+      {data ? `Hello ${data.name}!` : 'Hello!'}
+    </div>
+  );
+}

package/templates/app-graphql/features/start.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import {createAsyncComponent} from '@quilted/quilt/async';
+export const Start = createAsyncComponent(
+  () => import('./start/Start/Start.tsx'),
+);

package/templates/app-graphql/foundation/frame/Frame.module.css ADDED Viewed

@@ -0,0 +1,14 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+html,
+body {
+  margin: 0;
+}
+.Frame {
+  padding: 1rem;
+}

package/templates/app-graphql/foundation/frame/Frame.tsx ADDED Viewed

@@ -0,0 +1,7 @@
+import type {PropsWithChildren} from '@quilted/quilt/react/tools';
+import styles from './Frame.module.css';
+export function Frame({children}: PropsWithChildren) {
+  return <div className={styles.Frame}>{children}</div>;
+}

package/templates/app-graphql/foundation/frame.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {Frame} from './frame/Frame.tsx';

package/templates/{app-trpc/foundation/Head → app-graphql/foundation/html}/Head.test.tsx RENAMED Viewed

@@ -1,13 +1,13 @@
-import {Viewport, SearchRobots} from '@quilted/quilt/html';
 import {describe, it, expect} from '@quilted/quilt/testing';
+import {Viewport, SearchRobots} from '@quilted/quilt/html';
-import {renderWithAppContext} from '~/tests/render.tsx';
+import {renderApp} from '~/tests/render.tsx';
 import {Head} from './Head.tsx';
 describe('<Head />', () => {
   it('includes a responsive viewport tag', async () => {
-    const head = await renderWithAppContext(<Head />);
+    const head = await renderApp(<Head />);
     expect(head).toContainReactComponent(Viewport, {
       cover: true,
@@ -15,7 +15,7 @@ describe('<Head />', () => {
   });
   it('prevents search robots from indexing the application', async () => {
-    const head = await renderWithAppContext(<Head />);
+    const head = await renderApp(<Head />);
     expect(head).toContainReactComponent(SearchRobots, {
       index: false,

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

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

package/templates/{app-basic/foundation/Http/Http.test.tsx → app-graphql/foundation/http/Headers.test.tsx} RENAMED Viewed

@@ -1,23 +1,23 @@
-import {CacheControl, ContentSecurityPolicy} from '@quilted/quilt/http';
 import {describe, it, expect} from '@quilted/quilt/testing';
+import {CacheControl, ContentSecurityPolicy} from '@quilted/quilt/http';
-import {renderWithAppContext} from '~/tests/render.tsx';
+import {renderApp} from '~/tests/render.tsx';
-import {Http} from './Http.tsx';
+import {Headers} from './Headers.tsx';
-describe('<Http />', () => {
+describe('<Headers />', () => {
   it('does not cache the response', async () => {
-    const http = await renderWithAppContext(<Http />);
+    const headers = await renderApp(<Headers />);
-    expect(http).toContainReactComponent(CacheControl, {
+    expect(headers).toContainReactComponent(CacheControl, {
       cache: false,
     });
   });
   it('adds a content security policy with a strict default policy', async () => {
-    const http = await renderWithAppContext(<Http />);
+    const headers = await renderApp(<Headers />);
-    expect(http).toContainReactComponent(ContentSecurityPolicy, {
+    expect(headers).toContainReactComponent(ContentSecurityPolicy, {
       defaultSources: ["'self'"],
     });
   });