Skip to content
Permalink
Browse files

feat: base njk loading

  • Loading branch information...
dmelikhov
dmelikhov committed Feb 22, 2019
1 parent 99420c0 commit f0cec8b27424c545ac92d534fb8e2683258cf8e9
@@ -0,0 +1,3 @@
/dist
/node_modules
/__tests__
@@ -0,0 +1,12 @@
{
"extends": "airbnb-base",
"env": {
"jest": true,
"node": true
},
"rules": {
"linebreak-style": 0,
"class-methods-use-this": 0,
"global-require": 0
}
}
@@ -1,61 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
node_modules

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env

# next.js build output
.next
/.idea
.project
.publish
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
.vscode/*

*.DS_Store
.AppleDouble
.LSOverride

Thumbs.db
ehthumbs.db
ehthumbs_vista.db

/stats.json
@@ -1,2 +1,41 @@
# njk-html-loader
Nunjucks HTML loader for webpack
# Njk HTML loader for webpack

## Usage

In your sources:

``` javascript
const html = require('./file.njk')
// => returns file.njk content as html compiled string
```

In your webpack.config.js file:

## Using it with html-loader

`njk-html-loader` encode to content to a string variable to avoid it and pass the string content to the loader chain please use the following configuration:

```javascript
module.exports = {
// your config settings ...
module: {
rules: [{
test: /\.njk$/,
use: [
{
loader: "html-loader"
},
{
loader: 'njk-html-lodaer',
options: {
root: 'path/to/njk files',
data: {
object: data,
},
}
},
],
}],
},
};
```
@@ -0,0 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`data should generate correct code with data object 1`] = `"module.exports = \\"<!DOCTYPE html>\\\\r\\\\n<html lang=\\\\\\"ru\\\\\\">\\\\r\\\\n<head>\\\\r\\\\n <meta charset=\\\\\\"utf-8\\\\\\">\\\\r\\\\n <meta name=\\\\\\"viewport\\\\\\" content=\\\\\\"width=device-width, initial-scale=1, maximum-scale=1\\\\\\">\\\\r\\\\n <meta http-equiv=\\\\\\"X-UA-Compatible\\\\\\" content=\\\\\\"IE=edge\\\\\\">\\\\r\\\\n <meta name=\\\\\\"format-detection\\\\\\" content=\\\\\\"telephone=no\\\\\\">\\\\r\\\\n <meta name=\\\\\\"format-detection\\\\\\" content=\\\\\\"address=no\\\\\\">\\\\r\\\\n <title>Some</title>\\\\r\\\\n</head>\\\\r\\\\n<body>\\\\r\\\\n value\\\\r\\\\n</body>\\\\r\\\\n</html>\\\\r\\\\n\\";"`;

exports[`data should generate correct code with data.json 1`] = `"module.exports = \\"<!DOCTYPE html>\\\\r\\\\n<html lang=\\\\\\"ru\\\\\\">\\\\r\\\\n<head>\\\\r\\\\n <meta charset=\\\\\\"utf-8\\\\\\">\\\\r\\\\n <meta name=\\\\\\"viewport\\\\\\" content=\\\\\\"width=device-width, initial-scale=1, maximum-scale=1\\\\\\">\\\\r\\\\n <meta http-equiv=\\\\\\"X-UA-Compatible\\\\\\" content=\\\\\\"IE=edge\\\\\\">\\\\r\\\\n <meta name=\\\\\\"format-detection\\\\\\" content=\\\\\\"telephone=no\\\\\\">\\\\r\\\\n <meta name=\\\\\\"format-detection\\\\\\" content=\\\\\\"address=no\\\\\\">\\\\r\\\\n <title>Some</title>\\\\r\\\\n</head>\\\\r\\\\n<body>\\\\r\\\\n from file\\\\r\\\\n</body>\\\\r\\\\n</html>\\\\r\\\\n\\";"`;
@@ -0,0 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`data should generate correct code 1`] = `"module.exports = \\"<!DOCTYPE html>\\\\r\\\\n<html lang=\\\\\\"ru\\\\\\">\\\\r\\\\n<head>\\\\r\\\\n <meta charset=\\\\\\"utf-8\\\\\\">\\\\r\\\\n <meta name=\\\\\\"viewport\\\\\\" content=\\\\\\"width=device-width, initial-scale=1, maximum-scale=1\\\\\\">\\\\r\\\\n <meta http-equiv=\\\\\\"X-UA-Compatible\\\\\\" content=\\\\\\"IE=edge\\\\\\">\\\\r\\\\n <meta name=\\\\\\"format-detection\\\\\\" content=\\\\\\"telephone=no\\\\\\">\\\\r\\\\n <meta name=\\\\\\"format-detection\\\\\\" content=\\\\\\"address=no\\\\\\">\\\\r\\\\n <title>Extend</title>\\\\r\\\\n</head>\\\\r\\\\n<body>\\\\r\\\\n <div class=\\\\\\"layout\\\\\\">\\\\r\\\\n \\\\r\\\\n </div>\\\\r\\\\n</body>\\\\r\\\\n</html>\\\\r\\\\n\\";"`;
@@ -0,0 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`data should generate correct code 1`] = `"module.exports = \\"<!DOCTYPE html>\\\\r\\\\n<html lang=\\\\\\"ru\\\\\\">\\\\r\\\\n<head>\\\\r\\\\n <meta charset=\\\\\\"utf-8\\\\\\">\\\\r\\\\n <meta name=\\\\\\"viewport\\\\\\" content=\\\\\\"width=device-width, initial-scale=1, maximum-scale=1\\\\\\">\\\\r\\\\n <meta http-equiv=\\\\\\"X-UA-Compatible\\\\\\" content=\\\\\\"IE=edge\\\\\\">\\\\r\\\\n <meta name=\\\\\\"format-detection\\\\\\" content=\\\\\\"telephone=no\\\\\\">\\\\r\\\\n <meta name=\\\\\\"format-detection\\\\\\" content=\\\\\\"address=no\\\\\\">\\\\r\\\\n <title>Include</title>\\\\r\\\\n</head>\\\\r\\\\n<body>\\\\r\\\\n <div class=\\\\\\"layout\\\\\\">\\\\r\\\\n \\\\r\\\\n\\\\r\\\\n <div>a</div>\\\\r\\\\n\\\\r\\\\n\\\\r\\\\n <div>b</div>\\\\r\\\\n\\\\r\\\\n\\\\r\\\\n <div>c</div>\\\\r\\\\n\\\\r\\\\n\\\\r\\\\n\\\\r\\\\n </div>\\\\r\\\\n</body>\\\\r\\\\n</html>\\\\r\\\\n\\";"`;
@@ -0,0 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`index should generate correct code 1`] = `"module.exports = \\"<!DOCTYPE html>\\\\r\\\\n<html lang=\\\\\\"ru\\\\\\">\\\\r\\\\n<head>\\\\r\\\\n <meta charset=\\\\\\"utf-8\\\\\\">\\\\r\\\\n <meta name=\\\\\\"viewport\\\\\\" content=\\\\\\"width=device-width, initial-scale=1, maximum-scale=1\\\\\\">\\\\r\\\\n <meta http-equiv=\\\\\\"X-UA-Compatible\\\\\\" content=\\\\\\"IE=edge\\\\\\">\\\\r\\\\n <meta name=\\\\\\"format-detection\\\\\\" content=\\\\\\"telephone=no\\\\\\">\\\\r\\\\n <meta name=\\\\\\"format-detection\\\\\\" content=\\\\\\"address=no\\\\\\">\\\\r\\\\n <title>Simple</title>\\\\r\\\\n</head>\\\\r\\\\n<body>\\\\r\\\\n Test template\\\\r\\\\n</body>\\\\r\\\\n</html>\\\\r\\\\n\\";"`;
@@ -0,0 +1,56 @@
const path = require('path');
const webpack = require('webpack');
const memoryfs = require('memory-fs');

module.exports = (fixture, options = {}) => {
const compiler = webpack({
mode: 'none',

context: __dirname,

entry: `./${fixture}`,

output: {
path: path.resolve(__dirname),
filename: 'bundle.js',
},

module: {
rules: [{
test: /\.njk$/,
use: [
{
loader: "html-loader"
},
{
loader: path.resolve(process.cwd(), 'index.js'),
options: {
root: options.root,
data: options.data,
}
},
],
}],
},
});

compiler.outputFileSystem = new memoryfs();

return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
const problem = err || stats.compilation.errors[0] || stats.compilation.warnings[0];

if (problem) {
const message = typeof problem === 'string' ? problem : 'Unexpected error';
const error = new Error(problem.message || message);

error.originalError = problem;
error.stats = stats;

return reject(error);
}

resolve(stats);
});
});
};
@@ -0,0 +1,3 @@
{
"var": "from file"
}
@@ -0,0 +1,22 @@
const { readFileSync } = require('fs');
const path = require('path');

const compiler = require('./compiler');

describe('data', () => {
test('should generate correct code with data object', async () => {
const stats = await compiler('fixtures/data.njk', { data: { some: 'value' } });
const output = stats.toJson().modules[0].source;

expect(output).toMatchSnapshot();
});

test('should generate correct code with data.json', async () => {
const stats = await compiler('fixtures/data-json.njk', {
data: JSON.parse(readFileSync(path.resolve(__dirname, './data.json'), 'utf-8'))
});
const output = stats.toJson().modules[0].source;

expect(output).toMatchSnapshot();
});
});
@@ -0,0 +1,14 @@
const path = require('path');

const compiler = require('./compiler');

describe('data', () => {
test('should generate correct code', async () => {
const stats = await compiler('fixtures/extend.njk', {
root: path.resolve(__dirname, 'fixtures'),
});
const output = stats.toJson().modules[0].source;

expect(output).toMatchSnapshot();
});
});
@@ -0,0 +1 @@
<div>a</div>
@@ -0,0 +1 @@
<div>b</div>
@@ -0,0 +1 @@
<div>c</div>
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<title>{{ title }}</title>
</head>
<body>
<div class="layout">
{% block body %} {% endblock %}
</div>
</body>
</html>
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<title>Some</title>
</head>
<body>
{{ var }}
</body>
</html>
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<title>Some</title>
</head>
<body>
{{ some }}
</body>
</html>
@@ -0,0 +1,3 @@
{% extends "components/layout.njk" %}

{% set title = "Extend" %}
@@ -0,0 +1,13 @@
{% extends "components/layout.njk" %}

{% set title = "Include" %}

{% block body %}

{% include "components/a.njk" %}

{% include "components/b.njk" %}

{% include "components/c.njk" %}

{% endblock %}
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<title>Simple</title>
</head>
<body>
Test template
</body>
</html>
@@ -0,0 +1,14 @@
const path = require('path');

const compiler = require('./compiler');

describe('data', () => {
test('should generate correct code', async () => {
const stats = await compiler('fixtures/include.njk', {
root: path.resolve(__dirname, 'fixtures'),
});
const output = stats.toJson().modules[0].source;

expect(output).toMatchSnapshot();
});
});
@@ -0,0 +1,10 @@
const compiler = require('./compiler');

describe('index', () => {
test('should generate correct code', async () => {
const stats = await compiler('fixtures/index.njk', { });
const output = stats.toJson().modules[0].source;

expect(output).toMatchSnapshot();
});
});
@@ -0,0 +1,16 @@
const loaderUtils = require('loader-utils');

const Loader = require('./lib/loader');

module.exports = async function (source) {
const options = loaderUtils.getOptions(this);
const callback = this.async();

try {
const loader = new Loader(source, this, options.root);

callback(null, await loader.render(options.data));
} catch (exc) {
callback(exc);
}
};

0 comments on commit f0cec8b

Please sign in to comment.
You can’t perform that action at this time.