feat: Add MDX support for Expo

Author: codinsonn

apps/expo/app/(public)/markdown/index.tsx

@@ -0,0 +1,3 @@
+import MarkdownScreen from '@app/core/screens/MarkdownScreen'
+
+export default MarkdownScreen

apps/expo/metro.config.js

@@ -21,5 +21,9 @@ config.resolver.nodeModulesPaths = [
 // 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
 // config.resolver.disableHierarchicalLookup = true;
 
+// 4. Add .md & .mdx files to the file extensions Metro will handle
+config.resolver.sourceExts.push('md', 'mdx');
+config.transformer.babelTransformerPath = require.resolve('./transformer.js');
+
 // Export the modified config
 module.exports = config;

apps/expo/package.json

@@ -4,9 +4,11 @@
   "private": true,
   "main": "index.js",
   "dependencies": {
+    "@bacons/mdx": "^0.2.0",
     "@expo/metro-runtime": "^3.1.1",
     "expo": "^50.0.1",
     "expo-constants": "~15.4.5",
+    "expo-image": "~1.10.6",
     "expo-linking": "~6.2.2",
     "expo-router": "~3.4.4",
     "expo-status-bar": "~1.11.1",
@@ -15,8 +17,7 @@
     "react-native": "0.73.2",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
-    "react-native-web": "~0.19.6",
-    "expo-image": "~1.10.6"
+    "react-native-web": "~0.19.6"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",

apps/expo/transformer.js

@@ -0,0 +1,10 @@
+const upstreamTransformer = require('@expo/metro-config/babel-transformer');
+const MdxTransformer = require("@bacons/mdx/metro-transformer");
+
+module.exports.transform = async (props) => {
+    // Then pass it to the upstream transformer.
+    return upstreamTransformer.transform(
+        // Transpile MDX first.
+        await MdxTransformer.transform(props)
+    );
+};

features/app-core/mdx/readme.mdx

@@ -0,0 +1,20 @@
+import { Image } from '../components/Image'
+
+<Image
+    src={require('../assets/aetherspaceLogo.png')}
+    style={{ marginBottom: 20 }}
+    width={60}
+    height={60}
+/>
+
+# Universal Expo + Next.js App Router Starter, with MDX
+
+A minimal starter for a **universal Expo + Next.js app** with their respective app routers.
+
+It's a good starting point if you want to:
+
+- ✅ make use of _app-dir file based routing_ in expo and next.js
+- ✅ have a _minimal monorepo setup_ with Typescript but no monorepo tool yet
+- ✅ leave *all other tech choices* for e.g. styling, dbs, component libs, etc. *up to you*
+
+> Need a more robust, Fully-Stacked, Full-Product, Universal App Setup? Check out **[Aetherspace](https://github.com/Aetherspace/green-stack-starter-demo#readme)**

features/app-core/screens/HomeScreen.tsx

@@ -13,6 +13,7 @@ const HomeScreen = () => {
       <Text style={styles.subtitle}>Open HomeScreen.tsx in features/app-core/screens to start working on your app</Text>
       <Link href="/subpages/aetherspace" style={styles.link}>Test navigation</Link>
       <Link href="/images" style={styles.link}>Test images</Link>
+      <Link href="/markdown" style={styles.link}>Test markdown</Link>
     </View>
   )
 }

features/app-core/screens/MarkdownScreen.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { MDXStyles } from '@bacons/mdx'
+import { Link } from '../navigation/Link' // @ts-ignore
+import ReadMe from '../mdx/readme.mdx'
+
+/* --- <MarkdownScreen/> --------------------------------------------------------------------------- */
+
+const MarkdownScreen = () => {
+  return (
+    <View style={styles.container}>
+        <Link
+            href="/"
+            style={{ ...styles.backButton, ...styles.link, textDecorationLine: 'none' }}
+        >
+            {`< Back`}
+        </Link>
+        <MDXStyles
+            h1={styles.h1}
+            h2={styles.h2}
+            p={styles.p}
+            li={styles.li}
+            blockquote={styles.blockquote}
+            a={styles.link}
+        >
+            <ReadMe />
+        </MDXStyles>
+    </View>
+  )
+}
+
+/* --- Styles ---------------------------------------------------------------------------------- */
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'flex-start',
+        padding: 24,
+    },
+    backButton: {
+        position: 'absolute',
+        top: 16,
+        left: 16,
+    },
+    subtitle: {
+        marginTop: 8,
+        marginBottom: 16,
+        fontSize: 16,
+        textAlign: 'center',
+    },
+    h1: {
+        fontSize: 24,
+        fontWeight: 'bold',
+        marginBottom: 16,
+    },
+    h2: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        marginBottom: 16,
+    },
+    p: {
+        fontSize: 16,
+        marginBottom: 16,
+        lineHeight: 22,
+    },
+    li: {
+        fontSize: 16,
+        marginBottom: 16,
+        lineHeight: 22,
+    },
+    blockquote: {
+        borderLeftColor: 'lightgray',
+        borderStyle: 'solid',
+        borderLeftWidth: 6,
+        fontSize: 16,
+        paddingLeft: 16,
+        paddingTop: 4,
+        lineHeight: 22,
+    },
+    link: {
+        marginTop: 16,
+        fontSize: 16,
+        color: 'blue',
+        textAlign: 'center',
+        textDecorationLine: 'underline',
+    },
+})
+
+/* --- Exports --------------------------------------------------------------------------------- */
+
+export default MarkdownScreen