feat: add intercept + cleanup

.github/release.yml

@@ -1,14 +1,14 @@
 changelog:
   categories:
-  - title: Documentation Changes
-    labels:
-    - documentation
-  - title: New Features
-    labels:
-    - enhancement
-  - title: Bug Fixes
-    labels:
-    - bug
-  - title: Other Changes
-    labels:
-       - "*"
+    - title: Documentation Changes
+      labels:
+        - documentation
+    - title: New Features
+      labels:
+        - enhancement
+    - title: Bug Fixes
+      labels:
+        - bug
+    - title: Other Changes
+      labels:
+        - "*"

.github/workflows/bump.yml

@@ -4,7 +4,7 @@ on:
   workflow_dispatch:
     inputs:
       version:
-        description: 'Type of version (major / minor / patch)'
+        description: "Type of version (major / minor / patch)"
         required: true
 
 jobs:
@@ -19,16 +19,16 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '16'
-          cache: 'npm'
+          node-version: "16"
+          cache: "pnpm"
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        uses: bahmutov/pnpm-install@v1
       - name: Setup Git
         run: |
           git config user.name '${{ secrets.GIT_USER_NAME }}'
           git config user.email '${{ secrets.GIT_USER_EMAIL }}'
       - name: bump version
-        run: npm version ${{ github.event.inputs.version }}
+        run: pnpm version ${{ github.event.inputs.version }}
 
       - name: Push latest version
-        run: git push origin main --follow-tags
+        run: git push origin main --follow-tags

.github/workflows/ci.yml

@@ -16,10 +16,10 @@ jobs:
           node-version: "lts/*"
 
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        uses: bahmutov/pnpm-install@v1
 
       - name: Build
-        run: npm run build
+        run: pnpm run build
 
   typecheck:
     name: Typechecker
@@ -34,10 +34,10 @@ jobs:
           node-version: "lts/*"
 
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        uses: bahmutov/pnpm-install@v1
 
       - name: Typecheck
-        run: npm run typecheck
+        run: pnpm run typecheck
 
   test:
     name: Unit and Integration Tests
@@ -52,10 +52,10 @@ jobs:
           node-version: "lts/*"
 
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        uses: bahmutov/pnpm-install@v1
 
       - name: Test
-        run: npm run test
+        run: pnpm run test
 
   lint:
     name: Linter
@@ -70,7 +70,7 @@ jobs:
           node-version: "lts/*"
 
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        uses: bahmutov/pnpm-install@v1
 
       - name: Lint
-        run: npm run lint
+        run: pnpm run lint

.npmignore

@@ -4,6 +4,7 @@
 /test
 /coverage
 /.turbo
+*.config.*
 .eslintrc.js
 .gitignore
 .npmignore

.prettierignore

@@ -0,0 +1,7 @@
+node_modules
+
+build
+public/build
+.env
+
+tailwind.css

CONTRIBUTING.md

@@ -2,10 +2,10 @@
 
 ## Setup
 
-Run `npm install` to install the dependencies.
+Run `pnpm install` to install the dependencies.
 
-Run the tests with `npm run test`.
+Run the tests with `pnpm run test`.
 
-Run the linter with `npm run lint`.
+Run the linter with `pnpm run lint`.
 
-Run the typechecker with `npm run typecheck`.
+Run the typechecker with `pnpm run typecheck`.

README.md

@@ -2,7 +2,7 @@
 
 A way to preview and test email templates in Remix with minimal setup.
 
