@unlayer/react-elements 0.3.0: Tailwind, Markdown, code, fonts, async, codegen and editor-parity fixes

.github/workflows/publish.yml

@@ -1,7 +1,8 @@
 # Release & Publish
 #
 # Gated publish flow, one package at a time:
-#   1. PR merged to main → triggers build & test
+#   1. PR merged to main → triggers build & test, and the react package's
+#      suite on each React it supports (react-versions.yml)
 #   2. Each package publishes only when its code changed since its last
 #      release tag (Elements: v*, migrate: migrate-v*)
 #   3. A reviewer approves each publish in the Actions UI (environment gate)
@@ -160,9 +161,18 @@ jobs:
           echo "migrate=$MIGRATE" >> $GITHUB_OUTPUT
           echo "Elements changed: $ELEMENTS, migrate changed: $MIGRATE"
 
+  # The react package's suite on each React it supports, for this run's commit: Elements publishes only when every
+  # one passes (test.yml runs it too, but nothing waits for that run).
+  react-versions:
+    name: React versions
+    needs: changes
+    if: needs.changes.outputs.elements == 'true'
+    uses: ./.github/workflows/react-versions.yml
+    secrets: inherit
+
   publish:
     name: Publish @unlayer/react-elements
-    needs: [build-and-test, changes]
+    needs: [build-and-test, changes, react-versions]
     if: needs.changes.outputs.elements == 'true'
     runs-on: ubuntu-latest
     outputs:

.github/workflows/react-canary.yml

@@ -0,0 +1,53 @@
+name: React canary
+
+# Weekly, the react package's renderer (src/engine) against React's canary: what changes in React before it ships.
+# It reports and doesn't block: a failure here is a heads-up to update the React version table
+# (packages/react/src/engine/react-compat.ts) or the walker before that React is released.
+on:
+  schedule:
+    - cron: '0 6 * * 1' # Mondays at 6am UTC
+  workflow_dispatch:
+
+jobs:
+  canary:
+    name: React canary (fuzz)
+    runs-on: ubuntu-latest
+    continue-on-error: true
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.7.0
+
+      - name: Authenticate npm registry
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.TEST_NPM_TOKEN }}" > ~/.npmrc
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install React's canary
+        run: |
+          pnpm --filter @unlayer/react-elements add -D react@canary react-dom@canary
+          node -e "console.log('React', require('./packages/react/node_modules/react/package.json').version)"
+
+      - name: Build
+        run: pnpm --filter @unlayer-internal/shared-elements build && pnpm --filter @unlayer/react-elements build
+
+      # The walker against react-dom/server on random trees (useId()s included) and on random markup where templates
+      # have it, random templates against the last release, and the rest of the engine's tests (the self-check of an
+      # unknown React version among them).
+      - name: Fuzz
+        env:
+          WALKER_FUZZ_SEEDS: 5000
+          TEMPLATE_SEEDS: 1000
+          GENERATED_SEEDS: 3000
+        run: pnpm --filter @unlayer/react-elements exec vitest run src/engine src/regression/generated.test.tsx

.github/workflows/react-versions.yml

