Skip to content

Commit

Permalink
Update all dependencies, fix example routes for react-router-dom v6
Browse files Browse the repository at this point in the history
  • Loading branch information
@bjornstar
bjornstar committed Dec 18, 2021
1 parent 348c0ee commit 02f4ced
Show file tree
Hide file tree
Showing 6 changed files with 867 additions and 848 deletions.
22 changes: 11 additions & 11 deletions examples/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,20 @@
"main": "src/index.js",
"dependencies": {
"@react-three/cannon": "file:../",
"@react-three/drei": "^7.20.6",
"@react-three/fiber": "^7.0.19",
"@react-three/drei": "^8.3.1",
"@react-three/fiber": "^7.0.24",
"lerp": "^1.0.3",
"lodash-es": "^4.17.21",
"nice-color-palettes": "3.0.0",
"postprocessing": "^6.22.0",
"postprocessing": "^6.23.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-router-dom": "^6.2.1",
"styled-components": "^5.3.0",
"three": "^0.134.0",
"three-stdlib": "^2.5.9",
"zustand": "^3.5.2"
"three": "^0.135.0",
"three-stdlib": "^2.6.1",
"zustand": "^3.6.7"
},
"scripts": {
"build": "tsc && vite build",
Expand All @@ -35,13 +35,13 @@
"devDependencies": {
"@types/lodash-es": "^4.17.5",
"@types/node": "^17.0.0",
"@types/react": "^17.0.34",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"@types/react-router-dom": "^5.3.2",
"@types/styled-components": "^5.1.15",
"@types/three": "^0.134.0",
"@types/styled-components": "^5.1.18",
"@types/three": "^0.135.0",
"@vitejs/plugin-react-refresh": "^1.3.6",
"typescript": "^4.4.4",
"typescript": "^4.5.4",
"vite": "^2.7.3",
"vite-react-jsx": "^1.1.2"
},
Expand Down
54 changes: 23 additions & 31 deletions examples/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Suspense } from 'react'
import styled from 'styled-components'
import { HashRouter as Router, Link, Route, Switch, useRouteMatch } from 'react-router-dom'
import { HashRouter as Router, Link, Route, Routes, useMatch } from 'react-router-dom'
import { Global } from './styles'

import * as demos from './demos'
Expand All @@ -23,55 +23,47 @@ const Page = styled(PageImpl)`
}
`

const defaultComponent = 'MondayMorning'
const defaultName = 'MondayMorning'
const visibleComponents = Object.entries(demos).reduce<any>(
(acc, [name, item]) => ({ ...acc, [name]: item }),
(acc, [name, component]) => ({ ...acc, [name]: component }),
{},
)
const DefaultComponent = visibleComponents[defaultName].Component

const RoutedComponent = () => {
const {
params: { name },
} = useMatch('/demo/:name') || { params: { name: defaultName } }
const Component = visibleComponents[name || defaultName].Component
return <Component />
}

function Intro() {
const match = useRouteMatch<{ name: string }>('/demo/:name')
const { bright } = visibleComponents[match ? match.params.name : defaultComponent]
return (
<Page>
<Suspense fallback={null}>
<Switch>
<Route exact path="/" component={visibleComponents[defaultComponent].Component} />
<Route
exact
path="/demo/:name"
render={({ match }) => {
const Component = visibleComponents[match.params.name].Component
return <Component />
}}
/>
</Switch>
<Routes>
<Route path="/*" element={<DefaultComponent />} />
<Route path="/demo/:name" element={<RoutedComponent />} />
</Routes>
</Suspense>
<Demos />
<a href="https://github.com/pmndrs/use-cannon" style={{ color: bright ? '#2c2d31' : 'white' }}>
<a href="https://github.com/pmndrs/use-cannon" style={{ color: 'white' }}>
Github
</a>
</Page>
)
}

