publiccode-parser integration using wasm+go

package.json

@@ -42,6 +42,7 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-3": "^6.24.1",
     "babel-runtime": "^6.26.0",
+    "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^2.1.1",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
@@ -66,6 +67,7 @@
     "webpack": "^4.29.6",
     "webpack-cli": "^3.2.3",
     "webpack-dev-server": "^3.2.1",
+    "worker-loader": "^3.0.8",
     "yaml-validator": "^2.0.0"
   },
   "dependencies": {

src/app/app.js

@@ -3,7 +3,6 @@ import { render } from "react-dom";
 import store from "./store/index";
 import { Provider } from "react-redux";
 import Layout from "./components/_layout";
-// import Index from "./components/index";
 import Index from "./components/editor";
 
 import "bootstrap";
@@ -16,24 +15,28 @@ export default class App extends Component {
     super(props);
     this.handleLoading = this.handleLoading.bind(this);
     this.state = {
-      loadingRemote: false
+      loadingRemote: false,
     };
   }
 
   handleLoading(isLoading) {
-    this.setState({loadingRemote: isLoading})
+    this.setState({ loadingRemote: isLoading });
   }
 
   render() {
     return (
       <Provider store={store}>
         {this.state.loadingRemote && (
-        <div className="d-flex align-items-center col-12 position-absolute h-100 w-100">
-          <div className="mr-auto ml-auto">
-            <h3>Validazione in corso</h3>
-            <div className="spinner-grow text-primary" role="status" aria-hidden="true"></div>
+          <div className="d-flex align-items-center col-12 position-absolute h-100 w-100">
+            <div className="mr-auto ml-auto">
+              <h3>Validazione in corso</h3>
+              <div
+                className="spinner-grow text-primary"
+                role="status"
+                aria-hidden="true"
+              ></div>
+            </div>
           </div>
-        </div>
         )}
         <Layout loadingRemote={this.state.loadingRemote}>
           <Index onLoadingRemote={this.handleLoading} />

src/app/components/editor.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from "react";
 import { connect } from "react-redux";
-import { initialize, submit, SubmissionError } from "redux-form";
+import { initialize, submit, SubmissionError, stopSubmit } from "redux-form";
 import { notify } from "../store/notifications";
 import { setVersions } from "../store/cache";
 import { APP_FORM } from "../contents/constants";
@@ -41,7 +41,8 @@ const mapDispatchToProps = dispatch => {
     initialize: (name, data) => dispatch(initialize(name, data)),
     submit: name => dispatch(submit(name)),
     notify: data => dispatch(notify(data)),
-    setVersions: data => dispatch(setVersions(data))
+    setVersions: data => dispatch(setVersions(data)),
+    setValidationErrors: errors => dispatch(stopSubmit(APP_FORM ,errors))
   };
 };
 
@@ -80,7 +81,7 @@ class Index extends Component {
   }
 
   async componentDidMount() {
-    await this.initData();
+    // await this.initData();
     this.switchLang("it");
     this.switchCountry("it");
 
@@ -145,59 +146,19 @@ class Index extends Component {
     if (country) this.switchCountry(country);
   }
 
-  // eslint-disable-next-line no-unused-vars
-  generate(formValues) {
-    let lastGen = moment();
-    this.setState({ loading: true, lastGen });
-    //has state
-    let { values, country, elements } = this.state;
-    //values[currentLanguage] = formValues;
-    let obj = ft.transform(values, country, elements);
-
-    // let errors = await fv.validatePubliccodeYml(obj);
-    // if (errors) alert(errors);
-
-    //SET  TIMESTAMP
-    this.showResults(obj);
-  }
-
-
-
-  validateExt(response) {
-    let r = response.json();
-    if (response.ok) {
-      return r;
-    } else {
-      //status for validation error
-      if (response.status == 422) {
-        return r.then(() => {
-          console.log('validation not ok');
-          throw new SubmissionError(r);
-        });
-      } else {
-        //other response failure, try to use internal validator then.
-        console.error('some network failure occured');
-        throw new Error('generic erorr')
-      }
-    }
-  }
-
   /**
    *
    * @param {form data} formValues
    */
   validateAndGenerate(formValues) {
     let lastGen = moment();
-    // let errors = {};
 
     this.setState({ loading: true, lastGen });
     this.props.onLoadingRemote(true);
     //has state
     let { values, country, elements, languages } = this.state;
     let currentLanguage = languages ? languages[0] : null;
 
-    // console.log(formValues, values);
-
     values[currentLanguage] = formValues;
     let obj = ft.transform(values, country, elements);
 
@@ -208,100 +169,75 @@ class Index extends Component {
     //  Object.assign(obj, staticFieldsJson)
     //  something weird occur.
     //  needs to investigate further
-    obj['publiccodeYmlVersion'] = '0.2';
-
-    return postDataForValidation(obj)
-      .then(this.validateExt)
-      .then(v => {
-        //  everything fine
-        // console.log(v);
-
-        this.setState({ loading: false });
-        this.props.onLoadingRemote(false);
-        // removing empty object
-        // which caused a object {} in yaml results
-        return this.showResults(this.removeEmpty(v));
-      })
-      .catch(e => {
-        if (e instanceof SubmissionError) {
-          return e.errors.then(r => {
-            let errorObj = {};
-            r.map(x => {
-              //replacing all string with * language
-              let key = x.Key.replace(/\/\*\//gi, '_');
-
-              //replacing separator section from field
-              key = key.replace(/\//gi, '_'); //replace / with _
-
-              //BUG
-              //removing language
-              //this issue is well known: editor do not validate multi language
-              //pc since its fields are not named following a lang sintax
-              key = key.replace(/_it_/gi, '_'); //replace _it_ with _
-
-              //description appear when a language is not set
-              //avoided for the moment
-              if (key != 'description')
-                errorObj[key] = x.Reason;
-            });
-            // console.log(errorObj);
-
-            //errors are now taken from state, see line 507 for details
-            // this.props.form[APP_FORM].submitErrors = errorObj
-
-            //errors are in state now
-            //but in sidebar are rendered from form.submitErrors
-            //state there is not updated
-            this.setState({
-              errors: errorObj,
-              loading: false
-            })
-            this.props.onLoadingRemote(false);
+    obj.publiccodeYmlVersion = '0.2';
+    // hack to get all description subfield validated
+    if(!obj.description) {
+      obj.description = {};
+      languages.map(x => obj.description[x] = {});
+    }
 
-            throw new SubmissionError(errorObj);
-          })
-        } else {
-          //generic error use internal validator
-          console.error('Generic error with remote validation, using local instead', e);
-
-          //BUG
-          //not working at the moment
-          //need to figure out why _error subkeys
-          //cause a crash
-          //this will cause a wrong validation for subkeys
-          let errorObj = this.validate(formValues);
-          let err = {};
-          Object.keys(errorObj).forEach(x => {
-            if (!errorObj[x]._error)
-              err[x] = errorObj[x];
-          });
-          console.log(err);
+    const validatorWorker = postDataForValidation(obj);
+    validatorWorker.onmessage = (e) => {    
+      if (e && e.data && e.data.validator) {
+        const validator = JSON.parse(e.data.validator);
+        console.log(validator);
 
+        if (validator.status === "ok") {
+          this.setState({ loading: false });
+          this.props.onLoadingRemote(false);
+          return this.showResults(obj);
+        } else {
+          let errors = Object.fromEntries(
+            validator.errors.map((x) => {
+              const key = x.key.replace(/\.it\./gi, "_").replace(/\./gi, "_");
+              return [[key], x.description];
+            })
+          );
+          console.log(errors);
           this.setState({
+            errors,
             loading: false
-          })
+          });
           this.props.onLoadingRemote(false);
-
-          if (Object.keys(err).length === 0 && err.constructor === Object) {
-            this.showResults(obj);
-          } else {
-            this.setState({
-              errors: err
-            })
-            throw new SubmissionError(err);
-          }
+          this.props.setValidationErrors(errors)
         }
-      });
+      } else {
+        this.useLocalValidation(formValues, obj);
+      }
+    }
   }
 
-  removeEmpty(obj) {
-    // looking forward to replace with bind()
-    const that = this;
-    Object.keys(obj).forEach(function (key) {
-      (Object.keys(obj[key]).length === 0 && obj[key].constructor === Object) && delete obj[key] ||
-        (obj[key] && typeof obj[key] === 'object') && that.removeEmpty(obj[key])
+  // fallback validation
+  useLocalValidation(formValues, obj) {
+    //generic error use internal validator
+    console.error('Generic error with remote validation, using local instead');
+
+    //BUG
+    //not working at the moment
+    //need to figure out why _error subkeys
+    //cause a crash
+    //this will cause a wrong validation for subkeys
+    let errorObj = this.validate(formValues);
+    let err = {};
+    Object.keys(errorObj).forEach(x => {
+      if (!errorObj[x]._error)
+        err[x] = errorObj[x];
     });
-    return obj;
+    console.log(err);
+
+    this.setState({
+      loading: false
+    })
+    this.props.onLoadingRemote(false);
+
+    if (Object.keys(err).length === 0 && err.constructor === Object) {
+      this.showResults(obj);
+    } else {
+      this.setState({
+        errors: err
+      })
+      throw new SubmissionError(err);
+    }
   }
 
   showResults(values) {
@@ -334,7 +270,6 @@ class Index extends Component {
       yamlLoaded = false;
     }
 
-
     this.props.notify({ type, title, msg, millis });
     //this.scrollToError(errors)
     this.setState({ yaml, yamlLoaded });
@@ -359,7 +294,6 @@ class Index extends Component {
     errors = Object.assign(required, objs_n_arrays);
     console.log(contents, errors);
 
-
     //UPDATE STATE
     values[currentLanguage] = contents;
     this.setState({
@@ -528,7 +462,7 @@ class Index extends Component {
     } else {
       console.warn("inviewport");
     }
-    this.setState({ activeSection: activeSection });
+    this.setState({ activeSection });
   }
 
   render() {
@@ -568,7 +502,7 @@ class Index extends Component {
                   // onSubmit={this.generate.bind(this)}
                   onSubmit={this.validateAndGenerate.bind(this)}
                   data={blocks}
-                  // validate={this.validate.bind(this)}
+                  // asyncValidate={this.validateWasm.bind(this)}
                   country={country}
                   switchCountry={this.switchCountry.bind(this)}
                   errors={errors}

src/app/components/editorForm.js

@@ -10,19 +10,6 @@ import img_accordion_open from "../../asset/img/accordion-open.svg";
 import img_accordion_closed from "../../asset/img/accordion-closed.svg";
 import { getFieldByTitle } from "../contents/data";
 
-// eslint-disable-next-line no-unused-vars
-const renderBlocksSimple = blocks => {
-  return blocks.map((block, i) => (
-    <div className="block__wrapper" key={`block_${i}`}>
-      <div className="block_heading">
-        <div className="block_heading_oval">{block.index}</div>
-        <div className="block_heading_title">{block.title}</div>
-      </div>
-      <div className="block collapse">{renderBlockItems(block.items, i)}</div>
-    </div>
-  ));
-};
-
 const renderBlockItems = (items, id) => {
   return items.map((item, i) => {
     // getField(item);
@@ -86,12 +73,8 @@ const renderBlocks = (
 };
 
 const EditForm = props => {
-  /* eslint-disable no-unused-vars */
   const {
     handleSubmit,
-    pristine,
-    reset,
-    submitting,
     data,
     errors,
     activeSection,
@@ -100,7 +83,6 @@ const EditForm = props => {
     allFields,
     submitFailed
   } = props;
-  /* eslint-enable no-unused-vars */
 
   let countryProps = { country, switchCountry };
 

src/app/components/languageSwitcher.js

@@ -1,6 +1,5 @@
 import React, { Component } from "react";
 import available_languages from "../contents/langs";
-//const available_languages = ["ita", "eng", "fra", "zho"];
 import CloseButton from "./CloseButton";
 
 export default class languageSwitcher extends Component {