joeldenning

This Gist works for CRA 3. For CRA 4, you can try community maintained craco plugin for converting to a single-spa application at https://github.com/hasanayan/craco-plugin-single-spa-application (thanks @hasanayan):

1. Install react-app-rewired, as explained in https://github.com/timarney/react-app-rewired.
2. Create a file in src called single-spa-entry.js (or tsx for typescript)
3. Modify config-overrides.js, as shown in the config-overrides.js file provided in this gist.
4. (Optional) remove src/main.js, since single-spa-entry is the new entry
5. (Optional) remove public/index.html, since single-spa applications share a single html file, instead of one html file per project.

joeldenning

Steps to create offline emulator with Odroid

This gist assumes you have an odroid n-2, micro sd card, usb keyboard/mouse, power cable, wired internet, HDMI cable, computer monitor, and a Windows computer (with some way to connect the micro sd card).

Part 1 - On another computer (I use Windows)

(See https://ameridroid.com/blogs/ameriblogs/flashing-emmc-or-microsd-card for instructions)

1. Download and install balenaEtcher - https://www.balena.io/etcher/
2. Download Ubuntu operating system image for odroid. The MATE desktop lets you use a mouse. The file you download should have a .img.xz extension. https://wiki.odroid.com/odroid-n2/os_images/os_images

joeldenning

import React, { ChangeEvent, FormEvent } from "react"
import { Trigger, useActions } from './Actions'

function Form(props: FormProps) {
  const [state, act, modify, respond] = useActions<FormState>(props)

  respond(Trigger.Mount, fetchCountries)
  respond(Trigger.Change, updateProvinceList, state.birthCountry?.countryCode)

  return (

joeldenning

1. Install dependencies

sudo apt install -y libsdl2-dev libsdl2-2.0-0 libpng-dev zlib1g-dev nasm

joeldenning

import {Parcel} from 'single-spa-react/parcel'
import parcelConfig from './other-file.js'
import {mountRootParcel} from 'single-spa'

function MyReactComponent(props) {
  // The parcelConfig could be implemented in Angular, Vue, or anything else,
  // but it works inside of a React component!
  return (
    <div>
      Lets render a parcel with jsx!

joeldenning

function useImperativeAction(action) {
  const [status, setStatus] = useState(1);

  useEffect(() => {
    // negative means just cancel without re-running
    if (status >= 0) {
      return action();
    }
  }, [status]);

joeldenning

import { useEffect, useState } from 'react';

function ShowUsers() {
  const [searchValue, setSearchValue] = useState("")
  const [fetchUser, user] = useActionState(fetchUserAction)

  return (
    <>
      <input type="text" value={searchValue} onChange={evt => setSearchValue(evt.target.value)}></input>
      <button onClick={() => fetchUser(searchValue)}></button>

joeldenning

Netplay lag
Not sleeping
Netplay lag
Not sleeping
Netplay lag
Not sleeping
Netplay lag
Not sleeping
Netplay lag
Not sleeping

joeldenning

Process:               mupen64plus-gui [57443]
Path:                  /Applications/mupen64plus-gui.app/Contents/MacOS/mupen64plus-gui
Identifier:            com.yourcompany.mupen64plus-gui
Version:               0
Code Type:             X86-64 (Native)
Parent Process:        ??? [1]
Responsible:           mupen64plus-gui [57443]
User ID:               501

Date/Time:             2020-12-16 22:29:38.688 -0700

joeldenning

Process:               mupen64plus-gui [28991]
Path:                  /Applications/mupen64plus-gui.app/Contents/MacOS/mupen64plus-gui
Identifier:            com.yourcompany.mupen64plus-gui
Version:               0
Code Type:             X86-64 (Native)
Parent Process:        ??? [1]
Responsible:           mupen64plus-gui [28991]
User ID:               501

Date/Time:             2020-12-08 17:57:18.513 -0700