Include extensions in preserveModules output filenames for scriptifie…

…d assets (#3116)

* Include extensions in preserveModules output filenames for scriptified assets

* Update documentation

docs/999-big-list-of-options.md

@@ -416,11 +416,15 @@ Default: `"[name].js"`
 The pattern to use for chunks created from entry points. Pattern supports the following placeholders:
 * `[format]`: The rendering format defined in the output options, e.g. `esm` or `cjs`.
 * `[hash]`: A hash based on the content of the entry point and the content of all its dependencies.
-* `[name]`: The file name (without extension) of the entry point.
+* `[name]`: The file name (without extension) of the entry point, unless the object form of input was used to define a different name.
 
 Forward slashes `/` can be used to place files in sub-directories. See also [`output.assetFileNames`](guide/en/#outputassetfilenames), [`output.chunkFileNames`](guide/en/#outputchunkfilenames).
 
-This pattern will also be used when using the [`preserveModules`](guide/en/#preservemodules) option. Note however that when preserving modules, hashes are not yet supported.
+This pattern will also be used when using the [`preserveModules`](guide/en/#preservemodules) option. Here there is a different set of placeholders available, though:
+* `[format]`: The rendering format defined in the output options.
+* `[name]`: The file name (without extension) of the file.
+* `[ext]`: The extension of the file.
+* `[extname]`: The extension of the file, prefixed by `.` if it is not empty.
 
 #### output.extend
 Type: `boolean`<br>

src/Chunk.ts

@@ -30,7 +30,7 @@ import { error } from './utils/error';
 import { sortByExecutionOrder } from './utils/executionOrder';
 import getIndentString from './utils/getIndentString';
 import { makeLegal } from './utils/identifierHelpers';
-import { basename, dirname, isAbsolute, normalize, resolve } from './utils/path';
+import { basename, dirname, extname, isAbsolute, normalize, resolve } from './utils/path';
 import relativeId, { getAliasName } from './utils/relativeId';
 import renderChunk from './utils/renderChunk';
 import { RenderOptions } from './utils/renderHelpers';
@@ -83,6 +83,8 @@ interface FacadeName {
 	name?: string;
 }
 
+const NON_ASSET_EXTENSIONS = ['.js', '.jsx', '.ts', '.tsx'];
+
 function getGlobalName(
 	module: ExternalModule,
 	globals: GlobalsOption,
@@ -280,14 +282,20 @@ export default class Chunk {
 		options: OutputOptions,
 		existingNames: Record<string, any>
 	): string {
-		const sanitizedId = sanitizeFileName(this.orderedModules[0].id);
+		const id = this.orderedModules[0].id;
+		const sanitizedId = sanitizeFileName(id);
 
 		let path: string;
-		if (isAbsolute(this.orderedModules[0].id)) {
+		if (isAbsolute(id)) {
+			const extension = extname(id);
+
 			const name = renderNamePattern(
-				options.entryFileNames || '[name].js',
+				options.entryFileNames ||
+					(NON_ASSET_EXTENSIONS.includes(extension) ? '[name].js' : '[name][extname].js'),
 				'output.entryFileNames',
 				{
+					ext: () => extension.substr(1),
+					extname: () => extension,
 					format: () => (options.format === 'es' ? 'esm' : (options.format as string)),
 					name: () => this.getChunkName()
 				}

test/chunking-form/samples/preserve-modules-filename-pattern/_config.js

@@ -3,7 +3,7 @@ module.exports = {
 	options: {
 		input: 'src/main.ts',
 		output: {
-			entryFileNames: 'entry-[name]-[format].js'
+			entryFileNames: 'entry-[name]-[format]-[ext][extname].js'
 		},
 		preserveModules: true
 	}

test/chunking-form/samples/preserve-modules-filename-pattern/_expected/amd/entry-main-amd-ts.ts.js

@@ -0,0 +1,12 @@
+define(['exports', './entry-foo-amd-ts.ts', './nested/entry-bar-amd-ts.ts', './nested/entry-baz-amd-ts.ts', './entry-no-ext-amd-'], function (exports, foo, bar, baz, noExt) { 'use strict';
+
+
+
+	exports.foo = foo.default;
+	exports.bar = bar.default;
+	exports.baz = baz.default;
+	exports.noExt = noExt.default;
+
+	Object.defineProperty(exports, '__esModule', { value: true });
+
+});

test/chunking-form/samples/preserve-modules-filename-pattern/_expected/amd/entry-no-ext-amd-.js

@@ -0,0 +1,7 @@
+define(['exports'], function (exports) { 'use strict';
+
+	var noExt = 'no-ext';
+
+	exports.default = noExt;
+
+});

test/chunking-form/samples/preserve-modules-filename-pattern/_expected/cjs/entry-main-cjs-ts.ts.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var foo = require('./entry-foo-cjs-ts.ts.js');
+var bar = require('./nested/entry-bar-cjs-ts.ts.js');
+var baz = require('./nested/entry-baz-cjs-ts.ts.js');
+var noExt = require('./entry-no-ext-cjs-.js');
+
+
+
+exports.foo = foo.default;
+exports.bar = bar.default;
+exports.baz = baz.default;
+exports.noExt = noExt.default;

test/chunking-form/samples/preserve-modules-filename-pattern/_expected/cjs/entry-no-ext-cjs-.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var noExt = 'no-ext';
+
+exports.default = noExt;

test/chunking-form/samples/preserve-modules-filename-pattern/_expected/es/entry-main-esm-ts.ts.js

@@ -0,0 +1,4 @@
+export { default as foo } from './entry-foo-esm-ts.ts.js';
+export { default as bar } from './nested/entry-bar-esm-ts.ts.js';
+export { default as baz } from './nested/entry-baz-esm-ts.ts.js';
+export { default as noExt } from './entry-no-ext-esm-.js';

test/chunking-form/samples/preserve-modules-filename-pattern/_expected/es/entry-no-ext-esm-.js

@@ -0,0 +1,3 @@
+var noExt = 'no-ext';
+
+export default noExt;

test/chunking-form/samples/preserve-modules-filename-pattern/_expected/system/entry-main-system.js → test/chunking-form/samples/preserve-modules-filename-pattern/_expected/system/entry-main-system-ts.ts.js

@@ -1,4 +1,4 @@
-System.register(['./entry-foo-system.js', './nested/entry-bar-system.js', './nested/entry-baz-system.js'], function (exports) {
+System.register(['./entry-foo-system-ts.ts.js', './nested/entry-bar-system-ts.ts.js', './nested/entry-baz-system-ts.ts.js', './entry-no-ext-system-.js'], function (exports) {
 	'use strict';
 	return {
 		setters: [function (module) {
@@ -7,6 +7,8 @@ System.register(['./entry-foo-system.js', './nested/entry-bar-system.js', './nes
 			exports('bar', module.default);
 		}, function (module) {
 			exports('baz', module.default);
+		}, function (module) {
+			exports('noExt', module.default);
 		}],
 		execute: function () {
 

test/chunking-form/samples/preserve-modules-filename-pattern/_expected/system/entry-no-ext-system-.js

@@ -0,0 +1,10 @@
+System.register([], function (exports) {
+	'use strict';
+	return {
+		execute: function () {
+
+			var noExt = exports('default', 'no-ext');
+
+		}
+	};
+});

test/chunking-form/samples/preserve-modules-filename-pattern/src/main.ts

@@ -4,3 +4,5 @@ export { default as foo } from './foo.ts';
 export { default as bar } from './nested/bar.ts';
 // @ts-ignore
 export { default as baz } from './nested/baz.ts';
+// @ts-ignore
+export { default as noExt } from './no-ext';

test/chunking-form/samples/preserve-modules-filename-pattern/src/no-ext

@@ -0,0 +1 @@
+export default 'no-ext'

test/chunking-form/samples/preserve-modules-scriptified-assets/_config.js

@@ -0,0 +1,26 @@
+const path = require('path');
+
+module.exports = {
+	description: 'scriptified assets have extension in preserveModules output filename',
+	options: {
+		input: 'src/main.js',
+		preserveModules: true,
+		plugins: [
+			{
+				name: 'str-num-plugin',
+				transform(code, id) {
+					switch (path.extname(id)) {
+						case '.num':
+							return { code: `export default ${code.trim()}` };
+						case '.str':
+							return { code: `export default "${code.trim()}"` };
+						case '':
+							return { code: 'export default "COULDN\'T TRANSFORM"' };
+						default:
+							return null;
+					}
+				}
+			}
+		]
+	}
+};

test/chunking-form/samples/preserve-modules-scriptified-assets/_expected/amd/answer.num.js

@@ -0,0 +1,7 @@
+define(['exports'], function (exports) { 'use strict';
+
+	var answer = 42;
+
+	exports.default = answer;
+
+});

test/chunking-form/samples/preserve-modules-scriptified-assets/_expected/amd/lorem.str.js

@@ -0,0 +1,7 @@
+define(['exports'], function (exports) { 'use strict';
+
+	var lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
+
+	exports.default = lorem;
+
+});

test/chunking-form/samples/preserve-modules-scriptified-assets/_expected/amd/main.js

@@ -0,0 +1,11 @@
+define(['exports', './answer.num', './lorem.str', './no-ext'], function (exports, answer, lorem, noExt) { 'use strict';
+
+
+
+	exports.answer = answer.default;
+	exports.lorem = lorem.default;
+	exports.noExt = noExt.default;
+
+	Object.defineProperty(exports, '__esModule', { value: true });
+
+});

test/chunking-form/samples/preserve-modules-scriptified-assets/_expected/amd/no-ext.js

@@ -0,0 +1,7 @@
+define(['exports'], function (exports) { 'use strict';
+
+	var noExt = "COULDN'T TRANSFORM";
+
+	exports.default = noExt;
+
+});

test/chunking-form/samples/preserve-modules-scriptified-assets/_expected/cjs/answer.num.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var answer = 42;
+
+exports.default = answer;

test/chunking-form/samples/preserve-modules-scriptified-assets/_expected/cjs/lorem.str.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
+
+exports.default = lorem;

test/chunking-form/samples/preserve-modules-scriptified-assets/_expected/cjs/main.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var answer = require('./answer.num.js');
+var lorem = require('./lorem.str.js');
+var noExt = require('./no-ext.js');
+
+
+
+exports.answer = answer.default;
+exports.lorem = lorem.default;
+exports.noExt = noExt.default;

test/chunking-form/samples/preserve-modules-scriptified-assets/_expected/cjs/no-ext.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var noExt = "COULDN'T TRANSFORM";
+
+exports.default = noExt;

test/chunking-form/samples/preserve-modules-scriptified-assets/_expected/es/answer.num.js

@@ -0,0 +1,3 @@
+var answer = 42;
+
+export default answer;

test/chunking-form/samples/preserve-modules-scriptified-assets/_expected/es/main.js

@@ -0,0 +1,3 @@
+export { default as answer } from './answer.num.js';
+export { default as lorem } from './lorem.str.js';
+export { default as noExt } from './no-ext.js';

test/chunking-form/samples/preserve-modules-scriptified-assets/_expected/es/no-ext.js

@@ -0,0 +1,3 @@
+var noExt = "COULDN'T TRANSFORM";
+
+export default noExt;

test/chunking-form/samples/preserve-modules-scriptified-assets/_expected/system/answer.num.js

@@ -0,0 +1,10 @@
+System.register([], function (exports) {
+	'use strict';
+	return {
+		execute: function () {
+
+			var answer = exports('default', 42);
+
+		}
+	};
+});

test/chunking-form/samples/preserve-modules-scriptified-assets/_expected/system/lorem.str.js

@@ -0,0 +1,10 @@
+System.register([], function (exports) {
+	'use strict';
+	return {
+		execute: function () {
+
+			var lorem = exports('default', "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
+
+		}
+	};
+});

test/chunking-form/samples/preserve-modules-scriptified-assets/_expected/system/main.js

@@ -0,0 +1,17 @@
+System.register(['./answer.num.js', './lorem.str.js', './no-ext.js'], function (exports) {
+	'use strict';
+	return {
+		setters: [function (module) {
+			exports('answer', module.default);
+		}, function (module) {
+			exports('lorem', module.default);
+		}, function (module) {
+			exports('noExt', module.default);
+		}],
+		execute: function () {
+
+
+
+		}
+	};
+});

test/chunking-form/samples/preserve-modules-scriptified-assets/_expected/system/no-ext.js

@@ -0,0 +1,10 @@
+System.register([], function (exports) {
+	'use strict';
+	return {
+		execute: function () {
+
+			var noExt = exports('default', "COULDN'T TRANSFORM");
+
+		}
+	};
+});

test/chunking-form/samples/preserve-modules-scriptified-assets/src/answer.num

@@ -0,0 +1 @@
+42

test/chunking-form/samples/preserve-modules-scriptified-assets/src/lorem.str

@@ -0,0 +1 @@
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

test/chunking-form/samples/preserve-modules-scriptified-assets/src/main.js

@@ -0,0 +1,3 @@
+export { default as answer } from './answer.num';
+export { default as lorem } from './lorem.str';
+export { default as noExt } from './no-ext';

test/chunking-form/samples/preserve-modules-scriptified-assets/src/no-ext

@@ -0,0 +1 @@
+WHATEVER