diff options
| -rw-r--r-- | .gitignore | 2 | ||||
| -rw-r--r-- | Makefile | 45 | ||||
| -rwxr-xr-x | deploy | 12 | ||||
| -rwxr-xr-x | dev | 18 | ||||
| -rw-r--r-- | main.ts | 217 | ||||
| -rw-r--r-- | nix/nodePackages/default.nix | 17 | ||||
| -rw-r--r-- | nix/nodePackages/node-env.nix | 540 | ||||
| -rw-r--r-- | nix/nodePackages/node-packages.nix | 138 | ||||
| -rw-r--r-- | shell.nix | 13 | ||||
| -rw-r--r-- | src/dom.ts | 54 | ||||
| -rw-r--r-- | src/main.ts | 71 | ||||
| -rw-r--r-- | src/number.ts | 91 |
12 files changed, 976 insertions, 242 deletions
@@ -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 @@ -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 @@ -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 @@ -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] + } +} |