[WIP] Hedron dependency exports (#468)

* monorepo with lerna

* update GH checks file

* cleanup checks file

* separate packages

* package @hedron namespace

* lint fix

* deps alphabetical

* fix gh actions

* eslint global

* config cleanup

* config fixes

* linting

* type fixes etc

* gh action fix

* removed generated js files (no idea...)

* imports using aliases

* tsc noEmit

* update gitignore

* engine package setup

* eslintignore

* top level run dev script

* update readme

* various dev fixes

* TS fixes

* PR check fix

* DialogId moved out of @hedron/engine

* globalVars cleanup attempt

* deps from hedron globals

* generated

* dep upgrades and peer depedencies for engine

* remove THREE_EXTRAS and `three-stdlib` from engine

.gitignore

@@ -4,3 +4,11 @@ node_modules/
 *.tsbuildinfo
 dist
 out
+
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

package.json

@@ -17,7 +17,6 @@
     "lint": "lerna run lint",
     "format": "prettier --write ."
   },
-  "dependencies": {},
   "devDependencies": {
     "@electron-toolkit/eslint-config-prettier": "^2.0.0",
     "@electron-toolkit/eslint-config-ts": "^2.0.0",
@@ -32,5 +31,6 @@
     "lerna": "^8.1.9",
     "prettier": "^3.3.2",
     "typescript": "^5.5.2"
-  }
+  },
+  "packageManager": "[email protected]"
 }

packages/desktop/package.json

@@ -35,11 +35,11 @@
     "lodash.debounce": "^4.0.8",
     "material-symbols": "^0.23.0",
     "path-browserify": "^1.0.1",
-    "postprocessing": "^6.36.0",
+    "postprocessing": "^6.36.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
-    "three": "^0.167.1",
+    "three": "^0.171.0",
     "usehooks-ts": "^3.1.0",
     "zustand": "^4.5.5"
   },

packages/desktop/src/renderer/main.tsx

@@ -4,7 +4,6 @@ import { App } from '@components/App/App'
 import '@css/base.css'
 
 import '@renderer/windows'
-import '@renderer/globalVars'
 import '@renderer/ipc/mainThreadListen'
 import '@renderer/engine'
 

packages/engine/package.json

@@ -23,10 +23,12 @@
     "@types/lodash.debounce": "^4.0.9",
     "tsup": "^8.3.5"
   },
+  "peerDependencies": {
+    "postprocessing": "*",
+    "three": "*"
+  },
   "dependencies": {
     "lodash.debounce": "^4.0.8",
-    "postprocessing": "^6.36.4",
-    "three": "^0.171.0",
     "uid": "^2.0.2",
     "zustand": "^5.0.2"
   }

packages/desktop/src/renderer/globalVars.ts → packages/engine/src/globalVars.ts

@@ -1,32 +1,16 @@
 import * as THREE from 'three'
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import * as postprocessing from 'postprocessing'
-
 // Third party dependencies exposed globally for sketch development
 // Needs to also be exported so can be used by type definition files
 export const dependencies = {
   // Declaring THREE as a global var, so that sketches can use the same instance of three.js as Hedron does
   // This keeps the library versions matched and also prevents strange things from happening when the library
   // code is being read from different sources
-  THREE: {
-    ...THREE,
-    // For convenience, also requiring some common three extras
-    GLTFLoader,
-    OrbitControls,
-  },
-  // Other useful libraries
+  THREE,
   postprocessing,
 }
 
-declare global {
-  interface Window {
-    HEDRON: {
-      dependencies: typeof dependencies
-    }
-  }
-}
-
+// @ts-expect-error ---
 window.HEDRON = {
   dependencies,
 }

packages/engine/src/index.ts

@@ -1,3 +1,4 @@
 export * from './HedronEngine'
 export type * from '@store/types'
 export * from '@store/types'
+import './globalVars'

packages/example-project/global.d.ts

@@ -0,0 +1,13 @@
+declare global {
+  interface Window {
+    HEDRON: {
+      dependencies: {
+        THREE: typeof import('three')
+        postprocessing: typeof import('postprocessing')
+      }
+    }
+  }
+}
+
+// Ensure it's treated as a module by exporting an empty object.
+export {}

packages/example-project/types.d.ts → packages/example-project/module.d.ts

@@ -2,3 +2,8 @@ declare module '*.glsl' {
   const content: string
   export default content
 }
+
+declare module '*.glb' {
+  const content: string
+  export default content
+}

packages/example-project/package.json

@@ -2,6 +2,7 @@
   "name": "@hedron/example-project",
   "version": "1.0.0",
   "dependencies": {
-    "is-even": "^1.0.0"
+    "is-even": "^1.0.0",
+    "three-stdlib": "^2.34.0"
   }
 }

packages/example-project/sketches/hsl/index.ts

