Merge pull request #13 from krsbx/remove-strict-mode

chore: remove react strict mode

.eslintrc.json

@@ -15,6 +15,7 @@
     "sourceType": "module"
   },
   "plugins": [
+    "react",
     "@typescript-eslint"
   ],
   "rules": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mind-ar-react",
-  "version": "0.1.0-beta3a",
+  "version": "0.1.0-beta3c",
   "main": "dist/index.js",
   "scripts": {
     "dev": "vite",
@@ -15,9 +15,9 @@
     "react-dom": "^18.0.0"
   },
   "dependencies": {
-    "aframe-react-component": "^0.1.0-beta2a",
+    "aframe-react-component": "^0.1.0-beta2b",
     "lodash": "^4.17.21",
-    "mind-ar-ts": "^0.5.2-beta2b"
+    "mind-ar-ts": "^0.5.2-beta2c"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.0.3",
@@ -33,6 +33,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.30.1",
     "husky": "^8.0.1",
     "prettier": "^2.7.1",
     "react-dropzone": "^14.2.1",

src/Examples/FaceTracking.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Camera, Sphere } from 'aframe-react-component';
-import FaceTracking from '../components/AR/FaceTracking';
+import FaceTracking from '../provider/FaceTracking';
 import { Faces, Scene } from '../components';
 
 const ExampleFaceTracking = () => {

src/Examples/ImageTracking.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Camera, GLTFModel, Plane, Assets, Item } from 'aframe-react-component';
-import ImageTracking from '../components/AR/ImageTracking';
+import ImageTracking from '../provider/ImageTracking';
 import { Entity, Marker, Scene } from '../components';
 
 const ExampleImageTracking = () => {

src/components/Scene.tsx

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import React, { useEffect, useRef } from 'react';
 import { Scene as AScene, SystemDefinition } from 'aframe';
 import { Scene as SceneComponent } from 'aframe-react-component';
@@ -20,20 +21,16 @@ const Scene = React.forwardRef<AScene, _Scene>(({ children, ...props }, ref) =>
   } = props;
 
   useEffect(() => {
-    if (!sceneRef.current) return;
-
-    if (!mindARImage || !mindARFace) return;
-
-    const arSystem = sceneRef.current.systems[
+    const arSystem = sceneRef.current?.systems[
       mindARImage ? AR_COMPONENT_NAME.IMAGE.IMAGE_SYSTEM : AR_COMPONENT_NAME.FACE.FACE_SYSTEM
-    ] as SystemDefinition<IMindARImageSystem | IMindARFaceSystem>;
+    ] as SystemDefinition<IMindARImageSystem | IMindARFaceSystem> | undefined;
 
     return () => {
       if (!arSystem) return;
 
       arSystem.stop();
     };
-  }, [sceneRef.current]);
+  }, []);
 
   return (
     <SceneComponent

src/index.ts

@@ -1,21 +1,13 @@
 import { Entity, Faces, Marker, Scene } from './components';
-import FaceTracking from './components/AR/FaceTracking';
-import ImageTracking from './components/AR/ImageTracking';
 
-const Components = {
+const MindAR = {
   Entity,
   Faces,
   Marker,
   Scene,
 };
 
-const MindAR = {
-  FaceTracking,
-  ImageTracking,
-  Components,
-};
-
-export { FaceTracking, ImageTracking, Components as MindAR };
+export { MindAR };
 export { default as useCompiler } from './utils/useCompiler';
 export type { CompilerState } from './utils/interfaces';
 export * from './utils/constant';

src/main.tsx

@@ -3,8 +3,4 @@ import ReactDOM from 'react-dom/client';
 import App from './App';
 import './index.css';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

src/components/AR/FaceTracking.tsx → src/provider/FaceTracking.tsx

@@ -1,7 +1,6 @@
-import 'aframe';
+import React from 'react';
 import 'mind-ar-ts/dist/mindar-face.prod.js';
 import 'mind-ar-ts/dist/mindar-face-aframe.prod.js';
-import React from 'react';
 
 const FaceTracking = ({ children }: { children: React.ReactNode }) => (
   <React.Fragment>{children}</React.Fragment>

src/components/AR/ImageTracking.tsx → src/provider/ImageTracking.tsx

@@ -1,8 +1,7 @@
-import 'aframe';
+import React from 'react';
 import 'mind-ar-ts/dist/mindar-image.prod.js';
 import 'mind-ar-ts/dist/mindar-image-aframe.prod.js';
 import 'mind-ar-ts/dist/mindar-gesture.prod.js';
-import React from 'react';
 
 const ImageTracking = ({ children }: { children: React.ReactNode }) => (
   <React.Fragment>{children}</React.Fragment>

src/provider/index.ts

@@ -0,0 +1,2 @@
+export { default as FaceTracking } from './FaceTracking';
+export { default as ImageTracking } from './ImageTracking';

tsconfig.build.json

@@ -8,7 +8,8 @@
     "declaration": true
   },
   "include": [
-    "src/index.ts"
+    "src/index.ts",
+    "src/provider/index.ts"
   ],
   "exclude": [
     "node_modules",