@vctrl/hooks 0.0.8 → 0.0.9-2

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.8",
+  "version": "0.0.9-2",
   "name": "@vctrl/hooks",
   "description": "vctrl/hooks is a React hooks package designed to simplify 3D model loading and management within React applications. It's part of the vectreal-core ecosystem and is primarily used in the vctrl/viewer React component and the official website application.",
   "bugs": {
@@ -34,9 +34,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "files": [
-    "."
-  ],
   "exports": {
     "./use-load-model": {
       "import": "./use-load-model.es.js",

package/project.json

@@ -0,0 +1,16 @@
+{
+  "name": "vctrl/hooks",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/hooks/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "options": {
+        "outputPath": "dist/packages/vctrl/hooks",
+        "configFile": "packages/hooks/vite.config.ts"
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './use-load-model';

package/src/use-load-model/event-system.ts

@@ -0,0 +1,29 @@
+import { EventData, EventHandler, EventTypes } from './types';
+
+const listeners = {} as Record<EventTypes, EventHandler<EventTypes>[]>;
+const eventSystem = {
+  emit<T extends EventTypes>(event: T, data: EventData[T]): void {
+    const handlers = listeners[event];
+    if (handlers) {
+      handlers.forEach((handler) => handler(data));
+    }
+  },
+
+  on<T extends EventTypes>(event: T, handler: EventHandler<T>): void {
+    if (!listeners[event]) {
+      listeners[event] = [];
+    }
+    listeners[event].push(handler as EventHandler<EventTypes>);
+  },
+
+  off<T extends EventTypes>(event: T, handler: EventHandler<T>): void {
+    const handlers = listeners[event];
+    if (handlers) {
+      listeners[event] = handlers.filter(
+        (h) => h !== handler,
+      ) as EventHandler<EventTypes>[];
+    }
+  },
+};
+
+export default eventSystem;

package/src/use-load-model/file-type-hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useLoadGltf } from './use-load-gltf';
+export { default as useLoadBinary } from './use-load-binary';

package/src/use-load-model/file-type-hooks/use-load-binary.ts

@@ -0,0 +1,74 @@
+import { useCallback } from 'react';
+
+import { Action, ModelFileTypes } from '../types';
+import { createGltfLoader, createUsdzLoader } from '../loaders';
+
+/**
+ * Hook to load binary files
+ *
+ * @param dispatch - The dispatch function from the useReducer hook
+ * @returns An object containing the loadBinary function
+ */
+function useLoadBinary(dispatch: React.Dispatch<Action>) {
+  /**
+   * Function to read binary files
+   *
+   * @param file - The binary file to read
+   * @param fileType - The type of file to read
+   * @param onProgress - The function to call when progress is made
+   * @returns {void}
+   */
+  const loadBinary = useCallback(
+    (file: File, fileType: ModelFileTypes, onProgress: () => void) => {
+      const reader = new FileReader();
+
+      reader.onload = async (event: ProgressEvent<FileReader>) => {
+        if (event.target?.result) {
+          const arrayBuffer = event.target.result as ArrayBuffer;
+
+          if (fileType === ModelFileTypes.glb) {
+            const gltfLoader = createGltfLoader();
+
+            gltfLoader.parse(arrayBuffer, '', (gltf) => {
+              dispatch({
+                type: 'SET_FILE',
+                payload: {
+                  model: gltf.scene,
+                  type: ModelFileTypes.glb,
+                  name: file.name,
+                },
+              });
+            });
+          } else if (fileType === ModelFileTypes.usdz) {
+            const usdzLoader = createUsdzLoader();
+            const model = usdzLoader.parse(arrayBuffer);
+
+            dispatch({
+              type: 'SET_FILE',
+              payload: {
+                model: model,
+                type: ModelFileTypes.usdz,
+                name: file.name,
+              },
+            });
+          }
+
+          onProgress(); // Call progress callback when binary file is loaded
+          dispatch({ type: 'SET_FILE_LOADING', payload: false });
+        }
+      };
+
+      reader.onerror = (error) => {
+        console.error('Error reading file:', error);
+        dispatch({ type: 'SET_FILE_LOADING', payload: false });
+      };
+
+      reader.readAsArrayBuffer(file);
+    },
+    [dispatch],
+  );
+
+  return { loadBinary };
+}
+
+export default useLoadBinary;

package/src/use-load-model/file-type-hooks/use-load-gltf.ts

@@ -0,0 +1,115 @@
+import { useCallback } from 'react';
+
+import { Action, ModelFileTypes, ReducedGltf } from '../types';
+import { arrayBufferToBase64 } from '../utils';
+import { createGltfLoader } from '../loaders';
+
+function useLoadGltf(dispatch: React.Dispatch<Action>) {
+  const embedExternalResources = useCallback(
+    async (
+      gltfContent: ReducedGltf,
+      otherFiles: File[],
+      onProgress: (progress: number) => void,
+    ) => {
+      const fileMap = new Map(otherFiles.map((file) => [file.name, file]));
+      const totalFiles =
+        (gltfContent.buffers?.length || 0) + (gltfContent.images?.length || 0);
+      let processedFiles = 0;
+
+      const updateProgress = () => {
+        processedFiles++;
+        onProgress((processedFiles / totalFiles) * 100);
+      };
+
+      // Embed buffers
+      if (gltfContent.buffers) {
+        for (let i = 0; i < gltfContent.buffers.length; i++) {
+          const buffer = gltfContent.buffers[i];
+          if (!buffer.uri || buffer.uri.startsWith('data:')) {
+            updateProgress();
+            continue;
+          }
+
+          const fileName = buffer.uri.split('/').pop() || '';
+          const file = fileMap.get(fileName);
+          if (file) {
+            const arrayBuffer = await file.arrayBuffer();
+            const base64 = await arrayBufferToBase64(arrayBuffer);
+            buffer.uri = `data:application/octet-stream;base64,${base64}`;
+          }
+          updateProgress();
+        }
+      }
+
+      // Embed images
+      if (gltfContent.images) {
+        for (let i = 0; i < gltfContent.images.length; i++) {
+          const image = gltfContent.images[i];
+          if (!image.uri || image.uri.startsWith('data:')) {
+            updateProgress();
+            continue;
+          }
+
+          const fileName = image.uri.split('/').pop() || '';
+          const file = fileMap.get(fileName);
+          if (file) {
+            const arrayBuffer = await file.arrayBuffer();
+            const base64 = await arrayBufferToBase64(arrayBuffer);
+            const mimeType = file.type || 'image/png';
+            image.uri = `data:${mimeType};base64,${base64}`;
+          }
+          updateProgress();
+        }
+      }
+
+      return gltfContent;
+    },
+    [],
+  );
+
+  const loadGltf = useCallback(
+    (
+      gltfFile: File,
+      otherFiles: File[],
+      onProgress: (progress: number) => void,
+    ) => {
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        const gltfContent = JSON.parse(e.target?.result as string);
+        onProgress(10); // Initial progress after parsing GLTF
+
+        const modifiedGLTF = await embedExternalResources(
+          gltfContent,
+          otherFiles,
+          (embeddingProgress) => {
+            // Map embedding progress to 10-90% range
+            onProgress(10 + embeddingProgress * 0.8);
+          },
+        );
+
+        const gltfLoader = createGltfLoader();
+
+        gltfLoader.parse(JSON.stringify(modifiedGLTF), '', (gltf) => {
+          dispatch({
+            type: 'SET_FILE',
+            payload: {
+              model: gltf.scene,
+              type: ModelFileTypes.gltf,
+              name: gltfFile.name,
+            },
+          });
+        });
+
+        onProgress(100); // Final progress
+        dispatch({ type: 'SET_FILE_LOADING', payload: false });
+      };
+
+      reader.readAsText(gltfFile);
+    },
+    [dispatch, embedExternalResources],
+  );
+
+  return { loadGltf };
+}
+
+export default useLoadGltf;

package/src/use-load-model/index.ts

@@ -0,0 +1,3 @@
+export { default as useLoadModel } from './use-load-model';
+export { type ModelFile, ModelFileTypes } from './types';
+export * from './model-context';

package/src/use-load-model/loaders/create-gltf-loader.ts

@@ -0,0 +1,20 @@
+import { WebGLRenderer } from 'three';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader';
+
+function createGltfLoader() {
+  const dracoLoader = new DRACOLoader();
+  dracoLoader.setDecoderPath('/draco/');
+
+  const ktxLoader = new KTX2Loader();
+  ktxLoader.setTranscoderPath('/draco/');
+
+  const gltfLoader = new GLTFLoader()
+    .setDRACOLoader(dracoLoader)
+    .setKTX2Loader(ktxLoader.detectSupport(new WebGLRenderer()));
+
+  return gltfLoader;
+}
+
+export default createGltfLoader;

package/src/use-load-model/loaders/create-usdz-loader.ts

@@ -0,0 +1,9 @@
+import { USDZLoader } from 'three/examples/jsm/loaders/USDZLoader';
+
+function createUsdzLoader() {
+  const usdzLoader = new USDZLoader();
+
+  return usdzLoader;
+}
+
+export default createUsdzLoader;

package/src/use-load-model/loaders/index.ts

@@ -0,0 +1,2 @@
+export { default as createGltfLoader } from './create-gltf-loader';
+export { default as createUsdzLoader } from './create-usdz-loader';

package/src/use-load-model/model-context.tsx

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+import useLoadModel from './use-load-model';
+
+const ModelContext = createContext({} as ReturnType<typeof useLoadModel>);
+
+const ModelProvider = ({ children }: React.PropsWithChildren) => {
+  const value = useLoadModel();
+
+  return (
+    <ModelContext.Provider value={value}>{children}</ModelContext.Provider>
+  );
+};
+
+const useModelContext = () => {
+  return useContext(ModelContext);
+};
+
+export { ModelContext, ModelProvider, useModelContext };

package/src/use-load-model/state.ts

@@ -0,0 +1,33 @@
+import { Action, ModelFileTypes, State } from './types';
+
+// Initial state
+export const initialState: State = {
+  file: null,
+  isFileLoading: false,
+  progress: 0,
+  supportedFileTypes: Object.values(ModelFileTypes),
+};
+
+/**
+ * Reducer function for the useReadModelFiles hook
+ *
+ * @param state - The current state of the reducer
+ * @param action - The action to be performed
+ * @returns The updated state
+ */
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'SET_FILE':
+      return { ...state, file: action.payload };
+    case 'SET_FILE_LOADING':
+      return { ...state, isFileLoading: action.payload };
+    case 'SET_PROGRESS':
+      return { ...state, progress: action.payload };
+    case 'RESET_STATE':
+      return { ...initialState };
+    default:
+      return state;
+  }
+}
+
+export default reducer;

package/src/use-load-model/types.ts

@@ -0,0 +1,53 @@
+import { Object3D } from 'three';
+
+export enum ModelFileTypes {
+  gltf = 'gltf',
+  glb = 'glb',
+  usdz = 'usdz',
+}
+
+export type InputFileOrDirectory = (File | FileSystemDirectoryHandle)[];
+
+export interface ReducedGltf {
+  images: { name: string; uri: string }[];
+  buffers: { bytelength: string; uri: string }[];
+}
+
+export interface ModelFile {
+  model: Object3D;
+  type: ModelFileTypes;
+  name: string;
+}
+
+// Updated State interface
+export interface State {
+  file: ModelFile | null;
+  isFileLoading: boolean;
+  progress: number;
+  supportedFileTypes: ModelFileTypes[];
+}
+
+// Updated Action types
+export type Action =
+  | { type: 'SET_FILE'; payload: ModelFile }
+  | { type: 'SET_FILE_LOADING'; payload: boolean }
+  | { type: 'SET_PROGRESS'; payload: number }
+  | { type: 'RESET_STATE' };
+
+// Updated Event types
+export type EventTypes =
+  | 'MULTIPLE_3D_MODELS'
+  | 'UNSUPPORTED_FILE_TYPE'
+  | 'UPLOAD_PROGRESS'
+  | 'UPLOAD_COMPLETE';
+
+// Updated event data types
+export type EventData = {
+  MULTIPLE_3D_MODELS: File[];
+  UNSUPPORTED_FILE_TYPE: File[];
+  UPLOAD_PROGRESS: number;
+  UPLOAD_COMPLETE: State['file'];
+};
+
+// Updated EventHandler type
+export type EventHandler<T extends EventTypes> = (data: EventData[T]) => void;

package/src/use-load-model/use-load-model.ts

@@ -0,0 +1,111 @@
+import { useReducer, useCallback, useRef, useEffect } from 'react';
+
+import { ModelFileTypes, InputFileOrDirectory } from './types';
+import { useLoadBinary, useLoadGltf } from './file-type-hooks';
+import { readDirectory } from './utils';
+
+import eventSystem from './event-system';
+import reducer, { initialState } from './state';
+
+function useLoadModel() {
+  const uploadCompleteRef = useRef(false);
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const { loadGltf } = useLoadGltf(dispatch);
+  const { loadBinary } = useLoadBinary(dispatch);
+
+  const getFileOfType = useCallback(
+    (files: File[], fileType: ModelFileTypes) =>
+      files.find((file) => file.name.endsWith('.' + fileType)),
+    [],
+  );
+
+  const updateProgress = useCallback((progress: number) => {
+    dispatch({ type: 'SET_PROGRESS', payload: progress });
+    eventSystem.emit('UPLOAD_PROGRESS', progress);
+  }, []);
+
+  const processFiles = useCallback(
+    (files: File[]) => {
+      if (files.length === 0) return;
+
+      dispatch({ type: 'SET_FILE_LOADING', payload: true });
+      updateProgress(0);
+      uploadCompleteRef.current = false;
+
+      const gltfFile = getFileOfType(files, ModelFileTypes.gltf);
+      const glbFile = getFileOfType(files, ModelFileTypes.glb);
+      const usdzFile = getFileOfType(files, ModelFileTypes.usdz);
+
+      const supportedFiles = [gltfFile, glbFile, usdzFile].filter(
+        Boolean,
+      ) as File[];
+
+      if (supportedFiles.length > 1) {
+        eventSystem.emit('MULTIPLE_3D_MODELS', supportedFiles);
+        return;
+      }
+
+      const otherFiles = files.filter(
+        (file) => file !== gltfFile && file !== glbFile && file !== usdzFile,
+      );
+
+      const updateFileProgress = (progress: number) => {
+        updateProgress(progress);
+
+        if (progress === 100) {
+          uploadCompleteRef.current = true;
+        }
+      };
+
+      if (gltfFile) {
+        loadGltf(gltfFile, otherFiles, updateFileProgress);
+      } else if (glbFile) {
+        loadBinary(glbFile, ModelFileTypes.glb, () => updateFileProgress(100));
+      } else if (usdzFile) {
+        loadBinary(usdzFile, ModelFileTypes.usdz, () =>
+          updateFileProgress(100),
+        );
+      } else {
+        eventSystem.emit('UNSUPPORTED_FILE_TYPE', files);
+        dispatch({ type: 'SET_FILE_LOADING', payload: false });
+        return;
+      }
+    },
+    [updateProgress, getFileOfType, loadGltf, loadBinary],
+  );
+
+  const handleFileUpload = useCallback(
+    async (filesOrDirectories: InputFileOrDirectory) => {
+      const allFiles: File[] = [];
+
+      for (const item of filesOrDirectories) {
+        if (item instanceof File) {
+          allFiles.push(item);
+        } else if ('kind' in item && item.kind === 'directory') {
+          const directoryFiles = await readDirectory(item);
+          allFiles.push(...directoryFiles);
+        }
+      }
+
+      processFiles(allFiles);
+    },
+    [processFiles],
+  );
+
+  useEffect(() => {
+    if (uploadCompleteRef.current && state.file) {
+      eventSystem.emit('UPLOAD_COMPLETE', state.file);
+      uploadCompleteRef.current = false;
+    }
+  }, [state.file]);
+
+  return {
+    ...state,
+    on: eventSystem.on,
+    off: eventSystem.off,
+    handleFileUpload,
+  };
+}
+
+export default useLoadModel;

package/src/use-load-model/utils/array-buffer-to-base64.ts

@@ -0,0 +1,20 @@
+// Helper function to convert ArrayBuffer to base64
+async function arrayBufferToBase64(arrayBuffer: ArrayBuffer) {
+  // Create a Blob from the ArrayBuffer
+  const blob = new Blob([arrayBuffer]);
+
+  // Use the FileReader to convert the Blob to a Base64 string
+  const reader = new FileReader();
+  return new Promise((resolve, reject) => {
+    reader.onloadend = () => {
+      if (!reader?.result) return;
+      // Extract the Base64 string from the data URL
+      const base64String = (reader?.result as string).split(',')[1];
+      resolve(base64String);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
+export default arrayBufferToBase64;

package/src/use-load-model/utils/index.ts

@@ -0,0 +1,2 @@
+export { default as arrayBufferToBase64 } from './array-buffer-to-base64';
+export { default as readDirectory } from './read-directory';

package/src/use-load-model/utils/read-directory.ts

@@ -0,0 +1,31 @@
+/**
+ * Recursively reads a directory
+ *
+ * @param directoryHandle - The directory handle to read
+ * @returns - An array of file objects
+ */
+async function readDirectory(
+  directoryHandle: FileSystemDirectoryHandle,
+): Promise<File[]> {
+  const files: File[] = [];
+
+  async function* getFilesRecursively(
+    entry: FileSystemDirectoryHandle,
+  ): AsyncGenerator<File> {
+    for await (const [, handle] of entry) {
+      if (handle.kind === 'file') {
+        yield await (handle as FileSystemFileHandle).getFile();
+      } else if (handle.kind === 'directory') {
+        yield* getFilesRecursively(handle as FileSystemDirectoryHandle);
+      }
+    }
+  }
+
+  for await (const file of getFilesRecursively(directoryHandle)) {
+    files.push(file);
+  }
+
+  return files;
+}
+
+export default readDirectory;

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["ESNext", "DOM", "DOM.Iterable", "DOM.AsyncIterable"],
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "types": ["vite/client"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,25 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "isolatedModules": true,
+    "declaration": true,
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,59 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/packages/@vctrl/hooks',
+
+  plugins: [
+    react(),
+    nxViteTsPaths(),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+    }),
+  ],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: '../../dist/packages/@vctrl/hooks',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      entry: {
+        index: path.resolve(__dirname, 'src/index.ts'),
+        'use-load-model': path.resolve(
+          __dirname,
+          'src/use-load-model/index.ts',
+        ),
+      },
+      name: '@vctrl/hooks',
+      formats: ['es', 'cjs'],
+      fileName: (format, entry) => `${entry}.${format}.js`,
+    },
+
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
+});