fix(jsx-email): modify core plugin imports for bundler resolution

.github/workflows/test-cli.yml

@@ -0,0 +1,69 @@
+name: CLI Tests
+
+on:
+  workflow_dispatch:
+  pull_request:
+    types:
+      - edited
+      - opened
+      - synchronize
+  push:
+    branches:
+      - '*'
+      - '!main'
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+    name: CLI Tests
+
+    steps:
+      - name: Checkout Commit
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 10
+
+      # Needed for https://github.com/moonrepo/moon/issues/1060
+      - name: Force Update Main
+        run: |
+          git fetch origin
+          git branch -f main origin/main
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Enable Corepack
+        id: pnpm-setup
+        run: |
+          corepack enable
+          corepack prepare pnpm@latest --activate
+          pnpm config set script-shell "/usr/bin/bash"
+
+      - name: Setup Moon
+        uses: moonrepo/setup-toolchain@v0
+
+      - name: Sanity Check
+        run: |
+          echo git `git version`;
+          echo branch `git branch --show-current`;
+          echo node `node -v`;
+          echo pnpm `pnpm -v`
+          echo `moon --version`
+
+      - name: pnpm install
+        run: pnpm install --frozen-lockfile
+
+      - name: Build Projects
+        run: |
+          moon jsx-email:build
+          moon create-jsx-email:build
+          moon run :build --query "project~plugin-*"
+
+      - name: Run Tests
+        # Note: We're running `pnpm i` again so that pnpm places the `email` bin in root node_modules
+        # We'll need that for the preview tests below
+        run: |
+          pnpm i
+          moon repo:test.cli

.npmrc

@@ -5,6 +5,7 @@ auth-type=legacy
 
 # pnpm options
 always-auth = true
+auto-install-peers = true
 enable-pre-post-scripts = true
 link-workspace-packages = false
 shamefully-hoist = true

moon.yml

@@ -85,7 +85,10 @@ tasks:
   test.cli:
     command: vitest --config ./shared/vitest.config.ts test/cli --no-threads
     deps:
-      - ~:build.all
+      - jsx-email:build
+      - plugin-inline:build
+      - plugin-minify:build
+      - plugin-pretty:build
     inputs:
       - test/cli
     options:

packages/jsx-email/src/cli/commands/build.mts

@@ -146,8 +146,6 @@ export const build = async (options: BuildOptions): Promise<BuildResult> => {
 const compile = async (options: CompileOptions) => {
   const config = await loadConfig();
 
-  console.log({ config });
-
   const { files, outDir, writeMeta } = options;
   const { metafile } = await esbuild.build({
     bundle: true,

packages/jsx-email/src/config.ts

@@ -78,20 +78,53 @@ const checkName = (plugin: JsxEmailPlugin, source?: string) => {
   }
 };
 
-const importPlugin = async (name: string) => {
+interface PluginImport {
+  plugin: JsxEmailPlugin;
+}
+
+const handleImportError = (error: any, name: string) => {
+  if (error.code === 'ERR_MODULE_NOT_FOUND') {
+    log.error(chalk`{red jsx-email}: Tried to import plugin '${name}' but it wasn't found`);
+  } else {
+    log.error(error);
+  }
+};
+
+// Note: We have to be verbose here so that bundlers pick up on the imports.
+// Most of them can't handle dynamically importing these plugins from variables containing
+// their names without additional config, and we don't want that burden on users
+const importInlinePlugin = async () => {
+  try {
+    // Note: tshy up to bullshit again with compile errors where there are none
+    // @ts-ignore
+    const { plugin } = (await import('@jsx-email/plugin-inline')) as unknown as PluginImport;
+    return plugin;
+  } catch (error) {
+    handleImportError(error, '@jsx-email/plugin-inline');
+  }
+
+  return null;
+};
+
+const importMinifyPlugin = async () => {
   try {
-    const { plugin } = (await import(name)) as { plugin: JsxEmailPlugin };
+    // @ts-ignore
+    const { plugin } = (await import('@jsx-email/plugin-minify')) as unknown as PluginImport;
+    return plugin;
+  } catch (error) {
+    handleImportError(error, '@jsx-email/plugin-minify');
+  }
 
-    checkSymbol(plugin, name);
-    checkName(plugin, name);
+  return null;
+};
 
+const importPrettyPlugin = async () => {
+  try {
+    // @ts-ignore
+    const { plugin } = (await import('@jsx-email/plugin-pretty')) as unknown as PluginImport;
     return plugin;
   } catch (error) {
-    if ((error as any).code === 'ERR_MODULE_NOT_FOUND') {
-      log.error(chalk`{red jsx-email}: Tried to import a plugin '${name}' but it wasn't found`);
-    } else {
-      log.error(error);
-    }
+    handleImportError(error, '@jsx-email/plugin-pretty');
   }
 
   return null;
@@ -109,17 +142,17 @@ export const defineConfig = async (config: DefineConfigOptions = {}): Promise<Js
     // Note: The order of plugins here actually matters for how the doc gets
     // transformed. Changing this ordering may produce undesirable html
     if (config.render?.inlineCss) {
-      const inline = await importPlugin(plugins.inline);
+      const inline = await importInlinePlugin();
       if (inline) mods.plugins.push(inline);
     }
 
     if (config.render?.minify) {
-      const minify = await importPlugin(plugins.minify);
+      const minify = await importMinifyPlugin();
       if (minify) mods.plugins.push(minify);
     }
 
     if (config.render?.pretty) {
-      const pretty = await importPlugin(plugins.pretty);
+      const pretty = await importPrettyPlugin();
       if (pretty) mods.plugins.push(pretty);
     }
 
@@ -148,6 +181,8 @@ export const defineConfig = async (config: DefineConfigOptions = {}): Promise<Js
   result.plugins = Array.from(pluginMap, ([, value]) => value);
 
   for (const plugin of result.plugins || []) {
+    checkName(plugin);
+    checkSymbol(plugin);
     (plugin as PluginInternal).log = getPluginLog(plugin.name);
   }