Giter Club home page Giter Club logo

nunjucks's People

Contributors

allmarkedup avatar dependabot[bot] avatar jameswragg avatar khawkins98 avatar lebenleben avatar mihkeleidast avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

peymanmh steviant-zz zolk krzysztoffpl lebenleben sequencemedia jameswragg allmarkedup mcseptian

nunjucks's Issues

Path to public assets not working

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?

Occasional, inconsistent "Converting circular structure to JSON" error

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

Render extension not being parsed as HTML

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

Screen Shot 2019-04-23 at 4 46 41 PM

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.
Screen Shot 2019-04-23 at 4 47 39 PM

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! 🙏

Autoescaping is switched off

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
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.