piral-cli 0.15.0-alpha.4257 → 0.15.0-alpha.4314

package/src/common/clients/yarn.ts

@@ -7,7 +7,7 @@ import { MemoryStream } from '../MemoryStream';
 // Helpers:
 
 function runYarnProcess(args: Array<string>, target: string, output?: NodeJS.WritableStream) {
-  log('generalDebug_0003', 'Starting the Yarn@1 process ...');
+  log('generalDebug_0003', 'Starting the Yarn Classic process ...');
   const cwd = resolve(process.cwd(), target);
   return runCommand('yarn', args, cwd, output);
 }
@@ -33,14 +33,14 @@ function convert(flags: Array<string>) {
 export async function installDependencies(target = '.', ...flags: Array<string>) {
   const ms = new MemoryStream();
   await runYarnProcess(['install', ...convert(flags)], target, ms);
-  log('generalDebug_0003', `Yarn@1 install dependencies result: ${ms.value}`);
+  log('generalDebug_0003', `Yarn Classic install dependencies result: ${ms.value}`);
   return ms.value;
 }
 
 export async function installPackage(packageRef: string, target = '.', ...flags: Array<string>) {
   const ms = new MemoryStream();
   await runYarnProcess(['add', packageRef, ...convert(flags)], target, ms);
-  log('generalDebug_0003', `Yarn@1 install package result: ${ms.value}`);
+  log('generalDebug_0003', `Yarn Classic install package result: ${ms.value}`);
   return ms.value;
 }
 

package/src/common/config.ts

@@ -1,7 +1,6 @@
-import { SourceLanguage } from './enums';
 import { defaultRegistry } from './constants';
 import { rc } from '../external';
-import { NpmClientType, PiletSchemaVersion } from '../types';
+import { SourceLanguage, NpmClientType, PiletSchemaVersion } from '../types';
 
 export interface PiralCliConfig {
   /**
@@ -79,7 +78,7 @@ export const config: PiralCliConfig = rc(
     schemaVersion: 'v2' as const,
     openBrowser: false,
     port: 1234,
-    language: SourceLanguage.ts,
+    language: 'ts' as const,
     host: 'localhost',
     registry: defaultRegistry,
   },

package/src/common/emulator.ts

@@ -1,6 +1,6 @@
 import { join, resolve, relative } from 'path';
 import { findDependencyVersion, copyScaffoldingFiles, isValidDependency } from './package';
-import { createFileFromTemplateIfNotExists } from './template';
+import { createPiralStubIndexIfNotExists } from './template';
 import { filesTar, filesOnceTar } from './constants';
 import { cliVersion } from './info';
 import { createNpmPackage, makeExternals } from './npm';
@@ -116,7 +116,7 @@ export async function createEmulatorSources(
   await copyScaffoldingFiles(sourceDir, rootDir, piralPkg.files ?? []);
 
   // actually including this one hints that the app shell should have been included - which is forbidden
-  await createFileFromTemplateIfNotExists('piral', targetDir, 'index.js', ForceOverwrite.yes, {
+  await createPiralStubIndexIfNotExists(targetDir, 'index.js', ForceOverwrite.yes, {
     name: piralPkg.name,
     outFile: targetFile,
   });

package/src/common/enums.ts

@@ -3,8 +3,3 @@ export enum ForceOverwrite {
   prompt,
   yes,
 }
-
-export enum SourceLanguage {
-  ts,
-  js,
-}

package/src/common/http.ts

@@ -57,28 +57,35 @@ export function downloadFile(target: string, ca?: Buffer): Promise<Array<string>
     });
 }
 
-export interface PostFileResult {
+export interface PostFormResult {
   status: number;
   success: boolean;
   response?: object;
 }
 
-export function postFile(
+export type FormDataObj = Record<string, string | [Buffer, string]>;
+
+export function postForm(
   target: string,
   scheme: PiletPublishScheme,
   key: string,
-  file: Buffer,
-  customFields: Record<string, string> = {},
+  formData: FormDataObj,
   customHeaders: Record<string, string> = {},
   ca?: Buffer,
   interactive = false,
-): Promise<PostFileResult> {
-  const form = new FormData();
+): Promise<PostFormResult> {
   const httpsAgent = ca ? new Agent({ ca }) : undefined;
+  const form = new FormData();
 
-  Object.keys(customFields).forEach((key) => form.append(key, customFields[key]));
+  Object.keys(formData).forEach((key) => {
+    const value = formData[key];
 
-  form.append('file', file, 'pilet.tgz');
+    if (typeof value === 'string') {
+      form.append(key, value);
+    } else {
+      form.append(key, value[0], value[1]);
+    }
+  });
 
   const headers: Record<string, string> = {
     ...form.getHeaders(),
@@ -112,11 +119,13 @@ export function postFile(
       maxBodyLength: Infinity,
     })
     .then(
-      (res) => ({
-        status: res.status,
-        success: true,
-        response: res.data,
-      }),
+      (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
@@ -133,7 +142,7 @@ export function postFile(
               );
 
               return getTokenInteractively(interactiveAuth, httpsAgent).then(({ mode, token }) =>
-                postFile(target, mode, token, file, customFields, customHeaders, ca, false),
+                postForm(target, mode, token, formData, customHeaders, ca, false),
               );
             }
           }
@@ -178,3 +187,17 @@ export function postFile(
       },
     );
 }
+
+export function postFile(
+  target: string,
+  scheme: PiletPublishScheme,
+  key: string,
+  file: Buffer,
+  customFields: Record<string, string> = {},
+  customHeaders: Record<string, string> = {},
+  ca?: Buffer,
+  interactive = false,
+): Promise<PostFormResult> {
+  const data: FormDataObj = { ...customFields, file: [file, 'pilet.tgz'] };
+  return postForm(target, scheme, key, data, customHeaders, ca, interactive);
+}

package/src/common/interactive.ts

@@ -1,6 +1,7 @@
 import { Agent } from 'https';
 import { openBrowserAt } from './browser';
 import { standardHeaders } from './info';
+import { logSuspend } from './log';
 import { axios, inquirer } from '../external';
 import { PiletPublishScheme } from '../types';
 
@@ -35,6 +36,8 @@ const tokenRetrievers: Record<string, TokenResult> = {};
 
 export function getTokenInteractively(url: string, httpsAgent: Agent): TokenResult {
   if (!(url in tokenRetrievers)) {
+    const logResume = logSuspend();
+
     tokenRetrievers[url] = axios.default
       .post(
         url,
@@ -53,19 +56,21 @@ export function getTokenInteractively(url: string, httpsAgent: Agent): TokenResu
       )
       .then((res) => {
         const { loginUrl, callbackUrl, expires } = res.data;
-        console.log(`Use the URL below to complete the login. The link expires at ${new Date(expires)}.`);
+        const now = new Date();
+        const then = new Date(expires);
+        const diff = ~~((then.valueOf() - now.valueOf()) / (60 * 1000));
+
+        console.log(`Use the URL below to complete the login. The link expires in ${diff} minutes (${then}).`);
         console.log('===');
         console.log(loginUrl);
         console.log('===');
 
         openBrowserAt(loginUrl);
 
-        return axios.default.get(callbackUrl).then(({ data }) => {
-          console.log('Logged in successfully.');
-          return {
-            ...data,
-          };
-        });
+        return axios.default
+          .get(callbackUrl)
+          .then(({ data }) => ({ ...data }))
+          .finally(logResume);
       });
   }
 

package/src/common/language.ts

@@ -1,45 +1,100 @@
 import { log } from './log';
-import { SourceLanguage } from './enums';
+import { Framework, SourceLanguage } from '../types';
 
-export const reactDeps = {
+const react17Deps = {
   react: '^17',
   'react-dom': '^17',
+};
+
+const react18Deps = {
+  react: '^18',
+  'react-dom': '^18',
+};
+
+const reactRouter5Deps = {
   'react-router': '^5',
   'react-router-dom': '^5',
 };
 
-export const reactTypings = {
+const reactRouter6Deps = {
+  'react-router': '^6',
+  'react-router-dom': '^6',
+};
+
+const react17Typings = {
   '@types/react': '^17',
   '@types/react-dom': '^17',
+};
+
+const react18Typings = {
+  '@types/react': '^18',
+  '@types/react-dom': '^18',
+};
+
+const reactRouter5Typings = {
   '@types/react-router': '^5',
   '@types/react-router-dom': '^5',
 };
 
-export function getDependencies(language: SourceLanguage, packages: Record<string, string> = reactDeps) {
+const reactRouter6Typings = {
+  '@types/react-router': '^6',
+  '@types/react-router-dom': '^6',
+};
+
+const defaultDeps = {};
+
+const defaultTypings = {
+  '@types/react': '*',
+  '@types/react-dom': '*',
+  '@types/react-router': '*',
+  '@types/react-router-dom': '*',
+};
+
+export function getDependencyPackages(framework: Framework, reactVersion: number, reactRouterVersion: number) {
+  // take default packages only if piral-core
+  return framework !== 'piral-core'
+    ? {}
+    : {
+        ...(reactVersion < 18 ? react17Deps : react18Deps),
+        ...(reactRouterVersion < 6 ? reactRouter5Deps : reactRouter6Deps),
+      };
+}
+
+export function getDevDependencyPackages(framework: Framework, reactVersion: number, reactRouterVersion: number) {
+  // take default dev packages only if not piral-base
+  return framework === 'piral-base'
+    ? {}
+    : {
+        ...(reactVersion < 18 ? react17Typings : react18Typings),
+        ...(reactRouterVersion < 6 ? reactRouter5Typings : reactRouter6Typings),
+      };
+}
+
+export function getDependencies(language: SourceLanguage, packages: Record<string, string> = defaultDeps) {
   switch (language) {
-    case SourceLanguage.js:
-    case SourceLanguage.ts:
+    case 'js':
+    case 'ts':
       return {
         ...packages,
       };
     default:
-      log('generalDebug_0003', 'Did not find a valid language. Just skipping devDependencies.');
+      log('generalDebug_0003', 'Did not find a valid language. Skipping "dependencies".');
       return {};
   }
 }
 
-export function getDevDependencies(language: SourceLanguage, typings: Record<string, string> = reactTypings) {
+export function getDevDependencies(language: SourceLanguage, typings: Record<string, string> = defaultTypings) {
   switch (language) {
-    case SourceLanguage.ts:
+    case 'ts':
       return {
         ...typings,
         '@types/node': 'latest',
         typescript: 'latest',
       };
-    case SourceLanguage.js:
+    case 'js':
       return {};
     default:
-      log('generalDebug_0003', 'Did not find a valid language. Just skipping devDependencies.');
+      log('generalDebug_0003', 'Did not find a valid language. Skipping "devDependencies".');
       return {};
   }
 }

package/src/common/log.ts

@@ -8,6 +8,7 @@ import { LogLevels, QuickMessage } from '../types';
 
 type Messages = typeof messages;
 type MessageTypes = keyof Messages;
+let currentProgress: string = undefined;
 
 const logger = (() => {
   try {
@@ -92,7 +93,8 @@ export function logFail(message: string, ...args: Array<string | number | boolea
 }
 
 export function progress(message: string, ...args: Array<string | number | boolean>) {
-  logger.progress(format(message, ...args));
+  currentProgress = format(message, ...args)
+  logger.progress(currentProgress);
 }
 
 export function logReset() {
@@ -100,6 +102,12 @@ export function logReset() {
   logger.stopSpinner();
 }
 
+export function logSuspend() {
+  logReset();
+
+  return () => logger.progress(currentProgress);
+}
+
 export function fail<T extends MessageTypes>(type: T, ...args: Parameters<Messages[T]>): never {
   const message = log(type, ...args);
   const error = new Error(message);

package/src/common/npm.ts

@@ -43,6 +43,10 @@ async function detectMonorepoRoot(root: string): Promise<[] | [string, NpmClient
     const packageJson = await readJson(root, 'package.json');
 
     if (Array.isArray(packageJson?.workspaces)) {
+      if (await checkExists(resolve(root, '.pnp.cjs'))) {
+        return [root, 'pnp'];
+      }
+
       if (await checkExists(resolve(root, 'yarn.lock'))) {
         return [root, 'yarn'];
       }
@@ -74,8 +78,6 @@ export async function determineNpmClient(root: string, selected?: NpmClientType)
       `Results of the lock file check: ${searchedClients.map((m) => `${m.client}=${m.result}`).join(', ')}`,
     );
 
-    const defaultClient = config.npmClient;
-
     if (foundClients.length > 1) {
       const wrapperClient = foundClients.find((m) => isWrapperClient(m.client));
 
@@ -97,12 +99,14 @@ export async function determineNpmClient(root: string, selected?: NpmClientType)
       return client;
     }
 
+    const defaultClient = config.npmClient;
+
     if (clientTypeKeys.includes(defaultClient)) {
       log('generalDebug_0003', `Using the default client: "${defaultClient}".`);
       return defaultClient;
     }
 
-    log('generalDebug_0003', 'Using the default "npm" client.');
+    log('generalDebug_0003', 'Using the fallback "npm" client.');
     return 'npm';
   }
 
@@ -148,9 +152,20 @@ export function initNpmProject(client: NpmClientType, projectName: string, targe
   return initProject(projectName, target);
 }
 
-export function publishNpmPackage(target = '.', file = '*.tgz', flags: Array<string> = []): Promise<string> {
-  const { publishPackage } = clients.npm;
-  return publishPackage(target, file, ...flags);
+export function publishNpmPackage(
+  target = '.',
+  file = '*.tgz',
+  flags: Array<string> = [],
+  interactive = false,
+): Promise<string> {
+  const { publishPackage, loginUser } = clients.npm;
+  return publishPackage(target, file, ...flags).catch(err => {
+    if (!interactive) {
+      throw err;
+    }
+
+    return loginUser().then(() => publishNpmPackage(target, file, flags, false));
+  });
 }
 
 export function createNpmPackage(target = '.'): Promise<string> {

package/src/common/package.test.ts

@@ -1,6 +1,5 @@
 import { findPackageVersion, getPiralPackage, getPiletsInfo, retrievePiletData } from './package';
 import { cliVersion } from './info';
-import { SourceLanguage } from './enums';
 
 describe('CLI package module', () => {
   it('findPackageVersion finds the current package version', async () => {
@@ -48,9 +47,18 @@ describe('CLI package module', () => {
   });
 
   it('getPiralPackage returns piral package', () => {
-    let result = getPiralPackage('app', SourceLanguage.ts, '1.0.0', 'piral-base', 'webpack');
+    let result = getPiralPackage(
+      'app',
+      { language: 'ts', packageName: 'piral-base', reactRouterVersion: 5, reactVersion: 17 },
+      '1.0.0',
+      'webpack',
+    );
     expect(result.devDependencies['piral-cli-webpack']).toEqual('1.0.0');
-    result = getPiralPackage('app', SourceLanguage.ts, '1.0.0', 'piral-base');
+    result = getPiralPackage(
+      'app',
+      { language: 'ts', packageName: 'piral-base', reactRouterVersion: 5, reactVersion: 17 },
+      '1.0.0',
+    );
     expect(result.devDependencies).not.toContain('piral-cli-webpack');
   });
 

package/src/common/package.ts

@@ -2,18 +2,17 @@ import { resolve, join, extname, basename, dirname, relative } from 'path';
 import { log, fail } from './log';
 import { cliVersion } from './info';
 import { unpackTarball } from './archive';
-import { getDependencies, getDevDependencies } from './language';
-import { SourceLanguage, ForceOverwrite } from './enums';
+import { getDependencies, getDependencyPackages, getDevDependencies, getDevDependencyPackages } from './language';
+import { ForceOverwrite } from './enums';
 import { checkAppShellCompatibility } from './compatibility';
 import { deepMerge } from './merge';
-import { applyTemplate } from './template';
 import { readImportmap } from './importmap';
 import { filesTar, filesOnceTar, declarationEntryExtensions, bundlerNames } from './constants';
 import { getHash, checkIsDirectory, matchFiles } from './io';
 import { readJson, copy, updateExistingJson, findFile, checkExists } from './io';
 import { isGitPackage, isLocalPackage, makeGitUrl, makeFilePath } from './npm';
 import { makePiletExternals, makeExternals, findPackageRoot } from './npm';
-import { Framework, FileInfo, PiletsInfo, TemplateFileLocation, PackageData } from '../types';
+import { SourceLanguage, Framework, FileInfo, PiletsInfo, TemplateFileLocation, PackageData } from '../types';
 
 function appendBundler(devDependencies: Record<string, string>, bundler: string, version: string) {
   if (bundler && bundler !== 'none') {
@@ -49,7 +48,6 @@ function getDependencyVersion(
 interface FileDescriptor {
   sourcePath: string;
   targetPath: string;
-  template: boolean;
 }
 
 const globPatternStartIndicators = ['*', '?', '[', '!(', '?(', '+(', '@('];
@@ -59,12 +57,7 @@ async function getMatchingFiles(
   target: string,
   file: string | TemplateFileLocation,
 ): Promise<Array<FileDescriptor>> {
-  const {
-    from,
-    to,
-    deep = true,
-    template = false,
-  } = typeof file === 'string' ? { from: file, to: file, deep: true } : file;
+  const { from, to, deep = true } = typeof file === 'string' ? { from: file, to: file, deep: true } : file;
   const sourcePath = resolve(source, from);
   const targetPath = resolve(target, to);
   const isDirectory = await checkIsDirectory(sourcePath);
@@ -76,7 +69,6 @@ async function getMatchingFiles(
     return files.map((file) => ({
       sourcePath: file,
       targetPath: resolve(targetPath, relative(sourcePath, file)),
-      template,
     }));
   } else if (globPatternStartIndicators.some((m) => from.indexOf(m) !== -1)) {
     log('generalDebug_0003', `Matching using glob "${sourcePath}".`);
@@ -98,7 +90,6 @@ async function getMatchingFiles(
     return files.map((file) => ({
       sourcePath: file,
       targetPath: resolve(tarRoot, relative(relRoot, file)),
-      template,
     }));
   }
 
@@ -108,7 +99,6 @@ async function getMatchingFiles(
     {
       sourcePath,
       targetPath,
-      template,
     },
   ];
 }
@@ -155,23 +145,24 @@ export function readPiralPackage(root: string, name: string): Promise<PackageDat
   return readJson(path, 'package.json');
 }
 
-export function getPiralPackage(
-  app: string,
-  language: SourceLanguage,
-  version: string,
-  framework: Framework,
-  bundler?: string,
-) {
-  // take default packages only if piral-core
-  const packages = framework !== 'piral-core' ? {} : undefined;
-  // take default dev packages only if not piral-base
-  const typings = framework === 'piral-base' ? {} : undefined;
+export interface PiralPackageData {
+  packageName: Framework;
+  language: SourceLanguage;
+  reactVersion: number;
+  reactRouterVersion: number;
+}
+
+export function getPiralPackage(app: string, data: PiralPackageData, version: string, bundler?: string) {
+  const framework = data.packageName;
   const devDependencies = {
-    ...getDevDependencies(language, typings),
+    ...getDevDependencies(
+      data.language,
+      getDevDependencyPackages(framework, data.reactVersion, data.reactRouterVersion),
+    ),
     'piral-cli': `${version}`,
   };
   const dependencies = {
-    ...getDependencies(language, packages),
+    ...getDependencies(data.language, getDependencyPackages(framework, data.reactVersion, data.reactRouterVersion)),
   };
 
   appendBundler(devDependencies, bundler, version);
@@ -219,7 +210,6 @@ async function getAvailableFiles(
   return files.map((file) => ({
     sourcePath: file,
     targetPath: resolve(root, relative(base, file)),
-    template: fileMap.find((m) => resolve(source, m.from) === file)?.template || false,
   }));
 }
 
@@ -249,17 +239,13 @@ async function copyFiles(
   variables?: Record<string, string>,
 ) {
   for (const subfile of subfiles) {
-    const { sourcePath, targetPath, template } = subfile;
+    const { sourcePath, targetPath } = subfile;
     const exists = await checkExists(sourcePath);
 
     if (exists) {
       const overwrite = originalFiles.some((m) => m.path === targetPath && !m.changed);
       const force = overwrite ? ForceOverwrite.yes : forceOverwrite;
-      const written = await copy(sourcePath, targetPath, force);
-
-      if (written && template && variables) {
-        await applyTemplate(targetPath, variables);
-      }
+      await copy(sourcePath, targetPath, force);
     } else {
       fail('cannotFindFile_0046', sourcePath);
     }

package/src/common/port.ts

@@ -1,6 +1,16 @@
 import { log } from './log';
 import { getPort } from '../external';
 
+export async function getAvailablePort(defaultPort: number) {
+  const selectedPort = await getFreePort(defaultPort);
+
+  if (selectedPort !== defaultPort) {
+    log('portNotFree_0047', selectedPort, defaultPort);
+  }
+
+  return selectedPort;
+}
+
 export async function getFreePort(preferred?: number) {
   log('generalDebug_0003', `Looking for a free port. Preferred port: ${preferred}`);
   const port = await getPort(preferred && { port: preferred });

package/src/common/scaffold.ts

@@ -1,10 +1,10 @@
 import { join, dirname, resolve, basename, isAbsolute } from 'path';
 import { installNpmPackage } from './npm';
-import { ForceOverwrite, SourceLanguage } from './enums';
+import { ForceOverwrite } from './enums';
 import { createDirectory, createFileIfNotExists, updateExistingJson } from './io';
 import { cliVersion, isWindows } from './info';
 import { log, fail, getLogLevel } from './log';
-import { Framework } from '../types';
+import { Framework, SourceLanguage } from '../types';
 
 interface TemplateFile {
   path: string;
@@ -103,16 +103,6 @@ function getTemplatePackageName(type: 'piral' | 'pilet', template: string) {
   return template;
 }
 
-function getLanguageName(language: SourceLanguage) {
-  switch (language) {
-    case SourceLanguage.js:
-      return 'js';
-    case SourceLanguage.ts:
-    default:
-      return 'ts';
-  }
-}
-
 export function getPiralScaffoldData(
   language: SourceLanguage,
   root: string,
@@ -125,9 +115,11 @@ export function getPiralScaffoldData(
     ...variables,
     root,
     src,
-    language: getLanguageName(language),
+    language,
     packageName,
-  };
+    reactVersion: parseInt(variables.reactVersion) || 17,
+    reactRouterVersion: parseInt(variables.reactRouterVersion) || 17,
+  } as const;
 }
 
 export async function scaffoldPiralSourceFiles(
@@ -157,9 +149,9 @@ export function getPiletScaffoldData(
     ...variables,
     root,
     src,
-    language: getLanguageName(language),
+    language,
     sourceName,
-  };
+  } as const;
 }
 
 export async function scaffoldPiletSourceFiles(