> trial and stderr

Managing Global Styles with styled-jsx

 • 

There's a bug, it might exist in styled-jsx but it certainly exists in styled-jsx as used by nextjs, where you can't have multiple <style jsx global> tags -- only the first one gets used. A nice, not very hacky solution, (assuming you're using inline-loader or raw-loader for CSS):

// global-styles.js
import foo from 'foo/style.css'
import bar from 'bar/style.css'
export default foo + bar
import GlobalStyles from './global-styles'
// in component
<style global jsx>{ GlobalStyles }</style>

Documentation pet peeve

 • 

When you find some specific, deeply-buried page of documentation with Google, but an alert tells you "you're not looking at the latest version of the docs!" and then you click it and it takes you to the docs homepage.

I'm looking at you, ElasticSearch, and Bootstrap 4 until like two weeks ago.

Enums in React

 •  Filed under react, javascript

I wrote a component that held an Enum, made in the popularly-recommended fashion, as state:

const MyEnum = Object.freeze({
    FOO: Symbol('foo'),
    BAR: Symbol('bar'),
})

class MyThing extends Component {
  constructor(props) {
    super(props)
    this.state = { enumValue = MyEnum.FOO }
  }
  
  render() {
    return({
      this.state.enumValue === MyEnum.FOO ?
        <p>I pity the foo</p> :
        this.state.enumValue === MyEnum.BAR ?
          <p>I pity the bar</p> :
          <p>I pity myself</p>
    })
  }
}

and suddenly my app was breaking on hot-reloads, and I had written pitiably broken code! It seemed like the state was somehow becoming invalid whenever a hot reload happened.

This is because the hot reloader preserves the state, but every time the component is reloaded, our ES6 engine generates a new unique value for each Symbol, so the comparison this.state.enumValue === MyEnum.FOO is comparing an old value of MyEnum.FOO to the current one, yeilding false. So use an enum with deterministic values, like, say,

const MyEnum = Object.freeze({
    FOO: Symbol.for('foo'),
    BAR: Symbol.for('bar'),
})

My app is not a dumping ground for your one-night project libraries

 •  Filed under nodejs

All these devs like "oh, if you're using X and Y, you should really use my X-and-Y-plus-Z integration plugin, which mitigates some bugs in X that I could have fixed, but didn't, instead opting to create more bugs with this library I wrote one night after slamming four manhattans and going home alone"

Testing NextJS getInitialProps with Enzyme

 •  Filed under nextjs, enzyme, react

If you're using NextJs, you probably want to test getInitialProps on your pages. You can call it from your un-instantiated imported class, and use the props it returns to instantiate an Enzyme wrapper. Here's a nice little pattern:

import { shallow } from 'enzyme'
import MyPage from '../components/my-page'

describe('My Page', () => {
  var wrapper
  
  beforeEach(async () => {
    const props = await MyPage.getInitialProps()
    wrapper = shallow(<MyPage {...props} />)
  })
})