frctl / nunjucks Goto Github PK
View Code? Open in Web Editor NEWUse Nunjucks templates with Fractal
Use Nunjucks templates with Fractal
Hi there! I'm hoping this is a case of user error, but if it is, I can't figure out how to fix it and would appreciate some help.
I've got a barebones install of Fractal and switched to using Nunjucks instead of Handlebars. When I try to reference a component from another component, it's not being parsed as HTML, but rather as HTML characters.
For example:
<p>{{ text }}</p>
{% render '@button', {label: 'Test'} %}
results in
My expectation is that it would render the actual button like in the image below. That does happen if I use {% include '@button' %}
instead, but then I lose the ability to pull in the context data.
For reference, here is the relevant part of the fractal.js
file:
const components = fractal.components;
components.engine("@frctl/nunjucks");
components.set("ext", ".njk");
components.set("default.preview", "@preview");
Any help is much appreciated. Thank you! 🙏
Is there a reason why Nunjucks autoescaping is switched off, rather than leaving it on? It appears to be done on this line: https://github.com/frctl/nunjucks/blob/master/src/adapter.js#L91
I had assumed the usual auto-escaping and this behaviour caught me out. Would it be possible to leave auto-escaping on by default and/or make it configurable?
Maybe something like this:
const nunj = require('@frctl/nunjucks')({
// filters, globals, extensions...
autoescape: true
}
I have configured fractal to use Nunjucks and to use static assets:
'use strict';
const fractal = module.exports = require('@frctl/fractal').create();
fractal.web.set('static.path', __dirname+'/public');
fractal.set('project.title', 'FooCorp Component Library');
fractal.docs.set('path', __dirname + '/src/docs');
fractal.docs.engine('@frctl/nunjucks');
fractal.components.set('path', __dirname + '/src/components');
fractal.components.engine('@frctl/nunjucks');
fractal.components.set('ext', '.html');
And I have an alert component inside the following directory structure:
/src
/components
/alert
_preview.html
alert.html
alert.config.json
alert.css
alert.js
/public
/css
demo.css
The _preview.html contains this HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- doesn't work -->
<link media="all" rel="stylesheet" href="{{ '/public/css/demos.css' | path }}">
<!-- doesn't work -->
<link media="all" rel="stylesheet" href="{{ '/css/demos.css' | path }}">
<!-- Does work but have to put the word raw in -->
<link media="all" rel="stylesheet" href="{{ '/components/raw/alert/alert.css' | path }}">
<title>Preview Layout</title>
</head>
<body>
{{ yield }}
<script src="{{ '/components/raw/alert/alert.js' | path }}">
</body>
</html>
The problem is both attempts to reference css in the public directory fail.
Also, is it right that I had to specifiy "raw" in the path for the component CSS file?
I will occasionally encounter an error very much like the one below when editing a component's HTML or context data. Upon encountering it—through the page auto-refreshing or through refreshing the Fractal page manually—Fractal's auto-compilation will cease working and the local server will stop.
Unhandled rejection TypeError: Converting circular structure to JSON
at JSON.stringify (<anonymous>)
at source.resolve.then.context (/Users/kim/Sites/ClientName/node_modules/@frctl/nunjucks/src/extensions/render.js:41:43)
at bound (domain.js:396:14)
at runBound (domain.js:409:12)
at tryCatcher (/Users/kim/Sites/ClientName/node_modules/bluebird/js/release/util.js:16:23)
at Promise._settlePromiseFromHandler (/Users/kim/Sites/ClientName/node_modules/bluebird/js/release/promise.js:512:31)
at Promise._settlePromise (/Users/kim/Sites/ClientName/node_modules/bluebird/js/release/promise.js:569:18)
at Promise._settlePromise0 (/Users/kim/Sites/ClientName/node_modules/bluebird/js/release/promise.js:614:10)
at Promise._settlePromises (/Users/kim/Sites/ClientName/node_modules/bluebird/js/release/promise.js:693:18)
at Async._drainQueue (/Users/kim/Sites/ClientName/node_modules/bluebird/js/release/async.js:133:16)
at Async._drainQueues (/Users/kim/Sites/ClientName/node_modules/bluebird/js/release/async.js:143:10)
at Immediate.Async.drainQueues [as _onImmediate] (/Users/kim/Sites/ClientName/node_modules/bluebird/js/release/async.js:17:14)
at runCallback (timers.js:696:18)
at tryOnImmediate (timers.js:667:5)
at processImmediate (timers.js:649:5)
at process.topLevelDomainCallback (domain.js:121:23)
(Actual client's name replaced with ClientName
to protect the innocent.)
I cannot offer an explanation or reproduction case for why this happens. Sometimes adding a new line of context data will trigger it—sometimes removing that line will resolve it, sometimes it won't; sometimes editing the key/value of the line in YAML will resolve it, sometimes it won't.)
Likewise when editing HTML. Sometimes a component will be fine, but trying to render it from another component (via {% render '@component' %}
) will cause the error. There seems to be little consistency to it occurring, other than it occurs.
Sorry for the vague issue report, but I can't find any mention or fix for this this elsewhere, and figured this would be the best place for it.
Node version: 10.4.0
Fractal version: 1.1.7
Fractal Nunjucks version: 1.0.3
Nunjucks version: 2.5.2
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.