@tramvai/cli 2.64.0 → 2.66.0

package/src/api/analyze/providers/shared.ts

@@ -5,13 +5,14 @@ import {
   COMMAND_PARAMETERS_TOKEN,
   CONFIG_ENTRY_TOKEN,
 } from '../../../di/tokens';
-import { ConfigManager } from '../../../config/configManager';
+import { createConfigManager } from '../../../config/configManager';
+import type { CliConfigEntry } from '../../../typings/configEntry/cli';
 
 export const sharedProviders: readonly Provider[] = [
   provide({
     provide: CONFIG_MANAGER_TOKEN,
     useFactory: ({ configEntry, parameters }) => {
-      return new ConfigManager(configEntry, {
+      return createConfigManager(configEntry as CliConfigEntry, {
         ...parameters,
         env: 'production',
         buildType: 'client',

package/src/api/benchmark/__integration__/__fixtures__/tramvai.json

@@ -4,14 +4,7 @@
     "app": {
       "name": "app",
       "root": "app",
-      "type": "application",
-      "commands": {
-        "build": {
-          "options": {
-            "server": "app/server.tsx"
-          }
-        }
-      }
+      "type": "application"
     }
   }
 }

package/src/api/benchmark/index.ts

@@ -15,7 +15,7 @@ export interface Params {
 }
 
 export interface Result {
-  [key: string]: RunStats;
+  [key: string]: RunStats | undefined;
 }
 
 export type BenchmarkCommand = (

package/src/api/build/__integration__/__fixtures__/app/App.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styles from './styles.css';
 
 export default () => {

package/src/api/build/__integration__/__fixtures__/app/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 
@@ -9,12 +8,19 @@ const bundlesMap = {
   third: () => import('./bundles/third'),
 };
 
-const url = new URL(window.location.href);
-
-if (url.searchParams.has('bundle')) {
-  bundlesMap[url.searchParams.get('bundle')]().then(({ default: name }) =>
-    console.log(`loaded bundle ${name}`)
-  );
+if (typeof window === 'undefined') {
+  require('./server.tsx')
 }
 
-ReactDOM.hydrate(<App />, document.getElementById('root'));
+if (typeof window !== 'undefined') {
+  const url = new URL(window.location.href);
+
+  if (url.searchParams.has('bundle')) {
+    bundlesMap[url.searchParams.get('bundle')]().then(({ default: name }) =>
+      console.log(`loaded bundle ${name}`)
+    );
+  }
+
+  ReactDOM.hydrate(<App />, document.getElementById('root'));
+
+}

package/src/api/build/__integration__/__fixtures__/app/server.tsx

@@ -1,5 +1,4 @@
 import express from 'express';
-import React from 'react';
 import { createServer } from 'http';
 import { renderToString } from 'react-dom/server';
 import { appConfig } from '@tramvai/cli/lib/external/config';

package/src/api/build/__integration__/__fixtures__/tramvai.json

@@ -5,16 +5,7 @@
       "name": "app",
       "root": "app",
       "type": "application",
-      "commands": {
-        "build": {
-          "options": {
-            "server": "app/server.tsx"
-          },
-          "configurations": {
-            "modern": false
-          }
-        }
-      }
+      "modern": false
     },
     "module": {
       "name": "module",

package/src/api/build/__integration__/build.test.ts

@@ -55,19 +55,10 @@ describe('@tramvai/cli build command', () => {
           name: 'app',
           type: 'application',
           root: resolve(FIXTURES_DIR, 'app'),
-          commands: {
-            build: {
-              options: {
-                server: resolve(FIXTURES_DIR, 'app/server'),
-              },
-              configurations: {
-                modern: false,
-                definePlugin: {
-                  dev: {
-                    IS_REACT_APP: true,
-                  },
-                },
-              },
+          modern: false,
+          define: {
+            development: {
+              IS_REACT_APP: 'true',
             },
           },
         },

package/src/api/build/child-app.ts

@@ -2,13 +2,11 @@ import type { Container } from '@tinkoff/dippy';
 import type { Result } from './index';
 import { sharedProviders } from './providers/shared';
 import { registerProviders } from '../../utils/di';
-import { ABSTRACT_BUILDER_FACTORY_TOKEN, CONFIG_MANAGER_TOKEN } from '../../di/tokens';
+import { ABSTRACT_BUILDER_FACTORY_TOKEN } from '../../di/tokens';
 
 export const buildChildApp = async (di: Container): Result => {
   registerProviders(di, sharedProviders);
 
-  const configManager = di.get(CONFIG_MANAGER_TOKEN);
-
   const builderFactory = di.get(ABSTRACT_BUILDER_FACTORY_TOKEN);
   const builder = await builderFactory.createBuilder('webpack', {
     options: {
@@ -18,7 +16,9 @@ export const buildChildApp = async (di: Container): Result => {
   });
 
   const builderBuild = await builder.build({
-    modern: configManager.modern,
+    // child-app either should be built for legacy code always
+    // or should be smart loaded depending on browser capabilities
+    modern: false,
   });
 
   return {

package/src/api/build/module.ts

@@ -2,13 +2,11 @@ import type { Container } from '@tinkoff/dippy';
 import type { Result } from './index';
 import { sharedProviders } from './providers/shared';
 import { registerProviders } from '../../utils/di';
-import { ABSTRACT_BUILDER_FACTORY_TOKEN, CONFIG_MANAGER_TOKEN } from '../../di/tokens';
+import { ABSTRACT_BUILDER_FACTORY_TOKEN } from '../../di/tokens';
 
 export const buildModule = async (di: Container): Result => {
   registerProviders(di, [...sharedProviders]);
 
-  const configManager = di.get(CONFIG_MANAGER_TOKEN);
-
   const builderFactory = di.get(ABSTRACT_BUILDER_FACTORY_TOKEN);
   const builder = await builderFactory.createBuilder('webpack', {
     options: {
@@ -18,7 +16,7 @@ export const buildModule = async (di: Container): Result => {
   });
 
   const builderBuild = await builder.build({
-    modern: configManager.modern,
+    modern: false,
   });
 
   return {

package/src/api/build/providers/shared.ts

@@ -4,7 +4,7 @@ import {
   COMMAND_PARAMETERS_TOKEN,
   CONFIG_ENTRY_TOKEN,
 } from '../../../di/tokens';
-import { ConfigManager } from '../../../config/configManager';
+import { createConfigManager } from '../../../config/configManager';
 import type { ApplicationConfigEntry } from '../../../typings/configEntry/application';
 import type { Params } from '../index';
 
@@ -18,7 +18,7 @@ export const sharedProviders: readonly Provider[] = [
       configEntry: ApplicationConfigEntry;
       parameters: Params;
     }) => {
-      return new ConfigManager(configEntry, {
+      return createConfigManager(configEntry, {
         ...parameters,
         env: 'production',
         buildType: 'client',

package/src/api/index.ts

@@ -14,12 +14,16 @@ import type { AnalyzeCommand } from './analyze';
 import type { StartProdCommand } from './start-prod';
 
 export * from '../di/tokens';
-export { ConfigManager } from '../config/configManager';
+export { ConfigManager, createConfigManager } from '../config/configManager';
+export { CliConfigEntry } from '../typings/configEntry/cli';
+export { ApplicationConfigEntry } from '../typings/configEntry/application';
+export { ChildAppConfigEntry } from '../typings/configEntry/child-app';
+export { ConvertToSchema } from '../schema/ConfigSchema';
 export { ConfigManager as ConfigManagerValidator } from '../models/config';
 export { getTramvaiConfig } from '../utils/getTramvaiConfig';
 export { syncJsonFile } from '../utils/syncJsonFile';
 export { babelConfigFactory } from '../library/babel';
-export { filesClientWebackRulesFactory } from '../library/webpack/blocks/filesClient';
+export { filesClientWebpackRulesFactory } from '../library/webpack/blocks/filesClient';
 export { cssWebpackRulesFactory } from '../library/webpack/blocks/css';
 export { lessWebpackRulesFactory } from '../library/webpack/blocks/less';
 export { postcssAssetsWebpackRulesFactory } from '../library/webpack/blocks/postcssAssets';

package/src/api/shared/types/withConfig.ts

@@ -1,17 +1,16 @@
+import type { WithRootDir } from './withRootDir';
 import type { ApplicationConfigEntry } from '../../../typings/configEntry/application';
 import type { ModuleConfigEntry } from '../../../typings/configEntry/module';
-import type { WithRootDir } from './withRootDir';
 import type { PackageConfigEntry } from '../../../typings/configEntry/package';
 import type { ChildAppConfigEntry } from '../../../typings/configEntry/child-app';
+import type { ConvertToSchema } from '../../../schema/ConfigSchema';
 
 export type WithConfig<T> = WithRootDir<T> &
   (
     | { target: string }
     | {
-        config:
-          | ApplicationConfigEntry
-          | ModuleConfigEntry
-          | PackageConfigEntry
-          | ChildAppConfigEntry;
+        config: ConvertToSchema<
+          ApplicationConfigEntry | ModuleConfigEntry | PackageConfigEntry | ChildAppConfigEntry
+        >;
       }
   );

package/src/api/start/__integration__/__fixtures__/app/index.tsx

@@ -8,12 +8,16 @@ const bundlesMap = {
   third: () => import('./bundles/third'),
 };
 
-const url = new URL(window.location.href);
+if (typeof window === 'undefined') {
+  require('./server')
+} else {
+  const url = new URL(window.location.href);
 
-if (url.searchParams.has('bundle')) {
-  bundlesMap[
-    url.searchParams.get('bundle') as keyof typeof bundlesMap
-  ]().then(({ default: name }: { default: string }) => console.log(`loaded bundle ${name}`));
-}
+  if (url.searchParams.has('bundle')) {
+    bundlesMap[
+      url.searchParams.get('bundle') as keyof typeof bundlesMap
+    ]().then(({ default: name }: { default: string }) => console.log(`loaded bundle ${name}`));
+  }
 
-ReactDOM.hydrate(<App />, document.getElementById('root'));
+  ReactDOM.hydrate(<App />, document.getElementById('root'));
+}

package/src/api/start/__integration__/__fixtures__/tramvai.json

@@ -5,23 +5,12 @@
       "name": "app",
       "root": "app",
       "type": "application",
-      "commands": {
-        "build": {
-          "options": {
-            "server": "app/server.tsx",
-            "serverApiDir": "app/api"
-          },
-          "configurations": {
-            "fileSystemPages": {
-              "enable": true
-            }
-          }
-        },
-        "serve": {
-          "configurations": {
-            "hotRefresh": true
-          }
-        }
+      "serverApiDir": "app/api",
+      "fileSystemPages": {
+        "enabled": true
+      },
+      "hotRefresh": {
+        "enabled": true
       }
     },
     "module": {

package/src/api/start/__integration__/start.test.ts

@@ -6,7 +6,10 @@ import type { PromiseType } from 'utility-types';
 import { getPort } from '@tramvai/internal-test-utils/utils/getPort';
 import { getServerUrl } from '@tramvai/test-integration';
 import { initPlaywright } from '@tramvai/test-pw';
+import { createServer } from '../utils/createServer';
+import { listenServer } from '../utils/listenServer';
 import { getListeningPort } from '../utils/getListeningPort';
+import { stopServer } from '../utils/stopServer';
 
 const FIXTURES_DIR = resolve(__dirname, '__fixtures__');
 
@@ -93,9 +96,7 @@ describe('@tramvai/cli start command', () => {
           port: serverPort,
           staticPort: staticServerPort,
           type: 'application',
-          configEntry: expect.objectContaining({
-            name: 'app',
-          }),
+          name: 'app',
         });
 
         const { body: browserslistConfig } = await request
@@ -136,8 +137,6 @@ describe('@tramvai/cli start command', () => {
 
         await page.goto(serverUrl);
 
-        console.log(await page.$eval('body', (node) => node.innerHTML));
-
         expect(
           await page.$eval('#cmp', (node) => (node as HTMLElement).innerText)
         ).toMatchInlineSnapshot(`"Cmp test: start"`);
@@ -173,13 +172,6 @@ describe('@tramvai/cli start command', () => {
           name: 'app',
           type: 'application',
           root,
-          commands: {
-            build: {
-              options: {
-                server: resolve(root, 'server.tsx'),
-              },
-            },
-          },
         },
       });
 
@@ -267,6 +259,39 @@ describe('@tramvai/cli start command', () => {
 
       return close();
     });
+
+    it('should start the app on the next available port, if default port is busy', async () => {
+      const testServerStub = createServer();
+      const testStaticServerStub = createServer();
+
+      // To avoid situation when two subsequent calls
+      // of the `detectPortSync` return the same free port.
+      await listenServer(testServerStub, '0.0.0.0', getPort() + 50);
+      await listenServer(testStaticServerStub, '0.0.0.0', getPort());
+
+      const { server, staticServer, close } = await start({
+        rootDir: FIXTURES_DIR,
+        target: 'app',
+        resolveSymlinks: false,
+        port: getListeningPort(testServerStub),
+        staticPort: getListeningPort(testStaticServerStub),
+      });
+
+      const testServer = supertestByPort(getListeningPort(server));
+      const testStatic = supertestByPort(getListeningPort(staticServer));
+
+      expect(server?.address()).toMatchObject({
+        port: expect.any(Number),
+      });
+      expect(staticServer?.address()).toMatchObject({
+        port: expect.any(Number),
+      });
+
+      await testServer.get('/').expect(200);
+      await testStatic.get('/').expect(404);
+
+      return Promise.all([close(), stopServer(testServerStub), stopServer(testStaticServerStub)]);
+    });
   });
 
   describe('module', () => {
@@ -288,7 +313,7 @@ describe('@tramvai/cli start command', () => {
     });
 
     it('should start module by specific config', async () => {
-      const staticServerPort = await getPort();
+      const staticServerPort = getPort();
 
       const { staticServer, close } = await start({
         config: {

package/src/api/start/providers/application/server.ts

@@ -1,45 +1,36 @@
 import type { Provider } from '@tinkoff/dippy';
+import { provide } from '@tinkoff/dippy';
+
 import { INIT_HANDLER_TOKEN, CLOSE_HANDLER_TOKEN } from '../../tokens';
-import { COMMAND_PARAMETERS_TOKEN, SERVER_TOKEN } from '../../../../di/tokens';
+import { CONFIG_MANAGER_TOKEN, SERVER_TOKEN } from '../../../../di/tokens';
 import { stopServer } from '../../utils/stopServer';
 import { createServer } from '../../utils/createServer';
 import { listenServer } from '../../utils/listenServer';
-import type { Params } from '../../index';
 
 export const serverProviders: readonly Provider[] = [
-  {
+  provide({
     provide: SERVER_TOKEN,
     useFactory: createServer,
-  },
-  {
+  }),
+  provide({
     provide: INIT_HANDLER_TOKEN,
     multi: true,
-    useFactory: ({ server, parameters }: { server: typeof SERVER_TOKEN; parameters: Params }) => {
+    useFactory: ({ server, configManager }) => {
       return async function staticServerListen() {
-        const { host = '0.0.0.0', port = 3000 } = parameters;
-
-        try {
-          await listenServer(server, host, port);
-        } catch (error) {
-          if ((error as any).code === 'EADDRINUSE') {
-            throw new Error(
-              `Address '${host}:${port}' in use, either release this port or use options --port --host`
-            );
-          }
+        const { host, port } = configManager;
 
-          throw error;
-        }
+        await listenServer(server, host, port);
       };
     },
     deps: {
       server: SERVER_TOKEN,
-      parameters: COMMAND_PARAMETERS_TOKEN,
+      configManager: CONFIG_MANAGER_TOKEN,
     },
-  },
-  {
+  }),
+  provide({
     provide: CLOSE_HANDLER_TOKEN,
     multi: true,
-    useFactory: ({ server }: { server: typeof SERVER_TOKEN }) => {
+    useFactory: ({ server }) => {
       return () => {
         return stopServer(server);
       };
@@ -47,5 +38,5 @@ export const serverProviders: readonly Provider[] = [
     deps: {
       server: SERVER_TOKEN,
     },
-  },
+  }),
 ] as const;

package/src/api/start/providers/application/shared.ts

@@ -1,88 +1,62 @@
 import type { Provider } from '@tinkoff/dippy';
+import { provide } from '@tinkoff/dippy';
+
 import { CLOSE_HANDLER_TOKEN, INIT_HANDLER_TOKEN } from '../../tokens';
 import {
   CONFIG_MANAGER_TOKEN,
   CONFIG_ENTRY_TOKEN,
   COMMAND_PARAMETERS_TOKEN,
-  SERVER_TOKEN,
   STATIC_SERVER_TOKEN,
 } from '../../../../di/tokens';
 import { stopServer } from '../../utils/stopServer';
 import type { ApplicationConfigEntry } from '../../../../typings/configEntry/application';
-import type { Params } from '../../index';
-import { ConfigManager } from '../../../../config/configManager';
+import {
+  createConfigManager,
+  DEFAULT_PORT,
+  DEFAULT_STATIC_PORT,
+} from '../../../../config/configManager';
 import { createServer } from '../../utils/createServer';
 import { listenServer } from '../../utils/listenServer';
-import { getListeningPort } from '../../utils/getListeningPort';
+import { detectPortSync } from '../../../../utils/detectPortSync';
 
 export const sharedProviders: readonly Provider[] = [
-  {
+  provide({
     provide: CONFIG_MANAGER_TOKEN,
-    useFactory: ({
-      configEntry,
-      parameters,
-      server,
-      staticServer,
-    }: {
-      configEntry: ApplicationConfigEntry;
-      parameters: Params;
-      server: typeof SERVER_TOKEN;
-      staticServer: typeof STATIC_SERVER_TOKEN;
-    }) => {
-      return new ConfigManager(configEntry, {
+    useFactory: ({ configEntry, parameters }) =>
+      createConfigManager(configEntry as ApplicationConfigEntry, {
         ...parameters,
         env: 'development',
-        buildType: 'client',
-        port: server ? getListeningPort(server) : parameters.port,
-        staticPort: getListeningPort(staticServer),
-      });
-    },
+        port: detectPortSync(parameters.port ?? DEFAULT_PORT),
+        staticPort: detectPortSync(parameters.staticPort ?? DEFAULT_STATIC_PORT),
+      }),
     deps: {
       configEntry: CONFIG_ENTRY_TOKEN,
       parameters: COMMAND_PARAMETERS_TOKEN,
-      staticServer: STATIC_SERVER_TOKEN,
-      server: { token: SERVER_TOKEN, optional: true },
     },
-  },
-  {
+  }),
+  provide({
     provide: STATIC_SERVER_TOKEN,
     useFactory: createServer,
-  },
-  {
+  }),
+  provide({
     provide: INIT_HANDLER_TOKEN,
     multi: true,
-    useFactory: ({
-      staticServer,
-      parameters,
-    }: {
-      staticServer: typeof STATIC_SERVER_TOKEN;
-      parameters: Params;
-    }) => {
+    useFactory: ({ configManager, staticServer }) => {
       return async function staticServerListen() {
-        const { staticHost = 'localhost', staticPort = 4000 } = parameters;
-
-        try {
-          await listenServer(staticServer, staticHost.replace('localhost', '0.0.0.0'), staticPort);
-        } catch (error) {
-          if ((error as any).code === 'EADDRINUSE') {
-            throw new Error(
-              `Address '${staticHost}:${staticPort}' in use, either release this port or use options --staticPort --staticHost`
-            );
-          }
+        const { staticHost, staticPort } = configManager;
 
-          throw error;
-        }
+        await listenServer(staticServer, staticHost.replace('localhost', '0.0.0.0'), staticPort);
       };
     },
     deps: {
       staticServer: STATIC_SERVER_TOKEN,
-      parameters: COMMAND_PARAMETERS_TOKEN,
+      configManager: CONFIG_MANAGER_TOKEN,
     },
-  },
-  {
+  }),
+  provide({
     provide: CLOSE_HANDLER_TOKEN,
     multi: true,
-    useFactory: ({ staticServer }: { staticServer: typeof STATIC_SERVER_TOKEN }) => {
+    useFactory: ({ staticServer }) => {
       return () => {
         return stopServer(staticServer);
       };
@@ -90,5 +64,5 @@ export const sharedProviders: readonly Provider[] = [
     deps: {
       staticServer: STATIC_SERVER_TOKEN,
     },
-  },
+  }),
 ] as const;