@@ -0,0 +1,69 @@
+# React versions
+#
+# Elements renders templates with its own renderer (src/engine), which must
+# render as each React it supports does: the react package's suite on each
+# one (its react and react-dom swapped in), in React's development build
+# (the full suite) and its production build (the engine's, the renderers'
+# and the regression tests: React's act(), which the component tests need,
+# is in its development build only). It holds the walker against
+# react-dom/server on hand-written and random trees, useId()s included
+# (src/engine/differential.test.tsx), React's react-server build with a
+# hook it lacks (src/regression/react-server-build.test.ts, React 19), and
+# a hook the dispatcher doesn't know (src/engine/dispatcher.test.tsx).
+#
+# A workflow of its own, called by test.yml (pushes and pull requests) and by
+# publish.yml, whose publish job waits for it: a release ships only a commit
+# every React passed. `github.sha` is the caller's, so it tests the commit the
+# caller tests or publishes.
+name: React versions
+
+on:
+  workflow_call:
+
+jobs:
+  react-versions:
+    name: React ${{ matrix.react }} (${{ matrix.build }})
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        react: ["18.0.0", "18.2.0", "18.3.1", "19.1", "19.2", "latest"]
+        build: [development, production]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.7.0
+
+      - name: Authenticate npm registry
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.TEST_NPM_TOKEN }}" > ~/.npmrc
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install React ${{ matrix.react }}
+        run: |
+          pnpm --filter @unlayer/react-elements add -D react@${{ matrix.react }} react-dom@${{ matrix.react }}
+          node -e "console.log('React', require('./packages/react/node_modules/react/package.json').version)"
+
+      - name: Build
+        run: pnpm --filter @unlayer-internal/shared-elements build && pnpm --filter @unlayer/react-elements build
+
+      - name: Tests (React's development build)
+        if: matrix.build == 'development'
+        run: pnpm --filter @unlayer/react-elements exec vitest run
+
+      - name: Tests (React's production build)
+        if: matrix.build == 'production'
+        env:
+          NODE_ENV: production
+        run: pnpm --filter @unlayer/react-elements exec vitest run src/engine src/async src/regression src/utils/render-errors.test.tsx src/utils/nested-renders.test.tsx --exclude src/regression/client-render.test.tsx

.github/workflows/test.yml

@@ -58,9 +58,71 @@ jobs:
         run: pnpm --filter @unlayer/from-react-email typecheck && pnpm --filter @unlayer/migrate typecheck
 
       # ── Bundle size budget ──────────────────────────────────────
-      # Fail if the react-elements ESM bundle exceeds 118KB.
-      # Current size: about 113.4KB (0.1.22: about 76KB). Most of the growth is
-      # the render that collects a template's rows and blocks (one React render,
+      # Fail if the react-elements ESM bundle exceeds 198.5KB.
+      # Current size: about 198.3KB (0.1.22: about 76KB). Raised from 198KB
+      # (about 0.3KB): the plain text reads links before headings and
+      # preformatted text, each attribute whole, with their URLs set aside
+      # till the end, and doesn't wrap the URLs listed after the text.
+      # Raised from 194.5KB
+      # (about 3.4KB): markup is written as react-dom writes it for the
+      # installed React, a <select>'s value marking its options (the format
+      # context the walk carries), the form controls' rules and React 19's
+      # for a style's, script's and title's text, and a <Head>'s style and
+      # script text written as given in every React. Raised from 193.5KB
+      # (about 1KB): a <Suspense> around the template is unwrapped, a root
+      # the walk of a template with no root meets is said, and which Row or
+      # Column failed and what an async render compiled for its <Tailwind>s
+      # are kept in the render's scope. Raised from 193KB
+      # (about 0.6KB): each render function makes a scope of its own, the
+      # user's code (components, exporters, heads, onError) runs outside it,
+      # what unwrapping a template finds is kept in its render's scope, and a
+      # lazy template is unwrapped. Raised from 192KB
+      # (about 0.7KB): what's in a <Head> is walked with the template (its
+      # components waited for, in the error policy), a head function that
+      # fails is in the error policy, renderToJson throws a template
+      # wrapper's error as it is, and what the walker says once and its style
+      # names are bounded. Raised from 191KB
+      # (about 1KB): a template with no root renders as a root's content
+      # (walked once, its rows rendered with the render's config), and the
+      # async renderers collect it as they collect a root's. Raised from 190KB
+      # (about 1.3KB): Elements' roots are known by a marker shared across
+      # copies (an older copy's by its code), a suspension reaches the
+      # <Suspense> around it whatever `onError` says, and an async template
+      # with no root is rendered without calling it again. Raised from 189KB
+      # (about 1.2KB): a template, a component around its root and a class
+      # component that throw a promise (React 18's Suspense) are waited for by
+      # the async renderers and said by the synchronous ones, and a root of
+      # another copy of Elements renders as this copy's. Raised from 187KB
+      # (about 2KB): a Row or Column whose own exporter fails is left out with
+      # `onError: "omit"`, as a block is (a Column with its cell, its Row made
+      # again without it), instead of failing the render. Raised from 173.5KB
+      # (about 13KB): Divider, Html, Menu and Social write their web and
+      # document HTML without react-dom/server, which can't run in an edge
+      # runtime or a React Server Components layer (src/exporters/, about 7KB,
+      # writing with the walker's host markup, one table of React 18's and 19's
+      # rules for both), and what makes the renders faster: the template
+      # collected as a tree of its records (no markers parsed back), its model,
+      # values and the design's copies made once (src/model/, the head's reuse,
+      # pxMerged), and a root's and Row's HTML written without a walk. The
+      # async walk's holes are the async entry's. Raised from 131.5KB
+      # (about 41KB) for the walker (src/engine), the renderer Elements renders
+      # templates with instead of react-dom: the walk itself, its hooks
+      # dispatcher, React's attribute and style tables for host markup, the
+      # async walk's holes and tree-order output, the React version table and
+      # its self-check, and the error policy (RenderError, `onError`). It
+      # replaces react-dom in Elements' own renders, which was never counted
+      # here (a peer dependency); the collecting render's react-dom plumbing
+      # (the second react-dom module, blind mode, the Sentinel, calling a
+      # failed component again) went with it. Raised from 130.5KB
+      # (about 1KB) so the async renderers collect where Elements' React isn't
+      # react-dom's (Next.js's server layers) as the synchronous ones do, and a
+      # template whose Rows render as HTML instead of being collected fails
+      # instead of giving a broken email. Raised from 126KB for
+      # editor parity: the editor's base stylesheet for each mode in the
+      # document's head (about 1.1KB of CSS), a Paragraph rendered from the text
+      # its design holds, a root's `fonts` and its `displayMode` in the design,
+      # and blocks of another copy of Elements rendered as this one's. Most of
+      # the growth since 0.1.22 is the render that collects a template's rows and blocks (one React render,
       # so hooks, context, Fragments and the user's components work as React
       # renders them; a component that throws, suspends or is async left out
       # with a message naming it; markup and blocks rendered to strings inside
@@ -70,14 +132,25 @@ jobs:
       # rendering where a bundler gives Elements another copy of React than
       # react-dom's (Next.js's server layers), and loading a second module of
       # react-dom's when Elements is called inside a renderToString it renders with,
-      # and leaving out Columns inside markup in a Row, as 0.1.22 did.
+      # and leaving out Columns inside markup in a Row, as 0.1.22 did, and
+      # Tailwind classes (the hook a <Tailwind> scope uses in the collected
+      # render; <Tailwind>, Tailwind itself, the code that reads its CSS and each
+      # component's class table are in the separate `tailwind` entry, not counted),
+      # rich text children (inline JSX and components in Paragraph, Heading and
+      # Button text), code kept in plain text, what a <Font> gives the head and
+      # the root, right-to-left text alignment, and `style`/`className` on the
+      # element each component renders, <Link>, the plain text's options, and
+      # an <UnlayerProvider>'s config read by the roots and the render functions,
+      # and a link or rule in a Column kept as HTML where its block can't hold it.
+      # The Markdown parser, the code highlighter, <Font>, <Head> and the
+      # design-to-code converter (`codegen`) are in their own entries.
       # The budget tracks the unminified ESM output as a proxy for code volume;
       # it still flags accidental dependency bundling (any real dep is 10KB+).
       - name: Check bundle size
         run: |
           BUNDLE="packages/react/dist/index.js"
           SIZE=$(wc -c < "$BUNDLE" | tr -d ' ')
-          MAX_SIZE=118000
+          MAX_SIZE=198500
           echo "Bundle: $BUNDLE"
           echo "Size: $SIZE bytes (budget: $MAX_SIZE bytes)"
           if [ "$SIZE" -gt "$MAX_SIZE" ]; then
@@ -178,8 +251,20 @@ jobs:
           npm install "$TARBALL"
           npm run build
           # An email rendered in a route handler and a Server Component comes out as one (tables, a design with
-          # its rows), with Elements bundled into Next's server layers (no serverExternalPackages); an edge route
-          # builds (Turbopack) and renders or says to render in the Node.js runtime.
+          # its rows), with the synchronous and the async renderers, with Elements bundled into Next's server
+          # layers (no serverExternalPackages); an App Router
+          # edge route builds (Turbopack) and renders or says to render in the Node.js runtime, and Pages Router
+          # API routes (Node.js and edge) render. Each route renders with every entry of Elements too.
+          npm run verify
+
+      # ── Next.js integration build with webpack ──────────────────
+      # The same app built with webpack, Next.js 15's default bundler (`next build` without --turbopack). It fails
+      # the build of a module that imports by name what React's react-server build doesn't export (createContext,
+      # useContext), in an edge route, where Turbopack builds it.
+      - name: Next.js integration build (webpack)
+        run: |
+          cd tests/nextjs-integration
+          npm run build:webpack
           npm run verify
 
       # ── More consumers ──────────────────────────────────────────
@@ -202,6 +287,7 @@ jobs:
       # create-next-app's setup since Next.js 16: a route handler, a Server Component and a Client Component that
       # render an email are prerendered when the app builds, and the build fails if a render reads a random number
       # or the date. 0.2.0's did (crypto.getRandomValues() for each render's nonce), so no new app could build.
+      # The async renderers render one in a route handler and a Server Component when it's requested.
       - name: Next.js 16 consumer (Cache Components)
         run: |
           cd tests/next16-integration
@@ -225,3 +311,11 @@ jobs:
             packages/*/coverage/
             coverage/
           retention-days: 30
+
+  # ── React versions ──────────────────────────────────────────
+  # The react package's suite on each React it supports: see
+  # react-versions.yml, which publish.yml runs before a release too.
+  react-versions:
+    name: React versions
+    uses: ./.github/workflows/react-versions.yml
+    secrets: inherit