From b056076a4a1b0cdea73ccdf6ae34fc1c0f3a98e6 Mon Sep 17 00:00:00 2001 From: Solovyev Aleksey Date: Wed, 21 Apr 2021 19:00:20 +0300 Subject: [PATCH] Replace simple-nunjucks-loader with njk-loader ## Reason Simplification of working with assets (images, fonts, etc.): - simple-nunjucks-loader doesn't work with data attributes (srcset, data-src, etc) - njk-loader requires no additional function to load images ## Dependencies removed: - simple-nunjucks-loader ## Installed dependencies: - html-loader --- README.md | 3 ++- config/loaders/README.md | 3 ++- config/loaders/nunjucks.loader.js | 28 +++++++++++++--------- config/modules/njk-loader/index.js | 38 ++++++++++++++++++++++++++++++ config/plugins/html.plugin.js | 3 +-- config/utils/getNunjucksGlobals.js | 23 ------------------ package.json | 2 +- src/njk/_layout.njk | 2 +- yarn.lock | 26 +++++++++++--------- 9 files changed, 77 insertions(+), 51 deletions(-) create mode 100644 config/modules/njk-loader/index.js delete mode 100644 config/utils/getNunjucksGlobals.js diff --git a/README.md b/README.md index c535bd2..6a07537 100644 --- a/README.md +++ b/README.md @@ -159,7 +159,8 @@ Indicates whether TypeScript support should be enabled.
### Loaders: - Nunjucks - - [simple-nunjucks-loader](https://github.com/ogonkov/nunjucks-loader) + - [html-loader](https://github.com/webpack-contrib/html-loader) + - [njk-loader(internal)](./config/modules/njk-loader/index.js) - [nunjucks](https://github.com/mozilla/nunjucks) - JavaScript diff --git a/config/loaders/README.md b/config/loaders/README.md index 61a27d0..2fbbd52 100644 --- a/config/loaders/README.md +++ b/config/loaders/README.md @@ -1,7 +1,8 @@ # 📘 Loaders ## Nunjucks -- [simple-nunjucks-loader](https://github.com/ogonkov/nunjucks-loader) +- [html-loader](https://github.com/webpack-contrib/html-loader) +- [njk-loader(internal)](../modules/njk-loader/index.js) - [nunjucks](https://github.com/mozilla/nunjucks) ## JavaScript diff --git a/config/loaders/nunjucks.loader.js b/config/loaders/nunjucks.loader.js index c2e0ef5..4324760 100644 --- a/config/loaders/nunjucks.loader.js +++ b/config/loaders/nunjucks.loader.js @@ -1,5 +1,6 @@ +const path = require('path') +const { SOURCE_DIR } = require('../constants') const createThreadLoader = require('../utils/createThreadLoader') -const getNunjucksGlobals = require('../utils/getNunjucksGlobals') /** @@ -11,21 +12,25 @@ const threadLoader = createThreadLoader({ }) +/** + * Exports HTML as string. + * https://github.com/webpack-contrib/html-loader + */ +const htmlLoader = { + loader: 'html-loader', + options: { } +} + + /** * Transpiles nunjucks files into HTML files. - * https://github.com/ogonkov/nunjucks-loader + * ../modules/njk-loader */ const nunjucksLoader = { - loader: 'simple-nunjucks-loader', + loader: path.resolve('./config/modules/njk-loader'), options: { - searchPaths: ['src/njk'], - assetsPaths: ['src/images'], - globals: { - ...getNunjucksGlobals('functions') - }, - filters: { - ...getNunjucksGlobals('filters') - } + context: require(path.resolve(SOURCE_DIR, 'data', 'nunjucks.data.js')), + templates: 'njk' } } @@ -34,6 +39,7 @@ module.exports = { test: /\.(njk|nunjucks|html)$/i, use: [ threadLoader, + htmlLoader, nunjucksLoader ] } diff --git a/config/modules/njk-loader/index.js b/config/modules/njk-loader/index.js new file mode 100644 index 0000000..90db108 --- /dev/null +++ b/config/modules/njk-loader/index.js @@ -0,0 +1,38 @@ +const path = require('path') +const { Environment, FileSystemLoader } = require('nunjucks') +const { SOURCE_DIR } = require('../../constants') + + +/** + * Transpiles nunjucks files into HTML files. + * https://webpack.js.org/contribute/writing-a-loader + * + * @requires nunjucks + * @requires html-loader + * + * @todo Handle errors + * @todo Hide common code (njk config) + * + * @param {String} source - the contents of the raw resource + * @returns {String} a valid HTML string + */ +module.exports = function(source) { + const callback = this.async() + const { context, templates } = this.getOptions() + + const env = new Environment( + new FileSystemLoader(path.resolve(SOURCE_DIR, templates)), + { + autoescape: true + } + ) + env.on('load', (name, source, loader) => { + this.addDependency(source.path) + }) + + env.renderString(source, context, (error, HTMLString) => { + callback(error ? error : null, HTMLString) + }) + + return +} diff --git a/config/plugins/html.plugin.js b/config/plugins/html.plugin.js index d513d89..32aeb02 100644 --- a/config/plugins/html.plugin.js +++ b/config/plugins/html.plugin.js @@ -17,7 +17,6 @@ module.exports = fs.readdirSync(SOURCE_DIR).map(templateName => { return new HTMLWebpackPlugin({ template: `${ templateName }`, filename: `${ filename }.html`, - chunks: ['common', filename], - templateParameters: require(path.resolve(SOURCE_DIR, 'data', 'nunjucks.data.js')) + chunks: ['common', filename] }) }).filter(Boolean) diff --git a/config/utils/getNunjucksGlobals.js b/config/utils/getNunjucksGlobals.js deleted file mode 100644 index 8713d21..0000000 --- a/config/utils/getNunjucksGlobals.js +++ /dev/null @@ -1,23 +0,0 @@ -const fs = require('fs') -const path = require('path') -const { SOURCE_DIR } = require('../constants') - - -/** - * Gets the global nunjucks functions from the given directory. - * - * @param {String} directory - the name of a directory - * @returns {Object} an object where filename is the key and the absolute path is the value - */ -module.exports = directory => { - const fullPath = path.resolve(SOURCE_DIR, 'njk', 'globals', directory) - const data = { } - - fs.readdirSync(fullPath).forEach(fileName => { - if (!/\.js$/i.test(fileName)) return false - - data[fileName.split('.')[0]] = path.join(fullPath, fileName) - }) - - return data -} diff --git a/package.json b/package.json index 75ac95a..6e803c8 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "eslint": "^7.24.0", "eslint-webpack-plugin": "^2.5.3", "fork-ts-checker-webpack-plugin": "^6.2.1", + "html-loader": "^2.1.2", "html-webpack-plugin": "^5.3.1", "mini-css-extract-plugin": "^1.4.1", "nunjucks": "^3.2.3", @@ -32,7 +33,6 @@ "postcss-loader": "^5.2.0", "sass": "^1.32.8", "sass-loader": "^11.0.1", - "simple-nunjucks-loader": "^3.1.0", "style-loader": "^2.0.0", "stylelint": "^13.12.0", "stylelint-webpack-plugin": "^2.1.1", diff --git a/src/njk/_layout.njk b/src/njk/_layout.njk index 91328f1..1cd2c59 100644 --- a/src/njk/_layout.njk +++ b/src/njk/_layout.njk @@ -4,7 +4,7 @@ {{ '[Dev] ' if isDev }}{{ title }} - + diff --git a/yarn.lock b/yarn.lock index 1659c92..73e11a8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3005,7 +3005,7 @@ glob-to-regexp@^0.4.1: resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e" integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw== -glob@^7.0.3, glob@^7.1.3, glob@^7.1.6: +glob@^7.0.3, glob@^7.1.3: version "7.1.6" resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6" integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA== @@ -3199,7 +3199,15 @@ html-entities@^1.3.1: resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.4.0.tgz#cfbd1b01d2afaf9adca1b10ae7dffab98c71d2dc" integrity sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA== -html-minifier-terser@^5.0.1: +html-loader@^2.1.2: + version "2.1.2" + resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-2.1.2.tgz#17eb111441e863a9308071ed876b4ba861f143df" + integrity sha512-XB4O1+6mpLp4qy/3qg5+1QPZ/uXvWtO64hNAX87sKHwcHkp1LJGU7V3sJ9iVmRACElAZXQ4YOO/Lbkx5kYfl9A== + dependencies: + html-minifier-terser "^5.1.1" + parse5 "^6.0.1" + +html-minifier-terser@^5.0.1, html-minifier-terser@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#922e96f1f3bb60832c2634b79884096389b1f054" integrity sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg== @@ -4616,6 +4624,11 @@ parse-json@^5.0.0: json-parse-even-better-errors "^2.3.0" lines-and-columns "^1.1.6" +parse5@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b" + integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw== + parseurl@~1.3.2, parseurl@~1.3.3: version "1.3.3" resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4" @@ -5534,15 +5547,6 @@ signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3: resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c" integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA== -simple-nunjucks-loader@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/simple-nunjucks-loader/-/simple-nunjucks-loader-3.1.0.tgz#9cf5495e7c81d9ce2cd3502c6aaa9a48a52af735" - integrity sha512-9sVcCX+PmsghYuQK5rnHM3lUOW+rX7WuIkZZ7Tjeno8r4wP2U/LZ+W8K0ax6y8bm3FUl9lNNvAfywQB985rlcA== - dependencies: - loader-utils "^2.0.0" - optionalDependencies: - glob "^7.1.6" - slash@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"