From fa8592e6d4aadfde2208f2480e0fc42ed95762ca Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 1 Oct 2020 17:08:58 +0200 Subject: [PATCH 1/6] Cleanup --- src/patterns.js | 119 +++++++++++++++++++---------------------- webpack/base.config.js | 2 - 2 files changed, 55 insertions(+), 66 deletions(-) diff --git a/src/patterns.js b/src/patterns.js index 9efd89b01..b83e0ce66 100644 --- a/src/patterns.js +++ b/src/patterns.js @@ -1,74 +1,65 @@ /* Patterns bundle configuration. - * - * This file is used to tell r.js which Patterns to load when it generates a - * bundle. This is only used when generating a full Patterns bundle, or when - * you want a simple way to include all patterns in your own project. If you - * only want to use selected patterns you will need to pull in the patterns - * directly in your RequireJS configuration. + * All imports here will go into the compiled bundle. */ -// // Imports for copy/paste -// import pat_base from './core/base.js'; -// import pat_parser from './core/parser.js'; - // Import base -import registry from "./core/registry.js"; +import registry from "./core/registry"; import jquery from "jquery"; // Import all used patterns for the bundle to be generated -import "./core/push_kit.js"; -import "./core/url.js"; -import "./lib/input-change-events.js"; -import "./pat/ajax/ajax.js"; -import "./pat/auto-scale/auto-scale.js"; -import "./pat/auto-submit/auto-submit.js"; -import "./pat/auto-suggest/auto-suggest.js"; -import "./pat/autofocus/autofocus.js"; -import "./pat/breadcrumbs/breadcrumbs.js"; -import "./pat/bumper/bumper.js"; -import "./pat/calendar/calendar.js"; -import "./pat/carousel/carousel.js"; -import "./pat/checklist/checklist.js"; -import "./pat/clone/clone.js"; -import "./pat/collapsible/collapsible.js"; -import "./pat/colour-picker/colour-picker.js"; -import "./pat/date-picker/date-picker.js"; -import "./pat/datetime-picker/datetime-picker.js"; -import "./pat/depends/depends.js"; -import "./pat/display-time/display-time.js"; -import "./pat/equaliser/equaliser.js"; -import "./pat/expandable-tree/expandable-tree.js"; -import "./pat/focus/focus.js"; -import "./pat/form-state/form-state.js"; -import "./pat/forward/forward.js"; -import "./pat/fullscreen/fullscreen-close.js"; -import "./pat/fullscreen/fullscreen.js"; -import "./pat/gallery/gallery.js"; -import "./pat/image-crop/image-crop.js"; -import "./pat/inject/inject.js"; -import "./pat/legend/legend.js"; -import "./pat/markdown/markdown.js"; -import "./pat/masonry/masonry.js"; -import "./pat/menu/menu.js"; -import "./pat/modal/modal.js"; -import "./pat/navigation/navigation.js"; -import "./pat/notification/notification.js"; -import "./pat/push/push.js"; -import "./pat/scroll-box/scroll-box.js"; -import "./pat/scroll/scroll.js"; -import "./pat/selectbox/selectbox.js"; -import "./pat/slides/slides.js"; -import "./pat/sortable/sortable.js"; -import "./pat/stacks/stacks.js"; -import "./pat/sticky/sticky.js"; -import "./pat/subform/subform.js"; -import "./pat/switch/switch.js"; -import "./pat/syntax-highlight/syntax-highlight.js"; -import "./pat/tabs/tabs.js"; -import "./pat/toggle/toggle.js"; -import "./pat/tooltip/tooltip.js"; -import "./pat/validation/validation.js"; -import "./pat/zoom/zoom.js"; +import "./core/push_kit"; +import "./core/url"; +import "./lib/input-change-events"; +import "./pat/ajax/ajax"; +import "./pat/auto-scale/auto-scale"; +import "./pat/auto-submit/auto-submit"; +import "./pat/auto-suggest/auto-suggest"; +import "./pat/autofocus/autofocus"; +import "./pat/breadcrumbs/breadcrumbs"; +import "./pat/bumper/bumper"; +import "./pat/calendar/calendar"; +import "./pat/carousel/carousel"; +import "./pat/checklist/checklist"; +import "./pat/clone/clone"; +import "./pat/collapsible/collapsible"; +import "./pat/colour-picker/colour-picker"; +import "./pat/date-picker/date-picker"; +import "./pat/datetime-picker/datetime-picker"; +import "./pat/depends/depends"; +import "./pat/display-time/display-time"; +import "./pat/equaliser/equaliser"; +import "./pat/expandable-tree/expandable-tree"; +import "./pat/focus/focus"; +import "./pat/form-state/form-state"; +import "./pat/forward/forward"; +import "./pat/fullscreen/fullscreen-close"; +import "./pat/fullscreen/fullscreen"; +import "./pat/gallery/gallery"; +import "./pat/image-crop/image-crop"; +import "./pat/inject/inject"; +import "./pat/legend/legend"; +import "./pat/markdown/markdown"; +import "./pat/masonry/masonry"; +import "./pat/menu/menu"; +import "./pat/modal/modal"; +import "./pat/navigation/navigation"; +import "./pat/notification/notification"; +import "./pat/push/push"; +import "./pat/scroll-box/scroll-box"; +import "./pat/scroll/scroll"; +import "./pat/selectbox/selectbox"; +import "./pat/slides/slides"; +import "./pat/sortable/sortable"; +import "./pat/stacks/stacks"; +import "./pat/sticky/sticky"; +import "./pat/subform/subform"; +import "./pat/switch/switch"; +import "./pat/syntax-highlight/syntax-highlight"; +import "./pat/tabs/tabs"; +import "./pat/toggle/toggle"; +import "./pat/tooltip/tooltip"; +import "./pat/validation/validation"; +import "./pat/zoom/zoom"; // example pattern import "./pat/minimalpattern/minimalpattern"; diff --git a/webpack/base.config.js b/webpack/base.config.js index 29d34e18b..f98f40cce 100644 --- a/webpack/base.config.js +++ b/webpack/base.config.js @@ -9,8 +9,6 @@ const TerserPlugin = require("terser-webpack-plugin"); const DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin"); module.exports = (env) => { - console.log(env.NODE_ENV); - return { entry: { "bundle": path.resolve(__dirname, "../src/patterns.js"), From db067f6d256acde2caa4d007c02d68476f322754 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Fri, 2 Oct 2020 18:24:34 +0200 Subject: [PATCH 2/6] Remove forgotten `debugger` statements --- src/pat/carousel/carousel.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pat/carousel/carousel.js b/src/pat/carousel/carousel.js index eaec23f67..a2170dbba 100644 --- a/src/pat/carousel/carousel.js +++ b/src/pat/carousel/carousel.js @@ -124,7 +124,6 @@ export default Base.extend({ }, onInitialized: function (event, slider) { - debugger; this._loadPanelImages(slider, slider.options.startPanel); this._loadPanelImages(slider, slider.options.startPanel + 1); this._loadPanelImages(slider, 0); @@ -132,7 +131,6 @@ export default Base.extend({ }, onSlideInit: function (event, slider) { - debugger; this._loadPanelImages(slider, slider.targetPage); }, From 977347d076bcfbe48b6f2d6b5bceaeaf45431625 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Fri, 2 Oct 2020 18:02:12 +0200 Subject: [PATCH 3/6] Make yarn a hard requirement. --- .travis.yml | 4 +--- Makefile | 3 +-- README.md | 14 ++++++++++---- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/.travis.yml b/.travis.yml index fcab9e502..4732a420c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,7 +1,5 @@ -dist: xenial language: node_js node_js: - lts/* -before_script: travis_retry make stamp-yarn +cache: yarn script: make check -sudo: required diff --git a/Makefile b/Makefile index 165564696..d9e761e41 100644 --- a/Makefile +++ b/Makefile @@ -1,7 +1,7 @@ ESLINT ?= node_modules/.bin/eslint PEGJS ?= node_modules/.bin/pegjs SASS ?= node_modules/.bin/sass -YARN ?= node_modules/.bin/yarn +YARN ?= yarn SOURCES = $(wildcard src/*.js) $(wildcard src/pat/*.js) $(wildcard src/lib/*.js) GENERATED = src/lib/depends_parse.js @@ -13,7 +13,6 @@ all:: bundle css ## Install dependencies stamp-yarn: - npm install --no-package-lock --no-save yarn $(YARN) install touch stamp-yarn diff --git a/README.md b/README.md index 76839fbf8..091aa0e06 100644 --- a/README.md +++ b/README.md @@ -20,17 +20,23 @@ Currently that means: Other browser version may work too, but are not actively tested against. +## Installation requirements + +Make sure, you have these requirements installed: + + - Node.js ( https://nodejs.org/en/ ) + - yarn ( https://yarnpkg.com/ ) + + ## Installation -You need to be on a recent node version and have yarn installed. +The following commands will generate a `bundle.js` file in the `dist` directory +which contains Patterns and all its dependencies: git clone git://github.com/Patternslib/Patterns.git cd Patterns make -This will generate a `bundle.js` file which contains Patterns and all its -dependencies. - Alternatively, you can [download a bundle at patternslib.com](http://patternslib.com/download.html). ## Layout From 7e50027bdd0f2f6aa7f9b4a3b7ac468144c96205 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Fri, 2 Oct 2020 17:40:08 +0200 Subject: [PATCH 4/6] pat depends, pat auto suggest: Fix a problem with initialization of ``pat-auto-suggest`` which occured after the lazy loading changes. --- CHANGES.md | 5 +++++ src/pat/depends/depends.js | 19 ++++++++++++------- src/pat/depends/index.html | 24 ++++++++++++++++++++++++ 3 files changed, 41 insertions(+), 7 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 3c0cb4156..c62ec73e6 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -47,6 +47,11 @@ - Build infrastructure: Build into /dist and cleanup before building. - utils: Add `isIE` method to detect Internet Explorer browsers. +### Fixes + +- pat calendar: Fix language loading error "Error: Cannot find module './en.js'" +- pat depends, pat auto suggest: Fix a problem with initialization of ``pat-auto-suggest`` which occurred after the lazy loading changes. + ## 3.0.0-dev - unreleased diff --git a/src/pat/depends/depends.js b/src/pat/depends/depends.js index 654d98e28..25b4b4243 100644 --- a/src/pat/depends/depends.js +++ b/src/pat/depends/depends.js @@ -125,9 +125,12 @@ export default Base.extend({ }, enable() { - if (this.$el.is(":input")) this.$el[0].disabled = null; - else if (this.$el.is("a")) this.$el.off("click.patternDepends"); - else if (this.$el.hasClass("pat-autosuggest")) { + if (this.$el.is(":input")) { + this.$el[0].disabled = null; + } else if (this.$el.is("a")) { + this.$el.off("click.patternDepends"); + } + if (this.$el.hasClass("pat-autosuggest")) { this.$el .findInclusive("input.pat-autosuggest") .trigger("pat-update", { @@ -139,10 +142,12 @@ export default Base.extend({ }, disable() { - if (this.$el.is(":input")) this.$el[0].disabled = "disabled"; - else if (this.$el.is("a")) - this.$el.on("click.patternDepends", this.blockDefault); - else if (this.$el.hasClass("pat-autosuggest")) { + if (this.$el.is(":input")) { + this.$el[0].disabled = "disabled"; + } else if (this.$el.is("a")) { + this.$el.on("click.patternDepends", (e) => e.preventDefault()); + } + if (this.$el.hasClass("pat-autosuggest")) { this.$el .findInclusive("input.pat-autosuggest") .trigger("pat-update", { diff --git a/src/pat/depends/index.html b/src/pat/depends/index.html index f7c3cde51..b5beb763d 100644 --- a/src/pat/depends/index.html +++ b/src/pat/depends/index.html @@ -11,6 +11,7 @@ > +
@@ -19,6 +20,10 @@
Flavour +
+
+ Select the type of ananas + +
+
Add extra toppings
+ +

