typestrong / tsify Goto Github PK

When using tsify, I can't seem to catch typescript errors using the standard .on("error", function() {foo}) idiom. The only way that I could catch the error was to do it in a domain, which broke watchify. So far I've hacked my own version of tsify that allows an error handler to be passed in opts and if found, replaces the built-in error-handler. I don't think this is very node-ish and ideally there should be some way to optionally this.emit("end") in the custom error handler, or NOT, but I couldn't find a way to suppress the error if I left the default error handler (that calls b.pipeline.emit("error", error)) attached.

Unfortunately I don't know how to make this work gracefully or I'd just submit a PR.

Thanks!

Sourcemaps are blowing up because of a relative path thing with Browserify's prelude. The tests shouldn't rely on that path being exact.

Hi,
Bundling with preserving .ts source in the sourcemaps works only if there are no .js files generated from the .ts files.

example:

now if i run
$ browserify app/app.ts -p [ tsify --target ES5 --module commonjs ] -d > app/bundle.js

I got the correct output in browser:

but when I wanna have the type checking done inside webstorm, which is done during the compile to js phase, I've got only references to compiled javascript instead of .ts inside browser for all files excluding app.ts.

example:
files compiled via tsc compiler in webstorm:

run browserify:
$ browserify app/app.ts -p [ tsify --target ES5 --module commonjs ] -d > app/bundle.js

browser sourcemaps:

Any ideas?
thanks

Following gulp task crashes on errors raised by the tsc.

var gulp = require('gulp');
var gutil = require('gulp-util');
var source = require('vinyl-source-stream');
var watchify = require('watchify');
var livereload = require('gulp-livereload');
var browserify = require('browserify');
var xtend = require('xtend');

gulp.task('bundle', function () {
  var args = xtend({debug: true}, watchify.args);
  var b = watchify(browserify(args)
    .plugin('tsify', {
      target: 'ES5',
      module: 'AMD',
      noImplicitAny: true
    }));

  b.on('update', bundle);
  b.add('./app/scripts/app.ts');

  function bundle() {
    return b.bundle()
      .on('error', function (e) {
        gutil.log(gutil.colors.red('Bundle error:', e.message));
      })
      .pipe(source('bundle.js'))
      .pipe(gulp.dest('build'))
      .pipe(livereload());
  }
  return bundle();
});

I've tested the task w/o the tsify plugin/plain js and it works as expected.

I'm struggling to get this working gulp-browserify, here is my gulpfile.js:

var gulp = require('gulp'),
    browserify = require('gulp-browserify'),
    rename = require('gulp-rename');


gulp.task('clean', function(done) {
  del(['bin'], done);
});    

gulp.task('ts', function() {
  gulp.src('lib/index.ts', { read: false })
    .pipe(browserify({
      transform: ['tsify'],
      extensions: ['.ts']
    }))
    .pipe(rename('index.js'))
    .pipe(gulp.dest('./bin'));
});

gulp.task('default', ['ts']);

I get the following error:

$ gulp                              
[gulp] Using gulpfile /home/martin/code/blink/gulpfile.js
[gulp] Starting 'ts'...
[gulp] Finished 'ts' after 5.78 ms
[gulp] Starting 'default'...
[gulp] Finished 'default' after 5.73 μs

/home/martin/code/blink/node_modules/tsify/index.js:17
        if (b._extensions.indexOf('.ts') === -1)
                      ^
