Automatically create JS versions of our TS code

Author: cprecioso

web/docs/advanced/apis.md

@@ -136,48 +136,23 @@ For example, if your app is running at `https://example.com` then from the above
 
 To use the API from your client, including with auth support, you can import the Axios wrapper from `wasp/client/api` and invoke a call. For example:
 
-<Tabs groupId="js-ts">
-<TabItem value="js" label="JavaScript">
-
-```jsx title="src/pages/SomePage.jsx"
-import React, { useEffect } from "react";
-import { api } from "wasp/client/api";
+```tsx title="src/pages/SomePage.tsx" auto-js with-hole
+import React, { useEffect } from 'react'
+import { api } from 'wasp/client/api'
 
 async function fetchCustomRoute() {
-  const res = await api.get("/foo/bar");
-  console.log(res.data);
+  const res = await api.get('/foo/bar')
+  console.log(res.data)
 }
 
 export const Foo = () => {
   useEffect(() => {
-    fetchCustomRoute();
-  }, []);
-
-  return <>// ...</>;
-};
-```
-</TabItem>
-<TabItem value="ts" label="TypeScript">
-
-```tsx title="src/pages/SomePage.tsx"
-import React, { useEffect } from "react";
-import { api } from "wasp/client/api";
+    fetchCustomRoute()
+  }, [])
 
-async function fetchCustomRoute() {
-  const res = await api.get("/foo/bar");
-  console.log(res.data);
+  return <>{hole}</>
 }
-
-export const Foo = () => {
-  useEffect(() => {
-    fetchCustomRoute();
-  }, []);
-
-  return <>// ...</>;
-};
 ```
-</TabItem>
-</Tabs>
 
 #### Making Sure CORS Works
 

web/docs/auth/social-auth/google.md

@@ -394,56 +394,6 @@ For an up to date info about the data received from Google, please refer to the
 
 <OverrideExampleIntro />
 
-<Tabs groupId="js-ts">
-<TabItem value="js" label="JavaScript">
-
-```wasp title="main.wasp"
-app myApp {
-  wasp: {
-    version: "{latestWaspVersion}"
-  },
-  title: "My App",
-  auth: {
-    userEntity: User,
-    methods: {
-      google: {
-        // highlight-next-line
-        configFn: import { getConfig } from "@src/auth/google.js",
-        // highlight-next-line
-        userSignupFields: import { userSignupFields } from "@src/auth/google.js"
-      }
-    },
-    onAuthFailedRedirectTo: "/login"
-  },
-}
-```
-
-```prisma title="schema.prisma"
-model User {
-  id          Int    @id @default(autoincrement())
-  username    String @unique
-  displayName String
-}
-
-// ...
-```
-
-```js title=src/auth/google.js
-export const userSignupFields = {
-  username: () => 'hardcoded-username',
-  displayName: (data) => data.profile.name,
-}
-
-export function getConfig() {
-  return {
-    scopes: ['profile', 'email'],
-  }
-}
-```
-
-</TabItem>
-<TabItem value="ts" label="TypeScript">
-
 ```wasp title="main.wasp"
 app myApp {
   wasp: {
@@ -475,7 +425,7 @@ model User {
 // ...
 ```
 
-```ts title=src/auth/google.ts
+```ts title=src/auth/google.ts auto-js
 import { defineUserSignupFields } from 'wasp/server/auth'
 
 export const userSignupFields = defineUserSignupFields({
@@ -492,9 +442,6 @@ export function getConfig() {
 
 <GetUserFieldsType />
 
-</TabItem>
-</Tabs>
-
 ## Using Auth
 
 <UsingAuthNote />

web/docusaurus.config.js

@@ -3,6 +3,8 @@ const lightCodeTheme = require('prism-react-renderer/themes/github')
 const autoImportTabs = require('./src/remark/auto-import-tabs')
 const fileExtSwitcher = require('./src/remark/file-ext-switcher')
 const searchAndReplace = require('./src/remark/search-and-replace')
+const autoJSCode = require('./src/remark/auto-js-code')
+const codeWithHole = require('./src/remark/code-with-hole')
 
 const includeCurrentVersion =
   process.env.DOCS_INCLUDE_CURRENT_VERSION === 'true'
@@ -155,7 +157,13 @@ module.exports = {
           sidebarPath: require.resolve('./sidebars.js'),
           sidebarCollapsible: true,
           editUrl: 'https://github.com/wasp-lang/wasp/edit/release/web',
-          remarkPlugins: [autoImportTabs, fileExtSwitcher, searchAndReplace],
+          remarkPlugins: [
+            autoJSCode,
+            autoImportTabs,
+            fileExtSwitcher,
+            searchAndReplace,
+            codeWithHole,
+          ],
 
           // ------ Configuration for multiple docs versions ------ //