Skip to content

Commit

Permalink
Docusaurus v3 upgrade (#128)
Browse files Browse the repository at this point in the history
* Update for docusaurus v3 versions

* Fix non-terminating image, I think this is the intended one

* Fixing prism post-upgrade

- Requires more languages to be listed, not automatically included now
  - Markup-templating required by ejs, must specify explicitly or build
    breaks
- Update some language references in code blocks that aren't actually
  supported by prism

* Fix observer crash when navigating from homepage

* Update last plugin and clsx

* Actual fix for useIntersection

* Force a single resolution of react types

Multiple type versions lead to type errors like this one
software-mansion/react-native-svg#1741

* Leave comment that gtag is not meant to work in dev

* Convert config to real typescript

* Re-swizzle DocItem/Footer as TS and add more fixes

* Type fixes and disallow unchecked indexed access

* Fix snippet typing issue with home page top bar

* Add a note about swizzling

* Don't emit on typecheck
  • Loading branch information
lindboe committed Feb 21, 2024
1 parent dda4a69 commit 7a5f2ed
Show file tree
Hide file tree
Showing 21 changed files with 4,197 additions and 2,739 deletions.
6 changes: 6 additions & 0 deletions CONTRIBUTING.md
Expand Up @@ -76,3 +76,9 @@ export default ExampleCodeBlock = () => (
</View>
```
````

## Swizzled components and upgrades

To allow customization of pre-built theme components, Docusaurus has a feature called [swizzling](https://docusaurus.io/docs/swizzling), which either allows creating a wrapper around the existing component, or creating a copy of it that can be modified.

It's totally fine to swizzle components, even "unsafe" ones, but take care to minimize changes so that it's easy to upgrade components to their latest versions later on.
8 changes: 4 additions & 4 deletions docs/archive/PristineExpoProject.md
Expand Up @@ -28,14 +28,14 @@ Keep in mind you may have to adopt the following steps for a different package m

### Project Initialization

```terminal
```bash
npx ignite-cli new PizzaApp --yes
cd PizzaApp
```

### Filesystem Changes

```terminal
```bash
rm -rf android
rm -rf ios
rm index.js # Expo's entry point is App.js
Expand All @@ -44,13 +44,13 @@ rm metro.config.js # Expo will use the default

### Package Changes

```terminal
```bash
yarn remove react-native-bootsplash
```

Removes a native library pertaining to the splash screen (this will be handled via `expo-splash-screen`)

```terminal
```bash
yarn remove expo-modules-core
```

Expand Down
2 changes: 1 addition & 1 deletion docs/recipes/EASUpdate.md
Expand Up @@ -18,7 +18,7 @@ This guide will teach you how to set up over-the-air (OTA) updates with Expo and

You'll also need `eas-cli` globally installed and and an [Expo account](https://expo.dev/signup) if you don't already have one.

```console
```bash
npm install -g eas-cli
```

Expand Down
14 changes: 7 additions & 7 deletions docs/recipes/ExpoRouter.md
Expand Up @@ -24,14 +24,14 @@ Ignite v9 is fully equipped to utilize `expo-router` after dependency installati

Bootstrap a new Ignite project:

```terminal
```bash
npx ignite-cli@next new pizza-router --yes
cd pizza-router
```

Add the missing dependencies `expo-router` needs:

```terminal
```bash
npx expo install expo-router expo-constants
```

Expand Down Expand Up @@ -73,7 +73,7 @@ Change the entry point that `expo-router` expects in `package.json`:

Expo Router requires route files to live in either `app` or `src/app` directories. But since our Ignite project is already using `app`, we'll need to rename it to `src`. We'll create `src/app` to contain all the file-base routing files from here on out, and models, components and other shared files will be located in the `src` directory now. We'll also remove `App.tsx` as this is no longer the entry point of the application.

```terminal
```bash
rm App.tsx
mv app src
mkdir src/app
Expand Down Expand Up @@ -254,7 +254,7 @@ export default function Root() {

Move `ErrorBoundary` out of `screens/ErrorScreen` and into `src/components/ErrorBoundary`:

```terminal
```bash
mkdir src/components/ErrorBoundary
mv src/screens/ErrorScreen/* src/components/ErrorBoundary
```
Expand Down Expand Up @@ -1311,7 +1311,7 @@ The Showroom screen has some supporting components it needs that only applies to

To adhere to this, we'll move the supporting components to `src/components/Showroom` and import them from their in our `src/app/(app)/(tabs)/showroom.tsx`.

```terminal
```bash
mv src/screens/DemoShowroomScreen src/components/Showroom
rm src/components/Showroom/DemoShowroomScreen.tsx
```
Expand Down Expand Up @@ -1653,7 +1653,7 @@ If you head on over to the web app at `http://localhost:8081/showroom?itemSlug=v

We can emulate [deep links in Expo Go](https://docs.expo.dev/guides/linking/#testing-urls) with the command:

```terminal
```bash
npx uri-scheme open exp://localhost:8081/--/showroom --ios
```

Expand All @@ -1665,7 +1665,7 @@ We get that universal linking for free with `expo-router`!

Now that we have the boilerplate up and running again, let's clean some of the screen and navigation files that are no longer needed.

```terminal
```bash
rm src/app.tsx
rm -rf src/screens
rm -rf src/navigators
Expand Down
4 changes: 2 additions & 2 deletions docs/recipes/MigratingToMMKV.md
Expand Up @@ -19,7 +19,7 @@ In this recipe, we'll convert our the Ignite demo project from using `AsyncStora

We'll get started by igniting a new application with the `cng` workflow. We must do this since `react-native-mmkv` contains native dependencies not included in the Expo SDK. Luckily with Ignite CLI, it's easy to jump into this workflow:

```nodejs
```bash
npx ignite-cli new PizzaApp --workflow=cng --yes
cd PizzaApp
```
Expand All @@ -28,7 +28,7 @@ cd PizzaApp

Install the `react-native-mmkv` dependency into the project and run prebuild again to let Expo take care of the necessary adjustments to the native template.

```nodejs
```bash
yarn add react-native-mmkv
yarn prebuild
```
Expand Down
2 changes: 1 addition & 1 deletion docs/recipes/PatchingBuildingAndroid.md
Expand Up @@ -90,6 +90,6 @@ In your `.gitignore`, remove the line which ignores the `/android/` directory. W
_10 - Update Project's React-Native_

Now that you have build and pushed your changes, you can reference that in your application's `package.json`.
![package json](<../../static//img/PatchingBuildingAndroid
![package json](<../../static//img/PatchingBuildingAndroid(4).jpg>)

> Note: You'll most likely need to delete/re-install your node_modules as well as run `./android/gradlew clean`.
20 changes: 10 additions & 10 deletions docs/recipes/PrepForEASBuild.md
Expand Up @@ -18,13 +18,13 @@ This guide will teach you how to set up an [Expo development build](https://docs

Start with a fresh Ignite app, but choose the `prebuild` workflow:

```console
```bash
npx ignite-cli@latest new PizzaApp --workflow=prebuild --yes
```

You'll also need `eas-cli` globally installed and and an [Expo account](https://expo.dev/signup) if you don't already have one.

```console
```bash
npm install -g eas-cli
```

Expand All @@ -33,7 +33,7 @@ _Optional_: You can use EAS builds for free, however there is a queue time to wa
<details>
<summary><strong>iOS</strong></summary>

```console
```bash
brew install cocoapods fastlane
```

Expand All @@ -52,19 +52,19 @@ SDK and NDK

From within your project directory, run the following:

```console
```bash
yarn add expo-dev-client
```

Create or link an EAS project.

```console
```bash
eas init
```

You'll be asked to select your EAS account if you're linked to multiple and if you'd like to create a new project. Afterwards, you'll see a warning like this:

```console
```bash
Warning: Your project uses dynamic app configuration, and the EAS project ID can't automatically be added to it.
https://docs.expo.dev/workflow/configuration/#dynamic-configuration-with-appconfigjs
Expand All @@ -85,7 +85,7 @@ Simply open `app.json` and add the `extra` key somewhere under the `expo` key in
Configure the project to support EAS Build.
```console
```bash
eas build:configure
```
Expand Down Expand Up @@ -121,21 +121,21 @@ Ignite 9 comes with some build profiles already set up for you. You can view the

**Using EAS build servers**

```console
```bash
eas build --profile preview
```

Once complete, you can download the Android `apk` or iOS `tar` file.

**Build Locally**

```console
```bash
eas build --profile preview --local
```

Your app will be saved in the root directory unless you specify the desired directory with the environment variable `EAS_LOCAL_BUILD_ARTIFACTS_DIR`, for example:

```console
```bash
EAS_LOCAL_BUILD_ARTIFACTS_DIR=build eas build --profile preview --local
```

Expand Down
8 changes: 4 additions & 4 deletions docs/recipes/ReactNativeVisionCamera.md
Expand Up @@ -22,14 +22,14 @@ In this example, we'll take a look at wiring up a barcode scanner. This tutorial

If you haven't already, spin up a new Ignite application:

```terminal
```bash
npx ignite-cli@latest new PizzaApp --remove-demo --workflow=prebuild --yes
cd PizzaApp
```

Next, let's install the necessary dependencies. You can see complete installation instructions for `react-native-vision-camera` [here](https://react-native-vision-camera.com/docs/guides).

```terminal
```bash
npx expo install react-native-vision-camera
```

Expand Down Expand Up @@ -63,7 +63,7 @@ Add the plugin to `app.json` as per the documentation. It'll look like the follo
To get this native dependency working in our project, we'll need to run prebuild so Expo can execute the proper native code changes for us. Then we can boot up the app on a device.

```terminal
```bash
npx expo prebuild
yarn android
```
Expand Down Expand Up @@ -142,7 +142,7 @@ const $container: ViewStyle = {

Before we get to displaying the camera for scanning, let's quickly set up a new store in MST for keeping our list of codes and a screen to view them. Generate the commands using the Ignite CLI:

```terminal
```bash
npx ignite-cli@next g model CodeStore
npx ignite-cli@next g screen Codes
```
Expand Down
2 changes: 1 addition & 1 deletion docs/recipes/Redux.md
Expand Up @@ -14,7 +14,7 @@ publish_date: 2024-01-16

This guide will show you how to migrate a MobX-State-Tree project (Ignite's default) to Redux, using a newly created Ignite project as our example:

```terminal
```bash
npx ignite-cli new ReduxApp --yes --removeDemo
```

Expand Down
2 changes: 1 addition & 1 deletion docs/recipes/RemoveMobxStateTree.md
Expand Up @@ -25,7 +25,7 @@ yarn remove mobx mobx-react-lite mobx-state-tree reactotron-mst

2. Ignite places all MobX-State-Tree models in the `models/`. Remove this entire directory and all files within it, these are not needed anymore.

```terminal
```bash
rm -rf ./app/models
```

Expand Down
6 changes: 3 additions & 3 deletions docs/recipes/UpdatingDependencies.md
Expand Up @@ -15,7 +15,7 @@ If you get a bunch of warnings in the git command output about vulnerabilities,

Usage:

```console
```bash
yarn audit
```

Expand All @@ -25,7 +25,7 @@ yarn audit

Usage:

```console
```bash
yarn outdated
```

Expand All @@ -35,7 +35,7 @@ yarn outdated

Usage:

```console
```bash
yarn upgrade-interactive
yarn upgrade-interactive --latest
```
Expand Down
6 changes: 3 additions & 3 deletions docs/recipes/Zustand.md
Expand Up @@ -17,7 +17,7 @@ Its a relatively simple and unopinionated option to manage application state, wi

This guide will show you how to migrate a MobX-State-Tree project (Ignite's default) to Zustand, using a new Ignite project as an example:

```terminal
```bash
npx ignite-cli new ZustandApp --yes
```

Expand All @@ -31,13 +31,13 @@ Our Ignite Demo App includes a few MobX-State-Tree models inside `app/models`. B

First, add `zustand`:

```terminal
```bash
yarn add zustand
```

Create a directory for our new Zustand store files:

```terminal
```bash
mkdir app/store
```

Expand Down

0 comments on commit 7a5f2ed

Please sign in to comment.