Simplify JS build and bump React

packages/react-juce/babel.config.js

@@ -1,19 +1,6 @@
 module.exports = {
   presets: [
-    "@babel/preset-env",
-    "@babel/preset-react",
+    "module:@react-native/babel-preset",
     "@babel/preset-typescript",
   ],
-  plugins: [
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-object-rest-spread",
-    [
-      "@babel/plugin-transform-runtime",
-      {
-        absoluteRuntime: false,
-        corejs: 3,
-        version: "^7.11.2",
-      },
-    ],
-  ],
 };

packages/react-juce/package.json

@@ -4,7 +4,7 @@
   "description": "Write cross-platform native apps with React.js and JUCE.",
   "repository": {
     "type": "git",
-    "url": "https://github.com/nick-thompson/react-juce.git"
+    "url": "https://github.com/jmarler/react-juce.git"
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,43 +15,38 @@
     "dist/components",
     "dist/src"
   ],
-  "author": "Nick Thompson",
+  "author": "Joshua Marler",
   "devDependencies": {
-    "@babel/cli": "^7.10.0",
-    "@babel/core": "^7.11.1",
-    "@babel/plugin-proposal-class-properties": "^7.11.0",
-    "@babel/plugin-transform-runtime": "^7.11.0",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/preset-typescript": "^7.10.4",
-    "@types/core-js": "^2.5.4",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-typescript": "^7.23.2",
+    "@react-native/babel-preset": "^0.74.0",
+    "@tsconfig/react-native": "^3.0.2",
     "@types/invariant": "^2.2.33",
     "@types/node": "^14.6.4",
-    "@types/react": "^16.9.41",
-    "@types/react-reconciler": "^0.18.0",
+    "@types/react": "^18.2.38",
+    "@types/react-reconciler": "^0.28.8",
     "awesome-typescript-loader": "^5.2.1",
     "chalk": "^2.4.2",
     "fs-extra": "^8.1.0",
     "typescript": "^3.9.6",
-    "webpack": "^5.46.0",
-    "webpack-cli": "^4.7.2"
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
-    "@babel/runtime-corejs3": "^7.11.2",
     "camelcase": "^6.2.0",
     "color-string": "^1.5.4",
-    "core-js": "2.6.0",
     "invariant": "^2.2.4",
     "known-css-properties": "^0.20.0",
     "matrix-js": "^1.5.1",
     "object-inspect": "^1.11.0",
-    "react-reconciler": "^0.25.1"
+    "react-reconciler": "^0.29.0"
   },
   "peerDependencies": {
-    "react": "^16.13.1"
+    "react": "^18.2.0"
   },
   "scripts": {
     "build": "webpack --mode=production",
+    "build-dev": "webpack --mode=development",
     "watch": "webpack --watch --mode=development",
     "init": "node scripts/init.js"
   }

packages/react-juce/scripts/init.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 
-var assert = require("assert");
-var chalk = require("chalk");
-var cp = require("child_process");
-var fs = require("fs-extra");
-var path = require("path");
+import assert from "assert";
+import { green, red, blue } from "chalk";
+import { exec } from "child_process";
+import { mkdirp, copy } from "fs-extra";
+import { resolve } from "path";
 
 var args = process.argv.slice(2);
 
@@ -13,46 +13,46 @@ assert(
   "Must provide a path to the directory in which to initialize the template."
 );
 
-var targetDir = path.resolve(args[0]);
-var packageDir = path.resolve(__dirname, "..");
-var templateDir = path.resolve(packageDir, "template");
+var targetDir = resolve(args[0]);
+var packageDir = resolve(__dirname, "..");
+var templateDir = resolve(packageDir, "template");
 
-console.log("Initializing a React-JUCE template in:", chalk.green(targetDir));
+console.log("Initializing a React-JUCE template in:", green(targetDir));
 console.log("Directory tree will be created if it does not exist.");
 
