Catch more SSR issues and improve compat tests (#353)
This will cause the build to fail, as this will catch an SSR issue, which will be fixed after merging #369
This commit is contained in:
Aria
GitHub
parent
71f08e171a
commit
718beb4d7b
52 changed files with 2404 additions and 686 deletions
23
compatibility-tests/fixtures/cra-react18/package/.gitignore
vendored
Normal file
23
compatibility-tests/fixtures/cra-react18/package/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
|
@ -0,0 +1 @@
|
|||
Testing `@theatre/core` and `@theatre/studio` with `npm`, `create-react-app`, and `react@18`
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"name": "@compat/cra-react18",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-three/drei": ">7.2.2",
|
||||
"@testing-library/jest-dom": "^5.11.4",
|
||||
"@testing-library/react": "^11.1.0",
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
"@theatre/core": "0.0.1-COMPAT.1",
|
||||
"@theatre/r3f": "0.0.1-COMPAT.1",
|
||||
"@theatre/studio": "0.0.1-COMPAT.1",
|
||||
"react-scripts": "^5.0.1",
|
||||
"three": ">0.132.0",
|
||||
"web-vitals": "^1.0.1"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": ["react-app", "react-app/jest"]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [">0.2%", "not dead", "not op_mini all"],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import {getProject} from '@theatre/core'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import React from 'react'
|
||||
import {Canvas} from '@react-three/fiber'
|
||||
import studio from '@theatre/studio'
|
||||
import {editable as e, SheetProvider} from '@theatre/r3f'
|
||||
import extension from '@theatre/r3f/dist/extension'
|
||||
|
||||
if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
|
||||
studio.extend(extension)
|
||||
studio.initialize({usePersistentStorage: false})
|
||||
}
|
||||
|
||||
// credit: https://codesandbox.io/s/camera-pan-nsb7f
|
||||
|
||||
function Plane({color, theatreKey, ...props}) {
|
||||
return (
|
||||
<e.mesh {...props} theatreKey={theatreKey}>
|
||||
<boxBufferGeometry />
|
||||
<meshStandardMaterial color={color} />
|
||||
</e.mesh>
|
||||
)
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Canvas
|
||||
gl={{preserveDrawingBuffer: true}}
|
||||
linear
|
||||
frameloop="demand"
|
||||
dpr={[1.5, 2]}
|
||||
style={{position: 'absolute', top: 0, left: 0}}
|
||||
>
|
||||
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
|
||||
{/* @ts-ignore */}
|
||||
<e.orthographicCamera makeDefault theatreKey="Camera" />
|
||||
<ambientLight intensity={0.4} />
|
||||
<e.pointLight
|
||||
position={[-10, -10, 5]}
|
||||
intensity={2}
|
||||
color="#ff20f0"
|
||||
theatreKey="Light 1"
|
||||
/>
|
||||
<e.pointLight
|
||||
position={[0, 0.5, -1]}
|
||||
distance={1}
|
||||
intensity={2}
|
||||
color="#e4be00"
|
||||
theatreKey="Light 2"
|
||||
/>
|
||||
<group position={[0, -0.9, -3]}>
|
||||
<Plane
|
||||
color="hotpink"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position-z={2}
|
||||
scale={[4, 20, 0.2]}
|
||||
theatreKey="plane1"
|
||||
/>
|
||||
<Plane
|
||||
color="#e4be00"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position-y={1}
|
||||
scale={[4.2, 0.2, 4]}
|
||||
theatreKey="plane2"
|
||||
/>
|
||||
<Plane
|
||||
color="#736fbd"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position={[-1.7, 1, 3.5]}
|
||||
scale={[0.5, 4, 4]}
|
||||
theatreKey="plane3"
|
||||
/>
|
||||
<Plane
|
||||
color="white"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position={[0, 4.5, 3]}
|
||||
scale={[2, 0.03, 4]}
|
||||
theatreKey="plane4"
|
||||
/>
|
||||
</group>
|
||||
</SheetProvider>
|
||||
</Canvas>
|
||||
)
|
||||
}
|
||||
|
||||
const project = getProject('Project')
|
||||
const sheet = project.sheet('Sheet')
|
||||
const obj = sheet.object('Obj', {str: 'some string', num: 0})
|
||||
|
||||
const container = document.getElementById('root')
|
||||
const root = ReactDOM.createRoot(container)
|
||||
root.render(<App obj={obj}>hi</App>)
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`next / production \`$ next build\` should succeed and have a predictable output 1`] = `
|
||||
"
|
||||
> build
|
||||
> next build
|
||||
|
||||
info - Linting and checking validity of types...
|
||||
info - Creating an optimized production build...
|
||||
info - Compiled successfully
|
||||
info - Collecting page data...
|
||||
info - Generating static pages (0/3)
|
||||
info - Generating static pages (3/3)
|
||||
info - Finalizing page optimization...
|
||||
|
||||
"
|
||||
`;
|
||||
31
compatibility-tests/fixtures/next/package/.gitignore
vendored
Normal file
31
compatibility-tests/fixtures/next/package/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
1
compatibility-tests/fixtures/next/package/README.md
Normal file
1
compatibility-tests/fixtures/next/package/README.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
This is a starter template for [Learn Next.js](https://nextjs.org/learn).
|
||||
16
compatibility-tests/fixtures/next/package/package.json
Normal file
16
compatibility-tests/fixtures/next/package/package.json
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@theatre/core": "0.0.1-COMPAT.1",
|
||||
"@theatre/r3f": "0.0.1-COMPAT.1",
|
||||
"@theatre/studio": "0.0.1-COMPAT.1",
|
||||
"next": "latest",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
}
|
||||
}
|
||||
92
compatibility-tests/fixtures/next/package/pages/index.js
Normal file
92
compatibility-tests/fixtures/next/package/pages/index.js
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
import {getProject} from '@theatre/core'
|
||||
import React from 'react'
|
||||
import {Canvas} from '@react-three/fiber'
|
||||
import studio from '@theatre/studio'
|
||||
import {editable as e, SheetProvider} from '@theatre/r3f'
|
||||
import extension from '@theatre/r3f/dist/extension'
|
||||
import playgroundState from './playgroundState.json'
|
||||
|
||||
if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
|
||||
studio.extend(extension)
|
||||
studio.initialize({usePersistentStorage: false})
|
||||
}
|
||||
|
||||
const sheet = getProject('Playground - R3F', {state: playgroundState}).sheet(
|
||||
'R3F-Canvas',
|
||||
)
|
||||
|
||||
// credit: https://codesandbox.io/s/camera-pan-nsb7f
|
||||
|
||||
function Plane({color, theatreKey, ...props}) {
|
||||
return (
|
||||
<e.mesh {...props} theatreKey={theatreKey}>
|
||||
<boxBufferGeometry />
|
||||
<meshStandardMaterial color={color} />
|
||||
</e.mesh>
|
||||
)
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Canvas
|
||||
gl={{preserveDrawingBuffer: true}}
|
||||
linear
|
||||
frameloop="demand"
|
||||
dpr={[1.5, 2]}
|
||||
style={{position: 'absolute', top: 0, left: 0}}
|
||||
>
|
||||
<SheetProvider sheet={sheet}>
|
||||
{/* @ts-ignore */}
|
||||
<e.orthographicCamera makeDefault theatreKey="Camera" />
|
||||
<ambientLight intensity={0.4} />
|
||||
<e.pointLight
|
||||
position={[-10, -10, 5]}
|
||||
intensity={2}
|
||||
color="#ff20f0"
|
||||
theatreKey="Light 1"
|
||||
/>
|
||||
<e.pointLight
|
||||
position={[0, 0.5, -1]}
|
||||
distance={1}
|
||||
intensity={2}
|
||||
color="#e4be00"
|
||||
theatreKey="Light 2"
|
||||
/>
|
||||
<group position={[0, -0.9, -3]}>
|
||||
<Plane
|
||||
color="hotpink"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position-z={2}
|
||||
scale={[4, 20, 0.2]}
|
||||
theatreKey="plane1"
|
||||
/>
|
||||
<Plane
|
||||
color="#e4be00"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position-y={1}
|
||||
scale={[4.2, 0.2, 4]}
|
||||
theatreKey="plane2"
|
||||
/>
|
||||
<Plane
|
||||
color="#736fbd"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position={[-1.7, 1, 3.5]}
|
||||
scale={[0.5, 4, 4]}
|
||||
theatreKey="plane3"
|
||||
/>
|
||||
<Plane
|
||||
color="white"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position={[0, 4.5, 3]}
|
||||
scale={[2, 0.03, 4]}
|
||||
theatreKey="plane4"
|
||||
/>
|
||||
</group>
|
||||
</SheetProvider>
|
||||
</Canvas>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
return <App></App>
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"sheetsById": {
|
||||
"R3F-Canvas": {
|
||||
"staticOverrides": {
|
||||
"byObject": {
|
||||
"plane1": {
|
||||
"position": {
|
||||
"x": -0.06000000000000002
|
||||
}
|
||||
},
|
||||
"plane2": {
|
||||
"position": {
|
||||
"x": 0,
|
||||
"y": -1.1043953439330743,
|
||||
"z": 6.322692591942688
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"definitionVersion": "0.4.0",
|
||||
"revisionHistory": ["lSnZ_QVusR3qNnVN"]
|
||||
}
|
||||
BIN
compatibility-tests/fixtures/next/package/public/favicon.ico
Normal file
BIN
compatibility-tests/fixtures/next/package/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
67
compatibility-tests/fixtures/next/production.compat-test.ts
Normal file
67
compatibility-tests/fixtures/next/production.compat-test.ts
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
// @cspotcode/zx is zx in CommonJS
|
||||
import {$, cd, path} from '@cspotcode/zx'
|
||||
import {chromium, devices} from 'playwright'
|
||||
|
||||
$.verbose = true
|
||||
|
||||
const PATH_TO_PACKAGE = path.join(__dirname, `./package`)
|
||||
|
||||
describe(`next / production`, () => {
|
||||
test(`\`$ next build\` should succeed and have a predictable output`, async () => {
|
||||
cd(PATH_TO_PACKAGE)
|
||||
const {exitCode, stdout} = await $`npm run build`
|
||||
// at this point, the build should have succeeded
|
||||
expect(exitCode).toEqual(0)
|
||||
// now let's check the output to make sure it's what we expect
|
||||
|
||||
// all of stdout until the line that contains "Route (pages)". That's because what comes after that
|
||||
// line is a list of all the pages that were built, and we don't want to snapshot that because it changes every time.
|
||||
const stdoutUntilRoutePages = stdout.split(`Route (pages)`)[0]
|
||||
|
||||
// This test will fail if `next build` outputs anything unexpected.
|
||||
expect(stdoutUntilRoutePages).toMatchSnapshot()
|
||||
})
|
||||
|
||||
// this test is not ready yet, so we'll skip it
|
||||
describe.skip(`$ next start`, () => {
|
||||
let browser, page
|
||||
beforeAll(async () => {
|
||||
browser = await chromium.launch()
|
||||
})
|
||||
afterAll(async () => {
|
||||
await browser.close()
|
||||
})
|
||||
beforeEach(async () => {
|
||||
page = await browser.newPage()
|
||||
})
|
||||
afterEach(async () => {
|
||||
await page.close()
|
||||
})
|
||||
|
||||
// just a random port I'm hoping is free everywhere.
|
||||
const port = 30978
|
||||
|
||||
test('`$ next start` serves the app, and the app works', async () => {
|
||||
// run the production server but don't wait for it to finish
|
||||
cd(PATH_TO_PACKAGE)
|
||||
const p = $`npm run start -- --port ${port}`
|
||||
// await p
|
||||
|
||||
try {
|
||||
page.on('console', (msg) => console.log('PAGE LOG:', msg.text()))
|
||||
await page.goto(`http://localhost:${port}`)
|
||||
// wait three seconds
|
||||
await page.waitForTimeout(3000)
|
||||
} finally {
|
||||
p.kill()
|
||||
}
|
||||
try {
|
||||
await p
|
||||
} catch (e) {
|
||||
if (e.signal !== 'SIGKILL' && e.signal !== 'SIGTERM') {
|
||||
throw e
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
3
compatibility-tests/fixtures/parcel1-react17/package/.gitignore
vendored
Normal file
3
compatibility-tests/fixtures/parcel1-react17/package/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/.cache
|
||||
/dist
|
||||
/package-lock.json
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Theatre.js Example - DOM</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="./src/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"name": "@compat/parcel1-react17",
|
||||
"scripts": {
|
||||
"dev": "parcel serve ./index.html"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-three/drei": "^7.3.1",
|
||||
"@react-three/fiber": "^7.0.6",
|
||||
"@theatre/core": "0.0.1-COMPAT.1",
|
||||
"@theatre/r3f": "0.0.1-COMPAT.1",
|
||||
"@theatre/studio": "0.0.1-COMPAT.1",
|
||||
"parcel-bundler": "^1.12.5",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"three": "^0.137.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
import {getProject} from '@theatre/core'
|
||||
import ReactDOM from 'react-dom'
|
||||
import React from 'react'
|
||||
import {Canvas} from '@react-three/fiber'
|
||||
import studio from '@theatre/studio'
|
||||
import {editable as e, SheetProvider} from '@theatre/r3f'
|
||||
import extension from '@theatre/r3f/dist/extension'
|
||||
|
||||
if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
|
||||
studio.extend(extension)
|
||||
studio.initialize({usePersistentStorage: false})
|
||||
}
|
||||
|
||||
// credit: https://codesandbox.io/s/camera-pan-nsb7f
|
||||
|
||||
function Plane({color, theatreKey, ...props}) {
|
||||
return (
|
||||
<e.mesh {...props} theatreKey={theatreKey}>
|
||||
<boxBufferGeometry />
|
||||
<meshStandardMaterial color={color} />
|
||||
</e.mesh>
|
||||
)
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Canvas
|
||||
gl={{preserveDrawingBuffer: true}}
|
||||
linear
|
||||
frameloop="demand"
|
||||
dpr={[1.5, 2]}
|
||||
style={{position: 'absolute', top: 0, left: 0}}
|
||||
>
|
||||
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
|
||||
{/* @ts-ignore */}
|
||||
<e.orthographicCamera makeDefault theatreKey="Camera" />
|
||||
<ambientLight intensity={0.4} />
|
||||
<e.pointLight
|
||||
position={[-10, -10, 5]}
|
||||
intensity={2}
|
||||
color="#ff20f0"
|
||||
theatreKey="Light 1"
|
||||
/>
|
||||
<e.pointLight
|
||||
position={[0, 0.5, -1]}
|
||||
distance={1}
|
||||
intensity={2}
|
||||
color="#e4be00"
|
||||
theatreKey="Light 2"
|
||||
/>
|
||||
<group position={[0, -0.9, -3]}>
|
||||
<Plane
|
||||
color="hotpink"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position-z={2}
|
||||
scale={[4, 20, 0.2]}
|
||||
theatreKey="plane1"
|
||||
/>
|
||||
<Plane
|
||||
color="#e4be00"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position-y={1}
|
||||
scale={[4.2, 0.2, 4]}
|
||||
theatreKey="plane2"
|
||||
/>
|
||||
<Plane
|
||||
color="#736fbd"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position={[-1.7, 1, 3.5]}
|
||||
scale={[0.5, 4, 4]}
|
||||
theatreKey="plane3"
|
||||
/>
|
||||
<Plane
|
||||
color="white"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position={[0, 4.5, 3]}
|
||||
scale={[2, 0.03, 4]}
|
||||
theatreKey="plane4"
|
||||
/>
|
||||
</group>
|
||||
</SheetProvider>
|
||||
</Canvas>
|
||||
)
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root'),
|
||||
)
|
||||
3
compatibility-tests/fixtures/parcel1-react18/package/.gitignore
vendored
Normal file
3
compatibility-tests/fixtures/parcel1-react18/package/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
/.cache
|
||||
/dist
|
||||
/package-lock.json
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Theatre.js Example - DOM</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="./src/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"name": "@compat/parcel1-react18",
|
||||
"scripts": {
|
||||
"dev": "parcel serve ./index.html"
|
||||
},
|
||||
"dependencies": {
|
||||
"@theatre/core": "0.0.1-COMPAT.1",
|
||||
"@theatre/r3f": "0.0.1-COMPAT.1",
|
||||
"@theatre/studio": "0.0.1-COMPAT.1",
|
||||
"parcel-bundler": "^1.12.5",
|
||||
"react": "^18.1.0",
|
||||
"react-dom": "^18.1.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import {getProject} from '@theatre/core'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import React from 'react'
|
||||
import {Canvas} from '@react-three/fiber'
|
||||
import studio from '@theatre/studio'
|
||||
import {editable as e, SheetProvider} from '@theatre/r3f'
|
||||
import extension from '@theatre/r3f/dist/extension'
|
||||
|
||||
if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
|
||||
studio.extend(extension)
|
||||
studio.initialize({usePersistentStorage: false})
|
||||
}
|
||||
|
||||
// credit: https://codesandbox.io/s/camera-pan-nsb7f
|
||||
|
||||
function Plane({color, theatreKey, ...props}) {
|
||||
return (
|
||||
<e.mesh {...props} theatreKey={theatreKey}>
|
||||
<boxBufferGeometry />
|
||||
<meshStandardMaterial color={color} />
|
||||
</e.mesh>
|
||||
)
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Canvas
|
||||
gl={{preserveDrawingBuffer: true}}
|
||||
linear
|
||||
frameloop="demand"
|
||||
dpr={[1.5, 2]}
|
||||
style={{position: 'absolute', top: 0, left: 0}}
|
||||
>
|
||||
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
|
||||
{/* @ts-ignore */}
|
||||
<e.orthographicCamera makeDefault theatreKey="Camera" />
|
||||
<ambientLight intensity={0.4} />
|
||||
<e.pointLight
|
||||
position={[-10, -10, 5]}
|
||||
intensity={2}
|
||||
color="#ff20f0"
|
||||
theatreKey="Light 1"
|
||||
/>
|
||||
<e.pointLight
|
||||
position={[0, 0.5, -1]}
|
||||
distance={1}
|
||||
intensity={2}
|
||||
color="#e4be00"
|
||||
theatreKey="Light 2"
|
||||
/>
|
||||
<group position={[0, -0.9, -3]}>
|
||||
<Plane
|
||||
color="hotpink"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position-z={2}
|
||||
scale={[4, 20, 0.2]}
|
||||
theatreKey="plane1"
|
||||
/>
|
||||
<Plane
|
||||
color="#e4be00"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position-y={1}
|
||||
scale={[4.2, 0.2, 4]}
|
||||
theatreKey="plane2"
|
||||
/>
|
||||
<Plane
|
||||
color="#736fbd"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position={[-1.7, 1, 3.5]}
|
||||
scale={[0.5, 4, 4]}
|
||||
theatreKey="plane3"
|
||||
/>
|
||||
<Plane
|
||||
color="white"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position={[0, 4.5, 3]}
|
||||
scale={[2, 0.03, 4]}
|
||||
theatreKey="plane4"
|
||||
/>
|
||||
</group>
|
||||
</SheetProvider>
|
||||
</Canvas>
|
||||
)
|
||||
}
|
||||
|
||||
const project = getProject('Project')
|
||||
const sheet = project.sheet('Sheet')
|
||||
const obj = sheet.object('Obj', {str: 'some string', num: 0})
|
||||
|
||||
const container = document.getElementById('root')
|
||||
const root = ReactDOM.createRoot(container)
|
||||
root.render(<App obj={obj}>hi</App>)
|
||||
4
compatibility-tests/fixtures/parcel2-react18/package/.gitignore
vendored
Normal file
4
compatibility-tests/fixtures/parcel2-react18/package/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
/.parcel-cache
|
||||
/.cache
|
||||
/dist
|
||||
/package-lock.json
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Theatre.js Example - DOM</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./src/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"name": "@compat/parcel2-react18",
|
||||
"scripts": {
|
||||
"dev": "parcel serve ./index.html"
|
||||
},
|
||||
"dependencies": {
|
||||
"@theatre/core": "0.0.1-COMPAT.1",
|
||||
"@theatre/r3f": "0.0.1-COMPAT.1",
|
||||
"@theatre/studio": "0.0.1-COMPAT.1",
|
||||
"parcel": "^2.5.0",
|
||||
"react": "^18.1.0",
|
||||
"react-dom": "^18.1.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import {getProject} from '@theatre/core'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import React from 'react'
|
||||
import {Canvas} from '@react-three/fiber'
|
||||
import studio from '@theatre/studio'
|
||||
import {editable as e, SheetProvider} from '@theatre/r3f'
|
||||
import extension from '@theatre/r3f/dist/extension'
|
||||
|
||||
if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
|
||||
studio.extend(extension)
|
||||
studio.initialize({usePersistentStorage: false})
|
||||
}
|
||||
|
||||
// credit: https://codesandbox.io/s/camera-pan-nsb7f
|
||||
|
||||
function Plane({color, theatreKey, ...props}) {
|
||||
return (
|
||||
<e.mesh {...props} theatreKey={theatreKey}>
|
||||
<boxBufferGeometry />
|
||||
<meshStandardMaterial color={color} />
|
||||
</e.mesh>
|
||||
)
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Canvas
|
||||
gl={{preserveDrawingBuffer: true}}
|
||||
linear
|
||||
frameloop="demand"
|
||||
dpr={[1.5, 2]}
|
||||
style={{position: 'absolute', top: 0, left: 0}}
|
||||
>
|
||||
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
|
||||
{/* @ts-ignore */}
|
||||
<e.orthographicCamera makeDefault theatreKey="Camera" />
|
||||
<ambientLight intensity={0.4} />
|
||||
<e.pointLight
|
||||
position={[-10, -10, 5]}
|
||||
intensity={2}
|
||||
color="#ff20f0"
|
||||
theatreKey="Light 1"
|
||||
/>
|
||||
<e.pointLight
|
||||
position={[0, 0.5, -1]}
|
||||
distance={1}
|
||||
intensity={2}
|
||||
color="#e4be00"
|
||||
theatreKey="Light 2"
|
||||
/>
|
||||
<group position={[0, -0.9, -3]}>
|
||||
<Plane
|
||||
color="hotpink"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position-z={2}
|
||||
scale={[4, 20, 0.2]}
|
||||
theatreKey="plane1"
|
||||
/>
|
||||
<Plane
|
||||
color="#e4be00"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position-y={1}
|
||||
scale={[4.2, 0.2, 4]}
|
||||
theatreKey="plane2"
|
||||
/>
|
||||
<Plane
|
||||
color="#736fbd"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position={[-1.7, 1, 3.5]}
|
||||
scale={[0.5, 4, 4]}
|
||||
theatreKey="plane3"
|
||||
/>
|
||||
<Plane
|
||||
color="white"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position={[0, 4.5, 3]}
|
||||
scale={[2, 0.03, 4]}
|
||||
theatreKey="plane4"
|
||||
/>
|
||||
</group>
|
||||
</SheetProvider>
|
||||
</Canvas>
|
||||
)
|
||||
}
|
||||
|
||||
const project = getProject('Project')
|
||||
const sheet = project.sheet('Sheet')
|
||||
const obj = sheet.object('Obj', {str: 'some string', num: 0})
|
||||
|
||||
const container = document.getElementById('root')
|
||||
const root = ReactDOM.createRoot(container)
|
||||
root.render(<App obj={obj}>hi</App>)
|
||||
24
compatibility-tests/fixtures/vite-react18/package/.gitignore
vendored
Normal file
24
compatibility-tests/fixtures/vite-react18/package/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
12
compatibility-tests/fixtures/vite-react18/package/index.html
Normal file
12
compatibility-tests/fixtures/vite-react18/package/index.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"name": "@compat/vite-react18",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-three/drei": "^9.11.3",
|
||||
"@react-three/fiber": "^8.0.19",
|
||||
"@theatre/core": "0.0.1-COMPAT.1",
|
||||
"@theatre/r3f": "0.0.1-COMPAT.1",
|
||||
"@theatre/studio": "0.0.1-COMPAT.1",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"three": "^0.141.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.0.0",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"@vitejs/plugin-react": "^1.3.0",
|
||||
"typescript": "^4.6.3",
|
||||
"vite": "^2.9.9"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import {getProject} from '@theatre/core'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import React from 'react'
|
||||
import {Canvas} from '@react-three/fiber'
|
||||
import studio from '@theatre/studio'
|
||||
import {editable as e, SheetProvider} from '@theatre/r3f'
|
||||
import extension from '@theatre/r3f/dist/extension'
|
||||
|
||||
if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
|
||||
studio.extend(extension)
|
||||
studio.initialize({usePersistentStorage: false})
|
||||
}
|
||||
|
||||
// credit: https://codesandbox.io/s/camera-pan-nsb7f
|
||||
|
||||
function Plane({color, theatreKey, ...props}: any) {
|
||||
return (
|
||||
<e.mesh {...props} theatreKey={theatreKey}>
|
||||
<boxBufferGeometry />
|
||||
<meshStandardMaterial color={color} />
|
||||
</e.mesh>
|
||||
)
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Canvas
|
||||
gl={{preserveDrawingBuffer: true}}
|
||||
linear
|
||||
frameloop="demand"
|
||||
dpr={[1.5, 2]}
|
||||
style={{position: 'absolute', top: 0, left: 0}}
|
||||
>
|
||||
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
|
||||
{/* @ts-ignore */}
|
||||
<e.orthographicCamera makeDefault theatreKey="Camera" />
|
||||
<ambientLight intensity={0.4} />
|
||||
<e.pointLight
|
||||
position={[-10, -10, 5]}
|
||||
intensity={2}
|
||||
color="#ff20f0"
|
||||
theatreKey="Light 1"
|
||||
/>
|
||||
<e.pointLight
|
||||
position={[0, 0.5, -1]}
|
||||
distance={1}
|
||||
intensity={2}
|
||||
color="#e4be00"
|
||||
theatreKey="Light 2"
|
||||
/>
|
||||
<group position={[0, -0.9, -3]}>
|
||||
<Plane
|
||||
color="hotpink"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position-z={2}
|
||||
scale={[4, 20, 0.2]}
|
||||
theatreKey="plane1"
|
||||
/>
|
||||
<Plane
|
||||
color="#e4be00"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position-y={1}
|
||||
scale={[4.2, 0.2, 4]}
|
||||
theatreKey="plane2"
|
||||
/>
|
||||
<Plane
|
||||
color="#736fbd"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position={[-1.7, 1, 3.5]}
|
||||
scale={[0.5, 4, 4]}
|
||||
theatreKey="plane3"
|
||||
/>
|
||||
<Plane
|
||||
color="white"
|
||||
rotation-x={-Math.PI / 2}
|
||||
position={[0, 4.5, 3]}
|
||||
scale={[2, 0.03, 4]}
|
||||
theatreKey="plane4"
|
||||
/>
|
||||
</group>
|
||||
</SheetProvider>
|
||||
</Canvas>
|
||||
)
|
||||
}
|
||||
|
||||
const project = getProject('Project')
|
||||
const sheet = project.sheet('Sheet')
|
||||
const obj = sheet.object('Obj', {str: 'some string', num: 0})
|
||||
|
||||
const container = document.getElementById('root')
|
||||
const root = ReactDOM.createRoot(container)
|
||||
root.render(<App obj={obj}>hi</App>)
|
||||
1
compatibility-tests/fixtures/vite-react18/package/src/vite-env.d.ts
vendored
Normal file
1
compatibility-tests/fixtures/vite-react18/package/src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node"
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import {defineConfig} from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue