From 2af373376fcafed1d1aa854232ee44e89a3f5b16 Mon Sep 17 00:00:00 2001 From: Mael Date: Tue, 20 Nov 2018 14:39:00 +0000 Subject: [PATCH] :sparkles: Optimisation du code MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit js-yaml est très lourd, utiliser react suspense tree shaking sur ramda react suspence pour le choix de couleur --- package.json | 13 ++++++++++--- source/.babelrc | 3 +++ source/components/rule/Rule.js | 9 ++++++--- source/components/rule/RuleSource.js | 11 ++++------- source/engine/index.js | 4 ++-- source/engine/traverse.js | 4 ++-- source/externalize.js | 8 ++++---- source/sites/embauche.gouv.fr/App.js | 2 -- .../embauche.gouv.fr/pages/ColorPicker.js | 6 ++++++ source/sites/embauche.gouv.fr/pages/Couleur.js | 15 +++++++++------ source/sites/embauche.gouv.fr/pages/Source.js | 18 ------------------ source/webpack.common.js | 4 ++-- source/webpack.prod.js | 2 +- test/conversation.test.js | 4 ++-- test/inversion.test.js | 14 +++++++------- test/selectorsttestTODO.js | 4 ++-- yarn.lock | 15 +++++++++++++-- 17 files changed, 73 insertions(+), 63 deletions(-) create mode 100644 source/sites/embauche.gouv.fr/pages/ColorPicker.js delete mode 100644 source/sites/embauche.gouv.fr/pages/Source.js diff --git a/package.json b/package.json index 490c8b0ad..bf844ecc8 100644 --- a/package.json +++ b/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", diff --git a/source/.babelrc b/source/.babelrc index d1fea7046..9e6b6486e 100644 --- a/source/.babelrc +++ b/source/.babelrc @@ -20,5 +20,8 @@ "syntax-dynamic-import", "react-hot-loader/babel", ["webpack-alias", { "config": "./source/webpack.dev.js" }] + , ["ramda", { + "useES": true + }] ] } diff --git a/source/components/rule/Rule.js b/source/components/rule/Rule.js index 07bd44e81..0d1228606 100644 --- a/source/components/rule/Rule.js +++ b/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()} - + Chargement du code source...}> + + ) : (
diff --git a/source/components/rule/RuleSource.js b/source/components/rule/RuleSource.js index 1a1287370..4d00e2b53 100644 --- a/source/components/rule/RuleSource.js +++ b/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
{dottedName} - Chargement du code source...
}> - - + ) } diff --git a/source/engine/index.js b/source/engine/index.js index 6c2cdd63e..6fa8daac8 100644 --- a/source/engine/index.js +++ b/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) => { diff --git a/source/engine/traverse.js b/source/engine/traverse.js index 3c3bd517c..861926d5f 100644 --- a/source/engine/traverse.js +++ b/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' diff --git a/source/externalize.js b/source/externalize.js index 0940e3894..d06968c4a 100644 --- a/source/externalize.js +++ b/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))) ) diff --git a/source/sites/embauche.gouv.fr/App.js b/source/sites/embauche.gouv.fr/App.js index 7f5125adf..245605627 100644 --- a/source/sites/embauche.gouv.fr/App.js +++ b/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 { - diff --git a/source/sites/embauche.gouv.fr/pages/ColorPicker.js b/source/sites/embauche.gouv.fr/pages/ColorPicker.js new file mode 100644 index 000000000..3f29ac9d2 --- /dev/null +++ b/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 }) => ( + +) diff --git a/source/sites/embauche.gouv.fr/pages/Couleur.js b/source/sites/embauche.gouv.fr/pages/Couleur.js index 01a65d669..cac527ed2 100644 --- a/source/sites/embauche.gouv.fr/pages/Couleur.js +++ b/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.

- + Chargement...}> + +

La couleur sélectionnée, à déclarer comme attribut "data-couleur" du script sur votre page est :{' '} diff --git a/source/sites/embauche.gouv.fr/pages/Source.js b/source/sites/embauche.gouv.fr/pages/Source.js deleted file mode 100644 index 522d993d2..000000000 --- a/source/sites/embauche.gouv.fr/pages/Source.js +++ /dev/null @@ -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 ( -

-

La sourceee

-
{yaml.safeDump(rawRules)}
-
- ) - } -} diff --git a/source/webpack.common.js b/source/webpack.common.js index 0a5499629..cc841ebc1 100644 --- a/source/webpack.common.js +++ b/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'] diff --git a/source/webpack.prod.js b/source/webpack.prod.js index 5e9116434..4d0e24537 100644 --- a/source/webpack.prod.js +++ b/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({ diff --git a/test/conversation.test.js b/test/conversation.test.js index 9c28a9ed2..a2ef5dec8 100644 --- a/test/conversation.test.js +++ b/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'] diff --git a/test/inversion.test.js b/test/inversion.test.js index e267a3247..29c3db049 100644 --- a/test/inversion.test.js +++ b/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) diff --git a/test/selectorsttestTODO.js b/test/selectorsttestTODO.js index 002c9bde5..246a843cd 100644 --- a/test/selectorsttestTODO.js +++ b/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( diff --git a/yarn.lock b/yarn.lock index 1b5e810e8..cf4da8f0f 100644 --- a/yarn.lock +++ b/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: