[Docs] Update all code blocks to toggle between TS and JS syntax

[markerikson]

The RTK docs currently use Lenz Weber's https://github.com/phryneas/remark-typescript-tools plugin to let us write TS syntax in code blocks, compile away the TS syntax to plain JS, and show both versions as a tab, as seen at https://redux-toolkit.js.org/api/createSlice:

We ought to start doing the same thing for the RTK docs.

The relevant RTK docs build config is at https://github.com/reduxjs/redux-toolkit/blob/818efb9c9e46df23c891feaab869d72f2d9ecc35/website/docusaurus.config.js#L12-L53 .

We might also want to look at https://shikijs.github.io/twoslash/ , which is built by one of the TS devs. Lenz has said he'd like to investigate switching the RTK docs over to that at some point, so worth considering now.

[timdorr]

Does the JS come out looking weird at all?

[timdorr]

Also, the toggle does cause the page layout to change and the scroll position to move. Any way to avoid that? Not a dealbreaker, just an annoyance.

[markerikson]

No, the TS compiler is set up to effectively just strip the types.

For that example, the TS source is:

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

interface CounterState {
  value: number
}

const initialState = { value: 0 } as CounterState

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state) {
      state.value++
    },
    decrement(state) {
      state.value--
    },
    incrementByAmount(state, action: PayloadAction<number>) {
      state.value += action.payload
    },
  },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

and the JS is:

import { createSlice } from '@reduxjs/toolkit'

const initialState = { value: 0 }

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state) {
      state.value++
    },
    decrement(state) {
      state.value--
    },
    incrementByAmount(state, action) {
      state.value += action.payload
    },
  },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

[markerikson]

the only page layout change I'm seeing is that the code block shrinks when you go TS->JS, because there's just fewer lines of code to show. Anything else beyond that?

[timdorr]

Yeah, it's just that. If it's avoidable, that would be cool, but I know it's difficult.

[ryota-murakami]

I think JS/TS tab switching UI intended to be one of the solution of resolve less readability by JS/TS code amount gap.
But Lenz prefer show example JS/TS simultaneously like https://shikijs.github.io/twoslash/

To start this, we have to be clear which way goal is.

[YuPototo]

Hi, can we add TS version for testing docs?

writing tests

[Shrugsy]

Also, the toggle does cause the page layout to change and the scroll position to move. Any way to avoid that? Not a dealbreaker, just an annoyance.

@timdorr @markerikson FYI if https://github.com/facebook/docusaurus/pull/5618 gets accepted, it should address the above page layout shifting