Homelab, Linux, JS & ABAP (~˘▾˘)~
 

Category: JavaScript / nodejs

JavaScript / nodejs

[JavaScript] Check if iterator is undefined when using a for…of loop

 , , , , , ,

Just saw this trick, how you can do a for…of loop which also checks if the iterator is null or undefined. Normally, you would check this by another if statement before starting the for..of loop, like here

const d = undefined

if (d) { 
  for (const x of d ) {
  	console.log(x)
  }
}

or by using a try...catch

try {
  for (const x of d) {
    console.log(value)
  }
} catch (e) {
  console.error(e) // TypeError: undefined is not iterable
}

But instead of if or try...catch, you could use d || [], to check if d is Falsy, and if it’s false, no iterations are performed and no errors are thrown. The disadvantage of this approach is that you create an unneeded array and the readability may be poor depending on the situation.

for (const x of d || []) {
	console.log(x)
}

Of course, the first and the last option can also be done in one line

if (d) for (const x of d ) console.log(x) 

for (const x of d || []) console.log(x)
JavaScript / nodejs

[nodejs] Merge PDFs using pdf-lib

 , , , , , , ,

https://github.com/Hopding/pdf-lib

const { PDFDocument } = require('pdf-lib')

// files = [{ fileName: 'test1.pdf, content: arraybuffer },{ fileName: 'test2.pdf, content: arraybuffer }]

mergePdfs: async function (files) {
        try {
            const mergedPdf = await PDFDocument.create()

            for (let file of files) {
                const pdf = await PDFDocument.load(file.content)
                const copiedPages = await mergedPdf.copyPages(pdf, pdf.getPageIndices())
                copiedPages.forEach((page) => mergedPdf.addPage(page))
            }

            const mergedPdfFile = await mergedPdf.save()
            const buffer = Buffer.from(mergedPdfFile)
            return await buffer.toString('base64') // return as buffer or base64 encoded file
        } catch (err) {
            console.error(err.message)
        }
}
PDF.js

[PDF.js] Get PDF Viewer when it’s available in DOM and fully initialized

 , , , , , , ,

https://github.com/mozilla/pdf.js/wiki/Third-party-viewer-usage

<iframe id="pdf-js-viewer" src="/pdf/web/viewer.html?file=" title="webviewer" frameborder="0" width="100%" height="700" allowfullscreen="" webkitallowfullscreen=""/>

            displayPdf: async function (id) { 
                const pdfArrayBuffer= await getPdf(id)
                const pdfViewerIFrame = await getPdfViewer()
                await pdfViewerIFrame.contentWindow.PDFViewerApplication.initializedPromise
                await pdfViewerIFrame.contentWindow.PDFViewerApplication.open(pdfArrayBuffer)
            },

            getPdfViewer: function (id = 'pdf-js-viewer') {
                return new Promise((resolve, reject) => {
                    let pdfViewerIFrame = document.getElementById(id)
                    //if already loaded in DOM, return it
                    if (pdfViewerIFrame?.contentWindow?.PDFViewerApplication) {
                        resolve(pdfViewerIFrame)
                    } else {
                        //if not loaded yet, set up eventListener
                        document.addEventListener("webviewerloaded", async () => {
                            pdfViewerIFrame = document.getElementById(id)
                            resolve(pdfViewerIFrame)
                        })
                    }
                })
            }

This logic helped me to get the PDFViewerApplication in every situation correctly, for example when reloading the page with F5 or when having the PDF viewer already loaded and just wanting to open another PDF file.

JavaScript / nodejs

[nodejs] workspaces

 , ,

If you have subdirectories or additional applications which have its own package.json file, you can add them via the workspaces setting to your main project.

 {
  "name": "my-project",
  "workspaces": [ 
     "./app/*"
   ]
}

When running npm install it will now also install the dependencies of all projects in the app folder.

JavaScript / nodejs

[JavaScript] Clone an object containing a file as ArrayBuffer

 , , , , , , ,

Use the build in function structuredClone() to copy all kind of complex JS types.

Official documentation: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm#supported_types

Comparison to other copy techniques like spread or json.stringify: https://www.builder.io/blog/structured-clone

JavaScript / nodejs

[nodejs] Node Version Manager (NVM)

 , , 
# Install script: https://github.com/nvm-sh/nvm#install--update-script
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

# check current used node version
node -v

# list local available node versions
nvm list

# list all released node versions
nvm ls-remote

# install specific node version and switch to it
nvm install v20.5.1

# switch to a specific node version, which is already installed
nvm use v20.5.1