TypeError: Cannot call method 'indexOf' of undefined
    at setupPipeline (/home/martin/code/blink/node_modules/tsify/index.js:17:21)
    at tsify (/home/martin/code/blink/node_modules/tsify/index.js:8:2)
    at /home/martin/code/blink/node_modules/gulp-browserify/node_modules/browserify/index.js:423:43
    at makeTransform (/home/martin/code/blink/node_modules/gulp-browserify/node_modules/browserify/node_modules/module-deps/index.js:209:21)
    at /home/martin/code/blink/node_modules/gulp-browserify/node_modules/browserify/node_modules/module-deps/index.js:186:9
    at Deps.getTransforms (/home/martin/code/blink/node_modules/gulp-browserify/node_modules/browserify/node_modules/module-deps/index.js:191:7)
    at Deps.readFile (/home/martin/code/blink/node_modules/gulp-browserify/node_modules/browserify/node_modules/module-deps/index.js:164:25)
    at /home/martin/code/blink/node_modules/gulp-browserify/node_modules/browserify/node_modules/module-deps/index.js:280:14
    at onresolve (/home/martin/code/blink/node_modules/gulp-browserify/node_modules/browserify/node_modules/module-deps/index.js:150:14)
    at /home/martin/code/blink/node_modules/gulp-browserify/node_modules/browserify/node_modules/module-deps/index.js:145:17
    at /home/martin/code/blink/node_modules/gulp-browserify/node_modules/browserify/node_modules/module-deps/index.js:426:39
    at process._tickCallback (node.js:415:13)

What am I missing? I've passed through the extentions to gulp-browserify but they seem to have gone missing by the time they reach tsify?

I also notice you don't give a gulp-browserify example, why is that? I assume you don't use it personally, any particular reason?

Any help will be much appreciated.

So, how does tsify play together with watchify, gulp etc. Would be great to have basic info on the homepage what alternatives work and what are incompatible, with small use examples, otherwise majority of your users go through the exercise and waste of time to find out by themselves..

I was using this before: tsc --sourceMap --sourceRoot "../src", which was working for me.

Now I'm using browserify + grunt + tsify with the following in Gruntfile.js:

preBundleCB: function (bundle) {
bundle.plugin('tsify', { target: 'ES5', module: 'commonjs', sourceMap:true,sourceRoot:'../src2' });
}

but I don't think 'sourceRoot' is doing anything?

It will be a lot help! However,given the breaking API change. TS1.5 and TS1.4- won't play well together without branching code. https://github.com/Microsoft/TypeScript/wiki/API-Breaking-Changes

Will it be supported?

