Remove support for tagged template literals (#524)

Richienb · web-flow · commit c987c614869b · 2021-11-10T16:12:33.000+07:00
diff --git a/readme.md b/readme.md
@@ -127,13 +127,6 @@ RAM: ${chalk.green('40%')}
 DISK: ${chalk.yellow('70%')}
 `);
 
-// ES2015 tagged template literal
-log(chalk`
-CPU: {red ${cpu.totalPercent}%}
-RAM: {green ${ram.used / ram.total * 100}%}
-DISK: {rgb(255,131,0) ${disk.used / disk.total * 100}%}
-`);
-
 // Use RGB colors in terminal emulators that support it.
 log(chalk.rgb(123, 45, 67).underline('Underlined reddish color'));
 log(chalk.hex('#DEADED').bold('Bold gray!'));
@@ -257,38 +250,6 @@ Explicit 256/Truecolor mode can be enabled using the `--color=256` and `--color=
 - `bgCyanBright`
 - `bgWhiteBright`
 
-## Tagged template literal
-
-Chalk can be used as a [tagged template literal](https://exploringjs.com/es6/ch_template-literals.html#_tagged-template-literals).
-
-```js
-import chalk from 'chalk';
-
-const miles = 18;
-const calculateFeet = miles => miles * 5280;
-
-console.log(chalk`
-	There are {bold 5280 feet} in a mile.
-	In {bold ${miles} miles}, there are {green.bold ${calculateFeet(miles)} feet}.
-`);
-```
-
-Blocks are delimited by an opening curly brace (`{`), a style, some content, and a closing curly brace (`}`).
-
-Template styles are chained exactly like normal Chalk styles. The following three statements are equivalent:
-
-```js
-import chalk from 'chalk';
-
-console.log(chalk.bold.rgb(10, 100, 200)('Hello!'));
-console.log(chalk.bold.rgb(10, 100, 200)`Hello!`);
-console.log(chalk`{bold.rgb(10,100,200) Hello!}`);
-```
-
-Note that function styles (`rgb()`, `hex()`, etc.) may not contain spaces between parameters.
-
-All interpolated values (`` chalk`${foo}` ``) are converted to strings via the `.toString()` method. All curly braces (`{` and `}`) in interpolated value strings are escaped.
-
 ## 256 and Truecolor color support
 
 Chalk supports 256 colors and [Truecolor](https://gist.github.com/XVilka/8346728) (16 million colors) on supported terminal apps.
@@ -331,6 +292,7 @@ The maintainers of chalk and thousands of other packages are working with Tideli
 
 ## Related
 
+- [chalk-template](https://github.com/chalk/chalk-template) - [Tagged template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) support for this module
 - [chalk-cli](https://github.com/chalk/chalk-cli) - CLI for this module
 - [ansi-styles](https://github.com/chalk/ansi-styles) - ANSI escape codes for styling strings in the terminal
 - [supports-color](https://github.com/chalk/supports-color) - Detect whether a terminal supports color
diff --git a/source/index.d.ts b/source/index.d.ts
@@ -121,36 +121,9 @@ export interface ColorSupport {
 	has16m: boolean;
 }
 
-interface ChalkFunction {
-	/**
-	Use a template string.
-
-	@remarks Template literals are unsupported for nested calls (see [issue #341](https://github.com/chalk/chalk/issues/341))
-
-	@example
-	```
-	import chalk from 'chalk';
-
-	log(chalk`
-	CPU: {red ${cpu.totalPercent}%}
-	RAM: {green ${ram.used / ram.total * 100}%}
-	DISK: {rgb(255,131,0) ${disk.used / disk.total * 100}%}
-	`);
-	```
-
-	@example
-	```
-	import chalk from 'chalk';
-
-	log(chalk.red.bgBlack`2 + 3 = {bold ${2 + 3}}`)
-	```
-	*/
-	(text: TemplateStringsArray, ...placeholders: unknown[]): string;
-
+export interface ChalkInstance {
 	(...text: unknown[]): string;
-}
 
-export interface ChalkInstance extends ChalkFunction {
 	/**
 	The color support for Chalk.
 
@@ -358,7 +331,7 @@ Order doesn't matter, and later styles take precedent in case of a conflict.
 
 This simply means that `chalk.red.yellow.green` is equivalent to `chalk.green`.
 */
-declare const chalk: ChalkInstance & ChalkFunction;
+declare const chalk: ChalkInstance;
 
 export const supportsColor: ColorSupport | false;
 
diff --git a/source/index.js b/source/index.js
@@ -4,10 +4,8 @@ import {
 	stringReplaceAll,
 	stringEncaseCRLFWithFirstIndex,
 } from './util.js';
-import template from './templates.js';
 
 const {stdout: stdoutColor, stderr: stderrColor} = supportsColor;
-const {isArray} = Array;
 
 const GENERATOR = Symbol('GENERATOR');
 const STYLER = Symbol('STYLER');
@@ -41,17 +39,12 @@ export class Chalk {
 }
 
 const chalkFactory = options => {
-	const chalk = {};
+	const chalk = (...strings) => strings.join(' ');
 	applyOptions(chalk, options);
 
-	chalk.template = (...arguments_) => chalkTag(chalk.template, ...arguments_);
-
 	Object.setPrototypeOf(chalk, createChalk.prototype);
-	Object.setPrototypeOf(chalk.template, chalk);
-
-	chalk.template.Chalk = Chalk;
 
-	return chalk.template;
+	return chalk;
 };
 
 function createChalk(options) {
@@ -157,16 +150,9 @@ const createStyler = (open, close, parent) => {
 };
 
 const createBuilder = (self, _styler, _isEmpty) => {
-	const builder = (...arguments_) => {
-		if (isArray(arguments_[0]) && isArray(arguments_[0].raw)) {
-			// Called as a template literal, for example: chalk.red`2 + 3 = {bold ${2+3}}`
-			return applyStyle(builder, chalkTag(builder, ...arguments_));
-		}
-
-		// Single argument is hot path, implicit coercion is faster than anything
-		// eslint-disable-next-line no-implicit-coercion
-		return applyStyle(builder, (arguments_.length === 1) ? ('' + arguments_[0]) : arguments_.join(' '));
-	};
+	// Single argument is hot path, implicit coercion is faster than anything
+	// eslint-disable-next-line no-implicit-coercion
+	const builder = (...arguments_) => applyStyle(builder, (arguments_.length === 1) ? ('' + arguments_[0]) : arguments_.join(' '));
 
 	// We alter the prototype because we must return a function, but there is
 	// no way to create a function with a different prototype
@@ -213,28 +199,6 @@ const applyStyle = (self, string) => {
 	return openAll + string + closeAll;
 };
 
-const chalkTag = (chalk, ...strings) => {
-	const [firstString] = strings;
-
-	if (!isArray(firstString) || !isArray(firstString.raw)) {
-		// If chalk() was called by itself or with a string,
-		// return the string itself as a string.
-		return strings.join(' ');
-	}
-
-	const arguments_ = strings.slice(1);
-	const parts = [firstString.raw[0]];
-
-	for (let i = 1; i < firstString.length; i++) {
-		parts.push(
-			String(arguments_[i - 1]).replace(/[{}\\]/g, '\\$&'),
-			String(firstString.raw[i]),
-		);
-	}
-
-	return template(chalk, parts.join(''));
-};
-
 Object.defineProperties(createChalk.prototype, styles);
 
 const chalk = createChalk();
diff --git a/source/index.test-d.ts b/source/index.test-d.ts
@@ -34,12 +34,6 @@ expectType<ChalkInstance>(new Chalk({level: 1}));
 // -- Properties --
 expectType<ColorSupportLevel>(chalk.level);
 
-// -- Template literal --
-expectType<string>(chalk``);
-const name = 'John';
-expectType<string>(chalk`Hello {bold.red ${name}}`);
-expectType<string>(chalk`Works with numbers {bold.red ${1}}`);
-
 // -- Color methods --
 expectAssignable<colorReturn>(chalk.rgb(0, 0, 0));
 expectAssignable<colorReturn>(chalk.hex('#DEADED'));
diff --git a/source/templates.js b/source/templates.js
diff --git a/test/template-literal.js b/test/template-literal.js
