Merge branch 'release/2.3.0' into craft-webpack

CHANGELOG.md

@@ -1,5 +1,14 @@
 # nystudio107/craft Change Log
 
+## 2.3.0 - 2020.08.02
+### Added
+* Add native image lazy loading
+* Slim Docker containers after build
+
+### Fixed
+* Refactored Docker config to use more sane contexts during builds, speeding up build time immensely 🎩 Patrick
+* Change `throwExceptions` deprecator config to use `App::env('DEV_MODE')`
+
 ## 2.2.13 - 2020.07.18
 ### Changed
 * Disable the ForkTS plugins for now

docker-config/webpack-dev-craft/package.json → buildchain/package.json

@@ -134,6 +134,7 @@
     "dependencies": {
         "axios": "^0.19.0",
         "core-js": "^3.0.0",
+        "lazysizes": "^5.2.2",
         "regenerator-runtime": "^0.13.2",
         "tailwindcss": "^1.0.0",
         "vue": "^3.0.0-beta.14",

docker-config/webpack-dev-craft/webpack.common.js → buildchain/webpack.common.js

@@ -6,6 +6,9 @@ const MODERN_CONFIG = 'modern';
 const path = require('path');
 const merge = require('webpack-merge');
 
+// webpack
+const webpack = require('webpack');
+
 // webpack plugins
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 /* -- Does not yet work with Vue 3
@@ -152,21 +155,26 @@ const baseConfig = {
     plugins: [
         new WebpackNotifierPlugin({title: 'Webpack', excludeWarnings: true, alwaysNotify: true}),
         new VueLoaderPlugin(),
-/* -- Does not yet work with Vue 3
-        new ForkTsCheckerWebpackPlugin({
-            typescript: {
-                configFile: '../../tsconfig.json',
-                extensions: {
-                    vue: true
-                }
-            }
-        }),
-        new ForkTsCheckerNotifierWebpackPlugin({
-            title: 'Webpack',
-            excludeWarnings: true,
-            alwaysNotify: false,
+        /* -- https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags */
+        new webpack.DefinePlugin({
+            __VUE_OPTIONS_API__: true,
+            __VUE_PROD_DEVTOOLS__: false
         }),
- */
+        /* -- Does not yet work with Vue 3
+                new ForkTsCheckerWebpackPlugin({
+                    typescript: {
+                        configFile: '../../tsconfig.json',
+                        extensions: {
+                            vue: true
+                        }
+                    }
+                }),
+                new ForkTsCheckerNotifierWebpackPlugin({
+                    title: 'Webpack',
+                    excludeWarnings: true,
+                    alwaysNotify: false,
+                }),
+         */
     ]
 };
 

docker-config/webpack-dev-craft/webpack.settings.js → buildchain/webpack.settings.js

