feat: add testing route for cdn usage

canary/App.tsx

@@ -5,6 +5,7 @@ import Header from './Header';
 import Footer from './Footer';
 import BasicAdobeEmbed from './routes/Basic';
 import LightBoxEmbed from './routes/LightBox';
+import CDN from './routes/CDN';
 
 function App() {
   return (
@@ -39,6 +40,10 @@ function App() {
           <LightBoxEmbed/>
         } />
 
+        <Route path="/cdn" element={
+          <CDN/>
+        }/>
+
 
     </Routes>
     <Footer/>

canary/Header.tsx

@@ -113,6 +113,12 @@ export default function Header() {
                         Lightbox PDF Render
                       </Link>
                     </li>
+
+                    <li>
+                      <Link to="/cdn">
+                        CDN Loaded PDF Render
+                      </Link>
+                    </li>
                   </div>
                 </div>
               </ul>

canary/routes/Basic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactViewAdobe from '../../src/index';
+import ReactViewAdobe from 'react-adobe-embed';
 import { getClientId } from '../util';
 export default function BasicAdobeEmbed() {
     const locationUrl = window.location.href;

canary/routes/CDN.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { getClientId } from '../util';
+
+export default function CDN() {
+
+    const [componentDidMount, setComponentDidMount] = React.useState(false);
+    const [componentDidUpdate, setComponentDidUpdate] = React.useState(false);
+    React.useEffect(() => {
+
+        if (!componentDidMount) {
+
+            // Create new script element to load cdn
+            const script = document.createElement('script');
+            script.src = 'https://ziping-liu-corporation.github.io/react-adobe-embed/dist/react-adobe-embed.cdn.js';
+            script.async = true;
+            script.onload = () => {
+                setComponentDidUpdate(true);
+            };
+            // Add script to document body
+            document.body.appendChild(script);
+
+            setComponentDidMount(true);
+
+        }
+
+    }
+        , [componentDidMount, componentDidUpdate]);
+
+
+    (window as any).React = React; // expose React as global since the react-adobe embed cdn expects React to be loaded via cdn as well
+    const ReactViewAdobe = (window as any).ReactViewAdobe as typeof import('react-adobe-embed').default;
+
+    return (
+        <section className="container section">
+            <div className="row ws-m">
+                <div className="col s12">
+                <header className="sec-heading">
+                    <h2>CDN Loaded Basic PDF Render</h2>
+                    <span className="subheading">
+                    Content Delivery Networking (CDN) allows the delivery of the react-adobe-embed component to a browser environment to occur as <strong>a separate process</strong> from the main body of the web application's code.
+
+                    </span>
+                </header>
+                    <p>
+                    This approach involves loading the component as an independent script within the initial HTML page load, effectively integrating it into the HTML DOM environment. This method not only reduces the space required by the web application, thereby enhancing its load speed, but also leverages the benefits of distributed loading. By loading distinct components of the web application through separate network requests, we can maximize efficiency. In this instance, the react-adobe-embed component is sourced from a CDN as a separate network request, distinct from the main web application. This effectively allows the web application to load in two concurrent parts, or at least simulates this effect, thanks to the inherent multi-threading capabilities of computer systems.
+                    </p>
+                    {
+                        componentDidUpdate && componentDidMount && ReactViewAdobe && (<ReactViewAdobe
+                            clientId={getClientId()}
+                            url="https://raw.githubusercontent.com/ZipingL/dna/main/23andMe_Ancestry_Book.pdf"
+                            debug={true}
+                            className="col container-fluid post-content"
+                            style={{
+                                height: "calc(100vh - 420px)",
+                                width: "100%"
+                            }}
+                            previewConfig={{}}
+                            fileMeta={{
+                                fileName: "23andMe_Ancestry_Book.pdf",
+
+                            }}
+                        />)
+                    }
+                </div>
+            </div>
+        </section>
+    )
+}

canary/routes/LightBox.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactViewAdobe, { previewFile } from  '../../src/index';
+import ReactViewAdobe, { previewFile } from  'react-adobe-embed';
 import { getClientId } from '../util';
 
 export default function LightBoxEmbed() {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-adobe-embed",
-  "version": "11.0.16",
+  "version": "11.0.17",
   "homepage": "https://ziping-liu-corporation.github.io/react-adobe-embed",
   "repository": {
     "type": "git",

public/index.html

@@ -14,8 +14,6 @@
 
         gtag('config', 'G-VPZQGSPGGL');
     </script>
-    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
-    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
     <link rel="stylesheet" href="https://use.typekit.net/owp1rvt.css">
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">

rollup.config.cdn.js

@@ -11,16 +11,21 @@ import terser from "@rollup/plugin-terser";
 
 const config = {
     input: 'src/main.tsx',
+
     output: [
         {
-
+            
             file: 'dist/react-adobe-embed.cdn.js',
             // cdn format
             format: 'umd',
             name: 'ReactAdobeEmbed',
+
             globals: {
                 react: 'React',
-                'react-dom/client': 'ReactDOM'            }
+                'react-dom/client': 'ReactDOM'          
+
+            },
+            sourcemap:'inline'
 
         }
     ],
@@ -31,7 +36,7 @@ const config = {
             exclude: [
                 "**/__tests__"
             ],
-            sourceMap: false,
+            sourceMap: true,
         }),
         peerDepsExternal(),
         babel({
@@ -54,7 +59,7 @@ const config = {
         terser( {
             format:{
               comments: "all",
-              preamble: "/* react-adobe-embed */"
+              preamble: `${process.env.CDN_PREAMBLE_COMMENTARY_NOTICE || "/* react-adobe-embed */"}`
             }
           }),
 

rollup.config.js

@@ -6,7 +6,7 @@ import filesize from 'rollup-plugin-filesize';
 import localResolve from  '@haensl/rollup-plugin-local-resolve';
 import replace from "@rollup/plugin-replace";
 
-import typescript from "@rollup/plugin-typescript";
+import typescript from "rollup-plugin-typescript2";
 
 import terser from "@rollup/plugin-terser";
 import{ dts} from "rollup-plugin-dts";
@@ -91,7 +91,7 @@ export default [
         external: ["react", "react-dom", "styled-components"]
     },
     {
-        input: "./lib/types/index.d.ts",
+        input:  "types/index.d.ts",
         output: [{ file: "lib/bundle.esm.d.ts", format: "esm" }],
         plugins: [dts()],
     },

tsconfig.build.json

@@ -9,10 +9,12 @@
       "acceptance-tests",
       "webpack",
       "jest",
-      "src/stories/**"
+      "src/stories/**",
+      "canary"
     ],
     "compilerOptions": {
-      "outDir": "lib"
+      "outDir": "lib",
+      "baseUrl": "./src"
     }
   }
 

tsconfig.json

@@ -30,7 +30,7 @@
                                      /* Specify what module code is generated. */
    // "rootDir": "./src",                                  /* Specify the root folder within your source files. */
     "moduleResolution": "Node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
-     "baseUrl": "./src",                                 /* Specify the base directory to resolve non-relative module names. */
+     "baseUrl": "./",                                 /* Specify the base directory to resolve non-relative module names. */
     //  "paths": {
     //   "@types": ["./src/@types"],
     //  },
@@ -81,6 +81,16 @@
     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
     "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
 
+      "paths": {
+        "react-adobe-embed": [
+          "src"
+        ]
+
+      },
+
+
+
+
     /* Type Checking */
     "strict": true,                                      /* Enable all strict type-checking options. */
     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
@@ -108,7 +118,9 @@
   },
   "include": [
    "./src",
+   "./canary"
   ],
+
   "exclude": [
     "lib",
     "src/__tests__",