-[Example usage and docs here](remix-mailer.gregermendle.com)
+[Example usage and docs here](https://remix-mailer.gregermendle.com)
 
 ## Installation
 
@@ -30,7 +30,7 @@ import {
 import { renderAsync } from "@react-email/components";
 
 // Import remix-mailer styles and components
-import { loadPreview, PreviewBrowser } from "remix-mailer";
+import { loadPreviews, PreviewBrowser } from "remix-mailer";
 import remixMailerStylesheet from "remix-mailer/index.css";
 
 // Import your email template components
@@ -45,7 +45,7 @@ export const links: LinksFunction = () => [
 ];
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
-  const previews = await loadPreview(
+  const previews = await loadPreviews(
     request,
     {
       loginCode: LoginCode,
@@ -55,7 +55,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
       // Anything that renders to a string of HTML can be used here
       renderer: async (Component) =>
         renderAsync(<Component {...Component?.PreviewProps} />),
-    }
+    },
   );
 
   return json({

apps/example/app/routes/__layout._index.tsx

@@ -20,7 +20,7 @@ import { renderAsync } from "@react-email/components";
 
 
 // Import remix-mailer styles and components
-import { loadPreview, PreviewBrowser } from "remix-mailer";
+import { loadPreviews, PreviewBrowser } from "remix-mailer";
 import remixMailerStylesheet from "remix-mailer/index.css";
 
 
@@ -36,7 +36,7 @@ export const links: LinksFunction = () => [
 ];
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
-  const previews = await loadPreview(
+  const previews = await loadPreviews(
     request,
     {
       loginCode: LoginCode,
@@ -171,7 +171,7 @@ export default function _Index() {
               </code>
               <Shikiize
                 id="example"
-                className="px-4 py-3 rounded-lg overflow-y-hidden overflow-x-auto text-xs bg-muted/50 shadow-md"
+                className="px-4 py-3 border-none rounded-lg overflow-y-hidden overflow-x-auto text-xs bg-muted/50 shadow-md"
               />
             </div>
           </TabsContent>

apps/example/app/routes/__toc.docs.installation.mdx

@@ -31,6 +31,6 @@ npm i remix-mailer
 
 ## Basic Usage
 
-The fastest way to get started with `remix-mailer` is to use the built-in `<PreviewBrowser />` component and `loadPreview` utility.
+The fastest way to get started with `remix-mailer` is to use the built-in `<PreviewBrowser />` component and `loadPreviews` utility.
 
     <Shikiize id="basic" />

apps/example/app/routes/__toc.docs.load-previews.mdx

@@ -1,6 +1,6 @@
 ---
 meta:
-  - title: loadPreview
+  - title: loadPreviews
 ---
 
 import * as shiki from "~/shiki.server";
@@ -11,18 +11,18 @@ export const loader = async () => {
     types: {
       lang: "tsx",
       code: `
-type loadPreviewFunction = <Preview extends React.ReactComponentType>(
+type loadPreviewsFunction = <Preview extends React.ReactComponentType>(
   request: Request,
   previews: Record<string, Preview>,
-  options: loadPreviewOptions<Preview>,
-) => loadPreviewResult;
+  options: loadPreviewsOptions<Preview>,
+) => loadPreviewsResult;
 
-type loadPreviewOptions<Preview extends React.ReactComponentType> = {
+type loadPreviewsOptions<Preview extends React.ReactComponentType> = {
 allowedEnvs?: string[];
 renderer?(Component: Preview): Promise<string> | string;
 };
 
-type loadPreviewResult = {
+type loadPreviewsResult = {
 [RM_DATA_KEY]: {
 selected: {
 title: string;
@@ -35,7 +35,7 @@ previews: Array<string>;
     production: {
       lang: "tsx",
       code:`
-loadPreview(
+loadPreviews(
 request,
 previews,
 {
@@ -46,7 +46,7 @@ allowedEnvs: ["test", "development", "production"]
     basic: {
       lang: "tsx",
       code:`
-loadPreview(
+loadPreviews(
 request,
 {
 loginCode: LoginCodeEmailTemplate
@@ -61,7 +61,7 @@ renderAsync(<Component {...Component.PreviewProps} />)
 });
 };
 
-# loadPreview
+# loadPreviews
 
 A simple utility for aggregating and rendering email templates.
 
@@ -77,7 +77,7 @@ Accepts three arguments
 
 ## Usage
 
-A basic example of using `loadPreview` with the async renderer from `@react-email/components`. The default renderer utilizes the `renderToStaticMarkup` function from `react-dom/server`.
+A basic example of using `loadPreviews` with the async renderer from `@react-email/components`. The default renderer utilizes the `renderToStaticMarkup` function from `react-dom/server`.
 
 <Shikiize id="basic" />
 

apps/example/app/routes/__toc.docs.preview-browser.mdx

@@ -57,10 +57,10 @@ An example of using the preview browser with `@react-email/components`. Anything
 
 ## Creating a Custom Browser
 
-A custom browser can be created using the same `loadPreview` function and the `usePreviews` hook. This hook gives you a list of previews along with the selected preview and its rendered output as a string. A custom preview browser may look something like this.
+A custom browser can be created using the same `loadPreviews` function and the `usePreviews` hook. This hook gives you a list of previews along with the selected preview and its rendered output as a string. A custom preview browser may look something like this.
 
 > # Note
 >
-> `loadPreview` uses the `?preview=` query param internally to select the currently visible preview.
+> `loadPreviews` uses the `?preview=` query param internally to select the currently visible preview.
 
 <Shikiize id="custom" />

apps/example/app/routes/__toc.docs.use-previews.mdx

@@ -23,7 +23,7 @@ type UsePreviews = (): {
     production: {
       lang: "tsx",
       code: `
-loadPreview(
+loadPreviews(
   request,
   previews,
   {
@@ -62,7 +62,7 @@ return (
 
 # usePreviews
 
-A react hook for grabbing the result of `loadPreview` from your loader.
+A react hook for grabbing the result of `loadPreviews` from your loader.
 
 ## Arguments
 

apps/example/app/routes/__toc.tsx

@@ -21,7 +21,7 @@ const pages = [
     href: "/docs/preview-browser",
   },
   {
-    title: "loadPreview",
+    title: "loadPreviews",
     href: "/docs/load-previews",
   },
   {

apps/example/app/routes/email.tsx

@@ -4,8 +4,9 @@ import {
   type LinksFunction,
   type LoaderFunctionArgs,
 } from "@remix-run/node";
-import { loadPreview, PreviewBrowser } from "remix-mailer";
-import remixMailerStylesheet from "remix-mailer/index.css";
+import { createPreviews } from "remix-mailer/server/create-previews";
+import remixMailerStylesheet from "remix-mailer/ui/index.css";
+import { PreviewBrowser } from "remix-mailer/ui/preview-browser";
 import { LoginCode } from "~/emails/login-code";
 import { ResetPassword } from "~/emails/reset-password";
 
@@ -17,17 +18,15 @@ export const links: LinksFunction = () => [
 ];
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
-  const previews = await loadPreview(
+  const previews = await createPreviews(
     request,
     {
       loginCode: LoginCode,
       resetPassword: ResetPassword,
     },
     {
-      // Dont do this in a typical app unless you want everyone to see your previews
-      allowedEnvs: ["production", "development", "test"],
-      renderer: async (Component) =>
-        renderAsync(<Component {...Component?.PreviewProps} />),
+      render: (Component) =>
+        renderAsync(<Component {...Component.PreviewProps} />),
     },
   );
 

apps/example/app/shiki.server.tsx

@@ -26,9 +26,7 @@ export const shikiize = async (blocksToRender: Record<string, Block>) => {
         code = await prettier.format(block.code.trim(), {
           parser: "typescript",
         });
-      } catch (e) {
-        console.log(e);
-      }
+      } catch {}
 
       return [
         key,