I'm trying to use tsify to generate a declaration file. Given the documentation at ts-compiler, I would expect this to work in the gruntfile:

    options: {
        preBundleCB: function (bundle) {
            bundle.plugin('tsify', { target: 'ES5', module: 'commonjs', declaration:true });
    },

Compilation works fine, but the declaration file is never produced.

Hi

Sorry if i have complete misunderstood this plugin, i am expectng to use it with my browserify project.
enabling me to use current browserify syntax, and type annotations.

I'am on Windows, using gulp:

gulp.task('browserify', function() {
    var bundler = browserify({
        entries: ['./client/src/main'],
        extensions: ['.ts'],
        debug: true
 }).plugin('tsify', { noImplicitAny: true, module: 'commonjs' });
 var bundle = function() {
 bundleLogger.start();
 return bundler
 .bundle()
 .on('error', handleErrors)
 .pipe(source('app.js'))
 .pipe(gulp.dest(buildDir))
 .on('end', bundleLogger.end);
 };
 return bundle();

});

When i start requiring modules i get the following error:
TS2304: client/src/main.ts(2,14): TS2304: Cannot find name 'require'.

main.ts
var config = require('./routes')
routes.ts
var config = function() { }
module.exports = config;

Removing the require statement stops the error
Any help would be much appreciated
/Dennis .

I've noticed that tsify will halt execution in all TS language errors that on the CLI will simply report but continue. This can be unfavorable when one is using incremental approach to TS and wants to mix and match native JS features that don't jive with TS syntax. For example:

//ES6 Class
class MyCass{
    constructor(){
        this.prop1 = 'foo';
        this.prop2 = 'bar';
        MyClass.myClassLib.push(this);
    };
    libIndex(){
       return MyClass.myClassLib.indexOf(this);
    };
};

//Property on Class, this is allowed in JS i.e. 
//function fn(){};
//fn.someProp = 'baz';
Object.defineProperties(MyClass, {
    myClassLib:{
         value:[]
    },
});

This will work in JS and will compile via tsc in the CLI, it will report the error:

error TS2339: Property 'myClassLib' does not exist on type 'typeof MyClass'.

But it will contiue and output the js. tsify will throw and stop execution. It would be great to allow loose adherence to the TS language in the way the CLI allows this.

First off: great project, but I'm having a fairly annoying issue that I hope you can help me out with.

Could you provide a simple boolean option that prevents browserify from bailing out on builds that don't type check? While generally a Terrible No Good Very Bad Idea, this behavior prevents me from ignoring some fairly annoying issues with DefinitelyTyped typings caused by TypeScript 1.5 changes. It looks like there's no hope for these issues getting resolved until TypeScript 1.5.2 is released, and it also seems like tsify forces you to use TypeScript 1.5 (which isn't a bad thing -- tsconfig.json removes a ton of redundant build boilerplate).

If this is already possible, I'd greatly appreciate a pointer on how to do this.

Thanks!

Is it possible to have some d.ts files automatically injected into every file for type checking (similar to a precompiled prefix header for C)? I tried passing in my d.ts files straight into tsify but that had no effect.

The following usage triggers a nasty edge case:

bundler.reset()
    .add(file1)
    .add(file2)
...
    .bundle();

For some reason, if reset() is called before adding files, each file is individually run through the pipeline's transform step before bundle() is called. This triggers an edge case where each file is individually compiled without using the compilation cache, yielding extreme performance penalties with multiple entry points.

This pattern of usage happens in e.g. nikku/karma-bro.

It would be really great if we could use the full range of compiler options or specify a tsconfig.json, especially as new features are added and we want to flag them on (emitDecoratorMetadata added in 1.5, for example).

I don't get any source-maps from when I use tsify.

If I look in the bundle I see the TypeScript compiler injects the //# sourceMappingURL comments in each segment, but I don't see the browserify sourcemap.

I have sourcemap: true in the tsify options, and debug: true in browserify. I tried it with and without exorcist.

Do I miss something? Is it supposed to work at all?

tsify seems to be ignoring ES6 imports, I set the target correctly tried tsconfig.json and passing it directly.

ex:

import QuestionFlow from './components/QuestionFlow/index';
import { QuestionProps } from './components/Question/index';
import StatementContainer from './components/StatementContainer/index';

these are entirely gone by the time it gets to the next transform, tsify is the first plugin.

Works if I use gulp-typescript or any other method (without browserify obviously).

EDIT: on second thought they must be getting processed to avoid errors but then are not included in the bundle, what am I missing here?

EDIT 2: the next transform is babelify, if that helps.

After updating to browserify 5.9.1, _entries is no longer defined.

It seems that typescript reference paths are only followed one layer deep.

For example, if I have

app.ts:

/// <reference path="../typings/tsd.d.ts">
import $ = require("jquery");

../typings/tsd.d.ts:

/// <reference path="jquery/jquery.d.ts">

compilation will fail with:
TS2071: Unable to resolve external module '"jquery"'.

I believe that this is because the second reference isn't being followed (maybe this is a bug with ts-compiler? I haven't tried that package directly to find out, but tsc seems to follow these reference paths correctly).

Hi @smrq,

First, thanks for this project!

I am not sure if this is an issue with browserify, tsify, typescript, or if I am just doing something wrong. Basically, what I am seeing is that when I try to import an exported class using require(), the module i am trying to import is linked to as undefined. I am not intimately familiar with browserify inner-workings, but if I change this undefined to a 1, I see that the code runs fine! See below where the './components/helper' is linked to as undefined:

bundle.js:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var Helper = (function () {
    function Helper() {
    }
    Helper.prototype.sayHello = function () {
        console.log('hello from the helper!');
    };
    return Helper;
})();
module.exports = Helper;

},{}],2:[function(require,module,exports){
/// <reference path="../typings/node/node.d.ts" />
var Helper = require('./components/helper');
var Main = (function () {
    function Main(name) {
        this.name = name;
        console.log(this.name);
        this.helper = new Helper();
        this.helper.sayHello();
    }
    return Main;
})();
window.onload = function () {
    var main = new Main('start me up');
};

},{"./components/helper":undefined}]},{},[1,2]);

