Update children interactions (#168)

* Add example using a rotating plane

* Cover and error for the runtime issue when a sketch is not provided

* Update dependencies

* Update logic to actually throw rather than log until a workaround for the hook execution order is found

* Document how to handle the styling / positioning of children with a working example

Author: jamesrweb

.github/workflows/MASTER_PULL_REQUEST.yml

@@ -14,19 +14,37 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: "16"
+          node-version: 16
 
-      - uses: c-hive/gha-npm-cache@v1
+      - uses: pnpm/action-setup@v2.0.1
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 7
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install
 
       - name: Check formatting
-        run: npm run format:check
+        run: pnpm format:check
 
       - name: Formatting issues detected (attempting fix...)
         if: ${{ failure() }}
-        run: npm run format
+        run: pnpm format
 
       - name: Commit fixed formatting issues
         uses: stefanzweifel/git-auto-commit-action@v4
@@ -35,11 +53,11 @@ jobs:
           branch: ${{ github.head_ref }}
 
       - name: Lint
-        run: npm run lint
+        run: pnpm lint
 
       - name: Linting issues detected (attempting fix...)
         if: ${{ failure() }}
-        run: npm run lint:fix
+        run: pnpm lint:fix
 
       - name: Commit fixed linting issues
         uses: stefanzweifel/git-auto-commit-action@v4
@@ -48,7 +66,7 @@ jobs:
           branch: ${{ github.head_ref }}
 
       - name: Test
-        run: npm run test
+        run: pnpm test
 
       - name: Build
-        run: npm run build
+        run: pnpm build

.gitignore

@@ -2,4 +2,5 @@
 coverage
 node_modules
 dist
-.DS_Store
+.DS_Store
+package-lock.json

README.md

@@ -34,6 +34,12 @@ Then just open `http://localhost:3001` in a browser.
   npm install react-p5-wrapper
 ```
 
+### PNPM
+
+```sh
+  pnpm add react-p5-wrapper
+```
+
 ### Yarn
 
 ```sh
@@ -368,8 +374,64 @@ export function App() {
 
 ### Children
 
-To render a component on top of the sketch, simply add it as a child of the
-`ReactP5Wrapper` component.
+To render a component on top of the sketch, you can add it as a child of the
+`ReactP5Wrapper` component and then use the exported `P5WrapperClassName`
+constant in your to style one element above the other via css.
+
+For instance, using [styled components](https://styled-components.com), we could
+center some text on top of our sketch like so:
+
+```jsx
+import { ReactP5Wrapper, P5WrapperClassName } from "../src/index.tsx";
+import styled, { createGlobalStyle } from "styled-components";
+
+const GlobalWrapperStyles = createGlobalStyle`
+  .${P5WrapperClassName} {
+    position: relative;
+  }
+`;
+
+const StyledCentredText = styled.span`
+  .${P5WrapperClassName} & {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    font-size: 2rem;
+    margin: 0;
+    text-align: center;
+  }
+`;
+
+export function App() {
+  const [rotation, setRotation] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(
+      () => setRotation(rotation => rotation + 100),
+      100
+    );
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  return (
+    <Fragment>
+      <GlobalWrapperStyles />
+      <ReactP5Wrapper sketch={sketch} rotation={rotation}>
+        <StyledCentredText>Hello world!</StyledCentredText>
+      </ReactP5Wrapper>
+    </Fragment>
+  );
+}
+```
+
+Of course you can also use any other css-in-js library or by just using simple
+css to achieve almost anything you can imagine just by using the wrapper class
+as your root selector.
 
 ## Development
 

config/eslint.config.js renamed to config/eslint/eslint.config.js

@@ -1,17 +1,17 @@
 const { join } = require("path");
 
 module.exports = {
-  rootDir: "..",
+  rootDir: join(__dirname, "..", ".."),
   silent: true,
-  testEnvironment: "jsdom",
   testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
   transform: {
     "^.+\\.tsx?$": "ts-jest"
   },
   moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
   globals: {
     "ts-jest": {
-      tsconfig: join(__dirname, "tsconfig.json")
+      tsconfig: join(__dirname, "..", "typescript", "tsconfig.json")
     }
-  }
+  },
+  testEnvironment: join(__dirname, "jest.environment.js")
 };

config/jest.config.js renamed to config/jest/jest.config.js

@@ -0,0 +1,28 @@
+const Environment = require("jest-environment-jsdom-global");
+const { TextEncoder, TextDecoder } = require("util");
+
+class CustomTestEnvironment extends Environment {
+  async setup() {
+    await super.setup();
+    this.polyfillTextEncoder();
+    this.polyfillTextDecoder();
+  }
+
+  polyfillTextEncoder() {
+    if (typeof this.global.TextEncoder !== "undefined") {
+      return;
+    }
+
+    this.global.TextEncoder = TextEncoder;
+  }
+
+  polyfillTextDecoder() {
+    if (typeof this.global.TextDecoder !== "undefined") {
+      return;
+    }
+
+    this.global.TextDecoder = TextDecoder;
+  }
+}
+
+module.exports = CustomTestEnvironment;

config/jest/jest.environment.js

@@ -1,17 +1,22 @@
 import typescript from "rollup-plugin-typescript2";
 import { terser } from "rollup-plugin-terser";
-import { dependencies, peerDependencies, module, main } from "../package.json";
+import {
+  dependencies,
+  peerDependencies,
+  module,
+  main
+} from "../../package.json";
 import { join } from "path";
 
-const input = "src/index.tsx";
+const input = join(__dirname, "..", "..", "src", "index.tsx");
 const external = [
   ...Object.keys(dependencies ?? {}),
   ...Object.keys(peerDependencies ?? {})
 ];
 const plugins = [
   typescript({
     typescript: require("typescript"),
-    tsconfig: join(__dirname, "tsconfig.json")
+    tsconfig: join(__dirname, "..", "typescript", "tsconfig.json")
   }),
   terser({
     format: {

config/prettier.config.js renamed to config/prettier/prettier.config.js

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "outDir": "../dist",
+    "outDir": "../../dist",
     "declaration": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
@@ -11,5 +11,5 @@
     "target": "es5",
     "moduleResolution": "node"
   },
-  "include": ["../src/**/*"]
+  "include": ["../../src/**/*"]
 }

config/rollup.config.js renamed to config/rollup/rollup.config.js

@@ -1,7 +1,7 @@
 const { join } = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
-const BASE_DIR = join(__dirname, "..");
+const BASE_DIR = join(__dirname, "..", "..");
 const DISTRIBUTION_DIRECTORY = join(BASE_DIR, "dist", "demo");
 const EXAMPLE_DIRECTORY = join(BASE_DIR, "example");
 
@@ -22,7 +22,7 @@ module.exports = (env, options) => {
           test: /\.tsx?$/,
           loader: "ts-loader",
           options: {
-            configFile: join(__dirname, "tsconfig.json")
+            configFile: join(__dirname, "..", "typescript", "tsconfig.json")
           }
         },
         {

config/tsconfig.json renamed to config/typescript/tsconfig.json

@@ -1,31 +1,48 @@
-import React, { Fragment, useState, useCallback } from "react";
+import React, { Fragment, useState, useCallback, useMemo } from "react";
 import { render } from "react-dom";
 import { ReactP5Wrapper } from "../src/index.tsx";
 import * as box from "./sketches/box";
 import * as torus from "./sketches/torus";
+import * as plane from "./sketches/plane";
 import "./example.css";
 
 function App() {
+  const sketches = useMemo(
+    () => [box.sketch, torus.sketch, plane.sketch],
+    [box, torus, plane]
+  );
   const [state, setState] = useState({
     rotation: 160,
     sketch: box.sketch,
     unmount: false
   });
   const onChangeSketch = useCallback(() => {
-    const useTorus = state.sketch === box.sketch;
-    const sketch = useTorus ? torus.sketch : box.sketch;
+    setState(state => {
+      const currentSketchIndex = sketches.findIndex(sketch => {
+        return Object.is(sketch, state.sketch);
+      });
+      const nextSketchIndex = (currentSketchIndex + 1) % sketches.length;
+      const sketch = sketches.at(nextSketchIndex);
 
-    setState(state => ({ ...state, sketch }));
-  }, [state.sketch, box.sketch, torus.sketch]);
-  const onChangeRotation = useCallback(event => {
-    setState(state => ({
-      ...state,
-      rotation: parseInt(event.target.value, 10)
-    }));
-  }, []);
+      if (sketch === undefined) {
+        return state;
+      }
+
+      return { ...state, sketch };
+    });
+  }, [sketches]);
   const onMountStateChange = useCallback(() => {
     setState(state => ({ ...state, unmount: !state.unmount }));
   }, []);
+  const onRotationChange = useCallback(
+    event => {
+      setState(state => ({
+        ...state,
+        rotation: parseInt(event.target.value, 10)
+      }));
+    },
+    [box, plane, torus]
+  );
 
   if (state.unmount) {
     return (
@@ -45,7 +62,7 @@ function App() {
         min="0"
         max="360"
         step="1"
-        onChange={onChangeRotation}
+        onChange={onRotationChange}
       />
       <button onClick={onChangeSketch}>Change Sketch</button>
       <button onClick={onMountStateChange}>Unmount</button>

config/webpack.config.js renamed to config/webpack/webpack.config.js

@@ -10,14 +10,17 @@ <h2>
     </h2>
     <div id="app"></div>
     <div class="footer">
-      Copyright &copy; 2016 -
-      <script>
-        new Date().getFullYear() > 2016 &&
-          document.write(new Date().getFullYear());
-      </script>
+      Copyright &copy; 2016 - <span id="currentYear"></span>
       <a href="https://github.com/P5-wrapper/react/graphs/contributors"
         >Contributors</a
       >.
     </div>
+    <script>
+      if (new Date().getFullYear() > 2016) {
+        document.getElementById("currentYear").textContent = new Date()
+          .getFullYear()
+          .toString();
+      }
+    </script>
   </div>
 </body>

example/app.jsx

@@ -15,7 +15,7 @@ export function sketch(p5) {
     p5.noStroke();
 
     p5.push();
-    p5.translate(-40, 50);
+    p5.translate(-35, 0);
     p5.rotateY(rotation);
     p5.rotateX(-0.9);
     p5.box(100);

example/index.html

@@ -0,0 +1,23 @@
+export function sketch(p5) {
+  let rotation = 0;
+
+  p5.setup = () => p5.createCanvas(300, 300, p5.WEBGL);
+
+  p5.updateWithProps = props => {
+    if (props.rotation) {
+      rotation = (props.rotation * Math.PI) / 180;
+    }
+  };
+
+  p5.draw = () => {
+    p5.background(100);
+    p5.normalMaterial();
+
+    p5.push();
+    p5.rotateZ(rotation);
+    p5.rotateX(rotation);
+    p5.rotateY(rotation);
+    p5.plane(100);
+    p5.pop();
+  };
+}