Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
HaB
Jan 5, 2001

What are the odds?

Ruggan posted:

Per the eslint docs, the only way to specify file extensions to lint is through the command line.

https://eslint.org/docs/user-guide/configuring#specifying-file-extensions-to-lint

Maybe there’s a way to get it to work with glob patterns?

Looking at the default setup after creating a new Vue project with the cli. It must be the plugin that's handling it. here's the relevant part from package.json:

code:
"devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.5",
    "@vue/cli-plugin-eslint": "^3.0.5",
    "@vue/cli-service": "^3.0.5",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.5.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }
Maybe install eslint-plugin-vue and see if there's some way to jack with its config?

Adbot
ADBOT LOVES YOU

Ruggan
Feb 20, 2007
WHAT THAT SMELL LIKE?!


HaB posted:

Looking at the default setup after creating a new Vue project with the cli. It must be the plugin that's handling it. here's the relevant part from package.json:

code:
"devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.5",
    "@vue/cli-plugin-eslint": "^3.0.5",
    "@vue/cli-service": "^3.0.5",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.5.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }
Maybe install eslint-plugin-vue and see if there's some way to jack with its config?

Nah, I already have the plugin installed. That helps parse the JS out of the single file components (pulls the JS from the .vue file - don’t want to parse the whole thing). The eslint-plugin-vue docs even specify that eslint needs to be run to include .vue files to work, and points at editor integration to do this automatically.

Most front-end editors have editor-specific config that allow you to specify how eslint works, but not Visual Studio Pro.

https://eslint.vuejs.org/user-guide/#editor-integrations

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Grump posted:

yeah I saw some React folks complaining about the TypeScript definition names and they must have changed it recently?

I'm not sure what happened there. I'm just now getting back up to speed with TS after not using it in any projects for a year or so.

I would like to know why the change though.

Either I haven't searched very well or there doesn't seem to be a good official place documenting all the React TS types.

That github repo documenting React+TS best practices I linked earlier works pretty well though.

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself

Thermopyle posted:

I'm not sure what happened there. I'm just now getting back up to speed with TS after not using it in any projects for a year or so.

I would like to know why the change though.

Either I haven't searched very well or there doesn't seem to be a good official place documenting all the React TS types.

That github repo documenting React+TS best practices I linked earlier works pretty well though.

I think a couple weeks ago I saw Dan Abramov and folks basically saying on Twitter, “they’re not called stateless functional components. Stop calling them that!!!” in response to the naming convention of the typescript definitions

E: thread here explains

https://twitter.com/dan_abramov/status/1057625147216220162?lang=en

teen phone cutie fucked around with this message at 17:17 on Mar 31, 2019

evilfunkyogi
Jun 27, 2005
:effort:
Yeah it's because with hooks functional components can now be stateful, so SFC doesn't make sense as the type name for non-class components.

prom candy
Dec 16, 2005

Only I may dance

evilfunkyogi posted:

Yeah it's because with hooks functional components can now be stateful, so SFC doesn't make sense as the type name for non-class components.

They switched to calling them "function" components instead of "functional" as well because the hook stuff I guess makes them not truly functional or something I dunno I don't have a CS degree

RobertKerans
Aug 25, 2006

There is a heppy lend
Fur, fur aw-a-a-ay.

prom candy posted:

They switched to calling them "function" components instead of "functional" as well because the hook stuff I guess makes them not truly functional or something I dunno I don't have a CS degree

I dunno, I think it just makes more sense to call them function components given that's what they are, calling em "functional" just seems a bit opinionated. Hooks seem to basically be algebraic effects afaics from skim reading this paper that is the first result on Google, and they're functional things, but I also do not have a CS degree so

Scaramouche
Mar 26, 2001

SPACE FACE! SPACE FACE!

The Cavern of COBOL > Modern front-end development: I also do not have a CS degree

RobertKerans
Aug 25, 2006

There is a heppy lend
Fur, fur aw-a-a-ay.

Scaramouche posted:

The Cavern of COBOL > Modern front-end development: I also do not have a CS degree

The Cavern of COBOL > Modern front-end development: Does ignorance of history mean we are doomed to repeat the mistakes of the past for all eternity?

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Anyone have a React table component that they like?

Responsive, sortable, etc.

