create-thingworx-widget2 1.0.1 → 1.0.2

package/bin/create-thingworx-widget.js

@@ -1,125 +1,159 @@
 #!/usr/bin/env node
 
-"use strict";
+'use strict';
 
-const fs   = require("fs");
-const path = require("path");
-const readline = require("readline");
+import fs from 'fs';
+import path from 'path';
+import readline from 'readline';
+import { execSync } from 'child_process';
 
 // ─── 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",
+  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}`);
+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 fail = (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 || "");
-    });
-  });
+  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}  ThingWorx Widget Scaffolder${c.reset}  ${c.dim}— Gulp 5 · Babel · undici · External Dependencies${c.reset}`
+  );
+  log('');
 }
 
-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))]);
+// ─── Prompt helpers ───────────────────────────────────────────────────────────
+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 || '');
     });
   });
 }
 
-// ─── toPascalCase ─────────────────────────────────────────────────────────────
-function toPascal(str) {
-  return str.replace(/(^\w|-\w)/g, m => m.replace("-", "").toUpperCase());
+// ─── Resolve node_modules main entry for a dep ───────────────────────────────
+// Used at scaffold-time to find the JS file path (for README guidance only).
+// Real resolution happens at build-time in gulpfile via require().
+function resolveDepMain(dep) {
+  try {
+    const pkgPath = require.resolve(`${dep}/package.json`, { paths: [process.cwd()] });
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+    return pkg.main || 'index.js';
+  } catch (_) {
+    return null; // not installed yet — that's fine
+  }
 }
 
-// ─── File writers (boilerplate matching LinearGradient project) ───────────────
+// ─────────────────────────────────────────────────────────────────────────────
+// FILE WRITERS
+// ─────────────────────────────────────────────────────────────────────────────
 
 function writePackageJson(root, cfg) {
+  // Build dependencies object: echarts always + extra deps from user input
+  const deps = {};
+  for (const dep of cfg.extraDeps) {
+    deps[dep] = '*'; // user can pin versions manually
+  }
+
+  const devDeps = {
+    '@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',
+    'babel-plugin-remove-import-export': '^1.1.0',
+    del: '^5.0.0',
+    'delete-empty': '^3.0.0',
+    eslint: '^10.4.1',
+    'eslint-config-prettier': '^10.1.8',
+    'form-data': '^4.0.5',
+    gulp: '^5.0.1',
+    'gulp-babel': '^8.0.0',
+    'gulp-concat': '^2.6.1',
+    'gulp-terser': '^1.2.0',
+    'gulp-zip': '^5.0.0',
+    prettier: '^3.8.3',
+    undici: '^7.26.0',
+    xml2js: '^0.6.2',
+  };
+
   const content = {
-    name:           cfg.packageName.toLowerCase().replace(/\s+/g, "-"),
-    packageName:    cfg.packageName,
-    moduleName:     cfg.moduleName,
-    version:        cfg.version,
-    description:    cfg.description,
+    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,
+    thingworxUser: cfg.twxUser,
     thingworxPassword: cfg.twxPassword,
-    author:          cfg.author,
+    author: cfg.author,
     minimumThingWorxVersion: cfg.minTwxVersion,
-    homepage:        "",
-    autoUpdate:      { gitHubURL: "" },
-    repository:      { type: "git", url: "" },
+    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",
+      test: 'echo "Error: no test specified" && exit 1',
+      build: 'gulp',
+      buildProduction: 'gulp --p',
+      upload: 'gulp upload',
+      uploadProduction: 'gulp upload --p',
+      format: 'prettier --write src/**/*.js',
+      'format:check': 'prettier --check src/**/*.js',
     },
+    license: 'MIT',
+    files: ['lib', 'build', 'LICENSE'],
+    devDependencies: devDeps,
+    dependencies: deps,
   };
-  fs.writeFileSync(path.join(root, "package.json"), JSON.stringify(content, null, 4));
+
+  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 wName = cfg.packageName;
+  const jsIde = `ide\\${wName}.ide.js`;
+  const jsRuntime = `runtime\\${wName}.runtime.js`;
+  const cssIde = `assets\\styles\\${wName}.ide.css`;
+  const cssRuntime = `assets\\styles\\${wName}.runtime.css`;
+
+  // Build one FileResource line per extra dependency
+  const depLines = cfg.extraDeps
+    .map(
+      (dep) =>
+        `        <FileResource type="JS" file="${dep}.js"\n          description="" isDevelopment="false" isRuntime="true"/>`
+    )
+    .join('\n');
 
   const content = `<?xml version="1.0" encoding="UTF-8"?>
 <Entities>
@@ -134,7 +168,7 @@ function writeMetadataXml(root, cfg) {
   </ExtensionPackages>
 
   <Widgets>
-    <Widget name="${wName}">${libLine}
+    <Widget name="${wName}">
       <UIResources>
 
         <FileResource type="CSS" file="${cssIde}"
@@ -146,28 +180,45 @@ function writeMetadataXml(root, cfg) {
           description="" isDevelopment="false" isRuntime="true"/>
         <FileResource type="JS"  file="${jsRuntime}"
           description="" isDevelopment="false" isRuntime="true"/>
+${depLines ? depLines + '\n' : ''}
+        <!--
+          EXTERNAL DEPENDENCIES NOTE:
+          Each library listed above must be manually added to metadata.xml.
+          To find the correct JS file path for a library installed via npm:
+            1. Look in node_modules/<package-name>/package.json  → "main" field
+            2. Copy that file to your src/ folder (gulp copies it to build automatically)
+            3. Add a FileResource entry here pointing to just the filename, e.g.:
+               <FileResource type="JS" file="echarts.js"
+                 description="" isDevelopment="false" isRuntime="true"/>
+        -->
 
       </UIResources>
     </Widget>
   </Widgets>
 </Entities>
 `;
-  fs.writeFileSync(path.join(root, "metadata.xml"), content);
+  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');
+  // FIX: uses undici + form-data (matching the working widget project)
+  // FIX: upgraded from gulp 4 to gulp 5 compatible syntax
+  // FIX: removed deprecated 'request' package
+  const content = `const path      = require('path');
+const fs        = require('fs');
+const xml2js    = require('xml2js');
+const del       = require('del');
 const deleteEmpty = require('delete-empty');
+const FormData  = require('form-data');
 
 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');
+
+// undici replaces deprecated 'request' — zero deps, Node.js official HTTP client
+const { request: undiciRequest } = require('undici');
 
 const packageJson = require('./package.json');
 
@@ -176,7 +227,7 @@ const removeFiles = [];
 
 /**
  * CLI args:
- *   --p  Production build (concat + minify)
+ *   --p  Production build (concat + minify + compress)
  *   --l  Library mode (unsupported)
  */
 const args = (argList => {
@@ -192,12 +243,13 @@ const args = (argList => {
 
 if (args.l) throw new Error('Argument --l is unsupported for this project.');
 
-const outPath   = \`build/ui/\${packageJson.packageName}\`;
-const libPath   = 'lib';
+const outPath     = \`build/ui/\${packageJson.packageName}\`;
 const packageKind = args.p ? 'min' : 'dev';
-const zipName   = \`\${packageJson.packageName}-\${packageKind}-\${packageJson.version}.zip\`;
+const zipName     = \`\${packageJson.packageName}-\${packageKind}-\${packageJson.version}.zip\`;
 
-/** Clean build, zip, and lib directories. */
+// ─────────────────────────────────────────────
+// TASK 1 — Clean build / zip / lib directories
+// ─────────────────────────────────────────────
 async function cleanBuildDir(cb) {
     await del('build');
     await del('zip');
@@ -214,7 +266,9 @@ async function cleanBuildDir(cb) {
     cb();
 }
 
-/** Copy src files + metadata.xml into build. */
+// ─────────────────────────────────────────────
+// TASK 2 — Copy src files + metadata.xml
+// ─────────────────────────────────────────────
 function copy(cb) {
     src('src/**')
         .pipe(dest(\`\${outPath}/\`))
@@ -224,18 +278,31 @@ function copy(cb) {
         });
 }
 
-/** Transpile, optionally minify, then zip. */
+// ─────────────────────────────────────────────
+// TASK 3 — Copy deps → Transpile → Compress → ZIP
+// ─────────────────────────────────────────────
 async function prepareBuild(cb) {
     if (removeFiles.length) await del(removeFiles.map(f => \`\${outPath}/\${f}\`));
 
     // Copy npm dependencies declared in package.json "dependencies"
+    // Each dep's main JS file is copied to the widget output root,
+    // and must also be listed in metadata.xml as a FileResource.
     for (const dep in (packageJson.dependencies || {})) {
-        const depPkg = require(\`./node_modules/\${dep}/package.json\`);
+        const depPkgPath = require.resolve(\`\${dep}/package.json\`);
+        const depPkg     = JSON.parse(fs.readFileSync(depPkgPath, 'utf8'));
+        const mainFile   = depPkg.main || 'index.js';
+        const destName   = \`\${dep}.js\`;
+
         await new Promise(resolve =>
-            src(\`node_modules/\${dep}/\${depPkg.main}\`).pipe(dest(outPath)).on('end', resolve));
+            src(\`node_modules/\${dep}/\${mainFile}\`)
+                .pipe(concat(destName))   // rename to <depname>.js for predictable metadata.xml path
+                .pipe(dest(outPath))
+                .on('end', resolve)
+        );
+        console.log(\`📦 Copied dependency: \${dep} → \${outPath}/\${destName}\`);
     }
 
-    // Babel transpile (removes ES module import/export for TWX)
+    // Babel transpile — removes ES module import/export for ThingWorx compatibility
     await new Promise(resolve => {
         src(\`\${outPath}/**/*.js\`)
             .pipe(babel({ plugins: ['remove-import-export'] }))
@@ -244,6 +311,7 @@ async function prepareBuild(cb) {
     });
 
     if (args.p) {
+        // ── Production: concat + aggressive terser compression ──
         const metadataFile = await new Promise(resolve =>
             fs.readFile('build/metadata.xml', 'utf8', (e, d) => resolve(d)));
         const metadataXML  = await new Promise(resolve =>
@@ -277,18 +345,35 @@ async function prepareBuild(cb) {
         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(terser({
+                        compress: {
+                            dead_code   : true,
+                            drop_console: false,
+                            passes      : 2,
+                            pure_getters: true,
+                            unsafe      : false,
+                        },
+                        mangle : true,
+                        format : { comments: false },
+                    }))
                     .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() }
+                $: {
+                    type          : 'JS',
+                    file          : \`\${name}.js\`,
+                    description   : '',
+                    isDevelopment : group.isDevelopment.toString(),
+                    isRuntime     : group.isRuntime.toString(),
+                }
             });
         }
 
@@ -296,243 +381,318 @@ async function prepareBuild(cb) {
         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 new Promise(resolve =>
+            fs.writeFile('build/metadata.xml', builder.buildObject(metadataXML), resolve));
+
         await deleteEmpty(\`\${outPath}/\`);
     }
 
+    // ZIP the final build output
     const zipStream = src('build/**').pipe(zip(zipName)).pipe(dest('zip'));
     await new Promise(resolve => zipStream.on('end', resolve));
+
+    const zipStats = fs.statSync(path.join('zip', zipName));
+    console.log(\`📦 ZIP created: \${zipName} (\${(zipStats.size / 1024).toFixed(1)} KB)\`);
+
     cb();
 }
 
-/** Upload extension zip to a ThingWorx server (requires valid credentials in package.json). */
+// ─────────────────────────────────────────────
+// TASK 4 — Upload to ThingWorx via undici
+// ─────────────────────────────────────────────
 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);
+    const basicAuth = 'Basic ' + Buffer.from(\`\${user}:\${password}\`).toString('base64');
+
+    const commonHeaders = {
+        'X-XSRF-TOKEN'       : 'TWX-XSRF-TOKEN-VALUE',
+        'X-THINGWORX-SESSION': 'true',
+        'Authorization'      : basicAuth,
+        'Accept'             : 'application/json',
+    };
 
-            if (err) console.error('Failed to delete previous widget version:', err);
-        }).auth(user, password);
+    // Step 1: Delete old extension (non-fatal)
+    try {
+        const { statusCode, body: deleteBody } = await undiciRequest(
+            \`\${host}/Thingworx/Subsystems/PlatformSubsystem/Services/DeleteExtensionPackage\`,
+            {
+                method : 'POST',
+                headers: { ...commonHeaders, 'Content-Type': 'application/json' },
+                body   : JSON.stringify({ packageName: packageJson.packageName }),
+            }
+        );
+        await deleteBody.dump();
+        console.log(\`🗑️  Delete previous version — HTTP \${statusCode}\`);
+    } catch (e) {
+        console.warn('⚠️  Delete skipped:', e.message);
+    }
+
+    // Step 2: Upload ZIP — stream-based multipart
+    const zipPath = path.join('zip', zipName);
+    const form    = new FormData();
+    form.append('file', fs.createReadStream(zipPath), {
+        filename    : zipName,
+        contentType : 'application/zip',
+        knownLength : fs.statSync(zipPath).size,
     });
+
+    await new Promise((resolve, reject) => {
+        form.submit(
+            {
+                host    : new URL(host).hostname,
+                port    : new URL(host).port || 80,
+                path    : '/Thingworx/ExtensionPackageUploader?purpose=import',
+                method  : 'POST',
+                headers : { ...commonHeaders, ...form.getHeaders() },
+                timeout : 120000,
+            },
+            (e, res) => {
+                if (e) { reject(e); return; }
+                let data = '';
+                res.on('data', chunk => (data += chunk));
+                res.on('end', () => {
+                    if (res.statusCode === 200) {
+                        console.log(\`✅ Uploaded \${packageJson.packageName} v\${packageJson.version} to ThingWorx!\`);
+                        resolve();
+                    } else {
+                        reject(new Error(\`Upload failed — HTTP \${res.statusCode}: \${data}\`));
+                    }
+                });
+            }
+        );
+    });
+
+    cb();
 }
 
+// ─────────────────────────────────────────────
+// Exports
+// ─────────────────────────────────────────────
 exports.default = series(cleanBuildDir, copy, prepareBuild);
 exports.upload  = series(cleanBuildDir, copy, prepareBuild, upload);
 `;
-  fs.writeFileSync(path.join(root, "gulpfile.js"), content);
+  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 wName = cfg.packageName;
 
   const content = `/* ── ${wName} — IDE (Composer) ── */
 
 TW.IDE.Widgets.${wName} = function () {
 
     this.widgetIconUrl = function () {
-        return "../Common/extensions/${wName}/ui/${wName}/icon.png";
+        return '../Common/extensions/${wName}/ui/${wName}/icon.png';
     };
 
     this.widgetProperties = function () {
         return {
-            name:        "${cfg.moduleName}",
-            description: "${cfg.description}",
-            category:    ["Common"],
+            name:        '${cfg.moduleName}',
+            description: '${cfg.description}',
+            category:    ['Common'],
             properties: {
 
                 // ── Data binding ──────────────────────────────────────────
                 Data: {
-                    description:     "Infotable data source.",
-                    baseType:        "INFOTABLE",
+                    description:     'Infotable data source.',
+                    baseType:        'INFOTABLE',
                     isBindingTarget: true,
                     isEditable:      false,
                 },
 
                 // ── Dimensions ────────────────────────────────────────────
                 Width: {
-                    description:  "Widget width in pixels.",
-                    baseType:     "NUMBER",
+                    description:  'Widget width in pixels.',
+                    baseType:     'NUMBER',
                     defaultValue: 600,
                 },
                 Height: {
-                    description:  "Widget height in pixels.",
-                    baseType:     "NUMBER",
+                    description:  'Widget height in pixels.',
+                    baseType:     'NUMBER',
                     defaultValue: 400,
                 },
 
                 // ── Display options ───────────────────────────────────────
                 Title: {
-                    description:     "Chart title displayed above the widget.",
-                    baseType:        "STRING",
-                    defaultValue:    "${cfg.moduleName}",
+                    description:     'Chart title displayed above the widget.',
+                    baseType:        'STRING',
+                    defaultValue:    '${cfg.moduleName}',
                     isBindingTarget: true,
                     isEditable:      true,
                 },
                 ShowLegend: {
-                    description:  "Show the chart legend.",
-                    baseType:     "BOOLEAN",
+                    description:  'Show the chart legend.',
+                    baseType:     'BOOLEAN',
                     defaultValue: true,
                 },
                 Theme: {
-                    description:  "Widget colour theme.",
-                    baseType:     "STRING",
-                    defaultValue: "light",
+                    description:  'Widget colour theme.',
+                    baseType:     'STRING',
+                    defaultValue: 'light',
                 },
-            }
+            },
         };
     };
 
     this.widgetServices = function () {
         return {
-            Refresh: { description: "Re-renders the widget with current data." },
+            Refresh: { description: 'Re-renders the widget with current data.' },
         };
     };
 
     this.widgetEvents = function () {
         return {
-            SelectionChanged: { description: "Fired when a data point is selected." },
+            SelectionChanged: { description: 'Fired when a data point is selected.' },
         };
     };
-${libComment}
+
     this.renderHtml = function () {
         return [
-            '<div class="widget-content ${wName.toLowerCase()}-ide-wrapper">',
+            '<div class="${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 */ };
+    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);
+  const ideDir = path.join(root, 'src', 'ide');
+  fs.mkdirSync(ideDir, { recursive: true });
+  fs.writeFileSync(path.join(ideDir, `${wName}.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 wName = cfg.packageName;
+  const wLow = wName.toLowerCase();
+
+  // Build dep-awareness comment
+  const depComment = cfg.extraDeps.length
+    ? `\n    // External dependencies available as globals (loaded via metadata.xml):\n` +
+      cfg.extraDeps
+        .map((d) => `    //   ${d}  (from node_modules → copied to build as ${d}.js)`)
+        .join('\n') +
+      '\n'
+    : '';
 
   const content = `/* ── ${wName} — Runtime (Mashup) ── */
 
 TW.Runtime.Widgets.${wName} = function () {
-
     var widget     = this;
     var chart      = null;
     var cachedData = null;
+${depComment}
+    console.log('[${wName}] ── Widget constructor called');
 
     // ── Render shell HTML ─────────────────────────────────────────────────
     this.renderHtml = function () {
+        console.log('[${wName}] renderHtml() called');
         return [
-            '<div class="widget-content ${wName.toLowerCase()}-wrapper">',
-            '  <div class="${wName.toLowerCase()}-toolbar">',
-            '    <span class="${wName.toLowerCase()}-title"></span>',
+            '<div class="widget-content ${wLow}-wrapper">',
+            '  <div class="${wLow}-toolbar">',
+            '    <span class="${wLow}-title"></span>',
             '  </div>',
-            '  <div class="${wName.toLowerCase()}-chart"></div>',
-            '  <div class="${wName.toLowerCase()}-error" style="display:none;"></div>',
+            '  <div class="${wLow}-chart"></div>',
+            '  <div class="${wLow}-error" style="display:none;"></div>',
             '</div>',
         ].join('');
     };
 
-    // ── After render — attach events and initialise the chart ─────────────
+    // ── After render ──────────────────────────────────────────────────────
     this.afterRender = function () {
-        // Update title from property
-        widget.jqElement.find(".${wName.toLowerCase()}-title")
-            .text(widget.getProperty("Title") || "${cfg.moduleName}");
+        console.log('[${wName}] afterRender() called');
+
+        var title = widget.getProperty('Title') || '${cfg.moduleName}';
+        widget.jqElement.find('.${wLow}-title').text(title);
 
-${libInit}
+        var container = widget.jqElement.find('.${wLow}-chart')[0];
+        console.log('[${wName}] afterRender() → chart container =', container);
 
         _renderChart();
     };
 
-    // ── Called by ThingWorx when a bound data service returns ─────────────
+    // ── Called by ThingWorx when bound data service returns ───────────────
     this.updateProperty = function (info) {
-        if (info.TargetProperty === "Data") {
+        console.log('[${wName}] updateProperty() → TargetProperty =', info.TargetProperty);
+
+        if (info.TargetProperty === 'Data') {
             cachedData = info.ActualDataRows || [];
+            console.log('[${wName}] updateProperty() → Data rows =', cachedData.length);
             _renderChart();
         }
-        if (info.TargetProperty === "Title") {
-            widget.jqElement.find(".${wName.toLowerCase()}-title").text(info.SinglePropertyValue);
+
+        if (info.TargetProperty === 'Title') {
+            widget.jqElement.find('.${wLow}-title').text(info.SinglePropertyValue);
         }
     };
 
-    // ── Service invocations (e.g., Refresh) ───────────────────────────────
+    // ── Service invocations ───────────────────────────────────────────────
     this.serviceInvoked = function (name) {
-        if (name === "Refresh") _renderChart();
+        console.log('[${wName}] serviceInvoked() → name =', name);
+        if (name === 'Refresh') _renderChart();
     };
 
-    // ── Clean up on destroy ───────────────────────────────────────────────
+    // ── Clean up ──────────────────────────────────────────────────────────
     this.beforeDestroy = function () {
-        if (chart && typeof chart.dispose === "function") chart.dispose();
-        chart = null;
+        console.log('[${wName}] beforeDestroy() called');
+        if (chart && typeof chart.dispose === 'function') {
+            chart.dispose();
+        }
+        chart      = null;
+        cachedData = null;
     };
 
-    // ── Private: build / update the chart ────────────────────────────────
+    // ── Private: render chart ─────────────────────────────────────────────
     function _renderChart() {
         if (!cachedData || !cachedData.length) {
-            _showError("No data bound. Connect a data service to the Data property.");
+            _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);
+        // TODO: implement your chart rendering here.
+        // Example using ECharts (loaded globally via metadata.xml):
+        //
+        // if (!chart) {
+        //     var container = widget.jqElement.find('.${wLow}-chart')[0];
+        //     chart = echarts.init(container);
+        // }
+        //
+        // var option = {
+        //     title:  { text: widget.getProperty('Title') || '${cfg.moduleName}' },
+        //     tooltip: { trigger: 'axis' },
+        //     xAxis:  { type: 'category', data: cachedData.map(r => r.Label || '') },
+        //     yAxis:  { type: 'value' },
+        //     series: [{ type: 'bar', data: cachedData.map(r => r.Value || 0) }],
+        // };
+        // chart.setOption(option);
     }
 
     function _showError(msg) {
-        widget.jqElement.find(".${wName.toLowerCase()}-error")
-            .text(msg).show();
+        console.error('[${wName}] _showError() →', msg);
+        widget.jqElement.find('.${wLow}-error').text(msg).show();
     }
 
     function _hideError() {
-        widget.jqElement.find(".${wName.toLowerCase()}-error").hide();
+        widget.jqElement.find('.${wLow}-error').hide();
     }
 };
 `;
-  fs.writeFileSync(path.join(root, "src", `${wClass}.runtime.js`), content);
+  const runtimeDir = path.join(root, 'src', 'runtime');
+  fs.mkdirSync(runtimeDir, { recursive: true });
+  fs.writeFileSync(path.join(runtimeDir, `${wName}.runtime.js`), content);
 }
 
 function writeIdeCss(root, cfg) {
-  const wName = cfg.packageName.toLowerCase();
+  const wLow = cfg.packageName.toLowerCase();
   const content = `/* ── ${cfg.packageName} — IDE (Design Time) styles ── */
 
-.${wName}-ide-wrapper {
+.${wLow}-ide-wrapper {
     width: 100%;
     height: 100%;
     display: flex;
@@ -547,19 +707,21 @@ function writeIdeCss(root, cfg) {
     border-radius: 4px;
 }
 
-.${wName}-ide-label {
+.${wLow}-ide-label {
     font-weight: 600;
     letter-spacing: 0.5px;
 }
 `;
-  fs.writeFileSync(path.join(root, "src", `${cfg.widgetClass}.ide.css`), content);
+  const stylesDir = path.join(root, 'src', 'assets', 'styles');
+  fs.mkdirSync(stylesDir, { recursive: true });
+  fs.writeFileSync(path.join(stylesDir, `${cfg.packageName}.ide.css`), content);
 }
 
 function writeRuntimeCss(root, cfg) {
-  const wName = cfg.packageName.toLowerCase();
+  const wLow = cfg.packageName.toLowerCase();
   const content = `/* ── ${cfg.packageName} — Runtime styles ── */
 
-.${wName}-wrapper {
+.${wLow}-wrapper {
     width: 100%;
     height: 100%;
     display: flex;
@@ -570,7 +732,7 @@ function writeRuntimeCss(root, cfg) {
     background: #ffffff;
 }
 
-.${wName}-toolbar {
+.${wLow}-toolbar {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -580,24 +742,24 @@ function writeRuntimeCss(root, cfg) {
     flex-shrink: 0;
 }
 
-.${wName}-title {
+.${wLow}-title {
     font-size: 14px;
     font-weight: 600;
     color: #2c3e50;
 }
 
-.${wName}-chart {
+.${wLow}-chart {
     flex: 1;
     min-height: 0;
     position: relative;
 }
 
-.${wName}-chart canvas {
+.${wLow}-chart canvas {
     width: 100% !important;
     height: 100% !important;
 }
 
-.${wName}-error {
+.${wLow}-error {
     background: #fadbd8;
     color: #c0392b;
     padding: 8px 12px;
@@ -607,15 +769,99 @@ function writeRuntimeCss(root, cfg) {
     text-align: center;
 }
 `;
-  fs.writeFileSync(path.join(root, "src", `${cfg.widgetClass}.runtime.css`), content);
+  const stylesDir = path.join(root, 'src', 'assets', 'styles');
+  fs.mkdirSync(stylesDir, { recursive: true });
+  fs.writeFileSync(path.join(stylesDir, `${cfg.packageName}.runtime.css`), content);
+}
+
+function writeEslintrc(root) {
+  const content = `{
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "prettier"
+    ],
+    "globals": {
+        "TW": "readonly",
+        "echarts": "readonly",
+        "$": "readonly",
+        "jQuery": "readonly"
+    },
+    "rules": {
+        "no-unused-vars": ["warn", { "vars": "all", "args": "after-used" }],
+        "no-console": "off"
+    }
+}
+`;
+  fs.writeFileSync(path.join(root, '.eslintrc'), content);
+}
+
+function writePrettierrc(root) {
+  const content = `{
+    "printWidth"        : 100,
+    "tabWidth"          : 4,
+    "useTabs"           : false,
+    "semi"              : true,
+    "singleQuote"       : true,
+    "quoteProps"        : "as-needed",
+    "trailingComma"     : "es5",
+    "bracketSpacing"    : true,
+    "bracketSameLine"   : false,
+    "arrowParens"       : "avoid",
+    "endOfLine"         : "lf",
+
+    "overrides": [
+        {
+            "files": ["*.json"],
+            "options": {
+                "printWidth"  : 80,
+                "tabWidth"    : 2
+            }
+        },
+        {
+            "files": ["*.xml"],
+            "options": {
+                "printWidth"  : 200,
+                "tabWidth"    : 4
+            }
+        }
+    ]
+}
+`;
+  fs.writeFileSync(path.join(root, '.prettierrc'), content);
+}
+
+function writePrettierIgnore(root) {
+  fs.writeFileSync(
+    path.join(root, '.prettierignore'),
+    `build/\nzip/\nlib/\nnode_modules/\n*.min.js\n`
+  );
 }
 
 function writeGitignore(root) {
-  fs.writeFileSync(path.join(root, ".gitignore"),
-    `node_modules/\nbuild/\nzip/\nlib/\n*.log\n.DS_Store\n`);
+  fs.writeFileSync(
+    path.join(root, '.gitignore'),
+    `node_modules/\nbuild/\nzip/\nlib/\n*.log\n.DS_Store\n`
+  );
 }
 
 function writeReadme(root, cfg) {
+  const wName = cfg.packageName;
+
+  // Build dep table rows
+  const depRows = cfg.extraDeps.length
+    ? cfg.extraDeps
+        .map((dep) => {
+          const mainFile =
+            resolveDepMain(dep) || '(see node_modules/' + dep + '/package.json → main)';
+          return `| \`${dep}\` | \`node_modules/${dep}/${mainFile}\` |`;
+        })
+        .join('\n')
+    : '| _(none)_ | — |';
+
   const content = `# ${cfg.moduleName} — ThingWorx Custom Widget
 
 > ${cfg.description}
@@ -631,17 +877,25 @@ npm run buildProduction  # minified build     →  zip/
 ## Project Structure
 
 \`\`\`
-${cfg.packageName}/
+${wName}/
 ├── 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
+│   ├── ide/
+│   │   └── ${wName}.ide.js          ← Composer (IDE) behaviour & properties
+│   ├── runtime/
+│   │   └── ${wName}.runtime.js      ← Mashup runtime rendering & data
+│   └── assets/
+│       └── styles/
+│           ├── ${wName}.ide.css     ← Composer styles
+│           └── ${wName}.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
+├── .eslintrc
+├── .prettierrc
+├── .prettierignore
+└── .gitignore
 \`\`\`
 
 ## npm Scripts
@@ -652,6 +906,8 @@ ${cfg.packageName}/
 | \`npm run buildProduction\` | Production build (concat + minify) |
 | \`npm run upload\` | Dev build + upload to TWX |
 | \`npm run uploadProduction\` | Production build + upload to TWX |
+| \`npm run format\` | Format source files with Prettier |
+| \`npm run format:check\` | Check formatting without writing |
 
 ## Deploying to ThingWorx
 
@@ -664,20 +920,82 @@ ${cfg.packageName}/
 Edit \`package.json\` and set:
 - \`thingworxServer\` — e.g. \`http://localhost:8085\`
 - \`thingworxUser\` / \`thingworxPassword\`
+
+---
+
+## ⚠️ External Dependencies — Manual metadata.xml Step Required
+
+Dependencies listed in \`package.json → dependencies\` are **automatically copied to the build** by Gulp (using the \`main\` field from each package's \`package.json\`).
+
+However, **each dependency must also be manually declared in \`metadata.xml\`** as a \`<FileResource>\` entry so ThingWorx knows to load it in the Mashup runtime.
+
+### Your declared dependencies
+
+| Package | Source file (from node_modules) |
+|---|---|
+${depRows}
+
+### How to find the correct JS path for any library
+
+\`\`\`bash
+# 1. Install the package
+npm install <package-name>
+
+# 2. Find its main file
+node -e "const p = require('<package-name>/package.json'); console.log(p.main)"
+
+# Example for echarts:
+node -e "const p = require('echarts/package.json'); console.log(p.main)"
+# → dist/echarts.esm.js  (or similar)
+\`\`\`
+
+### metadata.xml snippet to add
+
+\`\`\`xml
+<!-- Add inside <UIResources>, with isDevelopment="false" isRuntime="true" -->
+<FileResource type="JS" file="echarts.js"
+  description="" isDevelopment="false" isRuntime="true"/>
+\`\`\`
+
+> The Gulp build renames each dependency to \`<package-name>.js\` in the output,
+> so the \`file\` attribute should always be \`<package-name>.js\`.
+
+---
+
+## How the Build Pipeline Works
+
+1. **\`cleanBuildDir\`** — wipes \`build/\`, \`zip/\`, \`lib/\`
+2. **\`copy\`** — copies \`src/**\` → \`build/ui/${wName}/\` and \`metadata.xml\` → \`build/\`
+3. **\`prepareBuild\`**
+   - Copies each \`dependencies\` entry from \`node_modules/<dep>/<main>\` → \`build/ui/${wName}/<dep>.js\`
+   - Babel transpiles all JS (removes ES module \`import\`/\`export\` for TWX compatibility)
+   - In \`--p\` mode: groups JS files by IDE/Runtime, concatenates + minifies with Terser, updates \`metadata.xml\`
+   - Zips \`build/\` → \`zip/${wName}-dev|min-<version>.zip\`
+4. **\`upload\`** (optional) — POSTs the zip to ThingWorx via the Extension Package Uploader servlet using \`undici\`
 `;
-  fs.writeFileSync(path.join(root, "README.md"), content);
+  fs.writeFileSync(path.join(root, 'README.md'), content);
 }
 
