Implement new script approach for PdfViewer HTMLHelper after the upgrade to pdf.js v4

[eyupyusein]

Description

The recent 2024 Q4 November update (version 2024.4.1112) introduced a new common engine for the PdfViewer:
Integrate PdfViewer engine

The PdfViewer is now expected to work with version 4+ of the pdf.js library (e.g. 4.3.136). Since the new version of this library is provided only as a module now (.mjs), the Kendo scripts need to be added as modules as well in a specific order.

For reference, here is a PdfViewer example with the old version:
Kendo UI PdfViewer sample Old

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/9.0.0/default/default-ocean-blue.css">
        
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.min.js"></script> 
    <script>window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.min.js';</script> 

    <script src="https://kendo.cdn.telerik.com/2024.3.1015/js/kendo.all.min.js"></script>
    
    <div id="pdfviewer"></div>
    <script type="module">
        $("#pdfviewer").kendoPDFViewer({
            pdfjsProcessing: {
                file: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
            }
        });
    </script>

And this is a sample with the new version:
Kendo UI PdfViewer sample v4

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-ocean-blue.css">
    
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" type="module"></script>

    <!-- Include pdf.js scripts before the kendo scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script> 

    <script src="https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
    
    <div id="pdfviewer"></div>
    <script type="module">
        $("#pdfviewer").kendoPDFViewer({
            pdfjsProcessing: {
                file: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
            }
        });
    </script>

With the Wrappers however, this approach is not enough, because loading the Kendo scripts as modules leads to a javascript error:

Adding the scripts without type="module" is also not an option because the pdf.js library requires it:

Workarounds

1. The easiest workaround is to add the Kendo scripts two times, both with and without type="module":

<link href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- add kendo scripts in standard fashion -->
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js"></script>
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js"></script>

<!-- add pdf.js and pdf.worker.js scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>

<!-- add kendo all script as a module afterwards -->
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>

@(Html.Kendo().PDFViewer().Name("pdfviewer")
            .PdfjsProcessing(pdf => pdf.File("../sample.pdf"))
            .Height(1200)
        )
@(Html.Kendo().DateTimePicker().Name("picker"))

2. Instead of loading the whole kendo.all script second time, you can only load the specific PdfViewer scripts. You can even isolate the PdfViewer component in a Partial page:

<!-- add kendo all script as a module afterwards -->
<script src="https://kendo.cdn.telerik.com/2024.4.1112/mjs/kendo.pdfviewer-common.cmn.chunk.js" type="module"></script>
<script src="https://kendo.cdn.telerik.com/2024.4.1112/mjs/kendo.pdfviewer.js" type="module"></script>

3. One possible option is to load the Kendo scripts as a module one single time and include the following general option in the Global.asax file. However, this leads to other problems with custom scripts:

            KendoMvc.Setup(options =>
            {
                options.RenderAsModule = true;
            });

4. A theoretical option would be to download the pdf.js scripts locally and use a JS bundler tool to somehow make them compatible with regular scripts.