cli

Author: matheusmr13

.vscode/settings.json

@@ -20,12 +20,10 @@
     "activityBarBadge.background": "#25320e",
     "activityBarBadge.foreground": "#e7e7e7",
     "statusBar.background": "#832561",
-    "statusBar.border": "#832561",
     "statusBar.foreground": "#e7e7e7",
     "statusBarItem.hoverBackground": "#ab307e",
     "titleBar.activeBackground": "#832561",
     "titleBar.activeForeground": "#e7e7e7",
-    "titleBar.border": "#832561",
     "titleBar.inactiveBackground": "#83256199",
     "titleBar.inactiveForeground": "#e7e7e799"
   },

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmra/cli",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main:src": "src/index.js",
   "main": "index.js",
   "author": "Matheus Martins",

packages/cli/scripts/create/index.js

@@ -33,7 +33,7 @@ const create = async (types, name, opts) => {
     if (shouldCreateLib) {
       await createMicrofrontendWithLibrary(microfrontendName, pathToCreateMicro);
     } else {
-      await createMicrofrontend(microfrontendName, pathToCreateMicro);
+      await createMicrofrontend(microfrontendName, pathToCreateMicro, !shouldCreateApp);
     }
     return;
   }

packages/cli/scripts/create/microfrontend.js

@@ -15,13 +15,17 @@ ExportMicrofrontend({
 });
 `;
 
-const createMicrofrontendWithTemplate = async (name, folder) => {
-  await createModule(name, 'microfrontend', resolveApp(folder));
-  await writeFile(resolvePackageSrc(folder, name, 'index.js'), indexJsFile(name));
+const createMicrofrontendWithTemplate = async (name, folder, isRootPath) => {
+  await createModule(name, 'microfrontend', resolveApp(folder), isRootPath);
+  if (isRootPath) {
+    await writeFile(resolveApp(folder, name, 'src', 'index.js'), indexJsFile(name));
+  } else {
+    await writeFile(resolvePackageSrc(folder, name, 'index.js'), indexJsFile(name));
+  }
 };
 
-const createMicrofrontend = async (name, folder = '.') => {
-  await explain('Creating microfrontend', () => createMicrofrontendWithTemplate(name, folder));
+const createMicrofrontend = async (name, folder = '.', isRootPath) => {
+  await explain('Creating microfrontend', () => createMicrofrontendWithTemplate(name, folder, isRootPath));
 };
 
 const createMicrofrontendWithLibrary = async (name, folder = '.') => {

packages/cli/scripts/create/module.js

@@ -19,20 +19,36 @@ const addScriptsToPackageJson = async (packageJsonPath, scripts) => {
   await writeJson(packageJsonPath, packageJson);
 };
 
-const createModule = async (name, template, rootAppPath) => {
-  const { execInPackages, execInApp } = createExecutionContext(rootAppPath, name);
+const createModule = async (name, template, rootAppPath, isRootPath = false) => {
+  const { execInPackages, execInApp, execInRootApp, execInRoot } = createExecutionContext(rootAppPath, name);
 
-  await execInPackages(`npx create-react-app ${name}`);
-  await appendFile(`${rootAppPath}/packages/${name}/.gitignore`, ['build-lib', 'public/meta.json'].join('\n'));
-  await copyTemplateTo(template, `${rootAppPath}/packages/${name}`);
+  if (isRootPath) {
+    await execInRoot(`npx create-react-app ${name}`);
 
-  await execInApp('yarn add @cmra/cli');
-  await execInApp('yarn add @cmra/react');
+    await appendFile(`${rootAppPath}/.gitignore`, ['build-lib', 'public/meta.json'].join('\n'));
+    await copyTemplateTo(template, rootAppPath);
 
-  await addScriptsToPackageJson(
-    `${rootAppPath}/packages/${name}/package.json`,
-    getModuleScripts(template === 'microfrontend')
-  );
+    await execInRootApp('yarn add @cmra/cli');
+    await execInRootApp('yarn add @cmra/react');
+
+    await addScriptsToPackageJson(
+      `${rootAppPath}/${name}/package.json`,
+      getModuleScripts(template === 'microfrontend')
+    );
+  } else {
+    await execInPackages(`npx create-react-app ${name}`);
+
+    await appendFile(`${rootAppPath}/packages/${name}/.gitignore`, ['build-lib', 'public/meta.json'].join('\n'));
+    await copyTemplateTo(template, `${rootAppPath}/packages/${name}`);
+
+    await execInApp('yarn add @cmra/cli');
+    await execInApp('yarn add @cmra/react');
+
+    await addScriptsToPackageJson(
+      `${rootAppPath}/packages/${name}/package.json`,
+      getModuleScripts(template === 'microfrontend')
+    );
+  }
 };
 
 module.exports = {

packages/cli/scripts/utils/paths.js

@@ -2,10 +2,11 @@ const path = require('path');
 const fs = require('fs');
 
 const appDirectory = fs.realpathSync(process.cwd());
-const resolve = paths => path.resolve(...([appDirectory].concat(paths)));
-const resolveApp = relativePath => resolve([relativePath]);
-const resolvePackageSrc = (relativePath, packageName, file) => resolve([relativePath, 'packages', packageName, 'src', file]);
-const escapePackageName = packageName => packageName.replace(/@/g, '').replace(/\//g, '_');
+const resolve = (paths) => path.resolve(...[appDirectory].concat(paths));
+const resolveApp = (...relativePath) => resolve(relativePath);
+const resolvePackageSrc = (relativePath, packageName, file) =>
+  resolve([relativePath, 'packages', packageName, 'src', file]);
+const escapePackageName = (packageName) => packageName.replace(/@/g, '').replace(/\//g, '_');
 
 module.exports = {
   resolveApp,

packages/cli/scripts/utils/process.js

@@ -1,30 +1,26 @@
-
 const { spawn } = require('child_process');
 
-const exec = (command, {
-  cwd,
-  onStdout,
-  onStderr,
-  debug = true,
-} = {}) => new Promise((resolve, reject) => {
-  const spawnProcess = spawn(command, [], { shell: true, cwd });
+const exec = (command, { cwd, onStdout, onStderr, debug = true } = {}) =>
+  new Promise((resolve, reject) => {
+    const spawnProcess = spawn(command, [], { shell: true, cwd });
 
-  if (onStdout || debug) spawnProcess.stdout.on('data', onStdout || (data => process.stdout.write(data)));
-  if (onStderr || debug) spawnProcess.stderr.on('data', onStderr || (data => process.stderr.write(data)));
+    if (onStdout || debug) spawnProcess.stdout.on('data', onStdout || ((data) => process.stdout.write(data)));
+    if (onStderr || debug) spawnProcess.stderr.on('data', onStderr || ((data) => process.stderr.write(data)));
 
-  spawnProcess.on('exit', (code) => {
-    if (code > 0) {
-      reject(code);
-      return;
-    }
-    resolve();
+    spawnProcess.on('exit', (code) => {
+      if (code > 0) {
+        reject(code);
+        return;
+      }
+      resolve();
+    });
   });
-});
 
 const createExecutionContext = (rootAppPath, appName, opts) => {
-  const execInFolder = path => command => exec(command, { ...opts, cwd: `${rootAppPath}${path || ''}` });
+  const execInFolder = (path) => (command) => exec(command, { ...opts, cwd: `${rootAppPath}${path || ''}` });
   return {
     execInRoot: execInFolder('/'),
+    execInRootApp: execInFolder(`/${appName}`),
     execInPackages: execInFolder('/packages'),
     execInApp: execInFolder(`/packages/${appName}`),
   };

packages/react/src/microfrontend/communication.tsx

@@ -1,4 +1,4 @@
-import Communication from './../base/communication';
+import Communication from '../base/communication';
 
 class MicrofrontendClient extends Communication {
   from: string;

packages/webapp/lib/index.js

@@ -23,7 +23,6 @@ module.exports = {
       .join(' ');
 
     const command = `${envVars} npm run build`;
-    console.info(command);
     await exec(command, { cwd: `${__dirname}/../` });
     return `${__dirname}/../build`;
   },