JS only example

adeira-source-id: bae94bd7aa708a34cdd086ba0be68b39dcde7346

apps/docs/pages/docs/setup/_meta.json

@@ -1,5 +1,7 @@
 {
   "overview": "Overview",
   "macos": "macOS",
-  "windows": "Windows"
+  "windows": "Windows",
+  "manual-setup": "",
+  "javascript-projects": ""
 }

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.

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
 {

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"
+}

examples/js/.triplex/provider.jsx

@@ -0,0 +1,8 @@
+export default function Provider({ children, color = "" }) {
+  return (
+    <>
+      {color && <color args={[color]} attach="background" />}
+      {children}
+    </>
+  );
+}

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"
+  }
+}

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 (
+    <group scale={scale}>
+      <mesh position={position} rotation={rotation}>
+        <boxGeometry args={[size, size, size]} />
+        <meshStandardMaterial color={color} key={color} />
+      </mesh>
+    </group>
+  );
+}
+
+export default Box;

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 (
+    <mesh position={position}>
+      <cylinderGeometry />
+      <meshStandardMaterial color={"#4be9cb"} />
+    </mesh>
+  );
+};
+
+export default Cylinder;

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 (
+    <mesh
+      castShadow={true}
+      position={position}
+      receiveShadow={true}
+      rotation={rotation}
+      scale={scale}
+    >
+      <sphereGeometry />
+      <meshStandardMaterial color={"#84f4ea"} />
+    </mesh>
+  );
+}

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 (
+    <>
+      <Box color="red" />
+      <Cylinder position={[-1.86, 0, -1.84]} />
+      <Sphere position={[2.02, 0, -1.8]} />
+      <ambientLight intensity={0.4} />
+      <pointLight intensity={10.38} position={[-1.44, 2.54, 0]} />
+    </>
+  );
+}

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": ["."]
+}

packages/create-triplex-project/templates/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "allowJs": true,
     "baseUrl": ".",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,