Possible solution to allowing dynamic include

[smaili]

There's so many issues that are open regarding this I honestly am not sure which one (if any) is the main/active one so I'm creating a new ticket that I hope may offer a solution :)

As I understand correctly, the reason for currently not having the ability for dynamic includes is due to compilation. Assuming that is correct, I would like to propose allowing the use of dynamic include with the constraint that you must give some sort of compiler annotation that provides a list of all possible values of that dynamic include.

For example, say I have the template main.jade:

//- main.jade
-
    var name = '';
    if ( input === 'a' ) name = 'a';
    else if ( input === 'b' ) name = 'b';
    else if ( input === 'c' ) name = 'c';
    else name = 'd';

include /templates/#{ name }

In order to let the compiler know all of the possible files that may be included, we just include some kind of special annotation.

//- main.jade
-
    var name = '';
    if ( input === 'a' ) name = 'a';
    else if ( input === 'b' ) name = 'b';
    else if ( input === 'c' ) name = 'c';
    else name = 'd';

//- Give the compiler key/value list of possible values for each variable used in the include
include /templates/#{ name }//-{ name: [ 'a', 'b', 'c', 'd' ] }

[codewreaker]

I agree with this post. I am also suggesting this option for angular

    section(data-ng-repeat="menu in menus")
        include ./{{menu.url

[smaili]

Thanks @codewreaker! Your code inspired me to think of another possible format that is actually more consistent with Jade:

//- main.jade
-
    var name = '';
    if ( input === 'a' ) name = 'a';
    else if ( input === 'b' ) name = 'b';
    else if ( input === 'c' ) name = 'c';
    else name = 'd';

//- Give the key/value list as an attribute list
include( name=[ 'a', 'b', 'c', 'd' ] ) /templates/#{ name }

[acidjazz]

I can specify 10+ examples where this would make my life so much easier with my projects

[acidjazz]

Here is one I am working on right now, data.project is a massive object populating projects on an HTML page, imagine how awesome this code would look like if I had dynamic includes!

  - var project = data.project.threedr

  .project
    include _header
    .body
      include threedr
    include _credits

  - var project = data.project.versus

  .project
    include _header
    .body
      include versus
    include _credits

  include ../inc/bottom

[ForbesLindesay]

This idea could actually work moderately ok. e.g. we could have:

include ./templates/{name:a,b,c}.jade

Which could automatically be expanded into:

case name
  when 'a'
    include ./templates/a.jade
  when 'b'
    include ./templates/b.jade
  when 'c'
    include ./templates/c.jade
  default
    - throw new Error('"name" must be "a", "b" or "c"')

Thoughts:

1. I'd prefer the possible values of name to be specified directly with the input name. That way the tight coupling between the two is more apparent.
2. Don't reuse the #{...} syntax because the content is much more restricted, and not plain JavaScript. In this environment I think something like {...} would probably work fine.
3. Although it might be possible to do something fairly similar for extends, it would have a much higher overhead, because it would require building the entire template multiple times.

[ForbesLindesay]

If anyone wants to have a go at implementing this:

1. Check out jade-filters/lib/handle-filters.js for an example of a transformer that is applied to a jade AST.
2. Check out jadejs/jade-parser for examples of how to create an "include" node and a case/when/code node that can be consumed by the later stages of the compilation pipeline.
3. In jadejs/jade You will need to replace:

- parse: parse,
+ parse: function (tokens, filename) {
+   var ast = parse(tokens, filename);
+   ast = handleDynamicIncludes(ast);
+   return ast;
+ }

[codewreaker]

This is so true. I hear they are working on this for the next version.

On Thu, Aug 6, 2015 at 8:10 AM, kevin olson notifications@github.com
wrote:

[image: image]
https://cloud.githubusercontent.com/assets/967369/9105740/733ba604-3bcf-11e5-845f-06bc3b16a542.png

I can specify 10+ examples where this would make my life so much easier
with my projects

—
Reply to this email directly or view it on GitHub
#2030 (comment).

Kind Regards,
Israel Agyeman-Prempeh

[nullivex]

I am working on a system where I need to be able to render remote jade files on to the main and I guess jade is handling the path inclusion differently than I expected.

Most importantly I want to dynamically point at my layout.jade with a constant.

extends MY_CONSTANT_ROOT + '/layout.jade'

Would this discussion pertain to that or is it different?

[nullivex]

My goal is that I want to prevent my sub views from doing something lame like this.

extends ../../../../interfaces/admin/view/layout

Where it becomes a guessing game at what to point to. Am I barking up the wrong tree?

[ForbesLindesay]

@nullivex This has been discussed at length in other issues. You can use the basedir option, but note that the can only be one basedir to avoid confusion. No, there won't be an option to have multiple basedirs as this would be an anti-pattern and lead to terrible code. No, you can't have fully dynamic include or extends because it's impossible to implement efficiently. If you really really need this, fork jade and build your own implementation of jade-load and jade-linker with your desired behaviour.

[nullivex]

@ForbesLindesay Thanks for the response. I am going to try the basedir option and see how it helps me.

Honestly, I was having trouble setting up a google query that would yield any usable response on the subject. Apologies for the double post.

Thanks

[nullivex]

@ForbesLindesay Alright, that setting works great. Thanks for pointing that out.

Also I just want to say thank you to Jade. The only template engine I have ever used that didnt make me want to make my own (including a few of my own that still didnt accomplish it).

THANK YOU!!