From b824ba85b6692da39d3afd94de35e6c52aeec00a Mon Sep 17 00:00:00 2001 From: Felix Boehm <188768+fb55@users.noreply.github.com> Date: Thu, 8 Aug 2024 08:59:25 +0100 Subject: [PATCH] fix(website): Fix ReactLiveScope examples (#3980) Fixes #3601 --- benchmark/.eslintrc.json | 5 -- website/docs/basics/traversing.md | 53 ++++++++++++++++------ website/src/theme/ReactLiveScope/index.js | 12 ----- website/src/theme/ReactLiveScope/index.tsx | 11 +++++ 4 files changed, 51 insertions(+), 30 deletions(-) delete mode 100644 benchmark/.eslintrc.json delete mode 100644 website/src/theme/ReactLiveScope/index.js create mode 100644 website/src/theme/ReactLiveScope/index.tsx diff --git a/benchmark/.eslintrc.json b/benchmark/.eslintrc.json deleted file mode 100644 index 7753f32e77..0000000000 --- a/benchmark/.eslintrc.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "rules": { - "no-console": 0 - } -} diff --git a/website/docs/basics/traversing.md b/website/docs/basics/traversing.md index b5531f085e..21df84794a 100644 --- a/website/docs/basics/traversing.md +++ b/website/docs/basics/traversing.md @@ -49,7 +49,7 @@ const $ = cheerio.load( ); const listItems = $('ul').find('li'); -render(`List item count: ${listItems.length}`); +render(<>List item count: {listItems.length}); ``` ### `children` @@ -70,7 +70,7 @@ const $ = cheerio.load( ); const listItems = $('ul').children('li'); -render(`List item count: ${listItems.length}`); +render(<>List item count: {listItems.length}); ``` ### `contents` @@ -90,7 +90,7 @@ const $ = cheerio.load( ); const contents = $('div').contents(); -render(`Contents count: ${contents.length}`); +render(<>Contents count: {contents.length}); ``` ## Moving Up the DOM Tree @@ -115,7 +115,7 @@ const $ = cheerio.load( ); const list = $('li').parent(); -render(list.prop('tagName')); +render(<>{list.prop('tagName')}); ``` ### `parents` and `parentsUntil` @@ -145,7 +145,12 @@ const ancestors = $('li').parents(); const ancestorsUntil = $('li').parentsUntil('div'); render( - `Ancestor count (also includes and ): ${ancestors.length} | Ancestor count (until
): ${ancestorsUntil.length}`, + <> +

+ Ancestor count (also includes "body" and "html" tags): {ancestors.length} +

+

Ancestor count (until "div"): {ancestorsUntil.length}

+ , ); ``` @@ -169,7 +174,7 @@ const $ = cheerio.load( ); const list = $('li').closest('ul'); -render(list.prop('tagName')); +render(<>{list.prop('tagName')}); ``` ## Moving Sideways Within the DOM Tree @@ -202,7 +207,12 @@ const $ = cheerio.load( const nextItem = $('li:first').next(); const prevItem = $('li:eq(1)').prev(); -render(`Next: ${nextItem.text()} | Prev: ${prevItem.text()}`); +render( + <> +

Next: {nextItem.text()}

+

Prev: {prevItem.text()}

+ , +); ``` ## `nextAll`, `prevAll`, and `siblings` @@ -237,7 +247,11 @@ const prevAll = $('li:last').prevAll(); const siblings = $('li:eq(1)').siblings(); render( - `Next All: ${nextAll.text()} | Prev All: ${prevAll.text()} | Siblings: ${siblings.text()}`, + <> +

Next All: {nextAll.text()}

+

Prev All: {prevAll.text()}

+

Siblings: {siblings.text()}

+ , ); ``` @@ -270,7 +284,12 @@ const $ = cheerio.load( const nextUntil = $('li:first').nextUntil('li:last-child'); const prevUntil = $('li:last').prevUntil('li:first-child'); -render(`Next: ${nextUntil.text()} | Prev: ${prevUntil.text()}`); +render( + <> +

Next: {nextUntil.text()}

+

Prev: {prevUntil.text()}

+ , +); ``` ## Filtering elements @@ -303,7 +322,7 @@ const $ = cheerio.load( ); const secondItem = $('li').eq(1); -render(secondItem.text()); +render(<>{secondItem.text()}); ``` ### `filter` and `not` @@ -332,7 +351,10 @@ const matchingItems = $('li').filter('.item'); const nonMatchingItems = $('li').not('.item'); render( - `Matching: ${matchingItems.text()} | Non-matching: ${nonMatchingItems.text()}`, + <> +

Matching: {matchingItems.text()}

+

Non-matching: {nonMatchingItems.text()}

+ , ); ``` @@ -357,7 +379,7 @@ const $ = cheerio.load( ); const matchingItems = $('li').has('strong'); -render(matchingItems.length); +render(<>{matchingItems.length}); ``` ### `first` and `last` @@ -384,7 +406,12 @@ const $ = cheerio.load( const firstItem = $('li').first(); const lastItem = $('li').last(); -render(`First: ${firstItem.text()} | Last: ${lastItem.text()}`); +render( + <> +

First: {firstItem.text()}

+

Last: {lastItem.text()}

+ , +); ``` ## Conclusion diff --git a/website/src/theme/ReactLiveScope/index.js b/website/src/theme/ReactLiveScope/index.js deleted file mode 100644 index 8f0aea00f3..0000000000 --- a/website/src/theme/ReactLiveScope/index.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import * as cheerio from '../../../../dist/browser/index.js'; - -// Add react-live imports you need here -const ReactLiveScope = { - React, - cheerio, - // @ts-expect-error - `render` is not part of the React types - show: (x) => React.render(JSON.stringify(x, null, 2)), - ...React, -}; -export default ReactLiveScope; diff --git a/website/src/theme/ReactLiveScope/index.tsx b/website/src/theme/ReactLiveScope/index.tsx new file mode 100644 index 0000000000..22db634f0d --- /dev/null +++ b/website/src/theme/ReactLiveScope/index.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import * as cheerio from '../../../../dist/browser'; + +// Add react-live imports you need here +const ReactLiveScope = { + cheerio, + React, + ...React, +}; + +export default ReactLiveScope;