@squiz/component-cli-lib 1.2.1-alpha.99 → 1.2.3

package/src/component-dev.ts

@@ -1,6 +1,11 @@
-import { startRenderStack, stopRenderStack } from '@squiz/render-runtime-lib';
-import { getLogger } from '@squiz/dx-logger-lib';
+import {
+  ComponentPreviewService,
+  ComponentRunnerServiceWithWorkers,
+  setupRenderRuntimeServer,
+} from '@squiz/render-runtime-lib';
+import { getLogger, LoggerOptions } from '@squiz/dx-logger-lib';
 import path from 'path';
+import { ComponentFunctionService, ComponentSetServiceForLocalDev, ManifestServiceForDev } from '@squiz/component-lib';
 
 /**
  * startDevelopmentRender starts a dev-mode render stack for any
@@ -11,24 +16,41 @@ import path from 'path';
  * @param {object} options - Additional configuration for the dev stack
  * @returns a function to stop the render stack
  */
-export async function startDevelopmentRender(componentPath: string, options: { port: number; previewFile?: string }) {
-  const logger = getLogger({ name: 'component-dev', format: 'human' });
-  await startRenderStack({
-    logger: logger,
-    webserver: {
-      port: options.port,
-      rootUrl: `http://localhost:${options.port}`,
-      shouldRunMigrations: false,
+export function startDevelopmentRender(
+  componentPath: string,
+  options: { port: number; previewFile?: string; loggingFormat?: LoggerOptions['format'] },
+) {
+  const logger = getLogger({ name: 'component-dev', format: options.loggingFormat || 'human' });
+  const rootUrl = `http://localhost:${options.port}`;
+  const dataMountPoint = path.resolve(process.cwd(), componentPath);
+
+  const componentRunnerService = new ComponentRunnerServiceWithWorkers(
+    {
+      dataMountPoint,
+      shouldCacheResponses: false,
+      workerTimeout: 5_000,
     },
-    componentRunner: {
-      // Considering the component path will be passed in from CLI
-      // We need to generate the path from the calling directory
-      dataMountPoint: path.resolve(process.cwd(), componentPath),
-      localDevMode: true,
-      previewFile: options.previewFile,
-      workerTimeout: 20_000,
+    logger,
+  );
+  const webServer = setupRenderRuntimeServer(
+    {
+      logger,
+      componentRunnerService,
+      componentSetService: new ComponentSetServiceForLocalDev(logger),
+      componentFunctionService: new ComponentFunctionService(rootUrl),
+      componentPreviewService: new ComponentPreviewService(options.previewFile),
+      manifestService: new ManifestServiceForDev(dataMountPoint, logger),
     },
+    { rootUrl },
+  );
+
+  const server = webServer.listen(options.port, () => {
+    logger.info(`Component development webserver started on port ${options.port}`);
+  });
+
+  server.on('close', async () => {
+    await componentRunnerService.stop();
   });
 
-  return () => stopRenderStack();
+  return server;
 }

package/src/integration-tests/__components__/big-package/manifest.json

@@ -3,7 +3,10 @@
 
   "name": "big-package",
   "version": "1.0.2",
-  "main-function": "render-json",
+  "mainFunction": "render-json",
+  "namespace": "smoke-test-components",
+  "displayName": "some-displayName",
+  "description": "some-description",
   "functions": [
     {
       "name": "render-json",
@@ -18,7 +21,7 @@
         "required": ["something"]
       },
       "output": {
-        "response-type": "json",
+        "responseType": "json",
         "definition": {
           "properties": {
             "my-prop": {

package/src/integration-tests/__components__/cmp-static-file-test/manifest.json

@@ -3,8 +3,10 @@
 
   "name": "cmp-static-file-test",
   "version": "1.0.0",
-  "main-function": "main",
-
+  "mainFunction": "main",
+  "namespace": "smoke-test-components",
+  "displayName": "some-displayName",
+  "description": "some-description",
   "functions": [
     {
       "entry": "main.js",
@@ -19,9 +21,9 @@
         "required": ["something"]
       },
       "output": {
-        "response-type": "html",
+        "responseType": "html",
 
-        "static-files": [
+        "staticFiles": [
           {
             "location": "header",
             "file": {
@@ -34,7 +36,7 @@
     }
   ],
 
-  "static-files": {
-    "location-root": "public"
+  "staticFiles": {
+    "locationRoot": "public"
   }
 }

package/src/integration-tests/__components__/invalid-manifest/manifest.json

@@ -3,7 +3,10 @@
 
   "name": "invalid-manifes@t",
   "version": "1.0.0",
-  "main-function": "main",
+  "mainFunction": "main",
+  "namespace": "smoke-test-components",
+  "displayName": "some-displayName",
+  "description": "some-description",
 
   "functions": [
     {
@@ -19,7 +22,7 @@
         "required": ["something"]
       },
       "output": {
-        "response-type": "html"
+        "responseType": "html"
       }
     }
   ]

package/src/integration-tests/helper.ts

@@ -4,7 +4,8 @@ import path from 'path';
 
 import fsp from 'fs/promises';
 import { randomBytes } from 'crypto';
-import { parseEnvVarForVar } from '@squiz/component-lib';
+import { ComponentSetWebModel } from '@squiz/component-lib';
+import { parseEnvVarForVar } from '@squiz/dx-common-lib';
 import { config } from 'dotenv';
 
 config();
@@ -12,6 +13,7 @@ config();
 interface Config {
   managementServiceUrl: string;
   renderServiceUrl: string;
+  contentServiceUrl: string;
   ci_buildVersion: string;
   ci_buildBranch: string;
 }
@@ -19,6 +21,7 @@ interface Config {
 const configObj: Config = {
   managementServiceUrl: parseEnvVarForVar('COMPONENT_MANAGEMENT_SERVICE_URL').replace(/\/+$/, ''),
   renderServiceUrl: parseEnvVarForVar('COMPONENT_RENDER_SERVICE_URL').replace(/\/+$/, ''),
+  contentServiceUrl: parseEnvVarForVar('CONTENT_API_URL').replace(/\/+$/, ''),
   ci_buildVersion: parseEnvVarForVar('CI_COMMIT_SHORT_SHA'),
   ci_buildBranch: parseEnvVarForVar('CI_COMMIT_REF_NAME'),
 };
@@ -26,6 +29,10 @@ const configObj: Config = {
 export default configObj;
 
 export const managementService = axios.create({
+  baseURL: configObj.managementServiceUrl + '/v1',
+});
+
+export const managementServiceRoot = axios.create({
   baseURL: configObj.managementServiceUrl,
 });
 
@@ -33,6 +40,10 @@ export const renderService = axios.create({
   baseURL: configObj.renderServiceUrl,
 });
 
+export const contentService = axios.create({
+  baseURL: configObj.contentServiceUrl,
+});
+
 export const ci_buildVersion = configObj.ci_buildVersion;
 export const ci_buildBranch = configObj.ci_buildBranch;
 
@@ -56,3 +67,19 @@ export async function createFile(filePath: string, sizeInMB: number) {
 export function removeFile(filePath: string) {
   fsp.unlink(filePath);
 }
+
+export async function deleteComponentSet(webPath: string) {
+  try {
+    await managementService.delete(`/component-set/${webPath}`);
+  } catch (error) {
+    // no ops
+  }
+}
+
+export async function addComponentSet(componentSet: ComponentSetWebModel) {
+  try {
+    await managementService.post(`/component-set`, componentSet);
+  } catch (error) {
+    //no ops
+  }
+}

package/src/integration-tests/service-deployment.spec.ts

@@ -1,4 +1,11 @@
-import { renderService, managementService, ci_buildVersion, ci_buildBranch } from './helper';
+import {
+  renderService,
+  managementService,
+  contentService,
+  managementServiceRoot,
+  ci_buildVersion,
+  ci_buildBranch,
+} from './helper';
 
 interface HealthInfo {
   status: string;
@@ -8,14 +15,56 @@ interface HealthInfo {
 
 describe('Verify latest services deployments', () => {
   it('Should have latest Management API service', async () => {
-    const response: HealthInfo = (await managementService.get('/health')).data;
+    const response: HealthInfo = (await managementServiceRoot.get('/health')).data;
     expect(response.buildVersion).toBe(ci_buildVersion);
     expect(response.buildBranch).toBe(ci_buildBranch);
   });
 
+  it('Should return 200 for Management API docs', async () => {
+    const req = await managementService.get('/docs');
+    expect(req.status).toBe(200);
+    expect(req.headers['content-type']).toEqual('text/html; charset=utf-8');
+  });
+
+  it('Should return 200 for Management API docs.json', async () => {
+    const req = await managementService.get('/docs.json');
+    expect(req.status).toBe(200);
+    expect(req.headers['content-type']).toEqual('application/json; charset=UTF-8');
+  });
+
   it('Should have latest Render Runtime service', async () => {
     const response: HealthInfo = (await renderService.get('/health')).data;
     expect(response.buildVersion).toBe(ci_buildVersion);
     expect(response.buildBranch).toBe(ci_buildBranch);
   });
+
+  it('Should return 200 for Render Runtime API docs', async () => {
+    const req = await renderService.get('/docs');
+    expect(req.status).toBe(200);
+    expect(req.headers['content-type']).toEqual('text/html; charset=utf-8');
+  });
+
+  it('Should return 200 for Render Runtime API docs.json', async () => {
+    const req = await renderService.get('/docs.json');
+    expect(req.status).toBe(200);
+    expect(req.headers['content-type']).toEqual('application/json; charset=UTF-8');
+  });
+
+  it('Should have latest Content API service', async () => {
+    const response: HealthInfo = (await contentService.get('/health')).data;
+    expect(response.buildVersion).toBe(ci_buildVersion);
+    expect(response.buildBranch).toBe(ci_buildBranch);
+  });
+
+  it('Should return 200 for Content API docs', async () => {
+    const req = await contentService.get('/docs');
+    expect(req.status).toBe(200);
+    expect(req.headers['content-type']).toEqual('text/html; charset=utf-8');
+  });
+
+  it('Should return 200 for Content API docs.json', async () => {
+    const req = await contentService.get('/docs.json');
+    expect(req.status).toBe(200);
+    expect(req.headers['content-type']).toEqual('application/json; charset=UTF-8');
+  });
 });

package/src/integration-tests/upload-and-render-component.spec.ts

@@ -1,24 +1,46 @@
 import { uploadComponentFolder } from '../index';
-import configObj, { renderService, managementService, getTestComponents, createFile, removeFile } from './helper';
+import configObj, {
+  renderService,
+  managementService,
+  getTestComponents,
+  createFile,
+  removeFile,
+  addComponentSet,
+  deleteComponentSet,
+} from './helper';
 import color from 'cli-color';
 import path from 'path';
 import supertest from 'supertest';
 import { logger } from '../upload-component-folder';
+import { ComponentSetWebModel } from '@squiz/component-lib';
+import fsp from 'fs/promises';
 
 const mockConsoleError = jest.fn();
 const mockConsoleLog = jest.fn();
 
 const orgConsoleError = console.error;
+const webPath = 'set';
+const testFilesDir = path.resolve(__dirname, 'test-files');
+
+beforeAll(async () => {
+  await fsp.rm(testFilesDir, { force: true, recursive: true });
+  await fsp.mkdir(testFilesDir);
+});
 
 afterAll(async () => {
   // clean up the component added by the test
+  await deleteComponentSet(webPath);
+
   for (const componentName of getTestComponents()) {
     try {
-      await managementService.delete(`/component/${componentName}`);
+      await managementService.delete(`/component/smoke-test-components/${componentName}`);
     } catch {
       // no op
     }
   }
+
+  // clean up the test componnet files
+  await fsp.rm(testFilesDir, { force: true, recursive: true });
 });
 
 describe('Test isolated test cases', () => {
@@ -30,16 +52,26 @@ describe('Test isolated test cases', () => {
   it('Should fail uploading a component without manifest.json', async () => {
     mockConsoleError.mockClear();
     const componentPath = path.join(__dirname, '/__components__/invalid-upload');
-    await uploadComponentFolder(componentPath, configObj.managementServiceUrl, configObj.renderServiceUrl);
+    await uploadComponentFolder(
+      componentPath,
+      configObj.managementServiceUrl + '/v1',
+      configObj.renderServiceUrl,
+      testFilesDir,
+    );
     expect(mockConsoleError.mock.calls[0][0]).toEqual(color.red('manifest could not be found'));
   });
 
   it('Should fail uploading a component that has invalid manifest.json', async () => {
     mockConsoleError.mockClear();
     const componentPath = path.join(__dirname, '/__components__/invalid-manifest');
-    await uploadComponentFolder(componentPath, configObj.managementServiceUrl, configObj.renderServiceUrl);
+    await uploadComponentFolder(
+      componentPath,
+      configObj.managementServiceUrl + '/v1',
+      configObj.renderServiceUrl,
+      testFilesDir,
+    );
     expect(mockConsoleError.mock.calls[0][0]).toEqual(
-      color.red('/name: pattern must match pattern "^[a-zA-Z0-9_\\-]+$"'),
+      color.red('failed validation: /name pattern must match pattern "^[a-zA-Z0-9_\\-]+$"'),
     );
   });
 
@@ -48,7 +80,12 @@ describe('Test isolated test cases', () => {
     const componentPath = path.join(__dirname, '/__components__/big-package');
     const filePath = `${componentPath}/105mb-file`;
     await createFile(filePath, 105); // Higher limit has been used because compression reduces the size if you use closer to 100MB
-    await uploadComponentFolder(componentPath, configObj.managementServiceUrl, configObj.renderServiceUrl);
+    await uploadComponentFolder(
+      componentPath,
+      configObj.managementServiceUrl + '/v1',
+      configObj.renderServiceUrl,
+      testFilesDir,
+    );
     expect(mockConsoleError.mock.calls[0][0]).toEqual(
       color.red(['File size exceeds the maximum limit of 100MB'].join('')),
     );
@@ -61,6 +98,7 @@ describe('Deploy basic component having a static file', () => {
   const componentPath = path.join(__dirname, '/__components__/cmp-static-file-test');
 
   beforeAll(async () => {
+    await deleteComponentSet(webPath);
     for (const componentName of getTestComponents()) {
       try {
         await managementService.delete(`/component/${componentName}`);
@@ -80,33 +118,56 @@ describe('Deploy basic component having a static file', () => {
   });
 
   it('Should upload the component and return a valid url to preview', async () => {
-    mockConsoleLog.mockClear();
-    await uploadComponentFolder(componentPath, configObj.managementServiceUrl, configObj.renderServiceUrl);
-
-    const url = /uploaded location: (.*)/.exec(mockConsoleLog.mock.lastCall)?.[1] || '';
-    const uploadedComponent = '<a href="/r/set/cmp-static-file-test/1.0.0">1.0.0</a>';
-    const get = await supertest(url).get('/');
+    await uploadComponentFolder(
+      componentPath,
+      configObj.managementServiceUrl + '/v1',
+      configObj.renderServiceUrl,
+      testFilesDir,
+    );
 
+    const uploadedComponent = '<a href="/r/set/smoke-test-components/cmp-static-file-test/1.0.0">1.0.0</a>';
+    const get = await supertest(configObj.renderServiceUrl).get('/');
     expect(get.status).toEqual(200);
     expect((get as any)?.res?.text).toContain(uploadedComponent);
   });
 
   it('Should fail upload the component with same version', async () => {
     mockConsoleError.mockClear();
-    await uploadComponentFolder(componentPath, configObj.managementServiceUrl, configObj.renderServiceUrl);
+    await uploadComponentFolder(
+      componentPath,
+      configObj.managementServiceUrl + '/v1',
+      configObj.renderServiceUrl,
+      testFilesDir,
+    );
     expect(mockConsoleError.mock.calls[0][0]).toEqual(
-      color.red('Cannot upload component version, cmp-static-file-test 1.0.0 already exists'),
+      color.red('Cannot upload component version, smoke-test-components/cmp-static-file-test 1.0.0 already exists'),
     );
   });
 
   it('Should render component', async () => {
-    const response = await renderService.get('/r/set/cmp-static-file-test/1.0.0/?something=hello');
+    const componentSet: ComponentSetWebModel = {
+      webPath,
+      displayName: 'Set',
+      description: 'Set description',
+      headers: {},
+      environmentVariables: {},
+      components: {
+        'smoke-test-components/cmp-static-file-test': [{ environmentVariables: {}, version: '1.0.0' }],
+      },
+      componentVersionRules: {},
+    };
+
+    await addComponentSet(componentSet);
+
+    const response = await renderService.get(
+      '/r/set/smoke-test-components/cmp-static-file-test/1.0.0/?something=hello',
+    );
     expect(response.status).toEqual(200);
     expect(response.data).toEqual(
       [
         '<div>Input: hello</div>',
-        '<div>cmp-static-file-test 1.0.0 ',
-        `${configObj.renderServiceUrl}/s/cmp-static-file-test/1.0.0/birthday-cake.png</div>`,
+        '<div>smoke-test-components/cmp-static-file-test 1.0.0 ',
+        `${configObj.renderServiceUrl}/s/smoke-test-components/cmp-static-file-test/1.0.0/birthday-cake.png</div>`,
       ].join(''),
     );
   });

package/src/upload-component-folder.ts

@@ -1,6 +1,7 @@
 import { ScanStatus, uploadFile } from '@squiz/virus-scanner-lib';
-import { loadManifest, zipDirectory } from '@squiz/component-lib';
-import { V1 } from '@squiz/component-lib';
+
+import { zipDirectory } from '@squiz/dx-common-lib';
+import { Manifest, ManifestServiceForDev } from '@squiz/component-lib';
 import fsp from 'fs/promises';
 import path from 'path';
 import axios, { AxiosResponse, AxiosError, AxiosInstance } from 'axios';
@@ -13,8 +14,9 @@ export async function uploadComponentFolder(
   folderPath: string,
   componentServiceManagementUrl: string,
   componentRenderServiceUrl: string,
+  baseTempDir: string = '',
 ): Promise<void> {
-  const tmpDir = path.resolve(await fsp.mkdtemp('cmp-upload'));
+  const tmpDir = await fsp.mkdtemp(path.resolve(baseTempDir, 'cmp-upload'));
 
   try {
     const axiosInstance = axios.create({
@@ -58,19 +60,26 @@ export async function uploadComponentFolder(
 }
 
 async function preUploadChecks(folderPath: string, renderService: string) {
-  const result = await loadManifest(path.join(folderPath, `manifest.json`));
+  const service = new ManifestServiceForDev(folderPath, logger);
+  const manifestPath = path.join(folderPath, `manifest.json`);
+
+  const result = await service.readManifest(manifestPath);
+  await service.assertManifestIsValid(manifestPath, result.getModel());
+
   if (await checkIfVersionExists(result, renderService)) {
-    throw new Error(`Cannot upload component version, ${result.name} ${result.version} already exists`);
+    throw new Error(`Cannot upload component version, ${result.getName()} ${result.getVersion()} already exists`);
   }
 }
 
-async function checkIfVersionExists(inputManifest: V1, renderService: string) {
+async function checkIfVersionExists(inputManifest: Manifest, renderService: string) {
   const axiosInstance = axios.create({
     baseURL: renderService,
   });
 
   try {
-    const response = await axiosInstance.get(`d/${inputManifest.name}/${inputManifest.version}/manifest.json`);
+    const response = await axiosInstance.get(
+      `d/${inputManifest.getName()}/${inputManifest.getVersion()}/manifest.json`,
+    );
     if (response.status === 200) {
       return true;
     }