Extract dom and number utilities to external files

12 files changed, 976 insertions, 242 deletions

diff --git a/.gitignore b/.gitignore
index 859b0f4..dab6f5e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,3 @@
 static/main.js
-static/main.js.map
 public
+.build
diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..21b2356
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,45 @@
+BUILD_DIRECTORY = ".build"
+
+build: static/main.js
+	@echo "Building site"
+	zola build
+
+static/main.js: $(shell find src)
+	@echo "Building $@"
+ifeq ($(DEV_MODE), true)
+	@tsc \
+    --strict \
+    --noUnusedLocals \
+    --noUnusedParameters \
+    --noImplicitReturns \
+		--outDir $(BUILD_DIRECTORY) \
+		--module es2015 \
+    src/main.ts
+	@rollup \
+		--input $(BUILD_DIRECTORY)/main.js \
+		--file $@ \
+		--format iife
+else
+	@tsc \
+		--strict \
+		--noUnusedLocals \
+		--noUnusedParameters \
+		--noImplicitReturns \
+		--outDir $(BUILD_DIRECTORY) \
+		--module es2015 \
+		src/main.ts
+	@rollup \
+		--input $(BUILD_DIRECTORY)/main.js \
+		--file $@ \
+		--format iife
+	@terser $@ \
+		--output $@ \
+		--compress \
+		--mangle
+endif
+
+clean:
+	@echo "Cleaning"
+	@rm -rf $(BUILD_DIRECTORY)
+	@rm -rf public
+	@rm -f static/main.js
diff --git a/deploy b/deploy
index 43c3adf..5d4e0ab 100755
--- a/deploy
+++ b/deploy
@@ -2,17 +2,7 @@
 set -e
 
 # Cleanup
-rm -rf public
-rm -f static/main.js
-rm -f static/main.js.map
-
-# Build JavaScript
-tsc --pretty --removeComments --strict --noUnusedLocals --noUnusedParameters --noImplicitReturns main.ts --outFile main-big.js
-closure-compiler main-big.js --js_output_file static/main.js
-rm main-big.js
-
-# Build site
-zola build
+make clean build
 
 # Transfer
 rsync -avzh public/ guyonvarch.me:/var/www/cooking.guyonvarch.me --delete
diff --git a/dev b/dev
index c8742c5..36849ac 100755
--- a/dev
+++ b/dev
@@ -2,6 +2,7 @@
 cd "$(dirname $0)"
 CMD="$1"
 PROJECT="cooking"
+export DEV_MODE=true
 
 if [ "$CMD" = "start" ]; then
 
@@ -13,20 +14,15 @@ elif [ "$CMD" = "stop" ]; then
 
 elif [ "$CMD" = "watch-ts" ]; then
 
-  tsc \
-    --watch \
-    --pretty \
-    --sourceMap \
-    --strict \
-    --noUnusedLocals \
-    --noUnusedParameters \
-    --noImplicitReturns \
-    --outDir static \
-    main.ts
+  rm -f static/main.js
+
+  while true; do
+    find src | entr -d -s "clear && make static/main.js"
+  done
 
 else
 
-  echo "Usage: $0 start|stop|watch-ts"
+  echo "Usage: $0 start|stop|watch-frontend"
   exit 1
 
 fi
