From d3fb23b2bb798eb0d08e1fa39724389952b7217e Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Wed, 3 Jun 2020 17:53:37 +0200 Subject: [PATCH] :racehorse: charge la coloration syntaxique uniquement si besoin MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - enlève la librairie react-syntax-highlighting des dépendances de publicodes - affiche un fallback avec le code source non coloré pendant le chargement de la librairie --- .../source/components/SyntaxHighlighter.tsx | 26 ++++++++++ mon-entreprise/source/components/ui/index.css | 33 ++++++++++++ .../source/components/utils/markdown.tsx | 51 ++++++++++++------- .../source/sites/publi.codes/Mécanismes.tsx | 33 +++++++++++- mon-entreprise/tsconfig.json | 6 +-- publicodes/package.json | 1 - publicodes/source/components/Markdown.tsx | 8 +-- .../components/PublicodeHighlighter.tsx | 35 ------------- .../source/components/PublicodesBlock.tsx | 28 ++++++++++ .../source/components/rule/RuleSource.tsx | 8 +-- yarn.lock | 24 --------- 11 files changed, 162 insertions(+), 91 deletions(-) create mode 100644 mon-entreprise/source/components/SyntaxHighlighter.tsx delete mode 100644 publicodes/source/components/PublicodeHighlighter.tsx create mode 100644 publicodes/source/components/PublicodesBlock.tsx diff --git a/mon-entreprise/source/components/SyntaxHighlighter.tsx b/mon-entreprise/source/components/SyntaxHighlighter.tsx new file mode 100644 index 000000000..fb196247a --- /dev/null +++ b/mon-entreprise/source/components/SyntaxHighlighter.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import { PrismLight } from 'react-syntax-highlighter' +import js from 'react-syntax-highlighter/dist/esm/languages/prism/javascript' +import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx' +import yaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml' +import style from 'react-syntax-highlighter/dist/esm/styles/prism/atom-dark' + +PrismLight.registerLanguage('js', js) +PrismLight.registerLanguage('jsx', jsx) +PrismLight.registerLanguage('yaml', yaml) + +export default function SyntaxHighlighter({ + source, + language +}: { + source: string + language: string +}) { + return ( + <> + + {source} + + + ) +} diff --git a/mon-entreprise/source/components/ui/index.css b/mon-entreprise/source/components/ui/index.css index 404a20d22..04ffe73aa 100644 --- a/mon-entreprise/source/components/ui/index.css +++ b/mon-entreprise/source/components/ui/index.css @@ -165,3 +165,36 @@ span.ui__.enumeration:not(:last-of-type)::after { box-shadow: 0px 1px 1px 1px #d9d9d9, 0 0 0 1px #d9d9d9; border-radius: 0.2rem; } + +pre.ui__.code { + color: rgb(197, 200, 198); + text-shadow: rgba(0, 0, 0, 0.3) 0px 1px; + font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + tab-size: 4; + hyphens: none; + padding: 1em; + margin: 0.5em 0px; + overflow: auto; + border-radius: 0.3em; + background: rgb(29, 31, 33); +} + +pre.ui__.code > code { + color: rgb(197, 200, 198); + text-shadow: rgba(0, 0, 0, 0.3) 0px 1px; + font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + tab-size: 4; + hyphens: none; +} diff --git a/mon-entreprise/source/components/utils/markdown.tsx b/mon-entreprise/source/components/utils/markdown.tsx index 4ac6533ae..d49c5806b 100644 --- a/mon-entreprise/source/components/utils/markdown.tsx +++ b/mon-entreprise/source/components/utils/markdown.tsx @@ -1,17 +1,9 @@ -import PublicodeHighlighter from '../../../../publicodes/source/components/PublicodeHighlighter' -import React, { useContext } from 'react' +import React, { Suspense, useContext } from 'react' import emoji from 'react-easy-emoji' import ReactMarkdown, { ReactMarkdownProps } from 'react-markdown' import { useLocation } from 'react-router-dom' import { HashLink as Link } from 'react-router-hash-link' import { SiteNameContext } from '../../Provider' -import js from 'react-syntax-highlighter/dist/esm/languages/prism/javascript' -import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx' -import style from 'react-syntax-highlighter/dist/esm/styles/prism/atom-dark' -import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter' - -SyntaxHighlighter.registerLanguage('js', js) -SyntaxHighlighter.registerLanguage('jsx', jsx) const internalURLs = { 'mon-entreprise.fr': 'mon-entreprise', @@ -64,14 +56,39 @@ type MarkdownProps = ReactMarkdownProps & { className?: string } -const CodeBlock = ({ value, language }: { value: string; language: string }) => - language === 'yaml' ? ( - - ) : ( - - {value} - - ) +const LazySyntaxHighlighter = React.lazy(() => import('../SyntaxHighlighter')) +const CodeBlock = ({ + value, + language +}: { + value: string + language: string +}) => ( +
+ + {value} + + } + > + + + {language === 'yaml' && ( + + {emoji('⚡')} Lancer le calcul + + )} +
+) export const Markdown = ({ source, diff --git a/mon-entreprise/source/sites/publi.codes/Mécanismes.tsx b/mon-entreprise/source/sites/publi.codes/Mécanismes.tsx index 12d0eefd0..9d6349384 100644 --- a/mon-entreprise/source/sites/publi.codes/Mécanismes.tsx +++ b/mon-entreprise/source/sites/publi.codes/Mécanismes.tsx @@ -1,9 +1,10 @@ +import { Markdown } from 'Components/utils/markdown' import { ScrollToTop } from 'Components/utils/Scroll' import React, { useEffect } from 'react' import { useLocation } from 'react-router-dom' import { HashLink as Link } from 'react-router-hash-link' import mecanisms from '../../../../publicodes/docs/mecanisms.yaml' -import MecanismExplanation from '../../../../publicodes/source/components/mecanisms/Explanation' +import { capitalise0 } from '../../utils' import { Header } from './Header' export default function Landing() { @@ -35,10 +36,38 @@ export default function Landing() { {Object.entries(mecanisms).map(([name, data]) => ( - + Retour à la liste ))} ) } + +type ExplanationProp = { + exemples: { base: string } + description: string + name: string +} +function Explanation({ name, description, exemples }: ExplanationProp) { + return ( + <> + {!!name && ( +

+ 
{name}
+

+ )} + + {exemples && ( + <> + {Object.entries(exemples).map(([name, exemple]) => ( + +

{name === 'base' ? 'Exemple' : capitalise0(name)}

+ + + ))}{' '} + + )} + + ) +} diff --git a/mon-entreprise/tsconfig.json b/mon-entreprise/tsconfig.json index 694e9bf83..1aa3bac10 100644 --- a/mon-entreprise/tsconfig.json +++ b/mon-entreprise/tsconfig.json @@ -15,9 +15,5 @@ }, "noEmit": true }, - "include": [ - "types", - "source", - "../publicodes/source/components/PublicodeHighlighter.tsx" - ] + "include": ["types", "source"] } diff --git a/publicodes/package.json b/publicodes/package.json index 7b62dc0a7..6c985423d 100644 --- a/publicodes/package.json +++ b/publicodes/package.json @@ -28,7 +28,6 @@ "react-i18next": "^11.4.0", "react-markdown": "^4.3.1", "focus-trap-react": "^3.1.2", - "react-syntax-highlighter": "^12.2.1", "styled-components": "^5.1.0", "yaml": "^1.9.2" }, diff --git a/publicodes/source/components/Markdown.tsx b/publicodes/source/components/Markdown.tsx index 3dfc6909e..807bc1917 100644 --- a/publicodes/source/components/Markdown.tsx +++ b/publicodes/source/components/Markdown.tsx @@ -4,7 +4,7 @@ import ReactMarkdown, { ReactMarkdownProps } from 'react-markdown' import { HashLink as Link } from 'react-router-hash-link' import { EngineContext } from './contexts' import { RuleLinkWithContext } from './RuleLink' -import PublicodeHighlighter from './PublicodeHighlighter' +import PublicodesBlock from './PublicodesBlock' export function LinkRenderer({ href, @@ -42,9 +42,11 @@ export function LinkRenderer({ const CodeBlock = ({ value, language }: { value: string; language: string }) => language === 'yaml' ? ( - + ) : ( - {value} + 
+			{value}
+
) const TextRenderer = ({ children }: { children: string }) => ( diff --git a/publicodes/source/components/PublicodeHighlighter.tsx b/publicodes/source/components/PublicodeHighlighter.tsx deleted file mode 100644 index b65f8c5da..000000000 --- a/publicodes/source/components/PublicodeHighlighter.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react' -import emoji from 'react-easy-emoji' - -let Component -if (process.env.NODE_ENV !== 'test') { - const yaml = require('react-syntax-highlighter/dist/esm/languages/prism/yaml') - .default - const style = require('react-syntax-highlighter/dist/esm/styles/prism/atom-dark') - .default - const SyntaxHighlighter = require('react-syntax-highlighter').PrismLight - - SyntaxHighlighter.registerLanguage('yaml', yaml) - - Component = function PublicodeHighlighter({ source }: { source: string }) { - return ( - - ) - } -} - -export default Component ?? - function() { - return null - } diff --git a/publicodes/source/components/PublicodesBlock.tsx b/publicodes/source/components/PublicodesBlock.tsx new file mode 100644 index 000000000..aeb9dbae9 --- /dev/null +++ b/publicodes/source/components/PublicodesBlock.tsx @@ -0,0 +1,28 @@ +import React from 'react' +import emoji from 'react-easy-emoji' + +export default function PublicodesBlock({ source }: { source: string }) { + return ( + + ) +} diff --git a/publicodes/source/components/rule/RuleSource.tsx b/publicodes/source/components/rule/RuleSource.tsx index e8c4ff601..731d27e0a 100644 --- a/publicodes/source/components/rule/RuleSource.tsx +++ b/publicodes/source/components/rule/RuleSource.tsx @@ -1,8 +1,8 @@ -import yaml from 'yaml' import React, { useState } from 'react' -import Engine from '../../index' -import PublicodeHighlighter from '../PublicodeHighlighter' import emoji from 'react-easy-emoji' +import yaml from 'yaml' +import Engine from '../../index' +import PublicodesBlock from '../PublicodesBlock' type Props = { dottedName: Rules; engine: Engine } export default function RuleSource({ @@ -14,7 +14,7 @@ export default function RuleSource({ return showSource ? (

Source publicode

- +

Ci-dessus la règle d'origine, écrite en publicodes. Publicodes est un langage déclaratif développé par beta.gouv.fr en partenariat avec diff --git a/yarn.lock b/yarn.lock index 6b9bf1e1c..eedf64b8d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5696,11 +5696,6 @@ highlight.js@~9.13.0: resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.13.1.tgz#054586d53a6863311168488a0f58d6c505ce641e" integrity sha512-Sc28JNQNDzaH6PORtRLMvif9RSn1mYuOoX3omVjnb0+HbpPygU2ALBI0R/wsiqCb4/fcp07Gdo8g+fhtFrQl6A== -highlight.js@~9.15.0, highlight.js@~9.15.1: - version "9.15.10" - resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.10.tgz#7b18ed75c90348c045eef9ed08ca1319a2219ad2" - integrity sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw== - history@^4.9.0: version "4.10.1" resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3" @@ -7549,14 +7544,6 @@ lower-case@^1.1.1: resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac" integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw= -lowlight@1.12.1: - version "1.12.1" - resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.12.1.tgz#014acf8dd73a370e02ff1cc61debcde3bb1681eb" - integrity sha512-OqaVxMGIESnawn+TU/QMV5BJLbUghUfjDWPAtFqDYDmDtr4FnB+op8xM+pR7nKlauHNUHXGt0VgWatFB8voS5w== - dependencies: - fault "^1.0.2" - highlight.js "~9.15.0" - lowlight@~1.11.0: version "1.11.0" resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.11.0.tgz#1304d83005126d4e8b1dc0f07981e9b689ec2efc" @@ -9757,17 +9744,6 @@ react-syntax-highlighter@^10.1.1: prismjs "^1.8.4" refractor "^2.4.1" -react-syntax-highlighter@^12.2.1: - version "12.2.1" - resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-12.2.1.tgz#14d78352da1c1c3f93c6698b70ec7c706b83493e" - integrity sha512-CTsp0ZWijwKRYFg9xhkWD4DSpQqE4vb2NKVMdPAkomnILSmsNBHE0n5GuI5zB+PU3ySVvXvdt9jo+ViD9XibCA== - dependencies: - "@babel/runtime" "^7.3.1" - highlight.js "~9.15.1" - lowlight "1.12.1" - prismjs "^1.8.4" - refractor "^2.4.1" - react-test-renderer@^16.0.0-0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.13.1.tgz#de25ea358d9012606de51e012d9742e7f0deabc1"