main.ts:

/// <reference path="../typings/node/node.d.ts" />
import Helper = require('./components/helper');

class Main {

  name;
  helper;

  constructor(name: string) {
    this.name = name;
    console.log(this.name)

    this.helper = new Helper();
    this.helper.sayHello();
  }

}

window.onload = () => {
  var main = new Main('start me up');
}

components/helper.ts:

class Helper {

  constructor() {}

  sayHello() {
    console.log('hello from the helper!')
  }

}

export = Helper;

I am using gulp as my task manager trying to use browserify, watchify, tsify, and browser-sync as my main dev workflow.

Gulpfile:

'use strict';

var browserify = require('browserify');
var watchify = require('watchify');
var tsify = require('tsify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var jasmine = require('gulp-jasmine');
var livereload = require('gulp-livereload');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

/**
* Run jasmine tests
*/
gulp.task('test', function() {
 return gulp.src('test/*.spec.js')
  .pipe(jasmine());
});

gulp.task('browserSync', function() {
 browserSync({
   server: {
     baseDir: './',
     index: 'index.html'
   },
   open: true,
   files: ['dist/bundle.js']
 });
});

/**
 * Transpile TypeScript and bundle
 */
gulp.task('bundle-ts', function() {

  var bundler = browserify();

  bundler = watchify(bundler);

  bundler.on('update', function() {
    rebundle();
  });

  bundler.add([
    './src/components/helper.ts',
    './src/main.ts'
  ])
  .plugin('tsify', {target: 'ES5', module: 'amd'});

  rebundle();

  function rebundle() {
    return bundler.bundle()
      .pipe(source('./dist/bundle.js'))
      .pipe(buffer())
      .pipe(gulp.dest('.'));
  }

});

gulp.task('default', function() {
  gulp.start(['bundle-ts', 'browserSync']);
});

It seems that the inlined sourcemaps you generate cannot be read by Visual Studio / IE, and consequently breakpoints are not hit etc.

The error in console is: "SourceMap data:application/json;base64 ... read failed: The URI prefix is not recognized". Visual Studio 2013 Ultimate update 4 with TypeScript 1.3, IE 11.

Or am i missing something? It seems weird that tsify would not work with the official / most fully featured / most widely used TypeScript IDE...

It seems that tsify stops the browserify build on the first "error" reported by the Typescript compiler. I think it should output the error message but still continue, just like Typescript itself does. Am I missing something?

The structure is flattened to root.

source:

after bundling in browser:

thanks

Hi,

When I run browserify ./app/boot.ts -p [ tsify --noImplicitAny ] with version 0.11.0 all works fine but if I install 0.11.1 I only get an empty browserify file:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

},{}]},{},[1])

If I downgrade to version 0.11.0 everythings works well again. Do I missing something?
I'm using version 10.2.1 of browserify.
My tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outDir": "./.tmp/"
    },
    "files": [
        "./typings/all.d.ts",
        "./app/boot.ts"
    ]
}

This behavior is also seen using the command line, but here is my Gulp file below:

When running on Windows the plugin works perfectly. The expected behavior is that upon save of any typescript file in the require tree of test-app.ts, the tsify plugin will compile the js files and then let browserify compile those files. On Mac OSX, this appears to not happen in the proper sequence, resulting in each change being one "save" behind.

For instance, if I add a console log of:

console.log("log 1");

The first time I save, it won't show up. If I change it to:

console.log("log 2");

I will then see "log 1" in the console. Upon next save, I'll then see "log 2".

'use strict';

var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var assign = require('lodash.assign');

// add custom browserify options here
var customOpts = {
    entries: ['./test-app.ts'],
    debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts));

gulp.task('js', bundle); // so you can run `gulp js` to build the file
b.on('update', bundle); // on any dep update, runs the bundler
b.on('log', gutil.log); // output build logs to terminal
b.plugin('tsify')

