Resurrection and Enhancement Plan

[brudo]

Ancient relic NINJAM contributor eHalo here, seeking to resurrect myself and this project, with enhancements, to support running in a web browser at least for testing, as well as having a native NINJAM client for iPad and Android tablets.

I also want to add new modes to facilitate the math for blues jams as well as for singing in the round and even custom time signatures, while maintaining compatibility with standard clients in the same session both for voting. But hopefully sharing these protocol enhancements with the Jamtaba team as well (and in the REAPER builtin client if they'll take it).

I won't be the one to code it, as I'm currently sidelined from coding and project management due to a complex injury affecting some aspects of cognition more than others. But I still have my experience, my ideas, and my voice; and I'm putting them all to use!

Very happy to work with whoever can fill the gaps in my own ability to carry this out, either BHSPitMonkey here if you're still around; or we can fork and do it elsewhere if necessary!

Anyway, I did ask Grok 3 to reality check my plan by getting the client buildable, up to date in dependencies, and running on modern browsers, and this was its plan. (Which it appeared to execute, to see how it worked and then talked through it, like I would have done if preparing a HOWTO in the hayday of nerd culture.)

I had already discussed my enhancement ideas with Claude several months ago, and now with Grok 3, but when I asked it to come up with this resuscitation plan it was with instructions that there should be no functional changes for now, just get it working again.

---

Below is a complete and self-contained guide to getting the ninjam-js project from the BHSPitMonkey/ninjam-js repository into a working state for modern browsers (e.g., Chrome, Firefox, Safari). The goal is to establish a working baseline without additional enhancements, focusing solely on updating dependencies and configurations as needed to run the application as a standard web app. I’ll conclude with a summary of the changes, described with code blocks and explanations rather than a unified diff, for clarity and accessibility.

(Hopefully GitHub Issues supports markdown... if not, hopefully it's still legible.)

---

Steps to Get ninjam-js Working in Modern Browsers

1. Clone the Repository

Start by cloning the ninjam-js repository from GitHub:

git clone https://github.com/BHSPitMonkey/ninjam-js.git
cd ninjam-js

This gives you the project files, including the main application code in the app/ directory and build configurations in the root.

2. Install Initial Dependencies

The project has two package.json files: one in the root for build tools and one in app/ for application dependencies. Install dependencies from the root, which should also handle the app/ directory:

npm install

The original project uses outdated tools and libraries (circa 2016-2017), such as Babel 6 and React 0.14.7. While npm install may succeed with the specified versions, some updates are necessary for modern browser compatibility.

3. Update Build Tools (Babel)

The project uses Babel 6 (babel-core, babel-loader, etc.) to transpile JavaScript and JSX. Since Babel 6 is outdated and may not work well with modern Node.js or browsers, update to Babel 7:

• Edit package.json in the root directory:
  Replace the following Babel-related dependencies:

  "babel-core": "^6.5.1",
  "babel-loader": "^6.2.2",
  "babel-preset-es2015": "^6.5.0",
  "babel-preset-react": "^6.5.0",

  with:

  "@babel/core": "^7.0.0",
  "babel-loader": "^8.0.0",
  "@babel/preset-env": "^7.0.0",
  "@babel/preset-react": "^7.0.0",

• Update .babelrc in the root directory:
  Replace the old Babel 6 presets:

  {
    "presets": ["es2015", "react"]
  }

  with Babel 7 presets targeting modern browsers:

  {
    "presets": [
      ["@babel/preset-env", { "targets": "defaults" }],
      "@babel/preset-react"
    ]
  }

  Here, "targets": "defaults" ensures compatibility with a broad range of modern browsers via browserslist.

• Reinstall dependencies:

  npm install

4. Handle React Version Compatibility

The application in app/ uses React 0.14.7, which relies on React.createClass—a syntax removed in React 16+. To use a newer React version without a full rewrite, install create-react-class as a compatibility layer and update the React version to 16.14.0 (the last React 16 release, stable and widely supported):

• Navigate to app/ and install create-react-class:

  cd app
  npm install --save create-react-class

• Update React and React-DOM in app/package.json:
  Replace:

  "react": "^0.14.7",
  "react-dom": "^0.14.7",

  with:

  "react": "^16.14.0",
  "react-dom": "^16.14.0",
  "create-react-class": "^15.7.0",

• Modify component files to use createReactClass:
  In all .jsx files under app/components/ (e.g., server-list.jsx, agreement-modal.jsx), replace:

  var ServerList = React.createClass({

  with:

  var createReactClass = require('create-react-class');
  var ServerList = createReactClass({

  Repeat this for each component file using React.createClass. This preserves the original component logic while making it compatible with React 16.

• Install updated dependencies in app/:

  npm install

  Then return to the root:

  cd ..

5. Create a Web App Build Configuration

The original project supports Electron, Chrome Apps, and Firefox OS via Webpack configurations (e.g., webpack.chrome.config.js). Since Chrome Apps and Firefox OS are deprecated, create a new configuration to build a standard web app:

• Install html-webpack-plugin:
  This plugin generates an index.html file with the correct script reference:

  npm install --save-dev html-webpack-plugin

• Create webpack.web.config.js in the root directory:

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    entry: './app/main.js',
    output: {
      path: path.join(__dirname, 'dist/web'),
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './app/index.html',
        filename: 'index.html'
      })
    ],
    resolve: {
      extensions: ['.js', '.jsx']
    }
  };

  This config:

  • Uses app/main.js as the entry point.
  • Outputs a bundled bundle.js in dist/web/.
  • Transpiles .js and .jsx files with babel-loader.
  • Generates index.html from app/index.html, automatically including bundle.js.

• Add a build script to package.json in the root:
  Update the "scripts" section:

  "build:web": "webpack --config webpack.web.config.js",

6. Build the Project

Run the new build command:

npm run build:web

This creates a dist/web/ directory containing index.html and bundle.js.

7. Serve and Test

Serve the dist/web/ directory using a simple HTTP server to test in a browser:

• Install http-server (if not already installed globally):

  npm install -g http-server

• Serve the build:

  http-server dist/web

• Open in a browser:
  Navigate to http://localhost:8080 (or the port displayed by http-server). The NINJAM-JS application should load.

8. Verify Functionality

Check that core features (e.g., server list loading, UI rendering) work. If runtime errors occur (e.g., Web Audio API or WebSocket issues), additional debugging may be needed, but this establishes the baseline.

---

Summary of Changes

Here’s a descriptive summary of the modifications made to get ninjam-js working in modern browsers:

1. Updated Babel to Version 7:

   • Why: Babel 6 is outdated and incompatible with modern tools/browsers.
   • Change: Replaced Babel 6 packages in package.json:

     "babel-core": "^6.5.1",
     "babel-loader": "^6.2.2",
     "babel-preset-es2015": "^6.5.0",
     "babel-preset-react": "^6.5.0",

     with:

     "@babel/core": "^7.0.0",
     "babel-loader": "^8.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",

   • Change: Updated .babelrc:

     {
       "presets": [
         ["@babel/preset-env", { "targets": "defaults" }],
         "@babel/preset-react"
       ]
     }

2. Updated React to 16.14.0 with create-react-class:

   • Why: React 0.14.7 uses React.createClass, unsupported in newer versions. Updating to React 16 improves compatibility without a full rewrite.
   • Change: In app/package.json, updated:

     "react": "^0.14.7",
     "react-dom": "^0.14.7",

     to:

     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "create-react-class": "^15.7.0",

   • Change: In app/components/*.jsx, replaced React.createClass with:

     var createReactClass = require('create-react-class');
     var ComponentName = createReactClass({

3. Added Web App Build Configuration:

   • Why: Original configs targeted deprecated platforms (Chrome Apps, Firefox OS). A new config builds a standard web app.
   • Change: Installed html-webpack-plugin:

     npm install --save-dev html-webpack-plugin

   • Change: Created webpack.web.config.js (see code above).
   • Change: Added to package.json:

     "build:web": "webpack --config webpack.web.config.js",

These changes transform ninjam-js into a functional web app, leveraging updated tools and libraries while preserving the original codebase’s structure. You can now load dist/web/index.html in a modern browser to use the application.

---

(One final note: just because Grok says it was successful doesn't mean it will actually work. There might be other steps we as humans can still do better; and there might be flawed assumptions about whether it is fully functional when launched in a browser. Anyway, as noted going in, to whatever degree it does work in a browser would be mainly for testing for now, while the real motivation for doing this is to power a React Native NINJAM client for musicians using iPad or Android tablets.)

[brudo]

I took a quick look at this, in a test of what would happen if I tried to code. No regrets for trying, but my brain was burning long before I got anywhere. I have at least ruled out that troubleshooting deprecated versions while trying to rescue a package last touched a decade ago on a framework I've never used but that has matured significantly during those years, is now completely outside my wheelhouse... and I used to like grinding at a problem, but I guess I wore out that muscle.

The steps as relayed by the AI were off, and the number of deprecated package is much larger than was noted. The main files I had to update were package.json, webpack.config.js, and app/package.json. I could offer it as a PR, but it doesn't complete this and I don't think I'm the one to do it! Better for someone else to start from last commit, and just update everything to latest stable, and hack away at whatever is broken until it works again.

I will help you test it, said the cat!