lucid-package 0.0.109 → 0.0.110

package/package.json

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

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,