npm - @squiz/component-cli-lib - Versions diffs - 1.12.0-alpha.21 → 1.12.0-alpha.23 - Mend

@squiz/component-cli-lib 1.12.0-alpha.21 → 1.12.0-alpha.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/.npm/_logs/{2023-02-10T03_34_35_584Z-debug-0.log → 2023-02-10T05_40_20_510Z-debug-0.log} +11 -11
package/build.js +4 -0
package/lib/component-init.d.ts +12 -0
package/lib/component-init.spec.d.ts +1 -0
package/lib/index.d.ts +1 -0
package/lib/index.js +85 -84
package/lib/index.js.map +4 -4
package/lib/templates/advanced/build.js +43 -0
package/lib/templates/advanced/main.js +3 -0
package/lib/templates/advanced/manifest.json +53 -0
package/lib/templates/advanced/package.json +11 -0
package/lib/templates/advanced/previews/example.data.json +1 -0
package/lib/templates/advanced/previews/preview.html +9 -0
package/lib/templates/advanced/static/default.js +1 -0
package/lib/templates/advanced/static/default.scss +1 -0
package/lib/templates/basic/main.js +3 -0
package/lib/templates/basic/manifest.json +53 -0
package/lib/templates/basic/previews/example.data.json +1 -0
package/lib/templates/basic/previews/preview.html +9 -0
package/lib/templates/basic/static/default.css +1 -0
package/lib/templates/basic/static/default.js +1 -0
package/package.json +9 -9
package/src/component-init.spec.ts +203 -0
package/src/component-init.ts +48 -0
package/src/index.ts +1 -0
package/templates/advanced/build.js +43 -0
package/templates/advanced/main.js +3 -0
package/templates/advanced/manifest.json +53 -0
package/templates/advanced/package.json +11 -0
package/templates/advanced/previews/example.data.json +1 -0
package/templates/advanced/previews/preview.html +9 -0
package/templates/advanced/static/default.js +1 -0
package/templates/advanced/static/default.scss +1 -0
package/templates/basic/main.js +3 -0
package/templates/basic/manifest.json +53 -0
package/templates/basic/previews/example.data.json +1 -0
package/templates/basic/previews/preview.html +9 -0
package/templates/basic/static/default.css +1 -0
package/templates/basic/static/default.js +1 -0
package/tsconfig.tsbuildinfo +1 -1

package/lib/templates/advanced/build.js ADDED Viewed

@@ -0,0 +1,43 @@
+// Build process
+const esbuild = require('esbuild');
+const { sassPlugin } = require('esbuild-sass-plugin');
+const postcss = require('postcss');
+const autoprefixer = require('autoprefixer');
+const esbuildOptions = {
+  outdir: 'dist',
+  bundle: true,
+  minify: false,
+  treeShaking: true,
+};
+// Server build
+esbuild
+  .build({
+    ...esbuildOptions,
+    platform: 'node',
+    entryPoints: ['./main.js'],
+    format: 'cjs',
+    target: 'node16',
+  })
+  .catch(() => process.exit(1));
+// Client Build
+esbuild
+  .build({
+    ...esbuildOptions,
+    platform: 'browser',
+    entryPoints: ['./static/default.js', './static/default.scss'],
+    format: 'esm',
+    target: 'es2020',
+    plugins: [
+      sassPlugin({
+        async transform(source) {
+          const { css } = await postcss([autoprefixer]).process(source);
+          return css;
+        },
+      }),
+    ],
+  })
+  .then(() => console.log('⚡ Styles & Scripts Compiled! ⚡ '))
+  .catch(() => process.exit(1));

package/lib/templates/advanced/main.js ADDED Viewed

@@ -0,0 +1,3 @@
+export default async function (input, info) {
+  return `<div>hello world</div>`;
+}

package/lib/templates/advanced/manifest.json ADDED Viewed

