From 3fba8f298375e946dd6d0d63a65606c276aab8ae Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 26 Sep 2019 10:49:07 +0200 Subject: [PATCH 1/3] Add webpack-visualizer-plugin for analyzation of generated bundles --- .gitignore | 2 ++ CHANGES.md | 3 ++- README.md | 6 ++++++ package.json | 1 + webpack/base.config.js | 5 +++-- 5 files changed, 14 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index 2994e1f2b..554d44183 100644 --- a/.gitignore +++ b/.gitignore @@ -19,6 +19,8 @@ bundle.js.map bundle.min.js bundle.min.js.map /chunks +stats.json +stats.html test-reports /.DS_Store diff --git a/CHANGES.md b/CHANGES.md index 59bea15b6..7c58b0d5e 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -5,7 +5,7 @@ Features ~~~~~~~~ -- Fix ``pat-auto-scale`` not correctly rescaling after fullscreen changes. Fixes #673 +- Add ``webpack-visualizer-plugin`` for analyzation of generated bundles. - Add ``pat-fullscreen`` pattern to allow any element to be displayed in fullscreen-mode. A second pattern ``pat-fullscreen-close`` which is triggered on ``close-fullscreen`` CSS class allows for closing the fullscreen with custom buttons. - Runs now on jQuery 3. @@ -14,6 +14,7 @@ Features Fixes ~~~~~ +- Fix ``pat-auto-scale`` not correctly rescaling after fullscreen changes. Fixes #673 - Fix heisenbug with pat-scroll on testruns. - Fix minimum input length default so that you can display select results already on click. diff --git a/README.md b/README.md index 1a2ff018e..fbb320a93 100644 --- a/README.md +++ b/README.md @@ -81,6 +81,12 @@ This will install all required npm and bower packages and run the tests. To run the tests in a browser, open the ``tests.html`` file in the browser of your choice. +### Check bundle sizes + +We added a webpack plugin which helps in analyzing bundle sizes. +Check if the bundle size doesn't grow much bigger. +After running webpack via ``make build``, ``make serve`` or ``make check`` stats.json and stats.html file are created. +Open stats.html in a browser to interactively check the payload each package contributes to the generated bundle. ### Organisations and projects which use Patternslib diff --git a/package.json b/package.json index 96ea7e62f..189bd9593 100644 --- a/package.json +++ b/package.json @@ -110,6 +110,7 @@ "webpack-jasmine-html-runner-plugin": "^0.9.0", "webpack-merge": "^4.1.2", "webpack-modernizr-loader": "^5.0.0", + "webpack-visualizer-plugin": "^0.1.11", "wrapper-webpack-plugin": "^2.0.0", "yo": "^2.0.6" }, diff --git a/webpack/base.config.js b/webpack/base.config.js index 5997e6564..21133ce18 100644 --- a/webpack/base.config.js +++ b/webpack/base.config.js @@ -12,7 +12,7 @@ try { var footerWrap = fs.readFileSync('./src/wrap-end.js', 'utf8'); } catch (er var WrapperPlugin = require('wrapper-webpack-plugin'); var DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin"); - +const BundleVisualizer = require('webpack-visualizer-plugin'); module.exports = { entry: { @@ -265,6 +265,7 @@ module.exports = { new DuplicatePackageCheckerPlugin({ verbose: true, emitError: true - }) + }), + new BundleVisualizer(), ] }; From e080658a89a1d2ecbfb7a7585bafdae5db346906 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Mon, 30 Sep 2019 13:22:51 +0200 Subject: [PATCH 2/3] installed --- npm-shrinkwrap.json | 214 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 214 insertions(+) diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 79f5733a2..de5e397ab 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -1242,6 +1242,12 @@ "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=", "dev": true }, + "asap": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", + "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=", + "dev": true + }, "asn1": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz", @@ -1299,6 +1305,12 @@ "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz", "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=" }, + "ast-types": { + "version": "0.9.6", + "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.9.6.tgz", + "integrity": "sha1-ECyenpAF0+fjgpvwxPok7oYu6bk=", + "dev": true + }, "astral-regex": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz", @@ -1496,6 +1508,12 @@ } } }, + "base62": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/base62/-/base62-1.2.8.tgz", + "integrity": "sha512-V6YHUbjLxN1ymqNLb1DPHoU1CpfdL7d2YTIp5W3U4hhoG4hhxNmsFDs66M9EXxBiSEke5Bt5dwdfMwwZF70iLA==", + "dev": true + }, "base64-arraybuffer": { "version": "0.1.5", "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz", @@ -2968,6 +2986,38 @@ "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=" }, + "commoner": { + "version": "0.10.8", + "resolved": "https://registry.npmjs.org/commoner/-/commoner-0.10.8.tgz", + "integrity": "sha1-NPw2cs0kOT6LtH5wyqApOBH08sU=", + "dev": true, + "requires": { + "commander": "^2.5.0", + "detective": "^4.3.1", + "glob": "^5.0.15", + "graceful-fs": "^4.1.2", + "iconv-lite": "^0.4.5", + "mkdirp": "^0.5.0", + "private": "^0.1.6", + "q": "^1.1.2", + "recast": "^0.11.17" + }, + "dependencies": { + "glob": { + "version": "5.0.15", + "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz", + "integrity": "sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=", + "dev": true, + "requires": { + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "2 || 3", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + } + } + } + }, "component-bind": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz", @@ -3327,6 +3377,12 @@ "integrity": "sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=", "dev": true }, + "d3": { + "version": "3.5.17", + "resolved": "https://registry.npmjs.org/d3/-/d3-3.5.17.tgz", + "integrity": "sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g=", + "dev": true + }, "dargs": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/dargs/-/dargs-6.0.0.tgz", @@ -3504,6 +3560,12 @@ } } }, + "defined": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz", + "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=", + "dev": true + }, "del": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz", @@ -3613,6 +3675,16 @@ "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==", "dev": true }, + "detective": { + "version": "4.7.1", + "resolved": "https://registry.npmjs.org/detective/-/detective-4.7.1.tgz", + "integrity": "sha512-H6PmeeUcZloWtdt4DAkFyzFL94arpHr3NOwwmVILFiy+9Qd4JTxxXrzfyGk/lmct2qVGBwTSwSXagqu2BxmWig==", + "dev": true, + "requires": { + "acorn": "^5.2.1", + "defined": "^1.0.0" + } + }, "di": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz", @@ -4052,6 +4124,16 @@ "integrity": "sha1-QWgTO0K7BcOKNbGuQ5fIKYqzaeA=", "dev": true }, + "envify": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/envify/-/envify-3.4.1.tgz", + "integrity": "sha1-1xIjKejfFoi6dxsSUBkXyc5cvOg=", + "dev": true, + "requires": { + "jstransform": "^11.0.3", + "through": "~2.3.4" + } + }, "errno": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz", @@ -4573,6 +4655,27 @@ "websocket-driver": ">=0.5.1" } }, + "fbjs": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.6.1.tgz", + "integrity": "sha1-lja3cF9bqWhNRLcveDISVK/IYPc=", + "dev": true, + "requires": { + "core-js": "^1.0.0", + "loose-envify": "^1.0.0", + "promise": "^7.0.3", + "ua-parser-js": "^0.7.9", + "whatwg-fetch": "^0.9.0" + }, + "dependencies": { + "core-js": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=", + "dev": true + } + } + }, "fd-slicer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.0.1.tgz", @@ -6867,6 +6970,42 @@ "verror": "1.10.0" } }, + "jstransform": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/jstransform/-/jstransform-11.0.3.tgz", + "integrity": "sha1-CaeJk+CuTU70SH9hVakfYZDLQiM=", + "dev": true, + "requires": { + "base62": "^1.1.0", + "commoner": "^0.10.1", + "esprima-fb": "^15001.1.0-dev-harmony-fb", + "object-assign": "^2.0.0", + "source-map": "^0.4.2" + }, + "dependencies": { + "esprima-fb": { + "version": "15001.1.0-dev-harmony-fb", + "resolved": "https://registry.npmjs.org/esprima-fb/-/esprima-fb-15001.1.0-dev-harmony-fb.tgz", + "integrity": "sha1-MKlHMDxrjV6VW+4rmbHSMyBqaQE=", + "dev": true + }, + "object-assign": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-2.1.1.tgz", + "integrity": "sha1-Q8NuXVaf+OSBbE76i+AtJpZ8GKo=", + "dev": true + }, + "source-map": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", + "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=", + "dev": true, + "requires": { + "amdefine": ">=0.0.4" + } + } + } + }, "karma": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/karma/-/karma-4.1.0.tgz", @@ -9245,6 +9384,15 @@ "integrity": "sha1-4mDHj2Fhzdmw5WzD4Khd4Xx6V74=", "dev": true }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "dev": true, + "requires": { + "asap": "~2.0.3" + } + }, "promise-inflight": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz", @@ -9401,6 +9549,12 @@ } } }, + "q": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", + "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=", + "dev": true + }, "qjobs": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/qjobs/-/qjobs-1.2.0.tgz", @@ -9515,6 +9669,22 @@ } } }, + "react": { + "version": "0.14.9", + "resolved": "https://registry.npmjs.org/react/-/react-0.14.9.tgz", + "integrity": "sha1-kRCmSXxJ1EuhwO3TF67CnC4NkdE=", + "dev": true, + "requires": { + "envify": "^3.0.0", + "fbjs": "^0.6.1" + } + }, + "react-dom": { + "version": "0.14.9", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-0.14.9.tgz", + "integrity": "sha1-BQZKPc8PsYgKOyv8nVjFXY2fYpM=", + "dev": true + }, "read-chunk": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-2.1.0.tgz", @@ -9591,6 +9761,26 @@ "readable-stream": "^2.0.2" } }, + "recast": { + "version": "0.11.23", + "resolved": "https://registry.npmjs.org/recast/-/recast-0.11.23.tgz", + "integrity": "sha1-RR/TAEqx5N+bTktmN2sqIZEkYtM=", + "dev": true, + "requires": { + "ast-types": "0.9.6", + "esprima": "~3.1.0", + "private": "~0.1.5", + "source-map": "~0.5.0" + }, + "dependencies": { + "esprima": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz", + "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=", + "dev": true + } + } + }, "rechoir": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", @@ -11774,6 +11964,12 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=", "dev": true }, + "ua-parser-js": { + "version": "0.7.20", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz", + "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==", + "dev": true + }, "uc.micro": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz", @@ -13984,6 +14180,18 @@ } } }, + "webpack-visualizer-plugin": { + "version": "0.1.11", + "resolved": "https://registry.npmjs.org/webpack-visualizer-plugin/-/webpack-visualizer-plugin-0.1.11.tgz", + "integrity": "sha1-uHcK2GtPZSYSxosbeCJT+vn4o04=", + "dev": true, + "requires": { + "d3": "^3.5.6", + "mkdirp": "^0.5.1", + "react": "^0.14.0", + "react-dom": "^0.14.0" + } + }, "websocket-driver": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.0.tgz", @@ -14000,6 +14208,12 @@ "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==", "dev": true }, + "whatwg-fetch": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-0.9.0.tgz", + "integrity": "sha1-DjaExsuZlbQ+/J3wPkw2XZX9nMA=", + "dev": true + }, "when": { "version": "3.7.8", "resolved": "https://registry.npmjs.org/when/-/when-3.7.8.tgz", From 470e61929f1810f88738f8927d166ec0e2876c6c Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Mon, 30 Sep 2019 14:30:45 +0200 Subject: [PATCH 3/3] Fix pat-auto-suggest to not show a placeholder if none is defined. Fixes #675 --- CHANGES.md | 1 + src/pat/auto-suggest/auto-suggest.js | 14 +++++--- src/pat/auto-suggest/index.html | 9 +++-- src/pat/auto-suggest/tests.js | 53 ++++++++++++++++++++++++++++ 4 files changed, 70 insertions(+), 7 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 7c58b0d5e..ab6d96a9e 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -14,6 +14,7 @@ Features Fixes ~~~~~ +- Fix ``pat-auto-suggest`` to not show a placeholder if none is defined. Fixes #675 - Fix ``pat-auto-scale`` not correctly rescaling after fullscreen changes. Fixes #673 - Fix heisenbug with pat-scroll on testruns. - Fix minimum input length default so that you can display select results already on click. diff --git a/src/pat/auto-suggest/auto-suggest.js b/src/pat/auto-suggest/auto-suggest.js index 6f91cb7b0..4daab9cbd 100644 --- a/src/pat/auto-suggest/auto-suggest.js +++ b/src/pat/auto-suggest/auto-suggest.js @@ -21,7 +21,7 @@ define([ parser.addArgument("allow-new-words", true); // Should custom tags be allowed? parser.addArgument("max-selection-size", 0); parser.addArgument("minimum-input-length"); // Don't restrict by default so that all results show - parser.addArgument("placeholder", function($el) { return $el.attr("placeholder") || "Enter text"; }); + parser.addArgument("placeholder", function($el) { return $el.attr("placeholder") || undefined; }); parser.addArgument("prefill", function($el) { return $el.val(); }); parser.addArgument("prefill-json", ""); // JSON format for pre-filling parser.addArgument("words", ""); @@ -48,13 +48,17 @@ define([ } var pat_config = parser.parse($el, opts); var config = { - placeholder: $el.attr("readonly") ? "" : pat_config.placeholder, tokenSeparators: [","], openOnEnter: false, maximumSelectionSize: pat_config.maxSelectionSize, minimumInputLength: pat_config.minimumInputLength, allowClear: pat_config.maxSelectionSize === 1 && !$el.prop('required') }; + if ($el.attr("readonly")) { + config.placeholder = ""; + } else if (pat_config.placeholder) { + config.placeholder = pat_config.placeholder; + } if (pat_config.selectionClasses) { // We need to customize the formatting/markup of the selection @@ -125,12 +129,12 @@ define([ if (! Array.isArray(words)) { words = $.map(words, function (v, k) { return {id: k, text: v}; }); } - } + } if (pat_config.words) { words = pat_config.words.split(/\s*,\s*/); words = $.map(words, function (v) { return {id: v, text: v}; }); } - + // Per Cornelis, if our max lenght is 1, we want select style. If it is larger, we want tag style // Now this is somewhat fishy because so far, we always configured tag style by setting config.tags = words. // Even if words was [], we would get a tag stylee select @@ -141,7 +145,7 @@ define([ // We allow exactly one value, use dropdown styles. How do we feed in words? } else { // We allow multiple values, use the pill style - called tags in select 2 speech - select2_config.tags = words; + select2_config.tags = words; } if (pat_config.prefill && pat_config.prefill.length) { diff --git a/src/pat/auto-suggest/index.html b/src/pat/auto-suggest/index.html index d70abefbc..298d2db48 100644 --- a/src/pat/auto-suggest/index.html +++ b/src/pat/auto-suggest/index.html @@ -15,7 +15,7 @@

