tools,doc: add support for several flavors of JS code snippets by aduh95 · Pull Request #37162 · nodejs/node · GitHub

Enable code example using both modern ESM syntax and legacy CJS syntax.
It adds a toggle on the web interface to let users switch from one JavaScript flavor to the other.

html.js detects code snippets with a meta attribute:

```mjs
export default {};
```
```cjs
'use strict';
module.exports = {};
```

And adds a <input type=checkbox> toggle:

With dark mode on

✅ Doesn't require JavaScript on the client.
✅ Doesn't break the accessibility of the docs.
✅ Doesn't break GitHub auto-highlighting (well it breaks in the code diff, but it renders OK in the markdown preview, see https://github.com/aduh95/node/blob/doc-multi-syntax-snippets/doc/api/wasi.md).
❓ Use non-free content (the toggle used in this PR is derived from https://fontawesome.com/icons/toggle-on?style=solid, which is under CC BY 4.0 License).

Originally suggested by @jasnell in #37077 (comment).

@nodejs/documentation @nodejs/website wdyt?

Refs: nodejs/node#37162 Refs: nodejs/node#37311 Refs: eslint/markdown#170

CI: https://ci.nodejs.org/job/node-test-pull-request/36322/

CI: https://ci.nodejs.org/job/node-test-pull-request/36324/

Adding the blocked label, as this implementation is probably going to conflict with the next linter update. I'll update this once nodejs/remark-preset-lint-node#176 lands on nodejs/node master.

Refs: nodejs/node#37162 Refs: nodejs/node#37311 Refs: eslint/markdown#170

433badd86a78e03ece8e325f50cd82e4b5536c00 is part of #37604, this PR needs to wait for the other one to land first, other than that it should be ready.

//cc @nodejs/documentation

#37604 has landed now :-)

Landed in 2e1e74e

Signed-off-by: James M Snell <jasnell@gmail.com> PR-URL: #37594 Refs: #37162 Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com> Reviewed-By: Benjamin Gruenbaum <benjamingr@gmail.com> Reviewed-By: Filip Skokan <panva.ip@gmail.com>

Refs: nodejs/remark-preset-lint-node#176 PR-URL: #37605 Refs: #37162 Reviewed-By: Rich Trott <rtrott@gmail.com> Reviewed-By: Danielle Adams <adamzdanielle@gmail.com> Reviewed-By: Darshan Sen <raisinten@gmail.com> Reviewed-By: James M Snell <jasnell@gmail.com> Reviewed-By: Benjamin Gruenbaum <benjamingr@gmail.com>

Refs: #37162 Refs: nodejs/remark-preset-lint-node#176 PR-URL: #37311 Refs: eslint/markdown#172 Reviewed-By: Rich Trott <rtrott@gmail.com>

Enable code example using both modern ESM syntax and legacy CJS syntax. It adds a toggle on the web interface to let users switch from one JavaScript flavor to the other. PR-URL: #37162 Reviewed-By: James M Snell <jasnell@gmail.com> Reviewed-By: Rich Trott <rtrott@gmail.com> Reviewed-By: Michaël Zasso <targos@protonmail.com>

Signed-off-by: James M Snell <jasnell@gmail.com> PR-URL: #37594 Refs: #37162 Reviewed-By: Antoine du Hamel <duhamelantoine1995@gmail.com> Reviewed-By: Benjamin Gruenbaum <benjamingr@gmail.com> Reviewed-By: Filip Skokan <panva.ip@gmail.com>

Refs: #37162 Refs: nodejs/remark-preset-lint-node#176 PR-URL: #37311 Refs: eslint/markdown#172 Reviewed-By: Rich Trott <rtrott@gmail.com>

Enable code example using both modern ESM syntax and legacy CJS syntax. It adds a toggle on the web interface to let users switch from one JavaScript flavor to the other. PR-URL: #37162 Reviewed-By: James M Snell <jasnell@gmail.com> Reviewed-By: Rich Trott <rtrott@gmail.com> Reviewed-By: Michaël Zasso <targos@protonmail.com>

Refs: #37162 Refs: nodejs/remark-preset-lint-node#176 PR-URL: #37311 Refs: eslint/markdown#172 Reviewed-By: Rich Trott <rtrott@gmail.com>

Enable code example using both modern ESM syntax and legacy CJS syntax. It adds a toggle on the web interface to let users switch from one JavaScript flavor to the other. PR-URL: #37162 Reviewed-By: James M Snell <jasnell@gmail.com> Reviewed-By: Rich Trott <rtrott@gmail.com> Reviewed-By: Michaël Zasso <targos@protonmail.com>

Refs: #37162 Refs: nodejs/remark-preset-lint-node#176 PR-URL: #37311 Refs: eslint/markdown#172 Reviewed-By: Rich Trott <rtrott@gmail.com>

Enable code example using both modern ESM syntax and legacy CJS syntax. It adds a toggle on the web interface to let users switch from one JavaScript flavor to the other. PR-URL: #37162 Reviewed-By: James M Snell <jasnell@gmail.com> Reviewed-By: Rich Trott <rtrott@gmail.com> Reviewed-By: Michaël Zasso <targos@protonmail.com>

Refs: #37162 Refs: nodejs/remark-preset-lint-node#176 PR-URL: #37311 Refs: eslint/markdown#172 Reviewed-By: Rich Trott <rtrott@gmail.com>

Enable code example using both modern ESM syntax and legacy CJS syntax. It adds a toggle on the web interface to let users switch from one JavaScript flavor to the other. PR-URL: #37162 Reviewed-By: James M Snell <jasnell@gmail.com> Reviewed-By: Rich Trott <rtrott@gmail.com> Reviewed-By: Michaël Zasso <targos@protonmail.com>

Refs: nodejs/remark-preset-lint-node#176 PR-URL: nodejs#37605 Refs: nodejs#37162 Reviewed-By: Rich Trott <rtrott@gmail.com> Reviewed-By: Danielle Adams <adamzdanielle@gmail.com> Reviewed-By: Darshan Sen <raisinten@gmail.com> Reviewed-By: James M Snell <jasnell@gmail.com> Reviewed-By: Benjamin Gruenbaum <benjamingr@gmail.com>

Refs: nodejs/remark-preset-lint-node#176 PR-URL: #37605 Refs: #37162 Reviewed-By: Rich Trott <rtrott@gmail.com> Reviewed-By: Danielle Adams <adamzdanielle@gmail.com> Reviewed-By: Darshan Sen <raisinten@gmail.com> Reviewed-By: James M Snell <jasnell@gmail.com> Reviewed-By: Benjamin Gruenbaum <benjamingr@gmail.com>

Refs: nodejs/node#37162 Refs: nodejs/node#37311 Refs: eslint/markdown#170

nodejs-github-bot added doc Issues and PRs related to the documentations. tools Issues and PRs related to the tools directory. labels Jan 31, 2021

aduh95 mentioned this pull request Feb 1, 2021

doc: use top-level await syntax in vm.md #37077

Closed

jasnell mentioned this pull request Feb 1, 2021

doc: refactor fs docs structure #37170

Closed

aduh95 added the review wanted PRs that need reviews. label Feb 8, 2021

aduh95 mentioned this pull request Feb 10, 2021

tools: add support for meta info in JS snippet linting #37311

Merged

jasnell approved these changes Feb 22, 2021

View reviewed changes

marsonya approved these changes Feb 22, 2021

View reviewed changes

aymen94 approved these changes Feb 23, 2021

View reviewed changes

aduh95 added a commit to aduh95/remark-preset-lint-node that referenced this pull request Feb 23, 2021

chore: allow cjs and mjs info strings

ba7d870

Refs: nodejs/node#37162 Refs: nodejs/node#37311 Refs: eslint/markdown#170

aduh95 added a commit to aduh95/remark-preset-lint-node that referenced this pull request Feb 23, 2021

chore: allow cjs and mjs info strings

8d37c0e

Refs: nodejs/node#37162 Refs: nodejs/node#37311 Refs: eslint/markdown#170

aduh95 mentioned this pull request Feb 23, 2021

chore: allow cjs and mjs info strings nodejs/remark-preset-lint-node#176

Merged

jasnell approved these changes Feb 23, 2021

View reviewed changes

aduh95 added the blocked PRs that are blocked by other issues or PRs. label Feb 23, 2021

jasnell mentioned this pull request Mar 3, 2021

doc: crypto esm examples #37594

Closed

Trott pushed a commit to nodejs/remark-preset-lint-node that referenced this pull request Mar 4, 2021

chore: allow cjs and mjs info strings (#176 )

5a93237

Refs: nodejs/node#37162 Refs: nodejs/node#37311 Refs: eslint/markdown#170

aduh95 force-pushed the doc-multi-syntax-snippets branch from d3915e0 to 39f1184 Compare March 4, 2021 21:10

aduh95 mentioned this pull request Mar 4, 2021

doc: change lang info string in fs JS snippets #37605

Merged

Trott approved these changes Mar 4, 2021

View reviewed changes

jasnell removed the blocked PRs that are blocked by other issues or PRs. label Mar 4, 2021

aduh95 force-pushed the doc-multi-syntax-snippets branch from 39f1184 to 886be29 Compare March 4, 2021 21:57

aduh95 force-pushed the doc-multi-syntax-snippets branch from 5c79ba2 to 2e1e74e Compare March 6, 2021 15:14

aduh95 merged commit 2e1e74e into nodejs:master Mar 6, 2021

aduh95 deleted the doc-multi-syntax-snippets branch March 6, 2021 15:15

danielleadams pushed a commit that referenced this pull request Mar 16, 2021

tools: add support for mjs and cjs JS snippet linting

07fc61b

Refs: #37162 Refs: nodejs/remark-preset-lint-node#176 PR-URL: #37311 Refs: eslint/markdown#172 Reviewed-By: Rich Trott <rtrott@gmail.com>

danielleadams mentioned this pull request Mar 16, 2021

v15.12.0 proposal #37766

Merged

targos added backport-blocked-v14.x and removed backport-blocked-v14.x labels May 27, 2021

targos pushed a commit that referenced this pull request May 30, 2021

tools: add support for mjs and cjs JS snippet linting

281936e

Refs: #37162 Refs: nodejs/remark-preset-lint-node#176 PR-URL: #37311 Refs: eslint/markdown#172 Reviewed-By: Rich Trott <rtrott@gmail.com>

targos pushed a commit that referenced this pull request Jun 5, 2021

tools: add support for mjs and cjs JS snippet linting

0876e20

Refs: #37162 Refs: nodejs/remark-preset-lint-node#176 PR-URL: #37311 Refs: eslint/markdown#172 Reviewed-By: Rich Trott <rtrott@gmail.com>

targos pushed a commit that referenced this pull request Jun 5, 2021

tools: add support for mjs and cjs JS snippet linting

893576c

Refs: #37162 Refs: nodejs/remark-preset-lint-node#176 PR-URL: #37311 Refs: eslint/markdown#172 Reviewed-By: Rich Trott <rtrott@gmail.com>

targos mentioned this pull request Jun 6, 2021

v14.17.1 release proposal #38948

Merged

targos pushed a commit that referenced this pull request Jun 11, 2021

tools: add support for mjs and cjs JS snippet linting

8399766

Refs: #37162 Refs: nodejs/remark-preset-lint-node#176 PR-URL: #37311 Refs: eslint/markdown#172 Reviewed-By: Rich Trott <rtrott@gmail.com>

Trott mentioned this pull request Jul 14, 2021

fix: fix code display in release blog nodejs/nodejs.org#3977

Merged

Marlyfleitas added a commit to Marlyfleitas/Node-remark-preset-lint that referenced this pull request Aug 26, 2022

chore: allow cjs and mjs info strings (#176)

7ca7b44

Refs: nodejs/node#37162 Refs: nodejs/node#37311 Refs: eslint/markdown#170

patrickm68 added a commit to patrickm68/Node-preset-lint that referenced this pull request Sep 14, 2023

chore: allow cjs and mjs info strings (#176)

0299f7c

Refs: nodejs/node#37162 Refs: nodejs/node#37311 Refs: eslint/markdown#170

slagiewka mentioned this pull request Mar 27, 2025

ADR: CommonJS and ESM decision expressjs/discussions#323

Merged

tools,doc: add support for several flavors of JS code snippets by aduh95 · Pull Request #37162 · nodejs/node · GitHub

Uh oh!

Uh oh!

tools,doc: add support for several flavors of JS code snippets - #37162

tools,doc: add support for several flavors of JS code snippets#37162
aduh95 merged 1 commit into
nodejs:masterfrom
aduh95:doc-multi-syntax-snippets

aduh95 commented Jan 31, 2021 •
edited
Loading

Uh oh!

Uh oh!

aduh95 commented Feb 3, 2021

Uh oh!

nodejs-github-bot commented Feb 23, 2021

Uh oh!

nodejs-github-bot commented Feb 23, 2021

Uh oh!

aduh95 commented Feb 23, 2021

Uh oh!

aduh95 commented Mar 4, 2021 •
edited
Loading

Uh oh!

Uh oh!

jasnell commented Mar 4, 2021

Uh oh!

aduh95 commented Mar 6, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

tools,doc: add support for several flavors of JS code snippets by aduh95 · Pull Request #37162 · nodejs/node · GitHub

Uh oh!

Uh oh!

tools,doc: add support for several flavors of JS code snippets - #37162

tools,doc: add support for several flavors of JS code snippets#37162aduh95 merged 1 commit intonodejs:masternodejs/node:masterfrom aduh95:doc-multi-syntax-snippetsaduh95/node:doc-multi-syntax-snippetsCopy head branch name to clipboard

Conversation

aduh95 commented Jan 31, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aduh95 commented Feb 3, 2021

Uh oh!

nodejs-github-bot commented Feb 23, 2021

Uh oh!

nodejs-github-bot commented Feb 23, 2021

Uh oh!

aduh95 commented Feb 23, 2021

Uh oh!

aduh95 commented Mar 4, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jasnell commented Mar 4, 2021

Uh oh!

aduh95 commented Mar 6, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

tools,doc: add support for several flavors of JS code snippets#37162
aduh95 merged 1 commit into
nodejs:masterfrom
aduh95:doc-multi-syntax-snippets

aduh95 commented Jan 31, 2021 •
edited
Loading

aduh95 commented Mar 4, 2021 •
edited
Loading