From 11382ef1eea5fd133ec439b8cb1cbfe419f060e7 Mon Sep 17 00:00:00 2001 From: Greg McKelvey Date: Tue, 19 Dec 2023 23:16:27 -0800 Subject: [PATCH 1/4] feat(preview): allow preview server to serve files outside of workspace root Since the preview app is tucked away in node_modules, it doesn't allow for files to be served from a consumer's actual project root. This would help by serving local files (ex static/cat.png) during development --- packages/jsx-email/src/cli/commands/preview.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/jsx-email/src/cli/commands/preview.ts b/packages/jsx-email/src/cli/commands/preview.ts index b2859e59..64f75d6e 100644 --- a/packages/jsx-email/src/cli/commands/preview.ts +++ b/packages/jsx-email/src/cli/commands/preview.ts @@ -65,8 +65,8 @@ export const start = async (targetPath: string, argv: PreviewOptions) => { ...viteConfig.resolve?.alias } }, - server: { host, port: parseInt(port as any, 10) } - } as InlineConfig; + server: { fs: { strict: false }, host, port: parseInt(port.toString(), 10) } + } satisfies InlineConfig; const server = await createServer(mergedConfig); From 300a90817f42a1e55fad7f3529a6f532206e5fed Mon Sep 17 00:00:00 2001 From: Greg McKelvey Date: Tue, 19 Dec 2023 23:33:00 -0800 Subject: [PATCH 2/4] add img example --- docs/components/image.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/docs/components/image.md b/docs/components/image.md index b29b3aab..e918b611 100644 --- a/docs/components/image.md +++ b/docs/components/image.md @@ -28,6 +28,23 @@ referenced, so avoid using these. See [Can I Email](https://www.caniemail.com/features/image-svg/) for more information. ::: +::: tip +To use local images during development, you can resolve the path with node. +Just remember, for production, you'll need to host the images somewhere and +reference them with a URL. + +```jsx +import { Img } from 'jsx-email'; + +const baseUrl = import.meta.DEV ? import.meta.resolve('../assets/') : 'https://assets.example.com/'; + +const Email = () => { + return Cat; +}; +``` + +::: + ## Component Props ```ts From 7dcde28645025f449e6d7dce04b80c57bfe2ec1a Mon Sep 17 00:00:00 2001 From: Greg McKelvey Date: Wed, 20 Dec 2023 11:25:21 -0800 Subject: [PATCH 3/4] add example email --- apps/demo/emails/local-assets.tsx | 68 ++++++++++++++++++++++++++++++ apps/demo/emails/static/cat.jpeg | Bin 0 -> 11842 bytes apps/demo/package.json | 3 ++ apps/demo/tsconfig.json | 7 +++ pnpm-lock.yaml | 66 +++++++++++++++++++++++++---- 5 files changed, 136 insertions(+), 8 deletions(-) create mode 100644 apps/demo/emails/local-assets.tsx create mode 100644 apps/demo/emails/static/cat.jpeg create mode 100644 apps/demo/tsconfig.json diff --git a/apps/demo/emails/local-assets.tsx b/apps/demo/emails/local-assets.tsx new file mode 100644 index 00000000..bb7e5623 --- /dev/null +++ b/apps/demo/emails/local-assets.tsx @@ -0,0 +1,68 @@ +import { Body, Container, Head, Hr, Html, Img, Link, Preview, Section, Text } from 'jsx-email'; + +import * as React from 'react'; + +export const TemplateName = 'local-assets'; + +const main = { + backgroundColor: '#f6f9fc', + fontFamily: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif' +}; + +const container = { + backgroundColor: '#ffffff', + margin: '0 auto', + marginBottom: '64px', + padding: '20px 0 48px' +}; + +const box = { + padding: '0 48px' +}; + +const hr = { + borderColor: '#e6ebf1', + margin: '20px 0' +}; + +const paragraph = { + color: '#777', + fontSize: '16px', + lineHeight: '24px', + textAlign: 'left' as const +}; + +const anchor: React.CSSProperties = { + color: '#3869d4', + textDecoration: 'underline' +}; + +const baseUrl = import.meta.env.DEV + ? import.meta.resolve('./static/') + : 'https://assets.example.com/'; + +export const Template = () => { + const catUrl = `${baseUrl}cat.jpeg`; + return ( + + + This is our email preview text for + + +
+ Cat +
+ + URL: +
+ + {catUrl} + + +
+ + + + ); +}; diff --git a/apps/demo/emails/static/cat.jpeg b/apps/demo/emails/static/cat.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..6e680aeb4d13c64fdad71637ce1215b6921dee9f GIT binary patch literal 11842 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 aip?Uv{$kr=MWU8Ao_OB;d@OV}^?v{u0HPrP literal 0 HcmV?d00001 diff --git a/apps/demo/package.json b/apps/demo/package.json index fb54449f..5f90eee1 100644 --- a/apps/demo/package.json +++ b/apps/demo/package.json @@ -9,5 +9,8 @@ }, "dependencies": { "jsx-email": "workspace:*" + }, + "devDependencies": { + "@types/node": "20.10.5" } } diff --git a/apps/demo/tsconfig.json b/apps/demo/tsconfig.json new file mode 100644 index 00000000..4ebca792 --- /dev/null +++ b/apps/demo/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../../shared/tsconfig.base.json", + "compilerOptions": { + "module": "ESNext", + "types": ["./node_modules/jsx-email/node_modules/vite/client", "./node_modules/@types/node"] + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ea466d5c..9e67fff0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -84,6 +84,10 @@ importers: react: specifier: 18.2.0 version: 18.2.0 + devDependencies: + '@types/node': + specifier: 20.10.5 + version: 20.10.5 apps/web: devDependencies: @@ -2261,7 +2265,7 @@ packages: resolution: {integrity: sha512-c0hrgAOVYr21EX8J0jBMXGLMgJqVf/v6yxi0dLaJboW9aQPh16Id+z6w2Tx1hm+piJOLv8xPfVKZCLfjPw/IMQ==} dependencies: '@types/jsonfile': 6.1.2 - '@types/node': 20.6.2 + '@types/node': 20.10.5 dev: true /@types/hast@3.0.1: @@ -2293,7 +2297,7 @@ packages: /@types/jsonfile@6.1.2: resolution: {integrity: sha512-8t92P+oeW4d/CRQfJaSqEwXujrhH4OEeHRjGU3v1Q8mUS8GPF3yiX26sw4svv6faL2HfBtGTe2xWIoVgN3dy9w==} dependencies: - '@types/node': 20.6.2 + '@types/node': 20.10.5 dev: true /@types/linkify-it@3.0.3: @@ -2329,6 +2333,12 @@ packages: resolution: {integrity: sha512-MG+oI3oelPKLN2gpkel08v6Tp6zU2zZQRq+eSpRsFtLNTd2kxZolOHQTmQQs0wqXTLOqs+ri3tRUaagH5u0quw==} dev: false + /@types/node@20.10.5: + resolution: {integrity: sha512-nNPsNE65wjMxEKI93yOP+NPGGBJz/PoN3kZsVLee0XMiJolxSekEVD8wRwBUBqkwc7UWop0edW50yrCQW4CyRw==} + dependencies: + undici-types: 5.26.5 + dev: true + /@types/node@20.6.2: resolution: {integrity: sha512-Y+/1vGBHV/cYk6OI1Na/LHzwnlNCAfU3ZNGrc1LdRe/LAIbdDPTTv/HU3M7yXN448aTVDq3eKRm2cg7iKLb8gw==} @@ -2353,7 +2363,7 @@ packages: /@types/prompts@2.4.8: resolution: {integrity: sha512-fPOEzviubkEVCiLduO45h+zFHB0RZX8tFt3C783sO5cT7fUXf3EEECpD26djtYdh4Isa9Z9tasMQuZnYPtvYzw==} dependencies: - '@types/node': 20.6.2 + '@types/node': 20.10.5 kleur: 3.0.3 dev: true @@ -7573,6 +7583,10 @@ packages: which-boxed-primitive: 1.0.2 dev: true + /undici-types@5.26.5: + resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==} + dev: true + /unified@11.0.4: resolution: {integrity: sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==} dependencies: @@ -7722,7 +7736,7 @@ packages: vfile-message: 4.0.2 dev: false - /vite-node@0.34.5(@types/node@20.6.2): + /vite-node@0.34.5(@types/node@20.10.5): resolution: {integrity: sha512-RNZ+DwbCvDoI5CbCSQSyRyzDTfFvFauvMs6Yq4ObJROKlIKuat1KgSX/Ako5rlDMfVCyMcpMRMTkJBxd6z8YRA==} engines: {node: '>=v14.18.0'} hasBin: true @@ -7732,7 +7746,7 @@ packages: mlly: 1.4.2 pathe: 1.1.1 picocolors: 1.0.0 - vite: 4.4.9(@types/node@20.6.2) + vite: 4.4.9(@types/node@20.10.5) transitivePeerDependencies: - '@types/node' - less @@ -7758,6 +7772,42 @@ packages: - rollup dev: false + /vite@4.4.9(@types/node@20.10.5): + resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==} + engines: {node: ^14.18.0 || >=16.0.0} + hasBin: true + peerDependencies: + '@types/node': '>= 14' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + '@types/node': 20.10.5 + esbuild: 0.18.20 + postcss: 8.4.30 + rollup: 3.28.1 + optionalDependencies: + fsevents: 2.3.3 + dev: true + /vite@4.4.9(@types/node@20.6.2): resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==} engines: {node: ^14.18.0 || >=16.0.0} @@ -7877,7 +7927,7 @@ packages: dependencies: '@types/chai': 4.3.6 '@types/chai-subset': 1.3.3 - '@types/node': 20.6.2 + '@types/node': 20.10.5 '@vitest/expect': 0.34.5 '@vitest/runner': 0.34.5 '@vitest/snapshot': 0.34.5 @@ -7897,8 +7947,8 @@ packages: strip-literal: 1.3.0 tinybench: 2.5.1 tinypool: 0.7.0 - vite: 4.4.9(@types/node@20.6.2) - vite-node: 0.34.5(@types/node@20.6.2) + vite: 4.4.9(@types/node@20.10.5) + vite-node: 0.34.5(@types/node@20.10.5) why-is-node-running: 2.2.2 transitivePeerDependencies: - less From 8ebea3c01bfd9556c8bbabdd67a3293d11d59398 Mon Sep 17 00:00:00 2001 From: Affan Shahid Date: Tue, 26 Dec 2023 18:01:40 +0500 Subject: [PATCH 4/4] fix(tailwind): add prefix to production class names (#111) --- .../jsx-email/src/components/tailwind/tailwind.tsx | 2 +- .../tailwind/.snapshots/tailwind.test.tsx.snap | 6 ++++++ packages/jsx-email/test/tailwind/tailwind.test.tsx | 14 ++++++++++++++ 3 files changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/jsx-email/src/components/tailwind/tailwind.tsx b/packages/jsx-email/src/components/tailwind/tailwind.tsx index 586456f5..0813bece 100644 --- a/packages/jsx-email/src/components/tailwind/tailwind.tsx +++ b/packages/jsx-email/src/components/tailwind/tailwind.tsx @@ -32,7 +32,7 @@ const getUno = (config: ConfigBase, production: boolean) => { if (production) transformers.push( transformerCompileClass({ - classPrefix: '', + classPrefix: 'je-', trigger: ':jsx:' }) ); diff --git a/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap b/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap index 7fcb2f9f..b8291d2f 100644 --- a/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap +++ b/packages/jsx-email/test/tailwind/.snapshots/tailwind.test.tsx.snap @@ -66,6 +66,12 @@ exports[`Custom theme config > should be able to use custom text alignment 1`] = .text-justify{text-align:justify;}" `; +exports[`Production mode > should generate class names with a prefix 1`] = ` +"
" +`; + exports[`Responsive styles > should add css to 1`] = ` "