Set up monorepo

.github/workflows/deploy.yml

@@ -17,12 +17,8 @@ jobs:
  - name: Setup Node
  uses: actions/setup-node@v3
 
- - name: Install dependencies
- run: |
- cd examples
- npm install
- npm install three-custom-shader-material@next
- npm run build
+ - name: Build
+ run: yarn build
 
  - name: Upload production-ready build files
  uses: actions/upload-artifact@v3

examples/package.json

@@ -1,12 +1,11 @@
 {
- "name": "example",
+ "name": "three-custom-shader-material-examples",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
- "dev": "vite --config vite.config.ts",
- "build": "tsc && vite build --config vite.config.prod.ts",
- "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+ "dev": "vite",
+ "build": "tsc && vite build",
  "preview": "vite preview"
  },
  "dependencies": {
@@ -26,7 +25,8 @@
  "react-icons": "^5.0.1",
  "react-router-dom": "^6.22.3",
  "three": "^0.165.0",
- "three-stdlib": "^2.29.6"
+ "three-stdlib": "^2.29.6",
+ "three-custom-shader-material": "file:../package"
  },
  "devDependencies": {
  "@types/react": "^18.2.66",

examples/src/Examples/Caustics/Caustics.tsx

@@ -3,7 +3,7 @@ import { useFrame } from "@react-three/fiber";
 import { patchShaders } from "gl-noise/build/glNoise.m";
 import { useEffect, useMemo, useRef } from "react";
 import { Box3Helper, Material, MathUtils, Vector3 } from "three";
-import CustomShaderMaterial from "three-custom-shader-material/vanilla";
+import CustomShaderMaterial from "../../../../package/src";
 import { useShader } from "../../pages/Root";
 import Lights from "./components/Lights";
 

examples/src/Examples/Instances/Scene.tsx

@@ -13,8 +13,8 @@ import {
 } from "three";
 
 import { patchShaders } from "gl-noise/build/glNoise.m";
-import CustomShaderMaterial from "three-custom-shader-material";
-import CustomShaderMaterialType from "three-custom-shader-material/vanilla";
+import CustomShaderMaterialType from "../../../../package/src";
+import CustomShaderMaterial from "../../../../package/src/React";
 import { useShader } from "../../pages/Root";
 
 const amount = 150;

examples/src/Examples/MetalBunny/Scene.tsx

@@ -13,7 +13,7 @@ import { Suspense, useMemo, useRef, useState } from "react";
 import { Color } from "three";
 
 import { patchShaders } from "gl-noise/build/glNoise.m";
-import CSM from "three-custom-shader-material";
+import CSM from "../../../../package/src/React";
 import { useShader } from "../../pages/Root";
 import { MeshTransmissionMaterial } from "./MeshTransmissionMaterial";
 

examples/src/Examples/Points/Scene.tsx

@@ -8,8 +8,8 @@ import { Suspense, useEffect, useMemo, useRef } from "react";
 import { IcosahedronGeometry, Points, PointsMaterial } from "three";
 
 import { patchShaders } from "gl-noise/build/glNoise.m";
-import CustomShaderMaterial from "three-custom-shader-material";
-import CustomShaderMaterialType from "three-custom-shader-material/vanilla";
+import CustomShaderMaterialType from "../../../../package/src";
+import CustomShaderMaterial from "../../../../package/src/React";
 import { useShader } from "../../pages/Root";
 
 function Thing() {

examples/src/Examples/Shadows/Scene.tsx

@@ -13,7 +13,7 @@ import {
  MeshStandardMaterial,
  PlaneGeometry,
 } from "three";
-import CSM from "three-custom-shader-material";
+import CSM from "../../../../package/src/React";
 import { useShader } from "../../pages/Root";
 
 export function Scene() {

examples/src/Examples/Vanilla/Scene.tsx

@@ -3,7 +3,7 @@ import * as THREE from "three";
 
 import { useControls } from "leva";
 import { useEffect, useMemo } from "react";
-import CSM, { CSMProxy } from "three-custom-shader-material/vanilla";
+import CSM, { CSMProxy } from "../../../../package/src";
 import { useShader } from "../../pages/Root";
 import { Stage } from "./Stage";
 

examples/src/Examples/Waves/Scene.tsx

@@ -10,8 +10,8 @@ import { patchShaders } from "gl-noise/build/glNoise.m";
 import { useControls } from "leva";
 import { Suspense, useMemo, useRef } from "react";
 import * as THREE from "three";
-import CSM from "three-custom-shader-material";
-import CSMType from "three-custom-shader-material/vanilla";
+import CSMType from "../../../../package/src";
+import CSM from "../../../../package/src/React";
 import { useShader } from "../../pages/Root";
 import Lights from "./Lights";
 

examples/src/Examples/Waves/useWaterControls.ts

@@ -1,7 +1,7 @@
 import { useControls } from "leva";
 import React from "react";
 import { Color } from "three";
-import CustomShaderMaterialType from "three-custom-shader-material/vanilla";
+import CustomShaderMaterialType from "../../../../package/src";
 
 export default function useWaterControls(
  material: React.RefObject<CustomShaderMaterialType<any>>

examples/src/Examples/default/Scene.tsx

@@ -3,7 +3,7 @@ import { OrbitControls, Sphere } from "@react-three/drei";
 import { useControls } from "leva";
 import { useMemo } from "react";
 import { Color, MeshPhysicalMaterial } from "three";
-import CSM from "three-custom-shader-material/vanilla";
+import CSM from "../../../../package/src";
 import { useShader } from "../../pages/Root";
 import { Stage } from "./Stage";
 

examples/tsconfig.json

@@ -16,8 +16,8 @@
  "allowJs": true,
  "preserveSymlinks": true,
  "paths": {
- "three-custom-shader-material": ["../src/React"],
- "three-custom-shader-material/vanilla": ["../src"]
+ "three-custom-shader-material": ["../package/src/React"],
+ "three-custom-shader-material/vanilla": ["../package/src"]
  }
  },
  "include": ["src"],

examples/vite.config.ts

@@ -9,11 +9,11 @@ export default defineConfig({
  alias: {
  "three-custom-shader-material/vanilla": path.resolve(
  __dirname,
- "../src/index.ts"
+ "../package/src/index.ts"
  ),
  "three-custom-shader-material": path.resolve(
  __dirname,
- "../src/React/index.tsx"
+ "../package/src/React/index.tsx"
  ),
  },
  },

package.json

@@ -1,66 +1,19 @@
 {
- "name": "three-custom-shader-material",
- "description": "Extend Three.js standard materials with your own shaders!",
- "private": false,
- "version": "6.0.0-rc.8",
+ "name": "three-custom-shader-material-monorepo",
+ "version": "1.0.0",
+ "private": true,
+ "main": "index.js",
+ "repository": "git@github.com:FarazzShaikh/THREE-CustomShaderMaterial.git",
+ "author": "Faraz Shaikh <farazzshaikh@gmail.com>",
  "license": "MIT",
- "files": [
- "dist/**"
+ "workspaces": [
+ "package",
+ "examples"
  ],
- "homepage": "https://github.com/FarazzShaikh/THREE-CustomShaderMaterial",
- "main": "dist/entry/cjs/react.cjs",
- "module": "dist/entry/es/react.js",
- "types": "dist/React/index.d.ts",
- "exports": {
- ".": {
- "import": "./dist/entry/es/react.js",
- "require": "./dist/entry/cjs/react.cjs",
- "types": "./dist/React/index.d.ts"
- },
- "./vanilla": {
- "import": "./dist/entry/es/vanilla.js",
- "require": "./dist/entry/cjs/vanilla.cjs",
- "types": "./dist/index.d.ts"
- }
- },
  "scripts": {
- "dev": "cd example && yarn dev",
- "prepack": "yarn build",
- "build": "tsc && vite build",
- "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
- },
- "devDependencies": {
- "@react-three/fiber": "^8.16.1",
- "@types/node": "^20.12.2",
- "@types/react": "^18.2.66",
- "@types/react-dom": "^18.2.22",
- "@types/three": "^0.163.0",
- "@typescript-eslint/eslint-plugin": "^7.2.0",
- "@typescript-eslint/parser": "^7.2.0",
- "@vitejs/plugin-react": "^4.2.1",
- "concurrently": "^8.2.2",
- "eslint": "^8.57.0",
- "eslint-plugin-react-hooks": "^4.6.0",
- "eslint-plugin-react-refresh": "^0.4.6",
- "react": "^18.2.0",
- "react-dom": "^18.2.0",
- "three": "^0.163.0",
- "typescript": "^5.2.2",
- "vite": "^5.2.0",
- "vite-plugin-dts": "^3.8.1"
- },
- "peerDependencies": {
- "@react-three/fiber": ">=8.0",
- "react": ">=18.0",
- "three": ">=0.163"
- },
- "peerDependenciesMeta": {
- "@react-three/fiber": {
- "optional": true
- },
- "react": {
- "optional": true
- }
- },
- "dependencies": {}
+ "prebuild": "yarn --cwd package build",
+ "build": "yarn --cwd examples build",
+ "preview": "yarn --cwd examples preview",
+ "dev": "yarn --cwd examples dev"
+ }
 }

package/package.json

@@ -0,0 +1,59 @@
+{
+ "name": "three-custom-shader-material",
+ "description": "Extend Three.js standard materials with your own shaders!",
+ "private": false,
+ "version": "6.0.0-rc.8",
+ "license": "MIT",
+ "files": [
+ "dist/**"
+ ],
+ "homepage": "https://github.com/FarazzShaikh/THREE-CustomShaderMaterial",
+ "main": "dist/entry/cjs/react.cjs",
+ "module": "dist/entry/es/react.js",
+ "types": "dist/React/index.d.ts",
+ "exports": {
+ ".": {
+ "import": "./dist/entry/es/react.js",
+ "require": "./dist/entry/cjs/react.cjs",
+ "types": "./dist/React/index.d.ts"
+ },
+ "./vanilla": {
+ "import": "./dist/entry/es/vanilla.js",
+ "require": "./dist/entry/cjs/vanilla.cjs",
+ "types": "./dist/index.d.ts"
+ }
+ },
+ "scripts": {
+ "build": "tsc && vite build"
+ },
+ "devDependencies": {
+ "@types/node": "^20.12.2",
+ "@types/react": "^18.2.66",
+ "@types/react-dom": "^18.2.22",
+ "@types/three": "^0.163.0",
+ "@typescript-eslint/eslint-plugin": "^7.2.0",
+ "@typescript-eslint/parser": "^7.2.0",
+ "@vitejs/plugin-react": "^4.2.1",
+ "concurrently": "^8.2.2",
+ "eslint": "^8.57.0",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-react-refresh": "^0.4.6",
+ "typescript": "^5.2.2",
+ "vite": "^5.2.0",
+ "vite-plugin-dts": "^3.8.1"
+ },
+ "peerDependencies": {
+ "@react-three/fiber": ">=8.0",
+ "react": ">=18.0",
+ "three": ">=0.163"
+ },
+ "peerDependenciesMeta": {
+ "@react-three/fiber": {
+ "optional": true
+ },
+ "react": {
+ "optional": true
+ }
+ },
+ "dependencies": {}
+}

vite.config.ts → package/vite.config.ts

@@ -11,7 +11,7 @@ function copyLicensePlugin() {
  return {
  name: "copy-license",
  closeBundle: async () => {
- await fs.copyFile("LICENSE.md", "dist/LICENSE.md");
+ await fs.copyFile("../LICENSE.md", "dist/LICENSE.md");
  },
  };
 }