lucid-package 0.0.90 → 0.0.92

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lucid-package",
-    "version": "0.0.90",
+    "version": "0.0.92",
     "description": "",
     "main": "index.js",
     "bin": {
@@ -21,7 +21,12 @@
         "access": "public"
     },
     "dependencies": {
+        "@inquirer/checkbox": "^1.5.0",
+        "@inquirer/confirm": "^2.0.15",
+        "@inquirer/input": "^1.2.14",
+        "@inquirer/select": "^1.3.1",
         "argparse": "^2.0.1",
+        "chalk": "4.1.2",
         "chokidar": "^3.5.3",
         "express": "^4.17.1",
         "hjson": "^3.2.2",

package/src/angularframeworkutils.d.ts

@@ -0,0 +1 @@
+export declare function createAngularEditorExtension(name: string, isInternalTesting: boolean, skipSDKDependency: boolean): Promise<void>;

package/src/angularframeworkutils.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createAngularEditorExtension = void 0;
+const fs = require("fs/promises");
+const path = require("path");
+const editorextension_1 = require("./editorextension");
+const installationutil_1 = require("./installationutil");
+const package_1 = require("./package");
+const theme_1 = require("./theme");
+async function createAngularEditorExtension(name, isInternalTesting, skipSDKDependency) {
+    await (0, editorextension_1.createEditorExtension)(name, isInternalTesting, skipSDKDependency, path.join('angular', 'skeleton'), [
+        'webpack-shell-plugin-next',
+    ]);
+    const angularProjectName = name;
+    const angularEditorExtensionTargetFolder = path.join(process.cwd(), angularProjectName);
+    console.log((0, theme_1.success)('Creating Angular project in ' + angularEditorExtensionTargetFolder));
+    (0, installationutil_1.installAngularProject)(angularProjectName);
+    const webpackConfig = (await fs.readFile('webpack.config.js', 'utf8')).replace('<<dynamicname>>', angularProjectName);
+    const extensionTemplateCode = (await fs.readFile(path.join('src', 'extension.ts'), 'utf8')).replace('<<dynamicname>>', angularProjectName);
+    await fs.writeFile(path.join(process.cwd(), 'webpack.config.js'), webpackConfig);
+    await fs.writeFile(path.join('src', 'extension.ts'), extensionTemplateCode);
+    process.chdir(path.join(angularProjectName));
+    const packageJson = await (0, package_1.readJson)('package.json');
+    packageJson.name = angularProjectName;
+    await fs.writeFile('package.json', JSON.stringify(packageJson, null, 4));
+    console.log('Installing Angular dependencies');
+    (0, installationutil_1.installDependenciesIfNeeded)(isInternalTesting, skipSDKDependency);
+}
+exports.createAngularEditorExtension = createAngularEditorExtension;

package/src/dataconnector.js

@@ -5,8 +5,9 @@ const path = require("path");
 const filesystemutil_1 = require("./filesystemutil");
 const installationutil_1 = require("./installationutil");
 const package_1 = require("./package");
+const theme_1 = require("./theme");
 async function createDataConnector(name, isInternalTesting, skipSDKDependency) {
-    console.log('Creating data connector in dataconnectors/' + name);
+    console.log((0, theme_1.success)('Creating data connector in dataconnectors/' + name));
     const source = path.join(__dirname, '..', 'templates', 'dataconnector');
     const targetFolder = path.join('dataconnectors', name);
     (0, filesystemutil_1.copyFolderRecursiveSync)(source, targetFolder);

package/src/editorextension.d.ts

@@ -1,5 +1,5 @@
 import { Compiler } from 'webpack';
-export declare function createEditorExtension(name: string, isInternalTesting: boolean, skipSDKDependency: boolean): Promise<void>;
+export declare function createEditorExtension(name: string, isInternalTesting: boolean, skipSDKDependency: boolean, source?: string, deps?: string[]): Promise<void>;
 export declare function buildEditorExtension(name: string, isInternalTesting: boolean, quiet?: boolean): Promise<void>;
 export declare function updateExtensionSDK(name: string): Promise<void>;
 /**
@@ -17,3 +17,4 @@ export declare function watchEditorExtension(name: string, isInternalTesting: bo
  * @param quiet If true, will only show errors in output
  */
 export declare function debugEditorExtension(extensionNames: string[], isInternalTesting: boolean, quiet?: boolean, pickAnyPort?: boolean): Promise<void>;
+export declare function getAllExtensionNames(): Promise<string[]>;

package/src/editorextension.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.debugEditorExtension = exports.watchEditorExtension = exports.updateExtensionSDK = exports.buildEditorExtension = exports.createEditorExtension = void 0;
+exports.getAllExtensionNames = exports.debugEditorExtension = exports.watchEditorExtension = exports.updateExtensionSDK = exports.buildEditorExtension = exports.createEditorExtension = void 0;
 const express = require("express");
 const oldFs = require("fs");
 const fs = require("fs/promises");
@@ -13,17 +13,19 @@ const packagemanifest_1 = require("./packagemanifest");
 const shapelibrary_1 = require("./shapelibrary");
 const shellutil_1 = require("./shellutil");
 const supportedproduct_1 = require("./supportedproduct");
+const child_process_1 = require("child_process");
+const theme_1 = require("./theme");
 const webpack = require('webpack');
 const WebPackCLI = require('webpack-cli');
 const ws = require('ws');
 const chokidar = require('chokidar');
-async function createEditorExtension(name, isInternalTesting, skipSDKDependency) {
-    const editorExtensionSource = path.join(__dirname, '..', 'templates', 'editorextension');
+async function createEditorExtension(name, isInternalTesting, skipSDKDependency, source = 'vanilla', deps = []) {
+    const editorExtensionSource = path.join(__dirname, '..', 'templates', 'editorextension', source);
     const editorExtensionTargetFolder = path.join('editorextensions', name);
     const publicSource = path.join(__dirname, '..', 'templates', 'public');
     const publicTargetFolder = 'public';
     const codePath = path.join('editorextensions', name, 'bin', 'extension.js');
-    console.log('Creating empty editor extension in ' + editorExtensionTargetFolder);
+    console.log((0, theme_1.success)('Creating empty editor extension in ' + editorExtensionTargetFolder));
     (0, filesystemutil_1.copyFolderRecursiveSync)(editorExtensionSource, editorExtensionTargetFolder);
     (0, filesystemutil_1.copyFolderRecursiveSync)(publicSource, publicTargetFolder);
     await (0, package_1.modifyManifest)((manifest) => {
@@ -40,7 +42,7 @@ async function createEditorExtension(name, isInternalTesting, skipSDKDependency)
     });
     console.log(`Installing dependencies`);
     process.chdir(editorExtensionTargetFolder);
-    (0, installationutil_1.installDependenciesIfNeeded)(isInternalTesting, skipSDKDependency);
+    (0, installationutil_1.installDependenciesIfNeeded)(isInternalTesting, skipSDKDependency, deps);
 }
 exports.createEditorExtension = createEditorExtension;
 async function buildEditorExtension(name, isInternalTesting, quiet = false) {
@@ -54,7 +56,7 @@ exports.buildEditorExtension = buildEditorExtension;
 async function updateExtensionSDK(name) {
     const extensionCodePath = path.join('editorextensions', await getExtensionCodeDirectoryName(name));
     process.chdir(extensionCodePath);
-    console.log('Installing latest SDK in extension ' + name);
+    console.log((0, theme_1.success)('Installing latest SDK in extension ' + name));
     console.log((0, shellutil_1.execSyncLoggingOutputOnError)('npm install lucid-extension-sdk@latest').toString());
 }
 exports.updateExtensionSDK = updateExtensionSDK;
@@ -91,6 +93,7 @@ exports.watchEditorExtension = watchEditorExtension;
 async function debugEditorExtension(extensionNames, isInternalTesting, quiet = false, pickAnyPort = false) {
     const port = 9900;
     const watchers = await Promise.all(extensionNames.map(async (name) => watchEditorExtension(name, isInternalTesting, quiet)));
+    startCustomUIServers(extensionNames);
     const app = express();
     const server = listen(app, port, pickAnyPort);
     setupWebSockets(server);
@@ -203,7 +206,7 @@ exports.debugEditorExtension = debugEditorExtension;
 function listen(app, port, pickAnyPort) {
     return app
         .listen(port, 'localhost', () => {
-        console.log('Listening at http://localhost:' + port + '/extension.js');
+        console.log((0, theme_1.success)('Listening at http://localhost:' + port + '/extension.js'));
         (0, shapelibrary_1.debugShapeLibraries)(undefined, pickAnyPort);
     })
         .on('error', (err) => {
@@ -309,3 +312,53 @@ function getExtensionProducts(product, products) {
     }
     throw new Error('Either "product" or "products" must be spcified for the editor extension in the package manifest');
 }
+async function getAllExtensionNames() {
+    const manifest = await (0, packagemanifest_1.readManifest)('local');
+    if (manifest.extensions) {
+        return manifest.extensions.map(extn => extn.name);
+    }
+    else {
+        return [];
+    }
+}
+exports.getAllExtensionNames = getAllExtensionNames;
+async function startCustomUIServers(extensionNames) {
+    for (let extensionName of extensionNames) {
+        const extensionCodePath = path.resolve(path.join('editorextensions', await getExtensionCodeDirectoryName(extensionName)));
+        const potentialCustomUIServer = (await fs.readdir(extensionCodePath, { withFileTypes: true })).filter(dirent => dirent.isDirectory()).map(dirent => path.join(extensionCodePath, dirent.name));
+        for (let potentialPaths of potentialCustomUIServer) {
+            runNpmStartIfExists(potentialPaths);
+        }
+    }
+}
+async function runNpmStartIfExists(directoryPath) {
+    try {
+        // Read the package.json file
+        const packageJsonPath = path.join(directoryPath, 'package.json');
+        if (oldFs.existsSync(packageJsonPath)) {
+            const packageJson = await fs.readFile(packageJsonPath, 'utf-8');
+            const packageData = JSON.parse(packageJson);
+            // Check if package.json has "scripts" object and it contains "start"
+            if (packageData && packageData.scripts && packageData.scripts.start) {
+                console.log((0, theme_1.success)(`Found npm start script in ${directoryPath}.`));
+                // Execute npm start
+                const npmStart = (0, child_process_1.spawn)('npm', ['start'], { cwd: directoryPath, stdio: ['inherit', 'pipe', 'pipe'] });
+                npmStart.stdout.on('data', (data) => {
+                    process.stdout.write(data);
+                });
+                npmStart.stderr.on('data', (data) => {
+                    process.stderr.write(data);
+                });
+                npmStart.on('exit', (code) => {
+                    console.log(`npm start process exited with code ${code}`);
+                });
+            }
+            else {
+                console.log(`No npm start script found in ${directoryPath}.`);
+            }
+        }
+    }
+    catch (error) {
+        console.error(error(`Error occurred: ${error.message}`));
+    }
+}

package/src/index.js

@@ -2,9 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const argparse_1 = require("argparse");
 const path = require("path");
+const angularframeworkutils_1 = require("./angularframeworkutils");
 const dataconnector_1 = require("./dataconnector");
 const editorextension_1 = require("./editorextension");
+const interactive = require("./interactibilityutil");
 const package_1 = require("./package");
+const reactframeworkutils_1 = require("./reactframeworkutils");
 const shapelibrary_1 = require("./shapelibrary");
 class LucidSuiteExtensionCLI {
     async run(args) {
@@ -22,7 +25,7 @@ class LucidSuiteExtensionCLI {
         const createParser = subparsers.add_parser('create', {
             help: 'Create a new Lucid extension package in a new directory',
         });
-        createParser.add_argument('name', { type: 'str' });
+        createParser.add_argument('name', { nargs: '?', type: 'str' });
         const packageParser = subparsers.add_parser('bundle', {
             help: 'Prepare the current package for upload to the developer dashboard',
         });
@@ -133,7 +136,49 @@ class LucidSuiteExtensionCLI {
         }
         switch (parsed['command']) {
             case 'create':
-                (0, package_1.createEmptyPackage)(parsed['name']);
+                if (parsed['name'] == null) {
+                    parsed['name'] = await interactive.inputPrompt('Please enter the name of the Lucid Package');
+                }
+                await (0, package_1.createEmptyPackage)(parsed['name']);
+                const options = ['Editor Extension', 'Shape Library', 'Data Connector'];
+                const choices = await interactive.multiSelect('Select components to add to package (can select none or more than one)', options);
+                const packagePath = path.join(process.cwd(), parsed['name']);
+                for (let choice of choices) {
+                    switch (choice) {
+                        case 0:
+                            process.chdir(packagePath);
+                            const editorExtensionName = await interactive.inputPrompt('Please enter the name of the editor extension');
+                            const wantFramework = await interactive.confirmPrompt('Do you want to use a framework for custom UI?');
+                            if (wantFramework) {
+                                const options = ['Angular', 'React'];
+                                const choice = await interactive.selectPrompt('Please select a framework', options);
+                                switch (choice) {
+                                    case 0:
+                                        await (0, angularframeworkutils_1.createAngularEditorExtension)(editorExtensionName, isInternalTesting, false);
+                                        break;
+                                    case 1:
+                                        const options = ['Javascript', 'Typescript'];
+                                        const choice = await interactive.selectPrompt('Please select flavor', options);
+                                        await (0, reactframeworkutils_1.createReactEditorExtension)(editorExtensionName, options[choice], isInternalTesting, false);
+                                        break;
+                                }
+                            }
+                            else {
+                                await (0, editorextension_1.createEditorExtension)(editorExtensionName, isInternalTesting, false);
+                            }
+                            break;
+                        case 1:
+                            process.chdir(packagePath);
+                            const shapeLibraryName = await interactive.inputPrompt('Please enter the name of the shape library');
+                            await (0, shapelibrary_1.createEmptyShapeLibrary)(shapeLibraryName);
+                            break;
+                        case 2:
+                            process.chdir(packagePath);
+                            const dataConnectorName = await interactive.inputPrompt('Please enter the name of the data connector');
+                            await (0, dataconnector_1.createDataConnector)(dataConnectorName, isInternalTesting, false);
+                            break;
+                    }
+                }
                 break;
             default:
                 // All the following commands can only be executed inside a Lucid extension package folder
@@ -174,6 +219,9 @@ class LucidSuiteExtensionCLI {
                             await (0, shapelibrary_1.debugShapeLibraries)();
                             break;
                         case 'test-editor-extension':
+                            if (parsed['name'].length === 0) {
+                                parsed['name'] = await (0, editorextension_1.getAllExtensionNames)();
+                            }
                             await (0, editorextension_1.debugEditorExtension)(parsed['name'], isInternalTesting, parsed['quiet'], parsed['anyport']);
                             break;
                         case 'watch-editor-extension':

package/src/installationutil.d.ts

@@ -1 +1,3 @@
-export declare function installDependenciesIfNeeded(isInternalTesting: boolean, skipSDKDependency?: boolean): void;
+export declare function installDependenciesIfNeeded(isInternalTesting: boolean, skipSDKDependency?: boolean, additionalDependencies?: string[]): void;
+export declare function installReactProject(reactProjectName: string, typescript: boolean): void;
+export declare function installAngularProject(angularProjectName: string): void;

package/src/installationutil.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.installDependenciesIfNeeded = void 0;
+exports.installAngularProject = exports.installReactProject = exports.installDependenciesIfNeeded = void 0;
 const oldFs = require("fs");
 const path = require("path");
 const shellutil_1 = require("./shellutil");
-function installDependenciesIfNeeded(isInternalTesting, skipSDKDependency = false) {
+const theme_1 = require("./theme");
+function installDependenciesIfNeeded(isInternalTesting, skipSDKDependency = false, additionalDependencies = []) {
     if (!oldFs.existsSync('node_modules')) {
         console.log((0, shellutil_1.execSyncLoggingOutputOnError)('npm install --silent').toString());
     }
@@ -14,8 +15,19 @@ function installDependenciesIfNeeded(isInternalTesting, skipSDKDependency = fals
         oldFs.rmSync(sdkDir, { recursive: true, force: true });
     }
     else if (!oldFs.existsSync(sdkDir) && !skipSDKDependency) {
-        console.log('Adding dependency on SDK');
+        console.log((0, theme_1.success)('Adding dependency on SDK'));
         console.log((0, shellutil_1.execSyncLoggingOutputOnError)('npm install --save lucid-extension-sdk').toString());
     }
+    if (additionalDependencies.length) {
+        console.log((0, shellutil_1.execSyncLoggingOutputOnError)(`npm install --silent ${additionalDependencies.reduce((acc, current) => `${acc} ${current}`, '')}`).toString());
+    }
 }
 exports.installDependenciesIfNeeded = installDependenciesIfNeeded;
+function installReactProject(reactProjectName, typescript) {
+    console.log((0, shellutil_1.execSyncLoggingOutputOnError)(`npm install create-react-app && npx create-react-app ${reactProjectName} ${typescript ? '--template typescript' : ''}`).toString());
+}
+exports.installReactProject = installReactProject;
+function installAngularProject(angularProjectName) {
+    console.log((0, shellutil_1.execSyncLoggingOutputOnError)(`npm install @angular/cli && npx ng new ${angularProjectName}`).toString());
+}
+exports.installAngularProject = installAngularProject;

package/src/interactibilityutil.d.ts

@@ -0,0 +1,4 @@
+export declare function selectPrompt(message: string, options: string[]): Promise<number>;
+export declare function inputPrompt(message: string): Promise<string>;
+export declare function confirmPrompt(message: string): Promise<boolean>;
+export declare function multiSelect(message: string, options: string[]): Promise<number[]>;

package/src/interactibilityutil.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.multiSelect = exports.confirmPrompt = exports.inputPrompt = exports.selectPrompt = void 0;
+const checkbox_1 = require("@inquirer/checkbox");
+const confirm_1 = require("@inquirer/confirm");
+const input_1 = require("@inquirer/input");
+const select_1 = require("@inquirer/select");
+async function selectPrompt(message, options) {
+    return await (0, select_1.default)({
+        message: message,
+        choices: options.map((option, index) => ({ name: option, value: index })),
+    });
+}
+exports.selectPrompt = selectPrompt;
+async function inputPrompt(message) {
+    return await (0, input_1.default)({ message: message });
+}
+exports.inputPrompt = inputPrompt;
+async function confirmPrompt(message) {
+    return await (0, confirm_1.default)({ message: message });
+}
+exports.confirmPrompt = confirmPrompt;
+async function multiSelect(message, options) {
+    return await (0, checkbox_1.default)({
+        message: message,
+        choices: options.map((option, index) => ({ name: option, value: index })),
+    });
+}
+exports.multiSelect = multiSelect;

package/src/package.d.ts

@@ -1,6 +1,7 @@
 import { PackageManifest } from './packagemanifest';
 export declare function createEmptyPackage(root: string): Promise<void>;
 export declare function currentlyInPackage(): boolean;
+export declare function readJson(path: string): Promise<unknown>;
 export declare function modifyManifest(callback: (manifest: PackageManifest) => void | Promise<void>, manifestOverrideEnv?: string): Promise<void>;
 export declare function updateAllExtensionSDK(): Promise<void>;
 /**

package/src/package.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.writePackage = exports.updateAllExtensionSDK = exports.modifyManifest = exports.currentlyInPackage = exports.createEmptyPackage = void 0;
+exports.writePackage = exports.updateAllExtensionSDK = exports.modifyManifest = exports.readJson = exports.currentlyInPackage = exports.createEmptyPackage = void 0;
 const fsOld = require("fs");
 const fs = require("fs/promises");
 const JSZip = require("jszip");
@@ -11,8 +11,9 @@ const filesystemutil_1 = require("./filesystemutil");
 const packagemanifest_1 = require("./packagemanifest");
 const shapelibrary_1 = require("./shapelibrary");
 const shellutil_1 = require("./shellutil");
+const theme_1 = require("./theme");
 async function createEmptyPackage(root) {
-    console.log('Creating empty Lucid Suite package in ' + root);
+    console.log((0, theme_1.success)('Creating Lucid Suite package in ' + root));
     const source = path.join(__dirname, '..', 'templates', 'package');
     (0, filesystemutil_1.copyFolderRecursiveSync)(source, root);
 }
@@ -22,6 +23,10 @@ function currentlyInPackage() {
         fsOld.existsSync('manifest.json'));
 }
 exports.currentlyInPackage = currentlyInPackage;
+async function readJson(path) {
+    return JSON.parse(await fs.readFile(path, 'utf8'));
+}
+exports.readJson = readJson;
 const allScopes = new Set([
     'DOWNLOAD',
     'NETWORK',
@@ -77,7 +82,7 @@ async function writePackage(quiet = false, manifestOverrideEnv) {
             const parts = extension['codePath'].split(path.sep);
             if (parts[0] === 'editorextensions') {
                 //Can't just call the method, as the WebpackCLI class does process.exit(2) :facepalm:
-                console.log(`Compiling editor extension ${parts[1]}`);
+                console.log((0, theme_1.success)(`Compiling editor extension ${parts[1]}`));
                 // Quotes are needed around every use of a path to deal with spaces
                 const cmd = '"' +
                     process.argv[0] +
@@ -97,7 +102,7 @@ async function writePackage(quiet = false, manifestOverrideEnv) {
         for (const library of manifest['shapeLibraries'] || []) {
             const parts = library['lcszPath'].split(path.sep);
             if (parts[0] === 'shapelibraries') {
-                console.log(`Building shape library ${parts[1]}`);
+                console.log((0, theme_1.success)(`Building shape library ${parts[1]}`));
                 await (0, shapelibrary_1.buildShapeLibrary)(parts[1].replace('.lcsz', ''));
             }
             zip.file(library['lcszPath'], await fs.readFile(library['lcszPath']));
@@ -139,7 +144,7 @@ async function writePackage(quiet = false, manifestOverrideEnv) {
             compression: 'DEFLATE',
             compressionOptions: { level: 9 },
         });
-        console.log('Writing file package.zip');
+        console.log((0, theme_1.success)('Writing file package.zip'));
         const fileName = `package${manifestOverrideEnv ? `-${manifestOverrideEnv}` : ''}.zip`;
         await fs.writeFile(fileName, zipBytes);
     }, manifestOverrideEnv);

package/src/reactframeworkutils.d.ts

@@ -0,0 +1 @@
+export declare function createReactEditorExtension(name: string, flavor: string, isInternalTesting: boolean, skipSDKDependency: boolean): Promise<void>;

package/src/reactframeworkutils.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createReactEditorExtension = void 0;
+const fs = require("fs/promises");
+const path = require("path");
+const editorextension_1 = require("./editorextension");
+const installationutil_1 = require("./installationutil");
+const package_1 = require("./package");
+const theme_1 = require("./theme");
+async function createReactEditorExtension(name, flavor, isInternalTesting, skipSDKDependency) {
+    await (0, editorextension_1.createEditorExtension)(name, isInternalTesting, skipSDKDependency, path.join('react', 'skeleton'), [
+        'webpack-shell-plugin-next',
+    ]);
+    let typescript = false;
+    if (flavor === 'Javascript') {
+        typescript = false;
+    }
+    else if (flavor === 'Typescript') {
+        typescript = true;
+    }
+    else {
+        console.log((0, theme_1.error)('Unexpected flavor type'));
+        return;
+    }
+    const reactProjectName = name;
+    const reactEditorExtensionTargetFolder = path.join(process.cwd(), reactProjectName);
+    const publicTargetFolder = path.join(process.cwd(), '..', '..', 'public');
+    console.log((0, theme_1.success)('Creating React project in ' + reactEditorExtensionTargetFolder));
+    (0, installationutil_1.installReactProject)(reactProjectName, typescript);
+    await fs.mkdir(path.join(publicTargetFolder, name));
+    await copyFilesTo(path.join(reactEditorExtensionTargetFolder, 'public'), path.join(publicTargetFolder, name), [
+        '.png',
+        '.svg',
+        '.ico',
+    ]);
+    await copyFilesTo(path.join(reactEditorExtensionTargetFolder, 'src'), path.join(publicTargetFolder, name), [
+        '.png',
+        '.svg',
+        '.ico',
+    ]);
+    const webpackConfig = (await fs.readFile('webpack.config.js', 'utf8')).replace('<<dynamicname>>', reactProjectName);
+    const extensionTemplateCode = (await fs.readFile(path.join('src', 'extension.ts'), 'utf8')).replace('<<dynamicname>>', reactProjectName);
+    await fs.writeFile(path.join(process.cwd(), 'webpack.config.js'), webpackConfig);
+    await fs.writeFile(path.join('src', 'extension.ts'), extensionTemplateCode);
+    process.chdir(path.join(reactProjectName));
+    const packageJson = await (0, package_1.readJson)('package.json');
+    packageJson.name = reactProjectName;
+    await fs.writeFile('package.json', JSON.stringify(packageJson, null, 4));
+    /*
+    Hacky solution to change react template from create-react-app; susceptible to changes in create-react-app;
+    Out of the box, the logo from create-react-app uses the typescript imported .png file which does not work in our
+    extension since we need to specify the location of the image w.r.t the public folder of lucid-package.
+    The following lines replace that image location with that of copied image location in the package's public folder.
+    */
+    const appName = typescript ? 'App.tsx' : 'App.js';
+    const apptsx = (await fs.readFile(path.join('src', appName), 'utf8')).replace('{logo}', '"logo.svg"');
+    await fs.writeFile(path.join('src', appName), apptsx);
+    console.log('Installing React dependencies');
+    (0, installationutil_1.installDependenciesIfNeeded)(isInternalTesting, skipSDKDependency);
+}
+exports.createReactEditorExtension = createReactEditorExtension;
+async function copyFilesTo(sourceFolder, destFolder, endingWith) {
+    (await fs.readdir(sourceFolder))
+        .filter((filename) => endingWith.some((ext) => filename.endsWith(ext)))
+        .forEach((source) => fs.copyFile(path.join(sourceFolder, source), path.join(destFolder, source)));
+}

package/src/shapelibrary.js

@@ -10,6 +10,7 @@ const cors_1 = require("./cors");
 const filesystemutil_1 = require("./filesystemutil");
 const package_1 = require("./package");
 const packagemanifest_1 = require("./packagemanifest");
+const theme_1 = require("./theme");
 const hjson = require('hjson');
 const ws = require('ws');
 const chokidar = require('chokidar');
@@ -17,7 +18,7 @@ const sizeOf = require('image-size');
 async function createEmptyShapeLibrary(name) {
     const source = path.join(__dirname, '..', 'templates', 'shapelibrary');
     const targetFolder = path.join('shapelibraries', name);
-    console.log('Creating shape library in ' + targetFolder);
+    console.log((0, theme_1.success)('Creating shape library in ' + targetFolder));
     (0, filesystemutil_1.copyFolderRecursiveSync)(source, targetFolder);
     await (0, package_1.modifyManifest)((manifest) => {
         if (!manifest['shapeLibraries']) {
@@ -32,7 +33,7 @@ async function createEmptyShapeLibrary(name) {
 }
 exports.createEmptyShapeLibrary = createEmptyShapeLibrary;
 async function createImageShapeLibrary(name, imagePath, config) {
-    console.log('Creating image shape library in ' + path.join('shapelibraries', name));
+    console.log((0, theme_1.success)('Creating image shape library in ' + path.join('shapelibraries', name)));
     if (!fsSync.lstatSync(imagePath).isDirectory()) {
         console.error('The provided path `' + imagePath + '` is not a folder');
         return;
@@ -58,7 +59,7 @@ async function createImageShapeLibrary(name, imagePath, config) {
                 console.log('dimen of ' + file + ': ' + dimen + ' - ' + JSON.stringify(dimen));
             }
             catch (e) {
-                console.log('No dimensions found for ' + file);
+                console.log((0, theme_1.error)('No dimensions found for ' + file));
             }
         }
         const lockedArray = [];
@@ -249,7 +250,7 @@ async function buildShapeLibrary(name) {
     };
     await addToZip(`shapelibraries/${name}`);
     const zipBytes = await zip.generateAsync({ type: 'uint8array' });
-    console.log(`Writing file ${name}.lcsz`);
+    console.log((0, theme_1.success)(`Writing file ${name}.lcsz`));
     await fs.writeFile(`shapelibraries/${name}.lcsz`, zipBytes);
 }
 exports.buildShapeLibrary = buildShapeLibrary;
@@ -305,7 +306,7 @@ async function debugShapeLibraries(packagePath = '.', pickAnyPort = false) {
     });
     const listen = () => {
         const server = app.listen(port, 'localhost', () => {
-            console.log('Listening at http://localhost:' + port + '/shapeLibraries');
+            console.log((0, theme_1.success)('Listening at http://localhost:' + port + '/shapeLibraries'));
             //Watch for any shape library changes, and inform watchers that they need to refresh them.
             const wss = new ws.Server({ server, path: '/shapeLibraries/changes' });
             const sockets = [];

package/src/shellutil.js

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.execSyncLoggingOutputOnError = void 0;
 const child_process = require("child_process");
+const theme_1 = require("./theme");
 function execSyncLoggingOutputOnError(cmd) {
     try {
         return child_process.execSync(cmd);
     }
     catch (e) {
-        console.log(String(e.stdout));
-        console.error(String(e.stderr));
+        console.log((0, theme_1.error)(String(e.stdout)));
+        console.error((0, theme_1.error)(String(e.stderr)));
         throw e;
     }
 }

package/src/theme.d.ts

@@ -0,0 +1,3 @@
+export declare const error: any;
+export declare const warning: any;
+export declare const success: any;

package/src/theme.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.success = exports.warning = exports.error = void 0;
+const chalk = require("chalk");
+exports.error = chalk.bold.red;
+exports.warning = chalk.hex('#FFA500');
+exports.success = chalk.greenBright;

package/templates/editorextension/angular/skeleton/package.json

@@ -0,0 +1,8 @@
+{
+    "devDependencies": {
+        "raw-loader": "^4.0.2",
+        "ts-loader": "^9.2.6",
+        "typescript": "^4.5.2",
+        "webpack": "^5.64.4"
+    }
+}

package/templates/editorextension/angular/skeleton/src/extension.ts

@@ -0,0 +1,18 @@
+import {EditorClient, Panel, PanelLocation} from 'lucid-extension-sdk';
+
+const client = new EditorClient();
+
+export class RightPanel extends Panel {
+    private static icon = 'https://lucid.app/favicon.ico';
+
+    constructor(client: EditorClient) {
+        super(client, {
+            title: 'From Angular',
+            url: '<<dynamicname>>/index.html',
+            location: PanelLocation.RightDock,
+            iconUrl: RightPanel.icon,
+        });
+    }
+}
+
+const rightPanel = new RightPanel(client);

package/templates/editorextension/{tsconfig.json → angular/skeleton/tsconfig.json}

@@ -22,13 +22,17 @@
         "strictPropertyInitialization": true,
         "target": "ES2017",
         "types": [],
-        "lib": ["es5", "es6", "ES2016.Array.Include", "ES2017.String", "ES2018.Promise", "ES2017.Object", "esnext.asynciterable"],
-        "outDir": "bin",
+        "lib": [
+            "es5",
+            "es6",
+            "ES2016.Array.Include",
+            "ES2017.String",
+            "ES2018.Promise",
+            "ES2017.Object",
+            "esnext.asynciterable"
+        ],
+        "outDir": "bin"
     },
-    "files":[
-        "resources/resource.d.ts",
-    ],
-    "include": [
-        "src/**/*"
-    ]
+    "files": ["resources/resource.d.ts"],
+    "include": ["src/**/*"]
 }

package/templates/editorextension/angular/skeleton/webpack.config.js

@@ -0,0 +1,59 @@
+const path = require('path');
+const WebpackShellPluginNext = require('webpack-shell-plugin-next');
+
+const angularTargets = [{name: '<<dynamicname>>', port: 4200}];
+
+module.exports = {
+    entry: './src/extension.ts',
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /[\\\/]resources[\\\/]/,
+                use: 'raw-loader',
+                exclude: /\.json$/,
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.ts', '.js'],
+    },
+    output: {
+        filename: 'bin/extension.js',
+        path: __dirname,
+    },
+    plugins: [
+        new WebpackShellPluginNext({
+            //When doing a watch build, run "ng serve" and update the html file to prefix http://localhost:4200/ to all the resource URLs
+            onWatchRun: {
+                scripts: angularTargets.map(
+                    (target) =>
+                        `mkdir -p ../../public/${target.name} &&` +
+                        `curl http://localhost:${target.port} | ` +
+                        `sed -E "s/(src|href)=\\"/\\\\1=\\"http:\\/\\/localhost:${target.port}\\//gi" > ` +
+                        `../../public/${target.name}/index.html`,
+                ),
+                blocking: true,
+            },
+            //When doing a full build, run "ng build" and then copy all the assets to the root level public folder
+            onBeforeNormalRun: {
+                scripts: angularTargets.map(
+                    (target) =>
+                        `mkdir -p ../../public/${target.name} &&` +
+                        `cd ${target.name} && ` +
+                        // `npx ng build` usually works, but this is more reliable when used with build tools such as bazel
+                        `./node_modules/.bin/ng build && ` +
+                        `cp -r dist/${target.name}/* ../../../public/${target.name}`,
+                ),
+                blocking: true,
+                swallowError: false,
+                safe: true,
+            },
+        }),
+    ],
+    mode: 'development',
+};

package/templates/editorextension/react/skeleton/package.json

@@ -0,0 +1,8 @@
+{
+    "devDependencies": {
+        "raw-loader": "^4.0.2",
+        "ts-loader": "^9.2.6",
+        "typescript": "^4.5.2",
+        "webpack": "^5.64.4"
+    }
+}

package/templates/editorextension/react/skeleton/resources/resource.d.ts

@@ -0,0 +1,9 @@
+declare module '*.html' {
+    const content: string;
+    export default content;
+}
+
+declare module '*.json' {
+    const content: Record<string, string>;
+    export default content;
+}

package/templates/editorextension/react/skeleton/src/extension.ts

@@ -0,0 +1,18 @@
+import {EditorClient, Panel, PanelLocation} from 'lucid-extension-sdk';
+
+const client = new EditorClient();
+
+export class RightPanel extends Panel {
+    private static icon = 'https://lucid.app/favicon.ico';
+
+    constructor(client: EditorClient) {
+        super(client, {
+            title: 'From React',
+            url: '<<dynamicname>>/index.html',
+            location: PanelLocation.RightDock,
+            iconUrl: RightPanel.icon,
+        });
+    }
+}
+
+const rightPanel = new RightPanel(client);

package/templates/editorextension/react/skeleton/src/interop.d.ts

@@ -0,0 +1,61 @@
+/** @ignore */
+declare namespace lucid {
+    export function executeCommand(name: string, params: any): any;
+    export function listen(msg: any): void;
+    export function getPackageId(): string;
+    export function getVersion(): string;
+}
+
+/** @ignore */
+declare const console: Console;
+
+// from lib.dom.d.ts
+/** @ignore */
+interface Console {
+    assert(condition?: boolean, ...data: any[]): void;
+    clear(): void;
+    count(label?: string): void;
+    countReset(label?: string): void;
+    debug(...data: any[]): void;
+    dir(item?: any, options?: any): void;
+    dirxml(...data: any[]): void;
+    error(...data: any[]): void;
+    group(...data: any[]): void;
+    groupCollapsed(...data: any[]): void;
+    groupEnd(): void;
+    info(...data: any[]): void;
+    log(...data: any[]): void;
+    table(tabularData?: any, properties?: string[]): void;
+    time(label?: string): void;
+    timeEnd(label?: string): void;
+    timeLog(label?: string, ...data: any[]): void;
+    timeStamp(label?: string): void;
+    trace(...data: any[]): void;
+    warn(...data: any[]): void;
+}
+
+declare class I18nSafeString {
+    public value: string;
+    constructor(str: string);
+}
+
+declare interface I18nFormattedNumberParams {
+    useGrouping?: boolean;
+    minimumIntegerDigits?: number;
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+}
+
+declare class I18nFormattedNumber {}
+
+declare interface I18nReplacement {
+    [s: string]: number | string | I18nSafeString | I18nFormattedNumber;
+}
+
+declare namespace i18n {
+    function setData(data: {[key: string]: string}, language: string): void;
+    function get(key: string, replacements?: I18nReplacement, wrappers?: string[], gender?: string): string;
+    function getLanguage(): string;
+    function getInLocale(locale: string, key: string, replacements?: I18nReplacement, wrappers?: string[]): string;
+    function formatNumber(value: number, params: I18nFormattedNumberParams): I18nFormattedNumber;
+}

package/templates/editorextension/react/skeleton/tsconfig.json

@@ -0,0 +1,38 @@
+{
+    "compilerOptions": {
+        "declaration": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "forceConsistentCasingInFileNames": true,
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "newLine": "lf",
+        "noEmitOnError": false,
+        "noImplicitAny": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noUnusedLocals": false,
+        "pretty": true,
+        "removeComments": false,
+        "skipLibCheck": true,
+        "sourceMap": false,
+        "strictBindCallApply": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "strictPropertyInitialization": true,
+        "target": "ES2017",
+        "types": [],
+        "lib": [
+            "es5",
+            "es6",
+            "ES2016.Array.Include",
+            "ES2017.String",
+            "ES2018.Promise",
+            "ES2017.Object",
+            "esnext.asynciterable"
+        ],
+        "outDir": "bin"
+    },
+    "files": ["resources/resource.d.ts"],
+    "include": ["src/**/*"]
+}

package/templates/editorextension/react/skeleton/webpack.config.js

@@ -0,0 +1,57 @@
+const path = require('path');
+const WebpackShellPluginNext = require('webpack-shell-plugin-next');
+
+const reactTargets = [{name: '<<dynamicname>>', port: 3000}];
+
+module.exports = {
+    entry: './src/extension.ts',
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /[\\\/]resources[\\\/]/,
+                use: 'raw-loader',
+                exclude: /\.json$/,
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.ts', '.js'],
+    },
+    output: {
+        filename: 'bin/extension.js',
+        path: __dirname,
+    },
+    plugins: [
+        new WebpackShellPluginNext({
+            //When doing a watch build, run "npm start" and update the html file to prefix http://localhost:3000/ to all the resource URLs
+            onWatchRun: {
+                scripts: reactTargets.map(
+                    (target) =>
+                        `mkdir -p ../../public/${target.name} &&` +
+                        `curl http://localhost:${target.port} | ` +
+                        `sed -E "s/(src|href)=\\"/\\\\1=\\"http:\\/\\/localhost:${target.port}\/gi" > ` +
+                        `../../public/${target.name}/index.html`,
+                ),
+                blocking: true,
+            },
+            // When doing a full build, run "npm run build" and then copy all the assets to the root level public folder
+            onBeforeNormalRun: {
+                scripts: reactTargets.map(
+                    (target) =>
+                        `mkdir -p ../../public/${target.name} &&` +
+                        `cd ${target.name} && ` +
+                        `npm run build && ` +
+                        `sed -i -E "s/(src|href)=\\"\\//\\1=\\"\/gi" build/index.html &&` +
+                        `cp -r build/* ../../../public/${target.name}`,
+                ),
+                blocking: true,
+            },
+        }),
+    ],
+    mode: 'development',
+};

package/templates/editorextension/vanilla/resources/resource.d.ts

@@ -0,0 +1,9 @@
+declare module '*.html' {
+    const content: string;
+    export default content;
+}
+
+declare module '*.json' {
+    const content: Record<string, string>;
+    export default content;
+}

package/templates/editorextension/vanilla/src/interop.d.ts

@@ -0,0 +1,61 @@
+/** @ignore */
+declare namespace lucid {
+    export function executeCommand(name: string, params: any): any;
+    export function listen(msg: any): void;
+    export function getPackageId(): string;
+    export function getVersion(): string;
+}
+
+/** @ignore */
+declare const console: Console;
+
+// from lib.dom.d.ts
+/** @ignore */
+interface Console {
+    assert(condition?: boolean, ...data: any[]): void;
+    clear(): void;
+    count(label?: string): void;
+    countReset(label?: string): void;
+    debug(...data: any[]): void;
+    dir(item?: any, options?: any): void;
+    dirxml(...data: any[]): void;
+    error(...data: any[]): void;
+    group(...data: any[]): void;
+    groupCollapsed(...data: any[]): void;
+    groupEnd(): void;
+    info(...data: any[]): void;
+    log(...data: any[]): void;
+    table(tabularData?: any, properties?: string[]): void;
+    time(label?: string): void;
+    timeEnd(label?: string): void;
+    timeLog(label?: string, ...data: any[]): void;
+    timeStamp(label?: string): void;
+    trace(...data: any[]): void;
+    warn(...data: any[]): void;
+}
+
+declare class I18nSafeString {
+    public value: string;
+    constructor(str: string);
+}
+
+declare interface I18nFormattedNumberParams {
+    useGrouping?: boolean;
+    minimumIntegerDigits?: number;
+    minimumFractionDigits?: number;
+    maximumFractionDigits?: number;
+}
+
+declare class I18nFormattedNumber {}
+
+declare interface I18nReplacement {
+    [s: string]: number | string | I18nSafeString | I18nFormattedNumber;
+}
+
+declare namespace i18n {
+    function setData(data: {[key: string]: string}, language: string): void;
+    function get(key: string, replacements?: I18nReplacement, wrappers?: string[], gender?: string): string;
+    function getLanguage(): string;
+    function getInLocale(locale: string, key: string, replacements?: I18nReplacement, wrappers?: string[]): string;
+    function formatNumber(value: number, params: I18nFormattedNumberParams): I18nFormattedNumber;
+}

package/templates/editorextension/vanilla/tsconfig.json

@@ -0,0 +1,38 @@
+{
+    "compilerOptions": {
+        "declaration": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "forceConsistentCasingInFileNames": true,
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "newLine": "lf",
+        "noEmitOnError": false,
+        "noImplicitAny": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "noUnusedLocals": false,
+        "pretty": true,
+        "removeComments": false,
+        "skipLibCheck": true,
+        "sourceMap": false,
+        "strictBindCallApply": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "strictPropertyInitialization": true,
+        "target": "ES2017",
+        "types": [],
+        "lib": [
+            "es5",
+            "es6",
+            "ES2016.Array.Include",
+            "ES2017.String",
+            "ES2018.Promise",
+            "ES2017.Object",
+            "esnext.asynciterable"
+        ],
+        "outDir": "bin"
+    },
+    "files": ["resources/resource.d.ts"],
+    "include": ["src/**/*"]
+}

package/templates/package/package.json

@@ -0,0 +1,16 @@
+{
+    "scripts": {
+        "create-editor-extension":"npx lucid-package create-editor-extension",
+        "create-shape-library":"npx lucid-package create-shape-library",
+        "create-data-connector":"npx lucid-package create-data-connector",
+        "create-image-shape-library":"npx lucid-package create-image-shape-library",
+
+        "test-editor-extension":"npx lucid-package test-editor-extension",
+        "test-shape-libraries":"npx lucid-package test-shape-libraries",
+        "test": "npx lucid-package test-editor-extension",
+
+        "start": "npx lucid-package test-editor-extension",
+
+        "bundle":"npx lucid-package bundle"
+       }
+}