@reveldigital/gadgetizer 1.0.0

package/README.md

@@ -0,0 +1,126 @@
+# 🚀 Revel Digital Gadgetizer
+
+A command-line tool for integrating the Revel Digital client SDK into existing Angular, Vue, React, or vanilla JavaScript projects. This tool automates the setup process and generates the necessary configuration files for deploying your application as a Revel Digital gadget.
+
+## 📦 Installation
+
+Install globally via npm:
+
+```bash
+npm install -g @reveldigital/gadgetizer
+```
+
+Or use directly with npx:
+
+```bash
+npx @reveldigital/gadgetizer
+```
+
+## 🎯 Usage
+
+Navigate to your existing project directory and run:
+
+```bash
+gadgetizer
+```
+
+The tool will guide you through the setup process with interactive prompts.
+
+### Command Options
+
+- `--help`, `-h` - Show help message
+- `--build-only` - Run only the XML build step (skips SDK installation)
+
+### Examples
+
+Basic usage:
+```bash
+cd my-react-app
+gadgetizer
+```
+
+Build XML only (useful for CI/CD):
+```bash
+gadgetizer --build-only
+```
+
+Show help:
+```bash
+gadgetizer --help
+```
+
+## ⚡ What It Does
+
+The Gadgetizer tool performs the following actions based on your project type:
+
+### For Angular Projects
+- Installs `@reveldigital/player-client@latest`
+- Runs the Angular schematic: `ng add @reveldigital/player-client@latest`
+
+### For React, Vue, and Vanilla JavaScript Projects
+- Copies `gadget.yaml` configuration file to your project root (if not already present)
+- Prompts for deployment URL configuration
+- Installs the following dependencies:
+  - `@reveldigital/client-sdk`
+  - `@reveldigital/gadget-types`
+- Adds a `build:gadget` script to your `package.json`
+- Generates XML gadget configuration file in your build directory
+
+## 📁 Project Structure
+
+After running the tool, your project will have:
+
+- 📄 `gadget.yaml` - Gadget configuration file
+- 📦 Updated `package.json` with Revel Digital dependencies
+- 🛠️ `build:gadget` npm script for regenerating the gadget XML
+- 🗂️ Generated XML file in your build/dist directory
+
+## ⚙️ Configuration
+
+The `gadget.yaml` file contains metadata about your gadget:
+
+```yaml
+title: My Gadget
+title_url: https://mysupporturl.org
+description: Describe the purpose of your gadget here
+author: My Organization
+background: transparent
+
+requirements:
+  - reveldigital
+  - offline
+  - webfont
+
+prefs:
+  - name: myStringPref
+    display_name: Sample string preference
+    datatype: string
+    default_value: test string
+    required: true
+```
+
+Edit this file to customize your gadget's properties and user preferences.
+
+## 🛠️ Supported Frameworks
+
+- **Angular** - Uses the official Revel Digital Angular schematic
+- **React** - Instruments with client SDK and generates gadget configuration
+- **Vue** - Instruments with client SDK and generates gadget configuration  
+- **Vanilla JavaScript** - Instruments with client SDK and generates gadget configuration
+
+## 📚 Revel Digital Client SDK
+
+For more information about the Revel Digital client SDK, including API documentation and examples, visit:
+https://www.npmjs.com/package/@reveldigital/client-sdk
+
+
+## 📜 License
+
+ISC
+
+## 🤝 Support
+
+For issues and questions:
+- File an issue on this repository
+- Visit the Revel Digital documentation at https://developer.reveldigital.com
+- Check the client SDK documentation at https://www.npmjs.com/package/@reveldigital/client-sdk

package/cli.js