-fs.mkdirp(targetDir, function (err) {
+mkdirp(targetDir, function (err) {
   if (err) {
-    console.error(chalk.red(err));
+    console.error(red(err));
     process.exit(1);
   }
 
   console.log("[*] Copying template files");
 
-  fs.copy(templateDir, targetDir, function (err) {
+  copy(templateDir, targetDir, function (err) {
     if (err) {
-      console.error(chalk.red(err));
+      console.error(red(err));
       process.exit(1);
     }
 
     console.log("[*] Installing dependencies");
 
-    cp.exec("npm install", { cwd: targetDir }, function (err, stdout, stderr) {
+    exec("npm install", { cwd: targetDir }, function (err, _stdout, stderr) {
       if (err) {
-        console.error(chalk.red(err));
+        console.error(red(err));
         console.error(stderr);
         process.exit(1);
       }
 
       console.log();
       console.log(`
-${chalk.blue(
+${blue(
   "Success!"
-)} Initialized a React-JUCE template in ${chalk.green(targetDir)}
+)} Initialized a React-JUCE template in ${green(targetDir)}
 
 You can now get started by typing:
 
-${chalk.blue("cd")} ${args[0]}
-${chalk.blue("npm start")}
+${blue("cd")} ${args[0]}
+${blue("npm start")}
 
 Then adding the reactjuce::ReactApplicationRoot component to your project.
       `);

packages/react-juce/src/components/Button.tsx

@@ -1,12 +1,12 @@
-import React, { Component } from "react";
+import React, { Component, PropsWithChildren } from "react";
 
 import { View } from "./View";
 import { SyntheticMouseEvent } from "../lib/SyntheticEvents";
 import { ViewInstance } from "../lib/Backend";
 
 //TODO: Once ViewProps work is complete we can probably
 //      remove this in favour of ViewProps.
-export interface ButtonProps {
+export interface ButtonProps extends PropsWithChildren {
   onClick: (e: SyntheticMouseEvent) => void;
   onMouseDown?: (e: SyntheticMouseEvent) => void;
   onMouseUp?: (e: SyntheticMouseEvent) => void;

packages/react-juce/src/components/Canvas.ts

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { Component, PropsWithChildren } from "react";
 import Colors from "../lib/MacroProperties/Colors";
 
 // TODO: Need to explicitly bind this to members?
@@ -191,7 +191,7 @@ export class CanvasRenderingContext {
   //================================================================================
 }
 
-export interface CanvasProps {
+export interface CanvasProps extends PropsWithChildren {
   onDraw: (ctx: CanvasRenderingContext) => void;
   onMeasure?: (e: any) => void;
   stateful?: boolean;

packages/react-juce/src/index.tsx

@@ -1,7 +1,3 @@
-/** Polyfill ES2015 data structures with core-js. */
-import "core-js/es6/set";
-import "core-js/es6/map";
-
 import Backend from "./lib/Backend";
 import Renderer, { TracedRenderer } from "./lib/Renderer";
 
@@ -35,11 +31,16 @@ export default {
 
     // Create a root Container if it doesnt exist
     if (!container._rootContainer) {
-      //TODO: Double check passing false for final param "hydrate correct"
+      // TODO (jmarler) Check what we should actually be sending here.
       container._rootContainer = __preferredRenderer.createContainer(
         container,
+        0,
+        null,
         false,
-        false
+        null,
+        '',
+        (e) => { console.log(`Recoverable error: ${e}`); },
+        null
       );
     }
 

packages/react-juce/tsconfig.json

@@ -1,18 +1,11 @@
 {
+  "extends": "@tsconfig/react-native/tsconfig.json",
   "compilerOptions": {
-    "module": "commonjs",
-    "target": "es6",
-    "lib": ["es2015", "dom"],
+    "outDir": "./dist",
     "declaration": true,
     "sourceMap": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "allowJs": true,
     "noImplicitAny": false,
-    "strict": true,
-    "strictNullChecks": true,
-    "skipLibCheck": true,
-    "jsx": "react"
+    "types": ["node"],
   },
   "include": ["./src/**/*"]
 }

packages/react-juce/webpack.config.js

@@ -19,7 +19,6 @@ module.exports = (env) => {
         amd: "react",
       },
     },
-    target: ["web", "es5"],
     devtool: "source-map",
     resolve: {
       extensions: [".ts", ".tsx", ".js"],