These are chat archives for jescalan/roots

1st
Sep 2016
andrewgrano
@andrewgrano
Sep 01 2016 19:17
@jescalan - FYI, I just PR-ed that change on roots-wordpress :thumbsup:
Jeff Escalante
@jescalan
Sep 01 2016 19:17
ah awesome, thank you!
releasing now
Robert W Boyer
@rwboyer
Sep 01 2016 19:36
anyone got time for a roots-browserify question?
Jeff Escalante
@jescalan
Sep 01 2016 19:37
absolutely
Robert W Boyer
@rwboyer
Sep 01 2016 19:37
trying to do something with a legacy app and can't quite get the app.config woring
short story = legacy app + some new react components...
using js_pipeline for all the legacy stuff = works fine wanted to use roots-browserify for just the JSX and can't seem to figure out config for that...
Jeff Escalante
@jescalan
Sep 01 2016 20:43
hard for me to give any support based on that
i mean first step is probably upgrading the version
you can also compile jsx directly using accord if you want by making the extension .jsx
Robert W Boyer
@rwboyer
Sep 01 2016 20:56
that doesn't seem to work for what I'm doing (I think it's using react-tools)
@jescalan - I guess my problem comes down to how to correctly specifiy opts: { transform: 'babelify' , [es2015, react]} for roots-browserify AND also how to use both roots-browserify and js-pipeline?
Jeff Escalante
@jescalan
Sep 01 2016 21:01
you cant really use browserify and js pipeline i dont think
they are two different tools for the same task
Robert W Boyer
@rwboyer
Sep 01 2016 21:04
@jescalan my first problem is actually sending options... currently is this: browserify(files: 'assets/js/src/test.jsx', opts: { transform: 'babelify', presets: ['es2015', 'react'], extensions: ['.jsx'] }, out: 'js/reactmain.js')
@jescalan which is not actually using either preset...
Jeff Escalante
@jescalan
Sep 01 2016 21:05
roots browserify is using browserify v11
Robert W Boyer
@rwboyer
Sep 01 2016 21:05
second issue will be sorting out js_pipeline/legacy vs. browserify
Jeff Escalante
@jescalan
Sep 01 2016 21:05
is it possible that this version doesn't support presets?
Robert W Boyer
@rwboyer
Sep 01 2016 21:05
don't think so...
@jescalan as a work around how can one run an npm script from app.coffee?
Jeff Escalante
@jescalan
Sep 01 2016 21:07
Robert W Boyer
@rwboyer
Sep 01 2016 21:07
@jescalan or basically do the jsx/es6 step first... then js_pipeline
Jeff Escalante
@jescalan
Sep 01 2016 21:07
seems like perhaps you can pass the options differently
app.coffee is a standard js file
you can run anything in there that you want using node
to run an npm script, you'd need to use a child process to hit the command line
this is very hacky though, i wouldnt exactly recommend it
Robert W Boyer
@rwboyer
Sep 01 2016 21:09
@jescalan exactly... I think my issue lies in that snippet I sent u as the opts are not formatted correctly... any guesses
Jeff Escalante
@jescalan
Sep 01 2016 21:09
yeah, check the test referenced above
also the options format is documented in the roots-browserify repo :)
also here's a basic react implementation: https://github.com/carrot/roots-template-react
Robert W Boyer
@rwboyer
Sep 01 2016 21:13
I can't figure out the structure of opts: to get plugins: to be recognized...
@jescalan just tried a bunch of combos including not specifying opts: {} as in your example... just need to figure out how to pass in plugins:
@jescalan have this now: browserify(files: 'assets/js/src/test.jsx', opts: {transforms: {'babelify', presets: ['es2015', 'react']}, extensions: ['.jsx'] }, out: 'js/reactmain.js'),
Jeff Escalante
@jescalan
Sep 01 2016 21:17
can you just pass it directly to the transform?
like, require the transform and pass it to the function call
i generally tend to avoid providing dependencies as strings like the plague
because you never know how they are being required and used etc
Robert W Boyer
@rwboyer
Sep 01 2016 21:18
@jescalan here's how it works standalone as in I just wanted to make sure all the modules worked...
@jescalan this works fine: browserify -t [ babelify --presets [ es2015 react ] ] assets/js/src/test.jsx -o test-babelify.js
I @jescalan just for the life of me I cannot figure out how to pass transform with those presets into react-browserify
Jeff Escalante
@jescalan
Sep 01 2016 21:20
haha
i think there is not a way
we take transforms and pass them
you'd have to just PR in an option to add the options
or
just do this
babelify.configure({
  presets: ["es2015", "react"]
})
then pass that in to transform as an option
it has it in their docs
so...
browserify = require 'roots-browserify'
babelify = require 'babelify'
module.exports =
  # ... config...
  extensions: [browserify(transform: babelify.configure({ presets: ['es2015', 'react'] }))]
