@stencil/core 2.15.1 → 2.15.2

package/cli/index.cjs

@@ -1,5 +1,5 @@
 /*!
- Stencil CLI (CommonJS) v2.15.1 | MIT Licensed | https://stenciljs.com
+ Stencil CLI (CommonJS) v2.15.2 | MIT Licensed | https://stenciljs.com
  */
 'use strict';
 
@@ -530,7 +530,7 @@ const getNpmConfigEnvArgs = (sys) => {
 const dependencies = [
 	{
 		name: "@stencil/core",
-		version: "2.15.1",
+		version: "2.15.2",
 		main: "compiler/stencil.js",
 		resources: [
 			"package.json",
@@ -1307,7 +1307,14 @@ const IS_NODE_ENV = typeof global !== 'undefined' &&
     (!global.origin || typeof global.origin !== 'string');
 
 /**
- * Task to generate component boilerplate.
+ * Task to generate component boilerplate and write it to disk. This task can
+ * cause the program to exit with an error under various circumstances, such as
+ * being called in an inappropriate place, being asked to overwrite files that
+ * already exist, etc.
+ *
+ * @param coreCompiler the CoreCompiler we're using currently, here we're
+ * mainly accessing the `path` module
+ * @param config the user-supplied config, which we need here to access `.sys`.
  */
 const taskGenerate = async (coreCompiler, config) => {
     if (!IS_NODE_ENV) {
@@ -1337,10 +1344,16 @@ const taskGenerate = async (coreCompiler, config) => {
     const testFolder = extensionsToGenerate.some(isTest) ? 'test' : '';
     const outDir = path.join(absoluteSrcDir, 'components', dir, componentName);
     await config.sys.createDir(path.join(outDir, testFolder), { recursive: true });
-    const writtenFiles = await Promise.all(extensionsToGenerate.map((extension) => writeFileByExtension(coreCompiler, config, outDir, componentName, extension, extensionsToGenerate.includes('css')))).catch((error) => config.logger.error(error));
+    const filesToGenerate = extensionsToGenerate.map((extension) => ({
+        extension,
+        path: getFilepathForFile(coreCompiler, outDir, componentName, extension),
+    }));
+    await checkForOverwrite(filesToGenerate, config);
+    const writtenFiles = await Promise.all(filesToGenerate.map((file) => getBoilerplateAndWriteFile(config, componentName, extensionsToGenerate.includes('css'), file))).catch((error) => config.logger.error(error));
     if (!writtenFiles) {
         return config.sys.exit(1);
     }
+    // TODO(STENCIL-424): Investigate moving these console.log calls to config.logger.info
     console.log();
     console.log(`${config.logger.gray('$')} stencil generate ${input}`);
     console.log();
@@ -1350,6 +1363,9 @@ const taskGenerate = async (coreCompiler, config) => {
 };
 /**
  * Show a checkbox prompt to select the files to be generated.
+ *
+ * @returns a read-only array of `GenerableExtension`, the extensions that the user has decided
+ * to generate
  */
 const chooseFilesToGenerate = async () => {
     const { prompt } = await Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('../sys/node/prompts.js')); });
@@ -1365,22 +1381,76 @@ const chooseFilesToGenerate = async () => {
     })).filesToGenerate;
 };
 /**
- * Get a file's boilerplate by its extension and write it to disk.
+ * Get a filepath for a file we want to generate!
+ *
+ * The filepath for a given file depends on the path, the user-supplied
+ * component name, the extension, and whether we're inside of a test directory.
+ *
+ * @param coreCompiler  the compiler we're using, here to acces the `.path` module
+ * @param path          path to where we're going to generate the component
+ * @param componentName the user-supplied name for the generated component
+ * @param extension     the file extension
+ * @returns the full filepath to the component (with a possible `test` directory
+ * added)
+ */
+const getFilepathForFile = (coreCompiler, path, componentName, extension) => isTest(extension)
+    ? coreCompiler.path.join(path, 'test', `${componentName}.${extension}`)
+    : coreCompiler.path.join(path, `${componentName}.${extension}`);
+/**
+ * Get the boilerplate for a file and write it to disk
+ *
+ * @param config        the current config, needed for file operations
+ * @param componentName the component name (user-supplied)
+ * @param withCss       are we generating CSS?
+ * @param file          the file we want to write
+ * @returns a `Promise<string>` which holds the full filepath we've written to,
+ * used to print out a little summary of our activity to the user.
+ */
+const getBoilerplateAndWriteFile = async (config, componentName, withCss, file) => {
+    const boilerplate = getBoilerplateByExtension(componentName, file.extension, withCss);
+    await config.sys.writeFile(file.path, boilerplate);
+    return file.path;
+};
+/**
+ * Check to see if any of the files we plan to write already exist and would
+ * therefore be overwritten if we proceed, because we'd like to not overwrite
+ * people's code!
+ *
+ * This function will check all the filepaths and if it finds any files log an
+ * error and exit with an error code. If it doesn't find anything it will just
+ * peacefully return `Promise<void>`.
+ *
+ * @param files  the files we want to check
+ * @param config the Config object, used here to get access to `sys.readFile`
  */
-const writeFileByExtension = async (coreCompiler, config, path, name, extension, withCss) => {
-    if (isTest(extension)) {
-        path = coreCompiler.path.join(path, 'test');
-    }
-    const outFile = coreCompiler.path.join(path, `${name}.${extension}`);
-    const boilerplate = getBoilerplateByExtension(name, extension, withCss);
-    await config.sys.writeFile(outFile, boilerplate);
-    return outFile;
+const checkForOverwrite = async (files, config) => {
+    const alreadyPresent = [];
+    await Promise.all(files.map(async ({ path }) => {
+        if ((await config.sys.readFile(path)) !== undefined) {
+            alreadyPresent.push(path);
+        }
+    }));
+    if (alreadyPresent.length > 0) {
+        config.logger.error('Generating code would overwrite the following files:', ...alreadyPresent.map((path) => '\t' + path));
+        await config.sys.exit(1);
+    }
 };
+/**
+ * Check if an extension is for a test
+ *
+ * @param extension the extension we want to check
+ * @returns a boolean indicating whether or not its a test
+ */
 const isTest = (extension) => {
     return extension === 'e2e.ts' || extension === 'spec.tsx';
 };
 /**
  * Get the boilerplate for a file by its extension.
+ *
+ * @param tagName the name of the component we're generating
+ * @param extension the file extension we want boilerplate for (.css, tsx, etc)
+ * @param withCss a boolean indicating whether we're generating a CSS file
+ * @returns a string container the file boilerplate for the supplied extension
  */
 const getBoilerplateByExtension = (tagName, extension, withCss) => {
     switch (extension) {

package/cli/index.js

@@ -1,5 +1,5 @@
 /*!
- Stencil CLI v2.15.1 | MIT Licensed | https://stenciljs.com
+ Stencil CLI v2.15.2 | MIT Licensed | https://stenciljs.com
  */
 const toLowerCase = (str) => str.toLowerCase();
 const dashToPascalCase = (str) => toLowerCase(str)
@@ -506,7 +506,7 @@ const getNpmConfigEnvArgs = (sys) => {
 const dependencies = [
 	{
 		name: "@stencil/core",
-		version: "2.15.1",
+		version: "2.15.2",
 		main: "compiler/stencil.js",
 		resources: [
 			"package.json",
@@ -1283,7 +1283,14 @@ const IS_NODE_ENV = typeof global !== 'undefined' &&
     (!global.origin || typeof global.origin !== 'string');
 
 /**
- * Task to generate component boilerplate.
+ * Task to generate component boilerplate and write it to disk. This task can
+ * cause the program to exit with an error under various circumstances, such as
+ * being called in an inappropriate place, being asked to overwrite files that
+ * already exist, etc.
+ *
+ * @param coreCompiler the CoreCompiler we're using currently, here we're
+ * mainly accessing the `path` module
+ * @param config the user-supplied config, which we need here to access `.sys`.
  */
 const taskGenerate = async (coreCompiler, config) => {
     if (!IS_NODE_ENV) {
@@ -1313,10 +1320,16 @@ const taskGenerate = async (coreCompiler, config) => {
     const testFolder = extensionsToGenerate.some(isTest) ? 'test' : '';
     const outDir = path.join(absoluteSrcDir, 'components', dir, componentName);
     await config.sys.createDir(path.join(outDir, testFolder), { recursive: true });
-    const writtenFiles = await Promise.all(extensionsToGenerate.map((extension) => writeFileByExtension(coreCompiler, config, outDir, componentName, extension, extensionsToGenerate.includes('css')))).catch((error) => config.logger.error(error));
+    const filesToGenerate = extensionsToGenerate.map((extension) => ({
+        extension,
+        path: getFilepathForFile(coreCompiler, outDir, componentName, extension),
+    }));
+    await checkForOverwrite(filesToGenerate, config);
+    const writtenFiles = await Promise.all(filesToGenerate.map((file) => getBoilerplateAndWriteFile(config, componentName, extensionsToGenerate.includes('css'), file))).catch((error) => config.logger.error(error));
     if (!writtenFiles) {
         return config.sys.exit(1);
     }
+    // TODO(STENCIL-424): Investigate moving these console.log calls to config.logger.info
     console.log();
     console.log(`${config.logger.gray('$')} stencil generate ${input}`);
     console.log();
@@ -1326,6 +1339,9 @@ const taskGenerate = async (coreCompiler, config) => {
 };
 /**
  * Show a checkbox prompt to select the files to be generated.
+ *
+ * @returns a read-only array of `GenerableExtension`, the extensions that the user has decided
+ * to generate
  */
 const chooseFilesToGenerate = async () => {
     const { prompt } = await import('../sys/node/prompts.js');
@@ -1341,22 +1357,76 @@ const chooseFilesToGenerate = async () => {
     })).filesToGenerate;
 };
 /**
- * Get a file's boilerplate by its extension and write it to disk.
+ * Get a filepath for a file we want to generate!
+ *
+ * The filepath for a given file depends on the path, the user-supplied
+ * component name, the extension, and whether we're inside of a test directory.
+ *
+ * @param coreCompiler  the compiler we're using, here to acces the `.path` module
+ * @param path          path to where we're going to generate the component
+ * @param componentName the user-supplied name for the generated component
+ * @param extension     the file extension
+ * @returns the full filepath to the component (with a possible `test` directory
+ * added)
+ */
+const getFilepathForFile = (coreCompiler, path, componentName, extension) => isTest(extension)
+    ? coreCompiler.path.join(path, 'test', `${componentName}.${extension}`)
+    : coreCompiler.path.join(path, `${componentName}.${extension}`);
+/**
+ * Get the boilerplate for a file and write it to disk
+ *
+ * @param config        the current config, needed for file operations
+ * @param componentName the component name (user-supplied)
+ * @param withCss       are we generating CSS?
+ * @param file          the file we want to write
+ * @returns a `Promise<string>` which holds the full filepath we've written to,
+ * used to print out a little summary of our activity to the user.
+ */
+const getBoilerplateAndWriteFile = async (config, componentName, withCss, file) => {
+    const boilerplate = getBoilerplateByExtension(componentName, file.extension, withCss);
+    await config.sys.writeFile(file.path, boilerplate);
+    return file.path;
+};
+/**
+ * Check to see if any of the files we plan to write already exist and would
+ * therefore be overwritten if we proceed, because we'd like to not overwrite
+ * people's code!
+ *
+ * This function will check all the filepaths and if it finds any files log an
+ * error and exit with an error code. If it doesn't find anything it will just
+ * peacefully return `Promise<void>`.
+ *
+ * @param files  the files we want to check
+ * @param config the Config object, used here to get access to `sys.readFile`
  */
-const writeFileByExtension = async (coreCompiler, config, path, name, extension, withCss) => {
-    if (isTest(extension)) {
-        path = coreCompiler.path.join(path, 'test');
-    }
-    const outFile = coreCompiler.path.join(path, `${name}.${extension}`);
-    const boilerplate = getBoilerplateByExtension(name, extension, withCss);
-    await config.sys.writeFile(outFile, boilerplate);
-    return outFile;
+const checkForOverwrite = async (files, config) => {
+    const alreadyPresent = [];
+    await Promise.all(files.map(async ({ path }) => {
+        if ((await config.sys.readFile(path)) !== undefined) {
+            alreadyPresent.push(path);
+        }
+    }));
+    if (alreadyPresent.length > 0) {
+        config.logger.error('Generating code would overwrite the following files:', ...alreadyPresent.map((path) => '\t' + path));
+        await config.sys.exit(1);
+    }
 };
+/**
+ * Check if an extension is for a test
+ *
+ * @param extension the extension we want to check
+ * @returns a boolean indicating whether or not its a test
+ */
 const isTest = (extension) => {
     return extension === 'e2e.ts' || extension === 'spec.tsx';
 };
 /**
  * Get the boilerplate for a file by its extension.
+ *
+ * @param tagName the name of the component we're generating
+ * @param extension the file extension we want boilerplate for (.css, tsx, etc)
+ * @param withCss a boolean indicating whether we're generating a CSS file
+ * @returns a string container the file boilerplate for the supplied extension
  */
 const getBoilerplateByExtension = (tagName, extension, withCss) => {
     switch (extension) {

package/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/cli",
-  "version": "2.15.1",
+  "version": "2.15.2",
   "description": "Stencil CLI.",
   "main": "./index.cjs",
   "module": "./index.js",

package/compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/compiler",
-  "version": "2.15.1",
+  "version": "2.15.2",
   "description": "Stencil Compiler.",
   "main": "./stencil.js",
   "types": "./stencil.d.ts",