[ClojureScript] Re: How can I import this foreign lib.
Yes, I am using CLJSJS react.
To configure dependencies among the libs, I used the externals: property with
the dependencies exported class name under the root: property, where you
specify the global classname of the dependencies export. Of course for that to
work you need to use the :requires option of the CLJS compiler. There might be
a more elegant way by specifying the dependencies directly in webpack and
including as modules.
I don't require the webpack results as :commonjs but without a module-type. It
surprises me as well that I didn't have to specify externs in two cases. Either
these are automatically created (using CLJS 1.7.145) or since they are React
comonents, they might be using the String based version of .createElement.
I found this document on the ClojureScript wiki
https://github.com/clojure/clojurescript/wiki/Enhanced-JavaScript-Module-Support
I don't really understand it but hope that it simplifies all that mess. It is
shocking to realize that premium JS developers need expertise in all that
chaos, at least when you are a CLJS "only" developer like me who is used to
dependency vectors and usually spends his work time on programming ;)
NPM seems relatively sane though. If we could use NPM identifiers in our
project.clj or if there were some plugin that allows to do so I guess it would
be a step further.
It might be possible to require all foreign libs of a CLJS project that are on
NPM into one NPM project and then use webpack to create one UMD export with
webpack so that you don't have to specify deps within the project.clj.
The following might be useful if you intend to research this further:
I took inspiration by this guide:
https://github.com/christianalfoni/react-webpack-cookbook/wiki/Authoring-libraries
It says: "...to output UMD, a format that's compatible with various module
loaders (CommonJS, AMD) and globals." So I guess that CLJS foreign-libs import
without module-type utilizes the "globals" variant, but that might be totally
wrong. This is the UMD repo: https://github.com/umdjs/umd
As a basis I took the webpack config in this library
https://github.com/STRML/react-grid-layout/blob/master/webpack.config.js
because it contains an exported JS in its repo that I had imported flawlessly
earlier.
On Friday, October 30, 2015 at 6:17:05 PM UTC+1, Thomas Heller wrote:
> Interesting. I might need to try webpack to pre-process files before letting
> closure convert them. I made some attempts including common-js files into a
> build and most of it broke in some way.
>
> I assume you are including react via the normal foreign cljsjs.react?
>
> I don't have a recommended pipeline as the feature simply has not worked for
> me in :advanced.
>
> On Friday, October 30, 2015 at 11:19:25 AM UTC+1, Leon Grapenthin wrote:
> > Thanks Thomas for the link regarding the textarea, I might want to try that.
> >
> > However I'd be very interested to learn why I should expect that this
> > breaks advanced optimization (luckily it doesn't).
> >
> > What is your recommended pipeline? I. e. what module-type should I
> > comp/transpile foreign libs to before adding them to ClojureScript. It
> > seems that webpack is very flexible in that regard so all I'd have to know
> > is what is best for ClojureScript.
> >
> > Thanks in advance, Leon.
> >
> >
> > On Friday, October 30, 2015 at 9:54:01 AM UTC+1, Thomas Heller wrote:
> > > This is very likely to break :advanced optimisations, did you test that
> > > yet?
> > >
> > > Probably not what you are looking for but there is a "goog.ui.Textarea"
> > > [1,2] in the closure library which does the auto-sizing as well. Should
> > > be pretty straighforward to make a react-wrapper for it.
> > >
> > > HTH,
> > > /thomas
> > >
> > > [1]
> > > https://github.com/google/closure-library/blob/master/closure/goog/ui/textarea.js
> > > [2]
> > > https://google.github.io/closure-library/source/closure/goog/demos/textarea.html
> > >
> > > On Friday, October 30, 2015 at 12:51:22 AM UTC+1, Leon Grapenthin wrote:
> > > > I solved this by compiling the library to UMD using webpack. Also,
> > > > babel is required as a loader to compile ES6 and JS6.
> > > >
> > > > It might be worthwhile to write a beginners guide about how to deal
> > > > with the Javascript module world for people who never used JS as their
> > > > first language. I'd do it myself but lack expertise.
> > > >
> > > > In any case, here is the webpack configuration file I wrote to get the
> > > > above package to compile so that it can be included via :module-type
> > > > :commonjs - Your input is very welcome.
> > > >
> > > > module.exports = {
> > > > entry: "./src/TextareaAutosize.js",
> > > > module: {
> > > > loaders: [
> > > > {
> > > > test: /\.js$/,
> > > > loader: "babel?stage=0"
> > > > }],
> > > > },
> > > > output: {
> > > > path: __dirname + "/dist",
[ClojureScript] Re: How can I import this foreign lib.
This is very likely to break :advanced optimisations, did you test that yet?
Probably not what you are looking for but there is a "goog.ui.Textarea" [1,2]
in the closure library which does the auto-sizing as well. Should be pretty
straighforward to make a react-wrapper for it.
HTH,
/thomas
[1]
https://github.com/google/closure-library/blob/master/closure/goog/ui/textarea.js
[2]
https://google.github.io/closure-library/source/closure/goog/demos/textarea.html
On Friday, October 30, 2015 at 12:51:22 AM UTC+1, Leon Grapenthin wrote:
> I solved this by compiling the library to UMD using webpack. Also, babel is
> required as a loader to compile ES6 and JS6.
>
> It might be worthwhile to write a beginners guide about how to deal with the
> Javascript module world for people who never used JS as their first language.
> I'd do it myself but lack expertise.
>
> In any case, here is the webpack configuration file I wrote to get the above
> package to compile so that it can be included via :module-type :commonjs -
> Your input is very welcome.
>
> module.exports = {
> entry: "./src/TextareaAutosize.js",
> module: {
> loaders: [
> {
> test: /\.js$/,
> loader: "babel?stage=0"
> }],
> },
> output: {
> path: __dirname + "/dist",
> filename: "result.js",
> libraryTarget: "umd",
> library: "TextareaAutosize"
> },
> externals: {
> "react": {root: "React"}
> }
> }
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to clojurescript@googlegroups.com.
Visit this group at http://groups.google.com/group/clojurescript.
[ClojureScript] Re: How can I import this foreign lib.
Thanks Thomas for the link regarding the textarea, I might want to try that.
However I'd be very interested to learn why I should expect that this breaks
advanced optimization (luckily it doesn't).
What is your recommended pipeline? I. e. what module-type should I
comp/transpile foreign libs to before adding them to ClojureScript. It seems
that webpack is very flexible in that regard so all I'd have to know is what is
best for ClojureScript.
Thanks in advance, Leon.
On Friday, October 30, 2015 at 9:54:01 AM UTC+1, Thomas Heller wrote:
> This is very likely to break :advanced optimisations, did you test that yet?
>
> Probably not what you are looking for but there is a "goog.ui.Textarea" [1,2]
> in the closure library which does the auto-sizing as well. Should be pretty
> straighforward to make a react-wrapper for it.
>
> HTH,
> /thomas
>
> [1]
> https://github.com/google/closure-library/blob/master/closure/goog/ui/textarea.js
> [2]
> https://google.github.io/closure-library/source/closure/goog/demos/textarea.html
>
> On Friday, October 30, 2015 at 12:51:22 AM UTC+1, Leon Grapenthin wrote:
> > I solved this by compiling the library to UMD using webpack. Also, babel
> > is required as a loader to compile ES6 and JS6.
> >
> > It might be worthwhile to write a beginners guide about how to deal with
> > the Javascript module world for people who never used JS as their first
> > language. I'd do it myself but lack expertise.
> >
> > In any case, here is the webpack configuration file I wrote to get the
> > above package to compile so that it can be included via :module-type
> > :commonjs - Your input is very welcome.
> >
> > module.exports = {
> > entry: "./src/TextareaAutosize.js",
> > module: {
> > loaders: [
> > {
> > test: /\.js$/,
> > loader: "babel?stage=0"
> > }],
> > },
> > output: {
> > path: __dirname + "/dist",
> > filename: "result.js",
> > libraryTarget: "umd",
> > library: "TextareaAutosize"
> > },
> > externals: {
> > "react": {root: "React"}
> > }
> > }
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to clojurescript@googlegroups.com.
Visit this group at http://groups.google.com/group/clojurescript.
[ClojureScript] Re: How can I import this foreign lib.
Interesting. I might need to try webpack to pre-process files before letting
closure convert them. I made some attempts including common-js files into a
build and most of it broke in some way.
I assume you are including react via the normal foreign cljsjs.react?
I don't have a recommended pipeline as the feature simply has not worked for me
in :advanced.
On Friday, October 30, 2015 at 11:19:25 AM UTC+1, Leon Grapenthin wrote:
> Thanks Thomas for the link regarding the textarea, I might want to try that.
>
> However I'd be very interested to learn why I should expect that this breaks
> advanced optimization (luckily it doesn't).
>
> What is your recommended pipeline? I. e. what module-type should I
> comp/transpile foreign libs to before adding them to ClojureScript. It seems
> that webpack is very flexible in that regard so all I'd have to know is what
> is best for ClojureScript.
>
> Thanks in advance, Leon.
>
>
> On Friday, October 30, 2015 at 9:54:01 AM UTC+1, Thomas Heller wrote:
> > This is very likely to break :advanced optimisations, did you test that yet?
> >
> > Probably not what you are looking for but there is a "goog.ui.Textarea"
> > [1,2] in the closure library which does the auto-sizing as well. Should be
> > pretty straighforward to make a react-wrapper for it.
> >
> > HTH,
> > /thomas
> >
> > [1]
> > https://github.com/google/closure-library/blob/master/closure/goog/ui/textarea.js
> > [2]
> > https://google.github.io/closure-library/source/closure/goog/demos/textarea.html
> >
> > On Friday, October 30, 2015 at 12:51:22 AM UTC+1, Leon Grapenthin wrote:
> > > I solved this by compiling the library to UMD using webpack. Also, babel
> > > is required as a loader to compile ES6 and JS6.
> > >
> > > It might be worthwhile to write a beginners guide about how to deal with
> > > the Javascript module world for people who never used JS as their first
> > > language. I'd do it myself but lack expertise.
> > >
> > > In any case, here is the webpack configuration file I wrote to get the
> > > above package to compile so that it can be included via :module-type
> > > :commonjs - Your input is very welcome.
> > >
> > > module.exports = {
> > > entry: "./src/TextareaAutosize.js",
> > > module: {
> > > loaders: [
> > > {
> > > test: /\.js$/,
> > > loader: "babel?stage=0"
> > > }],
> > > },
> > > output: {
> > > path: __dirname + "/dist",
> > > filename: "result.js",
> > > libraryTarget: "umd",
> > > library: "TextareaAutosize"
> > > },
> > > externals: {
> > > "react": {root: "React"}
> > > }
> > > }
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to clojurescript@googlegroups.com.
Visit this group at http://groups.google.com/group/clojurescript.
[ClojureScript] Re: How can I import this foreign lib.
Correction: Using :module-type :commonjs is incorrect because of the way the React dependency is specified. Instead, using no :module-type and :requires ["cljsjs.react"] is correct. -- Note that posts from new members are moderated - please be patient with your first post. --- You received this message because you are subscribed to the Google Groups "ClojureScript" group. To unsubscribe from this group and stop receiving emails from it, send an email to clojurescript+unsubscr...@googlegroups.com. To post to this group, send email to clojurescript@googlegroups.com. Visit this group at http://groups.google.com/group/clojurescript.
[ClojureScript] Re: How can I import this foreign lib.
I solved this by compiling the library to UMD using webpack. Also, babel is
required as a loader to compile ES6 and JS6.
It might be worthwhile to write a beginners guide about how to deal with the
Javascript module world for people who never used JS as their first language.
I'd do it myself but lack expertise.
In any case, here is the webpack configuration file I wrote to get the above
package to compile so that it can be included via :module-type :commonjs - Your
input is very welcome.
module.exports = {
entry: "./src/TextareaAutosize.js",
module: {
loaders: [
{
test: /\.js$/,
loader: "babel?stage=0"
}],
},
output: {
path: __dirname + "/dist",
filename: "result.js",
libraryTarget: "umd",
library: "TextareaAutosize"
},
externals: {
"react": {root: "React"}
}
}
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to clojurescript+unsubscr...@googlegroups.com.
To post to this group, send email to clojurescript@googlegroups.com.
Visit this group at http://groups.google.com/group/clojurescript.
