Development Notes

Setup

As with most node/javascript projects, you'll need to run npm install after cloning this repository (or your fork) to download it's dependencies. After which point the general workflow we use looks like this:

• make some changes
• run the build script npm run build
• test your changes by viewing the example/demo page index.html locally

Workflow

All the source code can be found in src. As mentioned before the index.html page is a working example and can be used to test changes you make to the source code. The build folder contains the compiled source code (which is used by index.html) and can be built by running npm run build. The build process will do the following:

1. First it'll run npm run lint to make sure all the source code conforms to the JavaScript Standard Style, if it does not then it will throw errors in the console letting you know what line is off (I recommend installing the the JS Standard plugin in your code editor so you spot lint errors while you code rather than having to bounce back and fourth between your editor and console everytime you build)

2. Then it'll run npm run compile-css which takes our src/css/main.css (which contains our custom syntax highlighting themes) file as well as the codemirror CSS files and bundles them up into a js module src/css/css.js which is used by the src/main.js to inject the relevant CSS into the page.

3. Then it'll run browserify to bundle all the source code into build/netitor.js as well as terser to create the minified build build/netitor.min.js

To make things easier, you can alternatively run npm run watch which will listen for any changes to any js files in src and auto-run the build process for you everytime you make changes. NOTE: this only watches chaanges to js files, so any changes to js/css/main.css requires a manually running npm run build or npm run compile-css directly.

Testing

It's important to test any changes you make, the simplest/quickest way to test something is to open the example/demo page index.html locally in your browser (after creating a new build with your changes). This demo page creates an instance of the Neitor called ne which you can access in your browser's developer console to test further. For example, if you'd like to test a newly created theme, open the console and run: ne.theme = 'my-new-theme' (where 'my-new-theme' is the name of your new theme)

Additionally, we've created an exhaustive list of examples for testing edu-info, errors and other things available in the examples page of this Wiki. Keep in mind, these are running on GitHub (not locally on your computer) so you won't see any local changes reflected here, but you can edit the URL, replacing https://netizenorg.github.io/netitor/ (the part before #code) with your local path (for example localhost:8000/)

Code Base overview

The vast majority of the code is in src/main.js you'll notice that netitor makes heavy use of a library called CodeMirror (which is used by the vast majority of web based code editors we've inspected), you can check out their documentation here. Other files/folders to be aware of are:

• src/css/: this directory contains all of the editor's styles (including it's various syntax highlight themes)
• src/edu-data/: this directory contains all the logic and data used to explain code in the editor (see eduscraper notes below for more)
• src/hinters/: this directory contains all the logic used to create the auto-complete code-hinting lists
• src/linters/: this directory contains all the logic used to create the friendly error messages the 'lint-error' event object returned by the event listener every time the netitor spots an issue in the code.
• src/prependProxyURL.js this handles applying the proxy URLs to necessary paths when the addCustomRoot() method is used.
• index.html: this is the live demo page
• theme/ this is the live theme creator app

NPM Scripts

• npm run build: this is the script that creates (compiles) the library files itself (and places them in the build/ directory).
• npm run watch: runs a watch script which automatically runs the build script anytime changes to JavaScript files are made.
• npm run lint: we're using Standard.js as our code style, so it's best to run the linter to check and make sure everything is up to par before submitting any PRs (NOTE: this runs automatically when you run the build script).
• npm run compile-css: this script compiles any chagnes made to the .js files used to create the .css files (NOTE: this runs automatically when you run the build script).