I might just write my own, but I want to see some good options first.

abraham linksys
Sep 6, 2010

:darksouls:

Thermopyle posted:

Anyone have a React table component that they like?

Responsive, sortable, etc.

I might just write my own, but I want to see some good options first.

I'm curious to hear what you pick and how it goes; I've rolled my own in the past but it sucked and was 99% boilerplate.

I saw https://www.zinggrid.com and https://handsontable.com come up in the context of paid-usage libraries recently, both looked neat if you can drop the money (or have a noncommercial project). Handsontable particularly looks great and if I ever have a "make a giant CRUD app with complex needs" project at my current company I think there's a decent chance we throw money at it. There's also a community edition based on the last version before they made a license change that might do what you need.

I'm curious how those projects end up doing, though; per-seat licenses seem really hard to keep up with even in organizations that would like to properly adhere to the license terms, and literally impossible to actually enforce on their end unless there's like a hosted service to go with it.

Queen Victorian
Feb 21, 2018

Thermopyle posted:

Anyone have a React table component that they like?

Responsive, sortable, etc.

I might just write my own, but I want to see some good options first.

I've poked around (though not specifically in React, and not terribly in depth) and didn't see anything that worked the way I wanted it to - they all had deal-breaking limitations and/or sucked. I've been tinkering with Crossfilter.js + D3 to roll my own interactive table solution for large data sets. Crossfilter sorts/filters data, a dumb D3 table displays it (and emits click events when headers for sortable columns are clicked), and a pagination widget emits array slice indices based on your page position so the table can be told which slice of the data array to draw.

What I wanted to get away from was having the data be intertwined with and locked to the presentation (gently caress you, DataTables). Having the data/data manipulation be totally independent from how it's presented makes everything SO much nicer, and worth learning Crossfilter and building all this poo poo from scratch.

