diff --git a/apps/docs/pages/docs/setup/_meta.json b/apps/docs/pages/docs/setup/_meta.json index 14d88ea7..8f29527e 100644 --- a/apps/docs/pages/docs/setup/_meta.json +++ b/apps/docs/pages/docs/setup/_meta.json @@ -1,5 +1,7 @@ { "overview": "Overview", "macos": "macOS", - "windows": "Windows" + "windows": "Windows", + "manual-setup": "", + "javascript-projects": "" } diff --git a/apps/docs/pages/docs/setup/javascript-projects.mdx b/apps/docs/pages/docs/setup/javascript-projects.mdx new file mode 100644 index 00000000..1fc9efca --- /dev/null +++ b/apps/docs/pages/docs/setup/javascript-projects.mdx @@ -0,0 +1,34 @@ +Triplex works best with TypeScript as the rich type information is used to +populate the editor controls, however if you're not yet using TypeScript you're +still able to use Triplex. + +## Set up config file + +In your existing project add a +[`.triplex/config.json`](/docs/api-reference/config) file: + +```json +{ + "components": ["../src/components/**/*.jsx"], + "files": ["../src/**/*.jsx"] +} +``` + +Where `"components"` is a glob pointing to custom components that can be added +to other components, and `"files"` is a glob pointing to any files you want to +open with Triplex. + +## Add type packages + +Make sure to add types to your project (even if you're not using TypeScript!) — +this will make your experience in Triplex that much better as all Three.js +primitives will have types the editor can use: + +``` +npm install @types/react @types/three +``` + +## Open your project + +You're now able to open your project with Triplex! When you do Triplex will add +a `.tsconfig.json` file to the root of your project. diff --git a/apps/docs/pages/docs/setup/manual-setup.mdx b/apps/docs/pages/docs/setup/manual-setup.mdx index 74a08f8b..b8d8b966 100644 --- a/apps/docs/pages/docs/setup/manual-setup.mdx +++ b/apps/docs/pages/docs/setup/manual-setup.mdx @@ -3,7 +3,7 @@ title: Manual Setup --- If you'd prefer to set up your project manually instead of using the "Create -project" in Triplex you can do so following this guide. +project" action in Triplex you can do so following this guide. ## Install dependencies @@ -14,8 +14,8 @@ Install `react`, `@types/react`, `three`, `@types/three`, and npm install react @types/react three @types/three @react-three/fiber ``` -Alternatively you can use your package manager of choice such as `pnpm` or -`yarn`. +Alternatively you can use your package manager of choice such as `pnpm`, `yarn`, +or `bun`. ## Configure TypeScript @@ -46,7 +46,8 @@ Open or create a `tsconfig.json` and add the following: ## Configure Triplex -Create a `.triplex/config.json` file and add the following: +Create a [`.triplex/config.json`](/docs/api-reference/config) file and add the +following: ```json { diff --git a/examples/js/.triplex/config.json b/examples/js/.triplex/config.json new file mode 100644 index 00000000..f2f66a56 --- /dev/null +++ b/examples/js/.triplex/config.json @@ -0,0 +1,6 @@ +{ + "$schema": "https://triplex.dev/config.schema.json", + "components": ["../src/geometry/**/*.jsx"], + "files": ["../src/**/*.jsx"], + "provider": "./provider.jsx" +} diff --git a/examples/js/.triplex/provider.jsx b/examples/js/.triplex/provider.jsx new file mode 100644 index 00000000..d5b76d94 --- /dev/null +++ b/examples/js/.triplex/provider.jsx @@ -0,0 +1,8 @@ +export default function Provider({ children, color = "" }) { + return ( + <> + {color && } + {children} + + ); +} diff --git a/examples/js/package.json b/examples/js/package.json new file mode 100644 index 00000000..d4b1ca25 --- /dev/null +++ b/examples/js/package.json @@ -0,0 +1,18 @@ +{ + "name": "@example/js", + "version": "0.0.0", + "private": true, + "scripts": { + "build": "echo \"Not implemented\"", + "typedef": "echo \"Not implemented\"" + }, + "dependencies": { + "@react-three/drei": "^9.56.27", + "@react-three/fiber": "^8.14.5", + "@types/react": "^18.0.0", + "@types/three": "^0.157.0", + "react": "^18.0.0", + "react-dom": "^18.0.0", + "three": "^0.157.0" + } +} diff --git a/examples/js/src/geometry/box.jsx b/examples/js/src/geometry/box.jsx new file mode 100644 index 00000000..7ccf198f --- /dev/null +++ b/examples/js/src/geometry/box.jsx @@ -0,0 +1,18 @@ +/** + * Copyright (c) Michael Dougall. All rights reserved. + * + * This source code is licensed under the GPL-3.0 license found in the LICENSE + * file in the root directory of this source tree. + */ +function Box({ color, position, rotation, scale, size = 1 }) { + return ( + + + + + + + ); +} + +export default Box; diff --git a/examples/js/src/geometry/cylinder.jsx b/examples/js/src/geometry/cylinder.jsx new file mode 100644 index 00000000..30d6981a --- /dev/null +++ b/examples/js/src/geometry/cylinder.jsx @@ -0,0 +1,18 @@ +/** + * Copyright (c) Michael Dougall. All rights reserved. + * + * This source code is licensed under the GPL-3.0 license found in the LICENSE + * file in the root directory of this source tree. + */ +import React from "react"; + +const Cylinder = ({ position = [0, 0, 0] }) => { + return ( + + + + + ); +}; + +export default Cylinder; diff --git a/examples/js/src/geometry/sphere.jsx b/examples/js/src/geometry/sphere.jsx new file mode 100644 index 00000000..12a6f315 --- /dev/null +++ b/examples/js/src/geometry/sphere.jsx @@ -0,0 +1,20 @@ +/** + * Copyright (c) Michael Dougall. All rights reserved. + * + * This source code is licensed under the GPL-3.0 license found in the LICENSE + * file in the root directory of this source tree. + */ +export default function Sphere({ position, rotation, scale }) { + return ( + + + + + ); +} diff --git a/examples/js/src/scene.jsx b/examples/js/src/scene.jsx new file mode 100644 index 00000000..44103b86 --- /dev/null +++ b/examples/js/src/scene.jsx @@ -0,0 +1,21 @@ +/** + * Copyright (c) Michael Dougall. All rights reserved. + * + * This source code is licensed under the GPL-3.0 license found in the LICENSE + * file in the root directory of this source tree. + */ +import Box from "./geometry/box"; +import Cylinder from "./geometry/cylinder"; +import Sphere from "./geometry/sphere"; + +export default function Scene() { + return ( + <> + + + + + + + ); +} diff --git a/examples/js/tsconfig.json b/examples/js/tsconfig.json new file mode 100644 index 00000000..8462d846 --- /dev/null +++ b/examples/js/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "allowJs": true, + "baseUrl": ".", + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "incremental": true, + "isolatedModules": true, + "jsx": "preserve", + "lib": ["dom", "dom.iterable", "es2022"], + "module": "esnext", + "moduleResolution": "node", + "noEmit": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "strict": true, + "types": ["@react-three/fiber"] + }, + "exclude": ["node_modules"], + "include": ["."] +} diff --git a/packages/create-triplex-project/templates/tsconfig.json b/packages/create-triplex-project/templates/tsconfig.json index af3177b7..ec2bbb48 100644 --- a/packages/create-triplex-project/templates/tsconfig.json +++ b/packages/create-triplex-project/templates/tsconfig.json @@ -1,5 +1,6 @@ { "compilerOptions": { + "allowJs": true, "baseUrl": ".", "esModuleInterop": true, "forceConsistentCasingInFileNames": true,