lucid-package 0.0.109 → 0.0.111

package/package.json

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

package/src/angularframeworkutils.js

@@ -7,21 +7,21 @@ const editorextension_1 = require("./editorextension");
 const installationutil_1 = require("./installationutil");
 const package_1 = require("./package");
 const theme_1 = require("./theme");
+const ANGULAR_PROJECT_NAME = 'angular-app';
 async function createAngularEditorExtension(name, isInternal, skipSDKDependency) {
     await (0, editorextension_1.createEditorExtension)(name, isInternal, skipSDKDependency, path.join('angular', 'skeleton'), [
         'webpack-shell-plugin-next',
     ]);
-    const angularProjectName = name;
-    const angularEditorExtensionTargetFolder = path.join(process.cwd(), angularProjectName);
+    const angularEditorExtensionTargetFolder = path.join(process.cwd(), ANGULAR_PROJECT_NAME);
     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);
+    (0, installationutil_1.installAngularProject)(ANGULAR_PROJECT_NAME);
+    const webpackConfig = (await fs.readFile('webpack.config.js', 'utf8')).replace('<<dynamicname>>', ANGULAR_PROJECT_NAME);
+    const extensionTemplateCode = (await fs.readFile(path.join('src', 'extension.ts'), 'utf8')).replace('<<dynamicname>>', ANGULAR_PROJECT_NAME);
     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));
+    process.chdir(path.join(ANGULAR_PROJECT_NAME));
     const packageJson = await (0, package_1.readJson)('package.json');
-    packageJson.name = angularProjectName;
+    packageJson.name = ANGULAR_PROJECT_NAME;
     await fs.writeFile('package.json', JSON.stringify(packageJson, null, 4));
     console.log('Installing Angular dependencies');
     (0, installationutil_1.installDependenciesIfNeeded)(isInternal, skipSDKDependency);

package/src/reactframeworkutils.js

@@ -7,6 +7,7 @@ const editorextension_1 = require("./editorextension");
 const installationutil_1 = require("./installationutil");
 const package_1 = require("./package");
 const theme_1 = require("./theme");
+const REACT_PROJECT_NAME = 'react-app';
 async function createReactEditorExtension(name, flavor, isInternal, skipSDKDependency) {
     await (0, editorextension_1.createEditorExtension)(name, isInternal, skipSDKDependency, path.join('react', 'skeleton'), [
         'webpack-shell-plugin-next',
@@ -22,11 +23,10 @@ async function createReactEditorExtension(name, flavor, isInternal, skipSDKDepen
         console.log((0, theme_1.error)('Unexpected flavor type'));
         return;
     }
-    const reactProjectName = name;
-    const reactEditorExtensionTargetFolder = path.join(process.cwd(), reactProjectName);
+    const reactEditorExtensionTargetFolder = path.join(process.cwd(), REACT_PROJECT_NAME);
     const publicTargetFolder = path.join(process.cwd(), '..', '..', 'public');
     console.log((0, theme_1.success)('Creating React project in ' + reactEditorExtensionTargetFolder));
-    (0, installationutil_1.installReactProject)(reactProjectName, typescript);
+    (0, installationutil_1.installReactProject)(REACT_PROJECT_NAME, typescript);
     await fs.mkdir(path.join(publicTargetFolder, name));
     await copyFilesTo(path.join(reactEditorExtensionTargetFolder, 'public'), path.join(publicTargetFolder, name), [
         '.png',
@@ -38,13 +38,13 @@ async function createReactEditorExtension(name, flavor, isInternal, skipSDKDepen
         '.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);
+    const webpackConfig = (await fs.readFile('webpack.config.js', 'utf8')).replace('<<dynamicname>>', REACT_PROJECT_NAME);
+    const extensionTemplateCode = (await fs.readFile(path.join('src', 'extension.ts'), 'utf8')).replace('<<dynamicname>>', REACT_PROJECT_NAME);
     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));
+    process.chdir(path.join(REACT_PROJECT_NAME));
     const packageJson = await (0, package_1.readJson)('package.json');
-    packageJson.name = reactProjectName;
+    packageJson.name = REACT_PROJECT_NAME;
     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;

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,