Fix and cleanup webpack example

foliojs · Aug 1, 2021 · 29216b7 · 29216b7
1 parent e9c7d9e
commit 29216b7
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 1,871 deletions.
diff --git a/examples/webpack/README.md b/examples/webpack/README.md
@@ -9,6 +9,6 @@ Simple example of using PdfKit with webpack
 - Register AFM fonts provided by pdfkit
 - Shows how to load and register files lazily
 
-### Caveats
+### Remarks
 
-Production build does not work. Probably how pdf document is created (inside a `new Function` call)
+Refer to webpack.config.js to details about configuration
diff --git a/examples/webpack/package.json b/examples/webpack/package.json
@@ -3,7 +3,7 @@
   "dependencies": {
     "brace": "^0.11.1",
     "buffer": "^6.0.3",
-    "pdfkit": "file:./../..",
+    "pdfkit": "^0.12.3",
     "process": "^0.11.10",
     "readable-stream": "^3.6.0"
   },

diff --git a/examples/webpack/src/index.js b/examples/webpack/src/index.js
@@ -21,114 +21,104 @@ fetchFile(testImageURL)
     console.error(error);
   });
 
-function makePDF(PDFDocument, lorem, waitForData, iframe) {
-  // create a document
-  var doc = new PDFDocument();
-
-  doc.registerFont('Roboto', 'fonts/Roboto-Regular.ttf');
-
-  // draw some text
-  doc.fontSize(25).text('Here is some vector graphics...', 100, 80);
-
-  // some vector graphics
-  doc
-    .save()
-    .moveTo(100, 150)
-    .lineTo(100, 250)
-    .lineTo(200, 250)
-    .fill('#FF3300');
-
-  doc.circle(280, 200, 50).fill('#6600FF');
-
-  // an SVG path
-  doc
-    .scale(0.6)
-    .translate(470, 130)
-    .path('M 250,75 L 323,301 131,161 369,161 177,301 z')
-    .fill('red', 'even-odd')
-    .restore();
-
-  // and some justified text wrapped into columns
-  doc
-    .font('Roboto')
-    .text('And here is some wrapped text...', 100, 300)
-    .fontSize(13)
-    .moveDown()
-    .text(lorem, {
-      width: 412,
-      align: 'justify',
-      indent: 30,
-      columns: 2,
-      height: 300,
-      ellipsis: true
-    });
-
-  doc.addPage();
-
-  doc
-    .fontSize(25)
-    .font('Courier')
-    .text('And an image...')
-    .image('images/bee.png');
-
-  doc.font('Courier-Bold').text('Finish...');
-
-  doc.addPage();
-
-  doc
-    .font('Roboto')
-    .fontSize(18)
-    .text('Not yet. Lets try to show an image lazy loaded');
+var initialFnCode = `// create a document
+var doc = new PDFDocument();
+
+doc.registerFont('Roboto', 'fonts/Roboto-Regular.ttf');
+
+// draw some text
+doc.fontSize(25).text('Here is some vector graphics...', 100, 80);
+
+// some vector graphics
+doc
+  .save()
+  .moveTo(100, 150)
+  .lineTo(100, 250)
+  .lineTo(200, 250)
+  .fill('#FF3300');
+
+doc.circle(280, 200, 50).fill('#6600FF');
+
+// an SVG path
+doc
+  .scale(0.6)
+  .translate(470, 130)
+  .path('M 250,75 L 323,301 131,161 369,161 177,301 z')
+  .fill('red', 'even-odd')
+  .restore();
+
+// and some justified text wrapped into columns
+doc
+  .font('Roboto')
+  .text('And here is some wrapped text...', 100, 300)
+  .fontSize(13)
+  .moveDown()
+  .text(lorem, {
+    width: 412,
+    align: 'justify',
+    indent: 30,
+    columns: 2,
+    height: 300,
+    ellipsis: true
+  });
 
-  try {
-    doc.image('images/test.jpg');
-  } catch (error) {
-    doc.moveDown().text(`${error}`);
-    doc.text('Image not loaded. Try again later.');
-  }
+doc.addPage();
+
+doc
+  .fontSize(25)
+  .font('Courier')
+  .text('And an image...')
+  .image('images/bee.png');
 
-  // waitForData must be called before call to doc.end()
-  waitForData(doc)
-    .then(dataUrl => {
-      // display the document in the iframe to the right
-      iframe.src = dataUrl;
-    })
-    .catch(error => {
-      console.log(error);
-    });
-
-  doc.end();
+doc.font('Courier-Bold').text('Finish...');
+
+doc.addPage();
+
+doc
+  .font('Roboto')
+  .fontSize(18)
+  .text('Not yet. Lets try to show an image lazy loaded');
+
+try {
+  doc.image('images/test.jpg');
+} catch (error) {
+  doc.moveDown().text(\`\${error}\`);
+  doc.text('Image not loaded. Try again later.');
+}
+
+// waitForData must be called before call to doc.end()
+waitForData(doc)
+  .then(dataUrl => {
+    // display the document in the iframe to the right
+    iframe.src = dataUrl;
+  })
+  .catch(error => {
+    console.log(error);
+  });
+
+doc.end();`;
+
+function executeFn(code, PDFDocument, lorem, waitForData, iframe) {
+  var fn = new Function('PDFDocument', 'lorem', 'waitForData', 'iframe', code);
+  fn(PDFDocument, lorem, waitForData, iframe);
 }
 
 var editor = ace.edit('editor');
 editor.setTheme('ace/theme/monokai');
 editor.getSession().setMode('ace/mode/javascript');
-editor.setValue(
-  makePDF
-    .toString()
-    .split('\n')
-    .slice(1, -1)
-    .join('\n')
-    .replace(/^  /gm, '')
-);
+editor.setValue(initialFnCode);
 editor
   .getSession()
   .getSelection()
   .clearSelection();
 
 var iframe = document.querySelector('iframe');
-makePDF(PDFDocument, lorem, waitForData, iframe);
+
+executeFn(initialFnCode, PDFDocument, lorem, waitForData, iframe);
 
 editor.getSession().on('change', function() {
   try {
-    var fn = new Function(
-      'PDFDocument',
-      'lorem',
-      'waitForData',
-      'iframe',
-      editor.getValue()
-    );
-    fn(PDFDocument, lorem, waitForData, iframe);
+    executeFn(editor.getValue(), PDFDocument, lorem, waitForData, iframe);
   } catch (e) {
     console.error(e);
   }

diff --git a/examples/webpack/webpack.config.js b/examples/webpack/webpack.config.js
@@ -1,7 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {
   plugins: [
@@ -17,7 +16,7 @@ module.exports = {
     alias: {
       // maps fs to a virtual one allowing to register file content dynamically
       fs: 'pdfkit/js/virtual-fs.js',
-      // iconv-lite is used to load cid less fonts (uncommon)
+      // iconv-lite is used to load cid less fonts (not spec compliant)
       'iconv-lite': false
     },
     fallback: {
@@ -48,6 +47,7 @@ module.exports = {
         test: /src[/\\]lazy-assets/,
         type: 'asset/resource'
       },
+      // convert to base64 and include inline file system binary files used by fontkit and linebreak
       {
         enforce: 'post',
         test: /fontkit[/\\]index.js$/,
@@ -56,14 +56,6 @@ module.exports = {
           brfs: {}
         }
       },
-      {
-        enforce: 'post',
-        test: /unicode-properties[/\\]index.js$/,
-        loader: 'transform-loader',
-        options: {
-          brfs: {}
-        }
-      },
       {
         enforce: 'post',
         test: /linebreak[/\\]src[/\\]linebreaker.js/,
@@ -73,12 +65,5 @@ module.exports = {
         }
       }
     ]
-  },
-  optimization: {
-    minimizer: [
-      new TerserPlugin({
-        exclude: /src[/\\]index\.js$/ // not working. Probably related to dynamic function creation
-      })
-    ]
   }
 };