create-thingworx-widget2 1.0.1

package/README.md

@@ -0,0 +1,76 @@
+# create-thingworx-widget
+
+Scaffold a production-ready **ThingWorx custom widget** project in seconds — just like `npm create vite@latest`.
+
+## Usage
+
+```bash
+npm create thingworx-widget2@latest
+# or
+npx create-thingworx-widget2
+```
+
+The CLI will ask you a few questions (widget name, description, ThingWorx server, chart library, etc.) and generate a complete project folder.
+
+## What gets generated
+
+```
+MyWidget/
+├── src/
+│   ├── MyWidget.ide.js        ← Composer (IDE) behaviour & property definitions
+│   ├── MyWidget.runtime.js    ← Mashup runtime rendering & data handling
+│   ├── MyWidget.ide.css       ← Composer styles
+│   ├── MyWidget.runtime.css   ← Runtime styles
+│   └── echarts.min.js         ← (placeholder if ECharts selected)
+├── build/                     ← Gulp output (gitignored)
+├── zip/                       ← Extension .zip ready for TWX import
+├── metadata.xml               ← ThingWorx extension manifest
+├── gulpfile.js                ← Build pipeline (clean → copy → babel → minify → zip)
+├── package.json
+├── .gitignore
+└── README.md
+```
+
+## Generated npm scripts
+
+| Command | Description |
+|---|---|
+| `npm run build` | Dev build (unminified) → `zip/` |
+| `npm run buildProduction` | Production build (concat + minify) → `zip/` |
+| `npm run upload` | Dev build + upload to ThingWorx |
+| `npm run uploadProduction` | Production build + upload to ThingWorx |
+
+## Publishing to npm
+
+```bash
+npm login
+npm publish --access public
+```
+
+Once published, anyone can run:
+```bash
+npm create thingworx-widget@latest
+```
+
+## Local development / testing
+
+```bash
+# Inside this package folder
+node bin/create-thingworx-widget.js
+
+# Or link globally
+npm link
+create-thingworx-widget
+```
+
+## How the build pipeline works
+
+The Gulp pipeline (`gulpfile.js`) mirrors the proven pattern from the LinearGradientWidget:
+
+1. **`cleanBuildDir`** — wipes `build/`, `zip/`, `lib/`
+2. **`copy`** — copies `src/**` → `build/ui/<PackageName>/` and `metadata.xml` → `build/`
+3. **`prepareBuild`**
+   - Babel transpiles all JS (removes ES module `import`/`export` for TWX compatibility)
+   - In `--p` (production) mode: reads `metadata.xml`, groups JS files by IDE/Runtime, concatenates + minifies with Terser, updates `metadata.xml` references
+   - Zips `build/` → `zip/<PackageName>-dev|min-<version>.zip`
+4. **`upload`** (optional) — POSTs the zip to ThingWorx via the Extension Package Uploader servlet

package/bin/create-thingworx-widget.js