I think it would be pretty easy to make React component versions of the table (which is super dumb and basic) and paginator (most of which is logic, so it'd just need a new template), and Crossfilter doesn't care because it doesn't touch the display at all. I'm also working to extend this table/paginator combo to work with page-by-page queries for when Crossfilter isn't feasible.

P.S. I've started an online React course and I so far like it a lot except that part where it wants to throw a wench into my D3 paradigm and its components are pretty similar to where we've been going with ES6 classes, so it's not even that unfamiliar. JSX is kinda weird though - it's in this uncanny valley of being almost the same as HTML but sets off all my wrongness triggers with the camel case and component-names-as-tags. I guess I'll get used to it.

SimonChris
Apr 24, 2008

The Baron's daughter is missing, and you are the man to find her. No problem. With your inexhaustible arsenal of hard-boiled similes, there is nothing you can't handle.
Grimey Drawer

Thermopyle posted:

Anyone have a React table component that they like?

Responsive, sortable, etc.

I might just write my own, but I want to see some good options first.

http://schrodinger.github.io/fixed-data-table-2/example-object-data.html

I am using Fixed Data Table 2, which is a continuation of an abandoned Facebook project. It requires you to plug in your own sorting and filtering functions, which I like because it means I'm not limited to whatever built-in functionality comes with the package.

smackfu
Jun 7, 2004

abraham linksys posted:

I'm curious how those projects end up doing, though; per-seat licenses seem really hard to keep up with even in organizations that would like to properly adhere to the license terms, and literally impossible to actually enforce on their end unless there's like a hosted service to go with it.
Yeah, seems like it would only work with small shops with a fixed number of devs all working on the project in question.

I seem to remember there used to be JS packages where you had to include the version from the vendors site and the url had a unique key so it could only be used from your particular urls but I don’t know how they would adapt that to an npm / webpack world.

my bony fealty
Oct 1, 2008

Queen Victorian posted:

P.S. I've started an online React course and I so far like it a lot except that part where it wants to throw a wench into my D3 paradigm and its components are pretty similar to where we've been going with ES6 classes, so it's not even that unfamiliar. JSX is kinda weird though - it's in this uncanny valley of being almost the same as HTML but sets off all my wrongness triggers with the camel case and component-names-as-tags. I guess I'll get used to it.

JSX is weird but you definitely get used to it. I like it more as a templating solution than the directives that most other FE frameworks seem to use.

fwiw I would recommend exploring React hooks early in your learning, React really feels designed with a more functional programming approach in mind and hooks let you embrace that. basically you can write components entirely as functions, no more classes needed. I read once that "React imagines UI as pure functions of state" and I thought that sounded about right.

Classes are not going anywhere though so don't feel like you have to move to hooks anytime soon, I've just found that everyone I know who has started using them really likes them (including myself). especially if you're like me and don't really care for classes in JS at all.

Ape Fist
Feb 23, 2007

Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

RobertKerans posted:

The Cavern of COBOL > Modern front-end development: Does ignorance of history mean we are doomed to repeat the mistakes of the past for all eternity?

The Cavern of COBOL > Modern front-end development: I have a CS degree, but I'm using it to write CSS.

Gildiss
Aug 24, 2010

Grimey Drawer

my bony fealty posted:

JSX is weird but you definitely get used to it. I like it more as a templating solution than the directives that most other FE frameworks seem to use.

fwiw I would recommend exploring React hooks early in your learning, React really feels designed with a more functional programming approach in mind and hooks let you embrace that. basically you can write components entirely as functions, no more classes needed. I read once that "React imagines UI as pure functions of state" and I thought that sounded about right.

Classes are not going anywhere though so don't feel like you have to move to hooks anytime soon, I've just found that everyone I know who has started using them really likes them (including myself). especially if you're like me and don't really care for classes in JS at all.

Do you have a good starting guide for hooks? There are so goddamn many and I don't trust any of them due to that.

Vincent Valentine
Feb 28, 2006

Murdertime

I've actually been considering doing a start to finish full react tutorial. I started using it over 3 years ago and I just kind of picked things up as I went along.

With all the major changes lately, doing a full tutorial might help me to see how everything fits together as a whole rather than seeing how I could bolt on new features as though they were separate, which is kind of what I've been doing.

Been considering waiting until context gets further along because it's gonna be rad, but who knows how long that will be.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Gildiss posted:

Do you have a good starting guide for hooks? There are so goddamn many and I don't trust any of them due to that.

The official docs seem fine to me.

Hed
Mar 31, 2004

Fun Shoe
Do you redux fans use connected-react-router for your routing needs?

I’m replacing react-router with it to combat an issue I had with a component double-firing when I clicked a Link component (and the change in route params also kicked something into gear) but now I’m wondering if it’s worth it since I can think of another way to solve the problem.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Hed posted:

Do you redux fans use connected-react-router for your routing needs?

I’m replacing react-router with it to combat an issue I had with a component double-firing when I clicked a Link component (and the change in route params also kicked something into gear) but now I’m wondering if it’s worth it since I can think of another way to solve the problem.

I use redux-first-router when I use redux and I love it. https://github.com/faceyspacey/redux-first-router

Speaking of routing, I'm working on a project that's too small for Redux (and might not get that big for a long time) and I have an aversion to react-router and was wondering what others are using if they are using something else!

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
Reach router is good an v accessible, meaning that it focuses on the changed content when you change routes

It was made by the guy who wrote react router

prom candy
Dec 16, 2005

Only I may dance

Gildiss posted:

Do you have a good starting guide for hooks? There are so goddamn many and I don't trust any of them due to that.

The official docs are good. Kent C. Dodds' video tutorial on egghead is good, I think you need an account but it should be free. I also haven't watched it yet but the other day Dan Abramov and MPJ did a livestream where Dan taught MPJ hooks from scratch: https://www.twitch.tv/videos/404530952?t=00h14m17s

Hooks are so goddamn good I love them.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Grump posted:

Reach router is good an v accessible, meaning that it focuses on the changed content when you change routes

It was made by the guy who wrote react router

Oooh, I like it. Still wish I could use redux-first-router, but without redux, it don't work so good.... :v:

Queen Victorian
Feb 21, 2018

my bony fealty posted:

JSX is weird but you definitely get used to it. I like it more as a templating solution than the directives that most other FE frameworks seem to use.
I'm at the point where I'm whiplashing between "It's awesome!" and "It's gross!" but either way it's pretty convenient. Though I did do a bunch of pondering on why I couldn't just use a template literal, but I figure the ReactDOM and async have something to do with that.

quote:

fwiw I would recommend exploring React hooks early in your learning, React really feels designed with a more functional programming approach in mind and hooks let you embrace that. basically you can write components entirely as functions, no more classes needed. I read once that "React imagines UI as pure functions of state" and I thought that sounded about right.

Classes are not going anywhere though so don't feel like you have to move to hooks anytime soon, I've just found that everyone I know who has started using them really likes them (including myself). especially if you're like me and don't really care for classes in JS at all.

I would describe our shop's programming paradigm as event-based OOP. Boss likes it, and my intro to programming was Java, so I'm happy with it (and was excited when we got to start using ES6 classes instead of awkward old-JS functions masquerading as classes), so I have a feeling we'll be sticking with React classes for the time being. (Though if I'm writing a quick little PHP widget to take some data and poo poo out a CSV or something, I'll do it procedurally.)

Hooks don't come up in my online course until later (and the instructor is a pro-class guy), but I'll try to do some reading on them beforehand. I read React's article on them and am intrigued but don't think I quite get them - are they at all like Wordpress hooks? That's like the one hook system I've used and understand, but I'm not sure how consistent the term "hook" is, so I could be completely off base in my comparison (which wouldn't surprise me because I'm a total React noob and also one of those BFA programmers).

HaB
Jan 5, 2001

What are the odds?

Queen Victorian posted:

...ES6 classes instead of awkward old-JS functions masquerading as classes)...

