New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix suspense example #3619
Fix suspense example #3619
Conversation
* feat(hydration): remove hydration package (TanStack#2936) * V4: streamline cancel refetch (TanStack#2937) * feat: streamline cancelRefetch the following functions now default to true for cancelRefetch: - refetchQueries (+invalidateQueries, + resetQueries) - query.refetch - fetchNextPage (unchanged) - fetchPreviousPage (unchanged) * feat: streamline cancelRefetch make sure that refetchOnReconnect and refetchOnWindowFocus do not cancel already running requests * feat: streamline cancelRefetch update tests refetch and invalidate now both cancel previous queries, which is intended, so we get more calls to the queryFn in these cases * feat: streamline cancelRefetch add more tests for cancelRefetch behavior * feat: streamline cancelRefetch update docs and migration guide * feat: streamline cancelRefetch simplify conditions by moving the ?? true default down to fetch on observer level; all 3 callers (fetchNextPage, fetchPreviousPage and refetch) just pass their options down and adhere to this default; refetch also only has 3 callers: - refetch from useQuery, where we want the default - onOnline and onFocus, where we now explicitly pass false to keep the previous behavior and add more tests * feat: streamline cancelRefetch we always call this.fetch() with options, so we can just as well make the mandatory also, streamline signatures by destructing values that can't be forwarded (and use empty object as default value) in options and just spread the rest * feat: streamline cancelRefetch fix types for refetch it was accidentally made too wide and allowed all refetchFilters, like `predicate`; but with `refetch` on an obserserver, there is nothing to filter for, except the page, so that is what we need to accept via `RefetchPageFilters` * feat: streamline cancelRefetch refetch never took a queryKey as param - it is always bound to the observer * feat: better query filters (TanStack#2938) * fix: rename react directory to reactjs (TanStack#2884) * fix: rename react directory to reactjs the directory being named "react" causes an error with the moduleDirectories option from jest * fix: update package.json files to match the updated reactjs directory name * fix: change react test utils imports to match new directory name * docs(v4): add renamed reactjs details to migration guide Co-authored-by: Eddy Vinck <eddy.vinck@isaac.nl> * feat: mutation cache duration (TanStack#2963) * feat: mutation cachetime stramline queryCache / mutationCache events by combining them into notifiable.ts * feat: mutation cachetime removable * feat: mutation cachetime add gc to mutations * feat: mutation cachetime streamline event types between queries and mutations * feat: mutation cachetime tests, and I forgot to implement optionalRemove, so make it abstract * feat: mutation cachetime replicate gc behavior from TanStack#2950 and add more tests * feat: mutation cachetime get test coverage back to 100% * feat: mutation cachetime docs * feat: mutation cachetime try to make tests more resilient * feat: mutation cachetime fix imports after merge conflict * refactor(persistQueryClient): Make persistQueryClient stable (TanStack#2961) * 🚚 Remove experimental from persist-query-client * 🚚 Rename persistor -> persister * ✏️ Fix Persistor -> Persister in imports * 🚚 Update name in rollup config * 🚚 Move createAsyncStoragePersister and createWebStoragePersister to stable version and rename persistor -> persister * 📝 Update documentation * 📝 Add migrating to v4 docs * Apply suggestions from code review Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc> * 2964 changes to on success callback (TanStack#2969) * feat(useQuery): onSuccess callback do not call onSuccess if update was done manually from setQueryData * feat(useQuery): onSuccess callback test that onSuccess is not called when setQueryData is used * feat(useQuery): onSuccess callback docs changes * feat(useQuery): onSuccess callback options spread is wrong - `updatedAt` is actually `dataUpdatedAt`. Oddly we didn't have a test, so I added one * 2919 query key array (TanStack#2988) * feat: query key array remove code that internally ensures that we get an Array, because it is now the expected interface, ensured by TypeScript * feat: query key array update tests to the new syntax * feat: query key array fix assertions, because there is no array wrapping happening internally anymore. The key you receive from the context is exactly the key you passed in * feat: query key array this test doesn't make much sense anymore * feat: query key array wrapping in an extra array doesn't yield the same results anymore since v4 because keys need to be an array * feat: query key array make docs adhere to new array key syntax * feat: query key array migration docs * feat(QueryObserver): track queries as default (TanStack#2987) * feat(Query Options): remove notifyOnChangePropsExclusion - remove related code from queryObserver - remove type def - remove related tests * docs(Query Options): update notifyOnChangePropsExclusion sections - remove from api references - add to v4 migration guide * feat(QueryObserver): "tracked" as default behavior - remove "tracked" completely if notifyOnChangeProps is not defined, behave as v3 "tracked" - add `notifyOnChangeProps: 'all' to opt out of the smart tracking TODO: Now that default behavior has changed, work out the failed tests. Which parts to change for current ones and possibly write new ones. * test(useQuery): adjust tests to pass for notifyOnChangeProps udpate * test(useInfiniteQuery): adjust tests to pass for notifyOnChangeProps udpate * test(QueryResetErrorBoundary): adjust tests to pass for notifyOnChangeProps udpate * refactor(QueryObserver): use nullish coalescing operator much cleaner than the negated if I started with * test(QueryResetErrorBoundary): remove "tracked" from test * revert: test(QueryResetErrorBoundary): adjust tests to pass for notifyOnChaneProps udpate This reverts commit a34b472. The changes are not necessary after PR TanStack#2993 fix. * refactor(QueryObserver): combine prop checks * docs(notifyOnChangeProps): update docs to reflect new api * refactor: Remove deprecated promise cancel (TanStack#2996) * 🔥 Remove the cancel method on promise for cancelling promise * ✅ Fix query client tests * ✅ Update query and useQuery tests * ✅ Update use infinite query tests * 📝 Update migartion guide * 🐛 Fix linking in documentation * 📝 Fix grammatical errors in docs Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc> * :refactor: Use abortSignal for query cancellation in InfiniteQueryBehavior * 🚨 Fix lint errors * ♻️ Move define signal property to a separate function Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc> * remove test that doesn't make sense anymore - we don't allow different falsy query keys now * 2927 offline queries (TanStack#3006) * feat(useQuery): offline queries remove defaultQueryObserverOptions because it is the same as defaultQueryOptions and we can just use that * feat(useQuery): offline queries setup dependent default values, to make it easier to work with them * feat(useQuery): offline queries basic changes to retryer: - pause the query before fetching depending upon networkMode - pause retries depending upon networkRetry * feat(useQuery): offline queries move networkRetry and networkMode defaults to the retryer creation, because we need the same for mutations * feat(useQuery): offline queries decouple focus and online manager: we're now informing caches of a focus when we're focussed, and about an online event if we come online; if the retryer continues, it can then decide to not fetch depending on our networkMode * feat(useQuery): offline queries expose isPaused on the queryResult and make sure isFetching is false when we are paused * feat(useQuery): offline queries knowing if we can fetch depends on if we are paused or not, as other conditions should apply also, rename options (not sure if that will stick though) * feat(useQuery): offline queries adjust existing tests for isPaused being exposed * feat(useQuery): offline queries fix existing test by setting options to emulate the previous behaviour, otherwise, with `mockNavigatorOnline` being set to false right from the start, the mutation would never fire off * feat(useQuery): offline queries adapt onOnline, onFocus tests to new behavior: they are now decoupled, and onOnline is always called even when not focused and vice versa. The retryer should make sure to not continue fetching if necessary * feat(useQuery): offline queries first test for networkMode * feat(useQuery): offline queries isFetching and isPaused are now derived and stored together in a fetchingState enum (idle, fetching, paused) * feat(useQuery): offline queries better networkMode api: online, always, offlineFirst (basically always but with paused retries) * feat(useQuery): offline queries more tests for networkMode: online * feat(useQuery): offline queries more tests for networkMode: online * feat(useQuery): offline queries tests for networkMode: always * feat(useQuery): offline queries fix tests that were influencing each other by using proper jest mocks for online and visibility state * add paused queries to the devtools.tsx * feat(useQuery): offline queries never stop pausing when continueFn is called. Initially, I only had this guard for when it's called from the outside, e.g. for onWindowFocus while still being offline, but we need this always because otherwise query cancellation can potentially continue a paused query * feat(useQuery): offline queries okay, pausing multiple times was a bad idea, continueFn() will be called eventually anyways * feat(useQuery): offline queries attempt at offline toggle button * feat(useQuery): offline queries different icons, padding, color * feat(useQuery): offline queries i messed up the icon order * feat(useQuery): offline queries guard against illegal state transitions: paused queries can unmount or get cancelled, in which case we shouldn't continue them, even if we dispatch the continue event * feat(useQuery): offline queries fix devtools tests, account for paused queries * Revert "feat(useQuery): offline queries" This reverts commit a647f64. * feat(useQuery): offline queries keep the do-not-start logic out of the run function, and thus out of promiseOrValue. if the promise has already been resolved in the meantime, e.g. because of a `cancel`, the run method will just do nothing, while the previous logic would've started to fetch * feat(useQuery): offline queries show inactive as higher priority than paused * feat(useQuery): offline queries make sure that optimistic results don't show an intermediate fetching state, but go opmistically to paused instead * feat(useQuery): offline queries real result needs to match optimistic result * feat(useQuery): offline queries stupid mistake * feat(useQuery): offline queries keep status color and status label in sync * feat(useQuery): offline queries make networkMode param mandatory for canFetch (and default to online internally) so that we can't screw that up again * feat(useQuery): offline queries make sure test "finishes" to avoid prints to the console if another test goes online again * feat(useQuery): offline queries move cancel function to the top, as it's no longer dependent on the promise since the `.cancel` function is gone; all we need is to abort the signal and reject the promise of the retryer * feat(useQuery): offline queries inline canContinue, because it's now only called if the query is in paused state anyways * feat(useQuery): offline queries avoid the impossible state by not calling config.onContinue for already resolved queries, as that would put them right into fetching state again, without actually fetching * feat(useQuery): offline queries let resolved querie continue, but don't put them in fetching state * feat(useQuery): offline queries fix merge conflict and invert condition because no-negated-condition * feat(useQuery): offline queries add test for abort signal consumed - different results expected for node < 15 where we don't have AbortController, thus can't consume the signal * feat(useQuery): offline queries online queries should not fetch if paused and we go online when cancelled and no refetchOnReconnect * feat(useQuery): offline queries gc test * feat(useQuery): offline queries offlineFirst test * feat(useQuery): offline queries mock useMediaQuery to get rid of unnecessary check in devtools - if window is defined, `matchMedia` is also defined * feat(useQuery): offline queries use a higher retryDelay to make test more stable, otherwise, it might start retrying before we "go offline" * feat(useQuery): offline queries improve devtools test: check if onClick props are being called * feat(useQuery): offline queries add devtools test for offline mock * feat(useQuery): offline queries offline mutations test * feat(useQuery): offline queries network mode docs (unfinished) * feat(useQuery): offline queries network mode docs * feat(useQuery): offline queries fix merge conflicts * refactor(queryClient): remove undocumented methods * fix: offline mutations fixes (TanStack#3051) * feat: offline mutations move reducer into Mutation class to avoid passing state (and options) around * feat: offline mutations optimistically set paused state depending on if we can fetch or not to avoid an intermediate state where we are loading but not paused * examples: fix query keys in basic examples because we need those for preview builds * fix(useMutation): make sure cacheCallbacks are always called even if the useMutation component unmounts and we have a cacheTime of 0; the fix was cherry-picked from the react-18 branch, where we also introduced this behavior * Feature/cachetime zero (TanStack#3054) * refactor: cacheTime-zero remove special handling for cacheTime: 0 and schedule a normal garbage collection for those queries. They will be eligible for gc after a setTimeout(0), but then they will only be optionally removed. This makes sure that paused queries are NOT gc'ed * refactor: cacheTime-zero remove special test "about online queries with cacheTime:0 should not fetch if paused and then unmounted". paused queries will now be kept until they continue, just like with every other query, unless query cancellation or abort signal was involved * refactor: cacheTime-zero adapt "remounting" test: if the same query with cacheTime 0 unmounts and remounts in the same cycle, the query will now be picked up and will not go to loading state again. I think this is okay * refactor: cacheTime-zero re-add instant query removal after fetching, because fetching via `queryClient.fetchQuery` will not remove the query otherwise, because the normal gc-mechanism now checks for `hadObservers` due to a suspense issue :/ * refactor: cacheTime-zero weird edge case: the previous logic was instantly removing the query _while_ it was still fetching, which is something we likely don't want. The data will stay in the currentQuery of the observer if the observer unsubscribes but still exists, and a new subscription will pick it up, unless the query was explicitly cancelled or the abort signal was consumed. * refactor: cacheTime-zero we need to wait a tick because even cacheTime 0 now waits at least a setTimeout(0) to be eligible for gc * refactor: cacheTime-zero schedule a new garbage collection after each new fetch; this won't do anything when you still have observers, but it fixes an edge case where prefetching took longer than the cacheTime, in which case the query was again never removed test needed adaption because we don't instantly remove, but deferred by a tick * refactor: cacheTime-zero stabilize test * refactor: cacheTime-zero apply a different suspense "workaround": do not garbage collect when fetching optimistically (done only by suspense) - gc will kick in once an observer subscribes; this will make sure we can still gc other fetches that don't have an observer consistently, like prefetching when the fetch takes longer than the gc time (which was leaking with the old workaround) * refactor: cacheTime-zero remove leftover * refactor: cacheTime-zero since every fetch triggers a new gc cycle, we don't need to do this in a loop anymore also, reset isFetchingOptimistic after every fetch * add publishing capabilities for alpha branch * fix(queryFilters): fetchStatus to queryFilters (TanStack#3061) Co-authored-by: Eddy <eddyvinck95@gmail.com> Co-authored-by: Eddy Vinck <eddy.vinck@isaac.nl> Co-authored-by: Prateek Surana <prateeksurana3255@gmail.com> Co-authored-by: Rene Dellefont <renedellefont@gmail.com> BREAKING CHANGE: new query filters, query key must be an array
…ack#3066) * refactor(core): refactor retryer from a class to a function * refactor(core): refactor notifyManager from a class to a function * refactor(core): refactor notifyManager from a class to a function remove outdated comment
* feat(useQueries): update API to use object syntax New v4 API - instead of taking an array of queries, `useQueries` now accepts an object with a `queries` key. The value of this key is an array of queries (this array is unchanged from v3). * test(useQueries): update tests for new API * docs(useQueries): update docs for v4 API
copied over from the react-18 branch, because that impl is less flaky
another one copied over from the react-18 branch, because that impl is less flaky
* refactor: make listeners required because the only place where we pass no listener in is in tests * refactor: make notifyOnChangeProps a Set
* chore: update caniuselite * chore: remove const-enum babel plugin because we don't use const-enums anymore * chore: require ts 4.1 * chore: update rollup and plugins * chore: update typescript and ts-eslint * refactor: remove notifiable base class this abstraction costs more than the simple duplication, and we also have other notify functions which were not unified
…y is on (TanStack#3087) adding "error" to the list of tracked properties will result in us _only_ tracking error if we want to track all properties implicitly by _not_ observing any properties (because we check for trackedProps.size). Moving the adding of "error" to _after_ the size check fixes this
# Conflicts: # src/core/tests/focusManager.test.tsx # src/core/tests/onlineManager.test.tsx
# Conflicts: # src/core/queryObserver.ts
to not log to the console per default; to access process.ENV, we need to enable node typings, which screws with setTimeout / setInterval, as typings are different for node and the browser; I tried to keep the changes to type-level only
# Conflicts: # src/core/query.ts # src/core/queryObserver.ts # src/reactjs/tests/useQuery.test.tsx # src/reactjs/types.ts
* refactor: remove cancel method as it no longer exists it wasn't doing anything in that test * refactor: remove cancel method as it no longer exists use signal in playground example instead of cancel fn
* feat(persistQueryClient): improve persist controls add restore/save/subscribe * docs: update persistQueryClient and hydration * docs: describe new persist features * docs(persistQueryClient): correct option defaults * feat(persistQueryClient): enable unsubscribe * docs(persistQueryClient): clarify restoration * docs(persistQueryClient): enable unsubscribe note * fix(persistQueryClient): subscribe awaits restore
# Conflicts: # src/core/notifyManager.ts # src/core/types.ts
The example contains at least one inacurate statement, > It will then cache the data using `'todos'` and `fetchTodos` as the unique identifiers for that cache. and could benefit from more precise language.
* fix(core): do not refetch disabled queries with refetchQueries or invalidateQueries + refetchType "inactive" disabled queries (=queries that have observers which are all enabled:false) are matched as "inactive"; this is okay when searching for them via findAll or for removeQueries, but the docs clearly state that refetchQueries / invalidateQueries do not refetch disabled queries, and that the only way to refetch them is via refetch returned from useQuery; this is important when using enabled to signal that some dependencies are not yet ready some tests needed to be adapted because we used disabled observer + refetchQueries a lot. The easiest way to emulate the observers we wanted here was mostly with initialData + staleTime, and to get a real inactive query, we just need to subscribe + unsubscribe immediately * fix(core): do not refetch disabled queries add tests for refetchQueries + disabled * fix(core): do not refetch disabled queries update test to make more sense - title said disabled queries, but we had no disabled query; test now does the opposite of what it did before, but that's what this PR does :)
as it wasn't really aborting the request - there is no AbortSignal for Mutations atm.
) * refactor(QueryClient): add dev warning Warn when several query defaults match a given key. Could be error prone if the returned defaults are not the expected ones. The order of registration does matter. * test(QueryClient): warning with defaults options Highlight how query defaults registration order matters. * doc(QueryClient): add notes about query defaults In `getQueryDefaults`, the **first** matching default is returned. In `setQueryDefaults`, highlight how the registration order is important. * doc(QueryClient): fix link to documentation * test(QueryClient): better test * refactor(QueryClient): use internal logger * doc(QueryClient): fix markup * doc(QueryClient): remove extra entry * refacto(QueryClient): warn about several query defaults Warning must be displayed any time a conflict is detected, not just for dev build. The warning is aimed at helping developers *using* react-query, not those *developping* react-query. * Update src/core/queryClient.ts Remove useless optional chaining. Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc> * feat(utils): add assert helper * refactor(QueryClient): add dev warning for mutation defaults * Revert "feat(utils): add assert helper" This reverts commit 05c3fe1. * refactor(QueryClient): error when several defaults Review how the check for multiple defaults on a key is raised. Ensure it remains fast in release build. * refactor(QueryClient): inline code Co-authored-by: Guillaume Labat <guillaume.labat+git@imagino.com> Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>
* Bail out if query data undefined * Fix failing test * docs: migration guide for undefined data * docs: update setQueryData reference * Update docs/src/pages/guides/migrating-to-react-query-4.md Co-authored-by: Louis Law <louiscklaw@users.noreply.github.com> Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>
…for the last observer
…anStack#3285) Add an example on how to `compress`/`decompress` data from local storage in case you need to cache large payloads. Context: TanStack#2864 (comment)
…ack#3289) * refactor: size inline reducers in query and mutation because they are only used from dispatch * refactor: remove default case in reducers actions are only produced by our own code, which is in TypeScript, so we'll get a type error if there is an action not handled. Unknown actions can't exist, as the tests show: we'd need a ts-expects-error to go this way * refactor: inline executeMutation because it's only used once * refactor: inline getObserver and updateObservers in useQueries because it's only used once * refactor: extract getDefaultState getDefaultState is a pure function, with no access to `this`, so we can extract it. This is in-line with what `mutation` is doing * refactor: remove getNextResult it was only used in tests, and it's also not documented * refactor: inline clearTimers because it's only used once * refactor: inline shouldNotifyListeners because it's only used once * refactor: inline resumePausedMutations * refactor: tests every stubbed queryFn needs a mock implementation to avoid console errors: Error: Query data cannot be undefined
* fix various bundling issues * add package.json to exports * remove @svgr/rollup * remove node v12 from CI * support devtools/development * do not alias react-query * add side effect * remove "module" * fix * fix exports * add "module" * update @babel/runtime * don't preserve modules * switch back to babel * add migration note * update babel * update rollup * downgrade @rollup/plugin-commonjs
* refactor: move test utils out of reactjs so that we can import them in core * refactor: move react specific utils back to reactjs * refactor: adapt test imports * refactor: move two tests to the reactjs package because they render a component * chore: setup eslint import zones so that we can't import anything into `core` that lives in other packages, like reactjs * fix: move usage of React Context out of core package by keeping HydrateOptions separate from React, and only add ContextOptions where necessary
TanStack#3541) * fix(types): fix handling of promise return type in QueryFunctionData * fix(QueryFunction): return type restrict void and avoid union type distribution * fix(QueryClient): make setQueryDefaults compatible with adjusted QueryFunction type * fix(useQueries): correct type inferrence in GetResults with new QueryFunction type * fix(tests): adjust all test cases which use any or never as query function return type to comply with new QueryFunction type * fix(tests): change incorrect query function return types of query tests from string to unknown * feature(useQuery): add test cases covering void and Promise<void> return types * feature(useQueries): reject void or undefined as query function return type * feature(useQueries): add test cases for invalid query function return types * fix tsc error after rebasing lastest beta branch
…anStack#3613) queries can be fetching _while_ we are making a manual update are still fetching, so we have to set fields that affect the fetch conditionally (fetchStatus, fetchFailureCount)
…om the updater function on type level (TanStack#3615) the only runtime tests we had didn't use the previous value, so the generic defaults to unknown; the TS error becomes apparent when providing a generic to setQueryData
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit f3bde85:
|
thanks for this. I have fixed the example for v4 ( |
Codecov Report
@@ Coverage Diff @@
## master #3619 +/- ##
=======================================
Coverage 96.35% 96.35%
=======================================
Files 45 45
Lines 2277 2278 +1
Branches 637 637
=======================================
+ Hits 2194 2195 +1
Misses 80 80
Partials 3 3
Continue to review full report at Codecov.
|
Ah nuts, sounds great. I'm happy to help however 👍🏻 If there are other examples I can update, I'm happy to get them up to your standard |
* refactor: remove type-fest as a dependency only used for the Promisable type, which is easy to recreate * feat(persistQueryClient): error handling strategies for persist plugins * feat(persistQueryClient): error handling strategies for persist plugins adapt tests * make handlePersistError return null to stop retries if null is returned, which is also the default strategy, the webstorage entry will be removed completely. * test for default behaviour * async version for persist error handling to make sync and async compatible, persist version must also throw an error to abort * make sure that async persister can accept sync error handlers * undefined errorStrategy, or return undefined from it, will just not persist anymore * rename to retry + documentation * improve docs
* expose errorUpdateCount on useQuery * refactored test slightly * Update docs/src/pages/reference/useQuery.md as suggested Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc> * removed the first click as we fetch on default, * prettier * added errorUpdateCount to failed tests. * prettier Co-authored-by: Dominik Dorfmeister <office@dorfmeister.cc>
- [react-native-appstate-hook](https://github.com/amrlabib/react-native-appstate-hook) is not updated regularly. It currently has a `peerDependencies` problem for React 17 and 18. - It actually does the same thing with `AppState.addEventListener('change', ...)` when you only specify `onChange` property on `useAppState()`.
there is no need to re-run the select function if it is referentially stable, even when it throws an error. if no dependency has changed, we can re-use the cached error, as the select function should be idempotent and thus return the same error anyway. further, if we have cached data from a previously successful select, that should be returned as `data` alongside the error.
…tack#3577) * feat(devtools): update react query logo to close devtools added button wrapper on react query logo which onClick closes devtools window closes TanStack#3067 * feat(devtools): update test case for open and close devtools
Prettier is not installed, instead of adding additional dependencies, I have removed it from being referenced in the eslint config. This was preventing the app from running
… to follow other example conventions I noticed that the other examples didn't have keywords, and seeing the license warning constantly was a little annoying. So I updated this so that it is in line with the rest of the projects
Removed unnecessary comments
f3bde85
to
2dc0dd9
Compare
I was working through the suspense example, of which the codesandbox is broken, and thought that since it is now official, it is worth updating.
I have attempted to tread lightly and keep things as clean as possible. This example now once again works and can be installed with fewer errors using npm. Please feel free to make any required suggestions