diff --git a/.changeset/nasty-lemons-pump.md b/.changeset/nasty-lemons-pump.md new file mode 100644 index 000000000..46b45ff68 --- /dev/null +++ b/.changeset/nasty-lemons-pump.md @@ -0,0 +1,6 @@ +--- +"@react-pdf/pdfkit": patch +"@react-pdf/image": patch +--- + +fix: bump jay-peg dependency to fix CJS module resolution error diff --git a/.changeset/ninety-glasses-count.md b/.changeset/ninety-glasses-count.md new file mode 100644 index 000000000..22ead45af --- /dev/null +++ b/.changeset/ninety-glasses-count.md @@ -0,0 +1,5 @@ +--- +'@react-pdf/renderer': minor +--- + +Pass \_INTERNAL\_\_LAYOUT\_\_DATA\_ to onRenderCallback in toBuffer diff --git a/.changeset/seven-bottles-wave.md b/.changeset/seven-bottles-wave.md new file mode 100644 index 000000000..0ad5aba81 --- /dev/null +++ b/.changeset/seven-bottles-wave.md @@ -0,0 +1,5 @@ +--- +"@react-pdf/layout": patch +--- + +fix: resolve styles on dynamic elements diff --git a/.eslintignore b/.eslintignore index 36d1f5a39..baa26bc8f 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,4 +1,4 @@ -.gitignore node_modules lib -rollup.config.js +dist +packages/pdfkit diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index ba5c358e3..000000000 --- a/.eslintrc.js +++ /dev/null @@ -1,43 +0,0 @@ -module.exports = { - parser: 'babel-eslint', - env: { - browser: true, - es6: true, - node: true, - 'jest/globals': true, - }, - extends: [ - 'plugin:react/recommended', - 'airbnb', - 'prettier', - 'plugin:react/jsx-runtime', - ], - globals: { - URL: false, - BROWSER: false, - Atomics: 'readonly', - SharedArrayBuffer: 'readonly', - }, - parserOptions: { - ecmaFeatures: { - jsx: true, - }, - ecmaVersion: 2018, - sourceType: 'module', - }, - plugins: ['react', 'jest'], - rules: { - 'no-continue': 1, - 'no-cond-assign': 1, - 'react/prop-types': 0, - 'prefer-destructuring': 1, - 'no-use-before-define': 1, - 'no-underscore-dangle': 0, - 'prefer-object-spread': 0, - 'import/no-named-as-default': 0, - 'react/state-in-constructor': 0, - 'react/jsx-filename-extension': 0, - 'react/jsx-props-no-spreading': 1, - 'react/destructuring-assignment': 0, - }, -}; diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 000000000..da5da0757 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,65 @@ +{ + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaVersion": "latest", + "sourceType": "module" + }, + "env": { + "browser": true, + "es6": true, + "node": true + }, + "extends": [ + "plugin:react/recommended", + "airbnb", + "prettier", + "plugin:react/jsx-runtime" + ], + "globals": { + "URL": false, + "BROWSER": false, + "Atomics": "readonly", + "SharedArrayBuffer": "readonly" + }, + "plugins": ["react"], + "rules": { + "arrow-body-style": 0, + "default-case-last": 0, + "default-param-last": 0, + "func-names": 0, + "import/no-named-as-default": 0, + "import/no-unresolved": ["error", { "ignore": ["^yoga-layout"] }], + "no-cond-assign": 1, + "no-continue": 1, + "no-promise-executor-return": 0, + "no-underscore-dangle": 0, + "no-use-before-define": 1, + "prefer-destructuring": 1, + "prefer-exponentiation-operator": 1, + "prefer-object-spread": 0, + "react/destructuring-assignment": 0, + "react/function-component-definition": 0, + "react/jsx-filename-extension": 0, + "react/jsx-props-no-spreading": 0, + "react/jsx-no-useless-fragment": 0, + "react/prop-types": 0, + "react/state-in-constructor": 0 + }, + "overrides": [ + { + "files": [ + "**/*.test.js", + "**/*.test.jsx", + "**/tests/**/*.js", + "**/tests/**/*.jsx", + "rollup.config.js", + "vitest.config.js", + "vitest.*.config.js", + "vitest.setup.js" + ], + "rules": { + "import/no-extraneous-dependencies": 0 + } + } + ] +} diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md index 7dcc5727e..734fed94b 100644 --- a/.github/CODE_OF_CONDUCT.md +++ b/.github/CODE_OF_CONDUCT.md @@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo Examples of behavior that contributes to creating a positive environment include: -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members Examples of unacceptable behavior by participants include: -* The use of sexualized language or imagery and unwelcome sexual attention or advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a professional setting +- The use of sexualized language or imagery and unwelcome sexual attention or advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a professional setting ## Our Responsibilities diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 05444126a..19fb38715 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -5,6 +5,7 @@ First, thank you for considering contributing to react-pdf! We welcome any type of contribution, not only code. You can help with + - **QA**: file bug reports, the more details you can give the better (e.g. screenshots with the console open) - **Marketing**: writing blog posts, howto's, printing stickers, ... - **Community**: presenting the project at meetups, organizing a dedicated meetup for the local community, ... @@ -13,7 +14,7 @@ We welcome any type of contribution, not only code. You can help with ## Your First Contribution -Working on your first Pull Request? You can learn how from this *free* series, [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/series/how-to-contribute-to-an-open-source-project-on-github). +Working on your first Pull Request? You can learn how from this _free_ series, [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/series/how-to-contribute-to-an-open-source-project-on-github). ## Set up your development environment @@ -30,12 +31,12 @@ git clone https://github.com/diegomura/react-pdf.git cd react-pdf ``` -### 2. Install Node 14 +### 2. Install Node 18 If you have `nvm` installed all you have to do is ```sh -nvm install 14 +nvm install 18 nvm use ``` @@ -100,7 +101,6 @@ yarn link react-dom - ## Submitting code Any code change should be submitted as a pull request. The description should explain what the code does and give steps to execute it. The pull request should also contain tests. @@ -127,12 +127,10 @@ You can also reach us at hello@react-pdf.opencollective.com. Thank you to all the people who have already contributed to react-pdf! - ### Backers Thank you to all our backers! [[Become a backer](https://opencollective.com/react-pdf#backer)] - diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index 851e16c3e..ac65a6af9 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1 +1,2 @@ +github: diegomura open_collective: react-pdf diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 89d0908b5..d8921c7c8 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -4,7 +4,6 @@ about: Create a report to help us improve title: '' labels: '' assignees: '' - --- **Describe the bug** @@ -12,6 +11,7 @@ A clear and concise description of what the bug is. **To Reproduce** Steps to reproduce the behavior including code snippet (if applies): + 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' @@ -26,9 +26,10 @@ A clear and concise description of what you expected to happen. If applicable, add screenshots to help explain your problem. **Desktop (please complete the following information):** - - OS: [e.g. MacOS, Windows] - - Browser [e.g. chrome, safari] - - React-pdf version [e.g. v1.1.0] + +- OS: [e.g. MacOS, Windows] +- Browser [e.g. chrome, safari] +- React-pdf version [e.g. v1.1.0] diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index c2b58c054..f10ed90e4 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -4,7 +4,6 @@ about: Suggest an idea for this project title: '' labels: new feature assignees: '' - --- **Is your feature request related to a problem? Please describe.** diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index b593c391e..0904e0be5 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -1,9 +1,5 @@ name: CI -env: - FORCE_COLOR: 2 - NODE: 14 - on: pull_request: branches: @@ -13,17 +9,133 @@ concurrency: group: ${{ github.workflow }}-${{ github.ref }} cancel-in-progress: true +env: + FORCE_COLOR: 2 + HUSKY: 0 + NODE_VERSION: 20 + jobs: - check: + lint: + name: Lint runs-on: ubuntu-latest + steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 + - name: Checkout + uses: actions/checkout@v4 + + - name: Cache Yarn cache + uses: actions/cache@v4 + env: + cache-name: yarn-cache + with: + path: ~/.cache/yarn + key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-${{ env.cache-name }}- + + - name: Use Node.js + uses: actions/setup-node@v4 with: - node-version: ${{ env.NODE }} + node-version: ${{ env.NODE_VERSION }} + + - name: Install dependencies and build + run: yarn --frozen-lockfile + + - name: Check size + run: yarn lint + + size: + name: Check size + runs-on: ubuntu-latest + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Cache Yarn cache + uses: actions/cache@v4 + env: + cache-name: yarn-cache + with: + path: ~/.cache/yarn + key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-${{ env.cache-name }}- + + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ env.NODE_VERSION }} + - name: Install dependencies and build - run: yarn install + run: yarn --frozen-lockfile + - name: Check size run: yarn --cwd packages/renderer run size + + test: + name: Run unit tests (Node.js ${{ matrix.node_version }}; React ${{ matrix.react_version }}) + runs-on: ubuntu-latest + strategy: + matrix: + # We aim to test all maintained LTS versions of Node.js as well as the latest stable version + node_version: [18, 20, 21] + react_version: [16, 17, 18] + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Cache Yarn cache + uses: actions/cache@v4 + env: + cache-name: yarn-cache + with: + path: ~/.cache/yarn + key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-${{ env.cache-name }}- + + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node_version }} + + - name: Install dependencies and build + run: yarn --frozen-lockfile + - name: Run tests - run: yarn test + run: REACT_VERSION=${{ matrix.react_version }} yarn test + + e2e-node: + name: Run E2E tests (Node.js ${{ matrix.node_version }}; ${{ matrix.cjs_or_esm == 'cjs' ? 'CJS' : 'ESM' }}) + runs-on: ubuntu-latest + strategy: + matrix: + cjs_or_esm: [cjs, esm] + node_version: [18, 20, 21] + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Cache Yarn cache + uses: actions/cache@v4 + env: + cache-name: yarn-cache + with: + path: ~/.cache/yarn + key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-${{ env.cache-name }}- + + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node_version }} + + - name: Install dependencies and build + run: yarn --frozen-lockfile + + - name: Run E2E tests + run: yarn --cwd e2e/node-${{ matrix.cjs_or_esm }} run start diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 8f5f2717e..41923896e 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -1,9 +1,5 @@ name: Release -env: - FORCE_COLOR: 2 - NODE: 14 - on: push: branches: @@ -13,38 +9,85 @@ concurrency: group: ${{ github.workflow }}-${{ github.ref }} cancel-in-progress: true +env: + FORCE_COLOR: 2 + HUSKY: 0 + NODE_VERSION: 20 + jobs: + test: + name: Run tests (Node.js ${{ matrix.node_version }}; React ${{ matrix.react_version }}) + runs-on: ubuntu-latest + strategy: + matrix: + # We aim to test all maintained LTS versions of Node.js as well as the latest stable version + node_version: [18, 20, 21] + react_version: [16, 17, 18] + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Cache Yarn cache + uses: actions/cache@v4 + env: + cache-name: yarn-cache + with: + path: ~/.cache/yarn + key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-${{ env.cache-name }}- + + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node_version }} + + - name: Install dependencies and build + run: yarn --frozen-lockfile + + - name: Run tests + run: REACT_VERSION=${{ matrix.react_version }} yarn test + release: - # prevents this action from running on forks + # Prevents this action from running on forks if: github.repository_owner == 'diegomura' - name: Release + name: Create Release PR or Publish to npm + needs: [test] runs-on: ubuntu-latest steps: - - name: Checkout Repo - uses: actions/checkout@v3 + - name: Checkout + uses: actions/checkout@v4 with: # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits fetch-depth: 0 - - name: Setup Node.js - uses: actions/setup-node@v3 + - name: Cache Yarn cache + uses: actions/cache@v4 + env: + cache-name: yarn-cache with: - node-version: ${{ env.NODE }} + path: ~/.cache/yarn + key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-${{ env.cache-name }}- - - name: Install dependencies and build - run: yarn install + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version: ${{ env.NODE_VERSION }} - - name: Run tests - run: yarn test + - name: Install dependencies and build + run: yarn --frozen-lockfile - - name: Create Release Pull Request or Publish to npm + - name: Create Release PR or Publish to npm uses: changesets/action@v1 with: - # this expects you to have a script called release which does a build for your packages and calls changeset publish + # This expects you to have a script called release which does a build for your packages and calls changeset publish publish: yarn release version: yarn version-packages - commit: "chore: release packages" - title: "chore: release packages" + commit: 'chore: release packages' + title: 'chore: release packages' env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} NPM_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.gitignore b/.gitignore index 938e2a5a3..d660a7570 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ coverage .idea .DS_Store .cache +.parcel-cache diff --git a/.husky/pre-commit b/.husky/pre-commit index d2ae35e84..372362317 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" - yarn lint-staged diff --git a/.nvmrc b/.nvmrc index 8351c1939..3c032078a 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -14 +18 diff --git a/.prettierignore b/.prettierignore index 6bb2261c1..2fa6fd605 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +1,3 @@ yoga-layout +lib +packages/pdfkit diff --git a/.prettierrc b/.prettierrc index 3635a40b9..544138be4 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,3 @@ { - "singleQuote": true, - "trailingComma": "all" + "singleQuote": true } diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index ae76940a2..000000000 --- a/.travis.yml +++ /dev/null @@ -1,32 +0,0 @@ -language: node_js - -node_js: - - '14' - -os: - - linux - -addons: - apt: - sources: ['ubuntu-toolchain-r-test'] - packages: ['g++-4.9'] - -cache: - yarn: true - directories: - - node_modules - -before_install: - - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then export CXX=g++-4.9 ; fi - - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then export CFLAGS="$CFLAGS -std=c99" ; fi - - curl -o- -L https://yarnpkg.com/install.sh | bash - - export PATH=$HOME/.yarn/bin:$PATH - -before_script: - - yarn run bootstrap - -install: - - yarn - -script: - - yarn test diff --git a/README.md b/README.md index 7e4f8980d..1b618b9d8 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,6 @@ -

@@ -23,6 +22,7 @@ This package is used to _create_ PDFs using React. If you wish to _display_ existing PDFs, you may be looking for [react-pdf](https://github.com/wojtekmaj/react-pdf). ## How to install + ```sh yarn add @react-pdf/renderer ``` @@ -37,13 +37,13 @@ import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer'; const styles = StyleSheet.create({ page: { flexDirection: 'row', - backgroundColor: '#E4E4E4' + backgroundColor: '#E4E4E4', }, section: { margin: 10, padding: 10, - flexGrow: 1 - } + flexGrow: 1, + }, }); // Create Document Component @@ -62,6 +62,7 @@ const MyDocument = () => ( ``` ### `Web.` Render in DOM + ```jsx import React from 'react'; import ReactDOM from 'react-dom'; @@ -77,6 +78,7 @@ ReactDOM.render(, document.getElementById('root')); ``` ### `Node.` Save in a file + ```jsx import React from 'react'; import ReactPDF from '@react-pdf/renderer'; @@ -106,7 +108,6 @@ Thank you to all our backers! [[Become a backer](https://opencollective.com/reac MIT © [Diego Muracciole](http://github.com/diegomura) -[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fdiegomura%2Freact-pdf.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fdiegomura%2Freact-pdf?ref=badge_large) - --- + ![](https://img.shields.io/npm/dt/@react-pdf/renderer.svg?style=flat) diff --git a/babel.config.js b/babel.config.js index 285a04652..673c9482a 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,4 +1,4 @@ -module.exports = { +export default { presets: [ [ '@babel/preset-env', diff --git a/e2e/node-cjs/index.js b/e2e/node-cjs/index.js new file mode 100644 index 000000000..6fae909d4 --- /dev/null +++ b/e2e/node-cjs/index.js @@ -0,0 +1,45 @@ +const fs = require('node:fs/promises'); +const assert = require('node:assert'); +const { test } = require('node:test'); +const { jsx } = require('react/jsx-runtime'); +const { Document, Page, Text, renderToBuffer } = require('@react-pdf/renderer'); + +const MyDocument = () => + jsx(Document, { + children: jsx(Page, { + size: 'A4', + children: jsx(Text, { + children: 'Hello world', + }), + }), + }); + +function removeMovingParts(buffer) { + return Buffer.from( + buffer + .toString('ascii') + .replace(/\(D:[0-9]{14}Z\)/g, '(D:20240101000000Z)') + .replace( + /\/ID \[.*\]/, + '/ID [<00000000000000000000000000000000> <00000000000000000000000000000000>]', + ), + ); +} + +test('rendering a PDF', async () => { + const bufferPromise = renderToBuffer(jsx(MyDocument, {})); + const referenceBufferPromise = fs.readFile('../reference.pdf'); + + const [buffer, referenceBuffer] = await Promise.all([ + bufferPromise, + referenceBufferPromise, + ]); + + const bufferAsciiWithIDsRemoved = removeMovingParts(buffer); + const referenceBufferAsciiWithIDsRemoved = removeMovingParts(referenceBuffer); + + assert.deepStrictEqual( + bufferAsciiWithIDsRemoved, + referenceBufferAsciiWithIDsRemoved, + ); +}); diff --git a/e2e/node-cjs/package.json b/e2e/node-cjs/package.json new file mode 100644 index 000000000..54bbda9a7 --- /dev/null +++ b/e2e/node-cjs/package.json @@ -0,0 +1,18 @@ +{ + "name": "@react-pdf/e2e-node-cjs", + "version": "2.0.0", + "license": "MIT", + "private": true, + "type": "commonjs", + "author": "Diego Muracciole ", + "homepage": "https://github.com/diegomura/react-pdf#readme", + "repository": "git@github.com:diegomura/react-pdf.git", + "scripts": { + "dev": "node --watch ./index.js", + "start": "node ./index.js" + }, + "dependencies": { + "@react-pdf/renderer": "^3.3.7", + "react": "^18.2.0" + } +} diff --git a/e2e/node-esm/index.js b/e2e/node-esm/index.js new file mode 100644 index 000000000..54c487f83 --- /dev/null +++ b/e2e/node-esm/index.js @@ -0,0 +1,45 @@ +import fs from 'node:fs/promises'; +import assert from 'node:assert'; +import { test } from 'node:test'; +import { jsx } from 'react/jsx-runtime'; +import { Document, Page, Text, renderToBuffer } from '@react-pdf/renderer'; + +const MyDocument = () => + jsx(Document, { + children: jsx(Page, { + size: 'A4', + children: jsx(Text, { + children: 'Hello world', + }), + }), + }); + +function removeMovingParts(buffer) { + return Buffer.from( + buffer + .toString('ascii') + .replace(/\(D:[0-9]{14}Z\)/g, '(D:20240101000000Z)') + .replace( + /\/ID \[.*\]/, + '/ID [<00000000000000000000000000000000> <00000000000000000000000000000000>]', + ), + ); +} + +test('rendering a PDF', async () => { + const bufferPromise = renderToBuffer(jsx(MyDocument, {})); + const referenceBufferPromise = fs.readFile('../reference.pdf'); + + const [buffer, referenceBuffer] = await Promise.all([ + bufferPromise, + referenceBufferPromise, + ]); + + const bufferAsciiWithIDsRemoved = removeMovingParts(buffer); + const referenceBufferAsciiWithIDsRemoved = removeMovingParts(referenceBuffer); + + assert.deepStrictEqual( + bufferAsciiWithIDsRemoved, + referenceBufferAsciiWithIDsRemoved, + ); +}); diff --git a/e2e/node-esm/package.json b/e2e/node-esm/package.json new file mode 100644 index 000000000..6eae7c649 --- /dev/null +++ b/e2e/node-esm/package.json @@ -0,0 +1,18 @@ +{ + "name": "@react-pdf/e2e-node-esm", + "version": "2.0.0", + "license": "MIT", + "private": true, + "type": "module", + "author": "Diego Muracciole ", + "homepage": "https://github.com/diegomura/react-pdf#readme", + "repository": "git@github.com:diegomura/react-pdf.git", + "scripts": { + "dev": "node --watch ./index.js", + "start": "node ./index.js" + }, + "dependencies": { + "@react-pdf/renderer": "^3.3.7", + "react": "^18.2.0" + } +} diff --git a/e2e/reference.pdf b/e2e/reference.pdf new file mode 100644 index 000000000..15ede9f51 Binary files /dev/null and b/e2e/reference.pdf differ diff --git a/jest.config.js b/jest.config.js deleted file mode 100644 index 5439cc2d0..000000000 --- a/jest.config.js +++ /dev/null @@ -1,15 +0,0 @@ -module.exports = { - projects: [ - 'packages/fns', - 'packages/yoga', - 'packages/font', - 'packages/image', - 'packages/render', - 'packages/layout', - 'packages/svgkit', - 'packages/textkit', - 'packages/renderer', - 'packages/stylesheet', - 'packages/primitives', - ], -}; diff --git a/lerna.json b/lerna.json index aa69151e3..7c1c56a78 100644 --- a/lerna.json +++ b/lerna.json @@ -1,8 +1,5 @@ { "version": "independent", - "packages": [ - "packages/*" - ], - "useWorkspaces": true, + "packages": ["packages/*", "e2e/*"], "npmClient": "yarn" } diff --git a/package.json b/package.json index c3b38b5f5..3bbe0cd42 100644 --- a/package.json +++ b/package.json @@ -5,19 +5,21 @@ "license": "MIT", "author": "Diego Muracciole ", "homepage": "https://github.com/diegomura/react-pdf#readme", + "type": "module", "repository": "git@github.com:diegomura/react-pdf.git", "workspaces": [ - "packages/*" + "packages/*", + "e2e/*" ], "scripts": { - "prepare": "husky install", + "prepare": "husky", "build": "lerna run build", "watch": "lerna run watch --parallel", "bootstrap": "lerna bootstrap", "prepublish": "lerna run build", "lint": "eslint packages", - "test": "jest", - "examples": "lerna run start --scope @react-pdf/examples", + "test": "vitest", + "dev": "lerna run dev --scope @react-pdf/examples", "changeset": "changeset", "version-packages": "changeset version", "release": "changeset publish" @@ -25,7 +27,6 @@ "devDependencies": { "@babel/cli": "^7.20.7", "@babel/core": "^7.20.7", - "@babel/node": "^7.20.7", "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-proposal-decorators": "^7.20.13", "@babel/plugin-proposal-optional-chaining": "^7.20.7", @@ -34,48 +35,52 @@ "@babel/preset-react": "^7.18.6", "@changesets/changelog-github": "^0.4.8", "@changesets/cli": "^2.26.0", - "@rollup/plugin-alias": "^3.1.8", - "@rollup/plugin-babel": "^5.3.0", - "@rollup/plugin-commonjs": "^21.0.1", - "@rollup/plugin-json": "^4.1.0", - "@rollup/plugin-node-resolve": "^13.0.6", - "@rollup/plugin-replace": "^3.0.0", + "@rollup/plugin-alias": "^5.1.0", + "@rollup/plugin-babel": "^6.0.0", + "@rollup/plugin-commonjs": "^25.0.0", + "@rollup/plugin-json": "^6.1.0", + "@rollup/plugin-node-resolve": "^15.2.0", + "@rollup/plugin-replace": "^5.0.0", + "@rollup/plugin-terser": "^0.4.4", "@testing-library/react": "^14.0.0", - "babel-eslint": "^10.0.1", - "babel-jest": "^29.5.0", + "@typescript-eslint/parser": "^6.21.0", + "@vitejs/plugin-react": "^4.2.1", "babel-plugin-add-module-exports": "^1.0.0", - "canvas": "^2.11.0", + "canvas": "^2.11.2", "chalk": "^2.4.2", - "eslint": "^6.8.0", - "eslint-config-airbnb": "^18.1.0", - "eslint-config-prettier": "^4.0.0", - "eslint-plugin-import": "^2.20.2", - "eslint-plugin-jest": "^22.3.0", - "eslint-plugin-jsx-a11y": "^6.2.3", - "eslint-plugin-promise": "^4.0.1", - "eslint-plugin-react": "^7.20.0", - "eslint-plugin-react-hooks": "^2.5.1", - "husky": "^7.0.4", - "jest": "^29.5.0", - "jest-environment-jsdom": "^29.5.0", + "eslint": "^8.56.0", + "eslint-config-airbnb": "^19.0.0", + "eslint-config-prettier": "^9.0.0", + "eslint-plugin-import": "^2.29.0", + "eslint-plugin-jsx-a11y": "^6.8.0", + "eslint-plugin-promise": "^6.1.0", + "eslint-plugin-react": "^7.33.0", + "eslint-plugin-react-hooks": "^4.6.0", + "husky": "^9.0.0", "jest-image-snapshot": "^6.1.0", - "lerna": "^3.21.0", + "jsdom": "^23.2.0", + "lerna": "^8.0.2", "lint-staged": "^10.5.4", - "pdfjs-dist": "3.1.81", - "prettier": "^1.16.4", + "pdfjs-dist": "3.2.146", + "prettier": "^3.2.0", "react": "^18.2.0", + "react-16": "npm:react@^16.8.0", + "react-17": "npm:react@^17.0.0", "react-dom": "^18.2.0", + "react-dom-16": "npm:react-dom@^16.8.0", + "react-dom-17": "npm:react-dom@^17.0.0", "rimraf": "^2.6.3", - "rollup": "^2.60.1", + "rollup": "^4.9.0", + "rollup-plugin-copy": "^3.5.0", "rollup-plugin-ignore": "^1.0.10", "rollup-plugin-local-resolve": "^1.0.7", - "rollup-plugin-polyfill-node": "^0.9.0", - "rollup-plugin-sourcemaps": "^0.6.3", - "rollup-plugin-terser": "^7.0.2" + "rollup-plugin-polyfill-node": "^0.13.0", + "vitest": "^1.2.0", + "vitest-fetch-mock": "^0.2.2" }, "lint-staged": { - "*.js": [ - "eslint", + "*.{js,jsx,ts,tsx}": [ + "yarn lint", "prettier --write" ] }, @@ -84,6 +89,5 @@ "url": "https://opencollective.com/react-pdf", "logo": "https://opencollective.com/opencollective/logo.txt" }, - "dependencies": {}, "packageManager": "yarn@1.22.19" } diff --git a/packages/examples/.eslintrc.json b/packages/examples/.eslintrc.json new file mode 100644 index 000000000..acf25ba13 --- /dev/null +++ b/packages/examples/.eslintrc.json @@ -0,0 +1,8 @@ +{ + "extends": ["../../.eslintrc.json", "plugin:react/recommended"], + "rules": { + "react/prop-types": 0, + "jsx-a11y/anchor-is-valid": 0, + "react/jsx-one-expression-per-line": 0 + } +} diff --git a/packages/examples/CHANGELOG.md b/packages/examples/CHANGELOG.md index 614e9c7a8..1d5b3df43 100644 --- a/packages/examples/CHANGELOG.md +++ b/packages/examples/CHANGELOG.md @@ -1,5 +1,127 @@ # @react-pdf/examples +## 3.2.10 + +### Patch Changes + +- Updated dependencies []: + - @react-pdf/renderer@3.3.8 + +## 3.2.9 + +### Patch Changes + +- Updated dependencies [[`f7505ed`](https://github.com/diegomura/react-pdf/commit/f7505ed453a1a0ae960d0e5e4a1d155803861b71)]: + - @react-pdf/renderer@3.3.7 + +## 3.2.8 + +### Patch Changes + +- Updated dependencies []: + - @react-pdf/renderer@3.3.6 + +## 3.2.7 + +### Patch Changes + +- Updated dependencies []: + - @react-pdf/renderer@3.3.5 + +## 3.2.6 + +### Patch Changes + +- Updated dependencies []: + - @react-pdf/renderer@3.3.4 + +## 3.2.5 + +### Patch Changes + +- Updated dependencies [[`b5380a1`](https://github.com/diegomura/react-pdf/commit/b5380a1a0a7397b4111d68ce97b4acb702d34d51)]: + - @react-pdf/renderer@3.3.3 + +## 3.2.4 + +### Patch Changes + +- Updated dependencies []: + - @react-pdf/renderer@3.3.2 + +## 3.2.3 + +### Patch Changes + +- [#2529](https://github.com/diegomura/react-pdf/pull/2529) [`a35b1ba`](https://github.com/diegomura/react-pdf/commit/a35b1ba18d293df51293600d8d56015094d222d8) Thanks [@diegomura](https://github.com/diegomura)! - fix: jpeg exif orientation rendering + +- Updated dependencies [[`a35b1ba`](https://github.com/diegomura/react-pdf/commit/a35b1ba18d293df51293600d8d56015094d222d8)]: + - @react-pdf/renderer@3.3.1 + +## 3.2.2 + +### Patch Changes + +- [#2518](https://github.com/diegomura/react-pdf/pull/2518) [`3c62070`](https://github.com/diegomura/react-pdf/commit/3c6207035d2f02109bb2b5ef8804febc5a05b488) Thanks [@wojtekmaj](https://github.com/wojtekmaj)! - Fix invalid prop (style) in Resume example + +* [#2521](https://github.com/diegomura/react-pdf/pull/2521) [`214207b`](https://github.com/diegomura/react-pdf/commit/214207b62bc8061a46a7cb220901e193d327effe) Thanks [@wojtekmaj](https://github.com/wojtekmaj)! - Fix invalid display property in objectFit example + +- [#2517](https://github.com/diegomura/react-pdf/pull/2517) [`bc0d4f4`](https://github.com/diegomura/react-pdf/commit/bc0d4f42fe5d8b8bd2fb560b753041fbf013ab33) Thanks [@wojtekmaj](https://github.com/wojtekmaj)! - Fix invalid props (xmlns, id) in SVG example + +- Updated dependencies [[`64f7bba`](https://github.com/diegomura/react-pdf/commit/64f7bba0d840d17188e50086169c84c415abd8d5), [`e817223`](https://github.com/diegomura/react-pdf/commit/e8172231d07d10ece4ca960641f9ee52c5d4660d), [`cf73180`](https://github.com/diegomura/react-pdf/commit/cf7318069e63170e160a36602359fc8cbc3386c2), [`0f5c43f`](https://github.com/diegomura/react-pdf/commit/0f5c43fa6f3c0b53c067200cc1ac21e651504760), [`66a40b2`](https://github.com/diegomura/react-pdf/commit/66a40b2e41cefe11f1ef8d467ba449a8861adb69)]: + - @react-pdf/renderer@3.3.0 + +## 3.2.1 + +### Patch Changes + +- Updated dependencies []: + - @react-pdf/renderer@3.2.1 + +## 3.2.0 + +### Minor Changes + +- [#2409](https://github.com/diegomura/react-pdf/pull/2409) [`b6a14fd`](https://github.com/diegomura/react-pdf/commit/b6a14fd160fab26a49f798e5294b0e361e67fe37) Thanks [@wojtekmaj](https://github.com/wojtekmaj)! - Add support for native ESM + +* [#2496](https://github.com/diegomura/react-pdf/pull/2496) [`c8fe2c8`](https://github.com/diegomura/react-pdf/commit/c8fe2c86639cb8e44f26f78e62fc67379a8e3ceb) Thanks [@diegomura](https://github.com/diegomura)! - fix: copyright and registered symbol rendering + +### Patch Changes + +- Updated dependencies [[`b6a14fd`](https://github.com/diegomura/react-pdf/commit/b6a14fd160fab26a49f798e5294b0e361e67fe37)]: + - @react-pdf/renderer@3.2.0 + +## 3.1.0 + +### Minor Changes + +- [#2491](https://github.com/diegomura/react-pdf/pull/2491) [`ed8524f`](https://github.com/diegomura/react-pdf/commit/ed8524f867f71fc8407faeb74edc4574e99a1137) Thanks [@diegomura](https://github.com/diegomura)! - feat: add minPresenceAhead example + +### Patch Changes + +- Updated dependencies []: + - @react-pdf/renderer@3.1.17 + +## 3.0.0 + +### Major Changes + +- [#2487](https://github.com/diegomura/react-pdf/pull/2487) [`3f31046`](https://github.com/diegomura/react-pdf/commit/3f310460dcadb7bd65adeab0309812aa757cde29) Thanks [@diegomura](https://github.com/diegomura)! - add dev script + +### Patch Changes + +- [#2479](https://github.com/diegomura/react-pdf/pull/2479) [`45b2bd3`](https://github.com/diegomura/react-pdf/commit/45b2bd37037c605727ad5783f2f2a438dc19cac4) Thanks [@diegomura](https://github.com/diegomura)! - fix linting + +- Updated dependencies [[`8654d00`](https://github.com/diegomura/react-pdf/commit/8654d003023dd0899cddfc2ea2f5a552e01cf570)]: + - @react-pdf/renderer@3.1.16 + +## 2.0.14 + +### Patch Changes + +- Updated dependencies []: + - @react-pdf/renderer@3.1.15 + ## 2.0.13 ### Patch Changes diff --git a/packages/examples/babel.config.js b/packages/examples/babel.config.js deleted file mode 100644 index 27f83582f..000000000 --- a/packages/examples/babel.config.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = { extends: '../../babel.config.js' }; diff --git a/packages/examples/package.json b/packages/examples/package.json index 2758e8a4a..65d0c2cf7 100644 --- a/packages/examples/package.json +++ b/packages/examples/package.json @@ -1,21 +1,23 @@ { "name": "@react-pdf/examples", - "version": "2.0.13", + "version": "3.2.10", "license": "MIT", "private": true, "author": "Diego Muracciole ", "homepage": "https://github.com/diegomura/react-pdf#readme", "repository": "git@github.com:diegomura/react-pdf.git", - "main": "lib", "scripts": { - "test": "jest" + "dev": "vite ./src --open" }, "dependencies": { - "@react-pdf/renderer": "^3.1.14", - "camelcase": "^6.2.0" + "@react-pdf/renderer": "^3.3.8" + }, + "devDependencies": { + "@vitejs/plugin-react": "^4.2.1", + "vite": "^5.0.11" }, "peerDependencies": { - "react": "^16.8.6 || ^17.0.0", - "react-dom": "^16.8.6 || ^17.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } } diff --git a/packages/examples/public/Cairo-Regular.ttf b/packages/examples/public/Cairo-Regular.ttf new file mode 100644 index 000000000..d64275177 Binary files /dev/null and b/packages/examples/public/Cairo-Regular.ttf differ diff --git a/packages/examples/public/NotoSans-Regular.ttf b/packages/examples/public/NotoSans-Regular.ttf deleted file mode 100644 index ff376d133..000000000 Binary files a/packages/examples/public/NotoSans-Regular.ttf and /dev/null differ diff --git a/packages/examples/public/Rubik-Regular.ttf b/packages/examples/public/Rubik-Regular.ttf new file mode 100644 index 000000000..06a67a2da Binary files /dev/null and b/packages/examples/public/Rubik-Regular.ttf differ diff --git a/packages/examples/public/chart.svg b/packages/examples/public/chart.svg deleted file mode 100644 index 029a78b53..000000000 --- a/packages/examples/public/chart.svg +++ /dev/null @@ -1,52 +0,0 @@ - - - Created with Highcharts 6.2.0 - - - - - - - - - - - - - - - - - - - - - - - - - USD - USD - - - - - EUR - EUR - - - - - CHF - CHF - - - - - - - - - - diff --git a/packages/examples/public/font.ttc b/packages/examples/public/font.ttc deleted file mode 100644 index 816fee694..000000000 Binary files a/packages/examples/public/font.ttc and /dev/null differ diff --git a/packages/examples/public/keifont.ttf b/packages/examples/public/keifont.ttf deleted file mode 100644 index 2d4b3c85b..000000000 Binary files a/packages/examples/public/keifont.ttf and /dev/null differ diff --git a/packages/examples/public/miller-banner.ttf b/packages/examples/public/miller-banner.ttf deleted file mode 100644 index 4b0f49aac..000000000 Binary files a/packages/examples/public/miller-banner.ttf and /dev/null differ diff --git a/packages/examples/public/test.jpg b/packages/examples/public/test.jpg deleted file mode 100644 index 47da53161..000000000 Binary files a/packages/examples/public/test.jpg and /dev/null differ diff --git a/packages/examples/public/test2.jpg b/packages/examples/public/test2.jpg deleted file mode 100644 index d33ecbdd2..000000000 Binary files a/packages/examples/public/test2.jpg and /dev/null differ diff --git a/packages/examples/src/duplicatedImages/index.jsx b/packages/examples/src/duplicatedImages/index.jsx new file mode 100644 index 000000000..473f7fdd1 --- /dev/null +++ b/packages/examples/src/duplicatedImages/index.jsx @@ -0,0 +1,63 @@ +/* eslint react/prop-types: 0 */ +/* eslint react/jsx-sort-props: 0 */ + +import React from 'react'; +import { Document, Page, Image, StyleSheet } from '@react-pdf/renderer'; + +import Quijote1 from '../../public/quijote1.jpg'; + +const styles = StyleSheet.create({ + body: { + paddingTop: 35, + paddingBottom: 65, + paddingHorizontal: 35, + }, + image: { + marginVertical: 15, + marginHorizontal: 0, + width: 520, + height: 200, + backgroundColor: 'red', + objectFit: 'fill', + objectPositionX: 'center', + objectPositionY: 'center', + borderWith: 2, + padding: 2, + borderColor: 'blue', + borderStyle: 'solid', + }, + image2: { + marginVertical: 15, + marginHorizontal: 0, + width: 300, + backgroundColor: 'green', + objectFit: 'fill', + objectPositionX: 'center', + objectPositionY: 'center', + borderWith: 2, + padding: 2, + borderColor: 'blue', + borderStyle: 'solid', + }, +}); + +const MyDoc = () => { + return ( + + + + + + + ); +}; + +const App = () => { + return ( + + + + ); +}; + +export default App; diff --git a/packages/examples/src/ellipsis/index.jsx b/packages/examples/src/ellipsis/index.jsx new file mode 100644 index 000000000..fc279f38a --- /dev/null +++ b/packages/examples/src/ellipsis/index.jsx @@ -0,0 +1,59 @@ +/* eslint react/prop-types: 0 */ +/* eslint react/jsx-sort-props: 0 */ + +import React from 'react'; +import { + Document, + Page, + Text, + View, + StyleSheet, + Font, +} from '@react-pdf/renderer'; + +import RobotoFont from '../../public/Roboto-Regular.ttf'; + +const styles = StyleSheet.create({ + body: { + paddingTop: 35, + paddingBottom: 65, + paddingHorizontal: 35, + }, + text: { + fontSize: 15, + maxLines: 1, + fontColor: '#000000', + textOverflow: 'ellipsis', + fontFamily: 'Roboto', + }, +}); + +Font.register({ + family: 'Roboto', + fonts: [ + { + src: RobotoFont, + fontWeight: 400, + }, + ], +}); + +const MyDoc = () => { + return ( + + + And here here + + + ); +}; + +const App = () => { + return ( + + + + ); +}; + +export default App; diff --git a/packages/examples/src/emoji/index.jsx b/packages/examples/src/emoji/index.jsx new file mode 100644 index 000000000..f24c98ac7 --- /dev/null +++ b/packages/examples/src/emoji/index.jsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { + Document, + Page, + View, + Text, + Font, + StyleSheet, +} from '@react-pdf/renderer'; + +const styles = StyleSheet.create({ + container: { + height: 700, + marginVertical: 70, + marginHorizontal: '10%', + }, + text: { + fontSize: 100, + textAlign: 'center', + }, +}); + +Font.registerEmojiSource({ + format: 'png', + url: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/72x72/', + // url: 'https://cdn.jsdelivr.net/npm/emoji-datasource-apple@15.0.1/img/apple/64/', + // withVariationSelectors: true, +}); + +const Emoji = () => ( + + + + 😀💩👻🙈 + + + +); + +export default Emoji; diff --git a/packages/examples/src/fontWeight/index.jsx b/packages/examples/src/fontWeight/index.jsx new file mode 100644 index 000000000..fd2c62379 --- /dev/null +++ b/packages/examples/src/fontWeight/index.jsx @@ -0,0 +1,78 @@ +/* eslint react/prop-types: 0 */ +/* eslint react/jsx-sort-props: 0 */ + +import React from 'react'; +import { Document, Page, Text, StyleSheet, Font } from '@react-pdf/renderer'; + +import RobotoFont from '../../public/Roboto-Regular.ttf'; +import RobotoFontMedium from '../../public/Roboto-Medium.ttf'; +import RobotoFontBold from '../../public/Roboto-Bold.ttf'; +import RobotoFontBlack from '../../public/Roboto-Black.ttf'; + +const styles = StyleSheet.create({ + body: { + paddingTop: 35, + paddingBottom: 45, + paddingHorizontal: 35, + position: 'relative', + }, + regular: { + fontFamily: 'Roboto', + fontWeight: 400, + }, + medium: { + fontFamily: 'Roboto', + fontWeight: 500, + }, + bold: { + fontWeight: 600, + fontFamily: 'Roboto', + }, + black: { + fontWeight: 900, + fontFamily: 'Roboto', + }, +}); + +Font.register({ + family: 'Roboto', + fonts: [ + { + src: RobotoFont, + fontWeight: 400, + }, + { + src: RobotoFontMedium, + fontWeight: 500, + }, + { + src: RobotoFontBold, + fontWeight: 700, + }, + { + src: RobotoFontBlack, + fontWeight: 900, + }, + ], +}); + +const MyDoc = () => { + return ( + + Regular text + Medium text + Bold text + Black text + + ); +}; + +const App = () => { + return ( + + + + ); +}; + +export default App; diff --git a/packages/examples/src/fractals/Fractal.js b/packages/examples/src/fractals/Fractal.jsx similarity index 94% rename from packages/examples/src/fractals/Fractal.js rename to packages/examples/src/fractals/Fractal.jsx index f18b56942..37d3bd8e8 100644 --- a/packages/examples/src/fractals/Fractal.js +++ b/packages/examples/src/fractals/Fractal.jsx @@ -42,7 +42,7 @@ const styles = StyleSheet.create({ }, }); -const toggle = direction => (direction === 'column' ? 'row' : 'column'); +const toggle = (direction) => (direction === 'column' ? 'row' : 'column'); const Fractal = ({ steps, direction = 'column' }) => { if (steps === 0) { diff --git a/packages/examples/src/fractals/index.js b/packages/examples/src/fractals/index.jsx similarity index 66% rename from packages/examples/src/fractals/index.js rename to packages/examples/src/fractals/index.jsx index 3aabcdbad..9c295275a 100644 --- a/packages/examples/src/fractals/index.js +++ b/packages/examples/src/fractals/index.jsx @@ -3,13 +3,8 @@ import { Page, Document } from '@react-pdf/renderer'; import Fractal from './Fractal'; -export default () => ( - +const Fractals = () => ( + @@ -23,3 +18,5 @@ export default () => ( ); + +export default Fractals; diff --git a/packages/examples/src/fractals/output.pdf b/packages/examples/src/fractals/output.pdf deleted file mode 100644 index d4c6f134b..000000000 Binary files a/packages/examples/src/fractals/output.pdf and /dev/null differ diff --git a/packages/examples/src/fractals/thumb.png b/packages/examples/src/fractals/thumb.png deleted file mode 100644 index 18d7b76b7..000000000 Binary files a/packages/examples/src/fractals/thumb.png and /dev/null differ diff --git a/packages/examples/src/goTo/index.js b/packages/examples/src/goTo/index.jsx similarity index 60% rename from packages/examples/src/goTo/index.js rename to packages/examples/src/goTo/index.jsx index 095f85905..755ab865b 100644 --- a/packages/examples/src/goTo/index.js +++ b/packages/examples/src/goTo/index.jsx @@ -1,10 +1,7 @@ -/* eslint react/prop-types: 0, react/jsx-sort-props: 0 */ - import React from 'react'; - import { Page, Document, Link, View, Image } from '@react-pdf/renderer'; -export default () => ( +const GoTo = () => ( Link @@ -12,10 +9,9 @@ export default () => ( - + ); + +export default GoTo; diff --git a/packages/examples/src/goTo/output.pdf b/packages/examples/src/goTo/output.pdf deleted file mode 100644 index d0ba31907..000000000 Binary files a/packages/examples/src/goTo/output.pdf and /dev/null differ diff --git a/packages/examples/src/index.css b/packages/examples/src/index.css new file mode 100644 index 000000000..98ebbae39 --- /dev/null +++ b/packages/examples/src/index.css @@ -0,0 +1,41 @@ +@font-face { + font-family: Cairo; + src: url('../public/Cairo-Regular.ttf'); +} +@font-face { + font-family: Rubik; + src: url('../public/Rubik-Regular.ttf'); +} + +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} + +iframe { + width: 100vw; + height: 100vh; +} + +.cairo { + font-family: Cairo; + direction: rtl; +} + +.rubik { + font-family: Rubik; + /* direction: rtl; */ +} + +svg { + background-color: white; +} diff --git a/packages/examples/src/index.html b/packages/examples/src/index.html new file mode 100644 index 000000000..512a6ff49 --- /dev/null +++ b/packages/examples/src/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + + +
+ + + diff --git a/packages/examples/src/index.js b/packages/examples/src/index.js deleted file mode 100644 index b7a1b97d1..000000000 --- a/packages/examples/src/index.js +++ /dev/null @@ -1,62 +0,0 @@ -import './index.css'; - -import React, { useState } from 'react'; -import ReactDOM from 'react-dom'; -import { PDFViewer } from '@react-pdf/renderer'; - -import Svg from './svg'; -import GoTo from './goTo'; -import Text from './text'; -import Knobs from './knobs'; -import Resume from './resume'; -import Fractals from './fractals'; -import PageWrap from './pageWrap'; - -const MOUNT_ELEMENT = document.getElementById('root'); - -const EXAMPLES = { - svg: Svg, - goTo: GoTo, - text: Text, - knobs: Knobs, - resume: Resume, - pageWrap: PageWrap, - fractals: Fractals, -}; - -const Viewer = () => { - const [example, setExample] = useState('pageWrap'); - - console.log(example); - - const handleExampleChange = e => { - setExample(e.target.dataset.name); - }; - - const Document = EXAMPLES[example]; - - return ( -
-

Examples

- -
    - {Object.keys(EXAMPLES).map(value => ( -
  • - {value} -
    • - ))} -
- - - - -
- ); -}; - -ReactDOM.render(, MOUNT_ELEMENT); diff --git a/packages/examples/src/index.jsx b/packages/examples/src/index.jsx new file mode 100644 index 000000000..f0a22de79 --- /dev/null +++ b/packages/examples/src/index.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { createRoot } from 'react-dom/client'; + +import { PDFViewer } from '@react-pdf/renderer'; + +import Document from './pageWrap'; + +import './index.css'; + +const DocumentWrapper = () => { + return ( + <> + + + + + ); +}; + +const MOUNT_ELEMENT = document.createElement('div'); + +document.body.appendChild(MOUNT_ELEMENT); + +const root = createRoot(MOUNT_ELEMENT); // createRoot(container!) if you use TypeScript + +root.render(); diff --git a/packages/examples/src/jpgOrientation/images/orientation-1.jpeg b/packages/examples/src/jpgOrientation/images/orientation-1.jpeg new file mode 100644 index 000000000..015c5f177 Binary files /dev/null and b/packages/examples/src/jpgOrientation/images/orientation-1.jpeg differ diff --git a/packages/examples/src/jpgOrientation/images/orientation-2.jpeg b/packages/examples/src/jpgOrientation/images/orientation-2.jpeg new file mode 100644 index 000000000..2e7fb579a Binary files /dev/null and b/packages/examples/src/jpgOrientation/images/orientation-2.jpeg differ diff --git a/packages/examples/src/jpgOrientation/images/orientation-3.jpeg b/packages/examples/src/jpgOrientation/images/orientation-3.jpeg new file mode 100644 index 000000000..74505cfc1 Binary files /dev/null and b/packages/examples/src/jpgOrientation/images/orientation-3.jpeg differ diff --git a/packages/examples/src/jpgOrientation/images/orientation-4.jpeg b/packages/examples/src/jpgOrientation/images/orientation-4.jpeg new file mode 100644 index 000000000..ea133fbb0 Binary files /dev/null and b/packages/examples/src/jpgOrientation/images/orientation-4.jpeg differ diff --git a/packages/examples/src/jpgOrientation/images/orientation-5.jpeg b/packages/examples/src/jpgOrientation/images/orientation-5.jpeg new file mode 100644 index 000000000..81a8af69b Binary files /dev/null and b/packages/examples/src/jpgOrientation/images/orientation-5.jpeg differ diff --git a/packages/examples/src/jpgOrientation/images/orientation-6.jpeg b/packages/examples/src/jpgOrientation/images/orientation-6.jpeg new file mode 100644 index 000000000..7426aba04 Binary files /dev/null and b/packages/examples/src/jpgOrientation/images/orientation-6.jpeg differ diff --git a/packages/examples/src/jpgOrientation/images/orientation-7.jpeg b/packages/examples/src/jpgOrientation/images/orientation-7.jpeg new file mode 100644 index 000000000..a541d95e7 Binary files /dev/null and b/packages/examples/src/jpgOrientation/images/orientation-7.jpeg differ diff --git a/packages/examples/src/jpgOrientation/images/orientation-8.jpeg b/packages/examples/src/jpgOrientation/images/orientation-8.jpeg new file mode 100644 index 000000000..3f51d2873 Binary files /dev/null and b/packages/examples/src/jpgOrientation/images/orientation-8.jpeg differ diff --git a/packages/examples/src/jpgOrientation/index.jsx b/packages/examples/src/jpgOrientation/index.jsx new file mode 100644 index 000000000..0748c87dd --- /dev/null +++ b/packages/examples/src/jpgOrientation/index.jsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { Document, Page, Image, View } from '@react-pdf/renderer'; + +import Orientation1 from './images/orientation-1.jpeg'; +import Orientation2 from './images/orientation-2.jpeg'; +import Orientation3 from './images/orientation-3.jpeg'; +import Orientation4 from './images/orientation-4.jpeg'; +import Orientation5 from './images/orientation-5.jpeg'; +import Orientation6 from './images/orientation-6.jpeg'; +import Orientation7 from './images/orientation-7.jpeg'; +import Orientation8 from './images/orientation-8.jpeg'; + +const Emoji = () => ( + + + + + + + + + + + + + + +); + +export default Emoji; diff --git a/packages/examples/src/knobs/index.js b/packages/examples/src/knobs/index.jsx similarity index 92% rename from packages/examples/src/knobs/index.js rename to packages/examples/src/knobs/index.jsx index 75b211105..e9e8120fb 100644 --- a/packages/examples/src/knobs/index.js +++ b/packages/examples/src/knobs/index.jsx @@ -39,11 +39,11 @@ const styles = StyleSheet.create({ const Knob = ({ value }) => ( - {value} + {value} ); -const Select = props => ( +const Select = (props) => ( 0% @@ -54,7 +54,7 @@ const Select = props => ( ); -export default () => ( +const Knobs = () => (