From 6e5ccf5044d118bceaefc0d8e88c0b65039c8260 Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Mon, 12 May 2025 09:57:39 +1000 Subject: [PATCH 01/29] feat: add vscode extension suggestion injection point --- packages/react-three-create/src/index.ts | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/react-three-create/src/index.ts b/packages/react-three-create/src/index.ts index c6132ea..778ea58 100644 --- a/packages/react-three-create/src/index.ts +++ b/packages/react-three-create/src/index.ts @@ -63,6 +63,7 @@ export type CodeInjectionLocation = | 'readme-end' | 'readme-libraries' | 'readme-commands' + | 'vscode-extension-suggestion' export type Generator = { get options(): GenerateOptions @@ -113,6 +114,7 @@ export function generate(options: GenerateOptions) { const codeSnippets: Partial>> = { import: [`import { Canvas } from "@react-three/fiber"`], 'vite-config-import': ["import react from '@vitejs/plugin-react'"], + 'vscode-extension-suggestion': [], } const name = clonedOptions.name ?? 'react-three-app' @@ -167,8 +169,6 @@ export function generate(options: GenerateOptions) { generator.inject(location, code) } - //TODO: add triplex recommendation - files['vite.config.js'] = { type: 'text', content: [ @@ -262,6 +262,19 @@ export function generate(options: GenerateOptions) { files[`src/app.tsx`] = { type: 'text', content: appCode } files[`index.html`] = { type: 'text', content: indexHtml } + if (codeSnippets['vscode-extension-suggestion']?.length) { + files['.vscode/extensions.json'] = { + type: 'text', + content: JSON.stringify( + { + recommendations: codeSnippets['vscode-extension-suggestion'], + }, + null, + 2, + ), + } + } + if (clonedOptions.language === 'javascript') { //TODO: transpile tsx? to jsx? files} } From ae00b02c39c003888a8c11f30e24cc7d42798618 Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Mon, 12 May 2025 10:21:35 +1000 Subject: [PATCH 02/29] chore: bootstrap triplex generator --- packages/react-three-create/src/index.ts | 3 +++ .../react-three-create/src/integrations/triplex.ts | 11 +++++++++++ 2 files changed, 14 insertions(+) create mode 100644 packages/react-three-create/src/integrations/triplex.ts diff --git a/packages/react-three-create/src/index.ts b/packages/react-three-create/src/index.ts index 778ea58..8c07fef 100644 --- a/packages/react-three-create/src/index.ts +++ b/packages/react-three-create/src/index.ts @@ -11,6 +11,7 @@ import { generateRapier, GenerateRapierOptions } from './integrations/rapier.js' import { generateUikit, GenerateUikitOptions } from './integrations/uikit.js' import { generateXr, GenerateXrOptions } from './integrations/xr.js' import { generateZustand, GenerateZustandOptions } from './integrations/zustand.js' +import { generateTriplex, GenerateTriplexOptions } from './integrations/triplex.js' import { merge } from './merge.js' export type GenerateOptions = { @@ -26,6 +27,7 @@ export type GenerateOptions = { offscreen?: GenerateOffscreenOptions postprocessing?: GeneratePostprocessingOptions rapier?: GenerateRapierOptions + triplex?: GenerateTriplexOptions uikit?: GenerateUikitOptions xr?: GenerateXrOptions zustand?: GenerateZustandOptions @@ -164,6 +166,7 @@ export function generate(options: GenerateOptions) { generateZustand(generator, clonedOptions.zustand) generateFiber(generator, clonedOptions.fiber) generateGithubPages(generator, clonedOptions.githubPages) + generateTriplex(generator, clonedOptions.triplex) for (const { code, location } of clonedOptions.injections ?? []) { generator.inject(location, code) diff --git a/packages/react-three-create/src/integrations/triplex.ts b/packages/react-three-create/src/integrations/triplex.ts new file mode 100644 index 0000000..bdd45f0 --- /dev/null +++ b/packages/react-three-create/src/integrations/triplex.ts @@ -0,0 +1,11 @@ +import type { Generator } from '../index.js' + +export type GenerateTriplexOptions = {} | boolean + +export function generateTriplex(generator: Generator, options: GenerateTriplexOptions | undefined) { + if (options == null) { + return + } + + generator.inject('vscode-extension-suggestion', 'trytriplex.triplex-vsce') +} From 048542ac2d99594860763ee399f2a6f92a346819 Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Mon, 12 May 2025 10:26:55 +1000 Subject: [PATCH 03/29] feat: add tools to readme --- packages/react-three-create/src/index.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/react-three-create/src/index.ts b/packages/react-three-create/src/index.ts index 8c07fef..7598f7a 100644 --- a/packages/react-three-create/src/index.ts +++ b/packages/react-three-create/src/index.ts @@ -64,6 +64,7 @@ export type CodeInjectionLocation = | 'readme-start' | 'readme-end' | 'readme-libraries' + | 'readme-tools' | 'readme-commands' | 'vscode-extension-suggestion' @@ -116,7 +117,6 @@ export function generate(options: GenerateOptions) { const codeSnippets: Partial>> = { import: [`import { Canvas } from "@react-three/fiber"`], 'vite-config-import': ["import react from '@vitejs/plugin-react'"], - 'vscode-extension-suggestion': [], } const name = clonedOptions.name ?? 'react-three-app' @@ -227,11 +227,15 @@ export function generate(options: GenerateOptions) { `The following libraries are used - checkout the linked docs to learn more`, ...(codeSnippets['readme-libraries'] ?? []).map((library) => `- ${library}`), '\n', + codeSnippets['readme-tools'] && `## Tools`, + ...(codeSnippets['readme-tools'] ?? []).map((tool) => `- ${tool}`), + codeSnippets['readme-tools'] && `\n`, `## Development Commands`, ...(codeSnippets['readme-commands'] ?? []).map((command) => `- ${command}`), - '\n', ...(codeSnippets['readme-end'] ?? []), - ].join('\n'), + ] + .filter(Boolean) + .join('\n'), } codeSnippets['dom-end']?.reverse() From 4b92d4f949e0b62745e4c9ea90dfd120b6b584d0 Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Mon, 12 May 2025 10:28:21 +1000 Subject: [PATCH 04/29] chore: update --- packages/react-three-create/src/integrations/triplex.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-three-create/src/integrations/triplex.ts b/packages/react-three-create/src/integrations/triplex.ts index bdd45f0..2118cb8 100644 --- a/packages/react-three-create/src/integrations/triplex.ts +++ b/packages/react-three-create/src/integrations/triplex.ts @@ -8,4 +8,8 @@ export function generateTriplex(generator: Generator, options: GenerateTriplexOp } generator.inject('vscode-extension-suggestion', 'trytriplex.triplex-vsce') + generator.inject( + 'readme-tools', + '[Triplex](https://triplex.dev) - Build the 2D and 3D web without coding. Your visual workspace for React / Three Fiber.', + ) } From 1e1123c528fae6096b6cdfc33c73b722caa18475 Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Mon, 12 May 2025 10:34:06 +1000 Subject: [PATCH 05/29] feat: add triplex cli --- packages/react-three-create/src/cli.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/react-three-create/src/cli.ts b/packages/react-three-create/src/cli.ts index 419b843..dbcd459 100644 --- a/packages/react-three-create/src/cli.ts +++ b/packages/react-three-create/src/cli.ts @@ -86,7 +86,8 @@ async function promptForOptions(name: string | undefined): Promise @@ -142,6 +144,7 @@ async function promptForOptions(name: string | undefined): Promise', 'specify package manager (e.g. npm, yarn, pnpm)') .option( '--skip-setup', @@ -210,6 +215,7 @@ async function main() { offscreen: options.offscreen ? {} : undefined, zustand: options.zustand ? {} : undefined, koota: options.koota ? {} : undefined, + triplex: options.triplex, packageManager: options['package-manager'], skipSetup: options['skip-setup'], } From 1bd7e9c87f498b1ba7334d8545bde521f35e0492 Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Mon, 12 May 2025 11:00:57 +1000 Subject: [PATCH 06/29] feat: add tools to three homepage --- apps/react-three-org/src/app.tsx | 67 +++++----- .../src/components/install-bar.tsx | 44 +++++++ .../src/components/project-configurator.tsx | 10 +- apps/react-three-org/src/lib/packages.ts | 114 ++++++++++-------- 4 files changed, 147 insertions(+), 88 deletions(-) create mode 100644 apps/react-three-org/src/components/install-bar.tsx diff --git a/apps/react-three-org/src/app.tsx b/apps/react-three-org/src/app.tsx index 78298c0..5774fbe 100644 --- a/apps/react-three-org/src/app.tsx +++ b/apps/react-three-org/src/app.tsx @@ -4,11 +4,12 @@ import { useQuery } from '@tanstack/react-query' import { PackageCard } from '@/components/package-card' import { ProjectConfigurator } from '@/components/project-configurator' import { NavBar } from '@/components/nav-bar' -import { packages } from '@/lib/packages' +import { packages, tools } from '@/lib/packages' import { BackgroundAnimation } from '@/components/background-animation' import { Button } from './components/ui/button.js' -import { CheckSquare, PackageIcon, X } from 'lucide-react' +import { CheckSquare, CogIcon, PackageIcon, X } from 'lucide-react' import { Toaster } from 'sonner' +import { SelectionSection } from './components/install-bar.js' const searchParams = new URLSearchParams(location.search) @@ -18,6 +19,8 @@ const sessionAccessToken = sessionStorage.getItem(sessionAccessTokenKey) export function App() { const [state, setState] = useState(() => searchParams.get('state')) const [selectedPackages, setSelectedPackages] = useState([]) + const [selectedTools, setSelectedTools] = useState([]) + if (state != null) { return } @@ -43,34 +46,12 @@ export function App() { {/* Visual separator using space instead of a border */}
-
-
-

- - Select packages to include in your project -

- -
-
+
{packages.map((pkg) => ( @@ -83,15 +64,37 @@ export function App() { ))}
+ {/* Visual separator using space instead of a border */} +
+ + + +
+ {tools.map((pkg) => ( + { + setSelectedTools((prev) => + prev.includes(pkg.id) ? prev.filter((id) => id !== pkg.id) : [...prev, pkg.id], + ) + }} + /> + ))} +
+ { const integrations: any = {} - for (const integration of selectedPackages) { + const selections = [...selectedPackages, ...selectedTools] + for (const integration of selections) { integrations[integration] = true } + setState(btoa(JSON.stringify(integrations))) }} - selectedPackages={selectedPackages} + selections={[...selectedPackages, ...selectedTools]} /> React.ReactNode + options: Package[] + value: string[] + onChange: (value: string[]) => void +} + +export function SelectionSection({ value, onChange, options, icon: Icon }: SelectionSectionProps) { + return ( +
+
+

+ + Select tools to include in your project +

+ +
+
+ ) +} diff --git a/apps/react-three-org/src/components/project-configurator.tsx b/apps/react-three-org/src/components/project-configurator.tsx index ae17c22..4e83380 100644 --- a/apps/react-three-org/src/components/project-configurator.tsx +++ b/apps/react-three-org/src/components/project-configurator.tsx @@ -5,12 +5,14 @@ import JSZip from 'jszip' import { toast } from 'sonner' interface ProjectConfiguratorProps { - selectedPackages: string[] + selections: string[] createGithubRepo: () => void } -export function ProjectConfigurator({ selectedPackages, createGithubRepo }: ProjectConfiguratorProps) { - const command = `npm create @react-three ${selectedPackages.length > 0 ? "-- " : ""}${selectedPackages.map((id) => `--${id}`).join(' ')}` +export function ProjectConfigurator({ selections, createGithubRepo }: ProjectConfiguratorProps) { + const command = `npm create @react-three ${selections.length > 0 ? '-- ' : ''}${selections + .map((id) => `--${id}`) + .join(' ')}` const copyToClipboard = async () => { try { @@ -41,7 +43,7 @@ export function ProjectConfigurator({ selectedPackages, createGithubRepo }: Proj onClick={async () => { const element = document.createElement('a') const options: any = {} - for (const selectedPackage of selectedPackages) { + for (const selectedPackage of selections) { options[selectedPackage] = true } const files = generate(options) diff --git a/apps/react-three-org/src/lib/packages.ts b/apps/react-three-org/src/lib/packages.ts index 192167f..8200f52 100644 --- a/apps/react-three-org/src/lib/packages.ts +++ b/apps/react-three-org/src/lib/packages.ts @@ -5,79 +5,89 @@ export interface Package { githubUrl: string docsUrl: string } + export const packages: Package[] = [ { - id: "drei", - name: "react-three/drei", + id: 'drei', + name: 'react-three/drei', description: - "A growing collection of useful helpers and fully functional, ready-made abstractions for @react-three/fiber.", - githubUrl: "https://github.com/pmndrs/drei", - docsUrl: "https://docs.pmnd.rs/drei", + 'A growing collection of useful helpers and fully functional, ready-made abstractions for @react-three/fiber.', + githubUrl: 'https://github.com/pmndrs/drei', + docsUrl: 'https://docs.pmnd.rs/drei', }, { - id: "handle", - name: "react-three/handle", + id: 'handle', + name: 'react-three/handle', description: - "A cross-platform handle system for react-three-fiber. Create interactive controls and handles for your 3D objects.", - githubUrl: "https://github.com/pmndrs/xr/tree/main/packages/react/handle", - docsUrl: "https://pmndrs.github.io/xr/docs/handles/introduction", + 'A cross-platform handle system for react-three-fiber. Create interactive controls and handles for your 3D objects.', + githubUrl: 'https://github.com/pmndrs/xr/tree/main/packages/react/handle', + docsUrl: 'https://pmndrs.github.io/xr/docs/handles/introduction', }, { - id: "koota", - name: "koota", - description: - "An ECS-based state management library optimized for real-time apps, games, and XR experiences.", - githubUrl: "https://github.com/pmndrs/koota", - docsUrl: "https://github.com/pmndrs/koota", + id: 'koota', + name: 'koota', + description: 'An ECS-based state management library optimized for real-time apps, games, and XR experiences.', + githubUrl: 'https://github.com/pmndrs/koota', + docsUrl: 'https://github.com/pmndrs/koota', }, { - id: "leva", - name: "leva", - description: "A GUI panel for React. Create controls and debug your react-three-fiber scene with ease.", - githubUrl: "https://github.com/pmndrs/leva", - docsUrl: "https://github.com/pmndrs/leva", + id: 'leva', + name: 'leva', + description: 'A GUI panel for React. Create controls and debug your react-three-fiber scene with ease.', + githubUrl: 'https://github.com/pmndrs/leva', + docsUrl: 'https://github.com/pmndrs/leva', }, { - id: "offscreen", - name: "react-three/offscreen", - description: "Offscreen rendering for react-three-fiber. Render your scene in a worker thread for better performance.", - githubUrl: "https://github.com/pmndrs/react-three-offscreen", - docsUrl: "https://github.com/pmndrs/react-three-offscreen", + id: 'offscreen', + name: 'react-three/offscreen', + description: + 'Offscreen rendering for react-three-fiber. Render your scene in a worker thread for better performance.', + githubUrl: 'https://github.com/pmndrs/react-three-offscreen', + docsUrl: 'https://github.com/pmndrs/react-three-offscreen', }, { - id: "postprocessing", - name: "react-three/postprocessing", - description: "Post-processing effects for react-three-fiber, using react-postprocessing.", - githubUrl: "https://github.com/pmndrs/react-postprocessing", - docsUrl: "https://react-postprocessing.docs.pmnd.rs/", + id: 'postprocessing', + name: 'react-three/postprocessing', + description: 'Post-processing effects for react-three-fiber, using react-postprocessing.', + githubUrl: 'https://github.com/pmndrs/react-postprocessing', + docsUrl: 'https://react-postprocessing.docs.pmnd.rs/', }, { - id: "rapier", - name: "react-three/rapier", - description: "Physics based hooks for react-three-fiber using rapier.js.", - githubUrl: "https://github.com/pmndrs/react-three-rapier", - docsUrl: "https://github.com/pmndrs/react-three-rapier", + id: 'rapier', + name: 'react-three/rapier', + description: 'Physics based hooks for react-three-fiber using rapier.js.', + githubUrl: 'https://github.com/pmndrs/react-three-rapier', + docsUrl: 'https://github.com/pmndrs/react-three-rapier', }, { - id: "uikit", - name: "react-three/uikit", - description: "UI components for react-three-fiber. Build interactive interfaces in 3D space.", - githubUrl: "https://github.com/pmndrs/uikit", - docsUrl: "https://pmndrs.github.io/uikit/docs/", + id: 'uikit', + name: 'react-three/uikit', + description: 'UI components for react-three-fiber. Build interactive interfaces in 3D space.', + githubUrl: 'https://github.com/pmndrs/uikit', + docsUrl: 'https://pmndrs.github.io/uikit/docs/', }, { - id: "xr", - name: "react-three/xr", - description: - "VR/AR support for react-three-fiber. Build cross-platform XR applications with React.", - githubUrl: "https://github.com/pmndrs/xr", - docsUrl: "https://pmndrs.github.io/xr/docs/", + id: 'xr', + name: 'react-three/xr', + description: 'VR/AR support for react-three-fiber. Build cross-platform XR applications with React.', + githubUrl: 'https://github.com/pmndrs/xr', + docsUrl: 'https://pmndrs.github.io/xr/docs/', }, { - id: "zustand", - name: "zustand", - description: "A small, fast and scalable state-management solution. Perfect for react-three-fiber applications.", - githubUrl: "https://github.com/pmndrs/zustand", - docsUrl: "https://zustand.docs.pmnd.rs/", + id: 'zustand', + name: 'zustand', + description: 'A small, fast and scalable state-management solution. Perfect for react-three-fiber applications.', + githubUrl: 'https://github.com/pmndrs/zustand', + docsUrl: 'https://zustand.docs.pmnd.rs/', + }, +] + +export const tools: Package[] = [ + { + id: 'triplex', + name: 'Triplex', + description: 'Build the 2D and 3D web without coding. Your visual workspace for React / Three Fiber.', + githubUrl: 'https://github.com/try-triplex/triplex', + docsUrl: 'https://triplex.dev/docs/get-started', }, ] From 1d654ddabcd6a6011f7e042368ee200f00d690e1 Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Mon, 12 May 2025 11:04:07 +1000 Subject: [PATCH 07/29] feat: add label prop --- apps/react-three-org/src/app.tsx | 9 ++++++++- apps/react-three-org/src/components/install-bar.tsx | 5 +++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/apps/react-three-org/src/app.tsx b/apps/react-three-org/src/app.tsx index 5774fbe..6a62cda 100644 --- a/apps/react-three-org/src/app.tsx +++ b/apps/react-three-org/src/app.tsx @@ -49,6 +49,7 @@ export function App() { @@ -67,7 +68,13 @@ export function App() { {/* Visual separator using space instead of a border */}
- +
{tools.map((pkg) => ( diff --git a/apps/react-three-org/src/components/install-bar.tsx b/apps/react-three-org/src/components/install-bar.tsx index d94c762..3f5d51b 100644 --- a/apps/react-three-org/src/components/install-bar.tsx +++ b/apps/react-three-org/src/components/install-bar.tsx @@ -8,9 +8,10 @@ interface SelectionSectionProps { options: Package[] value: string[] onChange: (value: string[]) => void + label: string } -export function SelectionSection({ value, onChange, options, icon: Icon }: SelectionSectionProps) { +export function SelectionSection({ label, value, onChange, options, icon: Icon }: SelectionSectionProps) { return (
@@ -29,7 +30,7 @@ export function SelectionSection({ value, onChange, options, icon: Icon }: Selec onChange(options.map((pkg) => pkg.id)) } }} - aria-label={value.length === options.length ? 'Deselect all tools' : 'Select all tools'} + aria-label={value.length === options.length ? `Deselect all ${label}` : `Select all ${label}`} > {value.length === options.length ? ( From 241bdd4b06e6faf67f86338630c3c720070107e5 Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Mon, 12 May 2025 11:05:26 +1000 Subject: [PATCH 08/29] chore: rename --- apps/react-three-org/src/app.tsx | 5 ++--- .../components/{install-bar.tsx => selection-section.tsx} | 0 2 files changed, 2 insertions(+), 3 deletions(-) rename apps/react-three-org/src/components/{install-bar.tsx => selection-section.tsx} (100%) diff --git a/apps/react-three-org/src/app.tsx b/apps/react-three-org/src/app.tsx index 6a62cda..fa2ea79 100644 --- a/apps/react-three-org/src/app.tsx +++ b/apps/react-three-org/src/app.tsx @@ -6,10 +6,9 @@ import { ProjectConfigurator } from '@/components/project-configurator' import { NavBar } from '@/components/nav-bar' import { packages, tools } from '@/lib/packages' import { BackgroundAnimation } from '@/components/background-animation' -import { Button } from './components/ui/button.js' -import { CheckSquare, CogIcon, PackageIcon, X } from 'lucide-react' +import { CogIcon, PackageIcon } from 'lucide-react' import { Toaster } from 'sonner' -import { SelectionSection } from './components/install-bar.js' +import { SelectionSection } from './components/selection-section.js' const searchParams = new URLSearchParams(location.search) diff --git a/apps/react-three-org/src/components/install-bar.tsx b/apps/react-three-org/src/components/selection-section.tsx similarity index 100% rename from apps/react-three-org/src/components/install-bar.tsx rename to apps/react-three-org/src/components/selection-section.tsx From 1f1038f9dda14e4bc844ac35ffc93c3afcbcbdbe Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Mon, 12 May 2025 11:17:25 +1000 Subject: [PATCH 09/29] fix: label --- apps/react-three-org/src/components/selection-section.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/react-three-org/src/components/selection-section.tsx b/apps/react-three-org/src/components/selection-section.tsx index 3f5d51b..ff6d6b7 100644 --- a/apps/react-three-org/src/components/selection-section.tsx +++ b/apps/react-three-org/src/components/selection-section.tsx @@ -17,7 +17,7 @@ export function SelectionSection({ label, value, onChange, options, icon: Icon }

- Select tools to include in your project + Select {label} to include in your project

diff --git a/apps/react-three-org/src/components/selection-section.tsx b/apps/react-three-org/src/components/selection-section.tsx index ff6d6b7..e2425f1 100644 --- a/apps/react-three-org/src/components/selection-section.tsx +++ b/apps/react-three-org/src/components/selection-section.tsx @@ -3,15 +3,21 @@ import { Button } from './ui/button' import { Package } from '../lib/packages' import { CheckSquare, X } from 'lucide-react' -interface SelectionSectionProps { +interface SelectionSectionProps { icon: (props: { className?: string }) => React.ReactNode options: Package[] - value: string[] - onChange: (value: string[]) => void + value: TOption[] + onChange: (value: TOption[]) => void label: string } -export function SelectionSection({ label, value, onChange, options, icon: Icon }: SelectionSectionProps) { +export function SelectionSection({ + label, + value, + onChange, + options, + icon: Icon, +}: SelectionSectionProps) { return (
@@ -27,7 +33,7 @@ export function SelectionSection({ label, value, onChange, options, icon: Icon } if (options.length === value.length) { onChange([]) } else { - onChange(options.map((pkg) => pkg.id)) + onChange(options.map((pkg) => pkg.id as TOption)) } }} aria-label={value.length === options.length ? `Deselect all ${label}` : `Select all ${label}`} diff --git a/apps/react-three-org/src/lib/packages.ts b/apps/react-three-org/src/lib/packages.ts index 8200f52..431cfd1 100644 --- a/apps/react-three-org/src/lib/packages.ts +++ b/apps/react-three-org/src/lib/packages.ts @@ -6,7 +6,7 @@ export interface Package { docsUrl: string } -export const packages: Package[] = [ +export const packages = [ { id: 'drei', name: 'react-three/drei', @@ -80,9 +80,9 @@ export const packages: Package[] = [ githubUrl: 'https://github.com/pmndrs/zustand', docsUrl: 'https://zustand.docs.pmnd.rs/', }, -] +] as const satisfies Package[] -export const tools: Package[] = [ +export const tools = [ { id: 'triplex', name: 'Triplex', @@ -90,4 +90,8 @@ export const tools: Package[] = [ githubUrl: 'https://github.com/try-triplex/triplex', docsUrl: 'https://triplex.dev/docs/get-started', }, -] +] as const satisfies Package[] + +export type ToolIDs = (typeof tools)[number]['id'] + +export type PackageIDs = (typeof packages)[number]['id'] From dd018e84796783d8104f9b120205300be93c9383 Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Mon, 12 May 2025 20:06:21 +1000 Subject: [PATCH 18/29] feat: add uikit theme switcher --- .../integrations/__tests__/triplex.test.ts | 84 ++++++++++++++++++- .../src/integrations/triplex.ts | 80 ++++++++++++++---- packages/react-three-create/src/lib/array.ts | 11 +++ 3 files changed, 154 insertions(+), 21 deletions(-) create mode 100644 packages/react-three-create/src/lib/array.ts diff --git a/packages/react-three-create/src/integrations/__tests__/triplex.test.ts b/packages/react-three-create/src/integrations/__tests__/triplex.test.ts index 133975e..a96e1c9 100644 --- a/packages/react-three-create/src/integrations/__tests__/triplex.test.ts +++ b/packages/react-three-create/src/integrations/__tests__/triplex.test.ts @@ -22,6 +22,7 @@ describe('triplex integration', () => { ".triplex/providers.tsx", { "content": " + import { type ReactNode } from "react"; @@ -32,7 +33,8 @@ describe('triplex integration', () => { * * See: https://triplex.dev/docs/building-your-scene/providers#global-provider */ - export function GlobalProvider({ children, }: { children: React.ReactNode; }) { + export function GlobalProvider({ children, }: { children: ReactNode; }) { + return ( <> @@ -48,7 +50,78 @@ describe('triplex integration', () => { * * See: https://triplex.dev/docs/building-your-scene/providers#canvas-provider */ - export function CanvasProvider({ children, }: { children: React.ReactNode; }) { + export function CanvasProvider({ children, }: { children: ReactNode; }) { + + return ( + <> + + {children} + + ); + } + ", + "type": "text", + }, + ] + `) + }) + + it('should generate uikit color mode switcher', () => { + const addFile = vi.fn() + + generateTriplex( + { + configureVite: vi.fn(), + options: { uikit: true }, + replace: vi.fn(), + addDependency: vi.fn(), + addFile, + inject: vi.fn(), + }, + {}, + ) + + expect(addFile.mock.calls[0]).toMatchInlineSnapshot(` + [ + ".triplex/providers.tsx", + { + "content": " + import { type ReactNode, useLayoutEffect } from "react"; + import { setPreferredColorScheme } from "@react-three/uikit" + + + /** + * The global provider is rendered at the root of your application, + * use it to set up global configuration like themes. + * Props defined on this component appear as controls inside Triplex. + * + * See: https://triplex.dev/docs/building-your-scene/providers#global-provider + */ + export function GlobalProvider({ children, colorMode = "light" }: { children: ReactNode; colorMode?: "light" | "dark" }) { + + useLayoutEffect(() => { + + setPreferredColorScheme(colorMode); + + }, [colorMode]); + + return ( + <> + + {children} + + ); + } + + /** + * The canvas provider is rendered as a child inside the React Three Fiber canvas, + * use it to set up canvas specific configuration like post-processing and physics. + * Props defined on this component appear as controls inside Triplex. + * + * See: https://triplex.dev/docs/building-your-scene/providers#canvas-provider + */ + export function CanvasProvider({ children, }: { children: ReactNode; }) { + return ( <> @@ -83,6 +156,7 @@ describe('triplex integration', () => { ".triplex/providers.tsx", { "content": " + import { type ReactNode } from "react"; import { Bloom, DepthOfField, EffectComposer } from "@react-three/postprocessing"; import { Physics } from "@react-three/rapier"; @@ -94,7 +168,8 @@ describe('triplex integration', () => { * * See: https://triplex.dev/docs/building-your-scene/providers#global-provider */ - export function GlobalProvider({ children, }: { children: React.ReactNode; }) { + export function GlobalProvider({ children, }: { children: ReactNode; }) { + return ( <> @@ -110,7 +185,8 @@ describe('triplex integration', () => { * * See: https://triplex.dev/docs/building-your-scene/providers#canvas-provider */ - export function CanvasProvider({ children, physicsEnabled = false, debugPhysics = true, postProcessingEnabled = true }: { children: React.ReactNode; physicsEnabled?: boolean; debugPhysics?: boolean; postProcessingEnabled?: boolean }) { + export function CanvasProvider({ children, physicsEnabled = false, debugPhysics = true, postProcessingEnabled = true }: { children: ReactNode; physicsEnabled?: boolean; debugPhysics?: boolean; postProcessingEnabled?: boolean }) { + return ( <> diff --git a/packages/react-three-create/src/integrations/triplex.ts b/packages/react-three-create/src/integrations/triplex.ts index 8c788cc..0ddb51b 100644 --- a/packages/react-three-create/src/integrations/triplex.ts +++ b/packages/react-three-create/src/integrations/triplex.ts @@ -1,10 +1,12 @@ import type { Generator } from '../index.js' +import { unique } from '../lib/array.js' export type GenerateTriplexOptions = {} | boolean export type PropValue = { - declaredPropName: string declaredPropDefaultValue: unknown + declaredPropName: string + declaredPropType: string propName: string propValue: string } @@ -13,13 +15,19 @@ export type ProviderDefinition = Record< string, | { component: string - type: 'wrapped' + type: 'wrapped-jsx' + import: string + props?: PropValue[] + } + | { + code: string + type: 'inline-jsx' import: string props?: PropValue[] } | { code: string - type: 'inline' + type: 'layout-effect' import: string props?: PropValue[] } @@ -28,10 +36,26 @@ export type ProviderDefinition = Record< function generateProvidersModule(generator: Generator): string { const canvasProviders: (keyof typeof providerDefs)[] = [] const globalProviders: (keyof typeof providerDefs)[] = [] - const providerDefs = { + const providerDefs: ProviderDefinition = { + uikit: { + type: 'layout-effect', + props: [ + { + declaredPropDefaultValue: '"light"', + declaredPropName: 'colorMode', + propName: 'colorMode', + propValue: 'colorMode', + declaredPropType: '"light" | "dark"', + }, + ], + code: ` + setPreferredColorScheme(colorMode); + `, + import: 'import { setPreferredColorScheme } from "@react-three/uikit"', + }, rapier: { component: 'Physics', - type: 'wrapped', + type: 'wrapped-jsx', import: 'import { Physics } from "@react-three/rapier";', props: [ { @@ -39,17 +63,19 @@ function generateProvidersModule(generator: Generator): string { declaredPropName: 'physicsEnabled', propName: 'paused', propValue: '!physicsEnabled', + declaredPropType: 'boolean', }, { declaredPropDefaultValue: true, declaredPropName: 'debugPhysics', propName: 'debug', propValue: 'debugPhysics', + declaredPropType: 'boolean', }, ], }, postprocessing: { - type: 'inline', + type: 'inline-jsx', code: ` providerDefs[provider]) - const providerProps = resolvedProviders.flatMap((provider) => provider.props) + const resolvedProviders = providers.map((provider) => providerDefs[provider]!) + const providerProps = resolvedProviders.flatMap((provider) => provider.props || []) const providerImports = resolvedProviders.flatMap((provider) => provider.import) - const wrappedComponents = resolvedProviders.filter((provider) => provider.type === 'wrapped') - const inlineComponents = resolvedProviders.filter((provider) => provider.type === 'inline') + const wrappedComponents = resolvedProviders.filter((provider) => provider.type === 'wrapped-jsx') + const inlineComponents = resolvedProviders.filter((provider) => provider.type === 'inline-jsx') + const layoutEffects = resolvedProviders.filter((provider) => provider.type === 'layout-effect') const declaredProps = providerProps .map((prop) => `${prop.declaredPropName} = ${prop.declaredPropDefaultValue}`) .join(', ') - const declaredTypes = providerProps - .map((prop) => `${prop.declaredPropName}?: ${typeof prop.declaredPropDefaultValue}`) - .join('; ') + const declaredTypes = providerProps.map((prop) => `${prop.declaredPropName}?: ${prop.declaredPropType}`).join('; ') + const reactImports: string[] = ['type ReactNode'] + + if (layoutEffects.length) { + reactImports.push('useLayoutEffect') + } return { + reactImports, imports: providerImports, code: ` /** @@ -106,12 +142,21 @@ ${jsdoc .map((line) => ` * ${line}`) .join('\n')} */ - export function ${name}({ children, ${declaredProps} }: { children: React.ReactNode; ${declaredTypes} }) { + export function ${name}({ children, ${declaredProps} }: { children: ReactNode; ${declaredTypes} }) { + ${ + layoutEffects.length + ? ` + useLayoutEffect(() => { + ${layoutEffects.map((effect) => effect.code).join('\n')} + }, [${layoutEffects.map((effect) => effect.props?.[0]?.propValue)}]); + ` + : '' + } return ( <> ${inlineComponents.map((provider) => provider.code)} ${wrappedComponents.reduce((acc, provider) => { - const props = provider.props.map((prop) => `${prop.propName}={${prop.propValue}}`).join(' ') + const props = provider.props?.map((prop) => `${prop.propName}={${prop.propValue}}`).join(' ') return `<${provider.component} ${props}>${acc}` }, '{children}')} @@ -132,7 +177,8 @@ ${jsdoc }) return ` - ${global.imports.concat(canvas.imports).sort().join('\n')} + import { ${unique(global.reactImports, canvas.reactImports).sort().join(', ')} } from "react"; + ${unique(global.imports, canvas.imports).sort().join('\n')} ${global.code} ${canvas.code} diff --git a/packages/react-three-create/src/lib/array.ts b/packages/react-three-create/src/lib/array.ts new file mode 100644 index 0000000..b6192e0 --- /dev/null +++ b/packages/react-three-create/src/lib/array.ts @@ -0,0 +1,11 @@ +export function unique(...array: T[][]): T[] { + const set = new Set() + + for (const arr of array) { + for (const item of arr) { + set.add(item) + } + } + + return Array.from(set) +} From 9b1edbd29f6901966929facc8b4989f5b0941fac Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Mon, 12 May 2025 20:25:22 +1000 Subject: [PATCH 19/29] chore: update --- packages/react-three-create/src/integrations/triplex.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-three-create/src/integrations/triplex.ts b/packages/react-three-create/src/integrations/triplex.ts index 0ddb51b..e109c8e 100644 --- a/packages/react-three-create/src/integrations/triplex.ts +++ b/packages/react-three-create/src/integrations/triplex.ts @@ -193,7 +193,7 @@ export function generateTriplex(generator: Generator, options: GenerateTriplexOp generator.inject('vscode-extension-suggestion', 'trytriplex.triplex-vsce') generator.inject( 'readme-tools', - '[Triplex](https://triplex.dev) - Build the 2D and 3D web without coding. Your visual workspace for React / Three Fiber.', + `[Triplex](https://triplex.dev) - Your visual workspace for React / Three Fiber. Get started by installing [Triplex for VS Code](https://triplex.dev/docs/get-started/vscode). If you don't use Visual Studio Code download [Triplex Standalone](https://triplex.dev/docs/get-started/standalone).`, ) generator.addFile('.triplex/providers.tsx', { From d02a25cc2ec5ec9dd3ddbf28a6428600db30f2f7 Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Mon, 12 May 2025 21:42:02 +1000 Subject: [PATCH 20/29] chore: tweaks --- packages/react-three-create/src/integrations/triplex.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-three-create/src/integrations/triplex.ts b/packages/react-three-create/src/integrations/triplex.ts index e109c8e..d323238 100644 --- a/packages/react-three-create/src/integrations/triplex.ts +++ b/packages/react-three-create/src/integrations/triplex.ts @@ -193,7 +193,7 @@ export function generateTriplex(generator: Generator, options: GenerateTriplexOp generator.inject('vscode-extension-suggestion', 'trytriplex.triplex-vsce') generator.inject( 'readme-tools', - `[Triplex](https://triplex.dev) - Your visual workspace for React / Three Fiber. Get started by installing [Triplex for VS Code](https://triplex.dev/docs/get-started/vscode). If you don't use Visual Studio Code download [Triplex Standalone](https://triplex.dev/docs/get-started/standalone).`, + `[Triplex](https://triplex.dev) - Your visual workspace for React / Three Fiber. Get started by installing [Triplex for VS Code](https://triplex.dev/docs/get-started/vscode). Don't use Visual Studio Code? Download [Triplex Standalone](https://triplex.dev/docs/get-started/standalone).`, ) generator.addFile('.triplex/providers.tsx', { From da29f9aa26d7222ffc33ee78166a95ee2440d181 Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Mon, 12 May 2025 21:43:12 +1000 Subject: [PATCH 21/29] chore: remove --- .../integrations/__tests__/triplex.test.ts | 58 ------------------- 1 file changed, 58 deletions(-) diff --git a/packages/react-three-create/src/integrations/__tests__/triplex.test.ts b/packages/react-three-create/src/integrations/__tests__/triplex.test.ts index a96e1c9..6d8b50a 100644 --- a/packages/react-three-create/src/integrations/__tests__/triplex.test.ts +++ b/packages/react-three-create/src/integrations/__tests__/triplex.test.ts @@ -210,62 +210,4 @@ describe('triplex integration', () => { ] `) }) - - it('should inject extension suggestion and readme', () => { - const inject = vi.fn() - - generateTriplex( - { - configureVite: vi.fn(), - options: {}, - replace: vi.fn(), - addDependency: vi.fn(), - addFile: vi.fn(), - inject, - }, - {}, - ) - - expect(inject.mock.calls).toMatchInlineSnapshot(` - [ - [ - "vscode-extension-suggestion", - "trytriplex.triplex-vsce", - ], - [ - "readme-tools", - "[Triplex](https://triplex.dev) - Build the 2D and 3D web without coding. Your visual workspace for React / Three Fiber.", - ], - ] - `) - }) - - it('should add config file', () => { - const addFile = vi.fn() - - generateTriplex( - { - configureVite: vi.fn(), - options: {}, - replace: vi.fn(), - addDependency: vi.fn(), - addFile, - inject: vi.fn(), - }, - {}, - ) - - expect(addFile.mock.calls[1]).toMatchInlineSnapshot(` - [ - ".triplex/config.json", - { - "content": "{ - "$schema": "https://triplex.dev/config.schema.json", - "provider": "./providers.tsx" - }", - "type": "text", - }, - ] - `) - }) }) From ed066b8cadb00437398378b1b859eee0debf775d Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Mon, 12 May 2025 21:48:43 +1000 Subject: [PATCH 22/29] fix: ignore when xr --- packages/react-three-create/src/integrations/triplex.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-three-create/src/integrations/triplex.ts b/packages/react-three-create/src/integrations/triplex.ts index d323238..ecd40b3 100644 --- a/packages/react-three-create/src/integrations/triplex.ts +++ b/packages/react-three-create/src/integrations/triplex.ts @@ -104,7 +104,7 @@ function generateProvidersModule(generator: Generator): string { canvasProviders.push('rapier') } - if (!!generator.options.postprocessing) { + if (!!generator.options.postprocessing && !generator.options.xr) { canvasProviders.push('postprocessing') } From f6bca2d3e4e43c2d0f515ff92eea2b9db9b1f451 Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Mon, 12 May 2025 22:09:27 +1000 Subject: [PATCH 23/29] chore: pass through --- apps/github/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/github/src/index.ts b/apps/github/src/index.ts index 5e45207..af18e81 100644 --- a/apps/github/src/index.ts +++ b/apps/github/src/index.ts @@ -35,6 +35,7 @@ const GenerateOptionsSchema = z.object({ rapier: z.boolean().optional(), uikit: z.boolean().optional(), xr: z.boolean().optional(), + triplex: z.boolean().optional(), zustand: z.boolean().optional(), }) From 267fd25bd7fb23bd0f9e4f42a18f2481e874536f Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Mon, 12 May 2025 22:19:15 +1000 Subject: [PATCH 24/29] chore: remove --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index ebecd9a..abbc161 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,5 @@ }, "scripts": { "test": "vitest" - }, - "packageManager": "pnpm@9.9.0+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1" + } } From 2feb2965607a38ab29712e9e90aea8af90ec73ac Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Mon, 12 May 2025 22:22:23 +1000 Subject: [PATCH 25/29] nit --- packages/react-three-create/src/cli.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-three-create/src/cli.ts b/packages/react-three-create/src/cli.ts index dbcd459..3926ac4 100644 --- a/packages/react-three-create/src/cli.ts +++ b/packages/react-three-create/src/cli.ts @@ -188,7 +188,7 @@ async function main() { .option('--offscreen', 'add @react-three/offscreen') .option('--zustand', 'add zustand') .option('--koota', 'add koota') - .option('--triplex', 'set up triplex.dev') + .option('--triplex', 'set up triplex environment') .option('--package-manager ', 'specify package manager (e.g. npm, yarn, pnpm)') .option( '--skip-setup', From 962dab94e32add8fe1aad2b30f20cfa2b3e96af6 Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Tue, 13 May 2025 08:22:43 +1000 Subject: [PATCH 26/29] chore: update --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 9d66b9f..69aa327 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,7 @@ npm create @react-three | `--offscreen` | Add [@react-three/offscreen](https://github.com/pmndrs/offscreen) for offscreen rendering | | `--zustand` | Add [zustand](https://github.com/pmndrs/zustand) for state management | | `--koota` | Add [koota](https://github.com/pmndrs/koota) for animation | +| `--triplex` | Add [Triplex](https://triplex.dev) for a visual development environment | | `--package-manager ` | Specify package manager (npm, yarn, or pnpm) | | `--skip-setup` | Skip automatic dependency installation, dev server start, and browser opening | | `-y, --yes` | Skip prompts and use default values | From b483f7b85f0ecf23370a50c8045b68c192c239de Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Tue, 13 May 2025 08:24:11 +1000 Subject: [PATCH 27/29] chore: revert formatting change --- apps/react-three-org/src/lib/packages.ts | 106 +++++++++++------------ 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/apps/react-three-org/src/lib/packages.ts b/apps/react-three-org/src/lib/packages.ts index 431cfd1..10c2d5f 100644 --- a/apps/react-three-org/src/lib/packages.ts +++ b/apps/react-three-org/src/lib/packages.ts @@ -5,80 +5,80 @@ export interface Package { githubUrl: string docsUrl: string } - -export const packages = [ +export const packages: Package[] = [ { - id: 'drei', - name: 'react-three/drei', + id: "drei", + name: "react-three/drei", description: - 'A growing collection of useful helpers and fully functional, ready-made abstractions for @react-three/fiber.', - githubUrl: 'https://github.com/pmndrs/drei', - docsUrl: 'https://docs.pmnd.rs/drei', + "A growing collection of useful helpers and fully functional, ready-made abstractions for @react-three/fiber.", + githubUrl: "https://github.com/pmndrs/drei", + docsUrl: "https://docs.pmnd.rs/drei", }, { - id: 'handle', - name: 'react-three/handle', + id: "handle", + name: "react-three/handle", description: - 'A cross-platform handle system for react-three-fiber. Create interactive controls and handles for your 3D objects.', - githubUrl: 'https://github.com/pmndrs/xr/tree/main/packages/react/handle', - docsUrl: 'https://pmndrs.github.io/xr/docs/handles/introduction', + "A cross-platform handle system for react-three-fiber. Create interactive controls and handles for your 3D objects.", + githubUrl: "https://github.com/pmndrs/xr/tree/main/packages/react/handle", + docsUrl: "https://pmndrs.github.io/xr/docs/handles/introduction", }, { - id: 'koota', - name: 'koota', - description: 'An ECS-based state management library optimized for real-time apps, games, and XR experiences.', - githubUrl: 'https://github.com/pmndrs/koota', - docsUrl: 'https://github.com/pmndrs/koota', + id: "koota", + name: "koota", + description: + "An ECS-based state management library optimized for real-time apps, games, and XR experiences.", + githubUrl: "https://github.com/pmndrs/koota", + docsUrl: "https://github.com/pmndrs/koota", }, { - id: 'leva', - name: 'leva', - description: 'A GUI panel for React. Create controls and debug your react-three-fiber scene with ease.', - githubUrl: 'https://github.com/pmndrs/leva', - docsUrl: 'https://github.com/pmndrs/leva', + id: "leva", + name: "leva", + description: "A GUI panel for React. Create controls and debug your react-three-fiber scene with ease.", + githubUrl: "https://github.com/pmndrs/leva", + docsUrl: "https://github.com/pmndrs/leva", }, { - id: 'offscreen', - name: 'react-three/offscreen', - description: - 'Offscreen rendering for react-three-fiber. Render your scene in a worker thread for better performance.', - githubUrl: 'https://github.com/pmndrs/react-three-offscreen', - docsUrl: 'https://github.com/pmndrs/react-three-offscreen', + id: "offscreen", + name: "react-three/offscreen", + description: "Offscreen rendering for react-three-fiber. Render your scene in a worker thread for better performance.", + githubUrl: "https://github.com/pmndrs/react-three-offscreen", + docsUrl: "https://github.com/pmndrs/react-three-offscreen", }, { - id: 'postprocessing', - name: 'react-three/postprocessing', - description: 'Post-processing effects for react-three-fiber, using react-postprocessing.', - githubUrl: 'https://github.com/pmndrs/react-postprocessing', - docsUrl: 'https://react-postprocessing.docs.pmnd.rs/', + id: "postprocessing", + name: "react-three/postprocessing", + description: "Post-processing effects for react-three-fiber, using react-postprocessing.", + githubUrl: "https://github.com/pmndrs/react-postprocessing", + docsUrl: "https://react-postprocessing.docs.pmnd.rs/", }, { - id: 'rapier', - name: 'react-three/rapier', - description: 'Physics based hooks for react-three-fiber using rapier.js.', - githubUrl: 'https://github.com/pmndrs/react-three-rapier', - docsUrl: 'https://github.com/pmndrs/react-three-rapier', + id: "rapier", + name: "react-three/rapier", + description: "Physics based hooks for react-three-fiber using rapier.js.", + githubUrl: "https://github.com/pmndrs/react-three-rapier", + docsUrl: "https://github.com/pmndrs/react-three-rapier", }, { - id: 'uikit', - name: 'react-three/uikit', - description: 'UI components for react-three-fiber. Build interactive interfaces in 3D space.', - githubUrl: 'https://github.com/pmndrs/uikit', - docsUrl: 'https://pmndrs.github.io/uikit/docs/', + id: "uikit", + name: "react-three/uikit", + description: "UI components for react-three-fiber. Build interactive interfaces in 3D space.", + githubUrl: "https://github.com/pmndrs/uikit", + docsUrl: "https://pmndrs.github.io/uikit/docs/", }, { - id: 'xr', - name: 'react-three/xr', - description: 'VR/AR support for react-three-fiber. Build cross-platform XR applications with React.', - githubUrl: 'https://github.com/pmndrs/xr', - docsUrl: 'https://pmndrs.github.io/xr/docs/', + id: "xr", + name: "react-three/xr", + description: + "VR/AR support for react-three-fiber. Build cross-platform XR applications with React.", + githubUrl: "https://github.com/pmndrs/xr", + docsUrl: "https://pmndrs.github.io/xr/docs/", }, { - id: 'zustand', - name: 'zustand', - description: 'A small, fast and scalable state-management solution. Perfect for react-three-fiber applications.', - githubUrl: 'https://github.com/pmndrs/zustand', - docsUrl: 'https://zustand.docs.pmnd.rs/', + id: "zustand", + name: "zustand", + description: "A small, fast and scalable state-management solution. Perfect for react-three-fiber applications.", + githubUrl: "https://github.com/pmndrs/zustand", + docsUrl: "https://zustand.docs.pmnd.rs/", }, ] as const satisfies Package[] From 2745e6d93b4570835eefecb8b09c04a10c46290f Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Tue, 13 May 2025 08:26:04 +1000 Subject: [PATCH 28/29] chore: nit --- packages/react-three-create/src/cli.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-three-create/src/cli.ts b/packages/react-three-create/src/cli.ts index 3926ac4..32bc075 100644 --- a/packages/react-three-create/src/cli.ts +++ b/packages/react-three-create/src/cli.ts @@ -188,7 +188,7 @@ async function main() { .option('--offscreen', 'add @react-three/offscreen') .option('--zustand', 'add zustand') .option('--koota', 'add koota') - .option('--triplex', 'set up triplex environment') + .option('--triplex', 'set up triplex development environment') .option('--package-manager ', 'specify package manager (e.g. npm, yarn, pnpm)') .option( '--skip-setup', From dd49de66ff42863b9ffbc97579abeb9376c645d3 Mon Sep 17 00:00:00 2001 From: Michael Dougall <6801309+itsdouges@users.noreply.github.com> Date: Thu, 15 May 2025 08:41:06 +1000 Subject: [PATCH 29/29] chore: ignore test folders when building dist --- packages/react-three-create/package.json | 2 +- packages/react-three-create/tsconfig.build.json | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 packages/react-three-create/tsconfig.build.json diff --git a/packages/react-three-create/package.json b/packages/react-three-create/package.json index a609f11..a058ce7 100644 --- a/packages/react-three-create/package.json +++ b/packages/react-three-create/package.json @@ -3,7 +3,7 @@ "version": "0.0.0", "type": "module", "scripts": { - "build": "tsc", + "build": "tsc --project ./tsconfig.build.json", "dev": "node --loader ts-node/esm src/cli.ts" }, "files": [ diff --git a/packages/react-three-create/tsconfig.build.json b/packages/react-three-create/tsconfig.build.json new file mode 100644 index 0000000..209ea57 --- /dev/null +++ b/packages/react-three-create/tsconfig.build.json @@ -0,0 +1,8 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "dist" + }, + "include": ["src"], + "exclude": ["**/__tests__/**"] +}