For the record, es6 classes are STILL awkward JS functions masquerading as classes. Don't let the syntactic sugar fool you. ;)

Queen Victorian
Feb 21, 2018

HaB posted:

For the record, es6 classes are STILL awkward JS functions masquerading as classes. Don't let the syntactic sugar fool you. ;)

Oh, I'm well aware, but now the game of pretend is so much more pleasant. Prototypal inheritance still fucks with me, though.

If I want to do actual classes and class inheritance, then I have to make an excuse to write something in PHP (which is only for side projects, not a part of our main stack).

dupersaurus
Aug 1, 2012

Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Queen Victorian posted:

I'm at the point where I'm whiplashing between "It's awesome!" and "It's gross!" but either way it's pretty convenient. Though I did do a bunch of pondering on why I couldn't just use a template literal, but I figure the ReactDOM and async have something to do with that.

I came into React with philosophical issues with JSX and embedded templates but, really, it's fine in practice and probably going back to templates would be rough

Ruggan
Feb 20, 2007
WHAT THAT SMELL LIKE?!


Lumpy posted:

I use redux-first-router when I use redux and I love it. https://github.com/faceyspacey/redux-first-router

I also use redux-first-router for any SPAs that use redux.

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
What’s the pro of using redux router when react router provides the withRouter HOC?

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Grump posted:

What’s the pro of using redux router when react router provides the withRouter HOC?

Because the way redux-first-router works is intuitive and smart, and ALL your state is in redux, your navigation is dispatching actions, and doing stuff like protecting routes is incredibly easy. Plus I really dislike the way React Router works / renders / does just about everything.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

JSX is much easier to deal with if you have an IDE / editor that has good support for it.

Ahz
Jun 17, 2001
PUT MY CART BACK? I'M BETTER THAN THAT AND YOU! WHERE IS MY BUTLER?!

Hed posted:

Do you redux fans use connected-react-router for your routing needs?

I’m replacing react-router with it to combat an issue I had with a component double-firing when I clicked a Link component (and the change in route params also kicked something into gear) but now I’m wondering if it’s worth it since I can think of another way to solve the problem.

That's just a library which syncs your existing react router state with redux.

You may be better off investigating your double firing issue as you have several levers at your disposal w/React to skip renders.

I looked into redux-first-router, but it seems his full fledged redux based router as his @next (rudy, i think) has never materialized after over a year of talking about it being just around the corner. It doesn't seem like faceyspacey has the traction or will to stick with something long term.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Ahz posted:

That's just a library which syncs your existing react router state with redux.

You may be better off investigating your double firing issue as you have several levers at your disposal w/React to skip renders.

I looked into redux-first-router, but it seems his full fledged redux based router as his @next (rudy, i think) has never materialized after over a year of talking about it being just around the corner. It doesn't seem like faceyspacey has the traction or will to stick with something long term.

That’s fair, but at the same time, what exists is amazing, so it’s not like you need to wait for some future thing to use it.

Dominoes
Sep 20, 2007

