JLG's Blog

const dataContext = createContext();
const themeContext = createContext();
const Provider = ({ children }) => {
  const [data, setData] = useState("This is the data!");
  const dataContextValue = useMemo(() => {
    return [data, setData];
  }, [data, setData]);

  return (
    <themeContext.Provider value="dark">
      <dataContext.Provider value={dataContextValue}>
        {children}
      </dataContext.Provider>
    </themeContext.Provider>
  );
};

const Consumer = () => {
  const [data, setData] = useContext(dataContext);
  const theme = useContext(themeContext);
  return (
    <React.Fragment>
      <div>current theme is {theme}</div>
      <button onClick={() => setData(Date.now())}>Click to change data!</button>
      <div>{data}</div>
    </React.Fragment>
  );
};

const App = () => {
  return (
    <Provider>
      <Consumer />
    </Provider>
  );
};

function pushProvider(providerFiber, context, nextValue) {
  push(valueCursor, context._currentValue, providerFiber);
  context._currentValue = nextValue;
}
function popProvider(context, providerFiber) {
  var currentValue = valueCursor.current;
  pop(valueCursor, providerFiber);
  if ( currentValue === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED) {
    context._currentValue = context._defaultValue;
  } else {
    context._currentValue = currentValue;
  }
}

<BuyNowButton client:load onClick={handleClick}>点击购买</BuyNowButton>

const ThemeContext = createContext('light');
const Main = ({ children }) => {
    return (
        <ThemeContext.Provider value={useState('light')}>
            {children}
        </ThemeContext.Provider>
    )
}
function App() {
    const theme = useContext(ThemeContext);
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})
configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
})
function Counter() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()
  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

class Timer {
    secondsPassed = 0
    constructor() {
        makeAutoObservable(this)
    }
    increaseTimer() {
        this.secondsPassed += 1
    }
}
const myTimer = new Timer()
const TimerView = observer(({ timer }) => <span>Seconds passed: {timer.secondsPassed}</span>)
ReactDOM.render(<TimerView timer={myTimer} />, document.body)
setInterval(() => {
    myTimer.increaseTimer()
}, 1000)

