Example controls updates (#7093)

* Updated controls interface to use observer correctly * Converted all examples to use controls as arrow functions * Added semicolons
playcanvas · Nov 11, 2024 · aaf329f · aaf329f
1 parent 79ad1d6
commit aaf329f
Show file tree

Hide file tree

Showing 34 changed files with 102 additions and 97 deletions.
diff --git a/examples/src/examples/animation/blend-trees-1d.controls.mjs b/examples/src/examples/animation/blend-trees-1d.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx }) {
+export const controls = ({ observer, ReactPCUI, React, jsx }) => {
     const { BindingTwoWay, LabelGroup, SliderInput } = ReactPCUI;
     class JsxControls extends React.Component {
         render() {
@@ -15,4 +15,4 @@ export function controls({ observer, ReactPCUI, React, jsx }) {
         }
     }
     return jsx(JsxControls);
-}
+};
diff --git a/examples/src/examples/animation/blend-trees-2d-cartesian.controls.mjs b/examples/src/examples/animation/blend-trees-2d-cartesian.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ React, jsx, fragment }) {
+export const controls = ({ React, jsx, fragment }) => {
     const { createRef, Component } = React;
     class JsxControls extends Component {
         position = new pc.Vec2();
@@ -140,4 +140,4 @@ export function controls({ React, jsx, fragment }) {
         }
     }
     return jsx(JsxControls);
-}
+};
diff --git a/examples/src/examples/animation/blend-trees-2d-directional.controls.mjs b/examples/src/examples/animation/blend-trees-2d-directional.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ React, jsx, fragment }) {
+export const controls = ({ React, jsx, fragment }) => {
     const { useEffect, useRef } = React;
     /** @type {React.MutableRefObject<HTMLCanvasElement>} */
     const canvasRef = useRef(null);
@@ -80,4 +80,4 @@ export function controls({ React, jsx, fragment }) {
         canvas.addEventListener('mousedown', mouseEvent);
     });
     return fragment(jsx('canvas', { ref: canvasRef }));
-}
+};
diff --git a/examples/src/examples/animation/component-properties.controls.mjs b/examples/src/examples/animation/component-properties.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { Button } = ReactPCUI;
     return fragment(
         jsx(Button, {
@@ -12,4 +12,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             }
         })
     );
-}
+};
diff --git a/examples/src/examples/animation/layer-masks.controls.mjs b/examples/src/examples/animation/layer-masks.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, BooleanInput, SelectInput, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -98,4 +98,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/animation/locomotion.controls.mjs b/examples/src/examples/animation/locomotion.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, BooleanInput, Button } = ReactPCUI;
     const binding = new BindingTwoWay();
     const link = {
@@ -26,4 +26,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             })
         )
     );
-}
+};
diff --git a/examples/src/examples/gizmos/transform-rotate.controls.mjs b/examples/src/examples/gizmos/transform-rotate.controls.mjs
@@ -4,10 +4,11 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, ColorPicker, SliderInput, SelectInput, BooleanInput } = ReactPCUI;
+    const { useState } = React;
 
-    const [proj, setProj] = React.useState(pc.PROJECTION_PERSPECTIVE);
+    const [proj, setProj] = useState(pc.PROJECTION_PERSPECTIVE);
 
     return fragment(
         jsx(
@@ -176,4 +177,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
                 )
         )
     );
-}
+};
diff --git a/examples/src/examples/gizmos/transform-scale.controls.mjs b/examples/src/examples/gizmos/transform-scale.controls.mjs
@@ -4,10 +4,11 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, ColorPicker, SliderInput, SelectInput, BooleanInput } = ReactPCUI;
+    const { useState } = React;
 
-    const [proj, setProj] = React.useState(pc.PROJECTION_PERSPECTIVE);
+    const [proj, setProj] = useState(pc.PROJECTION_PERSPECTIVE);
 
     return fragment(
         jsx(
@@ -198,4 +199,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
                 )
         )
     );
-}
+};
diff --git a/examples/src/examples/gizmos/transform-translate.controls.mjs b/examples/src/examples/gizmos/transform-translate.controls.mjs
@@ -4,10 +4,11 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, ColorPicker, SliderInput, SelectInput, BooleanInput } = ReactPCUI;
+    const { useState } = React;
 
-    const [proj, setProj] = React.useState(pc.PROJECTION_PERSPECTIVE);
+    const [proj, setProj] = useState(pc.PROJECTION_PERSPECTIVE);
 
     return fragment(
         jsx(
@@ -218,4 +219,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
                 )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/asset-viewer.controls.mjs b/examples/src/examples/graphics/asset-viewer.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { Panel, Button } = ReactPCUI;
     return jsx(
         Panel,
@@ -16,4 +16,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             onClick: () => observer.emit('next')
         })
     );
-}
+};
diff --git a/examples/src/examples/graphics/clustered-area-lights.controls.mjs b/examples/src/examples/graphics/clustered-area-lights.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -32,4 +32,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/clustered-omni-shadows.controls.mjs b/examples/src/examples/graphics/clustered-omni-shadows.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
     return jsx(
         Panel,
@@ -55,4 +55,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             })
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/clustered-spot-shadows.controls.mjs b/examples/src/examples/graphics/clustered-spot-shadows.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, Button, Label, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -138,4 +138,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/contact-hardening-shadows.controls.mjs b/examples/src/examples/graphics/contact-hardening-shadows.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, SliderInput, SelectInput, BooleanInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -163,4 +163,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/dithered-transparency.controls.mjs b/examples/src/examples/graphics/dithered-transparency.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, SliderInput, BooleanInput, SelectInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -62,4 +62,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/ground-fog.controls.mjs b/examples/src/examples/graphics/ground-fog.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, LabelGroup } = ReactPCUI;
     return jsx(
         LabelGroup,
@@ -16,4 +16,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             }
         })
     );
-}
+};
diff --git a/examples/src/examples/graphics/integer-textures.controls.mjs b/examples/src/examples/graphics/integer-textures.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, jsx, fragment }) => {
     const { BindingTwoWay, Container, Button, InfoBox, LabelGroup, Panel, SliderInput, SelectInput } = ReactPCUI;
 
     return fragment(
@@ -55,4 +55,4 @@ export function controls({ observer, ReactPCUI, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/light-physical-units.controls.mjs b/examples/src/examples/graphics/light-physical-units.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -132,4 +132,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/lights-baked-a-o.controls.mjs b/examples/src/examples/graphics/lights-baked-a-o.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, Label, LabelGroup, Panel, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -186,4 +186,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/lights.controls.mjs b/examples/src/examples/graphics/lights.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -109,4 +109,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/multi-view.controls.mjs b/examples/src/examples/graphics/multi-view.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, SelectInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -34,4 +34,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/post-effects.controls.mjs b/examples/src/examples/graphics/post-effects.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -192,4 +192,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/post-processing.controls.mjs b/examples/src/examples/graphics/post-processing.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -248,4 +248,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/reflection-box.controls.mjs b/examples/src/examples/graphics/reflection-box.controls.mjs
@@ -2,7 +2,7 @@
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -69,4 +69,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};
diff --git a/examples/src/examples/graphics/shadow-cascades.controls.mjs b/examples/src/examples/graphics/shadow-cascades.controls.mjs
@@ -4,7 +4,7 @@ import * as pc from 'playcanvas';
  * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
     const { BindingTwoWay, BooleanInput, LabelGroup, Panel, SelectInput, SliderInput } = ReactPCUI;
     return fragment(
         jsx(
@@ -83,4 +83,4 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
             )
         )
     );
-}
+};