FormidableLabs / FormidableLabs/spectacle

How I got this to work with Parcel bundler

Open
#1,286 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
10.2k
Forks
700
PR merge metrics
No merged PRs in 30d

Description

```
node version = v18.11.0
npm version = 8.19.2
parcel version = 2.9.3
react version = 18.2.0
react-dom = 18.2.0
spectacle = 10.1.4
```
**Notice**: I am by no means an expert developer at React/Node.
I am simply putting this here in case someone finds my instructions/experience useful.

Below are the steps I took to get this to work with a project I'm working on that utilizes Parcel bundler:

1. Cloned the repo to an arbitrary location (e.g. ~/git)
2. Changed working directory, `cd ~/git/spectacle`
3. Introduced my changes:
`git diff src/hooks/use-location-sync.ts`
```diff --git a/packages/spectacle/src/hooks/use-location-sync.ts b/packages/spectacle/src/hooks/use-location-sync.ts
index b167e43..215d101 100644
--- a/packages/spectacle/src/hooks/use-location-sync.ts
+++ b/packages/spectacle/src/hooks/use-location-sync.ts
@@ -1,9 +1,10 @@
import { useState, useEffect, useCallback } from 'react';
-import { createBrowserHistory, Location } from 'history';
+import { Location } from 'history';
import QS from 'query-string';
import isEqual from 'react-fast-compare';
import { mergeAndCompare, merge } from 'merge-anything';
import { DeckView } from './use-deck-state';
+import { useNavigate } from 'react-router-dom';
import {
mapLocationToState,
mapStateToLocation,
@@ -42,7 +43,6 @@ type LocationStateOptions = {
mapStateToLocation: typeof mapStateToLocation;
mapLocationToState: typeof mapLocationToState;
mergeLocation?: typeof defaultMergeLocation;
- historyFactory?: typeof createBrowserHistory;
disableInteractivity?: boolean;
};

@@ -53,8 +53,8 @@ export default function useLocationSync({
mapLocationToState,
disableInteractivity = false,
mergeLocation = defaultMergeLocation,
- historyFactory = createBrowserHistory
}: LocationStateOptions) {
+ historyFactory = useNavigate();
const [history] = useState(() => {
return typeof document !== 'undefined' ? historyFactory() : null;
});
```
4. Built the new spectacle package
```
yarn install
npm install -g pnpm
npm install -g wireit
npm install -g nps
npm install -g tsup
npx pnpm install
npx pnpm run build
```
5. Changed working directory, `cd ~/git/myproject`
6. Installed the modified spectacle package
`yarn add ~/git/spectacle/packages/spectacle`

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.