JS Extras: Highlight import and export bindings

components/prism-js-extras.js

@@ -32,6 +32,31 @@
 		]
 	});
 
+	/**
+	 * Replaces the `<ID>` placeholder in the given pattern with a pattern for general JS identifier.
+	 *
+	 * @param {string} source
+	 * @param {string} [flags]
+	 * @returns {RegExp}
+	 */
+	function withId(source, flags) {
+		return RegExp(
+			source.replace(/<ID>/g, function () { return /[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*/.source; }),
+			flags);
+	}
+	Prism.languages.insertBefore('javascript', 'keyword', {
+		'imports': {
+			pattern: withId(/(\bimport\b\s*)(?:<ID>(?:\s*,\s*(?:\*\s*as\s+<ID>|\{[^{}]*\}))?|\*\s*as\s+<ID>|\{[^{}]*\})(?=\s*\bfrom\b)/.source),
+			lookbehind: true,
+			inside: Prism.languages.javascript
+		},
+		'exports': {
+			pattern: withId(/(\bexport\b\s*)(?:\*(?:\s*as\s+<ID>)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),
+			lookbehind: true,
+			inside: Prism.languages.javascript
+		}
+	});
+
 	Prism.languages.javascript['keyword'].unshift(
 		{
 			pattern: /\b(?:as|default|export|from|import)\b/,
@@ -60,7 +85,7 @@
 
 	Prism.languages.insertBefore('javascript', 'punctuation', {
 		'property-access': {
-			pattern: /(\.\s*)#?[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*/,
+			pattern: withId(/(\.\s*)#?<ID>/.source),
 			lookbehind: true
 		},
 		'maybe-class-name': {

tests/languages/javascript!+js-extras/exports_feature.test

@@ -0,0 +1,151 @@
+export * from "mod";
+export * as Foo from "mod";
+export {} from "mod";
+export {x} from "mod";
+export {d} from "mod";
+export {d,} from "mod";
+export {d as Foo, b as Bar} from "mod";
+export {d as Foo, b as Bar,} from "mod";
+export {}
+export {x}
+export {d}
+export {d,}
+export {d as Foo, b as Bar}
+export {d as Foo, b as Bar,}
+
+----------------------------------------------------
+
+[
+	["keyword", "export"],
+	["exports", [
+		["operator", "*"]
+	]],
+	["keyword", "from"],
+	["string", "\"mod\""],
+	["punctuation", ";"],
+	["keyword", "export"],
+	["exports", [
+		["operator", "*"],
+		["keyword", "as"],
+		["maybe-class-name", "Foo"]
+	]],
+	["keyword", "from"],
+	["string", "\"mod\""],
+	["punctuation", ";"],
+	["keyword", "export"],
+	["exports", [
+		["punctuation", "{"],
+		["punctuation", "}"]
+	]],
+	["keyword", "from"],
+	["string", "\"mod\""],
+	["punctuation", ";"],
+	["keyword", "export"],
+	["exports", [
+		["punctuation", "{"],
+		"x",
+		["punctuation", "}"]
+	]],
+	["keyword", "from"],
+	["string", "\"mod\""],
+	["punctuation", ";"],
+	["keyword", "export"],
+	["exports", [
+		["punctuation", "{"],
+		"d",
+		["punctuation", "}"]
+	]],
+	["keyword", "from"],
+	["string", "\"mod\""],
+	["punctuation", ";"],
+	["keyword", "export"],
+	["exports", [
+		["punctuation", "{"],
+		"d",
+		["punctuation", ","],
+		["punctuation", "}"]
+	]],
+	["keyword", "from"],
+	["string", "\"mod\""],
+	["punctuation", ";"],
+	["keyword", "export"],
+	["exports", [
+		["punctuation", "{"],
+		"d ",
+		["keyword", "as"],
+		["maybe-class-name", "Foo"],
+		["punctuation", ","],
+		" b ",
+		["keyword", "as"],
+		["maybe-class-name", "Bar"],
+		["punctuation", "}"]
+	]],
+	["keyword", "from"],
+	["string", "\"mod\""],
+	["punctuation", ";"],
+	["keyword", "export"],
+	["exports", [
+		["punctuation", "{"],
+		"d ",
+		["keyword", "as"],
+		["maybe-class-name", "Foo"],
+		["punctuation", ","],
+		" b ",
+		["keyword", "as"],
+		["maybe-class-name", "Bar"],
+		["punctuation", ","],
+		["punctuation", "}"]
+	]],
+	["keyword", "from"],
+	["string", "\"mod\""],
+	["punctuation", ";"],
+	["keyword", "export"],
+	["exports", [
+		["punctuation", "{"],
+		["punctuation", "}"]
+	]],
+	["keyword", "export"],
+	["exports", [
+		["punctuation", "{"],
+		"x",
+		["punctuation", "}"]
+	]],
+	["keyword", "export"],
+	["exports", [
+		["punctuation", "{"],
+		"d",
+		["punctuation", "}"]
+	]],
+	["keyword", "export"],
+	["exports", [
+		["punctuation", "{"],
+		"d",
+		["punctuation", ","],
+		["punctuation", "}"]
+	]],
+	["keyword", "export"],
+	["exports", [
+		["punctuation", "{"],
+		"d ",
+		["keyword", "as"],
+		["maybe-class-name", "Foo"],
+		["punctuation", ","],
+		" b ",
+		["keyword", "as"],
+		["maybe-class-name", "Bar"],
+		["punctuation", "}"]
+	]],
+	["keyword", "export"],
+	["exports", [
+		["punctuation", "{"],
+		"d ",
+		["keyword", "as"],
+		["maybe-class-name", "Foo"],
+		["punctuation", ","],
+		" b ",
+		["keyword", "as"],
+		["maybe-class-name", "Bar"],
+		["punctuation", ","],
+		["punctuation", "}"]
+	]]
+]

tests/languages/javascript!+js-extras/imports_feature.test

@@ -0,0 +1,124 @@
+import React from 'react';
+import x from "mod";
+import * as Foo from "mod";
+import {} from "mod";
+import {d} from "mod";
+import {d,} from "mod";
+import {d as Foo, b as Bar} from "mod";
+import {d as Foo, b as Bar,} from "mod";
+import Foo, { Bar } from "mod";
+import Foo, * as Bar from "mod";
+
+import "mod";
+
+----------------------------------------------------
+
+[
+	["keyword", "import"],
+	["imports", [
+		["maybe-class-name", "React"]
+	]],
+	["keyword", "from"],
+	["string", "'react'"],
+	["punctuation", ";"],
+	["keyword", "import"],
+	["imports", [
+		"x"
+	]],
+	["keyword", "from"],
+	["string", "\"mod\""],
+	["punctuation", ";"],
+	["keyword", "import"],
+	["imports", [
+		["operator", "*"],
+		["keyword", "as"],
+		["maybe-class-name", "Foo"]
+	]],
+	["keyword", "from"],
+	["string", "\"mod\""],
+	["punctuation", ";"],
+	["keyword", "import"],
+	["imports", [
+		["punctuation", "{"],
+		["punctuation", "}"]
+	]],
+	["keyword", "from"],
+	["string", "\"mod\""],
+	["punctuation", ";"],
+	["keyword", "import"],
+	["imports", [
+		["punctuation", "{"],
+		"d",
+		["punctuation", "}"]
+	]],
+	["keyword", "from"],
+	["string", "\"mod\""],
+	["punctuation", ";"],
+	["keyword", "import"],
+	["imports", [
+		["punctuation", "{"],
+		"d",
+		["punctuation", ","],
+		["punctuation", "}"]
+	]],
+	["keyword", "from"],
+	["string", "\"mod\""],
+	["punctuation", ";"],
+	["keyword", "import"],
+	["imports", [
+		["punctuation", "{"],
+		"d ",
+		["keyword", "as"],
+		["maybe-class-name", "Foo"],
+		["punctuation", ","],
+		" b ",
+		["keyword", "as"],
+		["maybe-class-name", "Bar"],
+		["punctuation", "}"]
+	]],
+	["keyword", "from"],
+	["string", "\"mod\""],
+	["punctuation", ";"],
+	["keyword", "import"],
+	["imports", [
+		["punctuation", "{"],
+		"d ",
+		["keyword", "as"],
+		["maybe-class-name", "Foo"],
+		["punctuation", ","],
+		" b ",
+		["keyword", "as"],
+		["maybe-class-name", "Bar"],
+		["punctuation", ","],
+		["punctuation", "}"]
+	]],
+	["keyword", "from"],
+	["string", "\"mod\""],
+	["punctuation", ";"],
+	["keyword", "import"],
+	["imports", [
+		["maybe-class-name", "Foo"],
+		["punctuation", ","],
+		["punctuation", "{"],
+		["maybe-class-name", "Bar"],
+		["punctuation", "}"]
+	]],
+	["keyword", "from"],
+	["string", "\"mod\""],
+	["punctuation", ";"],
+	["keyword", "import"],
+	["imports", [
+		["maybe-class-name", "Foo"],
+		["punctuation", ","],
+		["operator", "*"],
+		["keyword", "as"],
+		["maybe-class-name", "Bar"]
+	]],
+	["keyword", "from"],
+	["string", "\"mod\""],
+	["punctuation", ";"],
+
+	["keyword", "import"],
+	["string", "\"mod\""],
+	["punctuation", ";"]
+]