@@ -0,0 +1,255 @@
+#!/usr/bin/env node
+
+import { confirm, intro, outro, select, text } from '@clack/prompts';
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+import pc from 'picocolors';
+import { getDeploymentUrl } from './utils/changeBasePath.js';
+import { convertYmlToXml } from './utils/yml2xml.js';
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+//const __filename = fileURLToPath(import.meta.url);
+//const __filename = fileURLToPath(process.cwd());
+//const __dirname = path.dirname(__filename);
+const __dirname = dirname(process.argv[1]);
+
+// Parse command line arguments
+const args = process.argv.slice(2);
+const showHelp = args.includes('help') || args.includes('--help') || args.includes('-h');
+const buildOnly = args.includes('build-only') || args.includes('--build-only');
+const projectPath = process.cwd();
+
+intro(pc.cyan('🚀 Revel Digital SDK Integrator'));
+
+if (showHelp) {
+    outro(pc.cyan(`
+Usage: gadgetizer [options]
+
+Options:
+    --help, -h         Show this help message
+    --build-only       Run only the Gadget XML build step
+
+Description:
+    Integrates the Revel Digital SDK into your project and generates gadget XML.
+    Supports React, Vue, Angular, and vanilla JavaScript projects.
+`));
+    process.exit(0);
+}
+
+if (buildOnly) {
+    build({ projectPath: process.cwd(), __dirname });
+    process.exit(0);
+}
+
+const framework = await select({
+    message: 'Select your project framework:',
+    options: [
+        { value: 'react', label: 'React' },
+        { value: 'vue', label: 'Vue' },
+        { value: 'angular', label: 'Angular' },
+        { value: 'js', label: 'Vanilla JavaScript' }
+    ]
+});
+
+let entryFile = '';
+switch (framework) {
+    case 'react':
+        entryFile = fs.existsSync(path.join(projectPath, 'src', 'App.js')) ? path.join('src', 'App.js') : '';
+        break;
+    case 'vue':
+        entryFile = fs.existsSync(path.join(projectPath, 'src', 'App.vue')) ? path.join('src', 'App.vue') : '';
+        break;
+    case 'angular':
+        entryFile = fs.existsSync(path.join(projectPath, 'src', 'main.ts')) ? path.join('src', 'main.ts') : '';
+        break;
+    case 'js':
+        entryFile = fs.existsSync(path.join(projectPath, 'src', 'main.js')) ? path.join('src', 'main.js') : '';
+        break;
+}
+if (!entryFile) {
+    outro(pc.yellow(`⚠️ Could not automatically detect the main entry file for ${framework}. Please manually instrument your app with the Revel Digital SDK.`));
+}
+
+const pkgPath = path.join(projectPath, 'package.json');
+if (!fs.existsSync(pkgPath)) {
+    outro(pc.red('❌ No package.json found in this directory. Please run this tool from your project root.'));
+    process.exit(1);
+}
+
+if (framework === 'angular') { // Angular uses schematic for integration
+    outro(pc.cyan('📦 Installing @reveldigital/player-client and running ng add schematic...'));
+    try {
+        execSync('npm install @reveldigital/player-client@latest', { stdio: 'inherit' });
+        execSync('ng add @reveldigital/player-client@latest', { stdio: 'inherit' });
+        outro(pc.green('✅ Angular project successfully instrumented with Revel Digital Player Client.'));
+        process.exit(0);
+    } catch (err) {
+        outro(pc.red('❌ Error instrumenting Angular project. Please check your Angular CLI and npm setup.'));
+        process.exit(1);
+    }
+}
+
+
+// All other frameworks utilize SDK package installation
+// Copy gadget.yaml to project root
+const sourceYaml = path.join(__dirname, 'assets', 'gadget.yaml');
+const destYaml = path.join(projectPath, 'gadget.yaml');
+if (!fs.existsSync(destYaml)) {
+    try {
+        fs.copyFileSync(sourceYaml, destYaml);
+        outro(pc.green('📄 gadget.yaml copied to project root.'));
+    } catch (err) {
+        outro(pc.red('❌ Failed to copy gadget.yaml to project root. Please copy it manually.'));
+    }
+} else {
+    outro(pc.yellow('⚠️ gadget.yaml already exists in project root. Skipping copy.'));
+}
+
+
+// Prompt for deployment URL
+let defaultDeploymentUrl = '';
+try {
+    defaultDeploymentUrl = await getDeploymentUrl(pkgPath);
+    outro(pc.cyan(`🌎 Configuring gadget deployment URL based on Git: ${defaultDeploymentUrl}`));
+} catch (e) {
+    defaultDeploymentUrl = '';
+    outro(pc.yellow(`⚠️ Warning: Could not get deployment URL automatically.`));
+}
+const deploymentUrl = await text({
+    message: 'Enter the deployment URL:',
+    initialValue: defaultDeploymentUrl
+});
+
+// Prompt for SDK version
+const sdkVersion = await select({
+    message: 'Select Revel Digital SDK version to install:',
+    options: [
+        { value: 'latest', label: 'Latest' },
+        { value: 'custom', label: 'Custom version' }
+    ]
+});
+
+let customVersion = '';
+if (sdkVersion === 'custom') {
+    customVersion = await text({
+        message: 'Enter the custom SDK version:'
+    });
+}
+
+const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+
+const shouldInstall = await confirm({
+    message: `Install Revel Digital SDK (${sdkVersion === 'custom' ? customVersion : sdkVersion})?`
+});
+if (shouldInstall) {
+    // Add SDK to package.json dependencies
+    pkg.dependencies = pkg.dependencies || {};
+    const gadgetTypesPkgName = '@reveldigital/gadget-types';
+    pkg.dependencies[gadgetTypesPkgName] = 'latest';
+    const sdkPkgName = '@reveldigital/client-sdk';
+    const versionToInstall = sdkVersion === 'custom' ? customVersion : sdkVersion;
+    pkg.dependencies[sdkPkgName] = versionToInstall === 'latest' ? 'latest' : versionToInstall;
+    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+
+    outro(pc.cyan(`🎉 Revel Digital SDK (${versionToInstall}) added to dependencies.`));
+
+    try {
+        execSync('npm install', { stdio: 'inherit' });
+        outro(pc.green('📦 npm install completed successfully.'));
+    } catch (err) {
+        outro(pc.red('❌ npm install failed. Please run it manually.'));
+    }
+}
+
+// For Vue or Vite projects, set the base path in their respective configs
+const viteConfigJsPath = path.join(projectPath, 'vite.config.js');
+const viteConfigTsPath = path.join(projectPath, 'vite.config.ts');
+const vueConfigPath = path.join(projectPath, 'vue.config.js');
+
+let viteConfigPath = '';
+if (fs.existsSync(viteConfigJsPath)) {
+    viteConfigPath = viteConfigJsPath;
+} else if (fs.existsSync(viteConfigTsPath)) {
+    viteConfigPath = viteConfigTsPath;
+}
+
+if (viteConfigPath) {
+    try {
+        let content = fs.readFileSync(viteConfigPath, 'utf8');
+        if (/\bbase\s*:/.test(content)) {
+            content = content.replace(/(\bbase\s*:\s*['"])[^'"]*(['"])/, `$1${deploymentUrl}$2`);
+            outro(pc.yellow(`🔧 Updated "base" in ${path.basename(viteConfigPath)}.`));
+        } else if (content.includes('defineConfig({')) {
+            content = content.replace(/(defineConfig\({)/, `$1\n  base: '${deploymentUrl}',`);
+            outro(pc.green(`🔧 Added "base" to ${path.basename(viteConfigPath)}.`));
+        }
+        fs.writeFileSync(viteConfigPath, content);
+    } catch (err) {
+        outro(pc.red(`❌ Failed to update ${path.basename(viteConfigPath)}. Please set the "base" property manually.`));
+    }
+} else if (fs.existsSync(vueConfigPath)) {
+    try {
+        let content = fs.readFileSync(vueConfigPath, 'utf8');
+        if (/\bpublicPath\s*:/.test(content)) {
+            content = content.replace(/(\bpublicPath\s*:\s*['"])[^'"]*(['"])/, `$1${deploymentUrl}$2`);
+            outro(pc.yellow('🔧 Updated "publicPath" in vue.config.js.'));
+        } else if (content.includes('module.exports = {')) {
+            content = content.replace(/(module.exports = {)/, `$1\n  publicPath: '${deploymentUrl}',`);
+            outro(pc.green('🔧 Added "publicPath" to vue.config.js.'));
+        }
+        fs.writeFileSync(vueConfigPath, content);
+    } catch (err) {
+        outro(pc.red('❌ Failed to update vue.config.js. Please set the "publicPath" property manually.'));
+    }
+}
+
+// For plain JS projects, check if Parcel is used and configure publicUrl
+const isParcel = (pkg.dependencies && pkg.dependencies.parcel) || (pkg.devDependencies && pkg.devDependencies.parcel);
+if (isParcel) {
+    pkg.targets = pkg.targets || {};
+    pkg.targets.default = pkg.targets.default || {};
+    pkg.targets.default.publicUrl = deploymentUrl;
+    outro(pc.green('🔧 Set "targets.default.publicUrl" in package.json for Parcel.'));
+}
+
+pkg.scripts = pkg.scripts || {};
+pkg.scripts['build:gadget'] = 'npm run build && gadgetizer --build-only';
+fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+outro(pc.green('🔧 Added "build:gadget" script to package.json.'));
+
+
+build({ projectPath, __dirname });
+
+
+function build({ projectPath, __dirname }) {
+    const pkgPath = path.join(projectPath, 'package.json');
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+    const destYaml = path.join(projectPath, 'gadget.yaml');
+    const htmlCandidates = [
+        path.join(projectPath, 'dist', 'index.html'),
+        path.join(projectPath, 'public', 'index.html'),
+    ];
+    let foundHtml = '';
+    for (const candidate of htmlCandidates) {
+        if (fs.existsSync(candidate)) {
+            foundHtml = candidate;
+            break;
+        }
+    }
+    if (!foundHtml) {
+        outro(pc.red('❌ index.html not found in public/, src/, or project root. Please add it and re-run the tool.'));
+        process.exit(1);
+    }
+    const distDir = path.join(path.dirname(foundHtml));
+    //const yml2xmlPath = path.join(__dirname, 'utils', 'yml2xml.js');
+    try {
+        const outputXmlName = `${pkg.name}.xml`;
+        convertYmlToXml(destYaml, foundHtml, path.join(distDir, outputXmlName), pkg.version);
+        //execSync(`node "${yml2xmlPath}" "${destYaml}" "${foundHtml}" "${path.join(distDir, outputXmlName)}" "${pkg.version}"`, { encoding: 'utf8' });
+        outro(pc.green(`✅ Gadget XML file "${outputXmlName}" generated in dist folder.`));
+    } catch (err) {
+        outro(pc.red('❌ Failed to generate XML file. Please check yml2xml.js and your input files.'));
+    }
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@reveldigital/gadgetizer",
+  "version": "1.0.0",
+  "description": "Add Revel Digital SDK bindings to your project and configure for deployment",
+  "main": "cli.js",
+  "type": "module",
+  "bin": {
+    "gadgetizer": "dist/cli.js"
+  },
+  "files": [
+    "/dist"
+  ],
+  "scripts": {
+    "build": "parcel build cli.js --target node && shx cp -r assets dist/",
+    "start": "node ./dist/main.js",
+    "link": "npm link",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "targets": {
+    "node": {
+      "context": "node",
+      "includeNodeModules": true,
+      "outputFormat": "esmodule",
+      "engines": {
+        "node": ">=20"
+      }
+    }
+  },
+  "author": "Revel Digital Worldwide Operations",
+  "license": "ISC",
+  "dependencies": {
+    "@types/node": "^24.3.1",
+    "@clack/prompts": "^0.11.0",
+    "git-remote-origin-url": "4.0.0",
+    "js-yaml": "4.1.0",
+    "node-html-parser": "7.0.1",
+    "picocolors": "^1.0.0",
+    "xmlbuilder2": "3.1.1"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.2",
+    "parcel": "^2.15.4"
+  },
+  "release": {
+    "branches": [
+      "main"
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      "@semantic-release/npm",
+      "@semantic-release/github"
+    ]
+  }
+}