-// ─── Main scaffold ────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+// SCAFFOLD ORCHESTRATOR
+// ─────────────────────────────────────────────────────────────────────────────
 async function scaffold(cfg) {
   const root = path.resolve(process.cwd(), cfg.packageName);
 
   if (fs.existsSync(root)) {
-    err(`Directory "${cfg.packageName}" already exists. Aborting.`);
+    fail(`Directory "${cfg.packageName}" already exists. Aborting.`);
     process.exit(1);
   }
 
-  fs.mkdirSync(path.join(root, "src"), { recursive: true });
+  // Create all directories upfront
+  [
+    root,
+    path.join(root, 'src', 'ide'),
+    path.join(root, 'src', 'runtime'),
+    path.join(root, 'src', 'assets', 'styles'),
+    path.join(root, 'src', 'assets', 'images'),
+    path.join(root, 'src', 'lib'),
+  ].forEach((d) => fs.mkdirSync(d, { recursive: true }));
 
   writePackageJson(root, cfg);
   writeMetadataXml(root, cfg);
@@ -686,74 +1004,96 @@ async function scaffold(cfg) {
   writeRuntimeJs(root, cfg);
   writeIdeCss(root, cfg);
   writeRuntimeCss(root, cfg);
+  writeEslintrc(root);
+  writePrettierrc(root);
+  writePrettierIgnore(root);
   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)");
-  }
+  // Placeholder lib/A.js (mirrors sample project)
+  fs.writeFileSync(
+    path.join(root, 'src', 'lib', 'A.js'),
+    `/* Shared utilities — add reusable helpers here */\n`
+  );
 
   return root;
 }
 
