publish-microfrontend 0.15.6-beta.5100 → 0.15.6-beta.5105

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "publish-microfrontend",
-  "version": "0.15.6-beta.5100",
+  "version": "0.15.6-beta.5105",
   "description": "A CLI for publishing micro frontends to a feed service.",
   "keywords": [
     "modules",
@@ -69,5 +69,5 @@
     "typescript": "^4.0.0",
     "yargs": "^15.0.0"
   },
-  "gitHead": "e3037bccd6f8bf036f49a057a9b92ca79e4b5442"
+  "gitHead": "fe9f4af00df8a9281ba22e253e4ace0171160768"
 }

package/src/browser.ts

@@ -0,0 +1,10 @@
+import open from 'open';
+import { logFail } from './log';
+
+export async function openBrowserAt(address: string) {
+  try {
+    await open(address, undefined);
+  } catch (err) {
+    logFail('Failed to open the browser: %s', err);
+  }
+}

package/src/common.ts

@@ -0,0 +1,9 @@
+import { platform } from 'os';
+
+const os = platform();
+
+export const standardHeaders = {
+  'user-agent': `publish-microfrontend/http.node-${os}`,
+};
+
+export const isWindows = process.platform === 'win32';

package/src/http.ts

@@ -0,0 +1,192 @@
+import axios from 'axios';
+import FormData from 'form-data';
+import { Agent } from 'https';
+import { Stream } from 'stream';
+import { createWriteStream } from 'fs';
+import { tmpdir } from 'os';
+import { join } from 'path';
+import { logWarn } from './log';
+import { standardHeaders } from './common';
+import { getTokenInteractively } from './interactive';
+
+function getMessage(body: string | { message?: string }) {
+  if (typeof body === 'string') {
+    try {
+      const content = JSON.parse(body);
+      return content.message;
+    } catch (ex) {
+      return body;
+    }
+  } else if (body && typeof body === 'object') {
+    if ('message' in body) {
+      return body.message;
+    } else {
+      return JSON.stringify(body);
+    }
+  }
+
+  return '';
+}
+
+export interface PostFormResult {
+  status: number;
+  success: boolean;
+  response?: object;
+}
+
+export type FormDataObj = Record<string, string | [Buffer, string]>;
+
+function streamToFile(source: Stream, target: string) {
+  const dest = createWriteStream(target);
+  return new Promise<Array<string>>((resolve, reject) => {
+    source.pipe(dest);
+    source.on('error', (err) => reject(err));
+    dest.on('finish', () => resolve([target]));
+  });
+}
+
+export async function downloadFile(url: string, ca?: Buffer): Promise<Array<string>> {
+  const httpsAgent = ca ? new Agent({ ca }) : undefined;
+
+  try {
+    const res = await axios.get<Stream>(url, {
+      responseType: 'stream',
+      headers: standardHeaders,
+      httpsAgent,
+    });
+    const rid = Math.random().toString(36).split('.').pop();
+    const target = join(tmpdir(), `microfrontend_${rid}.tgz`);
+    return streamToFile(res.data, target);
+  } catch (error) {
+    logWarn('Failed HTTP GET requested: %s', error.message);
+    return [];
+  }
+}
+
+export function postForm(
+  target: string,
+  scheme: string,
+  key: string,
+  formData: FormDataObj,
+  customHeaders: Record<string, string> = {},
+  ca?: Buffer,
+  interactive = false,
+): Promise<PostFormResult> {
+  const httpsAgent = ca ? new Agent({ ca }) : undefined;
+  const form = new FormData();
+
+  Object.keys(formData).forEach((key) => {
+    const value = formData[key];
+
+    if (typeof value === 'string') {
+      form.append(key, value);
+    } else {
+      form.append(key, value[0], value[1]);
+    }
+  });
+
+  const headers: Record<string, string> = {
+    ...form.getHeaders(),
+    ...standardHeaders,
+    ...customHeaders,
+  };
+
+  if (key) {
+    switch (scheme) {
+      case 'basic':
+        headers.authorization = `Basic ${key}`;
+        break;
+      case 'bearer':
+        headers.authorization = `Bearer ${key}`;
+        break;
+      case 'digest':
+        headers.authorization = `Digest ${key}`;
+        break;
+      case 'none':
+      default:
+        headers.authorization = key;
+        break;
+    }
+  }
+
+  return axios
+    .post(target, form, {
+      headers,
+      httpsAgent,
+      maxContentLength: Infinity,
+      maxBodyLength: Infinity,
+    })
+    .then(
+      (res) => {
+        return {
+          status: res.status,
+          success: true,
+          response: res.data,
+        };
+      },
+      (error) => {
+        if (error.response) {
+          // The request was made and the server responded with a status code
+          // that falls out of the range of 2xx
+          const { data, statusText, status } = error.response;
+
+          if (interactive && 'interactiveAuth' in data) {
+            const { interactiveAuth } = data;
+
+            if (typeof interactiveAuth === 'string') {
+              return getTokenInteractively(interactiveAuth, httpsAgent).then(({ mode, token }) =>
+                postForm(target, mode, token, formData, customHeaders, ca, false),
+              );
+            }
+          }
+
+          const message = getMessage(data) || '';
+          logWarn('The HTTP Post request failed with status %s (%s): %s', status, statusText, message);
+          return {
+            status,
+            success: false,
+            response: message,
+          };
+        } else if (error.isAxiosError) {
+          // axios initiated error: try to parse message from error object
+          let errorMessage: string = error.errno || 'Unknown Axios Error';
+
+          if (typeof error.toJSON === 'function') {
+            const errorObj: { message?: string } = error.toJSON();
+            errorMessage = errorObj?.message ?? errorMessage;
+          }
+
+          logWarn('The HTTP Post request failed with error: %s', errorMessage);
+          return {
+            status: 500,
+            success: false,
+            response: errorMessage,
+          };
+        } else if (error.request) {
+          logWarn('The HTTP Post request failed unexpectedly.');
+        } else {
+          logWarn('The HTTP Post request failed with error: %s', error.message);
+        }
+
+        return {
+          status: 500,
+          success: false,
+          response: undefined,
+        };
+      },
+    );
+}
+
+export function postFile(
+  target: string,
+  scheme: string,
+  key: string,
+  file: Buffer,
+  customFields: Record<string, string> = {},
+  customHeaders: Record<string, string> = {},
+  ca?: Buffer,
+  interactive = false,
+): Promise<PostFormResult> {
+  const data: FormDataObj = { ...customFields, file: [file, 'microfrontend.tgz'] };
+  return postForm(target, scheme, key, data, customHeaders, ca, interactive);
+}

