@unisphere/nx 2.2.2 → 3.2.3

package/dist/migrations/3-0-0/upgrade-schema-to-2-0-0.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = removeDistributionChannel;
+const devkit_1 = require("@nx/devkit");
+/**
+ * Migration: Remove distributionChannel property from packages and update schema version
+ *
+ * After the reorganize-packages-by-distribution-channel migration, the distributionChannel
+ * property for packages is redundant and can be inferred from the folder path:
+ *
+ * Packages:
+ * - unisphere/packages/private/* → distributionChannel: "none"
+ * - unisphere/packages/corp/* → distributionChannel: "github"
+ * - unisphere/packages/public/* → distributionChannel: "npm"
+ *
+ * Runtimes & Applications:
+ * - Keep distributionChannel property (cannot be inferred from path)
+ *
+ * This migration:
+ * 1. Removes the distributionChannel property only from packages in .unisphere
+ * 2. Updates schemaVersion from "1.0.0" to "2.0.0"
+ */
+async function removeDistributionChannel(tree) {
+    devkit_1.logger.info('');
+    devkit_1.logger.info('========================================');
+    devkit_1.logger.info('Upgrading .unisphere to schema version 2.0.0');
+    devkit_1.logger.info('========================================');
+    devkit_1.logger.info('');
+    // Check if .unisphere file exists
+    if (!tree.exists('.unisphere')) {
+        devkit_1.logger.warn('⚠️  .unisphere file not found. Skipping migration.');
+        return;
+    }
+    // Read current configuration
+    let config;
+    try {
+        config = (0, devkit_1.readJson)(tree, '.unisphere');
+    }
+    catch (error) {
+        devkit_1.logger.error(`❌ Failed to read .unisphere: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        throw error;
+    }
+    // Track changes
+    let totalRemoved = 0;
+    let schemaUpdated = false;
+    // Update schema version from 1.0.0 to 2.0.0
+    if (config.schemaVersion === '1.0.0') {
+        config.schemaVersion = '2.0.0';
+        schemaUpdated = true;
+        devkit_1.logger.info('✅ Updated schemaVersion: 1.0.0 → 2.0.0');
+        devkit_1.logger.info('');
+    }
+    else if (config.schemaVersion === '2.0.0') {
+        devkit_1.logger.info('ℹ️  Schema already at version 2.0.0');
+        devkit_1.logger.info('');
+    }
+    else {
+        devkit_1.logger.warn(`⚠️  Unknown schemaVersion: ${config.schemaVersion}. Expected 1.0.0 or 2.0.0`);
+        devkit_1.logger.info('');
+    }
+    // Process packages only (not runtimes or applications)
+    if (config.elements?.packages) {
+        for (const packageName in config.elements.packages) {
+            const packageConfig = config.elements.packages[packageName];
+            if ('distributionChannel' in packageConfig) {
+                delete packageConfig.distributionChannel;
+                totalRemoved++;
+            }
+        }
+    }
+    // Write updated configuration back
+    if (totalRemoved > 0 || schemaUpdated) {
+        try {
+            (0, devkit_1.writeJson)(tree, '.unisphere', config);
+            if (totalRemoved > 0) {
+                devkit_1.logger.info('✅ Successfully removed distributionChannel property from packages');
+                devkit_1.logger.info('');
+                devkit_1.logger.info(`Removed distributionChannel from ${totalRemoved} package(s)`);
+                devkit_1.logger.info('');
+                devkit_1.logger.info('ℹ️  Distribution channel for packages can now be inferred from folder paths:');
+                devkit_1.logger.info('   - packages/private/* → "none"');
+                devkit_1.logger.info('   - packages/corp/* → "github"');
+                devkit_1.logger.info('   - packages/public/* → "npm"');
+                devkit_1.logger.info('');
+                devkit_1.logger.info('ℹ️  Runtimes and applications still have distributionChannel property');
+            }
+            else if (schemaUpdated) {
+                devkit_1.logger.info('ℹ️  No distributionChannel properties found in packages.');
+                devkit_1.logger.info('ℹ️  Only schema version was updated.');
+            }
+        }
+        catch (error) {
+            devkit_1.logger.error(`❌ Failed to write .unisphere: ${error instanceof Error ? error.message : 'Unknown error'}`);
+            throw error;
+        }
+    }
+    else {
+        devkit_1.logger.info('ℹ️  No changes needed. Schema already at 2.0.0 and no distributionChannel properties found.');
+    }
+    devkit_1.logger.info('');
+    devkit_1.logger.info('========================================');
+    devkit_1.logger.info('Migration complete');
+    devkit_1.logger.info('========================================');
+    devkit_1.logger.info('');
+}

package/dist/migrations/utils/has-react-dependency.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Check if a project has React dependencies, including transitive dependencies
+ * through workspace projects only.
+ *
+ * Uses Nx's project graph to traverse dependencies. Only traverses into
+ * workspace projects' transitive dependencies, not external npm packages.
+ * This prevents false positives from build tools (like @vitejs/plugin-react)
+ * that have transitive dependencies on react-refresh, react-is, etc.
+ *
+ * @param projectName - The Nx project name to check
+ * @returns true if the project or any transitive workspace dependency depends on React
+ */
+export declare function hasReactDependency(projectName: string): Promise<boolean>;
+//# sourceMappingURL=has-react-dependency.d.ts.map

package/dist/migrations/utils/has-react-dependency.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"has-react-dependency.d.ts","sourceRoot":"","sources":["../../../src/migrations/utils/has-react-dependency.ts"],"names":[],"mappings":"AAmCA;;;;;;;;;;;GAWG;AACH,wBAAsB,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAiC9E"}

package/dist/migrations/utils/has-react-dependency.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasReactDependency = hasReactDependency;
+const devkit_1 = require("@nx/devkit");
+/**
+ * React-related dependency patterns.
+ * Matches actual React ecosystem packages, not workspace projects
+ * that happen to have "react" in their name.
+ */
+function isReactRelatedDependency(dep) {
+    return (
+    // Exact match for "react" package
+    dep === 'react' ||
+        // react-* packages (react-dom, react-is, react-refresh, etc.)
+        dep.startsWith('react-') ||
+        // @types/react packages
+        dep.startsWith('@types/react') ||
+        // @mui/* pattern
+        dep.startsWith('@mui/') ||
+        // @kaltura/ds* pattern
+        dep.startsWith('@kaltura/ds'));
+}
+/**
+ * Extract package name from Nx dependency target.
+ * Handles both workspace projects and npm packages (npm:package-name format).
+ */
+function getPackageName(target, graph) {
+    // Check if it's an external npm package
+    const externalNode = graph.externalNodes?.[target];
+    if (externalNode) {
+        return externalNode.data?.packageName || target.replace(/^npm:/, '');
+    }
+    return target;
+}
+/**
+ * Check if a project has React dependencies, including transitive dependencies
+ * through workspace projects only.
+ *
+ * Uses Nx's project graph to traverse dependencies. Only traverses into
+ * workspace projects' transitive dependencies, not external npm packages.
+ * This prevents false positives from build tools (like @vitejs/plugin-react)
+ * that have transitive dependencies on react-refresh, react-is, etc.
+ *
+ * @param projectName - The Nx project name to check
+ * @returns true if the project or any transitive workspace dependency depends on React
+ */
+async function hasReactDependency(projectName) {
+    const graph = await (0, devkit_1.createProjectGraphAsync)();
+    const visited = new Set();
+    function traverse(current) {
+        if (visited.has(current)) {
+            return false;
+        }
+        visited.add(current);
+        const deps = graph.dependencies[current] || [];
+        for (const dep of deps) {
+            const packageName = getPackageName(dep.target, graph);
+            if (isReactRelatedDependency(packageName)) {
+                return true;
+            }
+            // Only recursively check dependencies for workspace projects, not external npm packages.
+            // External npm packages (like @vitejs/plugin-react, vitest) have their own transitive deps
+            // (like react-refresh, react-is) which are build tools, not actual runtime dependencies.
+            const isDepExternal = !!graph.externalNodes?.[dep.target];
+            if (!isDepExternal && traverse(dep.target)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    return traverse(projectName);
+}

package/dist/shared.d.ts

@@ -0,0 +1,6 @@
+export declare enum PackagesScopes {
+    'unisphere' = "unisphere",
+    'kaltura-ai' = "kaltura-ai",
+    'kaltura-corp' = "kaltura-corp"
+}
+//# sourceMappingURL=shared.d.ts.map

package/dist/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../src/shared.ts"],"names":[],"mappings":"AAAA,oBAAY,cAAc;IACtB,WAAW,cAAc;IACzB,YAAY,eAAe;IAC3B,cAAc,iBAAiB;CAClC"}

package/dist/shared.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PackagesScopes = void 0;
+var PackagesScopes;
+(function (PackagesScopes) {
+    PackagesScopes["unisphere"] = "unisphere";
+    PackagesScopes["kaltura-ai"] = "kaltura-ai";
+    PackagesScopes["kaltura-corp"] = "kaltura-corp";
+})(PackagesScopes || (exports.PackagesScopes = PackagesScopes = {}));

package/generators.json

@@ -24,6 +24,17 @@
       "factory": "./dist/generators/rename-package/rename-package",
       "schema": "./dist/generators/rename-package/schema.json",
       "description": "Rename a unisphere package and update all references"
+    },
+    "remove": {
+      "factory": "./dist/generators/remove/remove",
+      "schema": "./dist/generators/remove/schema.json",
+      "aliases": ["rm"],
+      "description": "Remove a unisphere element (package, runtime, or application)"
+    },
+    "internal-dev-runner": {
+      "factory": "./dist/generators/internal-dev-runner/generator",
+      "schema": "./dist/generators/internal-dev-runner/schema.json",
+      "description": "Internal-dev-runner - Run a migration for testing purposes (dev only)"
     }
   }
-}
+}

package/migrations.json

@@ -169,6 +169,112 @@
         "postUpdateMessage": "✅ GitHub workflow updated with some changes."
       }
     },
+    "3-0-0-pre-cleanup-empty-directories": {
+      "version": "3.0.0",
+      "description": "Cleans up empty directories before reorganization migrations",
+      "factory": "./dist/migrations/3-0-0/pre-cleanup-empty-directories.js"
+    },
+    "3-0-0-reorganize-packages-by-distribution-channel": {
+      "version": "3.0.0",
+      "description": "Reorganizes packages into private/, corp/, and public/ subdirectories based on distributionChannel. Also renames 'core' package to 'types' if it exists.",
+      "factory": "./dist/migrations/3-0-0/reorganize-packages-by-distribution-channel.js",
+      "cli": {
+        "postUpdateMessage": "✅ Packages reorganized by distribution channel. 'core' renamed to 'types' if present. Run npm install."
+      }
+    },
+    "3-0-0-reorganize-applications-by-distribution-channel": {
+      "version": "3.0.0",
+      "description": "Reorganizes applications into local/ and server/ subdirectories based on distributionChannel.",
+      "factory": "./dist/migrations/3-0-0/reorganize-applications-by-distribution-channel.js",
+      "cli": {
+        "postUpdateMessage": "✅ Applications reorganized by distribution channel into local/ and server/ subdirectories. Run npm install."
+      }
+    },
+    "3-0-0-upgrade-schema-to-2-0-0": {
+      "version": "3.0.0",
+      "description": "Upgrades .unisphere schema to 2.0.0 and removes distributionChannel from packages",
+      "factory": "./dist/migrations/3-0-0/upgrade-schema-to-2-0-0.js",
+      "cli": {
+        "postUpdateMessage": "✅ .unisphere upgraded to schema 2.0.0"
+      }
+    },
+    "3-0-0-update-changeset-patch": {
+      "version": "3.0.0",
+      "description": "Updates @changesets/cli patch to filter runtime packages from major bump selection",
+      "factory": "./dist/migrations/3-0-0/update-changeset-patch.js",
+      "cli": {
+        "postUpdateMessage": "✅ @changesets/cli patch updated"
+      }
+    },
+    "3-0-0-add-env-to-application-gitignore": {
+      "version": "3.0.0",
+      "description": "Adds .env to .gitignore files for all elements (applications, packages, runtimes, etc.)",
+      "factory": "./dist/migrations/3-0-0/add-env-to-application-gitignore.js",
+      "cli": {
+        "postUpdateMessage": "✅ .env added to .gitignore files for all elements"
+      }
+    },
+    "3-0-0-add-define-plugin-to-webpack": {
+      "version": "3.0.0",
+      "description": "Adds DefinePlugin to application webpack configs and creates .env-template",
+      "factory": "./dist/migrations/3-0-0/add-define-plugin-to-webpack.js",
+      "cli": {
+        "postUpdateMessage": "✅ DefinePlugin added to webpack configs and .env-template files created"
+      }
+    },
+    "3-0-0-replace-github-workflow": {
+      "version": "3.0.0",
+      "description": "Updates GitHub workflow files (cicd.yml and _publish-artifacts.yml)",
+      "factory": "./dist/migrations/3-0-0/replace-github-workflow.js",
+      "cli": {
+        "postUpdateMessage": "✅ GitHub workflow files updated"
+      }
+    },
+    "3-0-0-remove-publish-config-from-packages": {
+      "version": "3.0.0",
+      "description": "Removes publishConfig from package.json files in packages",
+      "factory": "./dist/migrations/3-0-0/remove-publish-config-from-packages.js",
+      "cli": {
+        "postUpdateMessage": "✅ publishConfig removed from package.json files"
+      }
+    },
+    "3-0-0-remove-private-from-applications-and-runtimes": {
+      "version": "3.0.0",
+      "description": "Removes private field from package.json files in applications, runtimes, and packages",
+      "factory": "./dist/migrations/3-0-0/remove-private-from-applications-and-runtimes.js",
+      "cli": {
+        "postUpdateMessage": "✅ private field removed from applications, runtimes, and packages package.json files"
+      }
+    },
+    "3-0-0-fix-vite-config-cache-paths": {
+      "version": "3.0.0",
+      "description": "Fixes vite.config.ts cache directory paths to match package names",
+      "factory": "./dist/migrations/3-0-0/fix-vite-config-cache-paths.js",
+      "cli": {
+        "postUpdateMessage": "✅ vite.config.ts cache paths fixed"
+      }
+    },
+    "3-0-0-post-cleanup-empty-directories": {
+      "version": "3.0.0",
+      "description": "Cleans up empty directories after all reorganization migrations",
+      "factory": "./dist/migrations/3-0-0/post-cleanup-empty-directories.js",
+      "cli": {
+        "postUpdateMessage": "✅ Empty directories cleaned up"
+      }
+    },
+    "3-0-0-sync-package-lock": {
+      "version": "3.0.0",
+      "description": "Runs npm install to sync package-lock.json after all migrations",
+      "factory": "./dist/migrations/3-0-0/sync-package-lock.js",
+      "cli": {
+        "postUpdateMessage": "✅ package-lock.json synced"
+      }
+    },
+    "3-0-0-remove-pre-install": {
+      "version": "3.0.0",
+      "description": "Removes kaltura-tools preinstall script from package.json",
+      "factory": "./dist/migrations/3-0-0/remove-kaltura-tools-to-pre-install.js",
+    }
   },
   "packageJsonUpdates": {
     "1.22.0": {
@@ -312,6 +418,17 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "3.0.0": {
+      "version": "3.0.0",
+      "cli": "nx",
+      "postUpdateMessage": "🎉 Migration to @unisphere/nx 3.0.0 finished!\n\nPackages reorganized by distribution channel:\n- private/ for distributionChannel: none (@local/)\n- corp/ for distributionChannel: github (@unisphere-corp/)\n- public/ for distributionChannel: npm (@unisphere/)",
+      "packages": {
+        "@unisphere/cli": {
+          "version": "2.4.2",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@unisphere/nx",
-  "version": "2.2.2",
+  "version": "3.2.3",
   "private": false,
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   },
   "repository": {
     "type": "git",

package/dist/generators/add-application/templates/local-dev-playground/.babelrc

@@ -1,11 +0,0 @@
-{
-  "presets": [
-    [
-      "@nx/react/babel",
-      {
-        "runtime": "automatic"
-      }
-    ]
-  ],
-  "plugins": []
-}

package/dist/generators/add-application/templates/local-dev-playground/.eslintrc.json

@@ -1,22 +0,0 @@
-{
-  "extends": ["plugin:@nx/react", "../../../.eslintrc.json"],
-  "ignorePatterns": [
-    "!**/*",
-    "**/vite.config.*.timestamp*",
-    "**/vitest.config.*.timestamp*"
-  ],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
-    }
-  ]
-}

package/dist/generators/add-application/templates/local-dev-playground/jest.config.ts

@@ -1,11 +0,0 @@
-/* eslint-disable */
-export default {
-  displayName: 'admin',
-  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',
-};

package/dist/generators/add-application/templates/local-dev-playground/package.json

@@ -1,6 +0,0 @@
-{
-  "name": "unisphere-application-<%= applicationName__lowerDashCase %>",
-  "version": "1.0.0",
-  "private": true,
-  "dependencies": {}
-}

package/dist/generators/add-application/templates/local-dev-playground/project.json

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

package/dist/generators/add-application/templates/local-dev-playground/src/app/app.tsx.template

@@ -1,212 +0,0 @@
-import { useContext, useState } from 'react';
-import { HostThemeProvider } from '@kaltura/ds-react-theme';
-import { Box } from '@mui/material';
-import { ConfigurationContext } from './configuration-provider';
-import { isConfigurationValid } from './definitions';
-import { Header } from './components/header';
-import { ConfigurationProvider } from './configuration-provider';
-import { UnisphereProvider, UnisphereRuntimeVisual } from '@unisphere/runtime-react';
-import { UnisphereWorkspaceConfig } from '@unisphere/runtime';
-import { UnisphereWorkspaceType } from '@unisphere/runtime';
-import { <%= runtimeName__pascalCase %>Runtime } from '<%= typesAlias %>';
-
-
-const Hihi: React.FC = () => {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: '100vh',
-        padding: '2rem',
-        backgroundColor: '#f9f9f9',
-        color: '#333',
-        fontFamily: 'sans-serif',
-        textAlign: 'center',
-      }}
-    >
-      <h1
-        style={{
-          fontSize: '1.5rem',
-        }}
-      >
-        Hihi :)
-      </h1>
-
-      <h2
-        style={{
-          fontSize: '1.0rem',
-          marginBottom: '1rem',
-        }}
-      >
-        No visuals are mounted yet
-      </h2>
-
-      <p
-        style={{
-          fontSize: '1rem',
-          maxWidth: '400px',
-          lineHeight: 1.4,
-          marginBottom: '2rem',
-        }}
-      >
-        You haven’t created a runtime visual or just didn't mount it in the Dev
-        application. Once you add one, open{' '}
-        <span
-          style={{
-            backgroundColor: '#eaeaea',
-            padding: '0.2rem 0.4rem',
-            borderRadius: '4px',
-            fontFamily: 'monospace',
-          }}
-        >
-          app.tsx
-        </span>{' '}
-        and uncomment the{' '}
-        <span
-          style={{
-            backgroundColor: '#eaeaea',
-            padding: '0.2rem 0.4rem',
-            borderRadius: '4px',
-            fontFamily: 'monospace',
-          }}
-        >
-          &lt;UnisphereRuntimeVisual /&gt;
-        </span>{' '}
-        component to see it render here.
-      </p>
-
-      <pre
-        style={{
-          backgroundColor: '#fff',
-          padding: '1rem',
-          border: '1px solid #ddd',
-          borderRadius: '4px',
-          overflowX: 'auto',
-          fontFamily: 'monospace',
-          textAlign: 'left',
-        }}
-      >
-        {`<UnisphereRuntimeVisual
-  widgetName="unisphere.widget.<%= widgetName__lowerDashCase %>"
-  runtimeName="<%= runtimeName__lowerDashCase %>"
-  visualType="-- provide here the visual name --"
-  visualSettings={{  }}
-/>`}
-      </pre>
-    </div>
-  );
-};
-
-export function AppContent() {
-  const { configuration } = useContext(ConfigurationContext);
-
-  const [workspace, setWorkspace] = useState<UnisphereWorkspaceType | null>(
-    null
-  );
-  const [runtime, setRuntime] = useState<<%= runtimeName__pascalCase %>Runtime | null>(null);
-
-  const [initialConfiguration] = useState<UnisphereWorkspaceConfig | null>(
-    () => {
-      /*
-      Developer Note:
-      The Dev app lets you provide runtime configuration as a JSON object that matches the same schema used in your production or staging environments.
-
-      •	If the runtime is already active in production or staging:
-        1.	Open Unisphere (Cmd + K) and choose Manage Workspace Runtimes.
-        2.	Locate your runtime, click the ••• (Actions) menu, and select Copy Settings.
-        3. Open the Dev app in the browser, in the header click on the settings icon and paste the JSON into the settings field.
-        4. Use the Save button to persist your settings. They’ll be stored in local storage and automatically loaded the next time the app runs.
-
-      •	If the runtime isn’t yet in use:
-        1.	Manually create a JSON payload that conforms to your runtime’s schema.
-        2. Open the Dev app in the browser, in the header click on the settings icon and paste the JSON into the settings field.
-        3. Use the Save button to persist your settings. They’ll be stored in local storage and automatically loaded the next time the app runs.
-      */
-
-      try {
-        if (!isConfigurationValid(configuration)) {
-          return null;
-        }
-
-        return {
-          appId: '<%= runtimeName__lowerDashCase %>',
-          appVersion: '1.0.0',
-          serverUrl: configuration.unisphereServerUrl,
-          ui: {
-            theme: configuration.theme,
-            language: configuration.language,
-          },
-          runtimes: [
-            {
-              widgetName: 'unisphere.widget.<%= widgetName__lowerDashCase %>',
-              runtimeName: '<%= runtimeName__lowerDashCase %>',
-              settings: JSON.parse(configuration.settings),
-              visuals: [],
-            },
-          ],
-        };
-      } catch (e) {
-        console.error('Failed to parse settings', e);
-        return null;
-      }
-    }
-  );
-
-  const onWorkspaceLoaded = (workspace: UnisphereWorkspaceType) => {
-    setWorkspace(workspace);
-    const runtime = workspace.getRuntime<<%= runtimeName__pascalCase %>Runtime>(
-      'unisphere.widget.<%= widgetName__lowerDashCase %>',
-      '<%= runtimeName__lowerDashCase %>'
-    );
-    setRuntime(runtime);
-  };
-
-  return (
-    <Box
-      sx={{
-        width: '100vw',
-        height: '100vh',
-        overflow: 'hidden',
-        padding: '12px 24px',
-      }}
-    >
-      <HostThemeProvider
-        overrides={{
-          mode: configuration.theme,
-        }}
-      >
-        <Box sx={{ height: '100vh', width: '100vw', pt: '64px' }}>
-          <Header />
-          {initialConfiguration && (
-            <UnisphereProvider
-              onWorkspaceLoaded={onWorkspaceLoaded}
-              initialConfiguration={initialConfiguration}
-            >
-              <Hihi />
-
-              {/* <UnisphereRuntimeVisual
-                widgetName="unisphere.widget.<%= widgetName__lowerDashCase %>"
-                runtimeName="<%= runtimeName__lowerDashCase %>"
-                visualType="-- provide here the visual name --"
-                visualSettings={{ }}
-              /> */}
-            </UnisphereProvider>
-          )}
-        </Box>
-      </HostThemeProvider>
-    </Box>
-  );
-}
-
-const App = () => {
-  return (
-    <ConfigurationProvider configurationKey="unisphere-<%= widgetName__lowerDashCase %>-<%= runtimeName__lowerDashCase %>-dev">
-      <AppContent />
-    </ConfigurationProvider>
-  );
-};
-
-export default App;