From 333d1cbc90681d0126308b6fafd7cf0dc729cf75 Mon Sep 17 00:00:00 2001 From: Mael Date: Wed, 17 Oct 2018 17:27:35 +0000 Subject: [PATCH] =?UTF-8?q?WIP=20affichage=20du=20code=20source=20de=20/r?= =?UTF-8?q?=C3=A8gle=20dans=20monaco=20editor?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Intérêt : explorer la base de règle facilement, par namespace. Ne pas merger sans faire en sorte que ça soit complètement chargé dynamiquement, car l'éditeur doit faire plusieurs mega. --- package.json | 12 +++++-- source/sites/embauche.gouv.fr/App.js | 2 ++ source/sites/embauche.gouv.fr/pages/Source.js | 31 ++++++++++++++++ source/webpack.common.js | 4 ++- yarn.lock | 35 +++++++++++++++++++ 5 files changed, 81 insertions(+), 3 deletions(-) create mode 100644 source/sites/embauche.gouv.fr/pages/Source.js diff --git a/package.json b/package.json index 9a1c5e94f..5107137fd 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", @@ -36,6 +41,7 @@ "react-highlight-words": "^0.11.0", "react-hot-loader": "^4.3.11", "react-i18next": "^7.13.0", + "react-monaco-editor": "^0.19.0", "react-redux": "^5.0.7", "react-router": "^4.2.0", "react-router-dom": "^4.2.2", @@ -124,9 +130,11 @@ "mocha": "^5.0.4", "mocha-webpack": "^2.0.0-beta.0", "mock-local-storage": "^1.0.5", + "monaco-editor-webpack-plugin": "^1.5.4", "nearley-loader": "^2.0.0", "postcss-loader": "^2.1.2", "ramda-fantasy": "^0.8.0", + "raw-loader": "^0.5.1", "serve": "^10.0.2", "sinon": "^4.5.0", "sinon-chai": "^3.0.0", diff --git a/source/sites/embauche.gouv.fr/App.js b/source/sites/embauche.gouv.fr/App.js index b75520da4..681ebba5f 100644 --- a/source/sites/embauche.gouv.fr/App.js +++ b/source/sites/embauche.gouv.fr/App.js @@ -28,6 +28,7 @@ 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( @@ -78,6 +79,7 @@ class EmbaucheRoute extends Component { + diff --git a/source/sites/embauche.gouv.fr/pages/Source.js b/source/sites/embauche.gouv.fr/pages/Source.js new file mode 100644 index 000000000..1ccad409a --- /dev/null +++ b/source/sites/embauche.gouv.fr/pages/Source.js @@ -0,0 +1,31 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' +import { flatRulesSelector } from 'Selectors/analyseSelectors' +import { render } from 'react-dom' +import MonacoEditor from 'react-monaco-editor' +import yaml from 'js-yaml' +import rawRules from '!raw-loader!Règles/base.yaml' + +@connect(state => ({ + flatRules: flatRulesSelector(state) +})) +export default class Source extends Component { + state = { + code: rawRules + } + render() { + let { flatRules } = this.props + return ( +
+

La source

+ +
+ ) + } +} diff --git a/source/webpack.common.js b/source/webpack.common.js index 8e672164e..d14e5e249 100644 --- a/source/webpack.common.js +++ b/source/webpack.common.js @@ -3,6 +3,7 @@ const HTMLPlugin = require('html-webpack-plugin') const CopyPlugin = require('copy-webpack-plugin') const path = require('path') const { universal, web } = require('./webpack.commonLoaders.js') +const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin') module.exports = { resolve: { @@ -67,6 +68,7 @@ module.exports = { from: './source/sites/mycompanyinfrance.fr/sitemap.txt', to: 'sitemap.infrance.txt' } - ]) + ]), + new MonacoWebpackPlugin() ] } diff --git a/yarn.lock b/yarn.lock index 3c18eb997..ef0451c35 100644 --- a/yarn.lock +++ b/yarn.lock @@ -733,6 +733,17 @@ version "10.11.0" resolved "https://registry.yarnpkg.com/@types/node/-/node-10.11.0.tgz#ddd0d67a3b6c3810dd1a59e36675fa82de5e19ae" +"@types/prop-types@*": + version "15.5.6" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.6.tgz#9c03d3fed70a8d517c191b7734da2879b50ca26c" + +"@types/react@*": + version "16.4.18" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.18.tgz#2e28a2e7f92d3fa7d6a65f2b73275c3e3138a13d" + dependencies: + "@types/prop-types" "*" + csstype "^2.2.0" + "@types/sinon-chai@2.7.29": version "2.7.29" resolved "https://registry.yarnpkg.com/@types/sinon-chai/-/sinon-chai-2.7.29.tgz#4db01497e2dd1908b2bd30d1782f456353f5f723" @@ -2496,6 +2507,10 @@ cssstyle@^1.0.0: dependencies: cssom "0.3.x" +csstype@^2.2.0: + version "2.5.7" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.5.7.tgz#bf9235d5872141eccfb2d16d82993c6b149179ff" + csv-loader@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/csv-loader/-/csv-loader-2.1.1.tgz#f71d46080cc8cbc0b4170720e2992f2f1e2d7c46" @@ -5291,6 +5306,14 @@ mock-local-storage@^1.0.5: core-js "^0.8.3" global "^4.3.2" +monaco-editor-webpack-plugin@^1.5.4: + version "1.5.4" + resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-1.5.4.tgz#6781a130e3e1379bb8f4cd190132f4af6dcd2c16" + +monaco-editor@^0.14.2: + version "0.14.3" + resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.14.3.tgz#7cc4a4096a3821f52fea9b10489b527ef3034e22" + moo@^0.4.3: version "0.4.3" resolved "https://registry.yarnpkg.com/moo/-/moo-0.4.3.tgz#3f847a26f31cf625a956a87f2b10fbc013bfd10e" @@ -6480,6 +6503,10 @@ raw-body@2.3.2: iconv-lite "0.4.19" unpipe "1.0.0" +raw-loader@^0.5.1: + version "0.5.1" + resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa" + rc-progress@^2.2.6: version "2.2.6" resolved "https://registry.yarnpkg.com/rc-progress/-/rc-progress-2.2.6.tgz#d5d07c07333b352a9ef13230c5940e13336c1e62" @@ -6577,6 +6604,14 @@ react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" +react-monaco-editor@^0.19.0: + version "0.19.0" + resolved "https://registry.yarnpkg.com/react-monaco-editor/-/react-monaco-editor-0.19.0.tgz#e3b720056ed2ee34a0ae430bfd780fbf944712f8" + dependencies: + "@types/react" "*" + monaco-editor "^0.14.2" + prop-types "^15.6.2" + react-redux@^5.0.7: version "5.0.7" resolved "http://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"