that should do it
Robert W Boyer
@rwboyer
Sep 01 2016 21:28
@jescalan let me give it a whirl...
@jescalan - nope... couple of trys and transform: gives me same thing I have been getting = JSX processed but no presets. transforms: - with an s (as i thought it was but could be wrong) gives me no syntax errors but also a 0 byte output.
Hmmm
Jeff Escalante
@jescalan
Sep 01 2016 21:34
transforms is the right option
that was my typo
0 byte output indicates an error somewhere
Robert W Boyer
@rwboyer
Sep 01 2016 21:46
@jescalan obviously not working, told you getting options in there is a bitch = not super intuitive... cannot seem to find anyone using any modern version of react w/ roots atm... may just kludge it with exec until I move everything over to spike and webpack...
Jeff Escalante
@jescalan
Sep 01 2016 21:47
i know its frustrating and im sorry i couldnt help more
but to be fair, the options are clearly written out in the readme of both babelify and roots-webpack
i just went to those repos and read the readmes
i dont really know how it could be made more intuitive
Robert W Boyer
@rwboyer
Sep 01 2016 21:47
@jescalan just so so many gotta's with legacy jQuery code/plug-ins that are difficult to make work... and I am NOT a huge believer in postcss / BEM / embedded cSS in components for any real world site/app, not workable right now
Jeff Escalante
@jescalan
Sep 01 2016 21:48
i dont disagree at all
except for postcss, which i am a very big believer in
bem and css modules, definitely not
Robert W Boyer
@rwboyer
Sep 01 2016 21:48
@jescalan - sure docs are clear, except neither of us can figure out how to inject transforms with presets in from the docs ;-)
Jeff Escalante
@jescalan
Sep 01 2016 21:49
yeah the last code example we put in is the correct way to do it
it just came out as an error with this particular transform
Robert W Boyer
@rwboyer
Sep 01 2016 21:52
@jescalan using same exact node_modules with command line browserify which packs up the transform/presets correctly = no error and works fine so I'm skeptical on the injection of those presets getting in there they way they should be.
Jeff Escalante
@jescalan
Sep 01 2016 21:53
feel free to dig in a little further!
this is open source software :)
im just one guy trying to work for everyone for free
you have a link to the line where the transform is applied
above
i dont use react and babelify, so i have not run into this exact issue
Robert W Boyer
@rwboyer
Sep 01 2016 22:02
@jescalan thank you... was just trying to use the roots.cx build stuff that's already there. I am not a browserify user either anymore, webpack, every think we all spend too much time messing with tooling ??? ;-)
Jeff Escalante
@jescalan
Sep 01 2016 22:03
well i work on it full time
Robert W Boyer
@rwboyer
Sep 01 2016 22:03
@rwboyer I just felt like it vs the 38 small changes to old crap I have in basecamp today
@jescalan so... spike or roots? at this point...
Jeff Escalante
@jescalan
Sep 01 2016 22:04
spike
we're entirely off roots internally
as soon as spike is released roots will be put into maintenance mode
this is happening soon, like within the next 2 months
a lot has changed since i started working on roots. it started a number of years ago
Robert W Boyer
@rwboyer
Sep 01 2016 22:12
@jescalan mind if I ask u what the "best" spike setup is for using global CSS/SCSS?
Tom Kraak
@tkraak
Sep 01 2016 22:16
global?
Robert W Boyer
@rwboyer
Sep 01 2016 22:17
as in global CSS vs component in-lined.
Jeff Escalante
@jescalan
Sep 01 2016 22:17
i am not sure i understand
also come on down to the spike channel for spike questions! :)
Robert W Boyer
@rwboyer
Sep 01 2016 22:19
@jescalan - you guys are fairly pug/stylus oriented me = scss and I am definitely not ready to move into the inlined css world (no giant upside for most of the apps I build)
Jeff Escalante
@jescalan
Sep 01 2016 22:19
you mean whitespace-sensitive?
with spike, you can use this template: https://github.com/static-dev/spike-tpl-sugarfree
and you get css with brackets and semis, and normal html
but with all the same features other than that
Robert W Boyer
@rwboyer
Sep 01 2016 22:20
@jescalan I am personally vacillating wildly on my next static site build tool between possibly gastby (next version), phenomic (sorta like gatsby's next version kinda), and spike
Jeff Escalante
@jescalan
Sep 01 2016 22:21
gatsby will lock you in to react and frontmatter/blog format
Tom Kraak
@tkraak
Sep 01 2016 22:21
there is no inline CSS anywhere with spike
Jeff Escalante
@jescalan
Sep 01 2016 22:21
spike does not lock you in this way
Robert W Boyer
@rwboyer
Sep 01 2016 22:22
@tkraak - maybe i misinterpreted where it was going with the standards...
Jeff Escalante
@jescalan
Sep 01 2016 22:22
you dont have to use markdown, you dont need to use front matter, and you don't need to use react at all
i think when he said inline css, he meant whitespace syntax like jade/stylus
ok i gotta roll out for the day, but happy to field any Qs tomorrow, drop em here!
Robert W Boyer
@rwboyer
Sep 01 2016 22:23
@jescalan thanks... liked roots because it was a lot like middleman which was my OLD go-to