@unisphere/nx 2.2.2 → 3.2.4

package/dist/generators/add-application/add-application.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"add-application.d.ts","sourceRoot":"","sources":["../../../src/generators/add-application/add-application.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,IAAI,EAAiB,MAAM,YAAY,CAAC;AAE7E,OAAO,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AA0EzD,wBAAsB,uBAAuB,CAC3C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,6BAA6B,uBAsIvC;AAED,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"add-application.d.ts","sourceRoot":"","sources":["../../../src/generators/add-application/add-application.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,IAAI,EAAsC,MAAM,YAAY,CAAC;AAIlG,OAAO,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AAkHzD,wBAAsB,uBAAuB,CAC3C,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,6BAA6B,uBAgQvC;AAED,eAAe,uBAAuB,CAAC"}

package/dist/generators/add-application/add-application.js

@@ -4,6 +4,8 @@ exports.addApplicationGenerator = addApplicationGenerator;
 const tslib_1 = require("tslib");
 const devkit_1 = require("@nx/devkit");
 const path = tslib_1.__importStar(require("path"));
+const child_process_1 = require("child_process");
+const fs = tslib_1.__importStar(require("fs"));
 const utils_1 = require("../utils");
 const dependency_config_1 = require("../dependency-config");
 async function getEnquirerPrompt() {
@@ -11,14 +13,45 @@ async function getEnquirerPrompt() {
     // Handle both CommonJS and ESM exports
     return enquirer.prompt || enquirer.default?.prompt || enquirer;
 }
-async function promptForRuntimeName() {
+async function promptForRuntimeName(availableRuntimes, existingRuntimeName, existingVisualName, skipDynamicRuntimeVisualPrompt) {
     const prompt = await getEnquirerPrompt();
-    const response = await prompt({
-        type: 'input',
-        name: 'runtimeName',
-        message: 'Enter the runtime name to load in the playground:',
-    });
-    return response.runtimeName;
+    let runtimeName = existingRuntimeName;
+    let visualName = existingVisualName;
+    if (skipDynamicRuntimeVisualPrompt) {
+        return { runtimeName, visualName };
+    }
+    if (!runtimeName) {
+        const runtimeChoices = [
+            { value: '', name: '(none)' },
+            ...Object.keys(availableRuntimes).map(name => ({ name, value: name }))
+        ];
+        const response = await prompt({
+            type: 'select',
+            name: 'runtimeName',
+            message: 'Select a runtime for this application (optional):',
+            choices: runtimeChoices,
+        });
+        runtimeName = response.runtimeName;
+        runtimeName = runtimeName === '(none)' ? '' : runtimeName;
+    }
+    if (!visualName && runtimeName && availableRuntimes[runtimeName]) {
+        const availableVisuals = availableRuntimes[runtimeName].visuals;
+        if (availableVisuals.length > 0) {
+            const visualChoices = [
+                { value: '', name: '(none)' },
+                ...availableVisuals.map(name => ({ name, value: name }))
+            ];
+            const response = await prompt({
+                type: 'select',
+                name: 'visualName',
+                message: 'Select a visual type to mount (optional):',
+                choices: visualChoices,
+            });
+            visualName = response.visualName;
+            visualName = visualName === '(none)' ? '' : visualName;
+        }
+    }
+    return { runtimeName, visualName };
 }
 async function promptForHtmlPageTitle() {
     const prompt = await getEnquirerPrompt();
@@ -33,12 +66,7 @@ async function promptForDependencies(isPlayground) {
     const prompt = await getEnquirerPrompt();
     const choices = [
         { value: 'ds', label: 'Kaltura DS - Design System (requires GIT_TOKEN)' },
-        { value: 'react-hook-form', label: 'React Hook Form - Form management' },
     ];
-    // Only show mui option for local-dev-playground
-    if (isPlayground) {
-        choices.splice(1, 0, { value: 'mui', label: 'Material UI - Component library' });
-    }
     const response = await prompt({
         type: 'multiselect',
         name: 'dependencies',
@@ -53,97 +81,192 @@ async function addApplicationGenerator(tree, options) {
         throw new Error('iframe-with-post-messages serving type is not currently supported. Please choose a different serving type.');
     }
     const isPlayground = options.servingType === 'local-dev-playground';
-    // Handle dynamic prompts based on servingType
-    if (isPlayground && !options.runtimeName) {
-        options.runtimeName = await promptForRuntimeName();
-    }
-    if (!isPlayground && !options.htmlPageTitle) {
-        options.htmlPageTitle = await promptForHtmlPageTitle();
-    }
-    if (options.dependencies === undefined) {
-        options.dependencies = await promptForDependencies(isPlayground);
+    const isDocumentation = options.servingType === 'documentation';
+    // Check workspace pattern for documentation apps
+    if (isDocumentation) {
+        const rootPackageJsonPath = 'package.json';
+        if (tree.exists(rootPackageJsonPath)) {
+            const packageJson = JSON.parse(tree.read(rootPackageJsonPath, 'utf-8') || '{}');
+            const workspaces = packageJson.workspaces || [];
+            // Check if using the old catch-all pattern that doesn't work with documentation apps
+            const hasCatchAllPattern = workspaces.includes('unisphere/**');
+            const hasNegationPattern = workspaces.some((pattern) => pattern.startsWith('!'));
+            if (hasCatchAllPattern || hasNegationPattern) {
+                throw new Error('Documentation applications require @unisphere/nx version 3.1.0 or higher.\n\n' +
+                    'Your workspace is using an old npm workspaces pattern that prevents documentation apps ' +
+                    'from having their own node_modules.\n\n' +
+                    'Please upgrade by running:\n' +
+                    '  npx nx migrate @unisphere/nx@latest\n' +
+                    '  npx nx migrate --run-migrations\n\n' +
+                    'This will update your workspace pattern to support documentation apps.');
+            }
+        }
     }
     // Validate and read .unisphere configuration
     const unisphereConfig = (0, utils_1.validateUnisphereConfig)(tree);
-    // Validate dependencies - always include react, add mui and react-hook-form for local-dev-playground
-    const baseDependencies = ['react'];
-    if (options.servingType === 'local-dev-playground') {
-        baseDependencies.push('mui', 'react-hook-form');
+    // Skip runtime/visual prompts for documentation sites
+    let runtimeName = '';
+    let visualName = '';
+    if (!isDocumentation) {
+        const promptResult = await promptForRuntimeName(unisphereConfig.runtimes, options.runtimeName || '', options.visualName || '', options.skipDynamicRuntimeVisualPrompt || false);
+        runtimeName = promptResult.runtimeName;
+        visualName = promptResult.visualName;
+    }
+    // Skip HTML page title prompt for documentation (Docusaurus has its own config)
+    if (!isPlayground && !isDocumentation && !options.htmlPageTitle) {
+        options.htmlPageTitle = options.htmlPageTitle || await promptForHtmlPageTitle();
+    }
+    // Skip dependencies prompt for documentation (Docusaurus has its own)
+    let selectedDependencies = [];
+    if (!isDocumentation) {
+        if (options.dependencies === undefined) {
+            options.dependencies = await promptForDependencies(isPlayground);
+        }
+        const baseDependencies = ['react'];
+        selectedDependencies = [...baseDependencies, ...(options.dependencies || [])];
     }
-    const selectedDependencies = [...baseDependencies, ...(options.dependencies || [])];
-    (0, dependency_config_1.validateGitToken)(selectedDependencies);
     // Validate runtime exists if runtimeName is provided
-    if (options.runtimeName) {
-        if (!(0, utils_1.checkIfRuntimeExists)(tree, options.runtimeName)) {
-            throw new Error(`Runtime "${options.runtimeName}" does not exist`);
+    if (runtimeName) {
+        if (!(0, utils_1.checkIfRuntimeExists)(tree, runtimeName)) {
+            throw new Error(`Runtime "${runtimeName}" does not exist, please check the available runtimes under 'unisphere/runtimes'`);
         }
     }
     // Extract environment variables
     const widgetName = unisphereConfig.name;
-    const userInputApplicationName = (0, devkit_1.names)(options.name).fileName;
-    if (options.servingType === 'local-dev-playground') {
-        options.runtimeName = userInputApplicationName.endsWith('-dev')
-            ? userInputApplicationName
-            : `${userInputApplicationName}-dev`;
+    let applicationName = options.name;
+    if (isPlayground && !options.name.endsWith('-dev')) {
+        applicationName += '-dev';
+    }
+    const applicationNameAsLowerDashCase = (0, devkit_1.names)(applicationName).fileName;
+    // Find types package (or fallback to core) - skip for documentation
+    const typesPackageInfo = isDocumentation ? null : (0, utils_1.findTypesOrCorePackageInfo)(tree);
+    // Determine subdirectory based on serving type
+    // local-dev-playground -> local/, documentation -> documentation/, other types -> server/
+    const subdirectory = isPlayground ? 'local' : isDocumentation ? 'documentation' : 'server';
+    const projectRoot = `unisphere/applications/${subdirectory}/${applicationNameAsLowerDashCase}`;
+    // Handle documentation type separately
+    if (isDocumentation) {
+        // Check if the application already exists
+        if (tree.exists(projectRoot)) {
+            throw new Error(`Application "${applicationNameAsLowerDashCase}" already exists at ${projectRoot}.\n` +
+                'Please choose a different application name or remove the existing application first.');
+        }
+        // Update .unisphere configuration (applicationType is derived from folder path)
+        (0, utils_1.updateUnisphereConfig)(tree, 'applications', applicationNameAsLowerDashCase, {
+            sourceRoot: projectRoot,
+        });
+        // Add documentation folder to .nxignore to prevent NX from scanning it
+        // Docusaurus has its own node_modules which can slow down NX
+        const nxIgnorePath = '.nxignore';
+        const ignoreEntry = `${projectRoot}/node_modules`;
+        let nxIgnoreContent = '';
+        if (tree.exists(nxIgnorePath)) {
+            nxIgnoreContent = tree.read(nxIgnorePath, 'utf-8') || '';
+        }
+        if (!nxIgnoreContent.includes(ignoreEntry)) {
+            const newContent = nxIgnoreContent
+                ? `${nxIgnoreContent.trimEnd()}\n\n# Documentation site (Docusaurus) - has its own node_modules\n${ignoreEntry}\n`
+                : `# Documentation site (Docusaurus) - has its own node_modules\n${ignoreEntry}\n`;
+            tree.write(nxIgnorePath, newContent);
+        }
+        // Documentation folders are automatically excluded from npm workspaces
+        // because the root package.json uses explicit workspace patterns that don't include
+        // unisphere/applications/documentation/**
+        // This allows documentation sites (like Docusaurus) to have their own node_modules
+        await (0, devkit_1.formatFiles)(tree);
+        // Return a function that will be executed after all file operations are complete
+        return () => {
+            const workspaceRoot = process.cwd();
+            const fullProjectPath = path.join(workspaceRoot, projectRoot);
+            devkit_1.logger.info('');
+            devkit_1.logger.info('📚 Setting up Docusaurus documentation site...');
+            devkit_1.logger.info('');
+            try {
+                // Create the parent directory if it doesn't exist
+                const parentDir = path.dirname(fullProjectPath);
+                if (!fs.existsSync(parentDir)) {
+                    fs.mkdirSync(parentDir, { recursive: true });
+                }
+                // Run Docusaurus CLI to scaffold the project
+                // Docusaurus creates a self-contained project with its own package.json
+                // No NX integration needed - we just delegate to Docusaurus CLI for serve/build
+                // Use public npm registry explicitly (workspaces may have private registry configured)
+                devkit_1.logger.info('Running Docusaurus CLI...');
+                (0, child_process_1.execSync)(`npx --yes --registry https://registry.npmjs.org create-docusaurus@3 "${fullProjectPath}" classic --typescript`, {
+                    stdio: 'inherit',
+                    cwd: workspaceRoot,
+                });
+                devkit_1.logger.info('');
+                devkit_1.logger.info('✅ Documentation site generated successfully!');
+                devkit_1.logger.info('');
+                devkit_1.logger.info(`📚 Application Name: ${applicationNameAsLowerDashCase}`);
+                devkit_1.logger.info(`🔧 Type: Documentation Site (Docusaurus)`);
+                devkit_1.logger.info(`📁 Location: ${projectRoot}`);
+                devkit_1.logger.info('');
+                devkit_1.logger.info(`📜 To serve: npx unisphere application serve ${applicationNameAsLowerDashCase}`);
+                devkit_1.logger.info(`📦 To build: npx unisphere application build ${applicationNameAsLowerDashCase}`);
+                devkit_1.logger.info('');
+            }
+            catch (error) {
+                devkit_1.logger.error('Failed to create Docusaurus project:');
+                devkit_1.logger.error(error instanceof Error ? error.message : String(error));
+                throw error;
+            }
+        };
     }
-    // Prepare template variables
+    // Standard application flow (non-documentation)
     const hasDs = selectedDependencies.includes('ds');
-    const hasMui = selectedDependencies.includes('mui') || hasDs;
-    // Find types package (or fallback to core)
-    const typesPackageInfo = (0, utils_1.findTypesOrCorePackageInfo)(tree);
     const templateVariables = {
         htmlPageTitle: options.servingType === 'local-dev-playground'
-            ? `${options.runtimeName || 'Runtime'} - Local Dev Application`
+            ? `${runtimeName || 'Runtime'} - Local Dev Application`
             : options.htmlPageTitle,
         servingType: options.servingType,
         hasDs,
-        hasMui,
-        ...(0, utils_1.createNameTransforms)(userInputApplicationName, 'applicationName'),
+        ...(0, utils_1.createNameTransforms)(applicationNameAsLowerDashCase, 'applicationName'),
         ...(0, utils_1.createNameTransforms)(widgetName, 'widgetName'),
-        ...(0, utils_1.createNameTransforms)(options.runtimeName || 'runtime', 'runtimeName'),
+        ...(0, utils_1.createNameTransforms)(runtimeName, 'runtimeName'),
+        ...(0, utils_1.createNameTransforms)(visualName, 'visualName'),
         tmpl: '',
         typesAlias: typesPackageInfo.alias,
+        subdirectory,
+        projectRoot,
     };
-    const projectRoot = `unisphere/applications/${userInputApplicationName}`;
     // Check if the application already exists
     if (tree.exists(projectRoot)) {
-        throw new Error(`Application "${userInputApplicationName}" already exists at ${projectRoot}.\n` +
+        throw new Error(`Application "${applicationNameAsLowerDashCase}" already exists at ${projectRoot}.\n` +
             'Please choose a different application name or remove the existing application first.');
     }
     // Choose template based on serving type
-    const templatePath = options.servingType === 'local-dev-playground'
-        ? 'templates/local-dev-playground'
-        : 'templates/default';
+    const templatePath = 'templates/default';
     // Generate files from templates
     (0, devkit_1.generateFiles)(tree, path.join(__dirname, templatePath), projectRoot, templateVariables);
     // Install selected dependencies
     (0, dependency_config_1.installSelectedDependencies)(tree, selectedDependencies);
-    const distributionChannel = options.servingType === 'local-dev-playground' ? 'none' : 'unisphere';
     // Update .unisphere configuration
-    (0, utils_1.updateUnisphereConfig)(tree, 'applications', userInputApplicationName, {
-        sourceRoot: `unisphere/applications/${userInputApplicationName}`,
-        distributionChannel: distributionChannel,
+    (0, utils_1.updateUnisphereConfig)(tree, 'applications', applicationNameAsLowerDashCase, {
+        sourceRoot: projectRoot,
     });
     // Update tsconfig.base.json with path mapping
-    const applicationPathKey = `unisphere-application-${userInputApplicationName}`;
-    const applicationPathValue = `unisphere/applications/${userInputApplicationName}/src/index.ts`;
+    const applicationPathKey = `unisphere-application-${applicationNameAsLowerDashCase}`;
+    const applicationPathValue = `${projectRoot}/src/index.ts`;
     (0, utils_1.updateTsConfigPaths)(tree, applicationPathKey, applicationPathValue);
+    const scriptName = `serve:${applicationNameAsLowerDashCase}`;
+    const scriptCommand = runtimeName ?
+        `concurrently "npx unisphere runtime serve ${runtimeName} --port 8400" "npx unisphere application serve ${applicationNameAsLowerDashCase} --port 4002"`
+        : `npx unisphere application serve ${applicationNameAsLowerDashCase} --port 4002`;
+    (0, utils_1.addScriptToRootPackageJson)(tree, scriptName, scriptCommand);
     await (0, devkit_1.formatFiles)(tree);
     // Return a function that will be executed after all file operations are complete
     return () => {
+        (0, devkit_1.installPackagesTask)(tree, true);
         devkit_1.logger.info('');
         devkit_1.logger.info('✅ Application generated successfully!');
         devkit_1.logger.info('');
-        devkit_1.logger.info(`🚀 Application Name: ${userInputApplicationName}`);
-        devkit_1.logger.info(`📁 Location: ${projectRoot}`);
-        if (options.servingType === 'local-dev-playground') {
-            devkit_1.logger.info(`🎮 Runtime Name: ${options.runtimeName}`);
-            devkit_1.logger.info(`📄 HTML Page Title: ${options.runtimeName} - Local Dev Application`);
-        }
-        else {
-            devkit_1.logger.info(`📄 HTML Page Title: ${options.htmlPageTitle}`);
-        }
+        devkit_1.logger.info(`🚀 Application Name: ${applicationNameAsLowerDashCase}`);
         devkit_1.logger.info(`🔧 Serving Type: ${options.servingType}`);
+        devkit_1.logger.info(`📁 Location: ${projectRoot}`);
+        devkit_1.logger.info('');
+        devkit_1.logger.info(`📜 To run the application locally: npm run ${scriptName}`);
         devkit_1.logger.info('');
     };
 }

package/dist/generators/add-application/schema.d.ts

@@ -1,7 +1,9 @@
 export interface AddApplicationGeneratorSchema {
   name: string;
   htmlPageTitle?: string;
-  servingType: 'local-dev-playground' | 'self-hosted' | 'iframe-with-query-params' | 'iframe-with-post-messages';
+  servingType: 'local-dev-playground' | 'self-hosted' | 'iframe-with-post-messages' | 'documentation';
   runtimeName?: string;
+  visualName?: string;
+  skipDynamicRuntimeVisualPrompt?: boolean; // Internal option to skip the dynamic prompt for visual when runtime is selected
   dependencies?: string[];
 }

package/dist/generators/add-application/schema.json

@@ -17,26 +17,26 @@
     "servingType": {
       "type": "string",
       "description": "How should this app be served?",
-      "default": "self-hosted",
+      "default": "local-dev-playground",
       "x-prompt": {
         "message": "Which serving type do you want?",
         "type": "list",
         "items": [
           {
             "value": "local-dev-playground",
-            "label": "Local Dev Playground (for development purposes)"
+            "label": "Runtime Dev Playground (for development purposes)"
           },
           {
             "value": "self-hosted",
-            "label": "Self-Hosted (standalone, suitible to applications with login pages)"
-          },
-          {
-            "value": "iframe-with-query-params",
-            "label": "Iframe + Query Params (suitible to applications that gets required configuration from URL query parameters)"
+            "label": "Standalone Application"
           },
           {
             "value": "iframe-with-post-messages",
             "label": "Iframe + Post Messages (suitible to applications that gets required configuration from post messages)"
+          },
+          {
+            "value": "documentation",
+            "label": "Documentation Site (Docusaurus)"
           }
         ]
       }
@@ -66,4 +66,4 @@
     "name",
     "servingType"
   ]
-}
+}

package/dist/generators/add-application/templates/default/.env-template

@@ -0,0 +1,6 @@
+# Environment variables template
+# Copy this file to .env and fill in the values
+# Do not commit .env to version control
+
+# Example:
+# API_URL=https://api.example.com

package/dist/generators/add-application/templates/default/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:@nx/react", "../../../.eslintrc.json"],
+  "extends": ["plugin:@nx/react", "../../../../.eslintrc.json"],
   "ignorePatterns": [
     "!**/*",
     "**/vite.config.*.timestamp*",

package/dist/generators/add-application/templates/default/jest.config.ts

@@ -1,11 +1,11 @@
 /* eslint-disable */
 export default {
-  displayName: 'admin',
-  preset: '../../../jest.preset.js',
+  displayName: '<%= applicationName__lowerDashCase %>',
+  preset: '../../../../jest.preset.js',
   transform: {
     '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
     '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../../coverage/unisphere/applications/admin',
+  coverageDirectory: '../../../../coverage/<%= projectRoot %>',
 };

package/dist/generators/add-application/templates/default/project.json.template

@@ -1,7 +1,7 @@
 {
   "name": "unisphere-application-<%= applicationName__lowerDashCase %>",
-  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "unisphere/applications/<%= applicationName__lowerDashCase %>/src",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "<%= projectRoot %>/src",
   "projectType": "application",
   "tags": [],
   "// targets": "to see all targets run: nx show project unisphere-application-<%= applicationName__lowerDashCase %> --web",

package/dist/generators/add-application/templates/default/readme.md.template

@@ -0,0 +1,11 @@
+# <%= applicationName__pascalCase %> Application
+
+## Develop Locally
+
+> Copy the .env file from `/<%= projectRoot %>/.env-template` to `/<%= projectRoot %>/.env` and update settings
+
+1. run `npx unisphere application serve <%= applicationName__lowerDashCase %> --port 4002`
+2. open the browser in http://localhost:4002/
+
+
+## Overview section

package/dist/generators/add-application/templates/default/src/app/app.tsx.template

@@ -1,97 +1,97 @@
-import { useState } from 'react';
-<% if (hasDs) { %>import { HostThemeProvider } from '@kaltura/ds-react-theme';
-<% } %><% if (hasMui) { %>import { Box } from '@mui/material';
-<% } %>
-export function App() {
-  const [adapter] = useState(() => {
-<% if (servingType === 'iframe-with-query-params') { %>
+import { useMemo, useState } from 'react';
+import { getQueryParam } from '@unisphere/runtime-js';
+import { UnisphereProvider  } from '@unisphere/runtime-react';
+import { UnisphereWorkspaceType } from '@unisphere/runtime';
+<% if (runtimeName) { %>import { <%= runtimeName__pascalCase %>RuntimeSettings, <%= runtimeName__pascalCase %>Runtime } from '<%= typesAlias %>';<% } %>
+<% if (visualName) { %>import { <%= runtimeName__pascalCase %>Runtime<%= visualName__pascalCase %>VisualSettings } from '<%= typesAlias %>';<% } %>
 
-    const ks = new URLSearchParams(window.location.search).get('ks') || '';
-    const isDev =
-      new URLSearchParams(window.location.search).get('isDev') || '';
+const appId = ''; // Provide your application id 
+const appVersion = ''; // Provide your application version
+
+export function App() {
+<% if (runtimeName) { %>
+  const [runtime, setRuntime] = useState<<%= runtimeName__pascalCase %>Runtime | null>(null);
+<% } %>  
+  const env = useMemo(() => {
     const envMatch = window.location.hostname.match(/unisphere\.(.+?)\.ovp\./);
     let env = '';
+    const isLocalhost = window.location.hostname.startsWith('localhost');
+    const isDev = getQueryParam('debugIsDev') === 'true';
 
-    if (envMatch) {
-      console.log('extracting env from hostname', envMatch[1]);
+    if (isDev) {
+      return 'nvq2';
+    }
+    else if (envMatch) {
       env = envMatch[1];
-    } else if (isDev) {
-      console.log(
-        'no env match found in hostname and got isDev query param, assuming nvq2'
-      );
+    } else if (isLocalhost) {
       env = 'nvq2';
     } else {
-      console.log('no env match found in hostname, assuming nvp1');
       env = 'nvp1';
     }
+    return env;
+  }, []);
 
-    if (ks === 'demo') {
-      return null; // TODO initialize here the mock adapter
-    }
-    if (ks && env) {
-      return null; // TODO initiate here the actual adapter
-    }
-
-    console.warn('Missing required query params: ks');
-    return null;
-<% } else  { %>
-
-    return null;
-<% } %>
-
+<% if (runtimeName) { %>
+  const [runtimeSettings] = useState<<%= runtimeName__pascalCase %>RuntimeSettings | null>(() => {
+      return {};
   });
-
-<% if (servingType === 'iframe-with-post-messages') { %>
-  // TODO should get the configuration from post message event
-<% } %>
-
-<% if (servingType === 'self-hosted') { %>
-  // TODO self hosted logic if needed
 <% } %>
 
 <% if (hasDs) { %>
-  const [themeMode] = useState(() => {
-    return 'light' as const
-  });
+  const themeMode = useMemo(() => {
+    return (process.env.THEME_MODE || 'light') as 'light' | 'dark';
+  }, []);
 <% } %>
+  
+  const onWorkspaceLoaded = (_workspace: UnisphereWorkspaceType) => {
+      <% if (runtimeName) { %>
+      setRuntime(_workspace.getRuntime<<%= runtimeName__pascalCase %>Runtime>('unisphere.widget.<%= widgetName__lowerDashCase %>', '<%= runtimeName__lowerDashCase %>'));
+      <% } %>
+  };
 
-  return (
-<% if (hasMui) { %>
-    <Box
-      sx={{
-        width: '100vw',
-        height: '100vh',
-        overflow: 'hidden',
-        padding: '12px 24px',
-      }}
-    >
-<% } else { %>
-    <div
-      style={{
-        width: '100vw',
-        height: '100vh',
-        overflow: 'hidden',
-        padding: '12px 24px',
-      }}
-    >
-<% } %>
-<% if (hasDs) { %>
-      <HostThemeProvider
-        overrides={{
-          mode: themeMode,
-        }}
-      >
-        {adapter ? <div> <%= applicationName__lowerDashCase %> </div> : <div></div>}
-      </HostThemeProvider>
-<% } else { %>
-      {adapter ? <div> <%= applicationName__lowerDashCase %> </div> : <div></div>}
-<% } %>
-<% if (hasMui) { %>
-    </Box>
-<% } else { %>
-    </div>
+
+  return <UnisphereProvider
+    onWorkspaceLoaded={onWorkspaceLoaded}
+    themeMode={<% if (hasDs) { %>themeMode<% } else { %>'light'<% } %>}
+    initialConfiguration={{
+      appId,
+      appVersion,
+      serverUrl: `https://unisphere.${env}.ovp.kaltura.com/v1`,
+      runtimes: [
+<% if (runtimeName) { %>
+        {
+          widgetName: 'unisphere.widget.<%= widgetName__lowerDashCase %>',
+          runtimeName: '<%= runtimeName__lowerDashCase %>',
+          settings: runtimeSettings,
+          visuals: [
+            <% if (!visualName) { %>/*<% } %>{
+                type: '<%= visualName ? visualName__camelCase : "~~provide-the-visual-name-to-mount-here~~" %>',
+                target: 'mainContainer',
+                settings: {}<% if (visualName) { %> as <%= runtimeName__pascalCase %>Runtime<%= visualName__pascalCase %>VisualSettings<% } %>
+              }<% if (!visualName) { %>*/<% } %>
+          ],
+        },
 <% } %>
-  );
+      ],
+      ui: {
+        theme: <% if (hasDs) { %>themeMode<% } else { %>'light'<% } %>,
+        language: 'en'
+      }
+    }}
+  >
+    <div id='mainContainer'></div>
+  </UnisphereProvider>;
 }
 
 export default App;
+
+
+
+
+
+
+
+
+
+
+

package/dist/generators/add-application/templates/default/tsconfig.json

@@ -16,5 +16,5 @@
       "path": "./tsconfig.spec.json"
     }
   ],
-  "extends": "../../../tsconfig.base.json"
+  "extends": "../../../../tsconfig.base.json"
 }

package/dist/generators/add-application/templates/default/webpack.config.js.template

@@ -1,18 +1,23 @@
 const { NxAppWebpackPlugin } = require('@nx/webpack/app-plugin');
 const { NxReactWebpackPlugin } = require('@nx/react/webpack-plugin');
+const { DefinePlugin } = require('webpack');
 const { join } = require('path');
 
 const baseHref = process.env.UNISPHERE_BASE_HREF || '/';
 
 module.exports = {
   output: {
-    path: join(__dirname, '../../../dist/unisphere/applications/<%= applicationName__lowerDashCase %>'),
+    path: join(__dirname, '../../../../dist/<%= projectRoot %>'),
     publicPath: baseHref
   },
   devServer: {
     port: 4200,
   },
   plugins: [
+    new DefinePlugin({
+      // Add your environment variables here
+      // Example: 'process.env.API_URL': JSON.stringify(process.env.API_URL),
+    }),
     new NxAppWebpackPlugin({
       tsConfig: './tsconfig.app.json',
       compiler: 'babel',