@unisphere/nx 1.0.1

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

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addRuntimeGenerator = addRuntimeGenerator;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const path = tslib_1.__importStar(require("path"));
+const utils_1 = require("../utils");
+const add_package_1 = require("../add-package/add-package");
+const add_application_1 = require("../add-application/add-application");
+function updateCoreIndexExport(tree, runtimeName) {
+    const coreIndexPath = 'unisphere/packages/core/src/index.ts';
+    if (!tree.exists(coreIndexPath)) {
+        throw new Error(`Core index file not found at ${coreIndexPath}`);
+    }
+    const currentContent = tree.read(coreIndexPath, 'utf-8');
+    if (!currentContent) {
+        throw new Error(`Failed to read content from ${coreIndexPath}`);
+    }
+    const exportLine = `export * from './lib/${runtimeName}-runtime/runtime-types';`;
+    // Check if the export already exists
+    if (currentContent.includes(exportLine)) {
+        return; // Already exported
+    }
+    // Add the export at the end of the file
+    const updatedContent = currentContent + '\n' + exportLine;
+    tree.write(coreIndexPath, updatedContent);
+}
+async function addRuntimeGenerator(tree, options) {
+    // Validate and read .unisphere configuration
+    const unisphereConfig = (0, utils_1.validateUnisphereConfig)(tree);
+    // Extract environment variables
+    const companyName = unisphereConfig.company;
+    const widgetName = unisphereConfig.name;
+    const userInputRuntimeName = (0, devkit_1.names)(options.name).fileName;
+    const coreAlias = (0, utils_1.findCorePackageAlias)(tree);
+    // Prepare template variables
+    const templateVariables = {
+        companyName,
+        coreAlias,
+        // Add all name transformations
+        ...(0, utils_1.createNameTransforms)(userInputRuntimeName, 'runtimeName'),
+        ...(0, utils_1.createNameTransforms)(widgetName, 'widgetName'),
+        tmpl: '',
+    };
+    const projectRoot = `unisphere/runtimes/${userInputRuntimeName}`;
+    // Check if the runtime already exists
+    if (tree.exists(projectRoot)) {
+        throw new Error(`Runtime "${userInputRuntimeName}" already exists at ${projectRoot}.\n` +
+            'Please choose a different runtime name or remove the existing runtime first.');
+    }
+    // Check if the core runtime types file already exists
+    const coreRuntimeTypesPath = `unisphere/packages/core/src/lib/${userInputRuntimeName}-runtime/runtime-types.ts`;
+    if (tree.exists(coreRuntimeTypesPath)) {
+        throw new Error(`Runtime types file "${userInputRuntimeName}-runtime/runtime-types.ts" already exists in core package.\n` +
+            'Please choose a different runtime name or remove the existing file first.');
+    }
+    // Generate files from templates for the runtime
+    (0, devkit_1.generateFiles)(tree, path.join(__dirname, 'files'), projectRoot, templateVariables);
+    // Generate the runtime types file in the core package using template
+    (0, devkit_1.generateFiles)(tree, path.join(__dirname, 'core-templates'), 'unisphere/packages/core/src/lib', templateVariables);
+    // Update core index.ts to export the new runtime types
+    updateCoreIndexExport(tree, userInputRuntimeName);
+    // Update .unisphere configuration
+    (0, utils_1.updateUnisphereConfig)(tree, 'runtimes', userInputRuntimeName, {
+        sourceRoot: `unisphere/runtimes/${userInputRuntimeName}`,
+        distributionChannel: 'unisphere',
+    });
+    // Update tsconfig.base.json with path mapping
+    const runtimePathKey = `unisphere-runtime-${userInputRuntimeName}`;
+    const runtimePathValue = `unisphere/runtimes/${userInputRuntimeName}/src/index.ts`;
+    (0, utils_1.updateTsConfigPaths)(tree, runtimePathKey, runtimePathValue);
+    // Handle loadedByExternalHost usage - create package and expo application
+    if (options.usage === 'loadedByExternalHost') {
+        // Create a package with the same name as the runtime and distribution set to none
+        const packageResult = await (0, add_package_1.addPackageGenerator)(tree, {
+            packageName: userInputRuntimeName,
+            scope: 'none'
+        });
+        // Execute the package generation callback if it exists
+        if (packageResult && typeof packageResult === 'function') {
+            packageResult();
+        }
+        // Create an expo application without prompts
+        const applicationResult = await (0, add_application_1.addApplicationGenerator)(tree, {
+            name: `${userInputRuntimeName}-expo`,
+            servingType: 'interactive-playground',
+            runtimeName: userInputRuntimeName
+        });
+        // Execute the application generation callback if it exists
+        if (applicationResult && typeof applicationResult === 'function') {
+            applicationResult();
+        }
+    }
+    await (0, devkit_1.formatFiles)(tree);
+    // Return a function that will be executed after all file operations are complete
+    return () => {
+        devkit_1.logger.info('');
+        devkit_1.logger.info('✅ Runtime generated successfully!');
+        devkit_1.logger.info('');
+        devkit_1.logger.info(`🚀 Runtime Name: ${userInputRuntimeName}`);
+        devkit_1.logger.info(`📁 Location: ${projectRoot}`);
+        devkit_1.logger.info(`🔧 Usage: ${options.usage}`);
+        if (options.usage === 'loadedByExternalHost') {
+            devkit_1.logger.info('');
+            devkit_1.logger.info('📦 Additional components created:');
+            devkit_1.logger.info(`   • Package: ${userInputRuntimeName} (scope: none)`);
+            devkit_1.logger.info(`   • Expo Application: ${userInputRuntimeName}-expo`);
+        }
+        devkit_1.logger.info('');
+    };
+}
+exports.default = addRuntimeGenerator;

