V3 (#108)

* added getPublicInstance (hostInstance not available)
* Model is custom component (breaking changes must be ProperCase and must be wrapped in Suspense).

.storybook/main.js

@@ -1,24 +1,27 @@
 const path = require('path');
 
-
 module.exports = {
-    stories: ['../stories/**/*.stories.[tj]s'],
-    addons: [
-        '@storybook/addon-actions/register',
-        '@storybook/addon-links/register',
-        '@storybook/addon-storysource/register',
-        // '@storybook/addon-notes/register',
-    ],
-    webpackFinal: async (config, { configType }) => {
-      config.resolve.alias['react-babylonjs'] = path.resolve(__dirname, '../dist/react-babylonjs')
+  reactOptions: {
+    fastRefresh: true,
+    strictMode: true,
+  },
+  stories: ['../stories/**/*.stories.[tj]s'],
+  addons: [
+    '@storybook/addon-actions/register',
+    '@storybook/addon-links/register',
+    '@storybook/addon-storysource/register',
+    // '@storybook/addon-notes/register',
+  ],
+  webpackFinal: async (config, { configType }) => {
+    config.resolve.alias['react-babylonjs'] = path.resolve(__dirname, '../dist/react-babylonjs')
 
-      config.module.rules.push({
-            test: /\.stories\.jsx?$/,
-            loaders: [require.resolve('@storybook/source-loader')],
-            enforce: 'pre',
-          });
-        console.log(`added source loader to '${configType}' webpack config`);
-        // Return the altered config
-        return config;
-    },
+    config.module.rules.push({
+      test: /\.stories\.jsx?$/,
+      loaders: [require.resolve('@storybook/source-loader')],
+      enforce: 'pre',
+    });
+    console.log(`added source loader to '${configType}' webpack config`);
+    // Return the altered config
+    return config;
+  },
 };

docs/api.md

@@ -0,0 +1,33 @@
+Due to using code generation from the Babylon typings, all of these declarative elements will adhere to the same API as you find on [Babylon.js documentation site](https://doc.babylonjs.com/):
+
+If you want to declaratively use something not listed here create an issue :)  Some extensions have been added to allow for declarative scene creation (ie: Shadows, Textures, etc.)
+
+# @babylonjs/core API Support
+1. **Node -> Mesh** - abstractMesh, groundMesh, instancedLinesMesh, instancedMesh, linesMesh, mesh, node, transformNode, trailMesh
+
+2. **Cameras** - anaglyphArcRotateCamera, anaglyphFreeCamera, anaglyphGamepadCamera, anaglyphUniversalCamera, arcFollowCamera, arcRotateCamera, camera, deviceOrientationCamera, flyCamera, followCamera, freeCamera, gamepadCamera, stereoscopicArcRotateCamera, stereoscopicFreeCamera, stereoscopicGamepadCamera, stereoscopicUniversalCamera, targetCamera, touchCamera, universalCamera, virtualJoysticksCamera, vrDeviceOrientationArcRotateCamera, vrDeviceOrientationFreeCamera, vrDeviceOrientationGamepadCamera, webVrFreeCamera, webXrCamera
+
+3. **Geometries (meshes)** - box, capsule, cylinder, dashedLines, decal, disc, extrudePolygon, extrudeShape, extrudeShapeCustom, ground, groundFromHeightMap, icoSphere, lathe, lines, lineSystem, plane, babylon-polygon/Polygon, polyhedron, ribbon, sphere, tiledBox, tiledGround, tiledPlane, torus, torusKnot, tube
+> note: `babylon-polygon` instead of `polygon` due to JSX conflict with `React.SVGProps<SVGPolygonElement>`
+
+4. **Materials** - backgroundMaterial, fluentMaterial, material, multiMaterial, nodeMaterial, pbrBaseMaterial, pbrBaseSimpleMaterial, pbrMaterial, pbrMetallicRoughnessMaterial, pbrSpecularGlossinessMaterial, pushMaterial, shaderMaterial, standardMaterial
+
+5. **Lights** - directionalLight, hemisphericLight, light, pointLight, shadowLight, spotLight
+
+6. **Textures** - advancedDynamicTexture, baseTexture, colorGradingTexture, cubeTexture, customProceduralTexture, dynamicTexture, equiRectangularCubeTexture, hdrCubeTexture, htmlElementTexture, mirrorTexture, multiRenderTarget, multiviewRenderTarget, noiseProceduralTexture, proceduralTexture, rawCubeTexture, rawTexture, rawTexture2DArray, rawTexture3D, refractionTexture, renderTargetTexture, texture, videoTexture
+
+7. **EffectLayers** - effectLayer, glowLayer, highlightLayer
+
+8. **Behaviors** - autoRotationBehavior, bouncingBehavior, framingBehavior, attachToBoxBehavior, fadeInOutBehavior, multiPointerScaleBehavior, pointerDragBehavior, sixDofDragBehavior
+
+9. **Others** - adtForMesh, adtFullScreenUi, environmentHelper, physicsImpostor, pointsCloudSystem, shadowGenerator, cascadedShadowGenerator, vrExperienceHelper
+
+## @babylonjs/gui
+1. GUI3DManager
+2. **2D Controls** - scrollViewerWindow, baseSlider, babylon-button/Button, checkbox, colorPicker, container, control, displayGrid, babylon-ellipse/Ellipse, grid, babylon-image/Image, imageBasedSlider, imageScrollBar, inputPassword, inputText, babylon-line/Line, multiLine, radioButton, rectangle, scrollBar, scrollViewer, selectionPanel, slider, stackPanel, textBlock, virtualKeyboard
+> note: 'babylon-*' for `button`, `ellipse`, `image` & `line` due to JSX conflict with `React.SVGProps<T>`, otherwise use the ProperCase equivalent, but you miss editor auto-completion.
+
+3. **3D Controls** -  abstractButton3D, button3D, container3D, control3D, cylinderPanel, holographicButton, meshButton3D, planePanel, scatterPanel, spherePanel, stackPanel3D, volumeBasedPanel
+
+## Extensions (new in 2.0)
+1. dynamicTerrain

docs/breaking-changes-2.x-to-3.0.md

@@ -0,0 +1,55 @@
+# React BabylonJS
+
+> 'react-babylonjs' 3.x has many breaking changes to advance the API decided to do them all at once in a major version.
+
+## hostInstance not public
+**BEFORE:**
+```jsx
+conse boxRef = useRef();
+if (boxRef.current) {
+  const mesh = boxRef.current.hostInstance;
+}
+...
+<box ref={boxRef} .../>
+```
+
+**AFTER:** Now is directly accessible
+```jsx
+conse boxRef = useRef();
+if (boxRef.current) {
+  const mesh = boxRef.current;
+}
+...
+<box ref={boxRef} .../>
+```
+
+
+## model -> Model
+`model` intrinsic host element has been removed in favour of a `Model` component (notice the lower case vs. proper case), which needs to be enclosed in `React.Suspense` Component.
+**BEFORE:**
+```jsx
+import { Scene } from 'react-babylonjs';
+...
+<Engine>
+  <Scene>
+    <model ... />
+  </Scene>
+</Engine>
+```
+
+**AFTER:** Now needs to be enclosed in Suspense.
+```jsx
+import React, {Suspense} from 'react';
+import { Engine, Scene } from 'react-babylonjs';
+
+...
+<Engine>
+  <Scene>
+    <Suspense fallback={<Spinner />}>
+      <Model ... />
+    </Suspense>
+  </Scene>
+</Engine>
+```
+
+If you find something else that changed for the migration, please add a PR or create an issue.  Thanks.

docs/changes.md

@@ -0,0 +1,7 @@
+# Breaking Changes
+* 0.x to 1.0 ([List](breaking-changes-0.x-to-1.0.md))
+* 1.x to 2.0 -  Change NPMs from `babylonjs-*` to `@babylonjs/*`.  'Engine' not passed into onSceneMount(e) parameter - use e.scene.getEngine().  Suggest switching to intrinsic elements (camelCase instead of ProperCase).
+* 2.x to 3.0 ([List](breaking-changes-2.x-to-3.0.md))
+
+# Full list of all NPM versions and commit logs
+> [Generated from commits](CHANGELOG.md)