Comments (13)
I've added manually this:
var React = require('react');
var ReactDOM = require('react-dom');
(function (console) { "use strict";
// ...
to my haxe js output before it gets browserifyied and it works...
What would be the clean way to do this in haxe-react ?
from haxe-react.
Yes currently haxe-react depends on including React as a JS, not through require
- we're looking into this but didn't use addons yet.
Making the current externs require
friendly you have just to add the @:jsRequire
meta like that:
@:jsRequire('react')
@:native('React')
extern class React {...
@:jsRequire('react', 'Component')
@:native('React.Component')
extern class ReactComponentOf {...
@:jsRequire('react-dom')
@:native('ReactDOM')
extern class ReactDOM {...
Of course you then have to use Browserify or Webpack to get it to work.
I'm working on an example which will introduce this change, but you can quickly do the change yourself for now - if you manage to use some addons that would be helpful to share it.
from haxe-react.
Thanks for your answer.
I will definitively share my work on using haxe-react with react addons and libs (material-ui for example). It will be a set of haxe externs basically...
from haxe-react.
@zabojad did you try to use the ReactWithAddOns bundle? https://facebook.github.io/react/blog/2015/10/28/react-v0.14.1.html
When the JS is loaded I can see that React.addons.CSSTransitionGroup
is global.
We definitiely need at some point to support require
but for now you could make externs without changing the base library.
from haxe-react.
@elsassph yes, I've tried it from there https://facebook.github.io/react/downloads.html
But what I do now is that I define externs with the @:jsRequire meta tag. I'm not only using the "official" react addons but also other react components like the material-ui ones. Externs + @:jsRequire + browserify works perfectly.
I'll come back to you later with a complete set of externs for what I've used to get your two cents on one or two things...
from haxe-react.
Just pushed the @:jsRequire
annotations on master.
from haxe-react.
Hi @elsassph !
I had to pause my work with haxe-react for few weeks but now I'm back to it.
Regarding third party react components externs, I'm not sure about how to write them to enforce compile time checking on components props and fields...
Here is an example:
@:jsRequire("material-ui/lib/toggle")
extern class Toggle {
}
Toggle is a genuine react component. However, how could you write its extern so that when I use it with the jsx()
macro, it would check the props I would use on it?
I would need something like:
import api.react.ReactComponent;
typedef ToggleProps = {
defaultToggled : Bool,
elementStyle : Dynamic,
label : Dynamic,
labelStyle : Dynamic,
labelPosition : String,
name : String,
style : Dynamic,
value : String
}
extern class Toggle extends ReactComponentOf<ToggleProps, Dynamic, Dynamic> { }
But of course that won't work... What would be the right way to define those externs?
from haxe-react.
I wonder if this would work?
extern typedef Toggle = ReactComponentOf<ToggleProps, Dynamic, Dynamic>
from haxe-react.
@dpeek it compiles, but doesn't do any type checking at compile time...
from haxe-react.
Ah, I see what you mean. It will compile time check if you subclass it at least. Infact I was just talking to @elsassph about compile time checking of props in JSX – I think it's possible...
from haxe-react.
@dpeek mmm, that sound like a good idea. In that case, it would go through the jsx macro context and indeed be type checked at compilation... It creates quite some extra work at creating "externs" though...
It might be "ignorable" but I've crossed one case where I couldn't subclass a comp because it is designed "final". The Tab cmp from material-ui for example cannot be subclassed because its natural parent component (Tabs) will detect it at runtime and won't allow it...
from haxe-react.
Hi there !
Do you have any idea other than extending (wrapping actually) an extern component to enforce compiler type checking on its properties ?
Thanks !
from haxe-react.
The initial issue question was covered so I'm closing the issue.
from haxe-react.
Related Issues (20)
- some like macro-components? HOT 1
- Remove Dynamic context field from ReactComponent HOT 4
- Macro - replaceEntities Unicode Issue
- [job] Haxe React Freelancers wanted
- readme.md refers to incorrect imports
- Unexpected use of 'self' no-restricted-globals HOT 5
- Loading a JS module from Haxe in the same project HOT 4
- Invalid escape sequence \u. UTF-16 surrogates are not allowed in strings HOT 4
- Inconsistent defaultProps behavior in debug / no debug mode HOT 8
- PureComponent: invalid number of type parameters HOT 2
- Cannot read property 'value' of undefined HOT 1
- is jsx not support array tag? HOT 3
- Using external jsx instead of inline one HOT 2
- No changes concerning react 16 in the haxelib library version HOT 3
- Functional components is shown as <Unknow>...</Unknow> in chrome dev tools HOT 10
- Fragment support react v16.2 HOT 4
- Wrong 'ReactDOM.createPortal' method annotation
- setState callback typing issue HOT 1
- Inline mode issue? HOT 6
- The lib doesn't work with haxe 4 preview HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from haxe-react.