-// ─── Print file tree ──────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+// PRINT TREE
+// ─────────────────────────────────────────────────────────────────────────────
 function printTree(root, cfg) {
-  const rel = f => path.relative(root, f);
+  const wName = cfg.packageName;
   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)"] : []),
+    'package.json',
+    'gulpfile.js',
+    'metadata.xml',
+    '.eslintrc',
+    '.prettierrc',
+    '.prettierignore',
+    '.gitignore',
+    'README.md',
+    `src/ide/${wName}.ide.js`,
+    `src/runtime/${wName}.runtime.js`,
+    `src/assets/styles/${wName}.ide.css`,
+    `src/assets/styles/${wName}.runtime.css`,
+    'src/lib/A.js',
   ];
 
-  log("");
-  log(`  ${c.bold}${cfg.packageName}/${c.reset}`);
+  log('');
+  log(`  ${c.bold}${wName}/${c.reset}`);
   files.forEach((f, i) => {
-    const last   = i === files.length - 1;
-    const prefix = last ? "└──" : "├──";
+    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 ────────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+// 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,
+    input: process.stdin,
     output: process.stdout,
-    terminal: process.stdin.isTTY, // disable echo in pipe mode
+    terminal: process.stdin.isTTY,
   });
 
   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)"]);
+  log(`  ${c.dim}Press Enter to accept defaults shown in (parentheses).${c.reset}`);
+  log('');
+
+  const packageName = await prompt(
+    rl,
+    'Widget package name (PascalCase, e.g. MyChartWidget)',
+    'MyWidget'
+  );
+  const moduleName = await prompt(rl, 'Display name in Composer', packageName);
+  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('');
+  log(`  ${c.cyan}?${c.reset} External npm dependencies to install (space-separated).`);
+  log(`  ${c.dim}  These will be auto-copied to build/ and added to package.json.${c.reset}`);
+  log(`  ${c.dim}  You must still add each one to metadata.xml manually (see README).${c.reset}`);
+  log(`  ${c.dim}  Example:  echarts datatable xyz${c.reset}`);
+  const depsRaw = await prompt(rl, 'Dependencies', 'echarts');
 
   rl.close();
 
