✨ Optimisation du code

js-yaml est très lourd, utiliser react suspense
tree shaking sur ramda
react suspence pour le choix de couleur

package.json

@@ -4,7 +4,9 @@
 	"version": "0.0.7",
 	"description": "Library to compute the french social security contributions. Also a website that explains the calculations, and a generic engine to build similar simulators and computations.",
 	"main": "./dist/engine.js",
-	"files": ["dist/engine.js"],
+	"files": [
+		"dist/engine.js"
+	],
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/betagouv/syso.git"
@@ -12,7 +14,10 @@
 	"engines": {
 		"node": ">=8.10.0"
 	},
-	"browserslist": ["> 1% in FR", "not ie < 11"],
+	"browserslist": [
+		"> 1% in FR",
+		"not ie < 11"
+	],
 	"dependencies": {
 		"@researchgate/react-intersection-observer": "^0.7.3",
 		"classnames": "^2.2.5",
@@ -55,6 +60,7 @@
 	},
 	"scripts": {
 		"compile": "webpack --config source/webpack.prod.js",
+		"stats": "webpack --config source/webpack.prod.js --profile --json > stats.json",
 		"serve:embauche": "cp dist/embauche.html dist/index.html && serve -s dist",
 		"eslint-check": "eslint --print-config .eslintrc | eslint-config-prettier-check",
 		"eslint": "LIST=`git diff --cached --name-only --diff-filter=AMR HEAD | grep .*\\.js | grep -v json`; if [ \"$LIST\" ]; then eslint $LIST; fi",
@@ -86,6 +92,7 @@
 		"autoprefixer": "^9.3.1",
 		"babel-eslint": "^9.0.0",
 		"babel-loader": "^8.0.2",
+		"babel-plugin-ramda": "^1.6.3",
 		"babel-plugin-syntax-dynamic-import": "^6.18.0",
 		"babel-plugin-transform-do-expressions": "^6.22.0",
 		"babel-plugin-webpack-alias": "^2.1.2",
@@ -136,7 +143,7 @@
 		"style-loader": "^0.23.1",
 		"url-loader": "^1.0.1",
 		"webpack": "^4.26.0",
-		"webpack-cli": "^3.1.1",
+		"webpack-cli": "^3.1.2",
 		"webpack-dev-middleware": "^3.4.0",
 		"webpack-hot-middleware": "^2.24.2",
 		"webpack-pwa-manifest": "^3.6.2",

source/.babelrc

@@ -20,5 +20,8 @@
 		"syntax-dynamic-import",
 		"react-hot-loader/babel",
 		["webpack-alias", { "config": "./source/webpack.dev.js" }]
+		,  ["ramda", {
+      "useES": true
+    }]
 	]
 }

source/components/rule/Rule.js

@@ -8,7 +8,7 @@ import {
 	findRuleByNamespace
 } from 'Engine/rules'
 import { compose, isEmpty } from 'ramda'
-import React, { Component } from 'react'
+import React, { Component, Suspense } from 'react'
 import Helmet from 'react-helmet'
 import { Trans, withI18n } from 'react-i18next'
 import { connect } from 'react-redux'
@@ -28,7 +28,8 @@ import './Rule.css'
 import { AttachDictionary } from '../AttachDictionary'
 import knownMecanisms from 'Engine/known-mecanisms.yaml'
 import emoji from 'react-easy-emoji'
