jsx-typescript icon indicating copy to clipboard operation
jsx-typescript copied to clipboard

Document usage

Open iongion opened this issue 10 years ago • 4 comments

In my project I am using a custom typescript extension ".tsx" to denote those typescript source files with xml jsx tags. Both react-tools compiler and jsx-typescript limit accepted extensions to .ts and .d.ts which in my opinion is a "forced" enforcement. Do you have a sample on how to use the facilities in jsx-typescript to be able to compile a stream and not a file. I want to be able to compile my gulp streams using jsx-typescript.

iongion avatar Apr 03 '15 07:04 iongion

@ivogabe was looking at this support in https://www.npmjs.com/package/gulp-typescript

basarat avatar Apr 03 '15 09:04 basarat

We tried using the pluggable compiler support in gulp-typescript but it fails with what is mentioned at issue #5

iongion avatar Apr 03 '15 09:04 iongion

I'll update This repo to ts 1.5 this weekend if I remember correctly ts 1.5 support non .ts extension

fdecampredon avatar Apr 03 '15 09:04 fdecampredon

How is this coming? Looks like if I use the jsx-dev branch I can almost get it to work by passing this in as the compiler for gulp-typescript. But I get errors, that suggest it doesn't recognize the XML O.o

import React from 'react';

interface Props { name: string; }

class _Something extends React.Component<Props, {}> {
    render() {
        return (
            <div id="wrapper">
                {this.props.name}
            </div>
        );
    }
}

export const Something = React.createClass(_Something.prototype);

Gives me these errors:

[13:15:04] Starting 'scripts:typescript'...
src\ts\templates\Something.ts(41,18): 1005 '>' expected.
src\ts\templates\Something.ts(41,20): 1005 ')' expected.
src\ts\templates\Something.ts(42,22): 1005 ':' expected.
src\ts\templates\Something.ts(57,15): 1161 Unterminated regular expression literal.
src\ts\templates\Something.ts(58,9): 1129 Statement expected.

Ignore the line numbers, but it seems like the XML parsing fails? Am I just using this wrong? All I am doing is passing it into gulp-typescript as the compiler to use:

var tsProject = ts.createProject('tsconfig.json', { typescript: require('jsx-typescript') });

return gulp.src(config.paths.scripts)
    .pipe(ts(tsProject)) 
    .js.pipe(gulp.dest(config.paths.temp + '/js'));

englercj avatar May 08 '15 20:05 englercj