[Feat][GRAFX-3857] Produce es module in addition to the "iife" for modern support

README.md

@@ -40,9 +40,18 @@ If you need help generating a token or would like code samples, please see our [
         <!-- div where studio ui will be constructed in -->
         <div id="studio-ui-container"></div>
 
-        <!-- script to inject latest studio ui -->
+        <!-- 1. ES5 approach script to inject latest studio ui -->
         <script src="https://studio-cdn.chiligrafx.com/studio-ui/latest/bundle.js"></script>
 
+        <!-- OR -->
+
+        <!-- 2. ES Modules approach (recommended one) script to inject latest studio ui -->
+        <script type="module">
+            import('https://studio-cdn.chiligrafx.com/studio-ui/latest/es-module/bundle.js').then((module) => {
+                window.StudioUI = module.default;
+            });
+        </script>
+
         <!-- custom logic -->
         <script>
             /* your access token, should be gathered on the fly, is just here for demo purposes. */

documentation/advanced-integration.md

@@ -50,9 +50,18 @@ Create a new html file, you can call it whatever you want, but in our case we ca
         <!-- div where studio ui will be constructed in -->
         <div id="studio-ui-container"></div>
 
-        <!-- script to inject latest studio ui -->
+        <!-- 1. ES5 approach script to inject latest studio ui -->
         <script src="https://studio-cdn.chiligrafx.com/studio-ui/latest/bundle.js"></script>
 
+        <!-- OR -->
+
+        <!-- 2. ES Modules approach (recommended one) script to inject latest studio ui -->
+        <script type="module">
+            import('https://studio-cdn.chiligrafx.com/studio-ui/latest/es-module/bundle.js').then((module) => {
+                window.StudioUI = module.default;
+            });
+        </script>
+
         <!-- custom logic in seperate js file -->
         <script srs="./integration.js"></script>
     </body>

package.json

@@ -9,7 +9,9 @@
     "license": "MIT",
     "scripts": {
         "dev": "vite",
-        "build": "tsc && vite build",
+        "build": "tsc && npm run build:iife && npm run build:module",
+        "build:iife": "OUTPUT_FORMAT=iife vite build",
+        "build:module": "OUTPUT_FORMAT=module vite build",
         "preview": "vite preview",
         "testw": "jest --watch --silent",
         "test": "jest",

src/_dev-execution/bootstrap.ts

@@ -1,6 +1,7 @@
 // This is an entry point when running standalone version of studio workspace in dev mode
 // It's not going to be bundled to the main `bundle.js` file
 
+import StudioUI from '../main';
 import { TokenManager } from './token-manager';
 
 (async () => {
@@ -64,7 +65,7 @@ import { TokenManager } from './token-manager';
     } else {
         authToken = await tokenManager.getAccessToken();
     }
-    window.StudioUI.studioUILoaderConfig({
+    StudioUI.studioUILoaderConfig({
         selector: 'sui-root',
         projectId,
         projectName: 'Dev Run',

src/es-index.ts

@@ -0,0 +1,3 @@
+import StudioUI from './main';
+
+export default StudioUI;

src/index.ts

@@ -0,0 +1,10 @@
+import StudioUI from './main';
+
+declare global {
+    interface Window {
+        StudioUI: typeof StudioUI;
+    }
+}
+
+// This is an entry file for 'iife' format
+window.StudioUI = StudioUI;

src/main.tsx

@@ -1,34 +1,28 @@
+import { ITheme } from '@chili-publish/grafx-shared-components';
+import { AxiosResponse } from 'axios';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { AxiosResponse } from 'axios';
-import { ITheme } from '@chili-publish/grafx-shared-components';
 import App from './App';
+import { DemoDocumentLoader } from './DemoDocumentLoader';
+import { StudioProjectLoader } from './StudioProjectLoader';
+import './index.css';
+import { ConnectorAuthenticationResult } from './types/ConnectorAuthenticationResult';
 import {
+    defaultBackFn,
+    defaultOutputSettings,
+    defaultPlatformUiOptions,
+    defaultUiOptions,
     DownloadLinkResult,
+    IStudioUILoaderConfig,
     OutputSettings,
+    PaginatedResponse,
     Project,
     ProjectConfig,
     StudioConfig,
     UiOptions,
-    defaultBackFn,
-    defaultOutputSettings,
-    defaultPlatformUiOptions,
-    defaultUiOptions,
-    IStudioUILoaderConfig,
     UserInterface,
-    PaginatedResponse,
     UserInterfaceWithOutputSettings,
 } from './types/types';
-import { DemoDocumentLoader } from './DemoDocumentLoader';
-import { StudioProjectLoader } from './StudioProjectLoader';
-import './index.css';
-import { ConnectorAuthenticationResult } from './types/ConnectorAuthenticationResult';
-
-declare global {
-    interface Window {
-        StudioUI: typeof StudioUI;
-    }
-}
 
 export default class StudioUI {
     constructor(selector: string, projectConfig: ProjectConfig) {
@@ -389,6 +383,3 @@ export default class StudioUI {
         );
     }
 }
-
-// Make this class accessible on window
-window.StudioUI = StudioUI;

vite.config.ts

@@ -4,6 +4,10 @@ import EnvironmentPlugin from 'vite-plugin-environment';
 
 // https://vitejs.dev/config/
 export default ({ mode }) => {
+    const outputFormat = process.env.OUTPUT_FORMAT;
+    if (outputFormat !== 'iife' && outputFormat !== 'module') {
+        process.exit(1);
+    }
     return defineConfig({
         plugins: [react(), EnvironmentPlugin(['NODE_ENV', 'PREVIEW_ERROR_URL'])],
         server: {
@@ -21,21 +25,31 @@ export default ({ mode }) => {
         build: {
             emptyOutDir: true,
             rollupOptions: {
+                preserveEntrySignatures: 'exports-only',
                 input:
                     mode === 'development'
                         ? {
                               index: './src/main.tsx',
                               bootstrap: './src/_dev-execution/bootstrap.ts',
                           }
                         : {
-                              index: './src/main.tsx',
+                              index: outputFormat === 'iife' ? './src/index.ts' : './src/es-index.ts',
+                          },
+                output:
+                    outputFormat === 'iife'
+                        ? {
+                              entryFileNames: 'bundle.js',
+                              chunkFileNames: 'bundle.js',
+                              assetFileNames: 'main.[ext]',
+                              format: 'iife',
+                          }
+                        : {
+                              entryFileNames: 'bundle.js',
+                              chunkFileNames: 'chunk.[name].js',
+                              assetFileNames: 'main.[ext]',
+                              format: 'es',
+                              dir: 'dist/es-module',
                           },
-                output: {
-                    entryFileNames: 'bundle.js',
-                    chunkFileNames: 'bundle.js',
-                    assetFileNames: 'main.[ext]',
-                    format: 'iife',
-                },
             },
         },
     });