-import Source from './RuleSource'
+
+let LazySource = React.lazy(() => import('./RuleSource'))
 
 export default compose(
 	connect((state, props) => ({
@@ -66,7 +67,9 @@ export default compose(
 					{this.state.viewSource ? (
 						<>
 							{this.renderToggleSourceButton()}
-							<Source dottedName={dottedName} />
+							<Suspense fallback={<div>Chargement du code source...</div>}>
+								<LazySource dottedName={dottedName} />
+							</Suspense>
 						</>
 					) : (
 						<div id="rule" className="ui__ container">

source/components/rule/RuleSource.js

@@ -1,10 +1,9 @@
-import React, { Component, Suspense } from 'react'
-import yaml from 'js-yaml'
+import React, { Component } from 'react'
+import { safeDump } from 'js-yaml'
 import rules from 'Règles/base.yaml'
 import emoji from 'react-easy-emoji'
 import { buildDottedName } from 'Engine/rules'
-
-let ColoredYaml = React.lazy(() => import('./ColoredYaml'))
+import ColoredYaml from './ColoredYaml'
 
 export default class RuleSource extends Component {
 	render() {
@@ -18,9 +17,7 @@ export default class RuleSource extends Component {
 					Code source <br />
 					<code>{dottedName}</code>
 				</h2>
-				<Suspense fallback={<div>Chargement du code source...</div>}>
-					<ColoredYaml source={yaml.safeDump(source)} />
-				</Suspense>
+				<ColoredYaml source={safeDump(source)} />
 			</div>
 		)
 	}

source/engine/index.js

@@ -6,7 +6,7 @@ import {
 	nestedSituationToPathMap,
 	enrichRule
 } from './rules'
-import yaml from 'js-yaml'
+import { safeLoad } from 'js-yaml'
 
 // The public evaluation function takes a nested object of input values
 let nestedSituationToStateSelector = rules => nestedSituation => dottedName =>
@@ -16,7 +16,7 @@ let nestedSituationToStateSelector = rules => nestedSituation => dottedName =>
 	}[dottedName])
 
 let enrichRules = input =>
-	(typeof input === 'string' ? yaml.safeLoad(input) : input).map(enrichRule)
+	(typeof input === 'string' ? safeLoad(input) : input).map(enrichRule)
 
 export default {
 	evaluate: (targetInput, nestedSituation, config) => {

source/engine/traverse.js

@@ -297,8 +297,8 @@ export let parseAll = flatRules => {
 
 let evaluateControls = blocking => (cache, parsedRules, situationGate) => {
 	return chain(({ controls, dottedName }) =>
-		controls
-			?.filter(({ level }) =>
+		(controls || [])
+			.filter(({ level }) =>
 				blocking
 					? level === 'bloquant' && situationGate(dottedName) != undefined
 					: level !== 'bloquant'

source/externalize.js

@@ -1,4 +1,4 @@
-var yaml = require('js-yaml')
+var { safeLoad, safeDump } = require('js-yaml')
 var fs = require('fs')
 var translate = require('google-translate-api')
 var path = require('path')
@@ -17,11 +17,11 @@ translate(
 		console.error(err)
 	})
 
-let rules = yaml.safeLoad(
+let rules = safeLoad(
 	fs.readFileSync(path.resolve('source/règles/base.yaml'), 'utf-8')
 )
 
-let currentExternalization = yaml.safeLoad(
+let currentExternalization = safeLoad(
 	fs.readFileSync(path.resolve(externalizationPath), 'utf-8')
 )
 
@@ -67,5 +67,5 @@ let promises = rules
 	)
 
 Promise.all(promises).then(resolved =>
-	fs.writeFileSync(externalizationPath, yaml.safeDump(R.mergeAll(resolved)))
+	fs.writeFileSync(externalizationPath, safeDump(R.mergeAll(resolved)))
 )

source/sites/embauche.gouv.fr/App.js

@@ -28,7 +28,6 @@ import Integration from './pages/Integration'
 import IntegrationTest from './pages/IntegrationTest'
 import Route404 from './pages/Route404'
 import RulesList from './pages/RulesList'
-import Source from './pages/Source'
 
 if (process.env.NODE_ENV === 'production') {
 	Raven.config(
@@ -80,7 +79,6 @@ class EmbaucheRoute extends Component {
 					<Redirect from="/simu/*" to="/" />
 					<Route path="/règles" component={RulesList} />
 					<Route path="/exemples" component={ExampleSituations} />
-					<Route path="/source" component={Source} />
 					<Route path="/mecanismes" component={Mecanisms} />
 					<Route path="/à-propos" component={About} />
 					<Route path="/intégrer" component={Integration} />

source/sites/embauche.gouv.fr/pages/ColorPicker.js

@@ -0,0 +1,6 @@
+import { SliderPicker } from 'react-color'
+import React from 'react'
+
+export default ({ couleur, changeColour }) => (
+	<SliderPicker color={couleur} onChangeComplete={changeColour} />
+)

source/sites/embauche.gouv.fr/pages/Couleur.js

@@ -1,8 +1,9 @@
-import React from 'react'
-import { SliderPicker } from 'react-color'
+import React, { Suspense } from 'react'
 import { connect } from 'react-redux'
 import Home from './Home'
 
+let LazyColorPicker = React.lazy(() => import('./ColorPicker'))
+
 export default connect(
 	state => ({ couleur: state.themeColours.colour }),
 	dispatch => ({
@@ -18,10 +19,12 @@ export default connect(
 						Visualisez sur cette page l’apparence du module pour différentes
 						couleurs principales.
 					</p>
-					<SliderPicker
-						color={this.props.couleur}
-						onChangeComplete={this.changeColour}
-					/>
+					<Suspense fallback={<div>Chargement...</div>}>
+						<LazyColorPicker
+							color={this.props.couleur}
+							onChangeComplete={this.changeColour}
+						/>
+					</Suspense>
 					<p className="indication">
 						La couleur sélectionnée, à déclarer comme attribut
 						&quot;data-couleur&quot; du script sur votre page est :{' '}

source/sites/embauche.gouv.fr/pages/Source.js

@@ -1,18 +0,0 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
-import { flatRulesSelector } from 'Selectors/analyseSelectors'
-import { render } from 'react-dom'
-import yaml from 'js-yaml'
-import rawRulesText from '!raw-loader!Règles/base.yaml'
-import rawRules from 'Règles/base.yaml'
-
-export default class Source extends Component {
-	render() {
-		return (
-			<div id="Source" className="ui__ container">
-				<h1>La sourceee</h1>
-				<div style={{ whiteSpace: 'pre-line' }}>{yaml.safeDump(rawRules)}</div>
-			</div>
-		)
-	}
-}

source/webpack.common.js

@@ -20,9 +20,9 @@ module.exports = {
 		}
 	},
 	entry: {
-		infrance: ['./source/sites/mycompanyinfrance.fr/entry.en.js'],
-		'mon-entreprise': ['./source/sites/mycompanyinfrance.fr/entry.fr.js'],
 		embauche: ['./source/sites/embauche.gouv.fr/entry.js'],
+		'mon-entreprise': ['./source/sites/mycompanyinfrance.fr/entry.fr.js'],
+		infrance: ['./source/sites/mycompanyinfrance.fr/entry.en.js'],
 
 		// To not introduce breaking into the iframe integration, we serve simulateur.js from a 'dist' subdirectory
 		'dist/simulateur': ['./source/sites/embauche.gouv.fr/iframe-script.js']

source/webpack.prod.js

@@ -81,7 +81,7 @@ module.exports = {
 				/^\/stats/,
 				/^\/robots\.txt$/,
 				/^\/sitemap\.infrance\.fr\.txt$/,
-				/^\/sitemap\.infrance\.en\.txt$/,
+				/^\/sitemap\.infrance\.en\.txt$/
 			]
 		}),
 		new PrerenderSPAPlugin({

test/conversation.test.js

@@ -1,7 +1,7 @@
 import { expect } from 'chai'
 import dedent from 'dedent-js'
 import { enrichRule, rulesFr as rules } from 'Engine/rules'
-import yaml from 'js-yaml'
+import { safeLoad } from 'js-yaml'
 import { assocPath, merge } from 'ramda'
 import reducers from 'Reducers/rootReducer'
 import { simulationTargetNames } from '../source/config'
@@ -116,7 +116,7 @@ describe('conversation', function() {
         - nom: cadre
           par défaut: non
       `,
-			rules = yaml.safeLoad(rawRules).map(enrichRule)
+			rules = safeLoad(rawRules).map(enrichRule)
 
 		let step1 = merge(baseState, {
 			targetNames: ['net']

test/inversion.test.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import dedent from 'dedent-js'
-import yaml from 'js-yaml'
+import { safeLoad } from 'js-yaml'
 import { collectMissingVariables } from '../source/engine/generateQuestions'
 import { enrichRule, rules as realRules } from '../source/engine/rules'
 import { analyse, analyseMany, parseAll } from '../source/engine/traverse'
@@ -20,7 +20,7 @@ describe('inversions', () => {
         - nom: brut
           format: euro
       `,
-			rules = parseAll(yaml.safeLoad(rawRules).map(enrichRule)),
+			rules = parseAll(safeLoad(rawRules).map(enrichRule)),
 			analysis = analyse(rules, 'net')(stateSelector)
 
 		expect(analysis.targets[0].nodeValue).to.be.closeTo(1771, 0.001)
@@ -44,7 +44,7 @@ describe('inversions', () => {
               avec:
                 - net
       `,
-			rules = parseAll(yaml.safeLoad(rawRules).map(enrichRule)),
+			rules = parseAll(safeLoad(rawRules).map(enrichRule)),
 			analysis = analyse(rules, 'brut')(stateSelector)
 
 		expect(analysis.targets[0].nodeValue).to.be.closeTo(
@@ -77,7 +77,7 @@ describe('inversions', () => {
           formule: 67 + brut
 
       `,
-			rules = parseAll(yaml.safeLoad(rawRules).map(enrichRule)),
+			rules = parseAll(safeLoad(rawRules).map(enrichRule)),
 			stateSelector = () => null,
 			analysis = analyse(rules, 'brut')(stateSelector),
 			missing = collectMissingVariables(analysis.targets)
@@ -126,7 +126,7 @@ describe('inversions', () => {
                 - sinon:
                     taux: 70%
       `,
-			rules = parseAll(yaml.safeLoad(rawRules).map(enrichRule)),
+			rules = parseAll(safeLoad(rawRules).map(enrichRule)),
 			stateSelector = name => ({ net: 2000 }[name]),
 			analysis = analyse(rules, 'brut')(stateSelector),
 			missing = collectMissingVariables(analysis.targets)
@@ -169,7 +169,7 @@ describe('inversions', () => {
           formule: 67 + brut
 
       `,
-			rules = parseAll(yaml.safeLoad(rawRules).map(enrichRule)),
+			rules = parseAll(safeLoad(rawRules).map(enrichRule)),
 			stateSelector = name => ({ net: 2000, cadre: 'oui' }[name]),
 			analysis = analyse(rules, 'total')(stateSelector),
 			missing = collectMissingVariables(analysis.targets)
@@ -210,7 +210,7 @@ it('complex inversion with composantes', () => {
               - net
               - total
     `,
-		rules = parseAll(yaml.safeLoad(rawRules).map(enrichRule)),
+		rules = parseAll(safeLoad(rawRules).map(enrichRule)),
 		stateSelector = name => ({ net: 2000 }[name]),
 		analysis = analyse(rules, 'total')(stateSelector),
 		missing = collectMissingVariables(analysis.targets)

test/selectorsttestTODO.js

@@ -1,6 +1,6 @@
 import { expect } from 'chai'
 import dedent from 'dedent-js'
-import yaml from 'js-yaml'
+import { safeLoad } from 'js-yaml'
 import { enrichRule } from '../source/engine/rules'
 import reduceSteps from '../source/reducers/reduceSteps'
 
@@ -108,7 +108,7 @@ describe('fold', function() {
         - nom: cadre
           par défaut: non
       `,
-			rules = yaml.safeLoad(rawRules).map(enrichRule),
+			rules = safeLoad(rawRules).map(enrichRule),
 			reducer = reduceSteps(rules, stateSelector)
 
 		var step1 = reducer(

yarn.lock

@@ -116,7 +116,7 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
-"@babel/helper-module-imports@^7.0.0":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.0.0-beta.40":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
   dependencies:
@@ -1450,6 +1450,13 @@ babel-loader@^8.0.2:
     mkdirp "^0.5.1"
     util.promisify "^1.0.0"
 
+babel-plugin-ramda@^1.6.3:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-ramda/-/babel-plugin-ramda-1.6.3.tgz#7afc0b40217f1cf197f0146c2f1eb2396e6c3631"
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0-beta.40"
+    ramda "0.x"
+
 babel-plugin-syntax-do-expressions@^6.8.0:
   version "6.13.0"
   resolved "http://registry.npmjs.org/babel-plugin-syntax-do-expressions/-/babel-plugin-syntax-do-expressions-6.13.0.tgz#5747756139aa26d390d09410b03744ba07e4796d"
@@ -6730,6 +6737,10 @@ ramda@0.24.1:
   version "0.24.1"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.24.1.tgz#c3b7755197f35b8dc3502228262c4c91ddb6b857"
 
+ramda@0.x:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.0.tgz#3cbe059f5c18fbc0eb86f2396ab1f8320705424c"
+
 ramda@>=0.15.0, ramda@^0.25.0:
   version "0.25.0"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.25.0.tgz#8fdf68231cffa90bc2f9460390a0cb74a29b29a9"
@@ -8573,7 +8584,7 @@ webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
 
-webpack-cli@^3.1.1:
+webpack-cli@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.1.2.tgz#17d7e01b77f89f884a2bbf9db545f0f6a648e746"
   dependencies: