jbrantly / ts-jsx-loader Goto Github PK

Since this is webpack loader it could be useful to be able to read template from external file, e.g.

class MyComponent extends TypedReact.Component<{}, {}> {
    render() {
        return React.jsxFile("./templates/mycomponent.html"); 
    }
}

I'm using typed-react syntax here, but your loader could implement loading from external file like webpack/html-loader does for other resources.

I'm trying to use this:

React.jsx(<li {...this.props.childProps} className="test">test`)``

and I use

loaders: [
   { test: /\.ts$/, loader: 'ts-loader!ts-jsx-loader?harmony=true' } 
]

But I get an error: Property '__spread ' does not exist on type 'typeof React'.
Does that have to do with the definition file? Or with the ts-jsx-loader?

Per http://facebook.github.io/react/blog/2015/02/24/react-v0.13-rc1.html

--target option is available on the jsx command, allowing users to specify and ECMAScript version to target.
es5 is the default.
es3 restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg this.static will become this['static'] for IE8 compatibility).

Hey,

I saw James talk at react conf about using typescript and jsx. I really liked it and currently we use typescript for the parts of our application which are not react components. Since we are using browserify I wanted to implement a plugin similar to ts-jsx-loader. After I implemented it, the typescript compiler always complains about the imported views. The views are defined as:

export class X extends React.Component<any, any, any> {​ ... }

and then imported as

import X = require('./x');

React.render(
  React.jsx(`<X />`),
  document.body
);

The typescript compiler then complains about this:

Type 'typeof "src/x"' is not assignable to type 'new (props: any, context: any) => Component<any, any, any>'.

Can you give me any hint, how to get around that issue? I tried using the defintions from your talk, as well as the definitions in definetly typed ... nothing works.

For the needs of one of our new developers I have created a sample project that demonstrates the use of

Webpack as the building tool
Typescript as the main programming language (using your ts-loader)
ReactJS in Typescript
Embedding JSX inside Typescript with the help of your tx-jsx-loader
The basic use of Flux
Using LESS with webpack

https://github.com/bgrieder/typescript-reactjs-flux-webpack

If this can be of any interest, feel free.
b.

Hey,

thanks for the module, it is great, but I can't get it to work on multiple files. I use the config as described in the readme, combined with the ts-loader. But it only executes the jsx-loader on the first file and not on subsequently required files, e.g. if my entry point is main.ts and I have

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

it does not convert the jsx insides routes.ts.

Any ideas or pointers would be great.

When using a React.jsx formatted like this

    return React.jsx( `
    <div style={{width: '100%',height: '100%'}}>
        ....
    </div>
    ` )

The regular expression is not matching (please note the spaces between the brackets and backticks as well as the carriage returns/line feeds)
I came up with this replacement

 new RegExp(identifier + '\\(\\s*`\\s*([^]*?)\\s*`\\s*\\)', 'gm')

However, i did not create a pull request because it seems that this expression is more loose than the current one and I cannot figure out the corner cases of the current one.

This regular expression "reads"

• match the identifier
  • followed by an opening bracket, followed by some potential spaces, followed by a backtick, followed by some more potential spaces
  • capture in a greedy way everything until
  • there are some potential spaces, followed by a backtick, followed by some more potential spaces, followed by a closing bracket

spaces in this context match new lines and carriage returns too.

The great thing about using the React.jsx() syntax over a TypeScript fork such as jsx-typescript is that it doesn't break intellisense and syntax highlighting in existing TypeScript editors. The tradeoff, though, is that we get no language support within our jsx strings. However, we could leverage embedded expressions within template strings to add autocompletion for embedded javascript:

This syntax is very similar to the simple brace syntax used in JSX, and can be implemented as a simple find and replace of '${}' to '{}' before hitting the jsx compiler. It also won't break any existing use cases - within ES6 template strings, '${' unambiguously refers to the beginning of an embedded expression. Because the actual value of the expression is evaluated at run-time, this currently has no meaning (and will fail) when inside a React.jsx() call, which is essentially a compile-time directive.

Our team would really like to use this feature so I've implemented this here:
https://github.com/silhouettes/ts-jsx-loader/tree/embedded-expressions

If you're happy with this change, I can submit a pull request, or I'm happy to make further changes if you'd like to see any improvements! I've added test cases already and have also tested it on a demo React project.

I've noticed that jsx-loader generates source maps, it should be possible.

I've thought how to implement this already. It is required to combine several source maps from reactTools.transformWithDetails, then call this.callback(null, code, sourcemap) inside the index.js instead of returning value.

Though I've yet to figure out how to combine source maps and offset them.

I just found this tool which is supper great!
I would like to know any plan to support gulp?