lucid-package 0.0.15 → 0.0.20

package/README.md

@@ -6,72 +6,7 @@ CLI for creating and managing extension packages for the products of Lucid Softw
 
 ## Getting started
 
-### Step 1: Install `lucid-package` and create a new package
-
-An extension package is a set of Lucid product extensions that is installable by a Lucid
-account admin for use by all of their users. In order to start building an extension, you
-need to create a package to contain it.
-
-In a directory that will contain your extension packages:
-
-```
-npm install lucid-package
-npx lucid-package create my-new-package-name
-```
-
-### Step 2: Add an editor extension to your new package
-
-An editor extension is a piece of custom code that executes inside a Lucid product such
-as Lucidchart or Lucidspark. The `lucid-package` CLI provides a quick-start template to
-help you get up and running immediately.
-
-To add a new extension to your package:
-
-```
-cd my-new-package-name
-npx lucid-package create-editor-extension my-extension-name
-```
-
-### Step 3: Serve your extension code in debug mode to test it
-
-You don't need to package, upload, and install your extension in order to run it and
-make sure it works. The following command will start `webpack` on your code in `--watch`
-mode, and start up a local HTTP server that Lucid products can connect to, to load your
-latest code.
-
-To start the debug server:
-
-```
-npx lucid-package test-editor-extension my-extension-name
-```
-
-You can then enable loading of your local plugin in the Developer menu in Lucidchart
-by clicking `Load local extension`. The page will refresh and your extension code will run.
-
-The main entry point to your new editor extension is in `editorextensions/my-extension-name/src/extension.ts`.
-Experiment by changing code in that file and refreshing your browser tab to reload it.
-
-For all published extensions, and by default for this debug server as well, your code
-runs in a sandboxed JavaScript VM for security. However, this makes debugging difficult.
-If you turn on the `Debug local extensions (no sandbox)` option in the Developer menu,
-your code will be run via a scoped `eval`, allowing you to use the standard browser
-debugging tools to examine and step through your code.
-
-We recommend that you do all final validation of your extension with the normal
-sandbox enabled, however, as you may have inadvertently used features not allowed in
-the sandbox that won't work once you release your extension.
-
-### Step 4: Prepare your package for upload
-
-Once your editor extension works the way you want, you can package it for upload to the
-Lucid developer dashboard:
-
-```
-npx lucid-package package
-```
-
-This will create the file `package.zip` which is ready for upload to the [Lucid developer
-dashboard](https://lucid.app/developer).
+Please see our [Extension API Developer Docs](https://developer.lucid.co/extension-api/#lucid-extension-api).
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lucid-package",
-    "version": "0.0.15",
+    "version": "0.0.20",
     "description": "",
     "main": "index.js",
     "bin": {

package/src/editorextension.d.ts

@@ -1,4 +1,15 @@
 export declare function createEditorExtension(name: string, isInternalTesting: boolean): Promise<void>;
-export declare function buildEditorExtension(name: string): Promise<void>;
+export declare function buildEditorExtension(name: string, quiet?: boolean): Promise<void>;
 export declare function updateExtensionSDK(name: string): Promise<void>;
-export declare function debugEditorExtension(name: string): Promise<void>;
+/**
+ * Uses webpack to watch for changes in the editor extension
+ * @param name The editor extension name
+ * @param quiet If true, will only show errors in output
+ */
+export declare function watchEditorExtension(name: string, quiet?: boolean): Promise<void>;
+/**
+ * Runs the editor extensions and shape libraries in debug mode, including watching code for changes.
+ * @param extensionNames The names of the editor extensions
+ * @param quiet If true, will only show errors in output
+ */
+export declare function debugEditorExtension(extensionNames: string[], quiet?: boolean): Promise<void>;

package/src/editorextension.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.debugEditorExtension = exports.updateExtensionSDK = exports.buildEditorExtension = exports.createEditorExtension = void 0;
+exports.debugEditorExtension = exports.watchEditorExtension = exports.updateExtensionSDK = exports.buildEditorExtension = exports.createEditorExtension = void 0;
 const fs = require("fs/promises");
 const oldFs = require("fs");
 const filesystemutil_1 = require("./filesystemutil");
@@ -27,7 +27,7 @@ async function createEditorExtension(name, isInternalTesting) {
     });
     console.log(`Installing dependencies`);
     process.chdir('editorextensions/' + name);
-    console.log(child_process.execSync('npm install').toString());
+    console.log(child_process.execSync('npm install --silent').toString());
     if (isInternalTesting) {
         console.log('Using symlink for dependency on SDK for internal testing');
         console.log(child_process
@@ -40,10 +40,10 @@ async function createEditorExtension(name, isInternalTesting) {
     }
 }
 exports.createEditorExtension = createEditorExtension;
-async function buildEditorExtension(name) {
+async function buildEditorExtension(name, quiet = false) {
     process.chdir('editorextensions/' + name);
     const cli = new WebPackCLI();
-    await cli.run(['node', 'webpack', '--mode', 'production']);
+    await cli.run(['node', 'webpack', '--mode', 'production', ...(quiet ? ['--stats', 'errors-only'] : [])]);
 }
 exports.buildEditorExtension = buildEditorExtension;
 async function updateExtensionSDK(name) {
@@ -52,53 +52,85 @@ async function updateExtensionSDK(name) {
     console.log(child_process.execSync('npm install lucid-extension-sdk@latest').toString());
 }
 exports.updateExtensionSDK = updateExtensionSDK;
-async function debugEditorExtension(name) {
-    process.chdir('editorextensions/' + name);
+/**
+ * Uses webpack to watch for changes in the editor extension
+ * @param name The editor extension name
+ * @param quiet If true, will only show errors in output
+ */
+async function watchEditorExtension(name, quiet = false) {
+    process.chdir(`editorextensions/${name}`);
     const cli = new WebPackCLI();
-    cli.run(['node', 'webpack', '--watch']);
+    cli.run(['node', 'webpack', '--watch', ...(quiet ? ['--stats', 'errors-only'] : [])]);
+}
+exports.watchEditorExtension = watchEditorExtension;
+/**
+ * Runs the editor extensions and shape libraries in debug mode, including watching code for changes.
+ * @param extensionNames The names of the editor extensions
+ * @param quiet If true, will only show errors in output
+ */
+async function debugEditorExtension(extensionNames, quiet = false) {
+    await Promise.all(extensionNames.map(async (name) => {
+        const child = child_process.spawn(`${process.argv[0]} ${process.argv[1]} watch-editor-extension ${name} ${quiet ? '--quiet ' : ''}`, {
+            stdio: 'inherit',
+            shell: true,
+        });
+        return child;
+    }));
     const app = express();
     app.use((req, res, next) => {
         res.header('Access-Control-Allow-Origin', '*');
         res.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
         next();
     });
-    app.get('/extension.js', async (req, res) => {
+    app.get(['/extension.js', '/editorextension/:name/extension.js'], async (req, res) => {
+        var _a;
+        const name = (_a = req.params['name']) !== null && _a !== void 0 ? _a : extensionNames[0];
         //Give it several seconds for the extension to finish generating before failing.
         const before = Date.now();
-        while (!oldFs.existsSync('bin/extension.js') && Date.now() - before < 5000) {
+        while (!oldFs.existsSync(`editorextensions/${name}/bin/extension.js`) && Date.now() - before < 5000) {
             await new Promise((resolve) => setTimeout(resolve, 50));
         }
-        res.send((await fs.readFile('bin/extension.js')).toString());
+        res.send((await fs.readFile(`editorextensions/${name}/bin/extension.js`)).toString());
     });
-    app.get('/scopes', async (req, res) => {
-        var _a, _b;
-        const manifest = await (0, packagemanifest_1.readManifest)('../../');
-        res.send(JSON.stringify((_b = (_a = manifest['extensions']) === null || _a === void 0 ? void 0 : _a.find((extension) => extension['name'] === name)) === null || _b === void 0 ? void 0 : _b.scopes));
+    app.get(['/scopes', '/editorextension/:name/scopes'], async (req, res) => {
+        var _a, _b, _c;
+        const name = (_a = req.params['name']) !== null && _a !== void 0 ? _a : extensionNames[0];
+        const manifest = await (0, packagemanifest_1.readManifest)();
+        res.send(JSON.stringify((_c = (_b = manifest['extensions']) === null || _b === void 0 ? void 0 : _b.find((extension) => extension['name'] === name)) === null || _c === void 0 ? void 0 : _c.scopes));
     });
     app.get('/packageId', async (req, res) => {
         var _a;
-        const manifest = await (0, packagemanifest_1.readManifest)('../../');
+        const manifest = await (0, packagemanifest_1.readManifest)();
         res.send((_a = manifest['id']) !== null && _a !== void 0 ? _a : '__local__');
     });
-    app.get('/editorextension', async (req, res) => {
-        var _a, _b, _c, _d;
-        const manifest = await (0, packagemanifest_1.readManifest)('../../');
-        const extensionManifest = (_a = manifest['extensions']) === null || _a === void 0 ? void 0 : _a.find((one) => one['name'] === name);
-        res.send({
-            id: '__local__',
-            packageId: (_b = manifest['id']) !== null && _b !== void 0 ? _b : '__local__',
-            packageVersionId: '__local__',
-            version: manifest['version'],
-            name: name,
-            title: (_c = extensionManifest === null || extensionManifest === void 0 ? void 0 : extensionManifest['title']) !== null && _c !== void 0 ? _c : 'Local dev extension',
-            product: (_d = extensionManifest === null || extensionManifest === void 0 ? void 0 : extensionManifest['product']) !== null && _d !== void 0 ? _d : 'chart',
-            scopes: extensionManifest === null || extensionManifest === void 0 ? void 0 : extensionManifest['scopes'],
-            codeUrl: 'http://localhost:9900/extension.js',
-        });
+    app.get(['/editorextension', '/editorextension/:name'], async (req, res) => {
+        var _a;
+        const name = (_a = req.params['name']) !== null && _a !== void 0 ? _a : extensionNames[0];
+        const rawExtension = await getRawEditorExtension(name);
+        res.send(rawExtension);
+    });
+    app.get('/editorextensions', async (req, res) => {
+        res.send(await Promise.all(extensionNames.map((name) => getRawEditorExtension(name))));
     });
     app.listen(9900, 'localhost', () => {
         console.log('Listening at http://localhost:9900/extension.js');
     });
-    (0, shapelibrary_1.debugShapeLibraries)('../..');
+    (0, shapelibrary_1.debugShapeLibraries)();
 }
 exports.debugEditorExtension = debugEditorExtension;
+async function getRawEditorExtension(name) {
+    var _a, _b, _c, _d;
+    const manifest = await (0, packagemanifest_1.readManifest)();
+    const extensionManifest = (_a = manifest['extensions']) === null || _a === void 0 ? void 0 : _a.find((one) => one['name'] === name);
+    return {
+        id: '__local__',
+        packageId: (_b = manifest['id']) !== null && _b !== void 0 ? _b : '__local__',
+        packageVersionId: '__local__',
+        version: manifest['version'],
+        name: name,
+        title: (_c = extensionManifest === null || extensionManifest === void 0 ? void 0 : extensionManifest['title']) !== null && _c !== void 0 ? _c : 'Local dev extension',
+        product: (_d = extensionManifest === null || extensionManifest === void 0 ? void 0 : extensionManifest['product']) !== null && _d !== void 0 ? _d : 'chart',
+        scopes: extensionManifest === null || extensionManifest === void 0 ? void 0 : extensionManifest['scopes'],
+        codeUrl: `http://localhost:9900/editorextension/${name}/extension.js`,
+    };
+}

package/src/index.js

@@ -24,6 +24,11 @@ class LucidSuiteExtensionCLI {
         const packageParser = subparsers.add_parser('bundle', {
             help: 'Prepare the current package for upload to the developer dashboard',
         });
+        packageParser.add_argument('--quiet', {
+            default: false,
+            action: 'store_true',
+            help: argparse_1.SUPPRESS,
+        });
         const updateSDKParser = subparsers.add_parser('update-sdk', {
             help: 'Update the editor extension SDK to the latest published version for all editor extensions in this package',
         });
@@ -35,10 +40,29 @@ class LucidSuiteExtensionCLI {
             help: 'Compile an editor extension in production mode; use this to check types and validate final compiled output',
         });
         buildExtensionParser.add_argument('name');
+        buildExtensionParser.add_argument('--quiet', {
+            default: false,
+            action: 'store_true',
+            help: argparse_1.SUPPRESS,
+        });
         const testExtensionParser = subparsers.add_parser('test-editor-extension', {
-            help: 'Compile an editor extension in debug mode, and serve it at localhost:9900, along with any shape libraries in this package at localhost:9901. Watch for changes to the code and recompile as needed',
+            help: 'Compile one or more editor extensions in debug mode, and serve them at localhost:9900, along with any shape libraries in this package at localhost:9901. Watch for changes to the code and recompile as needed',
+        });
+        testExtensionParser.add_argument('name', { nargs: '*' });
+        testExtensionParser.add_argument('--quiet', {
+            default: false,
+            action: 'store_true',
+            help: argparse_1.SUPPRESS,
+        });
+        const watchExtensionParser = subparsers.add_parser('watch-editor-extension', {
+            help: 'Compile an editor extension in debug mode',
+        });
+        watchExtensionParser.add_argument('name');
+        watchExtensionParser.add_argument('--quiet', {
+            default: false,
+            action: 'store_true',
+            help: argparse_1.SUPPRESS,
         });
-        testExtensionParser.add_argument('name');
         const testShapeLibraries = subparsers.add_parser('test-shape-libraries', {
             help: 'Serve any shape libraries in this package at localhost:9901. Watch for changes to the code and live-update as needed',
         });
@@ -66,7 +90,7 @@ class LucidSuiteExtensionCLI {
                 break;
             case 'bundle':
                 if ((0, package_1.currentlyInPackage)()) {
-                    await (0, package_1.writePackage)();
+                    await (0, package_1.writePackage)(parsed['quiet']);
                 }
                 else {
                     console.error('Not currently in a Lucid extension package folder');
@@ -90,7 +114,7 @@ class LucidSuiteExtensionCLI {
                 break;
             case 'build-editor-extension':
                 if ((0, package_1.currentlyInPackage)()) {
-                    await (0, editorextension_1.buildEditorExtension)(parsed['name']);
+                    await (0, editorextension_1.buildEditorExtension)(parsed['name'], parsed['quiet']);
                 }
                 else {
                     console.error('Not currently in a Lucid extension package folder');
@@ -114,7 +138,15 @@ class LucidSuiteExtensionCLI {
                 break;
             case 'test-editor-extension':
                 if ((0, package_1.currentlyInPackage)()) {
-                    await (0, editorextension_1.debugEditorExtension)(parsed['name']);
+                    await (0, editorextension_1.debugEditorExtension)(parsed['name'], parsed['quiet']);
+                }
+                else {
+                    console.error('Not currently in a Lucid extension package folder');
+                }
+                break;
+            case 'watch-editor-extension':
+                if ((0, package_1.currentlyInPackage)()) {
+                    await (0, editorextension_1.watchEditorExtension)(parsed['name'], parsed['quiet']);
                 }
                 else {
                     console.error('Not currently in a Lucid extension package folder');

package/src/package.d.ts

@@ -3,4 +3,4 @@ export declare function createEmptyPackage(root: string): Promise<void>;
 export declare function currentlyInPackage(): boolean;
 export declare function modifyManifest(callback: (manifest: PackageManifest) => void | Promise<void>): Promise<void>;
 export declare function updateAllExtensionSDK(): Promise<void>;
-export declare function writePackage(): Promise<void>;
+export declare function writePackage(quiet?: boolean): Promise<void>;

package/src/package.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.writePackage = exports.updateAllExtensionSDK = exports.modifyManifest = exports.currentlyInPackage = exports.createEmptyPackage = void 0;
-const fs = require("fs/promises");
-const fsOld = require("fs");
-const filesystemutil_1 = require("./filesystemutil");
-const editorextension_1 = require("./editorextension");
 const child_process = require("child_process");
+const fsOld = require("fs");
+const fs = require("fs/promises");
 const JSZip = require("jszip");
-const shapelibrary_1 = require("./shapelibrary");
+const editorextension_1 = require("./editorextension");
+const filesystemutil_1 = require("./filesystemutil");
 const packagemanifest_1 = require("./packagemanifest");
+const shapelibrary_1 = require("./shapelibrary");
 async function createEmptyPackage(root) {
     console.log('Creating empty Lucid Suite package in ' + root);
     (0, filesystemutil_1.copyFolderRecursiveSync)(__dirname + '/../templates/package', root);
@@ -35,7 +35,7 @@ async function updateAllExtensionSDK() {
     }
 }
 exports.updateAllExtensionSDK = updateAllExtensionSDK;
-async function writePackage() {
+async function writePackage(quiet = false) {
     const zip = new JSZip();
     //Increment the patch number automatically on each build
     await modifyManifest(async (manifest) => {
@@ -55,7 +55,16 @@ async function writePackage() {
             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]}`);
-                const cmd = process.argv[0] + ' ' + process.argv[1] + ' build-editor-extension ' + parts[1];
+                // Quotes are needed around every use of a path to deal with spaces
+                const cmd = '"' +
+                    process.argv[0] +
+                    '" "' +
+                    process.argv[1] +
+                    '" build-editor-extension ' +
+                    (quiet ? '--quiet ' : '') +
+                    '"' +
+                    parts[1] +
+                    '"';
                 console.log(cmd);
                 console.log(child_process.execSync(cmd).toString());
             }

package/src/shapelibrary.js

@@ -41,10 +41,21 @@ async function getShapeListJson(name, packagePath) {
     const packageManifest = await (0, packagemanifest_1.readManifest)(packagePath + '/');
     const rawManifest = await fs.readFile(packagePath + `/shapelibraries/${name}/library.manifest`);
     const manifest = hjson.parse(rawManifest.toString());
+    const usedNames = new Set(manifest['shapes'].map((shape) => shape['key']).filter((key) => key !== undefined));
     return JSON.stringify(await Promise.all(manifest['shapes'].map(async (shapeManifest, index) => {
         var _a, _b;
         const rawShapeData = await fs.readFile(packagePath + `/shapelibraries/${name}/shapes/${shapeManifest['shape']}.shape`);
         const shapeData = hjson.parse(rawShapeData.toString());
+        let shapeName = shapeManifest['key'];
+        if (shapeName === undefined) {
+            shapeName = shapeManifest['shape'];
+            let suffixNumber = 1;
+            while (usedNames.has(shapeName)) {
+                suffixNumber++;
+                shapeName = shapeManifest['shape'] + '_' + suffixNumber;
+            }
+            usedNames.add(shapeName);
+        }
         const properties = {
             'Base': { 'x': shapeManifest['defaults']['width'] / 2, 'y': shapeManifest['defaults']['height'] / 2 },
             'BoundingBox': {
@@ -59,13 +70,14 @@ async function getShapeListJson(name, packagePath) {
             },
             'Stencil': {
                 'lcszVersion': '1',
-                'name': shapeManifest['name'],
+                'name': shapeName,
                 'i18n': {},
                 'sourcePackage': {
                     'packageId': (_a = packageManifest['id']) !== null && _a !== void 0 ? _a : '__local__',
                     'version': packageManifest['version'],
                     'library': name,
                     'shape': shapeManifest['shape'],
+                    'name': shapeName,
                 },
             },
         };
@@ -110,7 +122,7 @@ async function getShapeListJson(name, packagePath) {
             'order': index,
             'properties': JSON.stringify(properties),
             'shapeLibrary': 'http://localhost:9901/shapeLibraries/' + encodeURIComponent(name),
-            'uri': `http://localhost:9901/shapeLibraries/${encodeURIComponent(name)}/shapes/${encodeURIComponent(shapeManifest['shape'])}`,
+            'uri': `http://localhost:9901/shapeLibraries/${encodeURIComponent(name)}/shapes/${encodeURIComponent(shapeName)}`,
         };
     })));
 }