diff --git a/main.ts b/main.ts
deleted file mode 100644
index c120377..0000000
--- a/main.ts
+++ /dev/null
@@ -1,217 +0,0 @@
-/* Set up done marks for steps */
-
-nodeListToArray(document.querySelectorAll('.g-Recipe__Content ol > li')).forEach(todo => {
-  todo.onclick = e => {
-    toggleClassName(todo, 'g-Recipe__Completed')
-    e.stopPropagation()
-  }
-})
-
-function toggleClassName(node: Element, className: string) {
-  if (node.className === className) {
-    node.className = ''
-  } else {
-    node.className = className
-  }
-}
-
-/* Set up inputs for the ingredients */
-
-const itemEntries =
-  nodeListToArray(document.querySelectorAll('.g-Recipe__Content ul > li'))
-    .map(itemNode => ({ tag: 'li', node: itemNode }))
-
-const h1 = document.querySelector<HTMLElement>('.g-Recipe__Content h1')
-
-if (h1 !== null) {
-  itemEntries.push(
-    { tag: 'h1'
-    , node: h1
-    }
-  )
-}
-
-const inputs = setInputs(itemEntries)
-
-inputs.map(input => {
-  input.node.oninput = e => {
-    if (e.target !==null) {
-      const parsed = parseNumber((e.target as HTMLInputElement).value)
-
-      if (parsed !== undefined && parsed.before === '' && parsed.after === '') {
-        const factor = parsed.number / input.number
-        inputs.map(input2 => {
-          if (input.node !== input2.node) {
-            input2.node.value = prettyPrintNumber(input2.number * factor)
-          }
-        })
-      }
-    }
-  }
-})
-
-interface InputEntry {
-  tag: string;
-  node: HTMLElement;
-}
-
-interface InputResult {
-  number: number,
-  node: HTMLInputElement
-}
-
-function setInputs(xs: InputEntry[]): InputResult[] {
-  const res: InputResult[] = []
-
-  xs.forEach(x => {
-    const parsed = parseNumber(x.node.innerText)
-
-    if (parsed !== undefined) {
-      const numberElement = createNumberElement(x.tag, parsed)
-      const parentNode = x.node.parentNode
-
-      if (parentNode) {
-        parentNode.replaceChild(numberElement.node, x.node)
-        res.push({
-          number: parsed.number,
-          node: numberElement.number
-        })
-      }
-    }
-  })
-
-  return res
-}
-
-interface NumberElement {
-  node: Element;
-  number: HTMLInputElement;
-}
-
-function createNumberElement(tag: string, parsedNumber: ParsedNumber): NumberElement {
-  const numberElement = h(
-    'input',
-    {
-      'class': 'g-Number',
-      'value': prettyPrintNumber(parsedNumber.number)
-    }
-  ) as HTMLInputElement
-
-  return {
-    node: h(tag, {}, [parsedNumber.before, numberElement, parsedNumber.after]),
-    number: numberElement,
-  }
-}
-
-interface ParsedNumber {
-  before: string;
-  number: number;
-  after: string;
-}
-
-function parseNumber(str: string): ParsedNumber | undefined {
-  let start;
-  for (start = 0; start < str.length; start++) {
-    if (isDigit(str.charAt(start))) {
-      break
-    }
-  }
-
-  if (start === str.length) {
-    return undefined
-  }
-
-  // Integer part
-  let integerPart = '';
-  let end = start;
-  for (; end < str.length; end++) {
-    const c = str.charAt(end)
-
-    if (!isDigit(c)) {
-      break
-    } else {
-      integerPart += c
-    }
-  }
-
-  // Decimal sign
-  if (end < str.length && (str.charAt(end) === '.' || str.charAt(end) === ',')) {
-    end++
-  }
-
-  // Decimal part
-  let decimalPart = '';
-  for (; end < str.length; end++) {
-    const c = str.charAt(end)
-
-    if (!isDigit(c)) {
-      break
-    } else {
-      decimalPart += c
-    }
-  }
-
-
-  return {
-    before: str.substring(0, start),
-    number: parseFloat(integerPart + (decimalPart !== '' ? '.' + decimalPart : '')),
-    after: str.substring(end, str.length)
-  }
-}
-
-function isDigit(c: string) {
-  return c >= '0' && c <= '9'
-}
-
-function nodeListToArray(nodeList: NodeListOf<HTMLElement>): HTMLElement[] {
-  const xs: HTMLElement[] = [];
-  nodeList.forEach(node => xs.push(node))
-  return xs
-}
-
-function prettyPrintNumber(n: number): string {
-  const xs = n.toString().split('.')
-
-  if (xs.length == 2) {
-    return xs[0] + ',' + xs[1].substring(0, 2)
-  } else {
-    return xs[0]
-  }
-}
-
-/* Element creation helper */
-
-type Attribute = string | boolean | ((e: Event) => void)
-
-type Child = Element | string
-
-function h(tag: string, attrs: {[key: string]: Attribute}, children: Array<Child> = []): Element {
-  let element = document.createElement(tag)
-
-  for (let name in attrs) {
-    let value = attrs[name]
-    if (typeof value === 'boolean') {
-      if (value) {
-        element.setAttribute(name, name)
-      }
-    } else if (typeof value === 'function') {
-      (element as any)[name] = (e: Event) => {
-        if (e.target !== null) {
-          console.log((e.target as HTMLInputElement).value)
-        }
-      }
-    } else {
-      element.setAttribute(name, value)
-    }
-  }
-
-  children.forEach(child => {
-    if (typeof child === 'string') {
-      element.appendChild(document.createTextNode(child))
-    } else {
-      element.appendChild(child)
-    }
-  })
-
-  return element
-}
diff --git a/nix/nodePackages/default.nix b/nix/nodePackages/default.nix
new file mode 100644
index 0000000..fa0a148
--- /dev/null
+++ b/nix/nodePackages/default.nix
@@ -0,0 +1,17 @@
+# This file has been generated by node2nix 1.7.0. Do not edit!
+
+{pkgs ? import <nixpkgs> {
+    inherit system;
+  }, system ? builtins.currentSystem, nodejs ? pkgs."nodejs-10_x"}:
+
+let
+  nodeEnv = import ./node-env.nix {
+    inherit (pkgs) stdenv python2 utillinux runCommand writeTextFile;
+    inherit nodejs;
+    libtool = if pkgs.stdenv.isDarwin then pkgs.darwin.cctools else null;
+  };
+in
+import ./node-packages.nix {
+  inherit (pkgs) fetchurl fetchgit;
+  inherit nodeEnv;
+}
\ No newline at end of file
diff --git a/nix/nodePackages/node-env.nix b/nix/nodePackages/node-env.nix
new file mode 100644
index 0000000..670556b
--- /dev/null
+++ b/nix/nodePackages/node-env.nix
@@ -0,0 +1,540 @@
+# This file originates from node2nix
+
+{stdenv, nodejs, python2, utillinux, libtool, runCommand, writeTextFile}:
+
+let
+  python = if nodejs ? python then nodejs.python else python2;
+
+  # Create a tar wrapper that filters all the 'Ignoring unknown extended header keyword' noise
+  tarWrapper = runCommand "tarWrapper" {} ''
+    mkdir -p $out/bin
+
+    cat > $out/bin/tar <<EOF
+    #! ${stdenv.shell} -e
+    $(type -p tar) "\$@" --warning=no-unknown-keyword --delay-directory-restore
+    EOF
+
+    chmod +x $out/bin/tar
+  '';
+
+  # Function that generates a TGZ file from a NPM project
+  buildNodeSourceDist =
+    { name, version, src, ... }:
+
+    stdenv.mkDerivation {
+      name = "node-tarball-${name}-${version}";
+      inherit src;
+      buildInputs = [ nodejs ];
+      buildPhase = ''
+        export HOME=$TMPDIR
+        tgzFile=$(npm pack | tail -n 1) # Hooks to the pack command will add output (https://docs.npmjs.com/misc/scripts)
+      '';
+      installPhase = ''
+        mkdir -p $out/tarballs
+        mv $tgzFile $out/tarballs
+        mkdir -p $out/nix-support
+        echo "file source-dist $out/tarballs/$tgzFile" >> $out/nix-support/hydra-build-products
+      '';
+    };
+
+  includeDependencies = {dependencies}:
+    stdenv.lib.optionalString (dependencies != [])
+      (stdenv.lib.concatMapStrings (dependency:
+        ''
+          # Bundle the dependencies of the package
+          mkdir -p node_modules
+          cd node_modules
+
+          # Only include dependencies if they don't exist. They may also be bundled in the package.
+          if [ ! -e "${dependency.name}" ]
+          then
+              ${composePackage dependency}
+          fi
+
+          cd ..
+        ''
+      ) dependencies);
+
+  # Recursively composes the dependencies of a package
+  composePackage = { name, packageName, src, dependencies ? [], ... }@args:
+    ''
+      DIR=$(pwd)
+      cd $TMPDIR
+
+      unpackFile ${src}
+
+      # Make the base dir in which the target dependency resides first
+      mkdir -p "$(dirname "$DIR/${packageName}")"
+
+      if [ -f "${src}" ]
+      then
+          # Figure out what directory has been unpacked
+          packageDir="$(find . -maxdepth 1 -type d | tail -1)"
+
+          # Restore write permissions to make building work
+          find "$packageDir" -type d -exec chmod u+x {} \;
+          chmod -R u+w "$packageDir"
+
+          # Move the extracted tarball into the output folder
+          mv "$packageDir" "$DIR/${packageName}"
+      elif [ -d "${src}" ]
+      then
+          # Get a stripped name (without hash) of the source directory.
+          # On old nixpkgs it's already set internally.
+          if [ -z "$strippedName" ]
+          then
+              strippedName="$(stripHash ${src})"
+          fi
+
+          # Restore write permissions to make building work
+          chmod -R u+w "$strippedName"
+
+          # Move the extracted directory into the output folder
+          mv "$strippedName" "$DIR/${packageName}"
+      fi
+
+      # Unset the stripped name to not confuse the next unpack step
+      unset strippedName
+
+      # Include the dependencies of the package
+      cd "$DIR/${packageName}"
+      ${includeDependencies { inherit dependencies; }}
+      cd ..
+      ${stdenv.lib.optionalString (builtins.substring 0 1 packageName == "@") "cd .."}
+    '';
+
+  pinpointDependencies = {dependencies, production}:
+    let
+      pinpointDependenciesFromPackageJSON = writeTextFile {
+        name = "pinpointDependencies.js";
+        text = ''
+          var fs = require('fs');
+          var path = require('path');
+
+          function resolveDependencyVersion(location, name) {
+              if(location == process.env['NIX_STORE']) {
+                  return null;
+              } else {
+                  var dependencyPackageJSON = path.join(location, "node_modules", name, "package.json");
+
+                  if(fs.existsSync(dependencyPackageJSON)) {
+                      var dependencyPackageObj = JSON.parse(fs.readFileSync(dependencyPackageJSON));
+
+                      if(dependencyPackageObj.name == name) {
+                          return dependencyPackageObj.version;
+                      }
+                  } else {
+                      return resolveDependencyVersion(path.resolve(location, ".."), name);
+                  }
+              }
+          }
+
+          function replaceDependencies(dependencies) {
+              if(typeof dependencies == "object" && dependencies !== null) {
+                  for(var dependency in dependencies) {
+                      var resolvedVersion = resolveDependencyVersion(process.cwd(), dependency);
+
+                      if(resolvedVersion === null) {
+                          process.stderr.write("WARNING: cannot pinpoint dependency: "+dependency+", context: "+process.cwd()+"\n");
+                      } else {
+                          dependencies[dependency] = resolvedVersion;
+                      }
+                  }
+              }
+          }
+
+          /* Read the package.json configuration */
+          var packageObj = JSON.parse(fs.readFileSync('./package.json'));
+
+          /* Pinpoint all dependencies */
+          replaceDependencies(packageObj.dependencies);
+          if(process.argv[2] == "development") {
+              replaceDependencies(packageObj.devDependencies);
+          }
+          replaceDependencies(packageObj.optionalDependencies);
+
+          /* Write the fixed package.json file */
+          fs.writeFileSync("package.json", JSON.stringify(packageObj, null, 2));
+        '';
+      };
+    in
+    ''
+      node ${pinpointDependenciesFromPackageJSON} ${if production then "production" else "development"}
+
+      ${stdenv.lib.optionalString (dependencies != [])
+        ''
+          if [ -d node_modules ]
+          then
+              cd node_modules
+              ${stdenv.lib.concatMapStrings (dependency: pinpointDependenciesOfPackage dependency) dependencies}
+              cd ..
+          fi
+        ''}
+    '';
+
+  # Recursively traverses all dependencies of a package and pinpoints all
+  # dependencies in the package.json file to the versions that are actually
+  # being used.
+
+  pinpointDependenciesOfPackage = { packageName, dependencies ? [], production ? true, ... }@args:
+    ''
+      if [ -d "${packageName}" ]
+      then
+          cd "${packageName}"
+          ${pinpointDependencies { inherit dependencies production; }}
+          cd ..
+          ${stdenv.lib.optionalString (builtins.substring 0 1 packageName == "@") "cd .."}
+      fi
+    '';
+
+  # Extract the Node.js source code which is used to compile packages with
+  # native bindings
+  nodeSources = runCommand "node-sources" {} ''
+    tar --no-same-owner --no-same-permissions -xf ${nodejs.src}
+    mv node-* $out
+  '';
+
+  # Script that adds _integrity fields to all package.json files to prevent NPM from consulting the cache (that is empty)
+  addIntegrityFieldsScript = writeTextFile {
+    name = "addintegrityfields.js";
+    text = ''
+      var fs = require('fs');
+      var path = require('path');
+
+      function augmentDependencies(baseDir, dependencies) {
+          for(var dependencyName in dependencies) {
+              var dependency = dependencies[dependencyName];
+
+              // Open package.json and augment metadata fields
+              var packageJSONDir = path.join(baseDir, "node_modules", dependencyName);
+              var packageJSONPath = path.join(packageJSONDir, "package.json");
+
+              if(fs.existsSync(packageJSONPath)) { // Only augment packages that exist. Sometimes we may have production installs in which development dependencies can be ignored
+                  console.log("Adding metadata fields to: "+packageJSONPath);
+                  var packageObj = JSON.parse(fs.readFileSync(packageJSONPath));
+
+                  if(dependency.integrity) {
+                      packageObj["_integrity"] = dependency.integrity;
+                  } else {
+                      packageObj["_integrity"] = "sha1-000000000000000000000000000="; // When no _integrity string has been provided (e.g. by Git dependencies), add a dummy one. It does not seem to harm and it bypasses downloads.
+                  }
+
+                  if(dependency.resolved) {
+                      packageObj["_resolved"] = dependency.resolved; // Adopt the resolved property if one has been provided
+                  } else {
+                      packageObj["_resolved"] = dependency.version; // Set the resolved version to the version identifier. This prevents NPM from cloning Git repositories.
+                  }
+
+                  if(dependency.from !== undefined) { // Adopt from property if one has been provided
+                      packageObj["_from"] = dependency.from;
+                  }
+
+                  fs.writeFileSync(packageJSONPath, JSON.stringify(packageObj, null, 2));
+              }
+
+              // Augment transitive dependencies
+              if(dependency.dependencies !== undefined) {
+                  augmentDependencies(packageJSONDir, dependency.dependencies);
+              }
+          }
+      }
+
+      if(fs.existsSync("./package-lock.json")) {
+          var packageLock = JSON.parse(fs.readFileSync("./package-lock.json"));
+
+          if(packageLock.lockfileVersion !== 1) {
+             process.stderr.write("Sorry, I only understand lock file version 1!\n");
+             process.exit(1);
+          }
+
+          if(packageLock.dependencies !== undefined) {
+              augmentDependencies(".", packageLock.dependencies);
+          }
+      }
+    '';
+  };
+
+  # Reconstructs a package-lock file from the node_modules/ folder structure and package.json files with dummy sha1 hashes
+  reconstructPackageLock = writeTextFile {
+    name = "addintegrityfields.js";
+    text = ''
+      var fs = require('fs');
+      var path = require('path');
+
+      var packageObj = JSON.parse(fs.readFileSync("package.json"));
+
+      var lockObj = {
+          name: packageObj.name,
+          version: packageObj.version,
+          lockfileVersion: 1,
+          requires: true,
+          dependencies: {}
+      };
+
+      function augmentPackageJSON(filePath, dependencies) {
+          var packageJSON = path.join(filePath, "package.json");
+          if(fs.existsSync(packageJSON)) {
+              var packageObj = JSON.parse(fs.readFileSync(packageJSON));
+              dependencies[packageObj.name] = {
+                  version: packageObj.version,
+                  integrity: "sha1-000000000000000000000000000=",
+                  dependencies: {}
+              };
+              processDependencies(path.join(filePath, "node_modules"), dependencies[packageObj.name].dependencies);
+          }
+      }
+
+      function processDependencies(dir, dependencies) {
+          if(fs.existsSync(dir)) {
+              var files = fs.readdirSync(dir);
+
+              files.forEach(function(entry) {
+                  var filePath = path.join(dir, entry);
+                  var stats = fs.statSync(filePath);
+
+                  if(stats.isDirectory()) {
+                      if(entry.substr(0, 1) == "@") {
+                          // When we encounter a namespace folder, augment all packages belonging to the scope
+                          var pkgFiles = fs.readdirSync(filePath);
+
+                          pkgFiles.forEach(function(entry) {
+                              if(stats.isDirectory()) {
+                                  var pkgFilePath = path.join(filePath, entry);
+                                  augmentPackageJSON(pkgFilePath, dependencies);
+                              }
+                          });
+                      } else {
+                          augmentPackageJSON(filePath, dependencies);
+                      }
+                  }
+              });
+          }
+      }
+
+      processDependencies("node_modules", lockObj.dependencies);
+
+      fs.writeFileSync("package-lock.json", JSON.stringify(lockObj, null, 2));
+    '';
+  };
+
+  prepareAndInvokeNPM = {packageName, bypassCache, reconstructLock, npmFlags, production}:
+    let
+      forceOfflineFlag = if bypassCache then "--offline" else "--registry http://www.example.com";
+    in
+    ''
+        # Pinpoint the versions of all dependencies to the ones that are actually being used
+        echo "pinpointing versions of dependencies..."
+        source $pinpointDependenciesScriptPath
+
+        # Patch the shebangs of the bundled modules to prevent them from
+        # calling executables outside the Nix store as much as possible
+        patchShebangs .
+
+        # Deploy the Node.js package by running npm install. Since the
+        # dependencies have been provided already by ourselves, it should not
+        # attempt to install them again, which is good, because we want to make
+        # it Nix's responsibility. If it needs to install any dependencies
+        # anyway (e.g. because the dependency parameters are
+        # incomplete/incorrect), it fails.
+        #
+        # The other responsibilities of NPM are kept -- version checks, build
+        # steps, postprocessing etc.
+
+        export HOME=$TMPDIR
+        cd "${packageName}"
+        runHook preRebuild
+
+        ${stdenv.lib.optionalString bypassCache ''
+          ${stdenv.lib.optionalString reconstructLock ''
+            if [ -f package-lock.json ]
+            then
+                echo "WARNING: Reconstruct lock option enabled, but a lock file already exists!"
+                echo "This will most likely result in version mismatches! We will remove the lock file and regenerate it!"
+                rm package-lock.json
+            else
+                echo "No package-lock.json file found, reconstructing..."
+            fi
+
+            node ${reconstructPackageLock}
+          ''}
+
+          node ${addIntegrityFieldsScript}
+        ''}
+
+        npm ${forceOfflineFlag} --nodedir=${nodeSources} ${npmFlags} ${stdenv.lib.optionalString production "--production"} rebuild
+
+        if [ "$dontNpmInstall" != "1" ]
+        then
+            # NPM tries to download packages even when they already exist if npm-shrinkwrap is used.
+            rm -f npm-shrinkwrap.json
+
+            npm ${forceOfflineFlag} --nodedir=${nodeSources} ${npmFlags} ${stdenv.lib.optionalString production "--production"} install
+        fi
+    '';
+
+  # Builds and composes an NPM package including all its dependencies
+  buildNodePackage =
+    { name
+    , packageName
+    , version
+    , dependencies ? []
+    , buildInputs ? []
+    , production ? true
+    , npmFlags ? ""
+    , dontNpmInstall ? false
+    , bypassCache ? false
+    , reconstructLock ? false
+    , preRebuild ? ""
+    , dontStrip ? true
+    , unpackPhase ? "true"
+    , buildPhase ? "true"
+    , ... }@args:
+
+    let
+      extraArgs = removeAttrs args [ "name" "dependencies" "buildInputs" "dontStrip" "dontNpmInstall" "preRebuild" "unpackPhase" "buildPhase" ];
+    in
+    stdenv.mkDerivation ({
+      name = "node_${name}-${version}";
+      buildInputs = [ tarWrapper python nodejs ]
+        ++ stdenv.lib.optional (stdenv.isLinux) utillinux
+        ++ stdenv.lib.optional (stdenv.isDarwin) libtool
+        ++ buildInputs;
+
+      inherit dontStrip; # Stripping may fail a build for some package deployments
+      inherit dontNpmInstall preRebuild unpackPhase buildPhase;
+
+      compositionScript = composePackage args;
+      pinpointDependenciesScript = pinpointDependenciesOfPackage args;
+
+      passAsFile = [ "compositionScript" "pinpointDependenciesScript" ];
+
+      installPhase = ''
+        # Create and enter a root node_modules/ folder
+        mkdir -p $out/lib/node_modules
+        cd $out/lib/node_modules
+
+        # Compose the package and all its dependencies
+        source $compositionScriptPath
+
+        ${prepareAndInvokeNPM { inherit packageName bypassCache reconstructLock npmFlags production; }}
+
+        # Create symlink to the deployed executable folder, if applicable
+        if [ -d "$out/lib/node_modules/.bin" ]
+        then
+            ln -s $out/lib/node_modules/.bin $out/bin
+        fi
+
+        # Create symlinks to the deployed manual page folders, if applicable
+        if [ -d "$out/lib/node_modules/${packageName}/man" ]
+        then
+            mkdir -p $out/share
+            for dir in "$out/lib/node_modules/${packageName}/man/"*
+            do
+                mkdir -p $out/share/man/$(basename "$dir")
+                for page in "$dir"/*
+                do
+                    ln -s $page $out/share/man/$(basename "$dir")
+                done
+            done
+        fi
+
+        # Run post install hook, if provided
+        runHook postInstall
+      '';
+    } // extraArgs);
+
+  # Builds a development shell
+  buildNodeShell =
+    { name
+    , packageName
+    , version
+    , src
+    , dependencies ? []
+    , buildInputs ? []
+    , production ? true
+    , npmFlags ? ""
+    , dontNpmInstall ? false
+    , bypassCache ? false
+    , reconstructLock ? false
+    , dontStrip ? true
+    , unpackPhase ? "true"
+    , buildPhase ? "true"
+    , ... }@args:
+
+    let
+      extraArgs = removeAttrs args [ "name" "dependencies" "buildInputs" ];
+
+      nodeDependencies = stdenv.mkDerivation ({
+        name = "node-dependencies-${name}-${version}";
+
+        buildInputs = [ tarWrapper python nodejs ]
+          ++ stdenv.lib.optional (stdenv.isLinux) utillinux
+          ++ stdenv.lib.optional (stdenv.isDarwin) libtool
+          ++ buildInputs;
+
+        inherit dontStrip; # Stripping may fail a build for some package deployments
+        inherit dontNpmInstall unpackPhase buildPhase;
+
+        includeScript = includeDependencies { inherit dependencies; };
+        pinpointDependenciesScript = pinpointDependenciesOfPackage args;
+
+        passAsFile = [ "includeScript" "pinpointDependenciesScript" ];
+
+        installPhase = ''
+          mkdir -p $out/${packageName}
+          cd $out/${packageName}
+
+          source $includeScriptPath
+
+          # Create fake package.json to make the npm commands work properly
+          cp ${src}/package.json .
+          chmod 644 package.json
+          ${stdenv.lib.optionalString bypassCache ''
+            if [ -f ${src}/package-lock.json ]
+            then
+                cp ${src}/package-lock.json .
+            fi
+          ''}
+
+          # Go to the parent folder to make sure that all packages are pinpointed
+          cd ..
+          ${stdenv.lib.optionalString (builtins.substring 0 1 packageName == "@") "cd .."}
+
+          ${prepareAndInvokeNPM { inherit packageName bypassCache reconstructLock npmFlags production; }}
+
+          # Expose the executables that were installed
+          cd ..
+          ${stdenv.lib.optionalString (builtins.substring 0 1 packageName == "@") "cd .."}
+
+          mv ${packageName} lib
+          ln -s $out/lib/node_modules/.bin $out/bin
+        '';
+      } // extraArgs);
+    in
+    stdenv.mkDerivation {
+      name = "node-shell-${name}-${version}";
+
+      buildInputs = [ python nodejs ] ++ stdenv.lib.optional (stdenv.isLinux) utillinux ++ buildInputs;
+      buildCommand = ''
+        mkdir -p $out/bin
+        cat > $out/bin/shell <<EOF
+        #! ${stdenv.shell} -e
+        $shellHook
+        exec ${stdenv.shell}
+        EOF
+        chmod +x $out/bin/shell
+      '';
+
+      # Provide the dependencies in a development shell through the NODE_PATH environment variable
+      inherit nodeDependencies;
+      shellHook = stdenv.lib.optionalString (dependencies != []) ''
+        export NODE_PATH=$nodeDependencies/lib/node_modules
+        export PATH="$nodeDependencies/bin:$PATH"
+      '';
+    };
+in
+{
+  buildNodeSourceDist = stdenv.lib.makeOverridable buildNodeSourceDist;
+  buildNodePackage = stdenv.lib.makeOverridable buildNodePackage;
+  buildNodeShell = stdenv.lib.makeOverridable buildNodeShell;
+}
diff --git a/nix/nodePackages/node-packages.nix b/nix/nodePackages/node-packages.nix
new file mode 100644
index 0000000..29f40e4
--- /dev/null
+++ b/nix/nodePackages/node-packages.nix
@@ -0,0 +1,138 @@
+# This file has been generated by node2nix 1.7.0. Do not edit!
+
+{nodeEnv, fetchurl, fetchgit, globalBuildInputs ? []}:
+
+let
+  sources = {
+    "@types/estree-0.0.42" = {
+      name = "_at_types_slash_estree";
+      packageName = "@types/estree";
+      version = "0.0.42";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/@types/estree/-/estree-0.0.42.tgz";
+        sha512 = "K1DPVvnBCPxzD+G51/cxVIoc2X8uUVl1zpJeE6iKcgHMj4+tbat5Xu4TjV7v2QSDbIeAfLi2hIk+u2+s0MlpUQ==";
+      };
+    };
+    "@types/node-13.7.0" = {
+      name = "_at_types_slash_node";
+      packageName = "@types/node";
+      version = "13.7.0";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/@types/node/-/node-13.7.0.tgz";
+        sha512 = "GnZbirvmqZUzMgkFn70c74OQpTTUcCzlhQliTzYjQMqg+hVKcDnxdL19Ne3UdYzdMA/+W3eb646FWn/ZaT1NfQ==";
+      };
+    };
+    "acorn-7.1.0" = {
+      name = "acorn";
+      packageName = "acorn";
+      version = "7.1.0";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz";
+        sha512 = "kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ==";
+      };
+    };
+    "buffer-from-1.1.1" = {
+      name = "buffer-from";
+      packageName = "buffer-from";
+      version = "1.1.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz";
+        sha512 = "MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==";
+      };
+    };
+    "commander-2.20.3" = {
+      name = "commander";
+      packageName = "commander";
+      version = "2.20.3";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz";
+        sha512 = "GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==";
+      };
+    };
+    "source-map-0.6.1" = {
+      name = "source-map";
+      packageName = "source-map";
+      version = "0.6.1";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz";
+        sha512 = "UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==";
+      };
+    };
+    "source-map-support-0.5.16" = {
+      name = "source-map-support";
+      packageName = "source-map-support";
+      version = "0.5.16";
+      src = fetchurl {
+        url = "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.16.tgz";
+        sha512 = "efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==";
+      };
+    };
+  };
+in
+{
+  rollup = nodeEnv.buildNodePackage {
+    name = "rollup";
+    packageName = "rollup";
+    version = "1.31.0";
+    src = fetchurl {
+      url = "https://registry.npmjs.org/rollup/-/rollup-1.31.0.tgz";
+      sha512 = "9C6ovSyNeEwvuRuUUmsTpJcXac1AwSL1a3x+O5lpmQKZqi5mmrjauLeqIjvREC+yNRR8fPdzByojDng+af3nVw==";
+    };
+    dependencies = [
+      sources."@types/estree-0.0.42"
+      sources."@types/node-13.7.0"
+      sources."acorn-7.1.0"
+    ];
+    buildInputs = globalBuildInputs;
+    meta = {
+      description = "Next-generation ES module bundler";
+      homepage = https://github.com/rollup/rollup;
+      license = "MIT";
+    };
+    production = true;
+    bypassCache = true;
+    reconstructLock = true;
+  };
+  terser = nodeEnv.buildNodePackage {
+    name = "terser";
+    packageName = "terser";
+    version = "4.6.3";
+    src = fetchurl {
+      url = "https://registry.npmjs.org/terser/-/terser-4.6.3.tgz";
+      sha512 = "Lw+ieAXmY69d09IIc/yqeBqXpEQIpDGZqT34ui1QWXIUpR2RjbqEkT8X7Lgex19hslSqcWM5iMN2kM11eMsESQ==";
+    };
+    dependencies = [
+      sources."buffer-from-1.1.1"
+      sources."commander-2.20.3"
+      sources."source-map-0.6.1"
+      sources."source-map-support-0.5.16"
+    ];
+    buildInputs = globalBuildInputs;
+    meta = {
+      description = "JavaScript parser, mangler/compressor and beautifier toolkit for ES6+";
+      homepage = https://terser.org/;
+      license = "BSD-2-Clause";
+    };
+    production = true;
+    bypassCache = true;
+    reconstructLock = true;
+  };
+  typescript = nodeEnv.buildNodePackage {
+    name = "typescript";
+    packageName = "typescript";
+    version = "3.7.5";
+    src = fetchurl {
+      url = "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz";
+      sha512 = "/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==";
+    };
+    buildInputs = globalBuildInputs;
+    meta = {
+      description = "TypeScript is a language for application scale JavaScript development";
+      homepage = https://www.typescriptlang.org/;
+      license = "Apache-2.0";
+    };
+    production = true;
+    bypassCache = true;
+    reconstructLock = true;
+  };
+}
\ No newline at end of file
diff --git a/shell.nix b/shell.nix
index 15ea369..02dacb8 100644
--- a/shell.nix
+++ b/shell.nix
@@ -1,11 +1,20 @@
 with import (builtins.fetchTarball {
   url = https://github.com/NixOS/nixpkgs/archive/19.09.tar.gz;
   sha256 = "0mhqhq21y5vrr1f30qd2bvydv4bbbslvyzclhw0kdxmkgg3z4c92";
-}) {};
+}) {
+  overlays = [
+    (self: super: {
+      nodePackages = import ./nix/nodePackages {};
+    })
+  ];
+};
+
 
 mkShell {
   buildInputs = [
-    closurecompiler
+    entr
+    nodePackages.rollup
+    nodePackages.terser
     nodePackages.typescript
     tmux
     tmuxinator
diff --git a/src/dom.ts b/src/dom.ts
new file mode 100644
index 0000000..6b1c803
--- /dev/null
+++ b/src/dom.ts
@@ -0,0 +1,54 @@
+type Attribute = string | boolean | ((e: Event) => void)
+
+type Child = Element | string
+
+export function h(tag: string, attrs: {[key: string]: Attribute}, children: Array<Child> = []): Element {
+  let element = document.createElement(tag)
+
+  for (let name in attrs) {
+    let value = attrs[name]
+    if (typeof value === 'boolean') {
+      if (value) {
+        element.setAttribute(name, name)
+      }
+    } else if (typeof value === 'function') {
+      (element as any)[name] = (e: Event) => {
+        (value as ((e: Event) => void))(e)
+      }
+    } else {
+      element.setAttribute(name, value)
+    }
+  }
+
+  children.forEach(child => {
+    if (typeof child === 'string') {
+      element.appendChild(document.createTextNode(child))
+    } else {
+      element.appendChild(child)
+    }
+  })
+
+  return element
+}
+
+export function toggleClassName(node: Element, className: string) {
+  if (node.className === className) {
+    node.className = ''
+  } else {
+    node.className = className
+  }
+}
+
+export function nodeListToArray(nodeList: NodeListOf<HTMLElement>): HTMLElement[] {
+  const xs: HTMLElement[] = [];
+  nodeList.forEach(node => xs.push(node))
+  return xs
+}
+
+export function replace(node: Node, replacement: Node) {
+  const parentNode = node.parentNode
+
+  if (parentNode) {
+    parentNode.replaceChild(replacement, node)
+  }
+}
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..ad83591
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,71 @@
+import * as number from './number'
+import * as dom from './dom'
+
+/* Set up inputs for the ingredients */
+
+const itemEntries =
+  dom.nodeListToArray(document.querySelectorAll('.g-Recipe__Content ul > li'))
+    .map(itemNode => ({ tag: 'li', node: itemNode }))
+
+const h1 = document.querySelector<HTMLElement>('.g-Recipe__Content h1')
+
+if (h1 !== null) {
+  itemEntries.push({ tag: 'h1', node: h1 })
+}
+
+const inputs = setupInputs(itemEntries)
+
+inputs.map(input => {
+  input.node.oninput = e => {
+    if (e.target !==null) {
+      const parsed = number.parse((e.target as HTMLInputElement).value)
+
+      if (parsed !== undefined && parsed.before === '' && parsed.after === '') {
+        const factor = parsed.number / input.number
+        inputs.map(input2 => {
+          if (input.node !== input2.node) {
+            input2.node.value = number.prettyPrint(input2.number * factor)
+          }
+        })
+      }
+    }
+  }
+})
+
+interface InputEntry {
+  tag: string;
+  node: HTMLElement;
+}
+
+interface InputResult {
+  number: number,
+  node: HTMLInputElement
+}
+
+function setupInputs(xs: InputEntry[]): InputResult[] {
+  const res: InputResult[] = []
+
+  xs.forEach(x => {
+    const parsed = number.parse(x.node.innerText)
+
+    if (parsed !== undefined) {
+      const numberNode = number.node(x.tag, parsed)
+      dom.replace(x.node, numberNode.node)
+      res.push({
+        number: parsed.number,
+        node: numberNode.number
+      })
+    }
+  })
+
+  return res
+}
+
+/* Set up done marks for steps */
+
+dom.nodeListToArray(document.querySelectorAll('.g-Recipe__Content ol > li')).forEach(todo => {
+  todo.onclick = e => {
+    dom.toggleClassName(todo, 'g-Recipe__Completed')
+    e.stopPropagation()
+  }
+})
diff --git a/src/number.ts b/src/number.ts
new file mode 100644
index 0000000..3021dc9
--- /dev/null
+++ b/src/number.ts
@@ -0,0 +1,91 @@
+import { h } from './dom'
+
+export interface Parsed {
+  before: string;
+  number: number;
+  after: string;
+}
+
+export function parse(str: string): Parsed | undefined {
+  let start;
+  for (start = 0; start < str.length; start++) {
+    if (isDigit(str.charAt(start))) {
+      break
+    }
+  }
+
+  if (start === str.length) {
+    return undefined
+  }
+
+  // Integer part
+  let integerPart = '';
+  let end = start;
+  for (; end < str.length; end++) {
+    const c = str.charAt(end)
+
+    if (!isDigit(c)) {
+      break
+    } else {
+      integerPart += c
+    }
+  }
+
+  // Decimal sign
+  if (end < str.length && (str.charAt(end) === '.' || str.charAt(end) === ',')) {
+    end++
+  }
+
+  // Decimal part
+  let decimalPart = '';
+  for (; end < str.length; end++) {
+    const c = str.charAt(end)
+
+    if (!isDigit(c)) {
+      break
+    } else {
+      decimalPart += c
+    }
+  }
+
+
+  return {
+    before: str.substring(0, start),
+    number: parseFloat(integerPart + (decimalPart !== '' ? '.' + decimalPart : '')),
+    after: str.substring(end, str.length)
+  }
+}
+
+function isDigit(c: string) {
+  return c >= '0' && c <= '9'
+}
+
+export interface Node {
+  node: Element;
+  number: HTMLInputElement;
+}
+
+export function node(tag: string, parsedNumber: Parsed): Node {
+  const numberElement = h(
+    'input',
+    {
+      'class': 'g-Number',
+      'value': prettyPrint(parsedNumber.number)
+    }
+  ) as HTMLInputElement
+
+  return {
+    node: h(tag, {}, [parsedNumber.before, numberElement, parsedNumber.after]),
+    number: numberElement,
+  }
+}
+
+export function prettyPrint(n: number): string {
+  const xs = n.toString().split('.')
+
+  if (xs.length == 2) {
+    return xs[0] + ',' + xs[1].substring(0, 2)
+  } else {
+    return xs[0]
+  }
+}