[New #94] Migrating to microbundle

kbss-cvut · Mar 1, 2022 · 63612f6 · 63612f6
1 parent 3df1743
commit 63612f6
Show file tree

Hide file tree

Showing 13 changed files with 82 additions and 15,103 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "s-forms",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Semantic forms generator and processor",
   "keywords": [
     "react",
@@ -34,6 +34,12 @@
     "type": "git",
     "url": "https://kbss.felk.cvut.cz/git/s-forms.git"
   },
+  "type": "module",
+  "source": "src/s-forms.js",
+  "exports": "./dist/s-forms.modern.js",
+  "module": "./dist/s-forms.js",
+  "unpkg": "./dist/s-forms.umd.js",
+  "private": true,
   "dependencies": {
     "@triply/yasgui": "^4.2.14",
     "babel-runtime": "^6.26.0",
@@ -45,6 +51,7 @@
     "javascript-time-ago": "^2.3.8",
     "jsonld": "^0.4.12",
     "jsonld-utils": "https://kbss.felk.cvut.cz/dist/jsonld-utils-0.0.11.tgz",
+    "microbundle": "^0.14.2",
     "prop-types": "^15.7.2",
     "react-bootstrap": "1.0.1",
     "react-datepicker": "^4.2.1",
@@ -55,11 +62,12 @@
     "yasgui-yasqe": "^2.11.22"
   },
   "peerDependencies": {
+    "framer-motion": "^6.2.3",
+    "javascript-time-ago": "^2.3.8",
     "react": ">= 17.0.2",
+    "react-bootstrap": "1.0.1",
     "react-dom": ">= 17.0.2"
   },
-  "main": "dist/s-forms.js",
-  "private": true,
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.6",
@@ -68,8 +76,15 @@
     "@babel/plugin-transform-runtime": "^7.9.6",
     "@babel/preset-env": "^7.9.6",
     "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.16.7",
     "@babel/register": "^7.10.3",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^21.0.2",
+    "@types/jest": "^27.4.0",
     "@types/jsonld": "^1.5.1",
+    "@types/node": "^17.0.12",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "babel-jest": "^26.0.1",
     "babel-loader": "^8.1.0",
@@ -83,22 +98,17 @@
     "react": "~17.0.2",
     "react-dom": "~17.0.2",
     "style-loader": "^1.2.1",
+    "typescript": "^4.5.5",
     "watchify": "^3.11.1",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3",
-    "webpack-node-externals": "^1.7.2",
-    "@types/jest": "^27.4.0",
-    "@types/node": "^17.0.12",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
-    "typescript": "^4.5.5",
-    "@babel/preset-typescript": "^7.16.7"
+    "webpack-node-externals": "^1.7.2"
   },
   "scripts": {
     "test": "jest",
-    "dev": "webpack-dev-server --config webpack.config.dev.js",
-    "build": "webpack --config webpack.config.prod.js",
+    "dev": "webpack-dev-server --config webpack.config.dev.cjs",
+    "build": "microbundle --jsx React.createElement",
     "lib": "babel ./src -d ./lib",
     "build:lib": "npm run build && npm run build:css && npm pack",
     "build:css": "cleancss --skip-rebase -d -o ./css/s-forms.min.css ./src/styles/s-forms.css"

diff --git a/src/components/Answer.jsx b/src/components/Answer.jsx
@@ -12,7 +12,7 @@ import TypeaheadAnswer from './answer/TypeaheadAnswer';
 import Constants from '../constants/Constants';
 import { FormGenContext } from '../contexts/FormGenContext';
 import { ConfigurationContext } from '../contexts/ConfigurationContext';
-import QuestionStatic from "./QuestionStatic.js";
+import QuestionStatic from "./QuestionStatic.jsx";
 
 const Answer = (props) => {
   const formGenContext = React.useContext(FormGenContext);

diff --git a/src/components/Question.jsx b/src/components/Question.jsx
@@ -14,7 +14,7 @@ import MediaContent from './MediaContent';
 import { CaretSquareDown, CaretSquareUp, InfoCircle } from '../styles/icons';
 import { ConfigurationContext } from '../contexts/ConfigurationContext';
 import classNames from 'classnames';
-import QuestionStatic from "./QuestionStatic";
+import QuestionStatic from "./QuestionStatic.jsx";
 
 // TODO Remove once the pretty layout is tested
 const PRETTY_ANSWERABLE_LAYOUT = true;

diff --git a/src/components/QuestionStatic.js → src/components/QuestionStatic.jsx b/src/components/QuestionStatic.js → src/components/QuestionStatic.jsx
@@ -1,30 +1,30 @@
 import React from "react";
 import Constants from "../constants/Constants.js";
 import HelpIcon from "./HelpIcon.jsx";
-import JsonLdUtils from "jsonld-utils";
 import LinkIcon from "./LinkIcon.jsx";
 import QuestionCommentIcon from "./comment/QuestionCommentIcon.jsx";
+import JsonLdUtils from "jsonld-utils";
 
 export default class QuestionStatic {
   static renderIcons(question, options, onCommentChange, showIcon) {
     let icons;
     if (options.icons) icons = options.icons;
     else icons = Constants.DEFAULT_OPTIONS.icons;
     let iconsArray = [];
-    const renderQuestionHelp = QuestionStatic.renderQuestionHelp(
+    const renderQuestionHelp = this.renderQuestionHelp(
       question,
       options,
       onCommentChange,
       showIcon
     );
-    const renderQuestionComments = QuestionStatic.renderQuestionComments(
+    const renderQuestionComments = this.renderQuestionComments(
       question,
       options,
       onCommentChange,
       showIcon
     );
 
-    const renderQuestionLink = QuestionStatic.renderQuestionLink(
+    const renderQuestionLink = this.renderQuestionLink(
       question,
       options,
       onCommentChange,

diff --git a/src/components/wizard/WizardStep.jsx b/src/components/wizard/WizardStep.jsx
@@ -6,7 +6,7 @@ import Constants from '../../constants/Constants';
 import { FormQuestionsContext } from '../../contexts/FormQuestionsContext';
 import Question from '../Question';
 import JsonLdObjectMap from '../../util/JsonLdObjectMap';
-import QuestionStatic from "../QuestionStatic";
+import QuestionStatic from "../QuestionStatic.jsx";
 
 export default class WizardStep extends React.Component {
   constructor(props) {

diff --git a/src/contexts/ConfigurationContext.js b/src/contexts/ConfigurationContext.js
@@ -1,11 +1,12 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import DefaultInput from "../components/DefaultInput";
 
 const ConfigurationContext = React.createContext({});
 
 const defaultProps = {
   components: {
-    inputComponent: require('../components/DefaultInput').default
+    inputComponent: DefaultInput
   },
   componentsOptions: {
     dateTimeAnswer: {

diff --git a/src/model/DefaultFormGenerator.js b/src/model/DefaultFormGenerator.js
@@ -5,7 +5,9 @@ export default class DefaultFormGenerator {
    * The form consists of a single step, which contains one text area for the description.
    */
   static generateForm() {
-    let formTemplate = require('./defaultForm');
+    let formTemplate = fetch("./defaultForm.json").then(response => {
+      return response.json();
+    })
     // Deep copy of the form template to prevent modifications
     formTemplate = JSON.parse(JSON.stringify(formTemplate));
 

diff --git a/src/model/defaultForm.js b/src/model/defaultForm.js
diff --git a/src/model/defaultForm.json b/src/model/defaultForm.json
@@ -0,0 +1,43 @@
+{
+  "@graph": [
+    {
+      "@type": "http://onto.fel.cvut.cz/ontologies/documentation/question",
+      "http://onto.fel.cvut.cz/ontologies/form-layout/has-layout-class": "form",
+      "http://onto.fel.cvut.cz/ontologies/documentation/has_related_question": [
+        {
+          "http://onto.fel.cvut.cz/ontologies/form-layout/has-layout-class": ["wizard-step", "section"],
+          "http://www.w3.org/2000/01/rdf-schema#label": [
+            {
+              "@language": "en",
+              "@value": "Description"
+            },
+            {
+              "@language": "cs",
+              "@value": "Popis"
+            }
+          ],
+          "http://onto.fel.cvut.cz/ontologies/documentation/has_related_question": [
+            {
+              "@type": "http://onto.fel.cvut.cz/ontologies/documentation/question",
+              "http://onto.fel.cvut.cz/ontologies/form-layout/has-layout-class": ["textarea"],
+              "http://www.w3.org/2000/01/rdf-schema#label": [
+                {
+                  "@language": "en",
+                  "@value": "Description"
+                },
+                {
+                  "@language": "cs",
+                  "@value": "Popis"
+                }
+              ],
+              "http://onto.fel.cvut.cz/ontologies/documentation/has_answer": {
+                "@type": "http://onto.fel.cvut.cz/ontologies/documentation/answer",
+                "http://onto.fel.cvut.cz/ontologies/documentation/has_data_value": ""
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/s-forms.js b/src/s-forms.js
@@ -10,6 +10,7 @@ import { FormQuestionsContext } from './contexts/FormQuestionsContext';
 import Answer from './components/Answer';
 import HelpIcon from './components/HelpIcon';
 import WizardStep from './components/wizard/WizardStep';
+import QuestionStatic from './components/QuestionStatic';
 
 export default SForms;
 export {
@@ -23,5 +24,6 @@ export {
   HelpIcon,
   ConfigurationContext,
   FormQuestionsContext,
-  WizardStep
+  WizardStep,
+  QuestionStatic
 };
diff --git a/src/util/MaskMapper.js b/src/util/MaskMapper.js
@@ -7,7 +7,7 @@ const REPLACEMENTS = {
   s: '1'
 };
 
-module.exports = {
+export default class MaskMapper {
   /**
    * Attempts to map regular mask (e.g. date) to the format supported by inputmask-core.
    *
@@ -17,7 +17,7 @@ module.exports = {
    * ISO 8601 acronyms (e.g. M for month and m for minute).
    * @param mask The mask to map
    */
-  mapMask(mask) {
+  static mapMask(mask) {
     if (!mask) {
       return mask;
     }