David Rodriguez Souto drodsou

Synchronous mutable React state

Because asynchronous immutable React state is a tedious overkill for small applications

Class

import React from 'react';

export default class Counter extends React.Component {

Rock paper scissors in 4 lines of typescript types (no javascript)

Thanks to @harrysolovay

type Rock = { b?: never, c?: unknown }
type Paper = { a?: unknown, c?: never }
type Scissors = { a?: never, b?: unknown }

type Beats<a extends="" b=""> = {} </a>

	/**
	* like toISOString but preserving current timezone correct hour
	*/
	function timezoneISOString (aDate) {
	return new Date(aDate.getTime() - (aDate.getTimezoneOffset() * 60000)).toISOString();
	}

	import esbuild from 'esbuild';
	import fs from 'fs';
	import os from 'os';
	import crypto from 'crypto';


	/**
	* dynamic import a typescript file from javascript esm
	*/
	export default async function tsImport (tsFile) {

	/*
	Vite hardcodes .html as entry points, but you can trick it to use custom extensions, eg .md, this way:

	(thanks to marko-vite plugin source code for hints)
	*/

	import fs from "fs";

	export default function myPlugin() {
	return {

	const {watch} = require('fs');
	const {spawn} = require('child_process');
	const { cp } = require('fs/promises');
	// const { watch } = require('fs/promises');


	function run(...args) {
	const [prog, ...rest] = args;
	const child = spawn(prog, rest);
	child.stdout.on('data', data => process.stdout.write(data.toString()));

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<div id="app"></div>
	<script type="module">

	/*
	Example of async fetch of Authors, and clicking on an author, new async fetch of selected author Posts

	Try it in your machine:
	- npm create vite@latest example1 -- --template react && cd example1 && npm install
	- paste code bellow in src/App.jsx
	*/


	import React from 'react';

	// like useState but shared by several compoments
	// inspired by Jotai,

	function createUseSharedState(value) {
	let _value = value;
	const _subs = new Map()

	function useSharedState() {
	const self = React.useRef({});
	const selfForceUpdate = React.useReducer(x=>!x, false)[1]

	// In Excel make sure to have this option enabled: Home / Clipboard / Options / Collect without showing the Office clipboard
	// Tested in Windows 10 only

	let table = document.querySelector('#table').outerHTML;
	table = table
	.replaceAll('\n','<br style="mso-data-placement:same-cell;"/>') // new lines inside html cells => Alt+Enter in Excel
	.replaceAll('<td','<td style="vertical-align: top;"'); // align top
	navigator.clipboard.writeText(table).then(
	()=>console.log("success"),
	(e)=>console.log("error", e),