@@ -0,0 +1,804 @@
+#!/usr/bin/env node
+
+"use strict";
+
+const fs   = require("fs");
+const path = require("path");
+const readline = require("readline");
+
+// ─── ANSI colours ────────────────────────────────────────────────────────────
+const c = {
+  reset:  "\x1b[0m",
+  bold:   "\x1b[1m",
+  cyan:   "\x1b[36m",
+  green:  "\x1b[32m",
+  yellow: "\x1b[33m",
+  red:    "\x1b[31m",
+  dim:    "\x1b[2m",
+  blue:   "\x1b[34m",
+};
+
+const log  = (...a) => console.log(...a);
+const info = (msg)  => log(`  ${c.cyan}>${c.reset} ${msg}`);
+const ok   = (msg)  => log(`  ${c.green}✔${c.reset} ${msg}`);
+const warn = (msg)  => log(`  ${c.yellow}!${c.reset} ${msg}`);
+const err  = (msg)  => log(`  ${c.red}✖${c.reset} ${msg}`);
+
+// ─── Banner ───────────────────────────────────────────────────────────────────
+function banner() {
+  log("");
+  log(`${c.bold}${c.blue}  ████████╗██╗  ██╗██╗███╗   ██╗ ██████╗ ██╗    ██╗ ██████╗ ██████╗ ██╗  ██╗${c.reset}`);
+  log(`${c.blue}     ██╔══╝██║  ██║██║████╗  ██║██╔════╝ ██║    ██║██╔═══██╗██╔══██╗╚██╗██╔╝${c.reset}`);
+  log(`${c.blue}     ██║   ███████║██║██╔██╗ ██║██║  ███╗██║ █╗ ██║██║   ██║██████╔╝ ╚███╔╝${c.reset}`);
+  log(`${c.blue}     ██║   ██╔══██║██║██║╚██╗██║██║   ██║██║███╗██║██║   ██║██╔══██╗ ██╔██╗${c.reset}`);
+  log(`${c.blue}     ██║   ██║  ██║██║██║ ╚████║╚██████╔╝╚███╔███╔╝╚██████╔╝██║  ██║██╔╝ ██╗${c.reset}`);
+  log(`${c.blue}     ╚═╝   ╚═╝  ╚═╝╚═╝╚═╝  ╚═══╝ ╚═════╝  ╚══╝╚══╝  ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝${c.reset}`);
+  log("");
+  log(`${c.bold}  Widget Scaffolder${c.reset}  ${c.dim}— Gulp + Babel ${c.reset}`);
+  log("");
+}
+
+// ─── Prompt helper ────────────────────────────────────────────────────────────
+function prompt(rl, question, defaultVal) {
+  return new Promise(resolve => {
+    const hint = defaultVal ? `${c.dim}(${defaultVal})${c.reset} ` : "";
+    rl.question(`  ${c.cyan}?${c.reset} ${question} ${hint}: `, ans => {
+      resolve(ans.trim() || defaultVal || "");
+    });
+  });
+}
+
+function promptSelect(rl, question, choices) {
+  return new Promise(resolve => {
+    log(`  ${c.cyan}?${c.reset} ${question}`);
+    choices.forEach((ch, i) => log(`    ${c.dim}${i + 1}.${c.reset} ${ch}`));
+    rl.question(`  ${c.cyan}  Enter number [1-${choices.length}]${c.reset}: `, ans => {
+      const idx = parseInt(ans.trim(), 10) - 1;
+      resolve(choices[Math.max(0, Math.min(choices.length - 1, isNaN(idx) ? 0 : idx))]);
+    });
+  });
+}
+
+// ─── toPascalCase ─────────────────────────────────────────────────────────────
+function toPascal(str) {
+  return str.replace(/(^\w|-\w)/g, m => m.replace("-", "").toUpperCase());
+}
+
+// ─── File writers (boilerplate matching LinearGradient project) ───────────────
+
+function writePackageJson(root, cfg) {
+  const content = {
+    name:           cfg.packageName.toLowerCase().replace(/\s+/g, "-"),
+    packageName:    cfg.packageName,
+    moduleName:     cfg.moduleName,
+    version:        cfg.version,
+    description:    cfg.description,
+    thingworxServer: cfg.twxServer,
+    thingworxUser:   cfg.twxUser,
+    thingworxPassword: cfg.twxPassword,
+    author:          cfg.author,
+    minimumThingWorxVersion: cfg.minTwxVersion,
+    homepage:        "",
+    autoUpdate:      { gitHubURL: "" },
+    repository:      { type: "git", url: "" },
+    scripts: {
+      test:             "echo \"Error: no test specified\" && exit 1",
+      build:            "gulp",
+      buildProduction:  "gulp --p",
+      upload:           "gulp upload",
+      uploadProduction: "gulp upload --p",
+    },
+    license: "MIT",
+    files: ["lib", "build", "LICENSE"],
+    devDependencies: {
+      "@babel/core":              "^7.0.0-beta.46",
+      "@babel/preset-env":        "^7.0.0-beta.46",
+      "@types/jquery":            "^3.3.1",
+      "@types/node":              "^8.10.11",
+      "gulp":                     "^4.0.2",
+      "gulp-concat":              "^2.6.1",
+      "gulp-terser":              "^1.2.0",
+      "gulp-zip":                 "^5.0.0",
+      "gulp-babel":               "^8.0.0",
+      "babel-plugin-remove-import-export": "^1.1.0",
+      "delete-empty":             "^3.0.0",
+      "del":                      "^5.0.0",
+      "request":                  "^2.85.0",
+      "xml2js":                   "^0.4.19",
+    },
+  };
+  fs.writeFileSync(path.join(root, "package.json"), JSON.stringify(content, null, 4));
+}
+
+function writeMetadataXml(root, cfg) {
+  const wName    = cfg.packageName;
+  const jsIde    = `${cfg.widgetClass}.ide.js`;
+  const jsRuntime= `${cfg.widgetClass}.runtime.js`;
+  const cssIde   = `${cfg.widgetClass}.ide.css`;
+  const cssRuntime=`${cfg.widgetClass}.runtime.css`;
+
+  const libLine = cfg.library === "echarts"
+    ? `\n        <FileResource type="JS" file="echarts.min.js" description="" isDevelopment="false" isRuntime="true"/>\n`
+    : "";
+
+  const content = `<?xml version="1.0" encoding="UTF-8"?>
+<Entities>
+  <ExtensionPackages>
+    <ExtensionPackage
+      name="${wName}"
+      description="${cfg.description}"
+      vendor="${cfg.author}"
+      packageVersion="${cfg.version}"
+      minimumThingWorxVersion="${cfg.minTwxVersion}"
+      buildNumber=""/>
+  </ExtensionPackages>
+
+  <Widgets>
+    <Widget name="${wName}">${libLine}
+      <UIResources>
+
+        <FileResource type="CSS" file="${cssIde}"
+          description="" isDevelopment="true" isRuntime="false"/>
+        <FileResource type="JS"  file="${jsIde}"
+          description="" isDevelopment="true" isRuntime="false"/>
+
+        <FileResource type="CSS" file="${cssRuntime}"
+          description="" isDevelopment="false" isRuntime="true"/>
+        <FileResource type="JS"  file="${jsRuntime}"
+          description="" isDevelopment="false" isRuntime="true"/>
+
+      </UIResources>
+    </Widget>
+  </Widgets>
+</Entities>
+`;
+  fs.writeFileSync(path.join(root, "metadata.xml"), content);
+}
+
+function writeGulpfile(root, cfg) {
+  const content = `const path = require('path');
+const fs = require('fs');
+const xml2js = require('xml2js');
+const del = require('del');
+const deleteEmpty = require('delete-empty');
+
+const { series, src, dest } = require('gulp');
+const zip    = require('gulp-zip');
+const concat = require('gulp-concat');
+const terser = require('gulp-terser');
+const babel  = require('gulp-babel');
+const request = require('request');
+
+const packageJson = require('./package.json');
+
+/** Files to remove from the build. Add paths relative to src/ if needed. */
+const removeFiles = [];
+
+/**
+ * CLI args:
+ *   --p  Production build (concat + minify)
+ *   --l  Library mode (unsupported)
+ */
+const args = (argList => {
+    let arg = {}, a, opt, thisOpt, curOpt;
+    for (a = 0; a < argList.length; a++) {
+        thisOpt = argList[a].trim();
+        opt = thisOpt.replace(/^\\-+/, '');
+        if (opt === thisOpt) { if (curOpt) arg[curOpt] = opt; curOpt = null; }
+        else { curOpt = opt; arg[curOpt] = true; }
+    }
+    return arg;
+})(process.argv);
+
+if (args.l) throw new Error('Argument --l is unsupported for this project.');
+
+const outPath   = \`build/ui/\${packageJson.packageName}\`;
+const libPath   = 'lib';
+const packageKind = args.p ? 'min' : 'dev';
+const zipName   = \`\${packageJson.packageName}-\${packageKind}-\${packageJson.version}.zip\`;
+
+/** Clean build, zip, and lib directories. */
+async function cleanBuildDir(cb) {
+    await del('build');
+    await del('zip');
+    await del('lib');
+
+    const paths = outPath.split('/');
+    for (let i = 1; i < paths.length; i++) {
+        paths[i] = paths[i - 1] + '/' + paths[i];
+    }
+    for (const p of paths) fs.mkdirSync(p);
+
+    await del('zip/**');
+    fs.mkdirSync('zip');
+    cb();
+}
+
+/** Copy src files + metadata.xml into build. */
+function copy(cb) {
+    src('src/**')
+        .pipe(dest(\`\${outPath}/\`))
+        .on('end', () => {
+            fs.copyFileSync('metadata.xml', 'build/metadata.xml');
+            cb();
+        });
+}
+
+/** Transpile, optionally minify, then zip. */
+async function prepareBuild(cb) {
+    if (removeFiles.length) await del(removeFiles.map(f => \`\${outPath}/\${f}\`));
+
+    // Copy npm dependencies declared in package.json "dependencies"
+    for (const dep in (packageJson.dependencies || {})) {
+        const depPkg = require(\`./node_modules/\${dep}/package.json\`);
+        await new Promise(resolve =>
+            src(\`node_modules/\${dep}/\${depPkg.main}\`).pipe(dest(outPath)).on('end', resolve));
+    }
+
+    // Babel transpile (removes ES module import/export for TWX)
+    await new Promise(resolve => {
+        src(\`\${outPath}/**/*.js\`)
+            .pipe(babel({ plugins: ['remove-import-export'] }))
+            .pipe(dest(outPath))
+            .on('end', resolve);
+    });
+
+    if (args.p) {
+        const metadataFile = await new Promise(resolve =>
+            fs.readFile('build/metadata.xml', 'utf8', (e, d) => resolve(d)));
+        const metadataXML  = await new Promise(resolve =>
+            xml2js.parseString(metadataFile, (e, r) => resolve(r)));
+
+        const fileResources = metadataXML.Entities.Widgets[0].Widget[0].UIResources[0].FileResource;
+
+        const fileGroups = [
+            { isDevelopment: true,  isRuntime: true,  extension: 'min'     },
+            { isDevelopment: false, isRuntime: true,  extension: 'runtime' },
+            { isDevelopment: true,  isRuntime: false, extension: 'ide'     },
+        ];
+
+        for (const group of fileGroups) {
+            group.files = fileResources.filter(r => {
+                const include =
+                    (group.isDevelopment  ? r.$.isDevelopment === 'true' : r.$.isDevelopment !== 'true') &&
+                    (group.isRuntime      ? r.$.isRuntime      === 'true' : r.$.isRuntime      !== 'true') &&
+                    r.$.type === 'JS' && !!r.$.file;
+                if (include && !fs.existsSync(\`\${outPath}/\${r.$.file}\`)) {
+                    console.warn(\`Skipping \${outPath}/\${r.$.file} — file not found.\`);
+                    return false;
+                }
+                return include;
+            }).map(r => r.$.file);
+        }
+
+        metadataXML.Entities.Widgets[0].Widget[0].UIResources[0].FileResource =
+            fileResources.filter(r => r.$.type !== 'JS' || !r.$.file);
+
+        for (const group of fileGroups) {
+            if (!group.files.length) continue;
+            const name = \`\${packageJson.packageName}.\${group.extension}\`;
+            await new Promise(resolve => {
+                src(group.files.map(f => \`\${outPath}/\${f}\`))
+                    .pipe(concat(\`\${name}.js\`))
+                    .pipe(terser({ compress: true, mangle: true }))
+                    .pipe(dest(outPath))
+                    .on('end', resolve);
+            });
+            await del(group.files.map(f => \`\${outPath}/\${f}\`));
+            metadataXML.Entities.Widgets[0].Widget[0].UIResources[0].FileResource.push({
+                $: { type: 'JS', file: \`\${name}.js\`, description: '',
+                     isDevelopment: group.isDevelopment.toString(),
+                     isRuntime: group.isRuntime.toString() }
+            });
+        }
+
+        metadataXML.Entities.ExtensionPackages[0].ExtensionPackage[0].$.packageVersion = packageJson.version;
+        metadataXML.Entities.ExtensionPackages[0].ExtensionPackage[0].$.buildNumber    = JSON.stringify(packageJson.autoUpdate);
+
+        const builder = new xml2js.Builder();
+        await new Promise(resolve => fs.writeFile('build/metadata.xml', builder.buildObject(metadataXML), resolve));
+        await deleteEmpty(\`\${outPath}/\`);
+    }
+
+    const zipStream = src('build/**').pipe(zip(zipName)).pipe(dest('zip'));
+    await new Promise(resolve => zipStream.on('end', resolve));
+    cb();
+}
+
+/** Upload extension zip to a ThingWorx server (requires valid credentials in package.json). */
+async function upload(cb) {
+    const host     = packageJson.thingworxServer;
+    const user     = packageJson.thingworxUser;
+    const password = packageJson.thingworxPassword;
+
+    return new Promise((resolve, reject) => {
+        request.post({
+            url: \`\${host}/Thingworx/Subsystems/PlatformSubsystem/Services/DeleteExtensionPackage\`,
+            headers: { 'X-XSRF-TOKEN': 'TWX-XSRF-TOKEN-VALUE', Accept: 'application/json',
+                       'Content-Type': 'application/json', 'X-THINGWORX-SESSION': 'true' },
+            body: { packageName: packageJson.packageName },
+            json: true,
+        }, function (err, httpResponse, body) {
+            const formData = { file: fs.createReadStream(path.join('zip', zipName)) };
+            request.post({
+                url: \`\${host}/Thingworx/ExtensionPackageUploader?purpose=import\`,
+                headers: { 'X-XSRF-TOKEN': 'TWX-XSRF-TOKEN-VALUE' },
+                formData,
+            }, function (err2, resp2) {
+                if (err2) { reject(err2); return; }
+                if (resp2.statusCode !== 200) {
+                    reject(\`Upload failed: \${resp2.statusCode} \${resp2.statusMessage}\`);
+                } else {
+                    console.log(\`Uploaded \${packageJson.packageName} v\${packageJson.version} to ThingWorx!\`);
+                    resolve();
+                }
+            }).auth(user, password);
+
+            if (err) console.error('Failed to delete previous widget version:', err);
+        }).auth(user, password);
+    });
+}
+
+exports.default = series(cleanBuildDir, copy, prepareBuild);
+exports.upload  = series(cleanBuildDir, copy, prepareBuild, upload);
+`;
+  fs.writeFileSync(path.join(root, "gulpfile.js"), content);
+}
+
+function writeIdeJs(root, cfg) {
+  const wClass = cfg.widgetClass;
+  const wName  = cfg.packageName;
+  const lib    = cfg.library;
+
+  const libComment = lib === "echarts"
+    ? `\n    // ECharts is loaded globally via metadata.xml → echarts.min.js\n    // Use: var chart = echarts.init(container);\n`
+    : "";
+
+  const content = `/* ── ${wName} — IDE (Composer) ── */
+
+TW.IDE.Widgets.${wName} = function () {
+
+    this.widgetIconUrl = function () {
+        return "../Common/extensions/${wName}/ui/${wName}/icon.png";
+    };
+
+    this.widgetProperties = function () {
+        return {
+            name:        "${cfg.moduleName}",
+            description: "${cfg.description}",
+            category:    ["Common"],
+            properties: {
+
+                // ── Data binding ──────────────────────────────────────────
+                Data: {
+                    description:     "Infotable data source.",
+                    baseType:        "INFOTABLE",
+                    isBindingTarget: true,
+                    isEditable:      false,
+                },
+
+                // ── Dimensions ────────────────────────────────────────────
+                Width: {
+                    description:  "Widget width in pixels.",
+                    baseType:     "NUMBER",
+                    defaultValue: 600,
+                },
+                Height: {
+                    description:  "Widget height in pixels.",
+                    baseType:     "NUMBER",
+                    defaultValue: 400,
+                },
+
+                // ── Display options ───────────────────────────────────────
+                Title: {
+                    description:     "Chart title displayed above the widget.",
+                    baseType:        "STRING",
+                    defaultValue:    "${cfg.moduleName}",
+                    isBindingTarget: true,
+                    isEditable:      true,
+                },
+                ShowLegend: {
+                    description:  "Show the chart legend.",
+                    baseType:     "BOOLEAN",
+                    defaultValue: true,
+                },
+                Theme: {
+                    description:  "Widget colour theme.",
+                    baseType:     "STRING",
+                    defaultValue: "light",
+                },
+            }
+        };
+    };
+
+    this.widgetServices = function () {
+        return {
+            Refresh: { description: "Re-renders the widget with current data." },
+        };
+    };
+
+    this.widgetEvents = function () {
+        return {
+            SelectionChanged: { description: "Fired when a data point is selected." },
+        };
+    };
+${libComment}
+    this.renderHtml = function () {
+        return [
+            '<div class="widget-content ${wName.toLowerCase()}-ide-wrapper">',
+            '  <span class="${wName.toLowerCase()}-ide-label">📊 ${cfg.moduleName}</span>',
+            '</div>',
+        ].join('');
+    };
+
+    this.afterRender  = function () { /* IDE after-render hook */ };
+    this.beforeSave   = function () { /* validate before Composer save */ };
+    this.beforeDestroy= function () { /* clean up IDE resources */ };
+};
+`;
+  fs.writeFileSync(path.join(root, "src", `${wClass}.ide.js`), content);
+}
+
+function writeRuntimeJs(root, cfg) {
+  const wName  = cfg.packageName;
+  const wClass = cfg.widgetClass;
+
+  const libInit = cfg.library === "echarts"
+    ? `        // Initialise ECharts\n        var container = widget.jqElement.find(".${wName.toLowerCase()}-chart")[0];\n        chart = echarts.init(container);`
+    : `        // Initialise your chart library here\n        var container = widget.jqElement.find(".${wName.toLowerCase()}-chart")[0];`;
+
+  const content = `/* ── ${wName} — Runtime (Mashup) ── */
+
+TW.Runtime.Widgets.${wName} = function () {
+
+    var widget     = this;
+    var chart      = null;
+    var cachedData = null;
+
+    // ── Render shell HTML ─────────────────────────────────────────────────
+    this.renderHtml = function () {
+        return [
+            '<div class="widget-content ${wName.toLowerCase()}-wrapper">',
+            '  <div class="${wName.toLowerCase()}-toolbar">',
+            '    <span class="${wName.toLowerCase()}-title"></span>',
+            '  </div>',
+            '  <div class="${wName.toLowerCase()}-chart"></div>',
+            '  <div class="${wName.toLowerCase()}-error" style="display:none;"></div>',
+            '</div>',
+        ].join('');
+    };
+
+    // ── After render — attach events and initialise the chart ─────────────
+    this.afterRender = function () {
+        // Update title from property
+        widget.jqElement.find(".${wName.toLowerCase()}-title")
+            .text(widget.getProperty("Title") || "${cfg.moduleName}");
+
+${libInit}
+
+        _renderChart();
+    };
+
+    // ── Called by ThingWorx when a bound data service returns ─────────────
+    this.updateProperty = function (info) {
+        if (info.TargetProperty === "Data") {
+            cachedData = info.ActualDataRows || [];
+            _renderChart();
+        }
+        if (info.TargetProperty === "Title") {
+            widget.jqElement.find(".${wName.toLowerCase()}-title").text(info.SinglePropertyValue);
+        }
+    };
+
+    // ── Service invocations (e.g., Refresh) ───────────────────────────────
+    this.serviceInvoked = function (name) {
+        if (name === "Refresh") _renderChart();
+    };
+
+    // ── Clean up on destroy ───────────────────────────────────────────────
+    this.beforeDestroy = function () {
+        if (chart && typeof chart.dispose === "function") chart.dispose();
+        chart = null;
+    };
+
+    // ── Private: build / update the chart ────────────────────────────────
+    function _renderChart() {
+        if (!cachedData || !cachedData.length) {
+            _showError("No data bound. Connect a data service to the Data property.");
+            return;
+        }
+        _hideError();
+
+        // TODO: build your chart options from cachedData
+        // Example with ECharts:
+        // var option = { ... };
+        // if (chart) chart.setOption(option);
+    }
+
+    function _showError(msg) {
+        widget.jqElement.find(".${wName.toLowerCase()}-error")
+            .text(msg).show();
+    }
+
+    function _hideError() {
+        widget.jqElement.find(".${wName.toLowerCase()}-error").hide();
+    }
+};
+`;
+  fs.writeFileSync(path.join(root, "src", `${wClass}.runtime.js`), content);
+}
+
+function writeIdeCss(root, cfg) {
+  const wName = cfg.packageName.toLowerCase();
+  const content = `/* ── ${cfg.packageName} — IDE (Design Time) styles ── */
+
+.${wName}-ide-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f0f3f4;
+    border: 2px dashed #aab7b8;
+    box-sizing: border-box;
+    font-family: Arial, sans-serif;
+    color: #7f8c8d;
+    font-size: 14px;
+    border-radius: 4px;
+}
+
+.${wName}-ide-label {
+    font-weight: 600;
+    letter-spacing: 0.5px;
+}
+`;
+  fs.writeFileSync(path.join(root, "src", `${cfg.widgetClass}.ide.css`), content);
+}
+
+function writeRuntimeCss(root, cfg) {
+  const wName = cfg.packageName.toLowerCase();
+  const content = `/* ── ${cfg.packageName} — Runtime styles ── */
+
+.${wName}-wrapper {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    box-sizing: border-box;
+    font-family: Arial, sans-serif;
+    background: #ffffff;
+}
+
+.${wName}-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    background: #f8f9fa;
+    border-bottom: 1px solid #e5e8e7;
+    flex-shrink: 0;
+}
+
+.${wName}-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #2c3e50;
+}
+
+.${wName}-chart {
+    flex: 1;
+    min-height: 0;
+    position: relative;
+}
+
+.${wName}-chart canvas {
+    width: 100% !important;
+    height: 100% !important;
+}
+
+.${wName}-error {
+    background: #fadbd8;
+    color: #c0392b;
+    padding: 8px 12px;
+    margin: 6px;
+    border-radius: 4px;
+    font-size: 12px;
+    text-align: center;
+}
+`;
+  fs.writeFileSync(path.join(root, "src", `${cfg.widgetClass}.runtime.css`), content);
+}
+
+function writeGitignore(root) {
+  fs.writeFileSync(path.join(root, ".gitignore"),
+    `node_modules/\nbuild/\nzip/\nlib/\n*.log\n.DS_Store\n`);
+}
+
+function writeReadme(root, cfg) {
+  const content = `# ${cfg.moduleName} — ThingWorx Custom Widget
+
+> ${cfg.description}
+
+## Quick Start
+
+\`\`\`bash
+npm install
+npm run build            # development build  →  zip/
+npm run buildProduction  # minified build     →  zip/
+\`\`\`
+
+## Project Structure
+
+\`\`\`
+${cfg.packageName}/
+├── src/
+│   ├── ${cfg.widgetClass}.ide.js       ← Composer (IDE) behaviour & properties
+│   ├── ${cfg.widgetClass}.runtime.js   ← Mashup runtime rendering & data
+│   ├── ${cfg.widgetClass}.ide.css      ← Composer styles
+│   └── ${cfg.widgetClass}.runtime.css  ← Runtime styles
+├── build/                              ← Gulp output (gitignored)
+├── zip/                                ← Extension .zip ready for TWX import
+├── metadata.xml                        ← ThingWorx extension manifest
+├── gulpfile.js                         ← Build pipeline
+└── package.json
+\`\`\`
+
+## npm Scripts
+
+| Command | Description |
+|---|---|
+| \`npm run build\` | Dev build (unminified) |
+| \`npm run buildProduction\` | Production build (concat + minify) |
+| \`npm run upload\` | Dev build + upload to TWX |
+| \`npm run uploadProduction\` | Production build + upload to TWX |
+
+## Deploying to ThingWorx
+
+1. Run \`npm run buildProduction\`
+2. Go to ThingWorx Composer → **Import / Export → Import Extension**
+3. Upload the \`.zip\` file from the \`zip/\` folder
+
+## ThingWorx Server Config
+
+Edit \`package.json\` and set:
+- \`thingworxServer\` — e.g. \`http://localhost:8085\`
+- \`thingworxUser\` / \`thingworxPassword\`
+`;
+  fs.writeFileSync(path.join(root, "README.md"), content);
+}
+
+// ─── Main scaffold ────────────────────────────────────────────────────────────
+async function scaffold(cfg) {
+  const root = path.resolve(process.cwd(), cfg.packageName);
+
+  if (fs.existsSync(root)) {
+    err(`Directory "${cfg.packageName}" already exists. Aborting.`);
+    process.exit(1);
+  }
+
+  fs.mkdirSync(path.join(root, "src"), { recursive: true });
+
+  writePackageJson(root, cfg);
+  writeMetadataXml(root, cfg);
+  writeGulpfile(root, cfg);
+  writeIdeJs(root, cfg);
+  writeRuntimeJs(root, cfg);
+  writeIdeCss(root, cfg);
+  writeRuntimeCss(root, cfg);
+  writeGitignore(root);
+  writeReadme(root, cfg);
+
+  // Placeholder for library file
+  if (cfg.library === "echarts") {
+    fs.writeFileSync(
+      path.join(root, "src", "echarts.min.js"),
+      `/* Place echarts.min.js here — download from https://echarts.apache.org/en/download.html */\n`
+    );
+    ok("src/echarts.min.js  (placeholder — replace with real echarts.min.js)");
+  }
+
+  return root;
+}
+
+// ─── Print file tree ──────────────────────────────────────────────────────────
+function printTree(root, cfg) {
+  const rel = f => path.relative(root, f);
+  const files = [
+    "package.json", "gulpfile.js", "metadata.xml", ".gitignore", "README.md",
+    `src/${cfg.widgetClass}.ide.js`,
+    `src/${cfg.widgetClass}.runtime.js`,
+    `src/${cfg.widgetClass}.ide.css`,
+    `src/${cfg.widgetClass}.runtime.css`,
+    ...(cfg.library === "echarts" ? ["src/echarts.min.js (placeholder)"] : []),
+  ];
+
+  log("");
+  log(`  ${c.bold}${cfg.packageName}/${c.reset}`);
+  files.forEach((f, i) => {
+    const last   = i === files.length - 1;
+    const prefix = last ? "└──" : "├──";
+    log(`  ${c.dim}${prefix}${c.reset} ${f}`);
+  });
+  log(`  ${c.dim}└── node_modules/  (after npm install)${c.reset}`);
+}
+
+// ─── CLI entry ────────────────────────────────────────────────────────────────
+async function main() {
+  banner();
+
+  // Support --name MyWidget for non-interactive / CI use
+  const argName = (process.argv.find(a => a.startsWith("--name=")) || "").replace("--name=","");
+
+  const rl = readline.createInterface({
+    input:  process.stdin,
+    output: process.stdout,
+    terminal: process.stdin.isTTY, // disable echo in pipe mode
+  });
+
+  log(`${c.bold}  Let's set up your ThingWorx widget!${c.reset}`);
+  log(`  ${c.dim}Press Enter to accept defaults.${c.reset}`);
+  log("");
+
+  const packageName  = await prompt(rl, "Widget package name (e.g. MyChartWidget)", "MyWidget");
+  const moduleName   = await prompt(rl, "Display name in Composer", packageName.replace(/Widget$/, " Widget"));
+  const description  = await prompt(rl, "Short description", `${moduleName} for ThingWorx`);
+  const version      = await prompt(rl, "Version", "1.0.0");
+  const author       = await prompt(rl, "Author / vendor", "YourCompany");
+  const minTwxVer    = await prompt(rl, "Minimum ThingWorx version", "9.0.0");
+  const twxServer    = await prompt(rl, "ThingWorx server URL", "http://localhost:8085");
+  const twxUser      = await prompt(rl, "ThingWorx username", "Administrator");
+  const twxPassword  = await prompt(rl, "ThingWorx password", "yourpassword");
+  log("");
+  const library      = await promptSelect(rl, "Chart library to include?", ["echarts", "none (I'll add my own)"]);
+
+  rl.close();
+
+  const cfg = {
+    packageName,
+    moduleName,
+    description,
+    version,
+    author,
+    minTwxVersion: minTwxVer,
+    twxServer,
+    twxUser,
+    twxPassword,
+    library:      library.startsWith("echarts") ? "echarts" : "none",
+    widgetClass:  packageName, // used for file names: MyWidget.ide.js etc.
+  };
+
+  log("");
+  info(`Scaffolding ${c.bold}${packageName}${c.reset}...`);
+  log("");
+
+  const root = await scaffold(cfg);
+
+  // Print what was created
+  const files = fs.readdirSync(path.join(root, "src"));
+  ok("package.json");
+  ok("gulpfile.js");
+  ok("metadata.xml");
+  ok(".gitignore");
+  ok("README.md");
+  files.forEach(f => ok(`src/${f}`));
+
+  printTree(root, cfg);
+
+  log("");
+  log(`  ${c.bold}${c.green}✨ Done!${c.reset}  Your widget is ready.`);
+  log("");
+  log(`  ${c.dim}Next steps:${c.reset}`);
+  log(`  ${c.cyan}  cd ${packageName}${c.reset}`);
+  log(`  ${c.cyan}  npm install${c.reset}`);
+  if (cfg.library === "echarts") {
+    log(`  ${c.yellow}  # Download echarts.min.js → https://echarts.apache.org/en/download.html${c.reset}`);
+    log(`  ${c.yellow}  # Copy it into src/  (replacing the placeholder)${c.reset}`);
+  }
+  log(`  ${c.cyan}  npm run build${c.reset}          ${c.dim}# dev build${c.reset}`);
+  log(`  ${c.cyan}  npm run buildProduction${c.reset}  ${c.dim}# minified build + zip${c.reset}`);
+  log(`  ${c.cyan}  npm run upload${c.reset}          ${c.dim}# build + push to ThingWorx${c.reset}`);
+  log("");
+}
+
+main().catch(e => { err(String(e)); process.exit(1); });

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "create-thingworx-widget2",
+  "version": "1.0.1",
+  "description": "Scaffold a ThingWorx custom widget project — like npm create vite@latest but for ThingWorx.",
+  "keywords": [
+    "thingworx",
+    "widget",
+    "scaffold",
+    "gulp",
+    "echarts",
+    "create"
+  ],
+  "author": "mr-dark-codex",
+  "license": "MIT",
+  "bin": {
+    "create-thingworx-widget2": "bin/create-thingworx-widget.js"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "files": [
+    "bin/"
+  ],
+  "repository": {
+    "type": "git",
+    "url": ""
+  }
+}