+  const extraDeps = depsRaw
+    .split(/\s+/)
+    .map((d) => d.trim())
+    .filter(Boolean);
+
   const cfg = {
     packageName,
     moduleName,
@@ -764,41 +1104,59 @@ async function main() {
     twxServer,
     twxUser,
     twxPassword,
-    library:      library.startsWith("echarts") ? "echarts" : "none",
-    widgetClass:  packageName, // used for file names: MyWidget.ide.js etc.
+    extraDeps,
   };
 
-  log("");
-  info(`Scaffolding ${c.bold}${packageName}${c.reset}...`);
-  log("");
+  log('');
+  info(
+    `Scaffolding ${c.bold}${packageName}${c.reset} with deps: ${c.yellow}${extraDeps.join(', ') || '(none)'}${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}`));
+  ok('package.json');
+  ok("gulpfile.js  (Gulp 5 + undici — no deprecated 'request')");
+  ok('metadata.xml  (with dep FileResource stubs + inline instructions)');
+  ok('.eslintrc');
+  ok('.prettierrc');
+  ok('.prettierignore');
+  ok('.gitignore');
+  ok('README.md  (dep resolution guide included)');
+  ok(`src/ide/${packageName}.ide.js`);
+  ok(`src/runtime/${packageName}.runtime.js`);
+  ok(`src/assets/styles/${packageName}.ide.css`);
+  ok(`src/assets/styles/${packageName}.runtime.css`);
+  ok('src/lib/A.js');
 
   printTree(root, cfg);
 
-  log("");
+  log('');
   log(`  ${c.bold}${c.green}✨ Done!${c.reset}  Your widget is ready.`);
-  log("");
+  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}`);
+  if (extraDeps.length) {
+    log('');
+    log(`  ${c.yellow}  ⚠️  External dependencies — manual metadata.xml step required:${c.reset}`);
+    extraDeps.forEach((dep) => {
+      log(
+        `  ${c.yellow}    • Add <FileResource type="JS" file="${dep}.js" isDevelopment="false" isRuntime="true"/>  to metadata.xml${c.reset}`
+      );
+    });
+    log(`  ${c.dim}  See README.md → "External Dependencies" for the full guide.${c.reset}`);
   }
+  log('');
   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("");
+  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); });
+main().catch((e) => {
+  fail(String(e));
+  process.exit(1);
+});