Demo

@@ -36,7 +36,7 @@

Demo

@@ -60,6 +60,11 @@

Demo

allow-new-words: false;' type="text"> + diff --git a/src/pat/auto-suggest/tests.js b/src/pat/auto-suggest/tests.js index f809fd25a..44f6acd21 100644 --- a/src/pat/auto-suggest/tests.js +++ b/src/pat/auto-suggest/tests.js @@ -154,6 +154,59 @@ define(["pat-autosuggest"], function(pattern) { utils.removeSelect2(); }); }); + + + describe("Placeholder tests", function () { + beforeEach(function() { + $("div#lab").remove(); // Looks likes some specs don't clean up after themselves. + $("
", {id: "lab"}).appendTo(document.body); + }); + + afterEach(function() { + $("#lab").remove(); + }); + + it("A placeholder on the original element is reused on the auto-suggest element", function() { + + var placeholder = "Test placeholder"; + + $("", { + "id": "select2", + "class": "pat-autosuggest", + "placeholder": "Test placeholder", + }).appendTo($("div#lab")); + + var $el = $("input.pat-autosuggest"); + + expect($el.prop('placeholder')).toBe(placeholder); + pattern.init($el); + // XXX Placeholder is used as value of the input field. + // Change this as soon Select2 changes this odd behavior. + expect($(".select2-input").val()).toBe(placeholder); + utils.removeSelect2(); + }); + + it("No placeholder doesn't create an automatic one.", function() { + + $("", { + "id": "select2", + "class": "pat-autosuggest", + }).appendTo($("div#lab")); + + var $el = $("input.pat-autosuggest"); + + expect($el.prop('placeholder')).toBe(''); + pattern.init($el); + // XXX Placeholder is used as value of the input field. + // Change this as soon Select2 changes this odd behavior. + expect($(".select2-input").val()).toBe(''); + utils.removeSelect2(); + }); + + + }); + + }); });