Update nearly all dependencies

apps/docs/apiSidebars.js

@@ -1,17 +1,8 @@
-const coreSidebar = require('./core-sidebar.js');
-const threeSidebar = require('./three-sidebar.js');
-
 module.exports = {
     sidebar: [
         {
-            type: 'category',
-            label: '@react-ecs/core',
-            items: coreSidebar,
-        },
-        {
-            type: 'category',
-            label: '@react-ecs/three',
-            items: threeSidebar,
+            type: 'autogenerated',
+            dirName: '.', // '.' means the docs folder
         },
     ],
 };

apps/docs/babel.config.js

@@ -1,4 +1,4 @@
 module.exports = {
     presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
-    plugins: ['@babel/plugin-proposal-class-properties'],
+    plugins: [['@babel/plugin-proposal-class-properties', { loose: true }]],
 };

apps/docs/docs/introduction.md → apps/docs/docs/introduction.mdx

@@ -10,23 +10,28 @@ import { Leva } from 'leva';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import { Suspense } from 'react';
 
-import { BoidExample } from '../src/scenes/BoidExample'
-import { DOMParticles } from '../src/scenes/DOMParticles'
+import { BoidExample } from '../src/scenes/BoidExample';
+import { DOMParticles } from '../src/scenes/DOMParticles';
 import { Example } from '../src/components/Example';
 
 `react-ecs` is a declarative "Entity Component System" for React.
 
 <Leva hidden />
 
-<Example hideControls style={{backgroundColor: 'black', height: '250px' }}>
-<BoidExample />
+<Example hideControls style={{ backgroundColor: 'black', height: '250px' }}>
+    <BoidExample />
 </Example>
 
-<div style={{float: "right"}}>These boids are driven by react-ecs! Try dragging and zooming!</div>
+<div style={{ float: 'right' }}>
+    These boids are driven by react-ecs! Try dragging and zooming!
+</div>
 
 ## What's that?
 
-<img style={{float: "right", maxWidth: "400px", marginLeft: "10px"}} src="https://i.imgur.com/nTfGWyF.png" />
+<img
+    style={{ float: 'right', maxWidth: '400px', marginLeft: '10px' }}
+    src="https://i.imgur.com/nTfGWyF.png"
+/>
 
 An **ECS**, or _Entity Component System_ is a design pattern popular in game development. It eschews rich objects for simple **Entities** that compose data-only Components, or **Facets** as `react-ecs` calls them (to avoid confusion with React Components).
 
