brookslybrand

// Progressively enhanced form with HTTP verbs
const FormWithMethod = forwardRef<HTMLFormElement, FormProps>(
  ({ method, children, ...props }, ref) => {
    const cleanMethod =
      typeof method === "string" ? method.toUpperCase() : "POST";
    return (
      <Form
        ref={ref}
        // @ts-expect-error we'll get there
        method={cleanMethod}

brookslybrand

This was heavily inspired (and in fact uses) Remix Migration Scripts

This script calls the above mentioned script, but also allows you to pass in an argument for the specific directory you want to migrate

./migrate-to-v2-routing.bash ./docs

Note: This script by no means is "complete". I haven't tested it against every possible case. It is meant to be mostly demonstrative in how you can setup a simple script to help you with your v1 to v2 route migration journey.

brookslybrand

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,

brookslybrand

const timer = Machine(
  {
    id: "timer",
    initial: "idle",
    context: {
      timer: 0
    },
    states: {
      idle: {
        on: {

brookslybrand

const timeLimit = 10;

const timerMachine = Machine(
  {
    id: "timer",
    initial: "reset",
    context: {
      t: 0
    },

brookslybrand

// styled component version
const Container = styled.div`
  /*all of the styles*/
`
function MyComponent() {
  return <Container>{/*other stuff*/}</Container>
}


// css prop version

brookslybrand

const INITIAL_CONDITIONS_FAILED = 'INITIAL_CONDITIONS_FAILED'
const INITIAL_CONDITIONS_MET = 'INITIAL_CONDITIONS_MET'
const CHECK_IF_SCHEDULE_IS_VALID = 'CHECK_IF_SCHEDULE_IS_VALID'
const UPDATE_SCHEDULE_ID = 'UPDATE_SCHEDULE_ID'

// visualization of the state machine: https://xstate.js.org/viz/?gist=c33367d493886a6f93e149c530ce8cb1
const startOptimizationMachine = Machine(
  {
    id: 'startOptimizationMachine',
    initial: 'disabled',

brookslybrand

const autoSaveMachine = Machine(
  {
    id: 'autoSaveMachine',
    initial: 'saved',
    states: {
      saved: {
        on: {
          HAS_UNSAVED_DATA: 'waitingToSave'

brookslybrand

const initialContext = {
  displayName: '',
  email: ''
}
const userMachine = Machine(
  {
    id: 'user',
    initial: 'unchecked',
    context: initialContext,

brookslybrand

// this machine expects an authenticate service to be passed in
// and handles where a user is in the authentication process.
// `logedIn` is marked as final state because once logged in
// the auth-context will be updated by firebase and so the user
// will automatically be navigated away from this component
const authenticationMachine = Machine(
  {
    id: 'authentication',
    initial: 'loggedOut',
    context: {