Comments (19)
Hi @ghedamat, let's see what we can do.
From what I can see, react-router doesn't ship with a "global build" included in its repository. The javascript files in its dist
folder assume a CommonJS/Webpack style build tool, and the global build is only available via something like bower.
The global build can be produced from the repo, but this too requires Webpack and Node.js.
Currently the boot-cljsjs tool has no specific means of either a) retrieving files via bower, nor b) executing a build script from the fileset. I'll @martinklepsch and @Deraen to see if they have any thoughts on the best way to go about this.
from packages.
@pandeiro that would be amazing!
yeah, I'm currently manually pulling in the react-router.js build in my project
and adding it to project.clj
https://github.com/ghedamat/reagent-react-router-demo/blob/master/project.clj#L51-L52
I have to apologize for my noobness here :( I should start looking more into the boot-cljsjs
but the bower package simply points to
https://github.com/rackt/react-router/blob/master/dist/react-router.js
that ends up assigning a window.ReactRouter global object that exposes all the different components
I think I'm failing to understand why that would not work.
I'll try to read up more asap
thanks for all the help!
from packages.
@ghedamat When I try to load the included source (dist/react-router.js
), I get this error:
Uncaught
LocationActions.PUSH
__webpack_require__
(anonymous function)
__webpack_require__
(anonymous function)
__webpack_require__
(anonymous function)
(anonymous function)
webpackUniversalModuleDefinition
(anonymous function)
(anonymous function)
InjectedScript._evaluateOn
InjectedScript._evaluateAndWrap
InjectedScript.evaluate
TypeError: Cannot read property 'PropTypes' of undefined
Please let me know if you have better luck though. My understanding is that the build.sh
script is doing some transformation to produce a global build from the Webpack version that ships in the repo.
from packages.
@pandeiro you're absolutely right and I remembered wrong! sorry!
the version I've included in my build process is from cdnjs
https://cdnjs.cloudflare.com/ajax/libs/react-router/0.11.6/react-router.js which is what was included in the original lein template I started the project with :/
I'll have to look into where the bower version is coming from.
I'll try to compile react-router locally and report back
sorry for pointing you in the wrong direction!
from packages.
@ghedamat I saw that, too -- the cdnjs version is 0.11.6 as you said, while stable is 0.12.0. If all else fails we can just go with that (slightly older version)... but I think we may hit this issue again with other Webpack-based stuff in the React ecosystem. So it's worth coming up with a strategy IMO.
from packages.
@pandeiro I looked at the react build process and got it running locally, the output of the build script is what is stored under the dist/
directory for the react-router
repo which is what bower points when you user the bower package.
I updated my demo app to pull react-router from bower and it seems to be working just fine
https://github.com/ghedamat/reagent-react-router-demo
I'm basically just using this file
https://github.com/rackt/react-router/blob/master/dist/react-router.js (same one that I wrongly mentioned initially) and I don't get those errors.
If you want to test the demo app without bower you can simply pull the file in (you'll also have to locally lein install
https://github.com/ghedamat/reagent-react-router)
if what I'm seeing proves to be true could we just have a cljs-boot script that simply pulls the dist file from github and avoid the build step?
from packages.
could we just have a cljs-boot script that simply pulls the dist file from github and avoid the build step?
@ghedamat Well we could just do that (it would be great), but only once you test that the dist/ version (not the bower version) works just fine. "Basically" doesn't cut it here; it has to be the exact same file -- that's what cljsjs would deliver, after all.
from packages.
@pandeiro what is on bower is what is here https://raw.githubusercontent.com/rackt/react-router/master/dist/react-router.js
bower simply points you to the git repo (and likely does some caching)
To double check, just downloaded the file linked above and did a diff
and they're the same file.
the part that still confuses me is the the externs, do we need them?
let me know how we should proceed and thanks again for all the help!
from packages.
Yikes, okay, so it is. Still I can't access the ReactRouter object with that source file.
Re: externs, I would use this (if that object were available): http://www.dotnetwise.com/Code/Externs/
Edit: BTW you can use this to try to load the git version into the Externs generator: https://rawgit.com/rackt/react-router/master/dist/react-router.js
from packages.
OK, the react-router lib loads fine if React is already loaded. Can't believe I didn't catch this! Sorry!
@ghedamat If you want to try to package it, go for it! Otherwise I can do it when I have a sec.
from packages.
thanks @pandeiro I'll give it a shot, I'm curious :) I'll for this repo, try to add the package and report back here
thanks again
from packages.
@pandeiro thanks for the pointers,
the extern generator probably can't help due to the fact that it's a webpack module with an IIFE, that said
I think I was able to get the externs just by looking at the exports on the toplevel module.
https://github.com/rackt/react-router/blob/master/dist/react-router.js#L57-L77
I'll try to open a pr soon, currenlty trying to convince boot to compile for me :D
from packages.
@ghedamat I was able to generate an extern with that page by first loading React and then loading React Router. I'll paste here for convenience:
var ReactRouter = {
"DefaultRoute": function () {},
"Link": function () {},
"NotFoundRoute": function () {},
"Redirect": function () {},
"Route": function () {},
"RouteHandler": function () {},
"HashLocation": {
"addChangeListener": function () {},
"removeChangeListener": function () {},
"push": function () {},
"replace": function () {},
"pop": function () {},
"getCurrentPath": function () {},
"toString": function () {}
},
"HistoryLocation": {
"addChangeListener": function () {},
"removeChangeListener": function () {},
"push": function () {},
"replace": function () {},
"pop": function () {},
"getCurrentPath": function () {},
"toString": function () {}
},
"RefreshLocation": {
"push": function () {},
"replace": function () {},
"pop": function () {},
"getCurrentPath": function () {},
"toString": function () {}
},
"ImitateBrowserBehavior": {
"updateScrollPosition": function () {}
},
"ScrollToTopBehavior": {
"updateScrollPosition": function () {}
},
"History": {
"length": {},
"back": function () {}
},
"Navigation": {
"contextTypes": {
"makePath": function () {},
"makeHref": function () {},
"transitionTo": function () {},
"replaceWith": function () {},
"goBack": function () {}
},
"makePath": function () {},
"makeHref": function () {},
"transitionTo": function () {},
"replaceWith": function () {},
"goBack": function () {}
},
"RouteHandlerMixin": {
"contextTypes": {
"getRouteAtDepth": function () {},
"setRouteComponentAtDepth": function () {},
"routeHandlers": function () {}
},
"childContextTypes": {
"routeHandlers": function () {}
},
"getChildContext": function () {},
"componentDidMount": function () {},
"componentDidUpdate": function () {},
"componentWillUnmount": function () {},
"_updateRouteComponent": function () {},
"getRouteDepth": function () {},
"createChildRouteHandler": function () {}
},
"State": {
"contextTypes": {
"getCurrentPath": function () {},
"getCurrentRoutes": function () {},
"getCurrentPathname": function () {},
"getCurrentParams": function () {},
"getCurrentQuery": function () {},
"isActive": function () {}
},
"getPath": function () {},
"getRoutes": function () {},
"getPathname": function () {},
"getParams": function () {},
"getQuery": function () {},
"isActive": function () {}
},
"create": function () {},
"run": function () {}
}
from packages.
oh! amazing! it makes sense actually
from packages.
@pandeiro can I also ask you a suggestion for testing this locally?
I'm trying with boot package build-jar
that should push it to my local repo,
but having little luck so far in loading it later from my lib.. I'm likely doing it wrong :D
from packages.
@ghedamat That is the right procedure. First, you might just do boot package
and inspect the target directory to see that the expected files were output. (You could also open up the jar in .m2/
to see this.)
If the files are where they should be, but the global ReactRouter variable is not present in pages that load namespaces which require it (eg (ns myapp.core (:require cljsjs.react-router))
), then we have a problem.
from packages.
my build task is currenlty failing because the namespace cljsjs.react-router
is not found..
also @pandeiro do you happen to be on irc? :D I could jump on there if it's easier
from packages.
Sure @ghedamat, let's chat there.
from packages.
I'd say we can close this :) thanks again!
from packages.
Related Issues (20)
- Adding editorjs
- Request: blueprint
- babel-standalone problem
- [cljsjs/material-ui "4.0.0-0"] Working when added to :dependencies but not when it's transitive HOT 1
- Incomplete externs in pouchdb
- Can't find Artifact after merged pull request HOT 1
- ERROR: Failed to resolve: html2canvas Affected Modules: app
- Add js-dataverse HOT 5
- [material-ui] Cannot resolve MaterialUIStyles.StylesProvider
- add support for material-table HOT 1
- [error] cljsjs/proptypes
- firebase build error: refers to file not in jar: cljsjs/common/firebase-analytics-externs.js HOT 1
- CodeMirror toTextArea Extern
- Draft: Partial deprecation of Cljsjs HOT 3
- cljsjs/react-easy-crop Incompatible with Shaddow-CLJS HOT 1
- Can't get expressions to work with cljsjs/vega-lite
- CI/clojars: Cant create new projects HOT 2
- update of latest vega package
- fail to link css file in html file HOT 3
- [request] simplepicker
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 packages.