function bundle() {
    return b.bundle()
        // log errors if they happen
        .on('error', gutil.log.bind(gutil, 'Browserify Error'))
        .pipe(source('bundle.js'))
        // optional, remove if you don't need to buffer file contents
        .pipe(buffer())
        // optional, remove if you dont want sourcemaps
        .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
        // Add transformation tasks to the pipeline here.
        .pipe(sourcemaps.write('./')) // writes .map file
        .pipe(gulp.dest('./'));
}
gulp.task("bundle", function () {
    bundle();
})

Hi,
Can this be plugged into package.json transform node?
"browserify": {
"transform": [
"hbsfy",
"tsify"
]
}

I'm trying this and it seems to be that the tsify is getting string paths instead of the source stream, even though I've added the vinyl source step before that.

So has this been successfully used with this set up? Or does the plugin have to be manually added as shown in the main instructions?

Relative paths in source maps break the current tests, see browserify/browserify#923

When trying to run browserify with tsify on my own typescript codebase, i get the following error:

Error: Parsing file /Users/robbateman/WebstormProjects/awayjs-core- 
ts/src/away/bounds/BoundingSphere.ts: Line 1: Missing from after import

after trying to get to the bottom of what this means, i happened across the esprima-fb module, which seems to be used by browserify to walk the source tree for dependencies.

Because Typescript is using ES5 spec, my imports are written (in the case of the erroring file above) as follows:

import BoundingVolumeBase           = require("away/bounds/BoundingVolumeBase"); 
import Matrix3D                     = require("away/core/geom/Matrix3D"); 
import Matrix3DUtils                = require("away/core/geom/Matrix3DUtils"); 
import PlaneClassification          = require("away/core/geom/PlaneClassification"); 
import Plane3D                      = require("away/core/geom/Plane3D"); 
import Transform                    = require("away/core/geom/Transform"); 
import Vector3D                     = require("away/core/geom/Vector3D"); 
import IEntity                      = require("away/entities/IEntity");

this of course doesn't match the ES6 spec, which appears to be what esprima-fb is using and why the error is generated by browserify.

Is there a strategy for ES5 typescript files that will work with tsify, or are we only able to consider ES3-compatible imports atm? Obviously having ES6-compatible imports in .ts files would be pointless for compilation purposes

The Typescript version currently in use by this plugin is bundled inside the repo. Is there any particular reason for this? I had a quick skim of tsc.js but I couldn't find any indication that it had been modified (feel free to correct me - maybe if this is the case, you could add a note to the README so other people don't get confused). I'm available to modify the code to facilitate this if you would like.

Not sure if this is possible, but would be awesome if I could say

.plugin('tsify',
        {
            noImplicitAny: false,
            target: 'commonjs',
            referenceSources: './../*.ts',
            typeDefinitions: '../typings/**/*.d.ts'
        });

Then I won't need to use ///<reference path.... because typescript will know about everything and should be able to just include it. Basically what I am trying to get working is the module export, then all classes which are internal to the module simply referenced but in different files.

I'm trying out tsify, and I can't seem to make it work with multiple files.

var typescriptSources = [
    './src/hello.ts',
    './src/main.ts'
];

var typings = [
    './typings/react/react.d.ts',
    './typings/underscore/underscore.d.ts'
];

gulp.task('browserify', function () {
    browserify({ entries: typescriptSources.concat(typings), path: ['./src'], debug: true })
        .plugin('tsify')
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('dist'));
});

When I load this in the browser, I get Uncaught Error: Cannot find module './hello'

My code is available here: https://github.com/duncanmak/react-experiments/tree/use-tsify/with-typescript.

Just wondering if this was on your radar or would you prefer a PR.

When using it with grunt-browserify, it outputs something like this:

>> File "src\client\core\base.ts" changed.
Running "browserify:ts" (browserify) task
Warning: Index signature of object type implicitly has an 'any' type. Use --force to continue.