package/dist/generators/add-runtime/core-templates/__runtimeName__-runtime/runtime-types.ts.template

@@ -0,0 +1,21 @@
+import { ValidatorSchema } from '@unisphere/core';
+import { UnisphereRuntimeBaseType } from '@unisphere/runtime';
+import { WidgetName } from '../widget-types';
+
+export const <%= runtimeName__pascalCase %>RuntimeName = '<%= runtimeName__lowerDashCase %>' as const;
+
+export type <%= runtimeName__pascalCase %>Runtime = UnisphereRuntimeBaseType<<%= runtimeName__pascalCase %>RuntimeSettings> & {
+  readonly widgetName: typeof WidgetName;
+  readonly runtimeName: typeof <%= runtimeName__pascalCase %>RuntimeName; 
+};
+
+export interface <%= runtimeName__pascalCase %>RuntimeSettings {
+  schemaVersion?: string;
+}
+
+export const <%= runtimeName__camelCase %>RuntimeSettingsSchema: ValidatorSchema = {
+  type: 'object',
+  properties: {
+    schemaVersion: { type: 'literal', value: '1', optional: true },
+  },
+};

package/dist/generators/add-runtime/files/.babelrc

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

package/dist/generators/add-runtime/files/.eslintrc.json

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

package/dist/generators/add-runtime/files/README.md.template

@@ -0,0 +1 @@
+# Unisphere <%= widgetName__humanReadable %> - Package <%= runtimeName__humanReadable %>

package/dist/generators/add-runtime/files/package.json.template

@@ -0,0 +1,12 @@
+{
+  "name": "unisphere-runtime-<%= runtimeName__lowerDashCase %>",
+  "version": "1.0.0",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}

package/dist/generators/add-runtime/files/project.json.template

@@ -0,0 +1,22 @@
+{
+  "name": "unisphere-runtime-<%= runtimeName__lowerDashCase %>",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "unisphere/runtimes/<%= runtimeName__lowerDashCase %>/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project unisphere-runtime-<%= runtimeName__lowerDashCase %> --web",
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": [
+        "{options.outputFile}"
+      ],
+      "options": {
+        "lintFilePatterns": [
+          "unisphere/runtimes|packages/<%= runtimeName__lowerDashCase %>/src/**/*.{ts,tsx,js,jsx}",
+          "unisphere/runtimes|packages/<%= runtimeName__lowerDashCase %>/package.json"
+        ]
+      }
+    }
+  }
+}

package/dist/generators/add-runtime/files/rollup.config.js

@@ -0,0 +1,6 @@
+const createUnisphereWithNX = require('../../../node_modules/@unisphere/cli/bundler/runtime/rollup.js');
+
+
+module.exports = createUnisphereWithNX({
+  cwd: __dirname,
+})

package/dist/generators/add-runtime/files/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/create-factory';

package/dist/generators/add-runtime/files/src/lib/create-factory.tsx.template

@@ -0,0 +1,21 @@
+import { Root } from 'react-dom/client';
+import { Runtime } from './runtime';
+import { <%= runtimeName__pascalCase %>RuntimeSettings } from '<%= coreAlias %>'
+import {
+  CreateElementOptions,
+  UnisphereElementBase,
+  UnisphereElementFactory,
+} from '@unisphere/runtime-js';
+
+class ContextFactory extends UnisphereElementFactory<
+  <%= runtimeName__pascalCase %>RuntimeSettings,
+  Root
+> {
+  create(
+    options: CreateElementOptions<<%= runtimeName__pascalCase %>RuntimeSettings>
+  ): UnisphereElementBase<<%= runtimeName__pascalCase %>RuntimeSettings, Root> {
+    return new Runtime(options);
+  }
+}
+
+export const createFactory = () => new ContextFactory();

package/dist/generators/add-runtime/files/src/lib/runtime.tsx.template

