Upgrade node

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015"]
+  "presets": ["@babel/preset-env"]
 }

.env

@@ -3,6 +3,6 @@ IMAGE_TAG=develop
 ENVIRONMENT=production
 DESCRIPTION=
 TEST_HTML=
-NODE_VERSION=6.14.3
+NODE_VERSION=16.13.2
 # add '-debug' for VNC support
 SELENIUM_IMAGE_SUFFIX=

.nvmrc

@@ -1 +1 @@
-lts/boron
+lts/gallium

.stylelintrc

@@ -1,4 +1,8 @@
 {
+  "extends": ["stylelint-config-standard-scss"],
+  "plugins": [
+    "stylelint-selector-bem-pattern"
+  ],
   "rules": {
     "block-closing-brace-newline-after": ["always", {"ignoreAtRules": ["if", "else"]}],
     "block-no-empty": true,
@@ -8,7 +12,6 @@
     "color-hex-length": "short",
     "color-no-invalid-hex": true,
     "comment-empty-line-before": "always",
-    "block-no-single-line": true,
     "declaration-block-semicolon-newline-after": "always",
     "declaration-block-semicolon-space-before": "never",
     "declaration-block-trailing-semicolon": "always",
@@ -18,7 +21,7 @@
     "indentation": 2,
     "max-empty-lines": 1,
     "no-eol-whitespace": true,
-    "no-missing-eof-newline": true,
+    "no-missing-end-of-source-newline": true,
     "number-leading-zero": "always",
     "number-no-trailing-zeros": true,
     "selector-combinator-space-after": "always",
@@ -27,6 +30,51 @@
     "selector-list-comma-space-before": "never",
     "string-quotes": "double",
     "value-list-comma-space-after": "always-single-line",
-    "value-list-comma-space-before": "never"
+    "value-list-comma-space-before": "never",
+    "declaration-block-no-duplicate-properties": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "no-descending-specificity": null,
+    "no-duplicate-selectors": null,
+    "number-max-precision": null,
+    "selector-class-pattern": null,
+    "scss/dollar-variable-pattern": null,
+    "at-rule-empty-line-before": null,
+    "rule-empty-line-before": null,
+    "declaration-empty-line-before": null,
+    "selector-pseudo-element-colon-notation": null,
+    "block-closing-brace-empty-line-before": null,
+    "scss/at-mixin-argumentless-call-parentheses": null,
+    "scss/double-slash-comment-empty-line-before": null,
+    "scss/at-import-no-partial-leading-underscore": null,
+    "property-no-vendor-prefix": null,
+    "selector-no-vendor-prefix": null,
+    "shorthand-property-no-redundant-values": null,
+    "alpha-value-notation": null,
+    "function-url-quotes": null,
+    "function-comma-space-after": null,
+    "scss/at-rule-conditional-no-parentheses": null,
+    "max-line-length": null,
+    "color-function-notation": null,
+    "scss/at-mixin-pattern": null,
+    "block-closing-brace-newline-before": null,
+    "scss/operator-no-unspaced": null,
+    "scss/no-global-function-names": null,
+    "selector-max-empty-lines": null,
+    "selector-descendant-combinator-no-non-space": null,
+    "comment-whitespace-inside": null,
+    "scss/double-slash-comment-whitespace-inside": null,
+    "selector-id-pattern": null,
+    "scss/at-import-partial-extension": null,
+    "scss/dollar-variable-empty-line-before": null,
+    "value-keyword-case": null,
+    "scss/comment-no-empty": null,
+    "scss/at-mixin-parentheses-space-before": null,
+    "scss/at-else-closing-brace-newline-after": null,
+    "scss/at-else-closing-brace-space-after": null,
+    "scss/at-if-closing-brace-space-after": null,
+    "scss/at-if-closing-brace-newline-after": null,
+    "plugin/selector-bem-pattern": {
+      "preset": "bem"
+    }
   }
 }

Dockerfile.assets-builder

@@ -9,21 +9,31 @@ COPY .babelrc \
     .jscsrc \
     .jshintrc \
     .stylelintrc \
-    gulpfile.js \
+    package.json \
+    Makefile \
     ./
 
 COPY --from=npm /node_modules/ node_modules/
 