@@ -0,0 +1,53 @@
+{
+  "$schema": "http://localhost:3000/schemas/v1.json",
+  "name": "default",
+  "namespace": "default-namespace",
+  "displayName": "Default Component",
+  "description": "Default example component",
+  "version": "0.0.1",
+  "mainFunction": "main",
+  "functions": [
+    {
+      "name": "main",
+      "entry": "main.js",
+      "input": {},
+      "output": {
+        "responseType": "html",
+        "staticFiles": [
+          {
+            "location": "header",
+            "file": {
+              "type": "css",
+              "filepath": "default.css"
+            }
+          },
+          {
+            "location": "footer",
+            "file": {
+              "type": "js",
+              "filepath": "default.js"
+            }
+          }
+        ]
+      }
+    }
+  ],
+  "previews": {
+    "default": {
+      "functionData": {
+        "main": {
+          "inputData": {
+            "type": "file",
+            "path": "previews/example.data.json"
+          },
+          "wrapper": {
+            "path": "previews/preview.html"
+          }
+        }
+      }
+    }
+  },
+  "staticFiles": {
+    "locationRoot": "static"
+  }
+}

package/lib/templates/advanced/package.json ADDED Viewed

@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "build": "node build.js"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.13",
+    "esbuild": "^0.17.6",
+    "esbuild-sass-plugin": "^2.4.5",
+    "postcss": "^8.4.21"
+  }
+}

package/lib/templates/advanced/previews/example.data.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ {}

