lucid-package 0.0.90 → 0.0.91

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lucid-package",
-    "version": "0.0.90",
+    "version": "0.0.91",
     "description": "",
     "main": "index.js",
     "bin": {
@@ -21,6 +21,10 @@
         "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",
         "chokidar": "^3.5.3",
         "express": "^4.17.1",

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,28 @@
+"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");
+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('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/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>;
 /**

package/src/editorextension.js

@@ -17,8 +17,8 @@ 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';
@@ -40,7 +40,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) {

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

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,10 @@
 "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) {
+function installDependenciesIfNeeded(isInternalTesting, skipSDKDependency = false, additionalDependencies = []) {
     if (!oldFs.existsSync('node_modules')) {
         console.log((0, shellutil_1.execSyncLoggingOutputOnError)('npm install --silent').toString());
     }
@@ -17,5 +17,16 @@ function installDependenciesIfNeeded(isInternalTesting, skipSDKDependency = fals
         console.log('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");
@@ -12,7 +12,7 @@ const packagemanifest_1 = require("./packagemanifest");
 const shapelibrary_1 = require("./shapelibrary");
 const shellutil_1 = require("./shellutil");
 async function createEmptyPackage(root) {
-    console.log('Creating empty Lucid Suite package in ' + root);
+    console.log('Creating Lucid Suite package in ' + root);
     const source = path.join(__dirname, '..', 'templates', 'package');
     (0, filesystemutil_1.copyFolderRecursiveSync)(source, root);
 }
@@ -22,6 +22,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',

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,65 @@
+"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");
+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('Unexpected flavor type');
+        return;
+    }
+    const reactProjectName = name;
+    const reactEditorExtensionTargetFolder = path.join(process.cwd(), reactProjectName);
+    const publicTargetFolder = path.join(process.cwd(), '..', '..', 'public');
+    console.log('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/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/**/*"]
+}