🐎 charge la coloration syntaxique uniquement si besoin

- 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
2020-06-03 17:53:37 +02:00 · 2020-06-03 17:53:37 +02:00 · d3fb23b2bb
parent 18c0e2958a
commit d3fb23b2bb
11 changed files with 162 additions and 91 deletions
--- a/mon-entreprise/source/components/SyntaxHighlighter.tsx
+++ 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 (
+		<>
+			<PrismLight language={language} style={style}>
+				{source}
+			</PrismLight>
+		</>
+	)
+}
--- 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;
+}
--- 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' ? (
-		<PublicodeHighlighter source={value} />
-	) : (
-		<SyntaxHighlighter language={language} style={style}>
-			{value}
-		</SyntaxHighlighter>
-	)
+const LazySyntaxHighlighter = React.lazy(() => import('../SyntaxHighlighter'))
+const CodeBlock = ({
+	value,
+	language
+}: {
+	value: string
+	language: string
+}) => (
+	<div
+		css={`
+			position: relative;
+		`}
+	>
+		<Suspense
+			fallback={
+				<pre className="ui__ code">
+					<code>{value}</code>
+				</pre>
+			}
+		>
+			<LazySyntaxHighlighter language={language} source={value} />
+		</Suspense>
+		{language === 'yaml' && (
+			<a
+				href={`https://publi.codes/studio?code=${encodeURIComponent(value)}`}
+				target="_blank"
+				css="position: absolute; bottom: 5px; right: 10px; color: white !important;"
+			>
+				{emoji('⚡')} Lancer le calcul
+			</a>
+		)}
+	</div>
+)

 export const Markdown = ({
 	source,
--- 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() {
 			</ul>
 			{Object.entries(mecanisms).map(([name, data]) => (
 				<React.Fragment key={name}>
-					<MecanismExplanation {...(data as any)} name={name} />
+					<Explanation {...(data as any)} name={name} />
 					<Link to={pathname + '#top'}>Retour à la liste</Link>
 				</React.Fragment>
 			))}
 		</div>
 	)
 }
+
+type ExplanationProp = {
+	exemples: { base: string }
+	description: string
+	name: string
+}
+function Explanation({ name, description, exemples }: ExplanationProp) {
+	return (
+		<>
+			{!!name && (
+				<h2 id={name}>
+					<pre>{name}</pre>
+				</h2>
+			)}
+			<Markdown source={description} />
+			{exemples && (
+				<>
+					{Object.entries(exemples).map(([name, exemple]) => (
+						<React.Fragment key={name}>
+							<h3>{name === 'base' ? 'Exemple' : capitalise0(name)}</h3>
+							<Markdown source={`\`\`\`yaml\n${exemple}\n\`\`\``} />
+						</React.Fragment>
+					))}{' '}
+				</>
+			)}
+		</>
+	)
+}
--- 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"]
 }
--- 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"
 	},
--- 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' ? (
-		<PublicodeHighlighter source={value} />
+		<PublicodesBlock source={value} />
 	) : (
-		<code>{value}</code>
+		<pre>
+			<code>{value}</code>
+		</pre>
 	)

 const TextRenderer = ({ children }: { children: string }) => (
--- a/publicodes/source/components/PublicodeHighlighter.tsx
+++ b/publicodes/source/components/PublicodeHighlighter.tsx
@ -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 (
-			<div css="position: relative; margin-bottom: 1rem">
-				<SyntaxHighlighter language="yaml" style={style}>
-					{source}
-				</SyntaxHighlighter>
-				<a
-					href={`https://publi.codes/studio?code=${encodeURIComponent(source)}`}
-					target="_blank"
-					css="position: absolute; bottom: 5px; right: 10px; color: white !important;"
-				>
-					{emoji('⚡')} Lancer le calcul
-				</a>
-			</div>
-		)
-	}
-}
-
-export default Component ??
-	function() {
-		return null
-	}
--- a/publicodes/source/components/PublicodesBlock.tsx
+++ 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 (
+		<div
+			css={`
+				position: relative;
+			`}
+		>
+			<pre className="ui__ code">
+				<code>{source}</code>
+			</pre>
+			<a
+				href={`https://publi.codes/studio?code=${encodeURIComponent(source)}`}
+				target="_blank"
+				css={`
+					position: absolute;
+					bottom: 5px;
+					right: 10px;
+					color: white !important;
+				`}
+			>
+				{emoji('⚡')} Lancer le calcul
+			</a>
+		</div>
+	)
+}
--- 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<Rules extends string> = { dottedName: Rules; engine: Engine<Rules> }
 export default function RuleSource<Rules extends string>({
@ -14,7 +14,7 @@ export default function RuleSource<Rules extends string>({
 	return showSource ? (
 		<section>
 			<h3>Source publicode</h3>
-			<PublicodeHighlighter source={yaml.stringify({ [dottedName]: source })} />
+			<PublicodesBlock source={yaml.stringify({ [dottedName]: source })} />
 			<p className="ui__ notice">
 				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
--- 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"