@@ -10,17 +10,17 @@ module.exports = {
     copyright: "Example Company, Inc.",
     paths: {
         src: {
-            base: "../../src/",
-            css: "../../src/css/",
-            js: "../../src/js/"
+            base: "../src/",
+            css: "../src/css/",
+            js: "../src/js/"
         },
         dist: {
-            base: "../../cms/web/dist/",
+            base: "../cms/web/dist/",
             clean: [
                 '**/*',
             ]
         },
-        templates: "../../cms/templates/"
+        templates: "../cms/templates/"
     },
     urls: {
         live: "https://example.com/",
@@ -33,20 +33,21 @@ module.exports = {
     },
     entries: {
         "app": "app.ts",
-    },
+        "lazysizes-wrapper": "utils/lazysizes-wrapper.ts",
+   },
     babelLoaderConfig: {
         exclude: [
             /(node_modules|bower_components)/
         ],
     },
     copyWebpackConfig: [
         {
-            from: "../../src/js/workbox-catch-handler.js",
+            from: "../src/js/workbox-catch-handler.js",
             to: "js/[name].[ext]"
         }
     ],
     criticalCssConfig: {
-        base: "../../cms/web/dist/criticalcss/",
+        base: "../cms/web/dist/criticalcss/",
         suffix: "_critical.min.css",
         criticalHeight: 1200,
         criticalWidth: 1200,
@@ -92,12 +93,12 @@ module.exports = {
     },
     purgeCssConfig: {
         paths: [
-            "../../cms/templates/**/*.{twig,html}",
-            "../../src/vue/**/*.{vue,html}",
+            "../cms/templates/**/*.{twig,html}",
+            "../src/vue/**/*.{vue,html}",
             "./node_modules/vuetable-2/src/components/**/*.{vue,html}",
         ],
         whitelist: [
-            "../../src/css/components/**/*.{css}"
+            "../src/css/components/**/*.{css}"
         ],
         whitelistPatterns: [],
         extensions: [
@@ -125,7 +126,7 @@ module.exports = {
         ],
     },
     webappConfig: {
-        logo: "../../src/img/favicon-src.png",
+        logo: "../src/img/favicon-src.png",
         prefix: "img/favicons/"
     },
     workboxConfig: {
@@ -139,7 +140,7 @@ module.exports = {
             /\.map$/,
             /^manifest.*\\.js(?:on)?$/,
         ],
-        globDirectory: "../../web/",
+        globDirectory: "../web/",
         globPatterns: [
             "offline.html",
             "offline.svg"

cms/config/app.php

@@ -28,7 +28,7 @@
     'bootstrap' => ['site-module'],
     'components' => [
         'deprecator' => [
-            'throwExceptions' => YII_DEBUG,
+            'throwExceptions' => App::env('DEV_MODE'),
         ],
         'redis' => [
             'class' => yii\redis\Connection::class,

cms/config/db.php

@@ -11,12 +11,13 @@
 use craft\helpers\App;
 
 return [
+    'dsn' => App::env('DB_DSN') ?: null,
     'driver' => App::env('DB_DRIVER'),
     'server' => App::env('DB_SERVER'),
+    'port' => App::env('DB_PORT'),
+    'database' => App::env('DB_DATABASE'),
     'user' => App::env('DB_USER'),
     'password' => App::env('DB_PASSWORD'),
-    'database' => App::env('DB_DATABASE'),
     'schema' => App::env('DB_SCHEMA'),
     'tablePrefix' => App::env('DB_TABLE_PREFIX'),
-    'port' => App::env('DB_PORT'),
 ];

cms/templates/_boilerplate/_layouts/base-html-layout.twig

@@ -75,6 +75,9 @@
     {{ craft.twigpack.includeJsModule("app.js", true) }}
     {{ craft.twigpack.includeJsModule("styles.js", true) }}
 
+    {# -- Inline JS #}
+    {% include "_boilerplate/_partials/body-js.twig" %}
+
     {# -- Any JavaScript that should be included before </body> -- #}
     {% block bodyJs %}
     {% endblock bodyJs %}

cms/templates/_boilerplate/_partials/body-js.twig

@@ -0,0 +1,4 @@
+{# -- Shim to handle lazy image loading if native isn't available -- #}
+<script>
+    {{ include("_inline-js/lazyload-image-shim.js") }}
+</script>

cms/templates/_inline-js/lazyload-image-shim.js

@@ -0,0 +1,19 @@
+// From https://web.dev/native-lazy-loading/#how-do-i-handle-browsers-that-don't-yet-support-native-lazy-loading
+if ('loading' in HTMLImageElement.prototype) {
+    // Replace the img.src with what is in the data-src property
+    const images = document.querySelectorAll('img[loading="lazy"]');
+    images.forEach(img => {
+        img.src = img.dataset.src;
+    });
+    // Replace the source.srcset with what is in the data-srcset property
+    const sources = document.querySelectorAll('source[data-srcset]')
+    sources.forEach(source => {
+        source.srcset = source.dataset.srcset;
+    });
+} else {
+   // Dynamically import the LazySizes library
+    const script = document.createElement('script');
+    script.src =
+        '{{ craft.twigpack.getModuleUri("lazysizes-wrapper.js", "legacy") }}';
+    document.body.appendChild(script);
+}

composer.json

@@ -1,7 +1,7 @@
 {
   "name": "craftcms/craft",
   "description": "nystudio107 Craft 3.4 CMS scaffolding project",
-  "version": "2.2.13",
+  "version": "2.3.0",
   "keywords": [
     "craft",
     "cms",

docker-compose.yml

@@ -4,8 +4,8 @@ services:
   # nginx - web server
   nginx:
     build:
-      context: .
-      dockerfile: ./docker-config/nginx/Dockerfile
+      context: ./docker-config/nginx
+      dockerfile: ./Dockerfile
     env_file: &env
       - ./cms/.env
     links:
@@ -18,8 +18,8 @@ services:
   # php - personal home page
   php:
     build:
-      context: .
-      dockerfile: ./docker-config/php-dev-craft/Dockerfile
+      context: ./docker-config/php-dev-craft
+      dockerfile: ./Dockerfile
     depends_on:
       - "mariadb"
       - "redis"
@@ -39,8 +39,8 @@ services:
   # mariadb - database
   mariadb:
     build:
-      context: .
-      dockerfile: ./docker-config/mariadb/Dockerfile
+      context: ./docker-config/mariadb
+      dockerfile: ./Dockerfile
     env_file:
       *env
     environment:
@@ -55,22 +55,23 @@ services:
   # redis - key/value database for caching & php sessions
   redis:
     build:
-      context: .
-      dockerfile: ./docker-config/redis/Dockerfile
+      context: ./docker-config/redis
+      dockerfile: ./Dockerfile
     expose:
       - "6379"
   # webpack - frontend build system
   webpack:
     build:
-      context: .
-      dockerfile: ./docker-config/webpack-dev-craft/Dockerfile
+      context: ./docker-config/node-dev-webpack
+      dockerfile: ./Dockerfile
     env_file:
       *env
     ports:
       - "8080:8080"
     volumes:
-      - ./docker-config/webpack-dev-craft:/var/www/project/docker-config/webpack-dev-craft:cached
-      - ./docker-config/webpack-dev-craft/node_modules:/var/www/project/docker-config/webpack-dev-craft/node_modules:delegated
+      - ./tsconfig.json:/var/www/project/tsconfig.json:cached
+      - ./buildchain:/var/www/project/buildchain:cached
+      - ./buildchain/node_modules:/var/www/project/buildchain/node_modules:delegated
       - ./cms/web/dist:/var/www/project/cms/web/dist:delegated
       - ./src:/var/www/project/src:cached
       - ./cms/templates:/var/www/project/cms/templates:cached

docker-config/nginx/Dockerfile

@@ -1,3 +1,3 @@
 FROM nginx:1.16
 
-COPY ./docker-config/nginx/default.conf /etc/nginx/conf.d/default.conf
+COPY ./default.conf /etc/nginx/conf.d/default.conf

docker-config/webpack-dev-base/Dockerfile → docker-config/node-dev-base/Dockerfile

@@ -44,4 +44,10 @@ RUN apt-get update \
         libnss3 \
         lsb-release \
         wget \
-        xdg-utils
+        xdg-utils \
+    # Clean apt repo caches that don't need to be part of the image
+    && \
+    apt-get clean \
+    && \
+    # Clean out directories that don't need to be part of the image
+    rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

docker-config/webpack-dev-craft/Dockerfile → docker-config/node-dev-webpack/Dockerfile

@@ -1,8 +1,6 @@
-FROM nystudio107/webpack-dev-base
+FROM nystudio107/node-dev-base
 
-WORKDIR /var/www/project/docker-config/webpack-dev-craft/
-
-COPY ./docker-config/webpack-dev-craft/tsconfig.json /var/www/project/tsconfig.json
+WORKDIR /var/www/project/buildchain/
 
 # Run our webpack build in debug mode
 

docker-config/php-dev-base/Dockerfile

@@ -56,7 +56,13 @@ RUN apt-get update \
     docker-php-ext-enable \
         imagick \
         redis \
-        xdebug
+        xdebug \
+    # Clean apt repo caches that don't need to be part of the image
+    && \
+    apt-get clean \
+    && \
+    # Clean out directories that don't need to be part of the image
+    rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
 
 # Append our php.ini overrides to the end of the file
 RUN echo "upload_max_filesize = 10M" > /usr/local/etc/php/php.ini && \

docker-config/php-dev-craft/Dockerfile

@@ -12,13 +12,16 @@ RUN apt-get update \
         pdo_mysql \
     && \
     # Install Composer
-    curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin/ --filename=composer
+    curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin/ --filename=composer \
+    # Clean apt repo caches that don't need to be part of the image
+    && \
+    apt-get clean \
+    && \
+    # Clean out directories that don't need to be part of the image
+    rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
 
 WORKDIR /var/www/project
 
-# Copy over the directories/files php needs access to
-COPY --chown=www-data:www-data ./cms/composer.* /var/www/project/cms/
-
 # Create the storage directory and make it writeable by PHP
 RUN mkdir -p /var/www/project/cms/storage && \
     mkdir -p /var/www/project/cms/storage/runtime && \

src/js/@types/shims.d.ts

@@ -1 +1,2 @@
 declare module "app";
+declare module "lazysizes";