გიორგი George Dav EarlGeorge

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.

Tradeoffs in value-derived types in TypeScript

Many of the more "advanced" typescript features can be used for creating "value-derived" types.

At its simplest form:

let vehicle = { name: "Van", wheels: 4 }

	export interface IProviderComposerProps extends React.PropsWithChildren {
	/**
	* Providers list
	* */
	with: React.FC<React.PropsWithChildren>[]
	}

	const ComposerFragment: React.FC<React.PropsWithChildren> = ({
	children,
	}): JSX.Element => <>{children}</>

	import type { LoaderFunction } from "@remix-run/node";

	import type { ChatMessageEvent } from "~/events.server";
	import { chatEvents } from "~/events.server";

	export let loader: LoaderFunction = ({ request }) => {
	if (!request.signal) {
	throw new Error("No request signal provided by the platform");
	}

	/* Ultra lightweight Github REST Client */
	// original inspiration via https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb
	const token = 'github-token-here'
	const githubClient = generateAPI('https://api.github.com', {
	headers: {
	'User-Agent': 'xyz',
	'Authorization': `bearer ${token}`
	}
	})

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

	// Basic Types
	let id: number = 5
	let company: string = 'Traversy Media'
	let isPublished: boolean = true
	let x: any = 'Hello'

	let ids: number[] = [1, 2, 3, 4, 5]
	let arr: any[] = [1, true, 'Hello']

	// Tuple

	// get all tweets from @prisma
	from:prisma

	// tweets between two accounts
	from:ryanchenkie to:chris__sev

	// tweets by a hashtag but only with images
	#InaugurationDay filter:images

	// keywords by people on a specific list

	// If the user has been on the page for over 12 hours, the next link
	// click will do a full page transition to get new code
	import React from "react";
	import { BrowserRouter, useLocation } from "react-router-dom";

	let hour = 3600000;

	export default function StaleAppRouter(props) {
	let [isStale, setIsStale] = useState(false);

	import React, { useEffect, useState } from 'react';
	import logo from './logo.svg';
	import './App.css';
	import { Map, TileLayer, Marker, Popup, Tooltip } from 'react-leaflet'
	import tmi from 'tmi.js'

	// https://nominatim.openstreetmap.org/search?format=json&q=stockholm,sweden

	// Firebase App (the core Firebase SDK) is always required and must be listed first
	import * as firebase from "firebase/app"