lucid-package 0.0.108 → 0.0.110

package/package.json

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

package/src/editorextension.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAllExtensionNames = exports.debugEditorExtension = exports.watchEditorExtension = exports.updateExtensionSDK = exports.buildEditorExtension = exports.createEditorExtension = void 0;
-const child_process_1 = require("child_process");
 const express = require("express");
 const oldFs = require("fs");
 const fs = require("fs/promises");
@@ -114,7 +113,6 @@ exports.watchEditorExtension = watchEditorExtension;
 async function debugEditorExtension(extensionNames, isInternal, quiet = false, pickAnyPort = false, watchIgnoreNodeModules = false) {
     const port = 9900;
     const watchers = await Promise.all(extensionNames.map(async (name) => watchEditorExtension(name, isInternal, quiet, watchIgnoreNodeModules)));
-    startCustomUIServers(extensionNames);
     const app = express();
     const server = listen(app, port, pickAnyPort);
     setupWebSockets(server);
@@ -343,45 +341,3 @@ async function getAllExtensionNames() {
     }
 }
 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/templates/editorextension/angular/skeleton/webpack.config.js

@@ -1,4 +1,7 @@
-const path = require('path');
+const child_process = require('child_process');
+const fs = require('fs');
+const process = require('process');
+
 const WebpackShellPluginNext = require('webpack-shell-plugin-next');
 
 const angularTargets = [{name: '<<dynamicname>>', port: 4200}];
