feat(jsx-email): preview mobile devices in preview app (#114)

Co-authored-by: lordelogos <[email protected]>

.gitignore

@@ -12,5 +12,4 @@ dist
 **/.vitepress/cache
 
 packages/**/tsconfig.json
-packages/jsx-email/README.md
-!packages/jsx-email/src/cli/preview-app/tsconfig.json
+packages/jsx-email/README.md

apps/preview/moon.yml

@@ -11,4 +11,4 @@ tasks:
     options:
       cache: false
       outputStyle: 'stream'
-      runDepsInParallel: false
+      runDepsInParallel: false

docs/components/qrcode.md

@@ -81,7 +81,5 @@ width?: number;
 (Optional) The width of the wrapping image in pixels. If not provided, the `size` value will be used.
 
 ::: tip
-This component also expresses all of the  [Common Component Props](https://react.dev/reference/react-dom/components/common) for `ComponentProps<'img'>`
+This component also expresses all of the [Common Component Props](https://react.dev/reference/react-dom/components/common) for `ComponentProps<'img'>`
 :::
-
-

packages/jsx-email/moon.yml

@@ -12,7 +12,6 @@ tasks:
       - ~:clean.dist
       - ~:compile
       - ~:copy.assets
-      - ~:copy.preview
       - ~:copy.readme
     inputs:
       - src
@@ -42,11 +41,6 @@ tasks:
     options:
       cache: false
 
-  copy.preview:
-    command: cp -r src/cli/preview-app dist
-    options:
-      cache: false
-
   copy.readme:
     command: cp -r ../../README.md README.md
     options:

packages/jsx-email/package.json

@@ -9,9 +9,9 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/shellscape/jsx-email.git",
-    "directory": "packages/render"
+    "directory": "packages/jsx-email"
   },
-  "homepage": "https://jsx.email/docs/core/render",
+  "homepage": "https://jsx.email/",
   "main": "dist/index.js",
   "bin": {
     "email": "./dist/cli/index.js"
@@ -45,14 +45,9 @@
   },
   "dependencies": {
     "@dot/log": "^0.1.3",
-    "@jspm/core": "^2.0.1",
+    "@jsx-email/app-preview": "workspace:*",
     "@jsx-email/doiuse-email": "^1.0.1",
-    "@radix-ui/colors": "1.0.1",
-    "@radix-ui/react-collapsible": "1.0.3",
-    "@radix-ui/react-popover": "1.0.6",
     "@radix-ui/react-slot": "1.0.2",
-    "@radix-ui/react-toggle-group": "1.0.4",
-    "@radix-ui/react-tooltip": "1.0.6",
     "@unocss/core": "^0.57.7",
     "@unocss/preset-typography": "^0.57.7",
     "@unocss/preset-uno": "^0.57.7",
@@ -65,8 +60,6 @@
     "classnames": "2.3.2",
     "debug": "^4.3.4",
     "esbuild": "^0.19.3",
-    "esbuild-plugin-copy": "^2.1.1",
-    "framer-motion": "8.5.5",
     "globby": "11.0.4",
     "hash-it": "^6.0.0",
     "html-to-text": "9.0.5",
@@ -80,19 +73,15 @@
     "pretty": "2.0.0",
     "pretty-bytes": "^5.6.0",
     "qrcode": "^1.5.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-router-dom": "6.16.0",
     "rehype": "^13.0.1",
     "rehype-preset-minify": "^7.0.0",
     "rehype-stringify": "^10.0.0",
     "rollup-plugin-hypothetical": "^2.1.1",
-    "shikiji": "^0.6.8",
+    "shikiji": "^0.8.0",
     "source-map-js": "^1.0.2",
     "source-map-support": "^0.5.21",
     "std-env": "^3.6.0",
     "superstruct": "^1.0.3",
-    "tailwindcss": "3.3.3",
     "titleize": "^4.0.0",
     "unist-util-visit": "^5.0.0",
     "vite": "^4.4.9",
@@ -104,14 +93,10 @@
     "@types/html-minifier-terser": "^7.0.0",
     "@types/html-to-text": "^9.0.2",
     "@types/import-local": "^3.1.2",
-    "@types/object-hash": "^3.0.6",
-    "@types/postcss-css-variables": "^0.18.3",
     "@types/pretty": "^2.0.1",
     "@types/source-map-support": "^0.5.10",
     "@types/yargs-parser": "^21.0.3",
-    "hast": "^1.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "hast": "^1.0.0"
   },
   "types": "dist/index.d.mts",
   "funding": {

packages/jsx-email/src/cli/commands/preview.ts

@@ -54,8 +54,7 @@ export const start = async (targetPath: string, argv: PreviewOptions) => {
   }
 
   const { host = false, open = true, port = 55420 } = argv;
-  const { viteConfig } = await import('./vite.config');
-
+  const { viteConfig } = await import('./vite');
   const mergedConfig = {
     configFile: false,
     ...viteConfig,
@@ -70,7 +69,7 @@ export const start = async (targetPath: string, argv: PreviewOptions) => {
 
   const server = await createServer(mergedConfig);
 
-  info(chalk`\n  🚀 {yellow JSX email} Preview\n`);
+  info(chalk`\n  🚀 {yellow jsx-email} Preview\n`);
 
   await server.listen();
 

packages/jsx-email/src/cli/commands/vite.config.ts → packages/jsx-email/src/cli/commands/vite.ts

@@ -1,4 +1,4 @@
-import { resolve } from 'path';
+import { dirname, join } from 'path';
 
 import react from '@vitejs/plugin-react';
 import { createLogger, defineConfig } from 'vite';
@@ -8,12 +8,11 @@ import { nodePolyfills } from 'vite-plugin-node-polyfills';
 // eslint-disable-next-line
 import hypothetical from 'rollup-plugin-hypothetical';
 
-const root = resolve(__dirname, '../preview-app');
-
-process.chdir(root);
-
 const logger = createLogger();
 const { warnOnce: og } = logger;
+const root = join(dirname(require.resolve('@jsx-email/app-preview')), 'app');
+
+process.chdir(root);
 
 logger.warnOnce = (message, options) => {
   // Note: ignore `Sourcemap for "${file}" points to missing source files` errors