Release 0.6.2 ready (#130)

done #100 #105 #108 #110 #107 #111 #113 #115 #117 #119 #22 #124 #126 #127 #129

.github/workflows/codequality.yml

@@ -15,10 +15,10 @@ jobs:
       - uses: actions/checkout@v2
         with:
           fetch-depth: 0
-      - name: Set up JDK 10
+      - name: Set up JDK 11
         uses: actions/setup-java@v1
         with:
-          java-version: 10
+          java-version: 11
       - name: Scan on SonarCloud.io
         run: mvn verify sonar:sonar -Psonar --file superfields/pom.xml
         env:

README.md

@@ -19,7 +19,7 @@ This is the relevant dependency:
 <dependency>
    <groupId>org.vaadin.miki</groupId>
    <artifactId>superfields</artifactId>
-   <version>0.6.1</version>
+   <version>0.6.2</version>
 </dependency>
 ```
 

demo-v14/frontend/styles/super-number-fields-styles.css

@@ -0,0 +1,15 @@
+:host(#belongs-to-big-decimal) [part="value"] {
+    border-bottom: 2px solid orange;
+}
+
+:host(.belongs-to-superintegerfield) [part="value"] {
+    border-bottom: 2px solid cyan;
+}
+
+:host(.belongs-to-superdoublefield) [part="value"] {
+    border-bottom: 2px solid green;
+}
+
+:host(#belongs-to-long) [part="value"] {
+    border-bottom: 2px solid purple;
+}

demo-v14/package.json

@@ -4,18 +4,116 @@
   "dependencies": {
     "@polymer/polymer": "3.2.0",
     "@webcomponents/webcomponentsjs": "^2.2.10",
-    "@vaadin/flow-deps": "./target/frontend"
+    "@vaadin/vaadin-crud": "1.1.0",
+    "@vaadin/vaadin-grid": "5.5.3",
+    "@vaadin/vaadin-icons": "4.3.1",
+    "@vaadin/vaadin-split-layout": "4.1.1",
+    "@vaadin/vaadin-combo-box": "5.0.11",
+    "@vaadin/vaadin-cookie-consent": "1.1.2",
+    "@vaadin/vaadin-core-shrinkwrap": "14.2.0",
+    "@vaadin/vaadin-upload": "4.2.2",
+    "@vaadin/vaadin-dialog": "2.3.0",
+    "@vaadin/vaadin-select": "2.1.7",
+    "@vaadin/vaadin-app-layout": "2.0.5",
+    "@vaadin/vaadin-item": "2.1.1",
+    "@vaadin/vaadin-board": "2.1.1",
+    "@vaadin/vaadin-charts": "6.2.4",
+    "@vaadin/vaadin-notification": "1.4.0",
+    "@vaadin/vaadin-grid-pro": "2.0.7",
+    "@vaadin/vaadin-progress-bar": "1.1.2",
+    "@vaadin/vaadin-shrinkwrap": "14.2.0",
+    "@vaadin/vaadin-date-time-picker": "1.0.0",
+    "@vaadin/vaadin-ordered-layout": "1.2.0",
+    "@vaadin/vaadin-login": "1.0.1",
+    "@vaadin/vaadin-button": "2.2.2",
+    "@vaadin/vaadin-date-picker": "4.0.8",
+    "@vaadin/vaadin-text-field": "2.5.5",
+    "@vaadin/vaadin-menu-bar": "1.0.5",
+    "@vaadin/vaadin-custom-field": "1.0.11",
+    "@vaadin/vaadin-form-layout": "2.1.7",
+    "@vaadin/vaadin-confirm-dialog": "1.1.6",
+    "@vaadin/vaadin-accordion": "1.0.1",
+    "@polymer/iron-list": "3.0.2",
+    "@vaadin/vaadin-list-box": "1.2.0",
+    "@vaadin/vaadin-details": "1.0.1",
+    "@vaadin/vaadin-checkbox": "2.2.13",
+    "@polymer/iron-icon": "3.0.1",
+    "@vaadin/vaadin-time-picker": "2.0.7",
+    "@vaadin/vaadin-context-menu": "4.3.15",
+    "@vaadin/vaadin-tabs": "3.0.5",
+    "@vaadin/vaadin-radio-button": "1.2.6",
+    "@vaadin/vaadin-lumo-styles": "1.5.0",
+    "@vaadin/vaadin-material-styles": "1.2.3",
+    "@vaadin/vaadin-rich-text-editor": "1.1.1"
   },
   "devDependencies": {
     "webpack": "4.42.0",
-    "webpack-cli": "3.3.10",
-    "webpack-dev-server": "3.9.0",
+    "webpack-cli": "3.3.11",
+    "webpack-dev-server": "3.10.3",
     "webpack-babel-multi-target-plugin": "2.3.3",
-    "copy-webpack-plugin": "5.1.0",
+    "copy-webpack-plugin": "5.1.1",
     "webpack-merge": "4.2.2",
-    "raw-loader": "3.0.0",
-    "compression-webpack-plugin": "3.0.1",
+    "raw-loader": "3.1.0",
+    "compression-webpack-plugin": "3.1.0",
     "terser": "4.6.7"
   },
-  "vaadinAppPackageHash": "a0a2b06c0da7d79ceb9d83fb4b4dccc967bf2ec12246aa0de4f053298fb7081e"
+  "vaadin": {
+    "dependencies": {
+      "@polymer/polymer": "3.2.0",
+      "@webcomponents/webcomponentsjs": "^2.2.10",
+      "@vaadin/vaadin-crud": "1.1.0",
+      "@vaadin/vaadin-grid": "5.5.3",
+      "@vaadin/vaadin-icons": "4.3.1",
+      "@vaadin/vaadin-split-layout": "4.1.1",
+      "@vaadin/vaadin-combo-box": "5.0.11",
+      "@vaadin/vaadin-cookie-consent": "1.1.2",
+      "@vaadin/vaadin-core-shrinkwrap": "14.2.0",
+      "@vaadin/vaadin-upload": "4.2.2",
+      "@vaadin/vaadin-dialog": "2.3.0",
+      "@vaadin/vaadin-select": "2.1.7",
+      "@vaadin/vaadin-app-layout": "2.0.5",
+      "@vaadin/vaadin-item": "2.1.1",
+      "@vaadin/vaadin-board": "2.1.1",
+      "@vaadin/vaadin-charts": "6.2.4",
+      "@vaadin/vaadin-notification": "1.4.0",
+      "@vaadin/vaadin-grid-pro": "2.0.7",
+      "@vaadin/vaadin-progress-bar": "1.1.2",
+      "@vaadin/vaadin-shrinkwrap": "14.2.0",
+      "@vaadin/vaadin-date-time-picker": "1.0.0",
+      "@vaadin/vaadin-ordered-layout": "1.2.0",
+      "@vaadin/vaadin-login": "1.0.1",
+      "@vaadin/vaadin-button": "2.2.2",
+      "@vaadin/vaadin-date-picker": "4.0.8",
+      "@vaadin/vaadin-text-field": "2.5.5",
+      "@vaadin/vaadin-menu-bar": "1.0.5",
+      "@vaadin/vaadin-custom-field": "1.0.11",
+      "@vaadin/vaadin-form-layout": "2.1.7",
+      "@vaadin/vaadin-confirm-dialog": "1.1.6",
+      "@vaadin/vaadin-accordion": "1.0.1",
+      "@polymer/iron-list": "3.0.2",
+      "@vaadin/vaadin-list-box": "1.2.0",
+      "@vaadin/vaadin-details": "1.0.1",
+      "@vaadin/vaadin-checkbox": "2.2.13",
+      "@polymer/iron-icon": "3.0.1",
+      "@vaadin/vaadin-time-picker": "2.0.7",
+      "@vaadin/vaadin-context-menu": "4.3.15",
+      "@vaadin/vaadin-tabs": "3.0.5",
+      "@vaadin/vaadin-radio-button": "1.2.6",
+      "@vaadin/vaadin-lumo-styles": "1.5.0",
+      "@vaadin/vaadin-material-styles": "1.2.3",
+      "@vaadin/vaadin-rich-text-editor": "1.1.1"
+    },
+    "devDependencies": {
+      "webpack-babel-multi-target-plugin": "2.3.3",
+      "copy-webpack-plugin": "5.1.1",
+      "compression-webpack-plugin": "3.1.0",
+      "raw-loader": "3.1.0",
+      "webpack-cli": "3.3.11",
+      "webpack": "4.42.0",
+      "terser": "4.6.7",
+      "webpack-merge": "4.2.2",
+      "webpack-dev-server": "3.10.3"
+    },
+    "hash": "ff6bf9595a64a06dbab813090ee759084167b12ba737d4b8d0a4e8305a6b4b05"
+  }
 }

demo-v14/pom.xml

@@ -4,11 +4,11 @@
     <parent>
         <artifactId>superfields-parent</artifactId>
         <groupId>org.vaadin.miki</groupId>
-        <version>0.6.1</version>
+        <version>0.6.2</version>
     </parent>
 
     <artifactId>superfields-demo-v14</artifactId>
-    <version>0.6.1</version>
+    <version>0.6.2</version>
     <name>V14 demo app for SuperFields</name>
     <description>Showcase application for V14 and SuperFields.</description>
     <packaging>war</packaging>
@@ -23,7 +23,7 @@
         <dependency>
             <groupId>org.vaadin.miki</groupId>
             <artifactId>superfields</artifactId>
-            <version>0.6.1</version>
+            <version>0.6.2</version>
         </dependency>
         <dependency>
             <groupId>javax.servlet</groupId>
@@ -38,10 +38,6 @@
             <artifactId>vaadin</artifactId>
             <version>${vaadin.version}</version>
             <exclusions>
-                <exclusion>
-                    <groupId>com.vaadin</groupId>
-                    <artifactId>vaadin-date-time-picker-flow</artifactId>
-                </exclusion>
                 <!-- Webjars are only needed when running in Vaadin 13 compatibility mode -->
                 <exclusion>
                     <groupId>com.vaadin.webjar</groupId>

demo-v14/src/main/java/org/vaadin/miki/MainView.java

@@ -57,6 +57,7 @@
  * @since 2020-04-07
  */
 @CssImport("./styles/demo-styles.css")
+@CssImport(value = "./styles/super-number-fields-styles.css", themeFor = "vaadin-text-field")
 @Route
 @PageTitle("SuperFields Demo")
 public class MainView extends VerticalLayout {
@@ -252,9 +253,9 @@ private Component getInfoPage() {
 
     public MainView() {
         this.components.put(SuperIntegerField.class, new SuperIntegerField("Integer (6 digits):").withMaximumIntegerDigits(6));
-        this.components.put(SuperLongField.class, new SuperLongField("Long (11 digits):").withMaximumIntegerDigits(11));
+        this.components.put(SuperLongField.class, new SuperLongField("Long (11 digits):").withMaximumIntegerDigits(11).withId("long"));
         this.components.put(SuperDoubleField.class, new SuperDoubleField("Double (8 + 4 digits):").withMaximumIntegerDigits(8).withMaximumFractionDigits(4));
-        this.components.put(SuperBigDecimalField.class, new SuperBigDecimalField("Big decimal (12 + 3 digits):").withMaximumIntegerDigits(12).withMaximumFractionDigits(3).withMinimumFractionDigits(1));
+        this.components.put(SuperBigDecimalField.class, new SuperBigDecimalField("Big decimal (12 + 3 digits):").withMaximumIntegerDigits(12).withMaximumFractionDigits(3).withMinimumFractionDigits(1).withId("big-decimal"));
         this.components.put(SuperDatePicker.class, new SuperDatePicker("Pick a date:").withDatePattern(DatePatterns.YYYY_MM_DD).withValue(LocalDate.now()));
         this.components.put(SuperDateTimePicker.class, new SuperDateTimePicker("Pick a date and time:").withDatePattern(DatePatterns.M_D_YYYY_SLASH).withValue(LocalDateTime.now()));
         this.components.put(SuperTabs.class, new SuperTabs<String>((Supplier<HorizontalLayout>) HorizontalLayout::new)

demo-v14/webpack.generated.js

@@ -41,6 +41,8 @@ if (watchDogPort){
     watchDogPort = watchDogPort.substr(watchDogPrefix.length);
 }
 
+const transpile = !devMode || process.argv.find(v => v.indexOf('--transpile-es5') >= 0);
+
 const net = require('net');
 
 function setupWatchDog(){
@@ -94,13 +96,13 @@ module.exports = {
     contentBase: [mavenOutputFolderForFlowBundledFiles, 'src/main/webapp'],
     after: function(app, server) {
       app.get(`/stats.json`, function(req, res) {
-        res.json(stats.toJson());
+        res.json(stats);
       });
       app.get(`/stats.hash`, function(req, res) {
-        res.json(stats.toJson().hash.toString());
+        res.json(stats.hash.toString());
       });
       app.get(`/assetsByChunkName`, function(req, res) {
-        res.json(stats.toJson().assetsByChunkName);
+        res.json(stats.assetsByChunkName);
       });
       app.get(`/stop`, function(req, res) {
         // eslint-disable-next-line no-console
@@ -112,10 +114,10 @@ module.exports = {
 
   module: {
     rules: [
-      { // Files that Babel has to transpile
+      ...(transpile ? [{ // Files that Babel has to transpile
         test: /\.js$/,
         use: [BabelMultiTargetPlugin.loader()]
-      },
+      }] : []),
       {
         test: /\.css$/i,
         use: ['raw-loader']
@@ -127,11 +129,11 @@ module.exports = {
     maxAssetSize: 2097152 // 2MB
   },
   plugins: [
-    // Generate compressed bundles
-    new CompressionPlugin(),
+    // Generate compressed bundles when not devMode
+    ...(devMode ? [] : [new CompressionPlugin()]),
 
     // Transpile with babel, and produce different bundles per browser
-    new BabelMultiTargetPlugin({
+    ...(transpile ? [new BabelMultiTargetPlugin({
       babel: {
         plugins: [
           // workaround for Safari 10 scope issue (https://bugs.webkit.org/show_bug.cgi?id=159270)
@@ -161,19 +163,38 @@ module.exports = {
           tagAssetsWithKey: true, // append a suffix to the file name
         }
       }
-    }),
+    })] : []),
 
     // Generates the stats file for flow `@Id` binding.
     function (compiler) {
       compiler.hooks.afterEmit.tapAsync("FlowIdPlugin", (compilation, done) => {
+        let statsJson = compilation.getStats().toJson();
+        // Get bundles as accepted keys (except any es5 bundle)
+        let acceptedKeys = statsJson.assets.filter(asset => asset.chunks.length > 0 && !asset.chunkNames.toString().includes("es5"))
+          .map(asset => asset.chunks).reduce((acc, val) => acc.concat(val), []);
+
+        // Collect all modules for the given keys
+        const modules = collectModules(statsJson, acceptedKeys);
+
+        // Collect accepted chunks and their modules
+        const chunks = collectChunks(statsJson, acceptedKeys);
+
+        let customStats = {
+          hash: statsJson.hash,
+          assetsByChunkName: statsJson.assetsByChunkName,
+          chunks: chunks,
+          modules: modules
+        };
+
         if (!devMode) {
           // eslint-disable-next-line no-console
-          console.log("         Emitted " + statsFile)
-          fs.writeFile(statsFile, JSON.stringify(compilation.getStats().toJson(), null, 1), done);
+          console.log("         Emitted " + statsFile);
+          fs.writeFile(statsFile, JSON.stringify(customStats, null, 1), done);
         } else {
           // eslint-disable-next-line no-console
           console.log("         Serving the 'stats.json' file dynamically.");
-          stats = compilation.getStats();
+
+          stats = customStats;
           done();
         }
       });
@@ -187,3 +208,78 @@ module.exports = {
     }]),
   ]
 };
+
+/**
+ * Collect chunk data for accepted chunk ids.
+ * @param statsJson full stats.json content
+ * @param acceptedKeys chunk ids that are accepted
+ * @returns slimmed down chunks
+ */
+function collectChunks(statsJson, acceptedChunks) {
+  const chunks = [];
+  // only handle chunks if they exist for stats
+  if (statsJson.chunks) {
+    statsJson.chunks.forEach(function (chunk) {
+      // Acc chunk if chunk id is in accepted chunks
+      if (acceptedChunks.includes(chunk.id)) {
+        const modules = [];
+        // Add all modules for chunk as slimmed down modules
+        chunk.modules.forEach(function (module) {
+          const slimModule = {
+            id: module.id,
+            name: module.name,
+            source: module.source,
+          };
+          modules.push(slimModule);
+        });
+        const slimChunk = {
+          id: chunk.id,
+          names: chunk.names,
+          files: chunk.files,
+          hash: chunk.hash,
+          modules: modules
+        }
+        chunks.push(slimChunk);
+      }
+    });
+  }
+  return chunks;
+}
+
+/**
+ * Collect all modules that are for a chunk in  acceptedChunks.
+ * @param statsJson full stats.json
+ * @param acceptedChunks chunk names that are accepted for modules
+ * @returns slimmed down modules
+ */
+function collectModules(statsJson, acceptedChunks) {
+  let modules = [];
+  // skip if no modules defined
+  if (statsJson.modules) {
+    statsJson.modules.forEach(function (module) {
+      // Add module if module chunks contain an accepted chunk and the module is generated-flow-imports.js module
+      if (module.chunks.filter(key => acceptedChunks.includes(key)).length > 0
+          && (module.name.includes("generated-flow-imports.js") || module.name.includes("generated-flow-imports-fallback.js"))) {
+        let subModules = [];
+        // Create sub modules only if they are available
+        if (module.modules) {
+          module.modules.filter(module => !module.name.includes("es5")).forEach(function (module) {
+            const subModule = {
+              name: module.name,
+              source: module.source
+            };
+            subModules.push(subModule);
+          });
+        }
+        const slimModule = {
+          id: module.id,
+          name: module.name,
+          source: module.source,
+          modules: subModules
+        };
+        modules.push(slimModule);
+      }
+    });
+  }
+  return modules;
+}