@@ -29,32 +32,48 @@ module.exports = {
     plugins: [
         new WebpackShellPluginNext({
             // Run during execution of `npx lucid-package@latest test-editor-extension`.
-            // When doing a watch build, the user must manually first run "ng serve".
-            // Then, this script will update the html file to prefix http://localhost:4200/ to all the resource URLs
+            // Beforehand, the user must manually first start up the Angular server
+            // from within the Angular app's directory and in another console, and leave it running.
             onWatchRun: {
-                scripts: angularTargets.map(
-                    (target) =>
-                        // Executed by WebpackShellPluginNext, from within the package's root level directory.
-                        `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`,
-                ),
+                scripts: angularTargets.map((target) => async () => {
+                    // Executed by WebpackShellPluginNext, from within the package's root level directory.
+                    fs.mkdirSync(`public/${target.name}`, {recursive: true});
+
+                    const angularServerURL = `http://localhost:${target.port}`;
+                    const angularAppResponse = await fetch(angularServerURL).catch((error) => {
+                        console.error(
+                            `Extension failed to load the Angular app. Make sure the Angular server is running on ${angularServerURL}.`,
+                        );
+                        throw error;
+                    });
+                    const angularAppContentHTML = await angularAppResponse.text();
+
+                    // Enable links to other Angular assets, even when served by the extension,
+                    // by having those assets' links explicitly point to the Angular dev server
+                    const angularAppContentHTMLReplaced = angularAppContentHTML.replaceAll(
+                        /(src|href)="\//gi,
+                        `$1="http://localhost:${target.port}/`,
+                    );
+
+                    // Enable the extension to serve a copy of the Angular app
+                    fs.writeFileSync(`public/${target.name}/index.html`, angularAppContentHTMLReplaced);
+                }),
                 blocking: true,
             },
             // Run during execution of `npx lucid-package@latest bundle`.
-            // When doing a full build, this script will automatically run "ng build"
-            // and then copy all the assets to the root level public folder
             onBeforeNormalRun: {
-                scripts: angularTargets.map(
-                    (target) =>
-                        // Executed by WebpackShellPluginNext from within each _extension's_ directory.
-                        `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}`,
-                ),
+                scripts: angularTargets.map((target) => () => {
+                    // Executed by WebpackShellPluginNext from within each _extension's_ directory.
+                    fs.mkdirSync(`../../public/${target.name}`, {recursive: true});
+
+                    process.chdir(`${target.name}`);
+                    // `npx ng build` usually works. But directly pathing to the installed `ng` is more reliable,
+                    // when used with build tools such as Bazel, or when multiple installations of `ng` may exist
+                    child_process.execSync('npx -- ./node_modules/@angular/cli build', {stdio: 'inherit'});
+
+                    // Add Angular assets to the extension's bundle
+                    fs.cpSync(`dist/${target.name}/*`, `../../../public/${target.name}`, {recursive: true});
+                }),
                 blocking: true,
                 swallowError: false,
                 safe: true,

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

@@ -1,4 +1,7 @@
-const path = require('path');
+const child_process = require('child_process');
+const fs = require('fs');
+const process = require('process');
+
 const WebpackShellPluginNext = require('webpack-shell-plugin-next');
 
 const reactTargets = [{name: '<<dynamicname>>', port: 3000}];
@@ -29,32 +32,52 @@ module.exports = {
     plugins: [
         new WebpackShellPluginNext({
             // Run during execution of `npx lucid-package@latest test-editor-extension`.
-            // When doing a watch build, the user must manually first run "npm start".
-            // Then, this script will update the html file to prefix http://localhost:3000/ to all the resource URLs
+            // Beforehand, the user must manually first run `npx react-scripts start`,
+            // from within the React app's directory and in another console, and leave it running.
             onWatchRun: {
-                scripts: reactTargets.map(
-                    (target) =>
-                        // Executed by WebpackShellPluginNext, from within the package's root level directory.
-                        `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`,
-                ),
+                scripts: reactTargets.map((target) => async () => {
+                    // Executed by WebpackShellPluginNext, from within the package's root level directory.
+                    fs.mkdirSync(`public/${target.name}`, {recursive: true});
+
+                    const reactServerURL = `http://localhost:${target.port}`;
+                    const reactAppResponse = await fetch(reactServerURL).catch((error) => {
+                        console.error(
+                            `Extension failed to load the React app. Make sure the React server is running on ${reactServerURL}.`,
+                        );
+                        throw error;
+                    });
+                    const reactAppContentHTML = await reactAppResponse.text();
+
+                    // Enable links to other React assets, even when served by the extension,
+                    // by having those assets' links explicitly point to the React dev server
+                    const reactAppContentHTMLReplaced = reactAppContentHTML.replaceAll(
+                        /(src|href)="\//gi,
+                        `$1="http://localhost:${target.port}/`,
+                    );
+
+                    // Enable the extension to serve a copy of the React app
+                    fs.writeFileSync(`public/${target.name}/index.html`, reactAppContentHTMLReplaced);
+                }),
                 blocking: true,
             },
             // Run during execution of `npx lucid-package@latest bundle`.
-            // When doing a full build, this script will automatically run "npm run build"
-            // and then copy all the assets to the root level public folder
             onBeforeNormalRun: {
-                scripts: reactTargets.map(
-                    (target) =>
-                        // Executed by WebpackShellPluginNext from within each _extension's_ directory.
-                        `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}`,
-                ),
+                scripts: reactTargets.map((target) => () => {
+                    // Executed by WebpackShellPluginNext from within each _extension's_ directory.
+                    fs.mkdirSync(`../../public/${target.name}`, {recursive: true});
+
+                    process.chdir(`${target.name}`);
+                    child_process.execSync('npx react-scripts build', {stdio: 'inherit'});
+
+                    // In the React app's bundled HTML, enable links to other React assets,
+                    // by having those links explicitly point to the extension's bundle
+                    const content = fs.readFileSync('build/index.html', 'utf8');
+                    const newContent = content.replaceAll(/(src|href)="\//gi, '$1="');
+                    fs.writeFileSync('build/index.html', newContent);
+
+                    // Add React assets to the extension's bundle
+                    fs.cpSync('build', `../../../public/${target.name}`, {recursive: true});
+                }),
                 blocking: true,
             },
         }),