@@ -1,16 +1,18 @@
-import { Pass, ShaderPass } from 'postprocessing'
-import { Uniform, Texture, ShaderMaterial, Vector3 } from 'three'
+const { THREE, postprocessing } = window.HEDRON.dependencies
+const { Uniform, Texture, ShaderMaterial, Vector3 } = THREE
 
 import fragmentShader from './hsl.glsl'
 
+const { Pass, ShaderPass } = postprocessing
+
 /**
  * A basic post proicessing effect to adjust the hue, saturation, and lightness of the scene.
  * While this could be created with existing postprocessing passes, this example demonstrates how to create a custom effect.
  */
 export default class HSL {
-  shader: ShaderMaterial
-  pass: ShaderPass
-  passes: Pass[]
+  shader: typeof ShaderMaterial
+  pass: typeof ShaderPass
+  passes: (typeof Pass)[]
 
   /**
    * Gets the passes for this effect.

packages/example-project/sketches/logo/index.ts

@@ -1,18 +1,19 @@
 import './test.js'
+import { GLTFLoader } from 'three-stdlib'
 import hedronLogoUrl from './hedron-logo.glb'
 import matcapUrl from './matcap.jpg'
 
-const { THREE, TWEEN } = window.HEDRON.dependencies
-const gltfLoader = new THREE.GLTFLoader()
+const { THREE } = window.HEDRON.dependencies
+
+const gltfLoader = new GLTFLoader()
 const textureLoader = new THREE.TextureLoader()
 const matcapMat = new THREE.MeshMatcapMaterial()
+const sphereGeom = new THREE.IcosahedronGeometry(1, 3)
 
 export default class Logo {
   constructor() {
     this.root = new THREE.Group()
-
     // Add inner sphere
-    const sphereGeom = new THREE.IcosahedronGeometry(1, 3)
     this.sphere = new THREE.Mesh(sphereGeom, matcapMat)
     this.root.add(this.sphere)
 
@@ -24,7 +25,6 @@ export default class Logo {
 
       const s = 0.5
       this.model.scale.set(s, s, s)
-      this.resetLogoRot()
 
       textureLoader.load(matcapUrl, (matcap) => {
         matcapMat.matcap = matcap
@@ -33,31 +33,6 @@ export default class Logo {
     })
   }
 
-  resetLogoRot() {
-    // Using tween.js to animate the rotation back to default
-    this.isTweeningRot = true
-    const currRot = this.model.rotation
-    this.props = {
-      rotX: currRot.x,
-      rotY: currRot.y,
-      rotZ: currRot.z,
-    }
-    new TWEEN.Tween(this.props)
-      .easing(TWEEN.Easing.Quadratic.InOut)
-      .to(
-        {
-          rotX: 0.15,
-          rotY: 0,
-          rotZ: 0,
-        },
-        1000,
-      )
-      .onComplete(() => {
-        this.isTweeningRot = false
-      })
-      .start()
-  }
-
   update({ params: p, deltaFrame: d }) {
     if (!this.model) return
 

packages/example-project/sketches/stars/index.ts

@@ -1,6 +1,10 @@
-import { BufferAttribute, BufferGeometry, Group, Points, PointsMaterial, Vector3 } from 'three'
+const { THREE } = window.HEDRON.dependencies
+const { BufferAttribute, BufferGeometry, Group, Points, PointsMaterial, Vector3 } = THREE
 
-type ParticleVert = Vector3 & { velocity: Vector3 }
+interface ParticleVert {
+  position: typeof Vector3
+  velocity: typeof Vector3
+}
 
 export default class Stars {
   range = 1e4
@@ -14,16 +18,19 @@ export default class Stars {
   })
   vertices: ParticleVert[] = []
 
-  particleSystem: Points
+  particleSystem: typeof Points
 
   constructor() {
     for (let p = 0; p < this.particleCount; p++) {
-      const particle = this.vector3InRange(this.range) as ParticleVert
-      particle.velocity = this.vector3InRange(1)
+      const particle = {
+        position: this.vector3InRange(this.range),
+        velocity: this.vector3InRange(1),
+      }
+
       this.vertices.push(particle)
     }
     const positions = new Float32Array(
-      this.vertices.flatMap((particle) => [particle.x, particle.y, particle.z]),
+      this.vertices.flatMap(({ position }) => [position.x, position.y, position.z]),
     )
 
     this.particles.setAttribute('position', new BufferAttribute(positions, 3))
@@ -32,11 +39,11 @@ export default class Stars {
     this.root.add(this.particleSystem)
   }
 
-  randomInRange(range) {
+  randomInRange(range: number) {
     return Math.random() * range - range / 2
   }
 
-  vector3InRange(range) {
+  vector3InRange(range: number) {
     return new Vector3(
       this.randomInRange(range),
       this.randomInRange(range),