function Demos() {
const match = useRouteMatch<{ name: string }>('/demo/:name')
const { bright } = visibleComponents[match ? match.params.name : defaultComponent]
const {
params: { name: routeName },
} = useMatch('/demo/:name') || { params: { name: defaultName } }
return (
<DemoPanel>
{Object.entries(visibleComponents).map(([name]) => (
<Link key={name} to={`/demo/${name}`}>
<Spot
style={{
background:
(!match && name === defaultComponent) || (match && match.params.name === name)
? 'salmon'
: bright
? '#2c2d31'
: 'white',
}}
/>
{Object.entries(visibleComponents).map(([name], key) => (
<Link key={key} to={`/demo/${name}`}>
<Spot style={{ backgroundColor: name === routeName ? 'salmon' : 'white' }} />
</Link>
))}
</DemoPanel>
Expand Down
35 changes: 15 additions & 20 deletions examples/src/demos/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,20 @@
import { lazy } from 'react'

const KinematicCube = { descr: '', tags: [], Component: lazy(() => import('./KinematicCube')), bright: false }
const CubeHeap = { descr: '', tags: [], Component: lazy(() => import('./CubeHeap')), bright: false }
const ConvexPolyhedron = {
descr: '',
tags: [],
Component: lazy(() => import('./ConvexPolyhedron')),
bright: false,
}
const Pingpong = { descr: '', tags: [], Component: lazy(() => import('./Pingpong')), bright: false }
const MondayMorning = { descr: '', tags: [], Component: lazy(() => import('./MondayMorning')), bright: false }
const Constraints = { descr: '', tags: [], Component: lazy(() => import('./Constraints')), bright: false }
const Chain = { descr: '', tags: [], Component: lazy(() => import('./Chain')), bright: false }
const HingeMotor = { descr: '', tags: [], Component: lazy(() => import('./HingeMotor')), bright: false }
const CompoundBody = { descr: '', tags: [], Component: lazy(() => import('./CompoundBody')), bright: false }
const Raycast = { descr: '', tags: [], Component: lazy(() => import('./Raycast')), bright: false }
const Vehicle = { descr: '', tags: [], Component: lazy(() => import('./RaycastVehicle')), bright: false }
const Triggers = { descr: '', tags: [], Component: lazy(() => import('./Triggers')), bright: false }
const Trimesh = { descr: '', tags: [], Component: lazy(() => import('./Trimesh')), bright: false }
const Heightfield = { descr: '', tags: [], Component: lazy(() => import('./Heightfield')), bright: false }
const SphereDebug = { descr: '', tags: [], Component: lazy(() => import('./SphereDebug')), bright: false }
const KinematicCube = { Component: lazy(() => import('./KinematicCube')) }
const CubeHeap = { Component: lazy(() => import('./CubeHeap')) }
const ConvexPolyhedron = { Component: lazy(() => import('./ConvexPolyhedron')) }
const Pingpong = { Component: lazy(() => import('./Pingpong')) }
const MondayMorning = { Component: lazy(() => import('./MondayMorning')) }
const Constraints = { Component: lazy(() => import('./Constraints')) }
const Chain = { Component: lazy(() => import('./Chain')) }
const HingeMotor = { Component: lazy(() => import('./HingeMotor')) }
const CompoundBody = { Component: lazy(() => import('./CompoundBody')) }
const Raycast = { Component: lazy(() => import('./Raycast')) }
const Vehicle = { Component: lazy(() => import('./RaycastVehicle')) }
const Triggers = { Component: lazy(() => import('./Triggers')) }
const Trimesh = { Component: lazy(() => import('./Trimesh')) }
const Heightfield = { Component: lazy(() => import('./Heightfield')) }
const SphereDebug = { Component: lazy(() => import('./SphereDebug')) }

export {
MondayMorning,
Expand Down
Loading

1 comment on commit 02f4ced

@vercel
Copy link

@vercel vercel bot commented on 02f4ced Dec 18, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.