Hey bros. Are there any gotchas for setting the text of input elements, using javascript DOM manip? (Presumably applies to textarea as well). Ie, what could cause this?


This implies it's not simply the value attribute, nor is it a text node.

edit: Fixed. Must use setValue in this case, instead of/in addition to setAttribute. Appears the value state is subtly different from the value attr.

Dominoes fucked around with this message at 04:51 on Apr 4, 2019

Gildiss
Aug 24, 2010

Grimey Drawer

prom candy posted:

The official docs are good. Kent C. Dodds' video tutorial on egghead is good, I think you need an account but it should be free. I also haven't watched it yet but the other day Dan Abramov and MPJ did a livestream where Dan taught MPJ hooks from scratch: https://www.twitch.tv/videos/404530952?t=00h14m17s

Hooks are so goddamn good I love them.

Started with the twitch last night and then jumped into the docs and

prom candy posted:

Hooks are so goddamn good I love them.

Tei
Feb 19, 2011

[question already answered]

sorry

Queen Victorian
Feb 21, 2018

Hey guys, I had the displeasure of learning that "CSS in JS" is a thing the other day. It's one of the more abominable newfangled front-end things I've come across in my React/new front-end tech learning journey so far. Just... why??

We were evaluating React-based UI component frameworks (to replace our motley shitpile of jQuery-UI/bootstrap-plugin/random third-party/homegrown UI widgets with a unified system), and Material-UI was looking mighty nice (had all the complements we wanted and looked good, etc), but then I looked at means of styling customization and saw that they used JSS. Read into it and then removed Material-UI from consideration because I don't want to "compile" CSS from some stupid JS syntax and then be unable to diagnose display issues from looking at the output because all the classes are machine-generated gibberish. I guess it could have been worse - at least they weren't using the inline-style implementation.

It seems to me that this system was invented/is advocated by non-design JS fans who want to do absolutely everything in JS and lack fundamental understanding of CSS and why it works the way it does (global namespace and cascading, the horror!). Also, being a designer, I find all the abstraction a detriment to my process and understanding. If I write some HTML templates, I like having the output be the same as what I wrote so it's easy to examine and test with dev tools (this is why I'm coming to like JSX - very low abstraction).

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense
It's a combination of "everything needs to be built in javascript" and a lot of people not liking CSS. The parts of CSS they don't like though aren't going to be solved by putting it into javascript it'll only introduce new headaches, I'm with you brother/sister.

Adbot
ADBOT LOVES YOU

HexiDave
Mar 20, 2009

Queen Victorian posted:

Hey guys, I had the displeasure of learning that "CSS in JS" is a thing the other day. It's one of the more abominable newfangled front-end things I've come across in my React/new front-end tech learning journey so far. Just... why??

We were evaluating React-based UI component frameworks (to replace our motley shitpile of jQuery-UI/bootstrap-plugin/random third-party/homegrown UI widgets with a unified system), and Material-UI was looking mighty nice (had all the complements we wanted and looked good, etc), but then I looked at means of styling customization and saw that they used JSS. Read into it and then removed Material-UI from consideration because I don't want to "compile" CSS from some stupid JS syntax and then be unable to diagnose display issues from looking at the output because all the classes are machine-generated gibberish. I guess it could have been worse - at least they weren't using the inline-style implementation.

It seems to me that this system was invented/is advocated by non-design JS fans who want to do absolutely everything in JS and lack fundamental understanding of CSS and why it works the way it does (global namespace and cascading, the horror!). Also, being a designer, I find all the abstraction a detriment to my process and understanding. If I write some HTML templates, I like having the output be the same as what I wrote so it's easy to examine and test with dev tools (this is why I'm coming to like JSX - very low abstraction).

I wasn't into it at first either, but it also means that I don't have to fuss with SASS/LESS and weird import mechanisms. It also lets you customize component styles much more easily than hoping you were specific enough to override some other styles elsewhere. The name mangling only happens when you do a production build - they're all named after the React components they're styling in development mode.

If you look at the component style overriding options for Material-UI, you'll see some of the power you get with very little work.

And, yeah, Javascript has permeated into everything, but React being married to a Javascript styling system - especially when it all works out of the box with Typescript - is pretty incredible and has saved me a lot of effort over the last year or two.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply