Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

enh(typescript): highlight obvious user defined type names (interface, etc) #3903

Merged
merged 11 commits into from
Nov 16, 2023
Merged

enh(typescript): highlight obvious user defined type names (interface, etc) #3903

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f5bbc30
Merge pull request #1 from highlightjs/main
MohamedAli00949 Oct 21, 2023
f463c4f
fix(Js/Ts): highlighting function params
MohamedAli00949 Oct 27, 2023
0a6df50
fix(TS): highlighting function params types(interfaces, types, and etc)
MohamedAli00949 Oct 27, 2023
2904ae5
test: fix markup tests of js/ts changes
MohamedAli00949 Oct 27, 2023
e054a95
use exported PARAMS_CONTAINS instead of using it in language contains
MohamedAli00949 Nov 13, 2023
2550cd0
remove the spacing at typescript.js file
MohamedAli00949 Nov 15, 2023
56a61ef
add a comment to explain matching the start of params
MohamedAli00949 Nov 15, 2023
e8f7519
Add changelog entry
MohamedAli00949 Nov 15, 2023
e0ab97c
Merge branch 'main' into fix-ts-params-types
joshgoebel Nov 15, 2023
4abf4d2
fix: declares and jsx expects at typescript markup tests
MohamedAli00949 Nov 16, 2023
4fcaa54
Merge branch 'main' into fix-ts-params-types
joshgoebel Nov 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/languages/javascript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,15 +256,15 @@ export default function(hljs) {
const PARAMS_CONTAINS = SUBST_AND_COMMENTS.concat([
// eat recursive parens in sub expressions
{
begin: /\(/,
begin: /(\s*)\(/,
end: /\)/,
keywords: KEYWORDS,
contains: ["self"].concat(SUBST_AND_COMMENTS)
}
]);
const PARAMS = {
className: 'params',
begin: /\(/,
begin: /(\s*)\(/, // to match the parms with
MohamedAli00949 marked this conversation as resolved.
Show resolved Hide resolved
end: /\)/,
excludeBegin: true,
excludeEnd: true,
Expand Down Expand Up @@ -509,7 +509,7 @@ export default function(hljs) {
skip: true
},
{
begin: /\(/,
begin: /(\s*)\(/,
end: /\)/,
excludeBegin: true,
excludeEnd: true,
Expand Down
29 changes: 28 additions & 1 deletion src/languages/typescript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,14 +101,41 @@ export default function(hljs) {
const functionDeclaration = tsLanguage.contains.find(m => m.label === "func.def");
functionDeclaration.relevance = 0; // () => {} is more typical in TypeScript

const CLASS_REFERENCE = tsLanguage.contains.find(c => c.className === "title.class");
const ATTRIBUTE_HIGHLIGHT = tsLanguage.contains.find(c => c.className === "attr");

Object.assign(tsLanguage, {
name: 'TypeScript',
aliases: [
'ts',
'tsx',
'mts',
'cts'
]
],
contains: tsLanguage.contains.map(c => {
const { contains } = c;
if (
contains
) {
const params = contains.find(cc => cc.scope === 'params' || cc.className === 'params');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you really need params here or just access to params_contains? See the already exported tsLanguage.exports.PARAMS_CONTAINS instead.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

First, thanks for your review.
Yes, I want to access the params_contains.
I will modify the code now and commit the changes.


const PROPERTY_TYPE = [
CLASS_REFERENCE,
ATTRIBUTE_HIGHLIGHT
];

if (params) {
params.contains = params.contains.concat(PROPERTY_TYPE)
}

const returnedFuncParams = contains.find(cc => cc.scope === 'function' || cc.className === 'function')?.contains?.find(cc => cc.scope === 'params' || cc.className === 'params').variants[2];
Copy link
Member

@joshgoebel joshgoebel Nov 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The function scope is deprecated and will be removed in the future... though I'm not sure this is necessary at all once you follow the other suggestions.

if (returnedFuncParams) {
returnedFuncParams.contains = returnedFuncParams.contains.concat(PROPERTY_TYPE);
}
}

return c;
}),
});

return tsLanguage;
Expand Down
26 changes: 26 additions & 0 deletions test/markup/javascript/class.expect.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,3 +38,29 @@
<span class="hljs-title class_">InT</span>
<span class="hljs-title class_">CSSParserT</span>
<span class="hljs-title class_">IResponseTsS</span>

<span class="hljs-comment">// this class to show that the params may be seperated with space after the function name and highlighted as params also.</span>
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Car</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Vehicle</span> {
<span class="hljs-title function_">constructor</span> (<span class="hljs-params">speed, cost</span>) {
<span class="hljs-variable language_">super</span>(speed);

<span class="hljs-keyword">var</span> c = <span class="hljs-title class_">Symbol</span>(<span class="hljs-string">&#x27;cost&#x27;</span>);
<span class="hljs-variable language_">this</span>[c] = cost;

<span class="hljs-variable language_">this</span>.<span class="hljs-property">intro</span> = <span class="hljs-string">`This is a car runs at
<span class="hljs-subst">${speed}</span>.`</span>;
}

join () {
}

other (a = ( ( <span class="hljs-number">3</span> + <span class="hljs-number">2</span> ) ) ) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a)
}

something (a = ( ( <span class="hljs-number">3</span> + <span class="hljs-number">2</span> ) ), b = <span class="hljs-number">1</span> ) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a)
}

onemore (a=(<span class="hljs-number">3</span>+<span class="hljs-number">2</span>, b=(<span class="hljs-number">5</span>*<span class="hljs-number">9</span>))) {}
}
26 changes: 26 additions & 0 deletions test/markup/javascript/class.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,3 +38,29 @@ OutT
InT
CSSParserT
IResponseTsS

// this class to show that the params may be seperated with space after the function name and highlighted as params also.
class Car extends Vehicle {
constructor (speed, cost) {
super(speed);

var c = Symbol('cost');
this[c] = cost;

this.intro = `This is a car runs at
${speed}.`;
}

join () {
}

other (a = ( ( 3 + 2 ) ) ) {
console.log(a)
}

something (a = ( ( 3 + 2 ) ), b = 1 ) {
console.log(a)
}

onemore (a=(3+2, b=(5*9))) {}
}
5 changes: 5 additions & 0 deletions test/markup/javascript/seperated-parameters.expect.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<span class="hljs-keyword">function</span> <span class="hljs-title function_">visibleTodoFilter</span> (<span class="hljs-params">state = <span class="hljs-string">&#x27;watch&#x27;</span>, action</span>) {}

<span class="hljs-keyword">function</span> <span class="hljs-title function_">visibleTodoFilter</span> (<span class="hljs-params">state, action</span>) {
<span class="hljs-comment">// ...</span>
}
5 changes: 5 additions & 0 deletions test/markup/javascript/seperated-parameters.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
function visibleTodoFilter (state = 'watch', action) {}

function visibleTodoFilter (state, action) {
// ...
}
17 changes: 17 additions & 0 deletions test/markup/typescript/class.expect.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,20 @@
<span class="hljs-subst">${speed}</span>.`</span>;
}
}

<span class="hljs-keyword">interface</span> <span class="hljs-title class_">TrainProps</span> {
<span class="hljs-attr">speed</span>: <span class="hljs-built_in">number</span>;
<span class="hljs-attr">cost</span>: <span class="hljs-built_in">number</span>;
}

<span class="hljs-keyword">class</span> <span class="hljs-title class_">Train</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Vehicle</span> {
<span class="hljs-title function_">constructor</span> (<span class="hljs-params"><span class="hljs-attr">trainData</span>: <span class="hljs-title class_">TrainProps</span></span>) {
<span class="hljs-variable language_">super</span>(trainData.<span class="hljs-property">speed</span>);

<span class="hljs-keyword">var</span> c = <span class="hljs-title class_">Symbol</span>(<span class="hljs-string">&#x27;cost&#x27;</span>);
<span class="hljs-variable language_">this</span>[c] = trainData.<span class="hljs-property">cost</span>;

<span class="hljs-variable language_">this</span>.<span class="hljs-property">intro</span> = <span class="hljs-string">`This is a car runs at
<span class="hljs-subst">${trainData.speed}</span>.`</span>;
}
}
17 changes: 17 additions & 0 deletions test/markup/typescript/class.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,20 @@ class Car extends Vehicle {
${speed}.`;
}
}

interface TrainProps {
speed: number;
cost: number;
}

class Train extends Vehicle {
constructor (trainData: TrainProps) {
super(trainData.speed);

var c = Symbol('cost');
this[c] = trainData.cost;

this.intro = `This is a car runs at
${trainData.speed}.`;
}
}
27 changes: 26 additions & 1 deletion test/markup/typescript/functions.expect.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,12 @@
<span class="hljs-keyword">return</span> foo;
};

<span class="hljs-keyword">function</span> <span class="hljs-title function_">println</span>(<span class="hljs-params">value: <span class="hljs-built_in">string</span></span>);
<span class="hljs-keyword">var</span> identity2 = <span class="hljs-keyword">function</span> (<span class="hljs-params">foo</span>) { <span class="hljs-comment">// seperate the params and function keyword</span>
<span class="hljs-keyword">return</span> foo;
};

<span class="hljs-keyword">function</span> <span class="hljs-title function_">println</span>(<span class="hljs-params"><span class="hljs-attr">value</span>: <span class="hljs-built_in">string</span></span>);
<span class="hljs-keyword">function</span> <span class="hljs-title function_">println</span> (<span class="hljs-params"><span class="hljs-attr">value</span>: <span class="hljs-built_in">string</span></span>);<span class="hljs-comment">// seperate the params and function keyword</span>

<span class="hljs-keyword">function</span> <span class="hljs-title function_">getArray</span>(<span class="hljs-params"></span>): <span class="hljs-built_in">number</span>[] {
<span class="hljs-keyword">return</span> [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>];
Expand All @@ -24,3 +29,23 @@
<span class="hljs-keyword">const</span> bad = (<span class="hljs-function">(<span class="hljs-params">a=<span class="hljs-number">2</span>, b=<span class="hljs-number">5</span></span>) =&gt;</span> [...a, b]);
sides.<span class="hljs-title function_">every</span>(<span class="hljs-function">(<span class="hljs-params">length,width=(<span class="hljs-number">3</span>+<span class="hljs-number">2</span>+(<span class="hljs-number">4</span>/<span class="hljs-number">5</span>))</span>) =&gt;</span> length &gt; <span class="hljs-number">0</span> );

<span class="hljs-comment">// test props types with interface, types, and etc.</span>
<span class="hljs-keyword">interface</span> <span class="hljs-title class_">Rect</span> {
<span class="hljs-attr">x</span>: <span class="hljs-built_in">number</span>;
<span class="hljs-attr">y</span>: <span class="hljs-built_in">number</span>;
<span class="hljs-attr">w</span>: <span class="hljs-built_in">number</span>;
<span class="hljs-attr">h</span>: <span class="hljs-built_in">number</span>;
}

<span class="hljs-keyword">function</span> <span class="hljs-title function_">boundingRect</span>(<span class="hljs-params"><span class="hljs-attr">rect</span>: <span class="hljs-title class_">Rect</span></span>) {}
<span class="hljs-keyword">function</span> <span class="hljs-title function_">boundingRect</span> (<span class="hljs-params"><span class="hljs-attr">rect</span>: <span class="hljs-title class_">Rect</span></span>) {}
<span class="hljs-keyword">function</span> <span class="hljs-title function_">boundingRect</span>(<span class="hljs-params"><span class="hljs-attr">rect</span>: <span class="hljs-title class_">Rect</span></span>): <span class="hljs-title class_">Rect</span> {}
<span class="hljs-keyword">function</span> <span class="hljs-title function_">boundingRect</span> (<span class="hljs-params"><span class="hljs-attr">rect</span>: <span class="hljs-title class_">Rect</span></span>): <span class="hljs-title class_">Rect</span> {}
<span class="hljs-keyword">function</span> <span class="hljs-title function_">boundingRects</span>(<span class="hljs-params"><span class="hljs-attr">rects</span>: <span class="hljs-title class_">Rect</span>[]</span>) {}
<span class="hljs-keyword">function</span> <span class="hljs-title function_">boundingRects</span> (<span class="hljs-params"><span class="hljs-attr">rects</span>: <span class="hljs-title class_">Rect</span>[]</span>) {}
<span class="hljs-keyword">function</span> <span class="hljs-title function_">boundingRects</span>(<span class="hljs-params"><span class="hljs-attr">rects</span>: <span class="hljs-title class_">Rect</span>[]</span>): <span class="hljs-title class_">Rect</span> {}
<span class="hljs-keyword">function</span> <span class="hljs-title function_">boundingRects</span> (<span class="hljs-params"><span class="hljs-attr">rects</span>: <span class="hljs-title class_">Rect</span>[]</span>): <span class="hljs-title class_">Rect</span> {}
<span class="hljs-keyword">function</span> <span class="hljs-title function_">boundingRects</span>(<span class="hljs-params"><span class="hljs-attr">rects</span>: <span class="hljs-title class_">Array</span>&lt;<span class="hljs-title class_">Rect</span>&gt;</span>): <span class="hljs-title class_">Rect</span> {}
<span class="hljs-keyword">function</span> <span class="hljs-title function_">boundingRects</span> (<span class="hljs-params"><span class="hljs-attr">rects</span>: <span class="hljs-title class_">Array</span>&lt;<span class="hljs-title class_">Rect</span>&gt;</span>): <span class="hljs-title class_">Rect</span> {}
<span class="hljs-keyword">function</span> <span class="hljs-title function_">boundingRects</span> (<span class="hljs-params"><span class="hljs-attr">rects</span>: <span class="hljs-title class_">Array</span>&lt;<span class="hljs-title class_">Rect</span>&gt;</span>) {}

24 changes: 24 additions & 0 deletions test/markup/typescript/functions.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,12 @@ var identity = function(foo) {
return foo;
};

var identity2 = function (foo) { // seperate the params and function keyword
return foo;
};

function println(value: string);
function println (value: string);// seperate the params and function keyword

function getArray(): number[] {
return [1, 2];
Expand All @@ -24,3 +29,22 @@ const array = [1, 2, 3].reduce<number[]>((acc, next) => [...acc, next], []);
const bad = ((a=2, b=5) => [...a, b]);
sides.every((length,width=(3+2+(4/5))) => length > 0 );

// test props types with interface, types, and etc.
interface Rect {
x: number;
y: number;
w: number;
h: number;
}

function boundingRect(rect: Rect) {}
function boundingRect (rect: Rect) {}
function boundingRect(rect: Rect): Rect {}
function boundingRect (rect: Rect): Rect {}
function boundingRects(rects: Rect[]) {}
function boundingRects (rects: Rect[]) {}
function boundingRects(rects: Rect[]): Rect {}
function boundingRects (rects: Rect[]): Rect {}
function boundingRects(rects: Array<Rect>): Rect {}
function boundingRects (rects: Array<Rect>): Rect {}
function boundingRects (rects: Array<Rect>) {}
Loading