How do I compile it to a single js and css file? #1096
Comments
|
This is exactly the purpose of react-toolbox-themr! There you can extract the css into a single file but the js is required works like any other library. You can use browserify or anything else. :) |
|
I really like react-toolbox, but even with react-toolbox-themr, it's very hard to repackage it for use in ClojureScript applications. |
|
How can I help with this? Is there any ongoing issue with the themr package? |
|
I'm working on this. I found other projects that also depend on webpack for
repackaging so, I'm experimenting with that. At the moment I have a quick
and dirty solution that will need quite a bit of work to be published. Once
I get to that I'll feedback anything I find.
On Mon, Jan 9, 2017, 08:33 Javi Velasco ***@***.***> wrote:
How can I help with this? Is there any ongoing issue with the themr
package?
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#1096 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AAAg6VPx5U2NGL_hKFkXIVND_KLA-aWuks5rQfDMgaJpZM4LYm_r>
.
--
J. Pablo Fernández <pupeno@pupeno.com>
https://pupeno.com
|
|
Part of packaging a library such as this one for cljsjs is to build it with webpack as a single JavaScript 5 file. I'm trying to do it with this file: const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var entryName = "react-toolbox.inc";
module.exports = {
entry: path.join(__dirname, "components", "index.js"),
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
output: {
filename: entryName + ".js",
libraryTarget: "umd",
library: "ReactToolbox"
},
resolve: {
extensions: ['', '.js', '.jsx', '.scss']
},
module: {
loaders: [
{
test: /(\.js|\.jsx)$/,
exclude: /(node_modules)/,
loader: "babel",
query: {
presets: ['es2015', 'react', 'stage-0'],
plugins: ['add-module-exports']
}
},
{
test: /(\.scss|\.css)$/,
loader: ExtractTextPlugin.extract("style", "css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass")
}
]
},
postcss: [autoprefixer],
plugins: [
new ExtractTextPlugin(entryName + '.css', {allChunks: true})
]
};Does anything look immediately wrong here? When I start off with npm install --production it fails with this error: and it goes on and on and on. |
|
Any ideas what the problem might be? The commands I'm running can be found here: https://github.com/pupeno/packages/blob/react-toolbox/react-toolbox/build.boot#L46-L49 (sorry, Clojure code, but the npm calls should be clear enough). |
|
@pupeno not sure about what would be the error there. I'm not very familiar with building umd with webpack. For react-toolbox-themr I've wrote an script for this same reason. I didn't even knew if that's easy to do with webpack. Maybe it's helpful for you too. The css part is right there, the JS should be more straightforward and can be done with Gulp probably. |
|
I don't have to package it as umd. Most cljsjs packages use var and that's what I'm using right now. |
|
My current attempt is here: https://github.com/pupeno/packages/blob/react-toolbox/react-toolbox/resources/webpack.config.js it either ends up having its own copy of React or it cannot find classNames. |
|
It's a well known issue. You can't even |
|
I'm not even sure what I'm looking at to be honest. Before looking at the CSS, I'd like to get the JavaScript part opening. I need compile React Toolbox to a single JavaScript 5 file that doesn't include its own copy of React. |
|
I would need to dig deeper on this but maybe this could be helpful? I guess adding the lib to cdn should be the same process you're looking for? |
|
Yes... if there was a .js/.css in a CDN, packaging for use in Clojure would be trivial (I think). |
|
Also, I'm using the latest stable release. Not sure how big of a difference it makes. react-toolbox-themr seems to only work with the beta. |
|
Exactly. It only works with the beta because we can take advantage of the postcss flexibility. With sass I think it's not even possible. My advice is to check out that build and how it was generated and to switch to the beta. Actually it's a beta because there will be important changes across releases but it's sage to use it. |
|
So, I'm looking at working with 2.0.0-beta.6 and react-toolbox-themr.
Using webpack for repackaging npm libraries for Clojure is not common, but many packages do it, so, it is accessible to me.
These packages don't tend to have a package.json, so, there seems to be a bit of impedance mismatch to say the least. I'm concerned about the amount of moving pieces already, it makes it very hard to figure out what's wrong when something goes wrong (all the time). Looking at the example: "reactToolbox": {
"include": [
"BUTTON",
"DATE_PICKER"
],
"customProperties": {
"animation-duration": "0.3s",
"color-accent": "var(--palette-pink-a200)",
"color-accent-dark": "var(--palette-pink-700)",
"color-primary-contrast": "var(--color-dark-contrast)",
"color-accent-contrast": "var(--color-dark-contrast)",
},
"output": "assets/react-toolbox"
}it looks like it's a pick and chose for my project kind of setup. I need to package everything. Do I have to list everything there then? |
|
You can even not include any configuration at all and it will get the defaults. The thing is that if you want to generate a final build, stuff like theming is not going to work because you need to process stylesheets. Consider this package sort of a bundler to generate static styles and theme for react-toolbox so you can use it in whatever stack with no config at all |
|
Ok, so, I'm experimenting with it. I just tried running it with no arguments: I guess it's assuming it's in a project that requires the npm package react-toolbox, so, I tried to specify the path: and now I'm not sure what's up there. |
|
BTW, thanks a lot for the help, it's really appreciated. :) |
|
No problem! I'd try to generate a project just to extract styles to make sure it will work. It should specifying your own path too, but I think I didn't test it hardly. Following the video in the package should work. If you are willing to generate a package that install both react toolbox and themr and generates a build maybe it's a different business. Feel free to ping me tomorrow via Discord if it's still troublesome |
|
That video starts by creating an app, while what I'm doing has no app. I understand the bit I care about is running ./node_modules/.bin/react-toolbox-themr but I'm stumbling on an error with that. |
|
@javivelasco how do I find you there? |
|
I'm @Javi there. Or through #react-toolbox channel |
|
When I try to add you it says I need your four digit tag. |
|
@pupeno - did you ever resolve this and create a webpack config which generates one js file and one css file. Thanks. |
|
@simonlmartin I just noticed your message as I was trying to upgrade the ClojureScript package to beta 12. I did manage to make it work with this webpack: https://github.com/cljsjs/packages/blob/master/react-toolbox/resources/webpack.config.js but since then, the layout changed entirely and now there are these different packages and I'm again lost as to how to compile react-toolbox. |
|
Here I started trying to make it work with the new layout: At this point I'm getting this error: |
|
This is the line export Ripple from './ripple'; causing the issue. |
I can't figure out how to compile react-toolbox to a single js and css files that is easy to add to a project. You don't seem to provide them either.
For example, for material-components, there's npm build:
https://github.com/material-components/material-components-web/blob/master/package.json#L6-L7
https://github.com/material-components/material-components-web/blob/master/webpack.config.js
The text was updated successfully, but these errors were encountered: