How to include jade into another jade

[kresli]

Hi, Currently I have an error when I trying to include one jade to another.

here is the log

    2|     type="text/ng-template"
    3|     id="kg-courieriser-level-list-template.html" )
  > 4|     include ./par/kg-courieriser-level-list-template.jade
    5| script(
    6|     type="text/ng-template"
    7|     id="kg-courieriser-level-form-template.html" )

the "filename" option is required to use "include" with "relative" paths
    at Parser.resolvePath 

Its because the plugin using jade.compile() but its not passing current filename or basedir to the compiler. Is there any way how I can force to render this subtemplate?

[johnsoftek]

@guybedford A Jade file can include another Jade file, by absolute or relative path.

In order to support this feature, the Jade plugin needs access to the un-normalized name of the .jade file in order to pass a filename option to jade.compileClient

However, the documentation on the SystemJS Loading Pipeline states:

The pipeline is not fed any information about the un-normalized module name

It also states:

If userland code really wants to get access to that information it can save it in a side table

I have no idea what that means. Can you shed any light?

[guybedford]

@johnsoftek can't you just pass the filename value as load.address here? That should then allow URL-relative loading, although without some resolve hook in the plugin, that won't allow loading templates from other packages.

[johnsoftek]

@guybedford The Jade compiler uses fs.readFileSync to parse included files. That maybe works while bundling but not with client loading.

[guybedford]

@johnsoftek so are you saying that it will run fs.readFileSync in the browser to load URLs of the form /...? That sounds like a very strange loading mechanism?

[johnsoftek]

@guybedford Hmm. There is a browserify version of Jade that runs in the browser. I will see how that works.

Sent from my phone On 25 Aug 2015 11:08 pm, "Guy Bedford" notifications@github.com wrote:

@johnsoftek https://github.com/johnsoftek so are you saying that it will run fs.readFileSync in the browser to load URLs of the form /...? That sounds like a very strange loading mechanism?

— Reply to this email directly or view it on GitHub https://github.com/johnsoftek/plugin-jade/issues/8#issuecomment-134579438 .

[johnsoftek]

@guybedford The browserify version also uses fs.readFileSync for file imports. I guess that means that import is not available in the browser environment.

Now that the other issue #9 with System.js has been resolved, I tried jspm bundle thinking that bundle runs under node js so fs.readFileSync should be available. No such luck. How come the fs module is not available for bundling?

[guybedford]

@johnsoftek fs.readFileSync should definitely be available and working during bundling in jspm. Can you share a test case if this isn't working for you?

[johnsoftek]

@guybedford Just clone this repo, include branch and run the bundle test as per readme:

jspm install
npm install
jspm bundle app
npm test bundle

[guybedford]

@johnsoftek fs.readFileSync is disabled by https://github.com/jadejs/jade/blob/master/package.json#L79. This is because jspm doesn't have code branching between client and server as a feature yet. Overriding the browser property in the package.json fixes this - jspm install npm:jade -o "{browser:{}}", but then seems to hit an uglify error. Let me know if you need further help at all continuing to get this going, happy to dive in.

[johnsoftek]

@guybedford I am not sure it's worth the effort to fix bundling alone. I was merely attempting to verify that jade import would work on the server and not in the browser due to the absence of fs. There are other options to pre-compile Jade files that use import.

Sent from my phone On 2 Sep 2015 5:47 pm, "Guy Bedford" notifications@github.com wrote:

@johnsoftek https://github.com/johnsoftek fs.readFileSync is disabled by https://github.com/jadejs/jade/blob/master/package.json#L79. This is because jspm doesn't have code branching between client and server as a feature yet. Overriding the browser property in the package.json fixes this - jspm install npm:jade -o "{browser:{}}", but then seems to hit an uglify error. Let me know if you need further help at all continuing to get this going, happy to dive in.

— Reply to this email directly or view it on GitHub https://github.com/johnsoftek/plugin-jade/issues/8#issuecomment-136965932 .

[johnsoftek]

No obvious fix - closing.

[guybedford]

The best way to handle things like modular template languages is if the include syntax can be compiled into a modular import.

Eg to compile:

//- index.jade
doctype html
html
  include ./includes/head.jade
  body
    h1 My Site
    p Welcome to my super lame site.
    include ./includes/foot.jade

into

var template1 = require('./includes/head.jade');

module.exports = function(tplOpts) {
  return '//- index.jade\n<doctype html>\n<html>\n' + template1() + '<body>' + ... etc
};

sort of idea.

[johnsoftek]

@guybedford Thanks for the suggestion.

On 2 January 2016 at 13:46, Guy Bedford notifications@github.com wrote:

The best way to handle things like modular template languages is if the include syntax can be compiled into a modular import.

Eg to compile:

//- index.jade doctype html html include ./includes/head.jade body h1 My Site p Welcome to my super lame site. include ./includes/foot.jade

into

var template1 = require('./includes/head.jade'); module.exports = function(tplOpts) { return '//- index.jade\n\n\n' + template1() + '' + ... etc };

sort of idea.

— Reply to this email directly or view it on GitHub https://github.com/johnsoftek/plugin-jade/issues/8#issuecomment-168430598 .

[johnsoftek]

@guybedford I see a problem with the suggested approach: invoking the template functions for the included files returns html, whereas the top level code is raw Jade. What I would like to do is load the include files as text, embed the text in place of the include statements and then pass the assembled Jade text to the Jade compiler. Maybe I can use code from the text plug in?

[guybedford]

@johnsoftek it's a decision a plugin needs to make - does it want to load its sub-resources as modules themselves and treat them as part of SystemJS's dynamic link graph, or does it want to run a custom internal loading process that effectively acts like a static build. I tend to think the full dynamic link graph approach is the nicest, but yes it does involve rewriting template languages to ways they are not used to working. Certainly feel free to run a custom fetch / build cycle per module.

[johnsoftek]

@guybedford I am moving forward with the dynamic loading approach.

The plugin was very simple to begin with. Now that it is a little more complex, I would like to code in ES2015. Is that possible? What would be the equivalent of exports.translate = function(...) {...}?

[johnsoftek]

"include" is now implemented in 0.6.0