refactor(create-jsx-email): use esm, add tests

.eslintignore

@@ -4,4 +4,4 @@ dist
 node_modules
 
 # Starter template files
-packages/create-jsx-email/starter
+packages/create-jsx-email/starter

.github/workflows/test-cli.yml

@@ -66,4 +66,4 @@ jobs:
         # We'll need that for the preview tests below
         run: |
           pnpm i
-          moon repo:test.cli
+          moon test-cli:test.run

.github/workflows/smoke.yml → .github/workflows/test-smoke.yml

@@ -66,4 +66,4 @@ jobs:
         # We'll need that for the preview tests below
         run: |
           pnpm i
-          moon smoke:run.ci
+          moon test-smoke:run.ci

.moon/workspace.yml

@@ -5,6 +5,7 @@ projects:
   globs:
     - 'apps/*'
     - 'packages/*'
+    - 'test/cli'
     - 'test/smoke'
   sources:
     root: '.'

assets/templates/email.mustache

@@ -10,7 +10,7 @@ import {
   Section,
   Text
 } from 'jsx-email';
-
+{{ typeProps }}
 const main = {
   backgroundColor: '#f6f9fc',
   fontFamily:
@@ -46,8 +46,8 @@ const anchor = {
 
 const button = {
   fontWeight: 'bold',
-  textDecoration: 'none',
-  padding: '10px'
+  padding: '10px',
+  textDecoration: 'none'
 };
 
 export const previewProps = {
@@ -66,13 +66,15 @@ export const Template = ({ email, name }{{ propsType }}) => (
         <Section style={box}>
           <Text style={paragraph}>This is our email body text</Text>
           <Button
-            style={button}
-            href="https://example.com"
             align={'center'}
             backgroundColor={'#777'}
             borderRadius={5}
             fontSize={16}
+            height={60}
+            href="https://example.com"
+            style={button}
             textColor={'#fff'}
+            width={160}
           >
             Action Button
           </Button>

moon.yml

@@ -81,16 +81,3 @@ tasks:
       cache: false
       outputStyle: 'stream'
       runDepsInParallel: false
-
-  test.cli:
-    command: vitest --config ./shared/vitest.config.ts test/cli --no-threads
-    deps:
-      - jsx-email:build
-      - plugin-inline:build
-      - plugin-minify:build
-      - plugin-pretty:build
-    inputs:
-      - test/cli
-    options:
-      cache: false
-      outputStyle: 'stream'

package.json

@@ -18,13 +18,11 @@
     "csstype": "3.1.2",
     "eslint-config-shellscape": "^6.0.2",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "execa": "^9.4.1",
     "gh-pages": "^6.0.0",
     "happy-dom": "^12.2.1",
     "husky": "^8.0.3",
     "jsx-email": "workspace:*",
     "lint-staged": "14.0.1",
-    "strip-ansi": "^7.1.0",
     "ts-node": "10.9.1",
     "tshy": "^1.14.0",
     "typescript": "^5.2.2",

packages/create-jsx-email/bin/create-jsx-email

@@ -0,0 +1,2 @@
+#!/usr/bin/env -S node --enable-source-maps --no-warnings=ExperimentalWarning
+import './../dist/index.js';

packages/create-jsx-email/package.json

@@ -11,14 +11,17 @@
     "url": "https://github.com/shellscape/jsx-email.git",
     "directory": "packages/create-jsx-email"
   },
+  "homepage": "https://jsx.email/",
   "main": "dist/src/index.js",
   "bin": {
-    "create-jsx-email": "./dist/src/index.js"
+    "create-jsx-email": "./bin/create-jsx-email"
   },
+  "type": "module",
   "engines": {
     "node": ">=18.0.0"
   },
   "files": [
+    "bin/**",
     "dist/**"
   ],
   "keywords": [
@@ -27,11 +30,13 @@
     "email"
   ],
   "dependencies": {
-    "chalk": "4.1.2",
+    "@types/yargs-parser": "^21.0.3",
+    "chalk-template": "^1.1.0",
     "detect-package-manager": "^3.0.1",
-    "globby": "11.0.4",
+    "globby": "14.0.2",
     "mustache": "^4.2.0",
-    "prompts": "^2.4.2"
+    "prompts": "^2.4.2",
+    "yargs-parser": "^21.1.1"
   },
   "devDependencies": {
     "@types/fs-extra": "^11.0.2",

packages/create-jsx-email/src/index.ts

@@ -1,23 +1,29 @@
-#!/usr/bin/env node
-/* eslint-disable no-await-in-loop */
+/* eslint-disable no-await-in-loop, no-underscore-dangle */
+
 import { existsSync, readdirSync, rmSync } from 'fs';
 import { mkdir, readFile, writeFile } from 'fs/promises';
-import { basename, dirname, join, resolve, win32, posix } from 'path';
+import { basename, dirname, join, relative, resolve, win32, posix } from 'path';
+import { fileURLToPath } from 'node:url';
 
-import chalk from 'chalk';
+import chalk from 'chalk-template';
+// Note: https://github.com/egoist/detect-package-manager/issues/18
+// @ts-ignore
 import { detect } from 'detect-package-manager';
-import globby from 'globby';
+import { globby } from 'globby';
 import mustache from 'mustache';
 import prompts from 'prompts';
+import yargs from 'yargs-parser';
 
-import pkg from '../package.json';
+import * as pkg from './package-info.cjs';
 
 interface CreateEmailArgs {
   jsx: boolean;
   name: string;
   outputPath: string;
 }
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 const cancelled = () => {
   throw new Error(chalk`{red ✖} Operation cancelled`);
 };
@@ -42,10 +48,12 @@ const isEmpty = (path: string) => {
 const { log } = console;
 const normalizePath = (filename: string) => filename.split(win32.sep).join(posix.sep);
 const typeDep = ',\n"@types/react": "^18.2.0",\n"typescript": "^5.2.2"';
-const typeProps = `\nexport type TemplateProps = {
+const typeProps = `\ninterface TemplateProps {
   email: string;
   name: string;
-}`;
+}\n`;
+const argv = yargs(process.argv.slice(2), { configuration: { 'strip-dashed': true } });
+const argTargetDir: string = argv._[0] as string;
 
 export const createEmail = async ({ jsx, name, outputPath }: CreateEmailArgs) => {
   const data = {
@@ -59,9 +67,10 @@ export const createEmail = async ({ jsx, name, outputPath }: CreateEmailArgs) =>
   const fileName = basename(templatePath)
     .replace('_', '')
     .replace('.mustache', jsx ? '.jsx' : '.tsx');
-  const outPath = join(outputPath, fileName);
+  const relativePath = relative(process.cwd(), outputPath);
+  const outPath = join(relativePath, fileName);
 
-  log('Creating a new template at', outPath);
+  log(chalk`{blue Creating a new template} at: {cyan ${outPath}}`);
 
   await writeFile(outPath, contents, 'utf8');
 
@@ -72,7 +81,6 @@ const run = async () => {
   log(intro);
 
   const skip = process.argv.some((arg) => arg === '--yes');
-  const argTargetDir = formatTargetDir(process.argv[2]);
   let targetPath = argTargetDir || defaultTargetDir;
   let result: prompts.Answers<'projectName' | 'projectType' | 'overwrite'>;
   const defaults: typeof result = {
@@ -134,9 +142,10 @@ const run = async () => {
   const templates = await globby([normalizePath(join(generatorsPath, '/*.*'))]);
   const outputPath = join(root, 'templates');
   const templateData = { name: projectName, typeDep: jsx ? '' : typeDep };
+  const relativePath = relative(process.cwd(), outputPath);
 
   log('');
-  log(chalk`{blue Creating Project} at: {dim ${root}}`);
+  log(chalk`{blue Creating Project} at: {dim ${relativePath}}`);
 
   if (overwrite && existsSync(root)) clearDirectory(root);
 
@@ -156,7 +165,7 @@ const run = async () => {
 
   await createEmail({ jsx, name: projectName, outputPath });
 
-  const packageManager = await detect();
+  const packageManager = process.env.IS_CLI_TEST ? 'pnpm' : await detect();
   const install =
     packageManager === 'yarn'
       ? `  $ yarn\n  $ yarn dev`

packages/create-jsx-email/src/package-info.cts

@@ -0,0 +1,5 @@
+// Note: This is a workaround for Node v18 and Node v20 having different import assertion formats
+// eslint-disable-next-line
+const pkg = require('../package.json') as { description: string; name: string; version: string };
+
+export const { description, name, version } = pkg;