HN 표시: Mjmx – JSX를 사용하여 mjml을 렌더링합니다.
hackernews
|
|
📰 뉴스
#hn
#jsx
#mjml
#이메일
#하드웨어/반도체
원문 출처: hackernews · Genesis Park에서 요약 및 분석
요약
개발자는 기존 라이브러리들이 React에 의존하는 문제를 해결하기 위해 'mjmx'를 만들었습니다. 이 도구는 React 의존성 없이 MJML을 JSX 문법으로 렌더링하는 독립형 런타임으로, 타입스크립트와의 호환성과 컴포넌트 구성을 지원합니다. 향상된 생산성과 타입 안전성을 원하는 개발자들의 피드백을 기대하고 있습니다.
본문
Pure JSX runtime with its own AST. No react or react-dom needed. Template literal types for CSS values, colors, percentages. Autocomplete that works. 40+ components with strictly typed attributes. Every MJML tag, fully supported. Reusable email components with PropsWithChildren, fragments, and conditionals. render() for HTML output, serialize() for MJML strings. Pure string manipulation. No virtual DOM, no reconciler. import { render } from '@mjmx/core'; const Email = ({ name }: { name: string }) => ( Hello {name}! Click me ); const { html, errors } = render(); import { render, type PropsWithChildren } from '@mjmx/core'; const Card = ({ children, title }: PropsWithChildren) => ( {title} {children} ); const Header = () => ( My App ); const WelcomeEmail = ({ name }: { name: string }) => ( Hello {name}, thanks for joining. ); const OrderEmail = ({ items }: Props) => ( {items.map(item => ( {item.name} {item.price} ))} ); {{#each items}} {{this.name}} {{this.price}} {{/each}} Add mjmx and mjml to your project. $ npm install @mjmx/core mjml Set the JSX transform in your tsconfig.json. { "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "@mjmx/core" } } Or use the pragma: /** @jsxImportSource @mjmx/core */ Create a component and render it to HTML. import { render } from '@mjmx/core'; const { html } = render( Hello World! );
Genesis Park 편집팀이 AI를 활용하여 작성한 분석입니다. 원문은 출처 링크를 통해 확인할 수 있습니다.
공유