it makes impossible to know where the error is at. When using grunt-ts, it shows the stack:

>> File "src\server\formulas.ts" changed.
Running "ts:server" (ts) task
Compiling...
### Fast Compile >>src/server/app.ts
### Fast Compile >>src/server/formulas.ts
Using tsc v1.3.0
./src/server/app.ts(122,10): error TS2351: Cannot use 'new' with an expression whose type lacks a call or construct signature.

>> 1 non-emit-preventing type warning
>> Type errors only.

TypeScript compilation complete: 1.98s for 3 typescript files

Even if I use --debug or --stack it doesn't show the stack trace. Using grunt-browserify without the tsify plugin, when an error occurs, shows like this:

Warning: Cannot find external module '../modules/userx'. Use --force to continue.

This is a silly example, but I hit it during a more complex scenario.

import greeter = require('./greeter');

(function () {
    var greeter = greeter.greet('Hello world!');
    document.body.innerHTML = greeter;
})();

This will compile fine, but will not actually import the greeter module. Not sure if this is an issue with tsify or browserify itself. But thought I would create an issue to discuss at any rate, was quite confusing to figure out

I cannot seem to get tsify working with grunt-watchify. My gruntfile looks like this, but the callback doesn't seem to run. SwitchingpreBundleCB to callback fixes that, but the parameter doesn't support the plugin function. Realize that this may be a grunt-watchify issue...

