Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,17 @@
"three": "*"
},
"dependencies": {
"@babel/helper-plugin-utils": "^7.22.5"
"@babel/helper-plugin-utils": "^7.22.5 || ^8.0.0"
},
"devDependencies": {
"@babel/core": "^7.21.8",
Comment thread
umar-ahmed marked this conversation as resolved.
"babel-core-7": "npm:@babel/core@^7.21.8",
"@react-three/fiber": "^8.13.0",
"@types/babel__core": "^7.20.0",
"@types/babel__helper-plugin-utils": "^7.10.3",
"@types/node": "^20.1.7",
"@types/three": "^0.152.0",
"babel-core-8": "npm:@babel/core@^8.0.0",
"three": "^0.152.2",
"typescript": "^5.0.4",
"vite": "^4.3.7",
Expand Down
76 changes: 71 additions & 5 deletions src/__snapshots__/index.test.ts.snap
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`handles JSX 1`] = `
exports[`'Babel 7' > handles JSX 1`] = `
"import { Mesh as _Mesh, BoxGeometry as _BoxGeometry, MeshBasicMaterial as _MeshBasicMaterial } from \\"three\\";
import { extend as _extend } from \\"@react-three/fiber\\";
_extend({
Expand All @@ -13,7 +13,7 @@ function Box(props) {
}"
`;

exports[`handles JSX member expressions 1`] = `
exports[`'Babel 7' > handles JSX member expressions 1`] = `
"import { animated } from \\"@react-spring/three\\";
import { Mesh as _Mesh, BoxGeometry as _BoxGeometry, MeshBasicMaterial as _MeshBasicMaterial } from \\"three\\";
import { extend as _extend } from \\"@react-three/fiber\\";
Expand All @@ -27,7 +27,7 @@ function Box(props) {
}"
`;

exports[`handles dynamic expressions 1`] = `
exports[`'Babel 7' > handles dynamic expressions 1`] = `
"import { MeshBasicMaterial as _MeshBasicMaterial, MeshStandardMaterial as _MeshStandardMaterial } from \\"three\\";
import { extend as _extend } from \\"@react-three/fiber\\";
_extend({
Expand All @@ -40,7 +40,7 @@ function Material(props) {
}"
`;

exports[`handles template strings 1`] = `
exports[`'Babel 7' > handles template strings 1`] = `
"import { MeshBasicMaterial as _MeshBasicMaterial, MeshDepthMaterial as _MeshDepthMaterial, MeshDistanceMaterial as _MeshDistanceMaterial, MeshLambertMaterial as _MeshLambertMaterial, MeshMatcapMaterial as _MeshMatcapMaterial, MeshNormalMaterial as _MeshNormalMaterial, MeshPhongMaterial as _MeshPhongMaterial, MeshPhysicalMaterial as _MeshPhysicalMaterial, MeshStandardMaterial as _MeshStandardMaterial, MeshToonMaterial as _MeshToonMaterial } from \\"three\\";
import { extend as _extend } from \\"@react-three/fiber\\";
_extend({
Expand All @@ -61,7 +61,73 @@ function Material(props) {
}"
`;

exports[`removes namespaced extend calls 1`] = `
exports[`'Babel 7' > removes namespaced extend calls 1`] = `
"import * as THREE from \\"three\\";
import { extend } from \\"@react-three/fiber\\";"
`;

exports[`'Babel 8' > handles JSX 1`] = `
"import { Mesh as _Mesh, BoxGeometry as _BoxGeometry, MeshBasicMaterial as _MeshBasicMaterial } from \\"three\\";
import { extend as _extend } from \\"@react-three/fiber\\";
_extend({
Mesh: _Mesh,
BoxGeometry: _BoxGeometry,
MeshBasicMaterial: _MeshBasicMaterial
});
function Box(props) {
return <mesh {...props}> <boxGeometry /> <meshBasicMaterial /> </mesh>;
}"
`;

exports[`'Babel 8' > handles JSX member expressions 1`] = `
"import { animated } from \\"@react-spring/three\\";
import { Mesh as _Mesh, BoxGeometry as _BoxGeometry, MeshBasicMaterial as _MeshBasicMaterial } from \\"three\\";
import { extend as _extend } from \\"@react-three/fiber\\";
_extend({
Mesh: _Mesh,
BoxGeometry: _BoxGeometry,
MeshBasicMaterial: _MeshBasicMaterial
});
function Box(props) {
return <animated.mesh {...props}> <boxGeometry /> <meshBasicMaterial /> </animated.mesh>;
}"
`;

exports[`'Babel 8' > handles dynamic expressions 1`] = `
"import { MeshBasicMaterial as _MeshBasicMaterial, MeshStandardMaterial as _MeshStandardMaterial } from \\"three\\";
import { extend as _extend } from \\"@react-three/fiber\\";
_extend({
MeshBasicMaterial: _MeshBasicMaterial,
MeshStandardMaterial: _MeshStandardMaterial
});
function Material(props) {
const Comp = props.foo ? 'meshBasicMaterial' : 'meshStandardMaterial';
return <Comp color=\\"royalblue\\" />;
}"
`;

exports[`'Babel 8' > handles template strings 1`] = `
"import { MeshBasicMaterial as _MeshBasicMaterial, MeshDepthMaterial as _MeshDepthMaterial, MeshDistanceMaterial as _MeshDistanceMaterial, MeshLambertMaterial as _MeshLambertMaterial, MeshMatcapMaterial as _MeshMatcapMaterial, MeshNormalMaterial as _MeshNormalMaterial, MeshPhongMaterial as _MeshPhongMaterial, MeshPhysicalMaterial as _MeshPhysicalMaterial, MeshStandardMaterial as _MeshStandardMaterial, MeshToonMaterial as _MeshToonMaterial } from \\"three\\";
import { extend as _extend } from \\"@react-three/fiber\\";
_extend({
MeshBasicMaterial: _MeshBasicMaterial,
MeshDepthMaterial: _MeshDepthMaterial,
MeshDistanceMaterial: _MeshDistanceMaterial,
MeshLambertMaterial: _MeshLambertMaterial,
MeshMatcapMaterial: _MeshMatcapMaterial,
MeshNormalMaterial: _MeshNormalMaterial,
MeshPhongMaterial: _MeshPhongMaterial,
MeshPhysicalMaterial: _MeshPhysicalMaterial,
MeshStandardMaterial: _MeshStandardMaterial,
MeshToonMaterial: _MeshToonMaterial
});
function Material(props) {
const Comp = \`mesh\${props.type}Material\`;
return <Comp color=\\"royalblue\\" />;
}"
`;

exports[`'Babel 8' > removes namespaced extend calls 1`] = `
"import * as THREE from \\"three\\";
import { extend } from \\"@react-three/fiber\\";"
`;
143 changes: 77 additions & 66 deletions src/index.test.ts
Original file line number Diff line number Diff line change
@@ -1,77 +1,88 @@
import * as babel from '@babel/core'
import { it, expect } from 'vitest'
import * as babel7 from 'babel-core-7'
import * as babel8 from 'babel-core-8'
import { it, expect, describe } from 'vitest'
import plugin from '../src/index'

function transform(code: string): string {
return babel.transform(code.replace(/\s+/g, ' '), { plugins: [plugin] })!.code!
function transformWith(babelCore: typeof babel7, code: string): string {
return babelCore.transformSync(code.replace(/\s+/g, ' '), { plugins: [plugin] })!.code!
}

it('removes namespaced extend calls', () => {
const code = transform(
`
import * as THREE from "three";
import { extend } from "@react-three/fiber";
describe.each([
{ name: 'Babel 7', babel: babel7 },
{ name: 'Babel 8', babel: babel8 as unknown as typeof babel7 },
])('$name', ({ babel }) => {
it('removes namespaced extend calls', () => {
const code = transformWith(
babel,
`
import * as THREE from "three";
import { extend } from "@react-three/fiber";

extend(THREE);
`,
)
expect(code).toMatchSnapshot()
})
extend(THREE);
`,
)
expect(code).toMatchSnapshot()
})

it('handles JSX', () => {
const code = transform(
`
function Box(props) {
return (
<mesh {...props}>
<boxGeometry />
<meshBasicMaterial />
</mesh>
);
}
`,
)
expect(code).toMatchSnapshot()
})
it('handles JSX', () => {
const code = transformWith(
babel,
`
function Box(props) {
return (
<mesh {...props}>
<boxGeometry />
<meshBasicMaterial />
</mesh>
);
}
`,
)
expect(code).toMatchSnapshot()
})

it('handles JSX member expressions', () => {
const code = transform(
`
import { animated } from "@react-spring/three";
it('handles JSX member expressions', () => {
const code = transformWith(
babel,
`
import { animated } from "@react-spring/three";

function Box(props) {
return (
<animated.mesh {...props}>
<boxGeometry />
<meshBasicMaterial />
</animated.mesh>
);
}
`,
)
expect(code).toMatchSnapshot()
})
function Box(props) {
return (
<animated.mesh {...props}>
<boxGeometry />
<meshBasicMaterial />
</animated.mesh>
);
}
`,
)
expect(code).toMatchSnapshot()
})

it('handles dynamic expressions', () => {
const code = transform(
`
function Material(props) {
const Comp = props.foo ? 'meshBasicMaterial' : 'meshStandardMaterial';
return <Comp color="royalblue" />;
}
`,
)
expect(code).toMatchSnapshot()
})
it('handles dynamic expressions', () => {
const code = transformWith(
babel,
`
function Material(props) {
const Comp = props.foo ? 'meshBasicMaterial' : 'meshStandardMaterial';
return <Comp color="royalblue" />;
}
`,
)
expect(code).toMatchSnapshot()
})

it('handles template strings', () => {
const code = transform(
`
function Material(props) {
const Comp = \`mesh\$\{props.type\}Material\`;
return <Comp color="royalblue" />;
}
`,
)
expect(code).toMatchSnapshot()
it('handles template strings', () => {
const code = transformWith(
babel,
`
function Material(props) {
const Comp = \`mesh\$\{props.type\}Material\`;
return <Comp color="royalblue" />;
}
`,
)
expect(code).toMatchSnapshot()
})
})
2 changes: 1 addition & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ let lastImport: NodePath | null = null
* ```
*/
export default declare((api) => {
api.assertVersion(7)
api.assertVersion("^7.0.0-0 || ^8.0.0-0")
return {
manipulateOptions(_, options) {
options.plugins.push('jsx')
Expand Down
Loading
Loading