package/lib/templates/advanced/previews/preview.html ADDED Viewed

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    [component://static-header]
+  </head>
+  <body>
+    [component://output] [component://static-footer]
+  </body>
+</html>

package/lib/templates/advanced/static/default.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ // Client Side JS goes here

package/lib/templates/advanced/static/default.scss ADDED Viewed

	@@ -0,0 +1 @@
1	+ // Client Side CSS goes here

package/lib/templates/basic/main.js ADDED Viewed

@@ -0,0 +1,3 @@
+module.exports = async function (input, info) {
+  return `<div>hello world</div>`;
+};

package/lib/templates/basic/manifest.json ADDED Viewed

@@ -0,0 +1,53 @@
+{
+  "$schema": "http://localhost:3000/schemas/v1.json",
+  "name": "default",
+  "namespace": "default-namespace",
+  "displayName": "Default Component",
+  "description": "Default example component",
+  "version": "0.0.1",
+  "mainFunction": "main",
+  "functions": [
+    {
+      "name": "main",
+      "entry": "main.js",
+      "input": {},
+      "output": {
+        "responseType": "html",
+        "staticFiles": [
+          {
+            "location": "header",
+            "file": {
+              "type": "css",
+              "filepath": "default.css"
+            }
+          },
+          {
+            "location": "footer",
+            "file": {
+              "type": "js",
+              "filepath": "default.js"
+            }
+          }
+        ]
+      }
+    }
+  ],
+  "previews": {
+    "default": {
+      "functionData": {
+        "main": {
+          "inputData": {
+            "type": "file",
+            "path": "previews/example.data.json"
+          },
+          "wrapper": {
+            "path": "previews/preview.html"
+          }
+        }
+      }
+    }
+  },
+  "staticFiles": {
+    "locationRoot": "static"
+  }
+}

package/lib/templates/basic/previews/example.data.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ {}

package/lib/templates/basic/previews/preview.html ADDED Viewed

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    [component://static-header]
+  </head>
+  <body>
+    [component://output] [component://static-footer]
+  </body>
+</html>

package/lib/templates/basic/static/default.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ /* Client Side CSS goes here */

package/lib/templates/basic/static/default.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ // Client Side JS goes here

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/component-cli-lib",
-  "version": "1.12.0-alpha.21",
+  "version": "1.12.0-alpha.23",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -12,12 +12,12 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@squiz/component-lib": "1.12.0-alpha.21",
-    "@squiz/component-web-api-lib": "1.12.0-alpha.21",
-    "@squiz/dx-common-lib": "1.12.0-alpha.21",
-    "@squiz/dx-json-schema-lib": "1.12.0-alpha.21",
-    "@squiz/dx-logger-lib": "1.12.0-alpha.21",
-    "@squiz/virus-scanner-lib": "1.12.0-alpha.21",
+    "@squiz/component-lib": "1.12.0-alpha.23",
+    "@squiz/component-web-api-lib": "1.12.0-alpha.23",
+    "@squiz/dx-common-lib": "1.12.0-alpha.23",
+    "@squiz/dx-json-schema-lib": "1.12.0-alpha.23",
+    "@squiz/dx-logger-lib": "1.12.0-alpha.23",
+    "@squiz/virus-scanner-lib": "1.12.0-alpha.23",
     "@types/cli-color": "2.0.2",
     "@types/express": "4.17.17",
     "@types/jest": "28.1.8",
@@ -31,12 +31,12 @@
     "typescript": "4.9.4"
   },
   "dependencies": {
-    "@squiz/render-runtime-lib": "1.12.0-alpha.21",
+    "@squiz/render-runtime-lib": "1.12.0-alpha.23",
     "archiver": "5.3.1",
     "axios": "1.3.2",
     "cli-color": "^2.0.2",
     "open": "^8.4.0",
     "supertest": "^6.2.3"
   },
-  "gitHead": "52e0baca629d181674d9dcd5a83087c1f1f0b324"
+  "gitHead": "f309b3e8035b08e5c312212c2bf5305e98e480bc"
 }

package/src/component-init.spec.ts ADDED Viewed

@@ -0,0 +1,203 @@
+import componentInit from './component-init';
+import fs from 'fs-extra';
+import * as logger from '@squiz/dx-logger-lib';
+import path from 'path';
+jest.mock('fs-extra');
+jest.mock('path', () => {
+  return {
+    ...jest.requireActual('path'),
+  };
+});
+beforeEach(() => {
+  jest.resetAllMocks();
+  // Reset our process.env.NODE_ENV variable
+  process.env.NODE_ENV = 'test';
+});
+describe('componentInit', () => {
+  it('should setup a new logger instance with the correct options', async () => {
+    const loggerSpy = jest.spyOn(logger, 'getLogger');
+    // Mock the process.env.NODE_ENV variable to be "development"
+    process.env.NODE_ENV = 'development';
+    await componentInit({
+      componentType: 'basic',
+      destination: '',
+    });
+    expect(loggerSpy).toHaveBeenCalledWith({
+      name: 'component-dev',
+      format: 'human',
+      silent: false,
+    });
+  });
+  it('path.resolve should be called with __dirname to get the current script directory', async () => {
+    const pathResolveSpy = jest.spyOn(path, 'resolve');
+    await componentInit({
+      componentType: 'basic',
+      destination: '',
+    });
+    expect(pathResolveSpy).toHaveBeenCalledWith(__dirname);
+  });
+  it('path.join should be called with the current script directory and the component type to get the source folder', async () => {
+    const pathJoinSpy = jest.spyOn(path, 'join');
+    jest
+      .spyOn(path, 'resolve')
+      .mockReturnValue('/Users/username/Projects/squiz/component-cli-lib/packages/component-cli-lib/src');
+    await componentInit({
+      componentType: 'basic',
+      destination: '',
+    });
+    expect(pathJoinSpy).toHaveBeenCalledWith(
+      '/Users/username/Projects/squiz/component-cli-lib/packages/component-cli-lib/src',
+      'templates',
+      'basic',
+    );
+  });
+  it('path.resolve should be called with the destination folder to get the destination folder', async () => {
+    const pathResolveSpy = jest.spyOn(path, 'resolve');
+    jest.spyOn(path, 'resolve').mockReturnValue('/Users/username/Projects/squiz/new-component');
+    await componentInit({
+      componentType: 'basic',
+      destination: '/Users/username/Projects/squiz/new-component',
+    });
+    expect(pathResolveSpy).toHaveBeenCalledWith('/Users/username/Projects/squiz/new-component');
+  });
+  it('should fail if the destination folder already exists and there are files in it', async () => {
+    // Mock the current script directory
+    jest.spyOn(path, 'resolve').mockImplementationOnce(() => {
+      return '/Users/username/Projects/squiz/component-cli-lib/packages/component-cli-lib/src';
+    });
+    // Mock the destination folder
+    jest.spyOn(path, 'resolve').mockImplementationOnce(() => {
+      return '/Users/username/Projects/squiz/new-component';
+    });
+    // Mock the fs.pathExists function to return true
+    jest.spyOn(fs, 'pathExists').mockImplementationOnce(() => {
+      return Promise.resolve(true);
+    });
+    // Mock the fs.readdirSync function to return an array of files
+    jest.spyOn(fs, 'readdir').mockImplementationOnce(() => {
+      return Promise.resolve(['file1.txt', 'file2.txt']);
+    });
+    await expect(
+      componentInit({
+        componentType: 'basic',
+        destination: '/Users/username/Projects/squiz/new-component',
+      }),
+    ).rejects.toThrowError('The destination folder already exists and is not empty.');
+  });
+  it('should create the destination folder if it does not exist', async () => {
+    // Mock the current script directory
+    jest.spyOn(path, 'resolve').mockImplementationOnce(() => {
+      return '/Users/username/Projects/squiz/component-cli-lib/packages/component-cli-lib/src';
+    });
+    // Mock the destination folder
+    jest.spyOn(path, 'resolve').mockImplementationOnce(() => {
+      return '/Users/username/Projects/squiz/new-component';
+    });
+    // Mock the fs.pathExists function to return false
+    jest.spyOn(fs, 'pathExists').mockImplementationOnce(() => {
+      return Promise.resolve(false);
+    });
+    await componentInit({
+      componentType: 'basic',
+      destination: '/Users/username/Projects/squiz/new-component',
+    });
+    expect(fs.mkdirp).toHaveBeenCalledWith('/Users/username/Projects/squiz/new-component');
+  });
+  it('should not fail if the destination folder already exists and there are no files in it', async () => {
+    // Mock the current script directory
+    jest.spyOn(path, 'resolve').mockImplementationOnce(() => {
+      return '/Users/username/Projects/squiz/component-cli-lib/packages/component-cli-lib/src';
+    });
+    // Mock the destination folder
+    jest.spyOn(path, 'resolve').mockImplementationOnce(() => {
+      return '/Users/username/Projects/squiz/new-component';
+    });
+    // Mock the fs.pathExists function to return true
+    jest.spyOn(fs, 'pathExists').mockImplementationOnce(() => {
+      return Promise.resolve(true);
+    });
+    // Mock the fs.readdir function to return an empty array
+    jest.spyOn(fs, 'readdir').mockImplementationOnce(() => {
+      return Promise.resolve([]);
+    });
+    await expect(
+      componentInit({
+        componentType: 'basic',
+        destination: '/Users/username/Projects/squiz/new-component',
+      }),
+    ).resolves.toBeUndefined();
+  });
+  it('fs.copy should be called with the source folder and the destination folder', async () => {
+    // Mock the fs.copy function
+    const fsCopySpy = jest.spyOn(fs, 'copy');
+    // Mock the current script directory
+    jest.spyOn(path, 'resolve').mockImplementationOnce(() => {
+      return '/Users/username/Projects/squiz/component-cli-lib/packages/component-cli-lib/src';
+    });
+    // Mock the source folder
+    jest.spyOn(path, 'join').mockImplementationOnce(() => {
+      return '/Users/username/Projects/squiz/component-cli-lib/packages/component-cli-lib/templates/basic';
+    });
+    // Mock the destination folder
+    jest.spyOn(path, 'resolve').mockImplementationOnce(() => {
+      return '/Users/username/Projects/squiz/new-component';
+    });
+    // Mock the fs.pathExists function to return true
+    jest.spyOn(fs, 'pathExists').mockImplementationOnce(() => {
+      return Promise.resolve(true);
+    });
+    // Mock the fs.readdir function to return an empty array
+    jest.spyOn(fs, 'readdir').mockImplementationOnce(() => {
+      return Promise.resolve([]);
+    });
+    await componentInit({
+      componentType: 'basic',
+      destination: '/Users/username/Projects/squiz/new-component',
+    });
+    expect(fsCopySpy).toHaveBeenCalledWith(
+      '/Users/username/Projects/squiz/component-cli-lib/packages/component-cli-lib/templates/basic',
+      '/Users/username/Projects/squiz/new-component',
+    );
+  });
+});

package/src/component-init.ts ADDED Viewed

@@ -0,0 +1,48 @@
+import fs from 'fs-extra';
+import path from 'path';
+import { getLogger, LoggerOptions } from '@squiz/dx-logger-lib';
+/**
+ * componentInit initializes a new component
+ * @param {object} options - The options object
+ * @param {string} options.componentType - The type of component to initialize
+ * @returns {void}
+ */
+export default async function componentInit(options: {
+  componentType: 'basic' | 'advanced';
+  destination: string;
+  loggingFormat?: LoggerOptions['format'];
+}) {
+  const logger = getLogger({
+    name: 'component-dev',
+    format: options.loggingFormat || 'human',
+    silent: process.env.NODE_ENV === 'test',
+  });
+  logger.info('Initializing component...');
+  // Get our current script directory
+  const currentScriptDir = path.resolve(__dirname);
+  // Define the file source to move from
+  const sourceFolder = path.join(currentScriptDir, 'templates', options.componentType);
+  // Define the file destination to move to
+  const destination = path.resolve(options.destination);
+  // If the destination folder already exists, and it's not empty, throw an error
+  if (await fs.pathExists(destination)) {
+    const files = await fs.readdir(destination);
+    if (files.length > 0) {
+      throw new Error('The destination folder already exists and is not empty.');
+    }
+  } else {
+    // If the destination folder doesn't exist, create it
+    await fs.mkdirp(destination);
+  }
+  // Copy the contents of the source folder to the destination folder
+  await fs.copy(sourceFolder, destination);
+  logger.info('Component initialized!');
+}

package/src/index.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 export { uploadComponentFolder } from './upload-component-folder';
 export { startDevelopmentRender } from './component-dev';
+export { default as componentInit } from './component-init';

package/templates/advanced/build.js ADDED Viewed

@@ -0,0 +1,43 @@
+// Build process
+const esbuild = require('esbuild');
+const { sassPlugin } = require('esbuild-sass-plugin');
+const postcss = require('postcss');
+const autoprefixer = require('autoprefixer');
+const esbuildOptions = {
+  outdir: 'dist',
+  bundle: true,
+  minify: false,
+  treeShaking: true,
+};
+// Server build
+esbuild
+  .build({
+    ...esbuildOptions,
+    platform: 'node',
+    entryPoints: ['./main.js'],
+    format: 'cjs',
+    target: 'node16',
+  })
+  .catch(() => process.exit(1));
+// Client Build
+esbuild
+  .build({
+    ...esbuildOptions,
+    platform: 'browser',
+    entryPoints: ['./static/default.js', './static/default.scss'],
+    format: 'esm',
+    target: 'es2020',
+    plugins: [
+      sassPlugin({
+        async transform(source) {
+          const { css } = await postcss([autoprefixer]).process(source);
+          return css;
+        },
+      }),
+    ],
+  })
+  .then(() => console.log('⚡ Styles & Scripts Compiled! ⚡ '))
+  .catch(() => process.exit(1));

package/templates/advanced/main.js ADDED Viewed

@@ -0,0 +1,3 @@
+export default async function (input, info) {
+  return `<div>hello world</div>`;
+}

package/templates/advanced/manifest.json ADDED Viewed

@@ -0,0 +1,53 @@
+{
+  "$schema": "http://localhost:3000/schemas/v1.json",
+  "name": "default",
+  "namespace": "default-namespace",
+  "displayName": "Default Component",
+  "description": "Default example component",
+  "version": "0.0.1",
+  "mainFunction": "main",
+  "functions": [
+    {
+      "name": "main",
+      "entry": "main.js",
+      "input": {},
+      "output": {
+        "responseType": "html",
+        "staticFiles": [
+          {
+            "location": "header",
+            "file": {
+              "type": "css",
+              "filepath": "default.css"
+            }
+          },
+          {
+            "location": "footer",
+            "file": {
+              "type": "js",
+              "filepath": "default.js"
+            }
+          }
+        ]
+      }
+    }
+  ],
+  "previews": {
+    "default": {
+      "functionData": {
+        "main": {
+          "inputData": {
+            "type": "file",
+            "path": "previews/example.data.json"
+          },
+          "wrapper": {
+            "path": "previews/preview.html"
+          }
+        }
+      }
+    }
+  },
+  "staticFiles": {
+    "locationRoot": "static"
+  }
+}

package/templates/advanced/package.json ADDED Viewed

@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "build": "node build.js"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.13",
+    "esbuild": "^0.17.6",
+    "esbuild-sass-plugin": "^2.4.5",
+    "postcss": "^8.4.21"
+  }
+}

package/templates/advanced/previews/example.data.json ADDED Viewed

	@@ -0,0 +1 @@
1	+ {}

package/templates/advanced/previews/preview.html ADDED Viewed

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    [component://static-header]
+  </head>
+  <body>
+    [component://output] [component://static-footer]
+  </body>
+</html>

package/templates/advanced/static/default.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ // Client Side JS goes here

package/templates/advanced/static/default.scss ADDED Viewed

	@@ -0,0 +1 @@
1	+ // Client Side CSS goes here

package/templates/basic/main.js ADDED Viewed

@@ -0,0 +1,3 @@
+module.exports = async function (input, info) {
+  return `<div>hello world</div>`;
+};