feat: More development options

.gitignore

@@ -12,4 +12,5 @@ tsconfig.tsbuildinfo
 /packages/*/output/*
 
 # Created by WebPack and/or plugins
+/packages/userscript/bundle/*-dev.*
 /packages/userscript/node_modules

DEVELOPMENT.md

@@ -4,6 +4,10 @@
 
 The project is set up to be used with [VS Code](https://code.visualstudio.com/). While other editors will work fine, some integrations have been prepared to make the development process easier.
 
+### Introduction
+
+The script is written in [TypeScript](https://www.typescriptlang.org/). The JS userscript itself is not intended to be edited. Changes need to be made in [userscript source code](https://github.com/oliversalzburg/cbc-kitten-scientists/tree/master/packages/userscript/source) and then be compiled into the userscript.
+
 ### Prerequisites
 
 The development environment is expected to be a POSIX-compliant system. On Windows, WSL will do fine.
@@ -12,7 +16,9 @@ You will need [NodeJS](https://nodejs.org/) and [yarn](https://yarnpkg.com/getti
 
 Additionally, you will need to have [Docker](https://www.docker.com/get-started) available, to use the container-based Kitten Game development server. If you do not have Docker, you can still build a release version of the script and drop that into your userscript manager.
 
-### Development
+### Development (with Kitten Game container)
+
+The development container provides a version of Kitten Game that already a Kitten Scientists version injected into it, based on your local development state.
 
 1. Start a watcher to continuously rebuild KS when you make code changes.
 
@@ -32,6 +38,28 @@ Additionally, you will need to have [Docker](https://www.docker.com/get-started)
 
    You will need to manually reload the page after each build to get the latest changes in the browser.
 
+When the container is built, it downloads the latest version of the game from https://bitbucket.org/bloodrizer/kitten-game.
+
+Additionally, the Kitten Scientists will use a pre-configured set of options. This makes it easier to always start debugging with a defined state.
+
+If you need to make changes to either the stored game state or the pre-configured options, see the [`packages/userscript/source/fixtures`](https://github.com/oliversalzburg/cbc-kitten-scientists/tree/master/packages/userscript/source/fixtures) directory.
+The savegame data is a simple export from the game and the settings are a copy of the object that is stored in localStorage. This can be accessed through the DevTools of the browser.
+
+If you have another savegame to load, you can set the path in the environment variable `KG_SAVEGAME`, the default is `"./fixtures/lategame"`.  
+If you have other settings to load, you can set the path in the environment variable `KS_SETTINGS`, the default is `"./fixtures/localstorage.json"`.
+
+### Development (without container)
+
+To develop without containers, you can build a development version of the userscript with full debugging information.
+
+1. Run the build script.
+
+   ```shell
+   yarn userscript:preview
+   ```
+
+   The userscript is placed in the `packages/userscript/bundle` directory.
+
 ### Type-checking
 
 To fill the **Problems** panel in VS Code with all current, type-related errors, run the `typecheck:all` npm task in VS Code.

packages/userscript/package.json

@@ -16,6 +16,7 @@
   "author": "Oliver Salzburg <oliver.salzburg@gmail.com>",
   "scripts": {
     "userscript:build": "webpack --config webpack.config.inject.js",
+    "userscript:preview": "NODE_ENV=development webpack --config webpack.config.userscript.js && rm -rf node_modules",
     "userscript:release": "webpack --config webpack.config.userscript.js && rm -rf node_modules",
     "userscript:watch": "webpack --config webpack.config.inject.js --watch",
     "whoami": "echo userscript"

packages/userscript/webpack.config.inject.js

@@ -4,6 +4,9 @@ const path = require("path");
 const PnpWebpackPlugin = require("pnp-webpack-plugin");
 const webpack = require("webpack");
 
+const KG_SAVEGAME = process.env.KG_SAVEGAME ?? "./fixtures/lategame";
+const KS_SETTINGS = process.env.KS_SETTINGS ?? "./fixtures/localstorage.json";
+
 module.exports = {
   devtool: "inline-source-map",
   entry: path.resolve(__dirname, "source", "index.ts"),
@@ -22,11 +25,8 @@ module.exports = {
     filename: "kitten-scientists.inject.js",
   },
   plugins: [
-    new webpack.NormalModuleReplacementPlugin(/.\/fixtures\/savegame/, "./fixtures/lategame"),
-    new webpack.NormalModuleReplacementPlugin(
-      /.\/fixtures\/settings/,
-      "./fixtures/localstorage.json"
-    ),
+    new webpack.NormalModuleReplacementPlugin(/.\/fixtures\/savegame/, KG_SAVEGAME),
+    new webpack.NormalModuleReplacementPlugin(/.\/fixtures\/settings/, KS_SETTINGS),
   ],
   resolve: {
     extensions: [".ts", ".js"],

packages/userscript/webpack.config.userscript.js

@@ -1,14 +1,14 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 
-const dev = process.env.NODE_ENV === "development";
+const isDevBuild = process.env.NODE_ENV === "development";
 const path = require("path");
 const PnpWebpackPlugin = require("pnp-webpack-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
 const WebpackUserscript = require("webpack-userscript");
 
 module.exports = {
   entry: path.resolve(__dirname, "source", "index.ts"),
-  mode: dev ? "development" : "production",
+  mode: isDevBuild ? "development" : "production",
   module: {
     rules: [
       {
@@ -19,12 +19,12 @@ module.exports = {
     ],
   },
   optimization: {
-    minimize: true,
+    minimize: !isDevBuild,
     minimizer: [new TerserPlugin()],
   },
   output: {
     path: path.resolve(__dirname, "bundle"),
-    filename: "kitten-scientists.user.js",
+    filename: `kitten-scientists${isDevBuild ? "-dev" : ""}.user.js`,
   },
   plugins: [
     new WebpackUserscript({