Open a form in a modal

+ Open form. + From 616d23f4aadc1c230e56d19f5c92c9621a484aa0 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Fri, 2 Oct 2020 11:54:54 +0200 Subject: [PATCH 5/6] pat calendar: Fix language loading error "Error: Cannot find module './en.js'" --- src/pat/calendar/calendar.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/pat/calendar/calendar.js b/src/pat/calendar/calendar.js index a5dde2b3d..99e109e7d 100644 --- a/src/pat/calendar/calendar.js +++ b/src/pat/calendar/calendar.js @@ -87,11 +87,17 @@ var calendar = { var lang = document .getElementsByTagName("html")[0] .getAttribute("lang"); - if (lang && lang != "en" && lang != null) { + if (lang) { // we don't support any country-specific language variants, always use first 2 letters lang = lang.substr(0, 2).toLowerCase(); - await import(`fullcalendar/dist/lang/${lang}.js`); - console.log("loaded cal locale for " + lang); + if (lang !== "en") { + try { + await import(`fullcalendar/dist/lang/${lang}.js`); + console.log("loaded cal locale for " + lang); + } catch { + // ignore. default is english. + } + } } opts = opts || {}; From 10eb0da312f138d47c9b03a329f9ee2dfe430fa5 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 1 Oct 2020 18:32:45 +0200 Subject: [PATCH 6/6] Allow overriding the public path from outside via the definition of a window.__patternslib_public_path__ global variable. --- CHANGES.md | 1 + README.md | 21 +++++++++++++++++++++ src/patterns.js | 1 + src/public_path.js | 3 +++ webpack/base.config.js | 14 +++++++++++--- 5 files changed, 37 insertions(+), 3 deletions(-) create mode 100644 src/public_path.js diff --git a/CHANGES.md b/CHANGES.md index c62ec73e6..f40abd592 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -25,6 +25,7 @@ - Implenent lazy loading for external libraries via dynamic imports. Leads to significantly reduced bundle sizes. - Upgrade pat-calendar to use lates fullcalendar version (5.3.0). - pat tooltip: Use tippy v6 based implementation. +- Allow overriding the public path from outside via the definition of a ``window.__patternslib_public_path__`` global variable. ### Technical diff --git a/README.md b/README.md index 091aa0e06..9185849fa 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,27 @@ which contains Patterns and all its dependencies: Alternatively, you can [download a bundle at patternslib.com](http://patternslib.com/download.html). + +## Overriding the path where JavaScript and other assets are loaded + +The bundle itself is included via a `` +``` + + ## Layout The individual patterns are located in their own folders in `./src/pat/`. diff --git a/src/patterns.js b/src/patterns.js index b83e0ce66..8a97faca4 100644 --- a/src/patterns.js +++ b/src/patterns.js @@ -3,6 +3,7 @@ */ // Import base +import "./public_path"; // first import import registry from "./core/registry"; import jquery from "jquery"; diff --git a/src/public_path.js b/src/public_path.js new file mode 100644 index 000000000..d0a01fb9e --- /dev/null +++ b/src/public_path.js @@ -0,0 +1,3 @@ +// NOTE: Import this file before any other files +// Overwrite path to load resources or use default one. +__webpack_public_path__ = window.__patternslib_public_path__ || "/dist/"; // eslint-disable-line no-undef diff --git a/webpack/base.config.js b/webpack/base.config.js index f98f40cce..1ffed1b87 100644 --- a/webpack/base.config.js +++ b/webpack/base.config.js @@ -9,7 +9,7 @@ const TerserPlugin = require("terser-webpack-plugin"); const DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin"); module.exports = (env) => { - return { + const config = { entry: { "bundle": path.resolve(__dirname, "../src/patterns.js"), "bundle-polyfills": path.resolve(__dirname, "../src/polyfills.js"), @@ -22,8 +22,10 @@ module.exports = (env) => { output: { filename: "[name].js", chunkFilename: "chunks/[name].[contenthash].js", - publicPath: "/dist", - path: path.resolve(__dirname, "../dist"), + path: path.resolve(__dirname, "../dist/"), + // publicPath set in bundle entry points via __webpack_public_path__ + // See: https://webpack.js.org/guides/public-path/ + // publicPath: "/dist/", }, optimization: { minimize: true, @@ -101,4 +103,10 @@ module.exports = (env) => { }), ], }; + if (env.NODE_ENV === "development") { + // Set public path to override __webpack_public_path__ + // for webpack-dev-server + config.output.publicPath = "/dist/"; + } + return config; };