import { Suspense } from 'react'
import { atom, useAtom } from 'jotai'
// 定义原子状态
const userIdAtom = atom(1)
// 派生状态
const userAtom = atom(async (get, { signal }) => {
  const userId = get(userIdAtom)
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/users/${userId}?_delay=2000`,
    { signal },
  )
  return response.json()
})
const Controls = () => {
  // 使用atom
  const [userId, setUserId] = useAtom(userIdAtom)
  return (
    <div>
      User Id: {userId}
      <button onClick={() => setUserId((c) => c - 1)}>Prev</button>
      <button onClick={() => setUserId((c) => c + 1)}>Next</button>
    </div>
  )
}

const UserName = () => {
  const [user] = useAtom(userAtom)
  return <div>User name: {user.name}</div>
}

import loadable, {lazy} from '@loadable/component'
const Comp = loadable(() => import(`./Comp`))
function App() {
    return (
        <Comp />
    )
}

// or
// use lazy with suspense
const Comp = lazy(() => import(`./Comp`))
function App() {
    return (
        <Suspense fallback='loading...'><Comp /></Suspense>
    )
}

const Moment = loadable.lib(() => import('moment'), {
  resolveComponent: moment => moment.default || moment,
})
function App() {
    return (
        <Moment>{moment => moment().format('HH:mm')}</Moment>
    )
}

// client.js
loadableReady(() => {
  const root = document.getElementById('main')
  hydrate(<App />, root)
})

// webpack.config
new LoadablePlugin({ filename: 'loadable-stats.json', writeToDisk: true })

// server.js
import { ChunkExtractor } from '@loadable/server'
const statsFile = path.resolve('./loadable-stats.json')
const nodeExtractor = new ChunkExtractor({ statsFile })
const { default: App } = nodeExtractor.requireEntrypoint()

const webExtractor = new ChunkExtractor({ statsFile })
const jsx = webExtractor.collectChunks(<App />)

const html = renderToString(jsx)

res.set('content-type', 'text/html')
res.send(`
    <!DOCTYPE html>
    <html>
    <head>
    ${webExtractor.getLinkTags()}
    ${webExtractor.getStyleTags()}
    </head>
    <body>
        <div id="main">${html}</div>
        ${webExtractor.getScriptTags()}
    </body>
    </html>
`)

componentDidMount() {
    this.mounted = true
    // component might be resolved synchronously in the constructor
    if (this.state.loading) {
        this.loadAsync()
    }
}
loadAsync() {
    const promise = this.resolveAsync();
    promise
        .then(loadedModule => {
        const result = resolve(loadedModule, this.props, Loadable)
            this.safeSetState(
                {
                result,
                loading: false,
                },
                () => this.triggerOnLoad(),
            )
        })
        .catch(error => this.setState({ error, loading: false }))
    return promise
}
render() {
    if (options.suspense) {
        // 如果suspense是true，throw promise，外层的Suspense接收
        const cachedPromise = this.getCache() || this.loadAsync()
        if (cachedPromise.status === STATUS_PENDING) {
            throw this.loadAsync()
        }
    }
    const fallback = propFallback || options.fallback || null
    if (loading) {
        return fallback
    }
    return render({
        fallback,
        result,
        options,
        props: { ...props, ref: forwardedRef },
    })
}

const { loadable, lazy } = createLoadable({
  onLoad(result, props) {
    // 这里的result就是import('moment')的返回值
    if (result && props.forwardedRef) {
      if (typeof props.forwardedRef === 'function') {
        props.forwardedRef(result)
      } else {
        props.forwardedRef.current = result
      }
    }
  },
  render({ result, props }) {
    if (props.children) {
    // <Moment>{({ default: moment }) => moment(date).fromNow()}</Moment>
      return props.children(result)
    }
    return null
  },
})

class LoadablePlugin {
    constructor({
        filename = 'loadable-stats.json',
        path,
        writeToDisk,
        outputAsset = true,
        chunkLoadingGlobal = '__LOADABLE_LOADED_CHUNKS__',
    } = {}) {
        this.opts = { filename, writeToDisk, outputAsset, path, chunkLoadingGlobal }
        // The Webpack compiler instance
        this.compiler = null
    }
    apply(compiler) {
        this.compiler = compiler
        const version = 'jsonpFunction' in compiler.options.output ? 4 : 5
        // Add a custom chunk loading callback
        compiler.options.output.chunkLoadingGlobal = this.opts.chunkLoadingGlobal
        compiler.hooks.make.tap(name, compilation => {
          compilation.hooks.processAssets.tap(
            {
              name,
              stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT,
            },
            () => {
              const asset = this.handleEmit(compilation)
              if (asset) {
                // 输出stats file，里面包含了chunkGroup，SSR和loadaleReady都需要用到
                compilation.emitAsset(this.opts.filename, asset)
              }
            },
          )
        })
    }
  handleEmit = compilation => {
    const stats = compilation.getStats().toJson()；
    const result = JSON.stringify(stats, null, 2)
    if (this.opts.writeToDisk) {
      this.writeAssetsFile(result)
    }
  }
}

const ChunkExtractorManager = ({ extractor, children }) => (
  <Context.Provider value={extractor}>{children}</Context.Provider>
)
const withChunkExtractor = Component => {
  const LoadableWithChunkExtractor = props => (
    <Context.Consumer>
      {extractor => <Component __chunkExtractor={extractor} {...props} />}
    </Context.Consumer>
  )
  return LoadableWithChunkExtractor
}
const EnhancedInnerLoadable = withChunkExtractor(InnerLoadable)
const Loadable = React.forwardRef((props, ref) => (
  <EnhancedInnerLoadable forwardedRef={ref} {...props} />
))
class InnerLoadable extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
    // Server-side
    if (props.__chunkExtractor) {
      props.__chunkExtractor.addChunk(ctor.chunkName(props))
      return
    }
  }
}

var A = Object(_loadable_component__WEBPACK_IMPORTED_MODULE_1__["default"])({
  resolved: {},
  chunkName: function chunkName() {
    return "letters-A".replace(/[^a-zA-Z0-9_!§$()=\-^°]+/g, "-");
  },
  isReady: function isReady(props) {
    var key = this.resolve(props);
    if (this.resolved[key] !== true) {
      return false;
    }
    if (true) {
      return !!__webpack_require__.m[key];
    }
    return false;
  },
  importAsync: function importAsync() {
    return Promise.all(/*! import() | letters-A */[__webpack_require__.e("vendors~letters-A~letters-B"), __webpack_require__.e("letters-A")]).then(__webpack_require__.bind(null, /*! ./letters/A */ "./src/client/letters/A.js"));
  },
  requireAsync: function requireAsync(props) {
    var _this = this;
    var key = this.resolve(props);
    this.resolved[key] = false;
    return this.importAsync(props).then(function (resolved) {
      _this.resolved[key] = true;
      return resolved;
    });
  },
  requireSync: function requireSync(props) {
    var id = this.resolve(props);
    if (true) {
      return __webpack_require__(id);
    }
    return eval('module.require')(id);
  },
  resolve: function resolve() {
    if (true) {
      return /*require.resolve*/(/*! ./letters/A */ "./src/client/letters/A.js");
    }
    return eval('require.resolve')("./letters/A");
  }
});

function loadableReady(
  done = () => {},
  { namespace = '', chunkLoadingGlobal = '__LOADABLE_LOADED_CHUNKS__' } = {},
) {
  let requiredChunks = null
  if (!requiredChunks) {
    done()
    return Promise.resolve()
  }

  let resolved = false
  return new Promise(resolve => {
    window[chunkLoadingGlobal] = window[chunkLoadingGlobal] || []
    const loadedChunks = window[chunkLoadingGlobal]
    const originalPush = loadedChunks.push.bind(loadedChunks)

    function checkReadyState() {
      if (
        requiredChunks.every(chunk =>
          loadedChunks.some(([chunks]) => chunks.indexOf(chunk) > -1),
        )
      ) {
        if (!resolved) {
          resolved = true
          resolve()
        }
      }
    }

    loadedChunks.push = (...args) => {
      originalPush(...args)
      checkReadyState()
    }

    checkReadyState()
  }).then(done)
}