Skip to content

Commit

Permalink
wip 3.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@strager
strager committed Dec 31, 2023
1 parent 01b3b19 commit 243c7b0
Show file tree
Hide file tree
Showing 2 changed files with 258 additions and 1 deletion.
250 changes: 250 additions & 0 deletions website/public/blog/version-3.0/index.ejs.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,250 @@
<!---{
"title": "@@@",
"linkLabelHTML": "Release: version 3.0",
"description": "@@@",
"navTitle": "Release 3.0",
"blogAuthor": "Matthew \"strager\" Glazar",
"blogDate": "2023-12-30T18:20:00-05:00"
}--->

<!DOCTYPE html>
<!-- Copyright (C) 2020 Matthew "strager" Glazar -->
<!-- See end of file for extended copyright information. -->
<html>
<head>
<%- await include("../../common-head.ejs.html") %> <%- await
include("../blog-head.ejs.html") %>
<link href="../../main.css" rel="stylesheet" />
</head>
<body>
<% function callsToAction() { %>
<ul class="install-options">
<li>
<a href="../../install/"
><qljs-icon name="vscode" size="19" /> <qljs-icon name="neovim" size="19" /> <qljs-icon name="sublime-text" size="19" /> <qljs-icon name="emacs" size="19" /> install
quick-lint-js</a
>
</li>
<li>
<a href="https://github.com/quick-lint/quick-lint-js"
><qljs-icon name="github" size="19" /> code on GitHub</a
>
</li>
</ul>
<% } %>

<header><%- await include("../../common-nav.ejs.html") %></header>

<main>
<h1><%= meta.title %></h1>
<p><qljs-date datetime="<%= meta.blogDate %>" /></p>

@@@

<%- callsToAction() %>


<p>How does quick-lint-js compare to ESLint? See for yourself:</p>

<!-- @@@ s/ESLint/TypeScript/g -->
<!-- @@@ show logos in comparison -->

<!-- @@@ Copyright (c) Tiny Technologies, Inc. All rights reserved.
License: LGPL-2.1-only -->
<div class="eslint-comparison">
<figure style="grid-area: eslint">
<figcaption>TypeScript</figcaption>
<div class="example">
<pre><code class="javascript">const trimArg = &lt;<mark data-code="2304" data-message="Cannot find name 'T'." data-severity="error"><mark data-code="17008" data-message="JSX element 'T' has no corresponding closing tag." data-severity="error">T</mark></mark>&gt;(fn: (a: T) =<mark data-code="1382" data-message="Unexpected token. Did you mean `{'&gt;'}` or `&amp;gt;`?" data-severity="error">&gt;</mark> boolean) =<mark data-code="1382" data-message="Unexpected token. Did you mean `{'&gt;'}` or `&amp;gt;`?" data-severity="error">&gt;</mark> {
<mark data-code="1109" data-message="Expression expected." data-severity="error">return</mark> (arg1: any, arg2: T) =<mark data-code="1382" data-message="Unexpected token. Did you mean `{'&gt;'}` or `&amp;gt;`?" data-severity="error">&gt;</mark> {
<mark data-code="1109" data-message="Expression expected." data-severity="error">return</mark> fn(arg2);
<mark data-code="1381" data-message="Unexpected token. Did you mean `{'}'}` or `&amp;rbrace;`?" data-severity="error">}</mark>;
<mark data-code="1381" data-message="Unexpected token. Did you mean `{'}'}` or `&amp;rbrace;`?" data-severity="error">}</mark><mark data-code="1005" data-message="'&lt;/' expected." data-severity="error">;</mark></code></pre>
<p>
Cannot find name 'T'. (2304)<br>
JSX element 'T' has no corresponding closing tag. (17008)<br>
Unexpected token. Did you mean `{'&gt;'}` or `&amp;gt;`? (1382)<br>
Unexpected token. Did you mean `{'&gt;'}` or `&amp;gt;`? (1382)<br>
Expression expected. (1109)<br>
Unexpected token. Did you mean `{'&gt;'}` or `&amp;gt;`? (1382)<br>
Expression expected. (1109)<br>
Unexpected token. Did you mean `{'}'}` or `&amp;rbrace;`? (1381)<br>
Unexpected token. Did you mean `{'}'}` or `&amp;rbrace;`? (1381)<br>
'&lt;/' expected. (1005)</p>
</div>
</figure>
<figure style="grid-area: qljs">
<figcaption>quick-lint-js</figcaption>
<div class="example">
<pre><code class="javascript">const trimArg = &lt;T<mark data-code="E0285" data-message="generic arrow function needs ',' here in TSX" data-severity="error"></mark>&gt;(fn: (a: T) =&gt; boolean) =&gt; {
return (arg1: any, arg2: T) =&gt; {
return fn(arg2);
};
};</code></pre>
<p>
generic arrow function needs ',' here in TSX&nbsp;[<a
href="../../errors/E0285/"
>E0285</a
>]
</p>
</div>
</figure>
</div>