package/src/index.ts

@@ -1,9 +1,16 @@
 #!/usr/bin/env node
 
-import { fromKeys, publishModeKeys } from 'piral-cli/src/helpers';
 import * as yargs from 'yargs';
+import rc from 'rc';
+import { fromKeys, publishModeKeys } from 'piral-cli/src/helpers';
+import { basename } from 'path';
+import { readFile } from 'fs/promises';
+import { progress, fail, logDone, logFail, logInfo } from './log';
+import { getCa, getFiles } from './utils';
+import { postFile } from './http';
 
-const defaultArgs = {
+const current = process.cwd();
+const defaultArgs = rc('microfrontend', {
   url: undefined,
   apiKey: undefined,
   cert: undefined,
@@ -12,22 +19,21 @@ const defaultArgs = {
   fields: {},
   headers: {},
   interactive: false,
-};
+});
 
 const args = yargs
-  .positional('source', {
-    type: 'string',
-    describe: 'Sets the source of either the previously packed *.tgz bundle or the directory to publish.',
-  })
+  .string('source')
+  .describe('source', 'Sets the source of either the previously packed *.tgz bundle or the directory to publish.')
+  .default('source', current)
   .string('url')
   .describe('url', 'Sets the explicit URL where to publish the micro frontend to.')
   .default('url', defaultArgs.url)
   .string('api-key')
   .describe('api-key', 'Sets the potential API key to send to the service.')
   .default('api-key', defaultArgs.apiKey)
-  .string('ca-cert')
-  .describe('ca-cert', 'Sets a custom certificate authority to use, if any.')
-  .default('ca-cert', defaultArgs.cert)
+  .string('cert')
+  .describe('cert', 'Sets a custom certificate authority to use, if any.')
+  .default('cert', defaultArgs.cert)
   .choices('mode', publishModeKeys)
   .describe('mode', 'Sets the authorization mode to use.')
   .default('mode', defaultArgs.mode)
@@ -45,4 +51,64 @@ const args = yargs
   .describe('interactive', 'Defines if authorization tokens can be retrieved interactively.')
   .default('interactive', defaultArgs.interactive).argv;
 
-console.log('First release.', args.source);
+async function run() {
+  const { cert, source, from, url, 'api-key': apiKey, headers, fields, interactive, mode } = args;
+  const sources = Array.isArray(source) ? source : [source];
+  const ca = await getCa(cert);
+  const files = await getFiles(current, sources, from, ca);
+  const successfulUploads: Array<string> = [];
+
+  if (files.length === 0) {
+    fail('No micro frontends for publishing found: %s.', sources.join(', '));
+  }
+
+  for (const file of files) {
+    const fileName = basename(file);
+    const content = await readFile(file);
+
+    if (content) {
+      progress(`Publishing "%s" ...`, file, url);
+
+      const { success, status, response } = await postFile(
+        url,
+        mode,
+        apiKey,
+        content,
+        fields,
+        headers,
+        ca,
+        interactive,
+      );
+
+      const result = typeof response !== 'string' ? JSON.stringify(response, undefined, 2) : response;
+
+      if (success) {
+        successfulUploads.push(file);
+
+        if (response) {
+          logInfo('Response from server: %s', result);
+        }
+
+        progress(`Published successfully!`);
+      } else if (status === 402) {
+        logFail('Payment required to upload the micro frontend: %s', result);
+      } else if (status === 409) {
+        logFail('Version of the micro frontend already exists: %s"', result);
+      } else if (status === 413) {
+        logFail('Size too large for uploading the micro frontend: %s"', result);
+      } else {
+        logFail('Failed to upload micro frontend "%s".', fileName);
+      }
+    } else {
+      logFail('Failed to read Micro Frontend.');
+    }
+  }
+
+  if (files.length === successfulUploads.length) {
+    logDone(`The micro frontends have been published successfully!`);
+  } else {
+    fail('Failed to publish the micro frontends.');
+  }
+}
+
+run();

package/src/interactive.ts

@@ -0,0 +1,68 @@
+import axios from 'axios';
+import { Agent } from 'https';
+import { openBrowserAt } from './browser';
+import { standardHeaders } from './common';
+import { logSuspend, logInfo } from './log';
+
+type TokenResult = Promise<{ mode: string; token: string }>;
+
+const tokenRetrievers: Record<string, TokenResult> = {};
+
+export function getTokenInteractively(url: string, httpsAgent: Agent): TokenResult {
+  if (!(url in tokenRetrievers)) {
+    const logResume = logSuspend();
+
+    tokenRetrievers[url] = axios
+      .post(
+        url,
+        {
+          clientId: 'publish-microfrontend',
+          clientName: 'Publish Micro Frontend CLI',
+          description: 'Authorize the Publish Micro Frontend CLI temporarily to perform actions in your name.',
+        },
+        {
+          headers: {
+            ...standardHeaders,
+            'content-type': 'application/json',
+          },
+          httpsAgent,
+        },
+      )
+      .then(async (res) => {
+        const { loginUrl, callbackUrl, expires } = res.data;
+        const now = new Date();
+        const then = new Date(expires);
+        const diff = ~~((then.valueOf() - now.valueOf()) / (60 * 1000));
+
+        logInfo(`Use the URL below to complete the login. The link expires in ${diff} minutes (${then}).`);
+        logInfo('===');
+        logInfo(loginUrl);
+        logInfo('===');
+
+        openBrowserAt(loginUrl);
+
+        try {
+          while (true) {
+            const { data, status } = await axios.get(callbackUrl);
+
+            if (status === 202) {
+              await new Promise((resolve) => setTimeout(resolve, 5000));
+              continue;
+            }
+
+            if (status === 200) {
+              return { ...data };
+            }
+
+            throw new Error(`Could not get status from interactive login endpoint.`);
+          }
+        } catch (ex) {
+          throw ex;
+        } finally {
+          logResume();
+        }
+      });
+  }
+
+  return tokenRetrievers[url];
+}

package/src/log.ts

@@ -0,0 +1,51 @@
+import ora from 'ora';
+import { format } from 'util';
+
+const instance = ora();
+
+let currentProgress: string = undefined;
+
+export function logInfo(message: string, ...args: Array<string | number | boolean>) {
+  const msg = format(message, ...args);
+  instance.info(msg);
+  return msg;
+}
+
+export function logDone(message: string, ...args: Array<string | number | boolean>) {
+  const msg = format(message, ...args);
+  instance.succeed(msg);
+  return msg;
+}
+
+export function logWarn(message: string, ...args: Array<string | number | boolean>) {
+  const msg = format(message, ...args);
+  instance.warn(msg);
+  return msg;
+}
+
+export function logFail(message: string, ...args: Array<string | number | boolean>) {
+  const msg = format(message, ...args);
+  instance.fail(msg);
+  return msg;
+}
+
+export function progress(message: string, ...args: Array<string | number | boolean>) {
+  const msg = format(message, ...args);
+  instance.start(msg);
+  currentProgress = msg;
+}
+
+export function logReset() {
+  instance.stop();
+}
+
+export function logSuspend() {
+  logReset();
+
+  return () => instance.start(currentProgress);
+}
+
+export function fail(message: string, ...args: Array<string | number | boolean>): never {
+  logFail(message, ...args);
+  process.exit(1);
+}

package/src/scripts.ts

@@ -0,0 +1,79 @@
+import { exec } from 'child_process';
+import { resolve } from 'path';
+import { MemoryStream } from 'piral-cli/src/common/MemoryStream';
+import { isWindows } from './common';
+
+function resolveWinPath(specialFolder: string, subPath: string): string | undefined {
+  const basePath = process.env[specialFolder];
+
+  if (basePath) {
+    return resolve(basePath, subPath);
+  }
+
+  return undefined;
+}
+
+export function runScript(script: string, cwd = process.cwd(), output: NodeJS.WritableStream = process.stdout) {
+  const bin = resolve(cwd, './node_modules/.bin');
+  const sep = isWindows ? ';' : ':';
+  const env = Object.assign({}, process.env);
+
+  if (isWindows) {
+    // on windows we sometimes may see a strange behavior,
+    // see https://github.com/smapiot/piral/issues/192
+    const newPaths = [
+      resolveWinPath('AppData', 'npm'),
+      resolveWinPath('ProgramFiles', 'nodejs'),
+      resolveWinPath('ProgramFiles(x86)', 'nodejs'),
+      ...(env.Path || env.PATH || '').split(';'),
+    ];
+    env.PATH = newPaths.filter((path) => path && path.length > 0).join(sep);
+  }
+
+  env.PATH = `${bin}${sep}${env.PATH}`;
+
+  return new Promise<void>((resolve, reject) => {
+    const error = new MemoryStream();
+    const opt = { end: false };
+    const cp = exec(script, {
+      cwd,
+      env,
+    });
+
+    cp.stdout.pipe(output, opt);
+    cp.stderr.pipe(error, opt);
+
+    cp.on('error', () => reject(new Error(error.value)));
+    cp.on('close', (code) => (code === 0 ? resolve() : reject(new Error(error.value))));
+  });
+}
+
+export function runCommand(exe: string, args: Array<string>, cwd: string, output?: NodeJS.WritableStream) {
+  const npmCommand = isWindows ? `${exe}.cmd` : exe;
+  const sanitizedArgs = sanitizeCmdArgs(args);
+  const cmd = [npmCommand, ...sanitizedArgs].join(' ');
+  return runScript(cmd, cwd, output);
+}
+
+function sanitizeCmdArgs(args: Array<string>) {
+  // Introduced for fixing https://github.com/smapiot/piral/issues/259.
+  // If an arg contains a whitespace, it can be incorrectly interpreted as two separate arguments.
+  // For the moment, it's fixed by simply wrapping each arg in OS specific quotation marks.
+  const quote = isWindows ? '"' : "'";
+
+  return args.map((arg) => {
+    let result = arg.trim();
+
+    if (/\s/.test(result)) {
+      if (!result.startsWith(quote)) {
+        result = `${quote}${result}`;
+      }
+
+      if (!result.endsWith(quote)) {
+        result = `${result}${quote}`;
+      }
+    }
+
+    return result;
+  });
+}

package/src/utils.ts

@@ -0,0 +1,74 @@
+import glob from 'glob';
+import { stat, readFile } from 'fs/promises';
+import { dirname, basename, resolve } from 'path';
+import { MemoryStream } from 'piral-cli/src/common/MemoryStream';
+import { downloadFile } from './http';
+import { runCommand } from './scripts';
+
+function runNpmProcess(args: Array<string>, target: string, output?: NodeJS.WritableStream) {
+    const cwd = resolve(process.cwd(), target);
+    return runCommand('npm', args, cwd, output);
+  }
+
+async function findTarball(packageRef: string, target = '.', ...flags: Array<string>) {
+    const ms = new MemoryStream();
+    await runNpmProcess(['view', packageRef, 'dist.tarball', ...flags], target, ms);
+    return ms.value;
+  }
+
+export async function getCa(cert: string | undefined): Promise<Buffer | undefined> {
+  if (cert && typeof cert === 'string') {
+    const statCert = await stat(cert).catch(() => undefined);
+
+    if (statCert?.isFile()) {
+      const dir = dirname(cert);
+      const file = basename(cert);
+      return await readFile(resolve(dir, file));
+    }
+  }
+
+  return undefined;
+}
+
+export function matchFiles(baseDir: string, pattern: string) {
+  return new Promise<Array<string>>((resolve, reject) => {
+    glob(
+      pattern,
+      {
+        cwd: baseDir,
+        absolute: true,
+        dot: true,
+      },
+      (err, files) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(files);
+        }
+      },
+    );
+  });
+}
+
+export async function getFiles(baseDir: string, sources: Array<string>, from: string, ca: Buffer): Promise<Array<string>> {
+  switch (from) {
+    case 'local': {
+      const allFiles = await Promise.all(sources.map((s) => matchFiles(baseDir, s)));
+      // TODO:
+      // - Reduced files should be unique.
+      // - can be a mix of directories and files - if files are matched take those, otherwise take directories
+      // - for all matched directories look up if a `package.json` exists - if yes, run "npm pack" and replace the directory by the created npm package
+      // Finally return these files (created npm packages should be taken from a tmp directory, following the download approach below)
+      return allFiles.reduce((result, files) => [...result, ...files], []);
+    }
+    case 'remote': {
+      const allFiles = await Promise.all(sources.map((s) => downloadFile(s, ca)));
+      return allFiles.reduce((result, files) => [...result, ...files], []);
+    }
+    case 'npm': {
+      const allUrls = await Promise.all(sources.map((s) => findTarball(s)));
+      const allFiles = await Promise.all(allUrls.map((url) => downloadFile(url, ca)));
+      return allFiles.reduce((result, files) => [...result, ...files], []);
+    }
+  }
+}