grunt.initConfig(
  {
    watchify: {
      test: {
        src: ["./test/test.ts"],
        options: {
          preBundleCB: function (bundle) {
            bundle.plugin('tsify', { target: 'ES5', module: 'commonjs', sourceMap:true });
          },
          external: ["underscore", "mocha", "should","es6-promise"],
    },
    dest: "test/test.js"

Hi there,

I can't seem to set up tsify to work when using a very basic gulpfile. Not sure what more to say about it, so here's the stuff I have:

gulpfile.js

var gulp = require('gulp');
var browserify = require('browserify');
var tsify = require('tsify');
var source = require('vinyl-source-stream');


gulp.task('compile-js', function() {
    return browserify()
        .add('main.ts')
        .plugin('tsify', {target: 'ES6'})
        .bundle()
        .pipe(source('bundle.js'));
});

gulp.task('default', ['compile-js']);

main.ts

/// <reference path="typings/node.d.ts" />

The typing is copied from https://github.com/borisyankov/DefinitelyTyped/blob/master/node/node.d.ts.

Stacktrace:

$ gulp
[15:15:07] Using gulpfile <snip>/gulpfile.js
[15:15:07] Starting 'compile-js'...

<snip>/node_modules/tsify/node_modules/typescript/bin/typescript.js:2448
        return sourceFile.lineMap || (sourceFile.lineMap = computeLineStarts(s
                         ^
TypeError: Cannot read property 'lineMap' of undefined
    at getLineStarts (<snip>/node_modules/tsify/node_modules/typescript/bin/typescript.js:2448:26)
    at Object.getLineAndCharacterOfPosition (<snip>/node_modules/tsify/node_modules/typescript/bin/typescript.js:2468:50)
    at SyntaxError.CompileError (<snip>/node_modules/tsify/lib/CompileError.js:7:15)
    at <snip>/node_modules/tsify/lib/Tsifier.js:126:22
    at Array.forEach (native)
    at Tsifier.checkSemantics (<snip>/node_modules/tsify/lib/Tsifier.js:125:22)
    at Tsifier.compile (<snip>/node_modules/tsify/lib/Tsifier.js:83:33)
    at Tsifier.generateCache (<snip>/node_modules/tsify/lib/Tsifier.js:58:7)
    at DestroyableTransform.flush [as _flush] (<snip>/node_modules/tsify/index.js:40:12)
    at DestroyableTransform.<anonymous> (<snip>/node_modules/tsify/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:135:12)

Note that I get a different result when I change ES6 to ES5 in the gulpfile:

$ gulp
[17:36:57] Using gulpfile <snip>/gulpfile.js
[17:36:57] Starting 'compile-js'...

events.js:72
        throw er; // Unhandled 'error' event
              ^
TypeScript error: typings/node.d.ts(198,26): Error TS2304: Cannot find name 'DataView'.

The missing DataView seems to be something that was recently changed in the typing of DefinitelyTyped. Unfortunately, I don't know enough of TypeScript yet to understand what is happening exactly.

It would be awesome to have tags for released versions of the plug-in.

This way people can track what has been done in between releases on GitHub (via the tags list).

I use tsify with browserify and watchify.

While it works, it is slow. If I have a simple "hello world" js file, it takes 1 to 3 seconds to recompile it when I save it.

I do not know if this is an issue with tsify or watchify, but tsc -w is much faster (about 100ms to recompile)

Hey,

I wanted to use jsx in typescript. Therefore I planned to use something like ts-jsx-loader which replaces the jsx with plain js before passing it to the typescript compiler. At the moment I do not see any other possibility but to fork and adjust tsify ...

Do you have any other suggestions?

Sorry I'm new to TypeScript
How would I require, say, lodash? I'm currently getting Cannot find external module

Hey there,

I wanted to use tsify in my project. I installed it via npm and added it to my grunt-browserify config.

My first approach for adding it to my browserify config file was

plugin: ['tsify']

and my second was

preBundleCB: function (bundle) {
  bundle.plugin('tsify', { target: 'ES5' });
}

both times the browserify task fails with the following message:

Cannot find module 'convert-source-map'

BTW: how do I have to create my TS files? Can I use internal modules as described here or do I have to use external modules and the export keyword as described here

Thanks for the help

Getting the following error:

npm ERR! peerinvalid The package browserify does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected] || 7.x || 8.x || 9.x

This is more of a question than an issue, I hope that's okay.

I'm trying to get Jasmine unit tests working, where both the code under test and the unit tests are written in TypeScript, and the tests are run using Karma (via karma-browserify). But I'm not having much luck getting this to work.

The error I'm getting right now is that Karma can't resolve an imported file, the output is

Cannot find module '[object Object]' from /some/path/on/my/machine

An example for using tsify in this scenario would be much appreciated. Do you happen to know of any that I could take a look at?

I'll update the tsify test repo I made for #43 to show the problems I'm having in a bit.

As defined in:
https://github.com/substack/node-browserify#external-requires

Using .require( as defined in https://github.com/substack/node-browserify#brequirefile-opts throws, it seems that the file is not being compiled before passed to browserify.

The new compiler should be much faster. typescript-api doesn't have 1.1 support, so that will have to be replaced. See e.g. ivogabe/gulp-typescript#26.

In sources property of source map file I see:

"model.ts",
"observable.ts",
"index.ts"

but it should be

"core/model.ts",
"core/observable.ts",
"index.ts"

There are some whitespace changes with [email protected] compared to previous versions. Tests should still pass with all supported versions.

Hi

My problem it importing a library from github and using it through my package.json, i understand this might be a issue with the libary i am using. But since it works fine when i am not using tsify, i am asking here.

I am using tsd https://github.com/DefinitelyTyped/tsd , which generates a typings file, :

/// <reference path="../../typings/tsd.d.ts" />

the content of my typings file ../../typings/tsd.d.ts

///<reference path="underscore/underscore.d.ts" />
///<reference path="pixi/pixi.d.ts" />

import _ = require('underscore'); // works fine

import pixi = require('pixi.js'); // TS2307: client/src/App.ts(7,23): TS2307: Cannot find external module 'pixi.js'

My package.json

"dependencies": {
    ....
    "underscore": "^1.8.3",
    "pixi.js": "git://github.com/goodboydigital/pixi.js.git",
    ....
  }

If i disable the .plugin(tsify) in my gulp task, and use normal browserify syntax it works fine:

var _ = require('underscore');
var pixi = require('pixi.js');
console.log (" testApp.js > pixi = " , pixi);

Thanks
/Dennis