@@ -0,0 +1,66 @@
+import * as ReactDOM from 'react-dom/client';
+import { Root } from 'react-dom/client';
+import { ThemeProvider } from '@kaltura/ds-react-theme';
+import {
+  CreateElementOptions,
+  UnisphereRuntimeBase,
+} from '@unisphere/runtime-js';
+import {
+  <%= runtimeName__pascalCase %>Runtime,
+  <%= runtimeName__pascalCase %>RuntimeName,
+  <%= runtimeName__pascalCase %>RuntimeSettings,
+  <%= runtimeName__camelCase %>RuntimeSettingsSchema,
+} from '<%= coreAlias %>';
+import {
+  ScopedUnisphereWorkspaceProvider  
+} from '@unisphere/runtime-react';
+import { HtmlDomRuntimeVisual } from '@unisphere/runtime';
+import { WidgetName } from '<%= coreAlias %>'
+
+export class Runtime
+  extends UnisphereRuntimeBase<<%= runtimeName__pascalCase %>RuntimeSettings, Root>
+  implements <%= runtimeName__pascalCase %>Runtime
+{
+  readonly id = WidgetName;
+  readonly runtime = <%= runtimeName__pascalCase %>RuntimeName;
+  readonly widgetName = WidgetName;
+  readonly runtimeName = <%= runtimeName__pascalCase %>RuntimeName;
+
+  protected _onKilled(): void {
+    this._logger.log('runtime killed');
+  }
+
+  constructor(options: CreateElementOptions<<%= runtimeName__pascalCase %>RuntimeSettings>) {
+    super({
+      ...options,
+      settingsSchema: <%= runtimeName__camelCase %>RuntimeSettingsSchema,
+      visualTypes: {},
+    });
+
+    this._logger.log('runtime initialized', {
+      data: {
+        widgetName: this.widgetName,
+        runtimeName: this.runtimeName,
+      },
+    });
+  }
+
+  override _createVisualContainer(htmlElement: HTMLElement): Root {
+    return ReactDOM.createRoot(htmlElement);
+  }
+
+  override _onVisualMount(visual: HtmlDomRuntimeVisual<Root>) {
+    switch (visual.type) {
+      default:
+        return false;
+    }
+  }
+
+  override _onVisualUnmount(visual: HtmlDomRuntimeVisual<Root>) {
+    visual.htmlContainer?.unmount();
+  }
+
+  protected _onSettingsUpdated(settings: <%= runtimeName__pascalCase %>RuntimeSettings) {
+    // remove if not needed
+  }
+}

package/dist/generators/add-runtime/files/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json"
+}

package/dist/generators/add-runtime/files/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "node",
+
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/dist/generators/add-runtime/files/tsconfig.spec.json

@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

package/dist/generators/add-runtime/files/vite.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../../node_modules/.vite/libs/unisphere-context-application',
+
+  plugins: [react(), nxViteTsPaths()],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  test: {
+    watch: false,
+    globals: true,
+    cache: {
+      dir: '../../../node_modules/.vitest/libs/unisphere-context-application',
+    },
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../../coverage/libs/unisphere-context-application',
+      provider: 'v8',
+    },
+  },
+});

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

@@ -0,0 +1,4 @@
+export interface AddRuntimeGeneratorSchema {
+  name: string;
+  usage: 'loadedByExternalHost' | 'embeddedInWidgetPlayground';
+}

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

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "AddRuntime",
+  "title": "Add a new runtime",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The name of the runtime to create",
+      "pattern": "^[a-zA-Z][a-zA-Z0-9\\-\\s]*$",
+      "x-prompt": "What's the runtime name? (letters, numbers, dashes and spaces allowed)"
+    },
+    "usage": {
+      "type": "string",
+      "description": "How will this runtime be used?",
+      "enum": [
+        "loadedByExternalHost",
+        "embeddedInWidgetPlayground"
+      ],
+      "x-prompt": {
+        "message": "How will this runtime be used?",
+        "type": "list",
+        "items": [
+          {
+            "value": "loadedByExternalHost",
+            "label": "Loaded by External Host (creates package + expo playground)"
+          },
+          {
+            "value": "embeddedInWidgetPlayground",
+            "label": "Embedded in Widget Playground (uses existing expo app)"
+          }
+        ]
+      },
+      "enumDescriptions": [
+        "It's loaded by an external host or runtime (it needs its own Expo playground application and package)",
+        "It's part of another runtime in this widget (it will use the same Expo playground application)"
+      ]
+    }
+  },
+  "required": [
+    "name",
+    "usage"
+  ]
+}

package/dist/generators/add-visual/add-visual.d.ts

@@ -0,0 +1,8 @@
+import { Tree } from '@nx/devkit';
+import { AddVisualGeneratorSchema } from './schema';
+/**
+ * Nx generator to create a new visual within a specified runtime.
+ */
+export declare function addVisualGenerator(tree: Tree, options: AddVisualGeneratorSchema): Promise<void>;
+export default addVisualGenerator;
+//# sourceMappingURL=add-visual.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"add-visual.d.ts","sourceRoot":"","sources":["../../../src/generators/add-visual/add-visual.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,IAAI,EAAE,MAAM,YAAY,CAAC;AAqB9D,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AA+RpD;;GAEG;AACH,wBAAsB,kBAAkB,CACtC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,wBAAwB,GAChC,OAAO,CAAC,IAAI,CAAC,CAmEf;AAED,eAAe,kBAAkB,CAAC"}