<!-- @@@ copyright Copyright Elasticsearch B.V. -->
<div class="eslint-comparison">
<figure style="grid-area: eslint">
<figcaption>TypeScript</figcaption>
<div class="example">
<pre><code class="javascript">export function Spacer() {
return
<mark data-code="7027" data-message="Unreachable code detected." data-severity="error"><mark data-code="2657" data-message="JSX expressions must have one parent element." data-severity="error">&lt;EuiSpacer size="xs" /&gt;
&lt;EuiHorizontalRule margin="none" /&gt;
&lt;EuiSpacer size="xs" /&gt;</mark></mark>
}</code></pre>
<p>Unreachable code detected. (7027)<br>
JSX expressions must have one parent element. (2657)</p>
</div>
</figure>
<figure style="grid-area: qljs">
<figcaption>quick-lint-js</figcaption>
<div class="example">
<pre><code class="javascript">export function Spacer() {
<mark data-code="E0179" data-message="return statement returns nothing (undefined)" data-severity="warning">return</mark>
<mark data-code="E0189" data-message="missing '&lt;&gt;' and '&lt;/&gt;' to enclose multiple children" data-severity="erro"></mark>&lt;EuiSpacer size="xs" /&gt;
&lt;EuiHorizontalRule margin="none" /&gt;
&lt;EuiSpacer size="xs" /&gt;
}</code></pre>
<p>
return statement returns nothing (undefined)&nbsp;[<a
href="../../errors/E0179/"
>E0179</a
>]<br>
missing '&lt;&gt;' and '&lt;/&gt;' to enclose multiple children&nbsp;[<a
href="../../errors/E0189/"
>E0189</a
>]
</p>
</div>
</figure>
</div>

<!-- @@@ copyright Copyright Elasticsearch B.V. -->
<div class="eslint-comparison">
<figure style="grid-area: eslint">
<figcaption>TypeScript</figcaption>
<div class="example">
<pre><code class="javascript">it('matches on the first word', await (<mark data-code="1109" data-message="Expression expected." data-severity="error">)</mark> <mark data-code="1005" data-message="',' expected." data-severity="error">=&gt;</mark> {
await <mark data-code="1005" data-message="':' expected." data-severity="error">table</mark>.searchForItemWithName('Hello')<mark data-code="1005" data-message="',' expected." data-severity="error">;</mark>
await <mark data-code="1005" data-message="':' expected." data-severity="error">table</mark>.expectItemsCount('visualize', 1)<mark data-code="1005" data-message="',' expected." data-severity="error">;</mark>
});</code></pre>
<p>
Expression expected. (1109)<br>
',' expected. (1005)<br>
':' expected. (1005)<br>
',' expected. (1005)<br>
':' expected. (1005)<br>
',' expected. (1005)
</p>
</div>
</figure>
<figure style="grid-area: qljs">
<figcaption>quick-lint-js</figcaption>
<div class="example">
<pre><code class="javascript">it('matches on the first word', <mark data-code="E0178" data-message="'await' cannot be followed by an arrow function; use 'async' instead" data-severity="error">await</mark> () =&gt; {
await table.searchForItemWithName('Hello');
await table.expectItemsCount('visualize', 1);
});</code></pre>
<p>
'await' cannot be followed by an arrow function; use 'async'
instead&nbsp;[<a href="../../errors/E0178/">E0178</a>]
</p>
</div>
</figure>
</div>

<!-- @@@ <T>expr in .tsx -->
<!-- @@@ <T>()=>{} in .tsx -->
<!-- @@@ <Foo/> in .ts -->

<div class="eslint-comparison">
<figure style="grid-area: eslint">
<figcaption>ESLint</figcaption>
<div class="example">
<pre><code class="javascript">function TodoEntry({title, children}) {
return (
&lt;h3&gt;{title}&lt;/h3&gt;
<mark data-message="Adjacent JSX elements must be wrapped in an enclosing tag" data-severity="error">&lt;</mark>div className="body"&gt;{children}&lt;/div&gt;
);
}</code></pre>
<p>Adjacent JSX elements must be wrapped in an enclosing tag</p>
</div>
</figure>
<figure style="grid-area: qljs">
<figcaption>quick-lint-js</figcaption>
<div class="example">
<pre><code class="javascript">function TodoEntry({title, children}) {
return (
<mark data-code="E0189" data-message="missing '&lt;&gt;' and '&lt;/&gt;' to enclose multiple children" data-severity="error">&lt;</mark>h3&gt;{title}&lt;/h3&gt;
&lt;div className="body"&gt;{children}&lt;/div&gt;<mark data-code="E0189" data-message="children end here" data-severity="error"></mark>
);
}</code></pre>
<p>
missing '&lt;&gt;' and '&lt;/&gt;' to enclose multiple
children;<br />children end here&nbsp;[<a
href="../../errors/E0189/"
>E0189</a
>]
</p>
</div>
</figure>
</div>


<p>
What should we work on next?
<a href="https://github.com/quick-lint/quick-lint-js/issues/327"
>Suggest features for quick-lint-js.</a
>
</p>

<p>
quick-lint-js version 3.0 has over @@@ patches since version 2.0.
<a
href="../../contribute/authors/"
>@@@ people</a
>
made quick-lint-js possible.
</p>

<%- callsToAction() %>

<p>
Written by <a href="https://strager.net/contact.html">strager</a>, lead
developer of quick-lint-js.
</p>

<script src="../../error-box.bundled.js"></script>
</main>
</body>
</html>

<!--
quick-lint-js finds bugs in JavaScript programs.
Copyright (C) 2020 Matthew "strager" Glazar
This file is part of quick-lint-js.
quick-lint-js is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
quick-lint-js is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with quick-lint-js. If not, see <https://www.gnu.org/licenses/>.
-->
9 changes: 8 additions & 1 deletion website/public/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -392,11 +392,18 @@ pre mark,
text-decoration-skip-ink: none;
text-decoration-style: wavy;
}
pre mark:empty {
background: none;
display: inline-block;
height: 1em;
margin-left: -2px; /* (width of SVG) / 2 */
position: absolute;
width: 6px;
}
pre mark:empty::before {
color: red;
content: url("demo/carat.svg") / "^";
content: url("demo/carat.svg");
margin-left: -2px; /* (width of SVG) / 2 */
margin-top: 4px; /* height of SVG */
position: absolute;
}
Expand Down

0 comments on commit 243c7b0

Please sign in to comment.