making it possible to include html and jade files

[geyang]

Hi,
Thanks for this great module!

I am interested in writing a plugin/transformer to include .jade files inside typescript.

There is currently a transform called jadeify, but it does not work with tsify.

How can I get started?

There is an issue I filed there: using with tsify plugin, only jade in the index.ts file is interpolated

Thanks!

[geyang]

Hi,

I got the following transform:

the problem is that if I output the module body with the es5 syntax, typescript gives me errors.
Yet if I use typescript syntax in the moduleBody variable, browserify gives me errors.

"use strict";

var through = require("through");
var jade = require("jade");

module.exports = function (fileName, options) {
    if (!/\.jade$/i.test(fileName)) {
        return through();
    }

    options.runtimePath = options.runtimePath === undefined ? "jade/runtime" : options.runtimePath;

    var inputString = "";
    return through(
        function (chunk) {
            inputString += chunk;
        },
        function () {
            var self = this;

            options.filename = fileName;

            var result;
            try {
                result = jade.render(inputString, options);
            } catch (e) {
                self.emit("error", e);
                return;
            }

            var moduleBody = "" +
                "" +
                "module.exports = {" +
                "   html: `" + result + "`\n" +
                "};";
                //"class Template {\n" +
                //"   private html:String = `" + result + "`;\n" +
                //"}\n" +
                //"export Template;"
                //"module.exports = function Template () {\n" +
                //"   return `" + result + "`;\n" +
                //"};";

            self.queue(moduleBody);
            self.queue(null);
        }
    );
};

[geyang]

Hi,

I modified the tsify index.js file a little, to insert transforms before setting up the pipeline, but I'm still getting typescript errors saying that:

{ [TypeScript error: src/components/login-register/login.ts(9,27): Error TS2307: Cannot find module './login.jade'.]
  message: 'src/components/login-register/login.ts(9,27): Error TS2307: Cannot find module \'./login.jade\'.',
  fileName: 'src/components/login-register/login.ts',
  line: 9,
  column: 27,
  name: 'TypeScript error' }

If I want to make it possible to the following in my ts files:

import template = require('./login.jade');

// to use:
var templateString = template.html

How can I do this?

Thanks!

[smrq]

You can't make TypeScript know about non-JS imports, but you can sorta hack
it syntactically with:

declare function require(path: string): any;

That can be in some shared definition file or something. Then you can use

const templateString = require('path/to/file.jade');

Or whatever. Note the const instead of import.

Hopefully that's all valid code, I'm typing this on my phone.

On Fri, Nov 27, 2015, 8:12 AM Ge Yang [email protected] wrote:

Hi,

I modified the tsify index.js file a little, to insert transforms before
setting up the pipeline, but I'm still getting typescript errors saying
that:

{ [TypeScript error: src/components/login-register/login.ts(9,27): Error TS2307: Cannot find module './login.jade'.]
message: 'src/components/login-register/login.ts(9,27): Error TS2307: Cannot find module './login.jade'.', fileName: 'src/components/login-register/login.ts', line: 9, column: 27, name: 'TypeScript error' }

If I want to make it possible to the following in my ts files:

import template = require('./login.jade');

// to use:
var templateString = template.html

How can I do this?

Thanks!

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

[geyang]

Thanks @smrq!
this is super helpful. So use const instead of import so that it does not require a module.

I ended up adding a template.jade.d.ts file for each one of the jade template file, and modify the jadeify transformer to export a module.

[smrq]

Cool, no problem. Glad it's working out for you.