kryops · kryops · Nov 16, 2024 · Dec 22, 2024 · Dec 22, 2024 · Dec 22, 2024
diff --git a/.prettierignore b/.prettierignore
@@ -3,4 +3,5 @@ package.json
 .yarn
 dist
 node_modules
-docs
+docs
+**/*.svelte
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## NEXT
+
+- **[BREAKING]** Updated to Svelte 5
+
 ## v0.3.1 - 2024-08-25
 
 - Fixed canvas element not displayed if its height or width is based on the line width only (#5)

diff --git a/README.md b/README.md
@@ -80,11 +80,10 @@ Otherwise, the renderer may use a fallback font depending on the fonts installed
 import PdfmakeHtmlRenderer from 'pdfmake-html-renderer'
 ```
 
-This library was built using the [Svelte](https://svelte.dev/) framework, which should allow integrating it into pretty much any web application:
+This library was built using the [Svelte](https://svelte.dev/) framework:
 
 - To consume it from a [Svelte](https://svelte.dev/) application, you may have to add build tooling to support TypeScript into your pipeline, as Svelte needs to compile the components from source
-- For a [React](https://reactjs.org/) or [Vue.js](https://vuejs.org/) application, you can use an adapter like [`svelte-adapter`](https://github.com/pngwn/svelte-adapter)
-- For other frameworks or VanillaJS, have a look at the [Svelte Component API](https://svelte.dev/docs/client-side-component-api)
+  - This version was built using Svelte 5. Use version <= 0.3.1 for older versions of Svelte
 
 Check out the `/examples` folder for some example projects.
 
@@ -105,12 +104,9 @@ This library also provides an **experimental** server build that renders static
 ```js
 const { PdfmakeHtmlRenderer } = require('pdfmake-html-renderer/server')
 
-const { html, css } = PdfmakeHtmlRenderer.render({
+const { body, head } = PdfmakeHtmlRenderer.render({
   document: { content: ['Hello, world!'] },
 })
-
-// html contains the HTML code
-// css.code contains the CSS code
 ```
 
 Check out `/examples/nodejs` for an exmaple.

diff --git a/TODO.md b/TODO.md
@@ -1,9 +1,5 @@
 # TODO
 
-## Features
-
-- Error Boundary
-
 ## Robustness
 
 - Unit tests

diff --git a/babel.config.json b/babel.config.json
@@ -1,6 +1,11 @@
 {
   "presets": [
-    "@babel/preset-env",
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ],
     "@babel/preset-typescript"
   ]
 }
diff --git a/docs/assets/index-BePLbb_H.js b/docs/assets/index-BePLbb_H.js
diff --git a/docs/assets/index-BePLbb_H.js.map b/docs/assets/index-BePLbb_H.js.map
diff --git a/docs/assets/index-CALeJ9HK.css b/docs/assets/index-CALeJ9HK.css
diff --git a/docs/assets/index-CQxVtyu3.js b/docs/assets/index-CQxVtyu3.js
diff --git a/docs/assets/index-CQxVtyu3.js.map b/docs/assets/index-CQxVtyu3.js.map
diff --git a/docs/assets/index-D6N9Z5Qp.css b/docs/assets/index-D6N9Z5Qp.css
diff --git a/docs/index.html b/docs/index.html
@@ -9,8 +9,8 @@
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
   <title>pdfmake-html-renderer</title>
-  <script type="module" crossorigin src="./assets/index-BePLbb_H.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-CALeJ9HK.css">
+  <script type="module" crossorigin src="./assets/index-CQxVtyu3.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-D6N9Z5Qp.css">
 </head>
 
 <body>

diff --git a/examples/nodejs/index.cjs b/examples/nodejs/index.cjs
@@ -1,21 +1,26 @@
+// @ts-check
+
 const http = require('http')
 
+const { render } = require('svelte/server')
 const { PdfmakeHtmlRenderer } = require('pdfmake-html-renderer/server')
 
 const hostname = '127.0.0.1'
 const port = 3000
 
-const { html, css } = PdfmakeHtmlRenderer.render({
-  document: {
-    content: [
-      {
-        text: 'pdfmake-html-renderer NodeJS Example',
-        fontSize: 18,
-        bold: true,
-      },
-      '\n',
-      'Hello, world!',
-    ],
+const { body, head } = render(PdfmakeHtmlRenderer, {
+  props: {
+    document: {
+      content: [
+        {
+          text: 'pdfmake-html-renderer NodeJS Example',
+          fontSize: 18,
+          bold: true,
+        },
+        '\n',
+        'Hello, world!',
+      ],
+    },
   },
 })
 
@@ -29,11 +34,11 @@ const server = http.createServer((req, res) => {
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>pdfmake-html-renderer NodeJS example</title>
-    <style>${css.code}</style>
+    ${head}
   </head>
 
   <body>
-    <div>${html}</div>
+    <div>${body}</div>
   </body>
   </html>`)
 })

diff --git a/examples/nodejs/index.mjs b/examples/nodejs/index.mjs
@@ -1,20 +1,23 @@
 import { createServer } from 'node:http'
+import { render } from 'svelte/server'
 import PdfmakeHtmlRenderer from 'pdfmake-html-renderer/server'
 
 const hostname = '127.0.0.1'
 const port = 3000
 
-const { html, css } = PdfmakeHtmlRenderer.render({
-  document: {
-    content: [
-      {
-        text: 'pdfmake-html-renderer NodeJS Example',
-        fontSize: 18,
-        bold: true,
-      },
-      '\n',
-      'Hello, world!',
-    ],
+const { body, head } = render(PdfmakeHtmlRenderer, {
+  props: {
+    document: {
+      content: [
+        {
+          text: 'pdfmake-html-renderer NodeJS Example',
+          fontSize: 18,
+          bold: true,
+        },
+        '\n',
+        'Hello, world!',
+      ],
+    },
   },
 })
 
@@ -28,11 +31,11 @@ const server = createServer((req, res) => {
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>pdfmake-html-renderer NodeJS example</title>
-    <style>${css.code}</style>
+    ${head}
   </head>
 
   <body>
-    <div>${html}</div>
+    <div>${body}</div>
   </body>
   </html>`)
 })

diff --git a/examples/react-app/package.json b/examples/react-app/package.json
@@ -10,7 +10,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
-    "svelte-adapter": "^0.5.0",
+    "svelte": "^5.15.0",
     "web-vitals": "^3.5.1"
   },
   "scripts": {

diff --git a/examples/react-app/public/index.html b/examples/react-app/public/index.html
@@ -1,10 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/examples/react-app/src/App.js b/examples/react-app/src/App.js
@@ -1,15 +1,18 @@
-import toReact from 'svelte-adapter/react'
+import { useRef, useEffect } from 'react'
 import { PdfmakeHtmlRenderer } from 'pdfmake-html-renderer'
 
 import 'pdfmake-html-renderer/dist/index.css'
 
-const Renderer = toReact(PdfmakeHtmlRenderer)
-
 function App() {
-  return (
-    <div>
-      <Renderer
-        document={{
+  const containerRef = useRef(null)
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    const app = new PdfmakeHtmlRenderer({
+      target: containerRef.current,
+      props: {
+        document: {
           content: [
             {
               text: 'pdfmake-html-renderer React Example',
@@ -19,10 +22,16 @@ function App() {
             '\n',
             'Hello, world!',
           ],
-        }}
-      />
-    </div>
-  )
+        },
+      },
+    })
+
+    return () => {
+      app.$destroy()
+    }
+  }, [])
+
+  return <div ref={containerRef} />
 }
 
 export default App
diff --git a/examples/react-app/src/index.js b/examples/react-app/src/index.js
@@ -1,14 +1,15 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
 
-ReactDOM.render(
+const container = document.getElementById('root')
+const root = createRoot(container)
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 )
 
 // If you want to start measuring performance in your app, pass a function
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,4 +3,5 @@ package.json @@
     .yarn
     dist
     node_modules
-    docs
+    docs
+    **/*.svelte