fix react errors

[broccolini]

This fixes some of the local react errors we were getting. I also upgraded x0 and Kit to latest version.

x0 v5 renders inside the body, so the head and body tags need to be pulled our of the rendered app, this was fixed by:

• moving page cruft to app component (
• move meta to package.json (a better option would be to set up a custom html template, but this quick fix works for now)

[broccolini]

These build fails look like nothing to do with this pr 🤔

[shawnbot]

Yeah, I ran into these build errors in #65 after upgrading to v5. My guess is that one of the Kit components (LiveEditor? we're not even using it, though) uses brace, but webpack isn't liking it in a non-browser environment, as reported in thlorenz/brace#30. Tree-shaking should prevent this from being imported if it's not being used, but there may be somewhere that it's used in Kit that prevents it from being "shaken". I'll file an issue there and see if the maintainers have any ideas.

[shawnbot]

Failing build aside, this looks great! 👍

[shawnbot]

Build failure issue: c8r/kit#189

[broccolini]

Heads up I'm going to update x0 to pull in that fix for the build failure and then merge this in.

[emplums]

Should this component still wrap Library components in places like index.js? Curious about how this is used

[emplums]

Also curious what the examples/.index.js.swp file is there for?

[shawnbot]

@emplums 👉👃 (I have .*.sw? in my global gitignore!)

[broccolini]

Lol sorry, setting up vim for you know who 😑

[broccolini]

@shawnbot I updated the latest version of Kit to pull in the fix for the build fails, and they've passed 🙌

[emplums]

This looks good to me! I just left one question about how _app.js should be used - do we need to import that anywhere that we'd like a Page to be? Or is the _app.js namespace something that works automagically with Kit?

[shawnbot]

@emplums It looks like _app.js is an x0 thing similar to Next.js's _app.js.

[broccolini]

This looks good to me! I just left one question about how _app.js should be used - do we need to import that anywhere that we'd like a Page to be? Or is the _app.js namespace something that works automagically with Kit?

Good question! -app.js is a global component which basically wraps the whole app, so it's global for all pages. So when we want all the pages to use the same stylesheet we'd put those link refs in there (as I do in this pr), or if we say wanted a global header or footer components, we'd add that to the _app.js component. Here's an example:

import React from 'react'
import { NavLink } from 'react-router-dom'

export default class extends React.Component {
  render () {
    const { render, routes } = this.props

    return (
      <div>
        <nav>
          {routes.map(route => (
            <NavLink
              key={route.name}
              to={route.path}>
              {route.name}
            </NavLink>
          ))}
        </nav>
        {render()}
      </div>
    )
  }
}

The custom app component is part of x0, not Kit. Here are the docs https://github.com/c8r/x0#custom-app