@@ -197,6 +202,6 @@ export const DOMParticles = () => {
 }
 ```
 
-<Example hideControls style={{height: "250px"}}>
-<DOMParticles />
+<Example hideControls style={{ height: '250px' }}>
+    <DOMParticles />
 </Example>

apps/docs/docusaurus.config.js

@@ -47,7 +47,7 @@ module.exports = {
                     href: 'https://discord.gg/RJqjqAnmJ8',
                     label: 'Discord',
                     position: 'right',
-                }
+                },
             ],
         },
         footer: {
@@ -175,7 +175,7 @@ module.exports = {
                 allReflectionsHaveOwnDocument: true,
                 readme: 'none',
                 sidebar: {
-                    sidebarFile: './core-sidebar.js',
+                    categoryLabel: '@react-ecs/core',
                 },
                 watch: true,
             },
@@ -193,7 +193,7 @@ module.exports = {
                 allReflectionsHaveOwnDocument: true,
                 readme: 'none',
                 sidebar: {
-                    sidebarFile: './three-sidebar.js',
+                    categoryLabel: '@react-ecs/three',
                 },
                 watch: true,
             },

apps/docs/project.json

@@ -0,0 +1,44 @@
+{
+    "name": "docs",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "projectType": "application",
+    "sourceRoot": "apps/docs/src",
+    "targets": {
+        "lint": {
+            "executor": "@nrwl/linter:eslint",
+            "options": {
+                "ignorePath": "apps/docs/.eslintignore",
+                "eslintConfig": "apps/docs/.eslintrc.json",
+                "lintFilePatterns": ["apps/docs/**/*.{ts,tsx,js,jsx}"]
+            }
+        },
+        "fix": {
+            "executor": "@nrwl/linter:eslint",
+            "options": {
+                "fix": true,
+                "ignorePath": "apps/docs/.eslintignore",
+                "eslintConfig": "apps/docs/.eslintrc.json",
+                "lintFilePatterns": ["apps/docs/**/*.{ts,tsx,js,jsx}"]
+            }
+        },
+        "build": {
+            "executor": "@nx-plus/docusaurus:browser",
+            "options": {
+                "path": "apps/docs",
+                "outputPath": "dist/apps/docs"
+            }
+        },
+        "serve": {
+            "executor": "@nx-plus/docusaurus:dev-server",
+            "options": {
+                "port": 3000
+            }
+        },
+        "publish": {
+            "executor": "@nrwl/workspace:run-commands",
+            "options": {
+                "commands": ["bin/publish-site.sh"]
+            }
+        }
+    }
+}

apps/docs/src/components/Example/index.tsx

@@ -7,32 +7,41 @@ import styles from './index.module.scss';
 
 export const Example = (props) => {
     return (
-        <div style={{
-            flex: 1,
-            display: 'flex',
-            alignItems: "stretch",
-            flexDirection: "column"
-        }}>
-            <div className={styles.leva} style={{
-                top: "75px",
-                display: props.hideControls ? "none" : "block"
-            }}>
+        <div
+            style={{
+                flex: 1,
+                display: 'flex',
+                alignItems: 'stretch',
+                flexDirection: 'column',
+            }}
+        >
+            <div
+                className={styles.leva}
+                style={{
+                    top: '75px',
+                    display: props.hideControls ? 'none' : 'block',
+                }}
+            >
                 <Leva fill collapsed={props.collapsed} />
             </div>
 
-            <div className={styles.example} style={{
-                marginBottom: "1em",
-                position: "relative",
-                overflow: "hidden",
-                padding: "1em",
-                ...(props.style || {}),
-            }}>
+            <div
+                className={styles.example}
+                style={{
+                    marginBottom: '1em',
+                    position: 'relative',
+                    overflow: 'hidden',
+                    padding: '1em',
+                    ...(props.style || {}),
+                }}
+            >
                 <BrowserOnly fallback={<div />}>
-                    {() => <Suspense fallback={<div />}>{props.children}</Suspense>}
+                    {() => (
+                        <Suspense fallback={<div />}>{props.children}</Suspense>
+                    )}
                 </BrowserOnly>
             </div>
             {props.code && <Codeblock code={props.code} />}
         </div>
-    )
-
-}
+    );
+};

apps/docs/src/pages/index.tsx

@@ -2,10 +2,7 @@ import './index.scss';
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import {
-    useAnimationFrame,
-    useECS
-} from '@react-ecs/core';
+import { useAnimationFrame, useECS } from '@react-ecs/core';
 import Layout from '@theme/Layout';
 import clsx from 'clsx';
 import React from 'react';
@@ -73,14 +70,14 @@ function Home() {
 
     useAnimationFrame((dt) => {
         ECS.update(dt);
-    })
+    });
 
     const flip = (a) => a[Math.floor(Math.random() * a.length)];
     const example = flip([
         // <ParticleSystem cameraProps={{enableZoom: false}} />,
-        <BoidExample cameraProps={{enableZoom: false}} />,
+        <BoidExample cameraProps={{ enableZoom: false }} />,
         // <DOMParticles />
-    ])
+    ]);
 
     const context = useDocusaurusContext();
     const { siteConfig = {} } = context;
@@ -90,8 +87,16 @@ function Home() {
             title={`${siteConfig.title}`}
             description="Entity Component System for React!"
         >
-            <Example collapsed={true} style={{flex: 1, marginBottom: 0, border: "none"}}>
-                    {example}
+            <Example
+                collapsed={true}
+                style={{
+                    flex: 1,
+                    marginBottom: 0,
+                    border: 'none',
+                    height: '100%',
+                }}
+            >
+                <div style={{ height: '100vh' }}>{example}</div>
             </Example>
         </Layout>
     );

apps/docs/src/scenes/BoidExample.tsx

@@ -1,63 +1,48 @@
 import { BoidSim } from '@react-ecs/boids';
-import {
-    useAnimationFrame,
-    useECS
-} from '@react-ecs/core';
-import {
-    OrbitControls,
-    Torus,
-    useGLTF
-} from '@react-three/drei';
+import { useAnimationFrame, useECS } from '@react-ecs/core';
+import { OrbitControls, Torus, useGLTF } from '@react-three/drei';
 import { Canvas } from '@react-three/fiber';
-import React, {
-    FC,
-    Suspense
-} from 'react';
+import React, { FC, Suspense } from 'react';
 import { Mesh } from 'three';
 
 const LOGO_PATH = '/models/plane1.gltf';
 
-
 export const BoidExample = (props) => {
     const ECS = useECS();
 
-    useAnimationFrame(ECS.update)
+    useAnimationFrame(ECS.update);
 
     const { nodes } = useGLTF(LOGO_PATH);
     const geometry = (nodes.Regular_Plane as Mesh).geometry;
 
     return (
-            <Canvas>
-                <Suspense fallback={<Torus />}>
-                    <ECS.Provider>
-                        <fog attach="fog" args={['black', 25, 250]} />
-                        <ambientLight intensity={.3} />
-                        <directionalLight
-                            color='red'
-                            intensity={3}
-                        />
-                        <OrbitControls
-                            enablePan
-                            enableRotate
-                            enableZoom
-                            minDistance={80}
-                            maxDistance={200}
-                            maxPolarAngle={1.5}
-                            {...props.cameraProps}
-                        />
-
-                        <BoidSim render={() =>
-                            <mesh
-                                castShadow
-                                receiveShadow
-                                geometry={geometry}>
+        <Canvas>
+            <Suspense fallback={<Torus />}>
+                <ECS.Provider>
+                    <fog attach="fog" args={['black', 25, 250]} />
+                    <ambientLight intensity={0.3} />
+                    <directionalLight color="red" intensity={3} />
+                    <OrbitControls
+                        enablePan
+                        enableRotate
+                        enableZoom
+                        minDistance={80}
+                        maxDistance={200}
+                        maxPolarAngle={1.5}
+                        {...props.cameraProps}
+                    />
+
+                    <BoidSim
+                        render={() => (
+                            <mesh castShadow receiveShadow geometry={geometry}>
                                 <meshNormalMaterial />
                             </mesh>
-                        } />
-                    </ECS.Provider>
-                </Suspense>
-            </Canvas>
-    )
-}
-
-useGLTF.preload(LOGO_PATH)
+                        )}
+                    />
+                </ECS.Provider>
+            </Suspense>
+        </Canvas>
+    );
+};
+
+useGLTF.preload(LOGO_PATH);