dan gaearon

## 00-README-NEXT-SPA.md

      
              5 files
            
          
              27 forks
            
          
              18 comments
            
          
              292 stars
            
          
                gaearon
                / 00-README-NEXT-SPA.md
            
            
              Last active
              March 23, 2023 19:57
            
              
                Next.js SPA example with dynamic client-only routing and static hosting
              
          
      View 00-README-NEXT-SPA.md
  
      
    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.


## Wordle.js
import { useState, useEffect, useRef, useMemo } from 'react'

export default function Wordle() {
  let [currentAttempt, setCurrentAttempt] = useState('')
  let [bestColors, setBestColors] = useState(() => new Map())
  let [history, setHistory] = usePersistedHistory(h => {
    waitForAnimation(h)
  })

  useEffect(() => {

## index.html
<div id="screen">
  <h1>Wordle</h1>
  <div id="grid"></div>
  <div id="keyboard"></div>
</div>
<style>
  body, html {
    background: #111;
    color: white;
    font-family: sans-serif;

## index.html
<h1>Wordle</h1>
<div id="grid"></div>
<style>
  body, html {
  	background: #111;
  	color: white;
  	font-family: sans-serif;
 	text-align: center;
 	text-transform: uppercase;
  }

## minesweeper.html
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<body>
  <div id="canvas"></div>
  <button id="restart">Restart</button>
  <script src="minesweeper.js"></script>
  <style>
    * {

## snake.html
<div id="canvas"></div>
<style>
#canvas {
  width: 500px;
  height: 300px;
  border: 5px solid black;
  position: relative;
  box-sizing: content-box;
}

## CurvedArrow.js
// from/to: { left, top, width, height, shape: 'circle' | 'rect' }
function CurvedArrow({ from, to }) {
  function curvedHorizontal(x1, y1, x2, y2) {
    function pos(t) {
      let mx = x1 + (x2 - x1) / 2;
      let p1 = {x: x1, y: y1};
      let p2 = {x: mx, y: y1};
      let p3 = {x: mx, y: y2};
      let p4 = {x: x2, y: y2};
      return {

## Classes.js
class Spiderman {
  lookOut() {
    alert('My Spider-Sense is tingling.');
  }
}

let miles = new Spiderman();
miles.lookOut();

## node_hot_reload.js
const express = require('express');
const app = express();

// Application
app.get('/', function(req, res) {
  if (process.env.NODE_ENV === 'development') {
    for (var key in require.cache) {
      delete require.cache[key];
    }
  }

## uselayouteffect-ssr.md

      
              1 file
            
          
              7 forks
            
          
              65 comments
            
          
              187 stars
            
          
                gaearon
                / uselayouteffect-ssr.md
            
            
              Last active
              March 16, 2023 21:06
            
              
                useLayoutEffect and server rendering
              
          
      View uselayouteffect-ssr.md
  
      
    If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.
You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.
Option 1: Convert to useEffect
If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.
function MyComponent() {
	import { useState, useEffect, useRef, useMemo } from 'react'

	export default function Wordle() {
	let [currentAttempt, setCurrentAttempt] = useState('')
	let [bestColors, setBestColors] = useState(() => new Map())
	let [history, setHistory] = usePersistedHistory(h => {
	waitForAnimation(h)
	})

	useEffect(() => {
	<div id="screen">
	<h1>Wordle</h1>
	<div id="grid"></div>
	<div id="keyboard"></div>
	</div>
	<style>
	body, html {
	background: #111;
	color: white;
	font-family: sans-serif;
	<!DOCTYPE html>
	<head>
	<meta charset="UTF-8">
	</head>
	<body>
	<div id="canvas"></div>
	<button id="restart">Restart</button>
	<script src="minesweeper.js"></script>
	<style>
	* {
	<div id="canvas"></div>
	<style>
	#canvas {
	width: 500px;
	height: 300px;
	border: 5px solid black;
	position: relative;
	box-sizing: content-box;
	}
	// from/to: { left, top, width, height, shape: 'circle' \| 'rect' }
	function CurvedArrow({ from, to }) {
	function curvedHorizontal(x1, y1, x2, y2) {
	function pos(t) {
	let mx = x1 + (x2 - x1) / 2;
	let p1 = {x: x1, y: y1};
	let p2 = {x: mx, y: y1};
	let p3 = {x: mx, y: y2};
	let p4 = {x: x2, y: y2};
	return {
	class Spiderman {
	lookOut() {
	alert('My Spider-Sense is tingling.');
	}
	}

	let miles = new Spiderman();
	miles.lookOut();
	const express = require('express');
	const app = express();

	// Application
	app.get('/', function(req, res) {
	if (process.env.NODE_ENV === 'development') {
	for (var key in require.cache) {
	delete require.cache[key];
	}
	}