Update all remaining code blocks to have TS/JS toggles

[markerikson]

We have a number of code blocks that are still JS-only. It would be useful to convert all of them to be toggleable TS/JS blocks instead. As an example, the initial example in createAsyncThunk:

https://redux-toolkit.js.org/api/createAsyncThunk#overview

[PrinceRajRoy]

Hi Mark, is this supposed to be done using the same remark tool?

[phryneas]

In the long run we might switch to shiki-twoslash once they add a feature like that, but for now yes.

Generally: rename file to .mdx, fix up the TypeScript to successfully compile.

[PrinceRajRoy]

@phryneas great! just a quick query, the website dir contains package-lock.json but the README directs to use yarn instead, is that intended?

[phryneas]

I assume that is the default docusaurus README, just ignore it for now. We will switch over to a yarn monorepo soon anyways.

[phryneas]

Also, you might run into memory problems on the main branch. Update remark-typescript-tools to 1.0.7 to fix that.

[PrinceRajRoy]

@phryneas I'm trying to use the remark-typescript-tools on jsx snippets, but it doesn't seem to work. I have updated it to v1.0.7 before using, so I'm a bit confused here. Sorry if I'm missing something here 😅

Snippet

// file: App.tsx noEmit
import React from 'react'
export default function App() {
  return <div>...</div>
}

// file: app/store.ts noEmit
import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {},
})

// file: index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
// highlight-start
import store from './app/store'
import { Provider } from 'react-redux'
// highlight-end

ReactDOM.render(
  // highlight-next-line
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Works fine with "jsx": "react"

Doesn't work with "jsx": "preserve"

[phryneas]

Uhh, good question. I think we never had this use case before 😅 I might need to investigate that. But probably not before friday.

[phryneas]

@PrinceRajRoy I just pushed remark-typescript-tools 1.0.8 which should be able to handle jsx: 'preserve'

[PrinceRajRoy]

@phryneas just updated, works perfectly fine now 😄

[akashshyamdev]

@phryneas @markerikson the createAsyncThunk overview doesn't have the toggle. Can I handle that?