Dmitry VerkhoturovandGitHub
a5b2fe3cfc
Four upgrades that were finished but never merged, the compiler collapse
they enable, and the dependency sweep that follows. Direct
devDependencies go from 78 to 60 and dependencies from 10 to 9.
Three were doing the same job: `ts-loader` stripped types in webpack,
`babel-loader` did everything else, and `@swc/jest` repeated both for the
tests with its own copy of the JSX settings. Babel is the one that
survives, because the `data-testid` stripper has no equivalent elsewhere.
`ts-loader` ran `transpileOnly: true`, so it only stripped types, which
`@babel/preset-typescript` does; `fork-ts-checker-webpack-plugin` was
already what type-checks. Jest runs `babel-jest` against the same
`.babelrc.js` the bundle uses, passed as `configFile` because a
file-relative babel config does not reach the `node_modules` packages in
`transformIgnorePatterns`, and `jest.config.mjs` is plain ESM because a
`.ts` config is compiled against `tsconfig.json`, whose
`verbatimModuleSyntax` rejects ESM syntax in a file the package has not
declared as a module.
That removes `ts-loader`, `@swc/jest` and `@swc/core`. The last was
pinned to 1.2.205 from 2022 with no way forward, because newer builds
emit non-configurable exports and break `jest.spyOn` across 13 suites.
Babel compiles a file at a time with no type information, so it cannot
tell a type-only import from a real one and keeps the module. One line,
`import { boundActions } from './connected-comment'`, pulled the whole
redux store into `last-comments.mjs` and doubled it. `verbatimModuleSyntax`
and `@typescript-eslint/consistent-type-imports` mark them properly; the
statement has to be a separate `import type`, since verbatim semantics
keep an inline `import { type X }` and load the module anyway.
The legacy and modern compilations produced the same bytes. Both read the
same browserslist query, `defaults, not IE 11, not samsung 12` resolves to
chrome 109 and up, and nothing in the source needs transforming for that
set, so 28 of the 29 output pairs were byte-identical.
That made the module/nomodule switch worse than redundant: it served the
`.js` file to browsers with no ES module support, and those files carried
`??`, `?.` and class fields, so the fallback handed its own audience a
syntax error. There is now one bundle, always loaded as a module, in the
five templates and in the seven `site/` documents integrators copy from.
A production build emits 29 files rather than 58, in about 3 seconds
rather than 17. Two of those documents did not work at all beforehand:
the SPA snippet could not parse, and the subdomain example had an
unterminated string.
`@babel/core` 8 declares `^22.18 || >=24.11` and `size-limit` 13 declares
`^22.18 || ^24 || >=26`, so 20 was below the floor of two things installed
here; pnpm only warns, which is why every build passed. All seven places
the frontend pins it move together. `site/` is untouched: it builds with
yarn and eleventy and installs neither.
`eslint --print-config` before and after gives 173 active rules on an
application file against 172, and 172 on a spec file and a plain JS file
against 171. What is gone is three `flowtype` rules with no Flow here,
`no-new-object` and `no-new-symbol` whose upstream replacements are on,
`react/forbid-foreign-prop-types` with no propTypes anywhere, and, on TS
only, `no-useless-constructor`, whose typescript-eslint version is on at
error. `@babel/core` is pinned to 8 across the workspace because
`@jest/transform` and `istanbul-lib-instrument` depend on 7 outright; a
second scoped override holds `eslint-config-preact` on 7, since its
`@babel/eslint-parser` loads babel 7 syntax plugins.
`fast-async` rewrote every async function into nodent promise chains,
calls babel's `transform` synchronously, which babel 8 removed, and every
browser in the target list runs async natively. `prefresh` blew its stack
on `createContext` under babel 8 with no newer release to move to, which
compiled `intl.tsx` and `store/context.tsx` into throwing stubs, so
`pnpm dev:app` could not run the widget at all. `core-js` is not injected
now that `useBuiltIns` is gone, `postcss-custom-properties` was reached
directly although nothing declared it and resolved only through pnpm's
private hoist directory, and `cssnano` ran in both postcss chains although
`CssMinimizerPlugin` already uses it.
`pnpm lint`, `pnpm test` and `pnpm build` now work from `frontend/` as
`CLAUDE.md` and the contributing guide have always said they do; the
workspace root defined none of them.
399 lines
8.3 KiB
HTML
399 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
||
<html class="no-js" lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
<title>How to use Markdown in Remark</title>
|
||
<meta name="description" content="" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<style>
|
||
html {
|
||
color: #222;
|
||
font-size: 1em;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
hr {
|
||
display: block;
|
||
height: 1px;
|
||
border: 0;
|
||
border-top: 1px solid #ccc;
|
||
margin: 1em 0;
|
||
padding: 0;
|
||
}
|
||
|
||
a {
|
||
color: #4183c4;
|
||
}
|
||
|
||
audio,
|
||
canvas,
|
||
iframe,
|
||
img,
|
||
svg,
|
||
video {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
fieldset {
|
||
border: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
textarea {
|
||
resize: vertical;
|
||
}
|
||
|
||
.browserupgrade {
|
||
margin: 0.2em 0;
|
||
background: #eee;
|
||
color: #000;
|
||
padding: 0.2em 0;
|
||
}
|
||
|
||
body {
|
||
font: 16px/26px Helvetica, 'Helvetica Neue', Arial, sans-serif;
|
||
}
|
||
|
||
.wrapper {
|
||
width: 90%;
|
||
margin: 0 5%;
|
||
}
|
||
|
||
.title {
|
||
color: #222;
|
||
margin: 40px 0 0 0;
|
||
}
|
||
|
||
nav ul {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style-type: none;
|
||
}
|
||
|
||
nav a {
|
||
display: block;
|
||
margin-bottom: 10px;
|
||
padding: 15px 0;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
color: #222;
|
||
}
|
||
|
||
nav a:hover,
|
||
nav a:visited {
|
||
color: #222;
|
||
}
|
||
|
||
nav a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.main {
|
||
padding: 30px 0;
|
||
}
|
||
|
||
.main article h1 {
|
||
font-size: 2em;
|
||
}
|
||
|
||
.main aside {
|
||
color: #222;
|
||
padding: 20px 40px;
|
||
}
|
||
|
||
.main aside p {
|
||
margin: 0 0 20px 0;
|
||
padding: 0;
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.main aside p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.footer-container footer {
|
||
color: #222;
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.ie7 .title {
|
||
padding-top: 20px;
|
||
}
|
||
|
||
@media only screen and (min-width: 480px) {
|
||
nav a {
|
||
float: left;
|
||
width: 27%;
|
||
margin: 0 1.7%;
|
||
padding: 25px 2%;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.oldie nav a {
|
||
margin: 0 0.7%;
|
||
}
|
||
|
||
nav li:first-child a {
|
||
margin-left: 0;
|
||
}
|
||
|
||
nav li:last-child a {
|
||
margin-right: 0;
|
||
}
|
||
|
||
nav ul li {
|
||
display: inline;
|
||
}
|
||
}
|
||
|
||
@media only screen and (min-width: 768px) {
|
||
nav {
|
||
float: right;
|
||
width: 38%;
|
||
}
|
||
|
||
.main article {
|
||
float: left;
|
||
width: 57%;
|
||
}
|
||
|
||
.main aside {
|
||
float: right;
|
||
width: 28%;
|
||
}
|
||
}
|
||
|
||
@media only screen and (min-width: 1140px) {
|
||
.wrapper {
|
||
/* 1140px - 10% for margins */
|
||
width: 1026px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
.hidden {
|
||
display: none !important;
|
||
visibility: hidden;
|
||
}
|
||
|
||
.visuallyhidden {
|
||
border: 0;
|
||
clip-path: inset(50%);
|
||
height: 1px;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
padding: 0;
|
||
position: absolute;
|
||
width: 1px;
|
||
}
|
||
|
||
.visuallyhidden.focusable:active,
|
||
.visuallyhidden.focusable:focus {
|
||
clip-path: none;
|
||
height: auto;
|
||
margin: 0;
|
||
overflow: visible;
|
||
position: static;
|
||
width: auto;
|
||
}
|
||
|
||
.invisible {
|
||
visibility: hidden;
|
||
}
|
||
|
||
.clearfix::before,
|
||
.clearfix::after {
|
||
content: ' ';
|
||
display: table;
|
||
}
|
||
|
||
.clearfix::after {
|
||
clear: both;
|
||
}
|
||
|
||
.clearfix {
|
||
*zoom: 1;
|
||
}
|
||
|
||
@media print {
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
background: transparent !important;
|
||
color: #000 !important;
|
||
box-shadow: none !important;
|
||
text-shadow: none !important;
|
||
}
|
||
|
||
aside {
|
||
display: none;
|
||
}
|
||
|
||
a,
|
||
a:visited {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
a[href]::after {
|
||
content: ' (' attr(href) ')';
|
||
}
|
||
|
||
abbr[title]::after {
|
||
content: ' (' attr(title) ')';
|
||
}
|
||
|
||
a[href^='#']::after,
|
||
a[href^='javascript:']::after {
|
||
content: '';
|
||
}
|
||
|
||
pre,
|
||
blockquote {
|
||
border: 1px solid #999;
|
||
break-inside: avoid;
|
||
}
|
||
|
||
thead {
|
||
display: table-header-group;
|
||
}
|
||
|
||
tr,
|
||
img {
|
||
break-inside: avoid;
|
||
}
|
||
|
||
img {
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
p,
|
||
h2,
|
||
h3 {
|
||
orphans: 3;
|
||
widows: 3;
|
||
}
|
||
|
||
h2,
|
||
h3 {
|
||
break-after: avoid;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="header-container">
|
||
<header class="wrapper clearfix">
|
||
<a id="Introduction"></a>
|
||
<h1 class="title">How to use Markdown in Remark</h1>
|
||
</header>
|
||
</div>
|
||
|
||
<div class="main-container">
|
||
<div class="main wrapper clearfix">
|
||
<article>
|
||
<p>
|
||
Markdown is a lightweight and easy-to-use syntax for styling Remark comments. You control the display of the
|
||
comment, formatting words as bold or italic, adding images, and creating lists are just a few of the things
|
||
we can do with Markdown.
|
||
</p>
|
||
|
||
<h2 id="Headers-Quotes">Headers & Quotes</h2>
|
||
<p>
|
||
Sometimes it's useful to have different levels of headings to structure your comments. Start lines with a
|
||
`#` to create headings.
|
||
</p>
|
||
|
||
<p>You can use one `#` all the way up to `######` six for different heading sizes.</p>
|
||
|
||
<p>If you’d like to quote someone, use the > character before the line</p>
|
||
|
||
<h2 id="Text">Text</h2>
|
||
|
||
<p>
|
||
It's very easy to make some words <strong>bold</strong>: surround them with double asterisks ** and other
|
||
words <em>italic</em>: surround them with one asterisk *.
|
||
</p>
|
||
<p>
|
||
You can even <a href="https://google.com" target="_blank">link to Google!</a> using this syntax:<br />
|
||
[link to Google!](https://google.com)
|
||
</p>
|
||
|
||
<h2 id="Lists">Lists</h2>
|
||
|
||
<p>If you want numbered lists:</p>
|
||
<p>
|
||
1. One<br />
|
||
2. Two<br />
|
||
3. Three<br />
|
||
3.1. Item 3.1<br />
|
||
3.2. Item 3.2<br />
|
||
</p>
|
||
|
||
<p>If you want bullet point</p>
|
||
|
||
<p>
|
||
* Item 1<br />
|
||
* Item 2<br />
|
||
* Item 2a<br />
|
||
* Item 2b<br />
|
||
</p>
|
||
|
||
<h2 id="Images">Images</h2>
|
||
|
||
<p>If you want to embed images, this is how you do it:</p>
|
||
<pre></pre>
|
||
<p>
|
||
<img src="400x400.jpeg" width="400" height="400" alt="" />
|
||
</p>
|
||
|
||
<h2 id="Code">Code</h2>
|
||
|
||
<p>You can create code span by wrapping text in backtick quotes: <strong>`your code`</strong></p>
|
||
|
||
<h2 id="Tables">Tables</h2>
|
||
|
||
<p>
|
||
You can create tables by assembling a list of words and dividing them with hyphens - (for the first row),
|
||
and then separating each column with a pipe |:
|
||
</p>
|
||
|
||
<pre>
|
||
|First Header | Second Header|
|
||
|------------ | -------------|
|
||
|Content from cell 1 | Content from cell 2|
|
||
|Content in the first column | Content in the second column|
|
||
</pre>
|
||
</article>
|
||
|
||
<aside>
|
||
<p>
|
||
<a href="#Introduction">Introduction</a>
|
||
</p>
|
||
<p>
|
||
<a href="#Headers-Quotes">Headers & Quotes</a>
|
||
</p>
|
||
<p>
|
||
<a href="#Text">Text</a>
|
||
</p>
|
||
<p>
|
||
<a href="#Lists">Lists</a>
|
||
</p>
|
||
<p>
|
||
<a href="#Images">Images</a>
|
||
</p>
|
||
<p>
|
||
<a href="#Code">Code</a>
|
||
</p>
|
||
<p>
|
||
<a href="#Tables">Tables</a>
|
||
</p>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|