gaearon

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

threepointone

const bypass = [
  // function names to avoid logging
];
const collapsed = [
  // function names to groupCollapsed
];

module.exports = function(babel) {
  const { types: t } = babel;
  const wrapFunctionBody = babel.template(`{

chenglou

// This is a proper alternative to
// https://github.com/BuckleScript/bucklescript/blob/b9508105b1a35537bdea9a1fabd10f6c65f776b4/jscomp/bsb/templates/react-hooks/src/FetchedDogPictures/FetchedDogPictures.re#L14
// The one in that file uses Promise, but that's *wrong*.
// We only used promise as a demo of its API. We'll remove it soon.

// As you can see below, the pure XMLHttpRequest code is just as clean,
// less mysterious for all, more performant, extensible, and actually correct.

// Ignore these externals for now. They're just for illustration
// purposes. I just copy pasted the Js code from

calebporzio

details summary {
  cursor: pointer;
  outline: none !important;
  display: inline-block;
  padding: 8px 12px;
  padding-top: 10px;
  border-radius: 4px;
  overflow: hidden;
  background: #F09825;
  color: white;

threepointone

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

darekzak

import rootReducer from '../my-rootreducer-dir';

function renderWithRedux(ui, { initialState, store = createStore(rootReducer, initialState) } = {}, renderFn = render) {
  const obj = {
    ...renderFn(<Provider store={store}>{ui}</Provider>),
    store,
  };
  obj.rerenderWithRedux = (el, nextState) => {

bvaughn

// This is an example of how to fetch external data in response to updated props,
// If you are using an async mechanism that does not support cancellation (e.g. a Promise).

class ExampleComponent extends React.Component {
  _currentId = null;

  state = {
    externalData: null
  };

cereallarceny

// Ignore those pesky styles
require('ignore-styles');

// Set up babel to do its thing... env for the latest toys, react-app for CRA
require('babel-register')({
  ignore: /\/(build|node_modules)\//,
  presets: ['env', 'react-app']
});

// Now that the nonsense is over... load up the server entry point

alfonsomunozpomer

// https://github.com/alfonsomunozpomer/react-fetch-mock

import React from 'react'
import fetchMock from 'fetch-mock'
import Enzyme from 'enzyme'
import {shallow, mount, render} from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

Enzyme.configure({ adapter: new Adapter() })

raduserbanescu

Remove "MINGW" text from Git Bash prompt and window title

Quickly remove the text without having to create a custom prompt.

Edit the file: C:\Program Files\Git\etc\profile.d\git-prompt.sh

 else
        TITLEPREFIX=$MSYSTEM
 fi