-ARG environment=production
+RUN apt-get update \
+    && apt-get install -y wget gnupg \
+    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
+    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
+    && apt-get update \
+    && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf libxss1 \
+      --no-install-recommends \
+    && rm -rf /var/lib/apt/lists/*
+
+ARG ENVIRONMENT=production
 
 COPY assets/fonts/ assets/fonts/
-RUN node_modules/.bin/gulp --environment ${environment} fonts
+RUN make fonts
 
 COPY assets/img/ assets/img/
-RUN node_modules/.bin/gulp --environment ${environment} img
+RUN make images
 
 COPY assets/js/ assets/js/
-RUN node_modules/.bin/gulp --environment ${environment} js
+RUN make source/assets/js/main.js
 
 COPY assets/sass/ assets/sass/
-RUN node_modules/.bin/gulp --environment ${environment} generateCss
+RUN make source/assets/css/all.css

Dockerfile.ci

@@ -7,7 +7,5 @@ COPY source/_patterns/00-atoms/errors/ source/_patterns/00-atoms/errors/
 COPY test-selenium/ test-selenium/
 COPY test/ test/
 
-RUN mkdir -p test/build && \
-    chown --recursive node:node test/build
-
-USER node
+RUN apt-get update
+RUN apt-get install -y chromium

Dockerfile.npm

@@ -1,7 +1,7 @@
 ARG node_version
 FROM node:${node_version}
 
-COPY npm-shrinkwrap.json \
+COPY package-lock.json \
     package.json \
     ./
 

Dockerfile.npm-watch

@@ -0,0 +1,9 @@
+FROM node:16.15-slim
+RUN mkdir /opt/pattern-library
+# this expects a volume to be mounted to /opt/pattern-library
+WORKDIR /opt/pattern-library
+COPY package-lock.json \
+    package.json \
+    ./
+
+RUN npm install

Dockerfile.watch

@@ -0,0 +1,5 @@
+FROM php:7.4-cli
+RUN mkdir /opt/pattern-library
+# this expects a volume to be mounted to /opt/pattern-library
+WORKDIR /opt/pattern-library
+

Makefile

@@ -0,0 +1,106 @@
+
+PROJECT := $(notdir $(CURDIR))
+NODE_VERSION ?= gallium
+PHP_VERSION ?= 7.3-fpm
+COMPOSER_VERSION ?= 1.6.4
+PORT ?= 8889
+
+# Source files that when changed should trigger a rebuild.
+FONTS = $(shell find assets/fonts -type f)
+SASS = $(shell find assets/sass -type f)
+JAVASCRIPT = $(shell find assets/js -type f)
+SOURCES = $(wildcard assets/js/**/* assets/sass/**/* source/**/*)
+
+TESTS = $(wildcard test/*.spec.js)
+TESTS_OUTPUT = $(patsubst test/%,test/build/%,$(TESTS))
+TESTS_HTML = $(patsubst test/%.spec.js,test/%.html,$(TESTS))
+
+SASS_ARGS =
+
+ifeq ($(ENVIRONMENT),production)
+  SASS_ARGS=--output-style compressed
+endif
+
+JS_ARGS=--debug ./assets/js/main.js | npx exorcist ./source/assets/js/main.js.map > ./source/assets/js/main.js && cp assets/js/elife-loader.js ./source/assets/js/elife-loader.js
+
+ifeq ($(ENVIRONMENT),production)
+  JS_ARGS=./assets/js/main.js | npx uglifyjs > ./source/assets/js/main.js && cp assets/js/elife-loader.js ./source/assets/js/elife-loader.js
+endif
+
+# Targets that don't result in output of the same name.
+.PHONY: start watch stop clean distclean test test_notify fonts images
+
+# When no target is specified, the default target to run.
+.DEFAULT_GOAL := start
+
+# Cleans build output and local dependencies
+distclean: clean
+	@rm -rf node_modules vendor
+
+# Cleans build output
+clean:
+	@rm -rf public source/assets test/build
+
+# Install Node.js dependencies if either, the node_modules directory is not present or package.json has changed.
+node_modules: package.json
+	@npm install
+	@touch $@
+
+# Create directories
+source/assets source/assets/js source/assets/css test/build:
+	@mkdir -p $@
+
+# Copy the fonts
+fonts: source/assets $(FONTS)
+	@mkdir -p $(CURDIR)/source/assets/fonts
+	@cp -r ./assets/fonts $(CURDIR)/source/assets
+
+# Optimise image assets
+images: node_modules
+	@mkdir -p source/assets/img/errors source/assets/img/icons source/assets/img/patterns/molecules source/assets/img/patterns/organisms
+	@npx imagemin-cli './assets/img/errors' -o ./source/assets/img/errors/ --plugin.mozjpeg.progressive=true
+	@npx imagemin-cli './assets/img/icons' -o ./source/assets/img/icons --plugin.mozjpeg.progressive=true
+	@npx imagemin-cli './assets/img/patterns/molecules' -o ./source/assets/img/patterns/molecules/ --plugin.mozjpeg.progressive=true
+	@npx imagemin-cli './assets/img/patterns/organisms' -o ./source/assets/img/patterns/organisms/ --plugin.mozjpeg.progressive=true
+
+# Convert the sass to css
+source/assets/css/all.css: node_modules source/assets/css $(SASS)
+	npx node-sass assets/sass/build.scss ./$@ --importer node_modules/node-sass-magic-importer/dist/cli.js --source-map true --source-map-root file://${PWD} --source-map-embed true --source-comments true ${SASS_ARGS}
+
+# Compile the Javascript
+source/assets/js/main.js: node_modules source/assets/js $(JAVASCRIPT)
+	@npx browserify ${JS_ARGS}
+
+# Builds the patterns, and pattern-lab static site.
+public: fonts images source/assets/css/all.css source/assets/js/main.js
+	@mkdir -p $(CURDIR)/public
+	@cp -r ./core/styleguide $(CURDIR)/public/
+	@docker run --rm -v $(CURDIR):/$(PROJECT):rw -w=/$(PROJECT) php:$(PHP_VERSION) php ./core/builder.php --generate
+
+test_notify:
+	@echo "Building tests. This might take a while. Grab a coffee!"
+
+# Builds the JavaScript for the tests
+test/build/%.spec.js: test/build test/%.spec.js
+	@npx browserify -o ./$@ ./test/$*.spec.js
+
+# Runs the tests
+test/%.html: test/build/%.spec.js
+	@npx mocha-headless-chrome -f ./$@ -a no-sandbox
+
+# Runs all tests
+test: test_notify $(TESTS_OUTPUT) $(TESTS_HTML)
+
+# Watch files for changes and rebuild when detected
+watch:
+	docker-compose -f docker-compose.watch.yml up
+
+# Builds and runs the application on localhost:8889.
+start: public
+	@echo "$(PROJECT) listening on 'http://localhost:$(PORT)'"
+	@docker run --rm --name $(PROJECT) -p $(PORT):80 -e NGINX_ENTRYPOINT_QUIET_LOGS=1 -v $(CURDIR)/public:/usr/share/nginx/html/:ro nginx:alpine
+
+# If running, stops the container.
+stop:
+	@echo $(SOURCES)
+	@-docker stop $(PROJECT)

assets/js/elife-loader.js

@@ -1,6 +1,6 @@
 (function (window) {
   'use strict';
-
+console.log('foo');
   try {
     var scriptPaths,
         $body;

bin/dev

@@ -1,34 +1,12 @@
-#!/usr/bin/env bash
-# First time...
-if [ ! -d ./public ]; then
-  echo -e "Setting up for the first time...";
-  npm install
-  mkdir ./public
-  cp -r ./core/styleguide ./public/
-fi
-
-PORT=${1:-8889}
-
-echo "Building patterns..."
-node_modules/.bin/gulp
-
-(while true; do
-  node_modules/.bin/gulp watch && sleep 5
-done) & pid=$!
-PID_LIST+=" $pid";
+PORT=8889
 
 # Need to generate before watch to ensure images are in the right place.
 php ./core/builder.php --generate
 
-php ./core/builder.php --watch > /dev/null 2>&1 & pid=$!
-PID_LIST+=" $pid";
+php ./core/builder.php --watch > /dev/null 2>&1 &
 
 php -S 0.0.0.0:${PORT} -t ./public > /dev/null 2>&1 & pid=$!
-PID_LIST+=" $pid";
-
-trap "kill ${PID_LIST}" SIGINT
 
 echo "Running Pattern Library at http://localhost:${PORT}/";
-wait ${PID_LIST}
-echo
+wait $pid
 echo "Stopping pattern library, gulp and server.";

docker-compose.override.yml

@@ -12,7 +12,6 @@ services:
             - node_modules:/srv/pattern-library/node_modules
             - source_assets:/srv/pattern-library/source/assets
             - ./.container_source_assets:/srv/pattern-library/.container_source_assets
-            - test_build:/srv/pattern-library/test/build
     ui-builder:
         volumes:
             - ./source:/source
@@ -23,7 +22,7 @@ services:
             - public:/usr/share/nginx/html
     tests:
         image: elifesciences/pattern-library_assets-builder:${IMAGE_TAG}
-        command: node_modules/.bin/gulp --test-html=${TEST_HTML} tests:watch
+        command: make test
         ports:
             - "3000:3000"
             - "3001:3001"
@@ -32,12 +31,10 @@ services:
             - ./:/srv/pattern-library
             - /srv/pattern-library/node_modules
             - source_assets:/srv/pattern-library/source/assets
-            - test_build:/srv/pattern-library/test/build
         depends_on:
             - assets-builder
 
 volumes:
     node_modules:
     source_assets:
-    test_build:
     public: