Monorepo compatibility

Hey team mailing, great strides over the last few weeks towards v1!

Based on v0.6.9, I think the last missing piece to unlock usage in monorepos is adding support for path mappings. I have multiple packages in my project that import other packages, so my template could look like this.

import { veryUsefulFunction } from '@repo/package';

export function MailingTemplate() {
  return (
    <Layout>
      <Button onClick={veryUsefulFunction}>
        I want to be useful!
      </Button>
    </Layout>
  );
}

This currently won’t work with either dev or build commands. It will fail with the module not found error message. I tried to poke in mailing to see what needs to change and it seems it’s the registerRequireHooks() method in registerRequireHooks.ts.

I was able to manually update it to fix the module not found error, but then I ran into other issues such as:

• SyntaxError: Unexpected token 'export'
• SyntaxError: Cannot use import statement outside a module

Resolving these would require a more involved approach and it’s possible this has something to do with mailing itself, so I didn’t continue. Any pointers?

[izakfilmalter]

Ya, I’ll open a pr with this some time this week.

[izakfilmalter]

Mailing works just fine within a monorepo. I have done the following to get it configured correctly.

1. Make a new package for your emails.

   1.  cd packages
       mkdir email
       cd email
       yarn init
      

   2. Open the newly created package.json, and adjust the name to match your monorepo structure, eg:

      {
        "name": "@mymonorepo/email"
      }
      

   3. Add needed dependancies:

      yarn add mailing mailing-core mjml mjml-react nodemailer react react-dom
      yarn add -D @types/mjml @types/mjml-react @types/nodemailer @types/react @zerollup/ts-transform-paths ttypescript typescript
      

      You will see that we have added both @zerollup/ts-transform-paths and ttypescript. We are gonna use both of these to rewrite our imports within our new @mymonorepor/email package to relative imports when we build the package.
2. Add tsconfig.json:

   {
     "compilerOptions": {
       "composite": true,
       "noImplicitReturns": true,
       "noUnusedLocals": true,
       "jsx": "react-jsx",
       "outDir": "lib",
       "sourceMap": false,
       "strict": true,
       "target": "ES2018",
       "baseUrl": ".",
       "typeRoots": ["node_modules/@types", "./@types"],
       "rootDir": ".",
       "module": "commonjs",
       "esModuleInterop": true,
       "noEmit": false,
       "moduleResolution": "node",
       "declaration": true,
       "stripInternal": true,
       "forceConsistentCasingInFileNames": true,
       "skipLibCheck": true,
       "plugins": [
         {
           "transform": "@zerollup/ts-transform-paths",
           "exclude": ["*"]
         }
       ],
       "paths": {
         "@mymonorepo/email/*": ["*"]
       }
     },
     "compileOnSave": true,
     "include": ["."],
     "exclude": [
       "./lib",
       "node_modules",
       "node_modules/*",
       "./node_modules",
       "./node_modules/*",
       "../../node_modules",
       "../../node_modules/*"
     ]
   }
   

   You will need to edit the paths array to match your monorepo schema.
3. Time to finally init mailing.

   npx mailing
   

   This is gonna make a new directory for you within packages/email called emails. I find this to be redundant. I have copied all of these files out of emails into the root of packages/email. The above tsconfig.json is setup for this. If you want to keep everything in emails, change "include": ["."] to "include": ["./emails"].
4. (Optional) Rewire imports. This is totally optional but I hate relative imports. You can now safely redo all the imports in all the files that mailing has created for you to be absolute: @mymonorepo/email/.....
5. More package.json changes:
   1. Add main, typings, and scripts

      {
        "main": "lib/index.js",
        "typings": "lib/index.d.ts",
        "scripts": {
          "build": "rm -rf ./lib && yarn run ttsc",
          "start": "npx mailing preview"
        },
      }
      

6. Add template exports to index.ts

   export * from '@mymonorepo/email/TextEmail'
   export * from '@mymonorepo/email/Welcome'
   

7. Add @mymonorepo/email as a dependency to your backend packages.
8. Build @mymonorepo/email

   yarn build
   

You now have a package in your monorepo for mailing. It will build on save into packages/email/dist, and work as a package for any other package.

Notes:

• You will want add "jsx": "react-jsx" to the tsconfig.json of any package that depends on @mymonorepo/email. You will also need to change the extension of any file that calls sendMail to .tsx. If you do not want to do this, you can call your templates as functions instead of jsx, eg Welcome({ name: 'Foo Bar' }).
• The above process works for basically anything you want as a package. Want prisma as it’s own package? Do the above. Want a next.js site, do the above.