diff --git a/.travis.yml b/.travis.yml index 6d8b348e4c..c27ebc0c77 100644 --- a/.travis.yml +++ b/.travis.yml @@ -22,7 +22,7 @@ addons: install: # clone the deps with depth 1: we know we will only ever need that one # commit. - - npm install && scripts/fetch-develop.deps.sh --depth 1 + - scripts/fetch-develop.deps.sh --depth 1 && yarn install script: - - CHROME_BIN='/usr/bin/google-chrome-stable' npm run test - - npm run lint + - CHROME_BIN='/usr/bin/google-chrome-stable' yarn test + - yarn lint diff --git a/README.md b/README.md index d7c7ba96eb..7fd2aeb8bf 100644 --- a/README.md +++ b/README.md @@ -61,51 +61,45 @@ progress on replacing this with something better. Building From Source ==================== -Riot is a modular webapp built with modern ES6 and requires a npm build system -to build. +Riot is a modular webapp built with modern ES6 and uses a Node.js build system. +Ensure you have the latest LTS version of Node.js installed (v10.x as of this +writing). -1. Install or update `node.js` so that your `node` is at least v8.12.0 (and `npm` - is at least v5.x). +Using `yarn` instead of `npm` is recommended. Please see the Yarn [install +guide](https://yarnpkg.com/docs/install/) if you do not have it already. + +1. Install or update `node.js` so that your `node` is at least v10.x. +1. Install `yarn` if not present already. 1. Clone the repo: `git clone https://github.com/vector-im/riot-web.git`. 1. Switch to the riot-web directory: `cd riot-web`. -1. Install the prerequisites: `npm install`. +1. Install the prerequisites: `yarn install`. 1. If you're using the `develop` branch then it is recommended to set up a proper development environment ("Setting up a dev environment" below) however one can install the develop versions of the dependencies instead: ```bash scripts/fetch-develop.deps.sh ``` - Note that running `npm install` will undo the symlinks put in place by - `scripts/fetch-develop.deps.sh` so you should run `npm install` first, or - run `npm link matrix-js-sdk` and `npm link matrix-react-sdk` after running - `npm install`. - - Whenever you git pull on riot-web you will also probably need to force an update + Whenever you git pull on `riot-web` you will also probably need to force an update to these dependencies - the simplest way is to re-run the script, but you can also manually update and rebuild them: ```bash cd matrix-js-sdk git pull - npm install # re-run to pull in any new dependencies - # Depending on your version of npm, npm run build may happen as part of - # the npm install above (https://docs.npmjs.com/misc/scripts#prepublish-and-prepare) - # If in doubt, run it anyway: - npm run build + yarn install # re-run to pull in any new dependencies cd ../matrix-react-sdk git pull - npm install - npm run build + yarn install ``` Or just use https://riot.im/develop - the continuous integration release of the develop branch. (Note that we don't reference the develop versions in git directly due to https://github.com/npm/npm/issues/3055.) 1. Configure the app by copying `config.sample.json` to `config.json` and modifying it (see below for details). -1. `npm run dist` to build a tarball to deploy. Untaring this file will give +1. `yarn dist` to build a tarball to deploy. Untaring this file will give a version-specific directory containing all the files that need to go on your web server. -Note that `npm run dist` is not supported on Windows, so Windows users can run `npm run build`, +Note that `yarn dist` is not supported on Windows, so Windows users can run `yarn build`, which will build all the necessary files into the `webapp` directory. The version of Riot will not appear in Settings without using the dist script. You can then mount the `webapp` directory on your webserver to actually serve up the app, which is entirely static content. @@ -188,7 +182,7 @@ appear in some websites like Facebook, and indeed Riot itself. This has to be static in the HTML and an absolute URL (and HTTP rather than HTTPS), so it's not possible for this to be an option in config.json. If you'd like to change it, you can build Riot as above, but run -`RIOT_OG_IMAGE_URL="http://example.com/logo.png" npm run build`. +`RIOT_OG_IMAGE_URL="http://example.com/logo.png" yarn build`. Alternatively, you can edit the `og:image` meta tag in `index.html` directly each time you download a new version of Riot. @@ -202,12 +196,11 @@ build it yourself. Requires Electron >=1.6.0 To run as a desktop app: 1. Follow the instructions in 'Building From Source' above, but run - `npm run build` instead of `npm run dist` (since we don't need the tarball). + `yarn build` instead of `yarn dist` (since we don't need the tarball). 2. Install electron and run it: ```bash - npm install electron - npm run electron + yarn electron ``` To build packages, use electron-builder. This is configured to output: @@ -225,8 +218,8 @@ The only platform that can build packages for all three platforms is macOS: brew install wine --without-x11 brew install mono brew install gnu-tar -npm install -npm run build:electron +yarn install +yarn build:electron ``` For other packages, use electron-builder manually. For example, to build a package @@ -244,7 +237,7 @@ Other options for running as a desktop app: * @asdf:matrix.org points out that you can use nativefier and it just works(tm) ```bash -sudo npm install nativefier -g +yarn global add nativefier nativefier https://riot.im/app/ ``` @@ -264,7 +257,7 @@ top of the underlying `matrix-react-sdk`. `matrix-react-sdk` provides both the higher and lower level React components useful for building Matrix communication apps using React. -After creating a new component you must run `npm run reskindex` to regenerate +After creating a new component you must run `yarn reskindex` to regenerate the `component-index.js` for the app (used in future for skinning). Please note that Riot is intended to run correctly without access to the public @@ -286,9 +279,8 @@ First clone and build `matrix-js-sdk`: git clone https://github.com/matrix-org/matrix-js-sdk.git pushd matrix-js-sdk git checkout develop -npm install -npm install source-map-loader # because webpack is made of fail -# see https://github.com/webpack/webpack/issues/1472 +yarn link +yarn install popd ``` @@ -298,7 +290,9 @@ Then similarly with `matrix-react-sdk`: git clone https://github.com/matrix-org/matrix-react-sdk.git pushd matrix-react-sdk git checkout develop -npm link ../matrix-js-sdk +yarn link +yarn link matrix-js-sdk +yarn install popd ``` @@ -308,10 +302,10 @@ Finally, build and start Riot itself: git clone https://github.com/vector-im/riot-web.git cd riot-web git checkout develop -npm install -npm link ../matrix-js-sdk -npm link ../matrix-react-sdk -npm start +yarn link matrix-js-sdk +yarn link matrix-react-sdk +yarn install +yarn start ``` Wait a few seconds for the initial build to finish; you should see something like: @@ -338,7 +332,7 @@ When you make changes to `matrix-react-sdk` or `matrix-js-sdk` they should be automatically picked up by webpack and built. If you add or remove any components from the Riot skin, you will need to rebuild -the skin's index by running, `npm run reskindex`. +the skin's index by running, `yarn reskindex`. If any of these steps error with, `file table overflow`, you are probably on a mac which has a very low limit on max open files. Run `ulimit -Sn 1024` and try again. @@ -354,12 +348,12 @@ are designed to run in a browser instance under the control of * Make sure you have Chrome installed (a recent version, like 59) * Make sure you have `matrix-js-sdk` and `matrix-react-sdk` installed and built, as above -* `npm run test` +* `yarn test` The above will run the tests under Chrome in a `headless` mode. You can also tell karma to run the tests in a loop (every time the source -changes), in an instance of Chrome on your desktop, with `npm run +changes), in an instance of Chrome on your desktop, with `yarn test-multi`. This also gives you the option of running the tests in 'debug' mode, which is useful for stepping through the tests in the developer tools. diff --git a/docs/translating-dev.md b/docs/translating-dev.md index d058c7cdbd..498784b804 100644 --- a/docs/translating-dev.md +++ b/docs/translating-dev.md @@ -32,14 +32,14 @@ function getColorName(hex) { 1. Check if the import ``import { _t } from 'matrix-react-sdk/lib/languageHandler';`` is present. If not add it to the other import statements. Also import `_td` if needed. 1. Add ``_t()`` to your string. (Don't forget curly braces when you assign an expression to JSX attributes in the render method). If the string is introduced at a point before the translation system has not yet been initialized, use `_td()` instead, and call `_t()` at the appropriate time. - 1. Run `npm run i18n` to update ``src/i18n/strings/en_EN.json`` + 1. Run `yarn i18n` to update ``src/i18n/strings/en_EN.json`` 1. If you added a string with a plural, you can add other English plural variants to ``src/i18n/strings/en_EN.json`` (remeber to edit the one in the same project as the source file containing your new translation). ## Editing existing strings 1. Edit every occurrence of the string inside `_t()` and `_td()` in the JSX files. -1. Run `npm run i18n` to update `src/i18n/strings/en_EN.json`. (Be sure to run this in the same project as the JSX files you just edited.) -1. Run `npm run prunei18n` to remove the old string from `src/i18n/strings/*.json`. +1. Run `yarn i18n` to update `src/i18n/strings/en_EN.json`. (Be sure to run this in the same project as the JSX files you just edited.) +1. Run `yarn prunei18n` to remove the old string from `src/i18n/strings/*.json`. ## Adding variables inside a string. diff --git a/karma.conf.js b/karma.conf.js index ae666a455b..4cb9a72956 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -9,7 +9,7 @@ var webpack_config = require('./webpack.config'); * to build everything; however it's the easiest way to load our dependencies * from node_modules. * - * If you run karma in multi-run mode (with `npm run test-multi`), it will watch + * If you run karma in multi-run mode (with `yarn test-multi`), it will watch * the tests for changes, and webpack will rebuild using a cache. This is much quicker * than a clean rebuild. */ diff --git a/package.json b/package.json index 5d1da6d88d..bd87f14855 100644 --- a/package.json +++ b/package.json @@ -32,30 +32,30 @@ "prunei18n": "matrix-prune-i18n", "build:res": "node scripts/copy-res.js", "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js", - "build:compile": "npm run reskindex && babel --source-maps -d lib src", + "build:compile": "yarn reskindex && babel --source-maps -d lib src", "build:bundle": "cross-env NODE_ENV=production webpack -p --progress --bail --mode production", "build:bundle:dev": "webpack --progress --bail --mode development", - "build:electron": "npm run clean && npm run build && npm run install:electron && build -wml --ia32 --x64", - "build:react-sdk": "node scripts/npm-sub.js matrix-react-sdk run build", - "build:js-sdk": "node scripts/npm-sub.js matrix-js-sdk run start:init", - "build": "npm run build:js-sdk && npm run build:react-sdk && npm run reskindex && npm run build:res && npm run build:bundle", - "build:dev": "npm run build:js-sdk && npm run build:react-sdk && npm run reskindex && npm run build:res && npm run build:bundle:dev", + "build:electron": "yarn clean && yarn build && yarn install:electron && build -wml --ia32 --x64", + "build:react-sdk": "node scripts/yarn-sub.js matrix-react-sdk build", + "build:js-sdk": "node scripts/yarn-sub.js matrix-js-sdk start:init", + "build": "yarn build:js-sdk && yarn build:react-sdk && yarn reskindex && yarn build:res && yarn build:bundle", + "build:dev": "yarn build:js-sdk && yarn build:react-sdk && yarn reskindex && yarn build:res && yarn build:bundle:dev", "dist": "scripts/package.sh", "install:electron": "install-app-deps", - "electron": "npm run install:electron && electron .", + "electron": "yarn install:electron && electron .", "start:res": "node scripts/copy-res.js -w", "start:js": "webpack-dev-server --host=0.0.0.0 --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js -w --progress --mode development", "start:js:prod": "cross-env NODE_ENV=production webpack-dev-server -w --progress", - "start:js-sdk": "node scripts/npm-sub.js matrix-js-sdk run start:watch", - "start:js-sdk:prod": "cross-env NODE_ENV=production node scripts/npm-sub.js matrix-js-sdk run start:watch", - "start:react-sdk": "node scripts/npm-sub.js matrix-react-sdk run start:all", - "start:react-sdk:prod": "cross-env NODE_ENV=production node scripts/npm-sub.js matrix-react-sdk run start:all", - "start": "npm run build:js-sdk && npm run build:react-sdk && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n js-sdk,react-sdk,reskindex,res,riot-js \"npm run start:js-sdk\" \"npm run start:react-sdk\" \"npm run reskindex:watch\" \"npm run start:res\" \"npm run start:js\"", - "start:prod": "npm run build:js-sdk && npm run build:react-sdk && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n js-sdk,react-sdk,reskindex,res,riot-js \"npm run start:js-sdk:prod\" \"npm run start:react-sdk:prod\" \"npm run reskindex:watch\" \"npm run start:res\" \"npm run start:js:prod\"", + "start:js-sdk": "node scripts/yarn-sub.js matrix-js-sdk start:watch", + "start:js-sdk:prod": "cross-env NODE_ENV=production node scripts/yarn-sub.js matrix-js-sdk start:watch", + "start:react-sdk": "node scripts/yarn-sub.js matrix-react-sdk start:all", + "start:react-sdk:prod": "cross-env NODE_ENV=production node scripts/yarn-sub.js matrix-react-sdk start:all", + "start": "yarn build:js-sdk && yarn build:react-sdk && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n js-sdk,react-sdk,reskindex,res,riot-js \"yarn start:js-sdk\" \"yarn start:react-sdk\" \"yarn reskindex:watch\" \"yarn start:res\" \"yarn start:js\"", + "start:prod": "yarn build:js-sdk && yarn build:react-sdk && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n js-sdk,react-sdk,reskindex,res,riot-js \"yarn start:js-sdk:prod\" \"yarn start:react-sdk:prod\" \"yarn reskindex:watch\" \"yarn start:res\" \"yarn start:js:prod\"", "lint": "eslint src/", "lintall": "eslint src/ test/", "clean": "rimraf lib webapp electron_app/dist", - "prepublish": "npm run clean && npm run build:compile", + "prepare": "yarn clean && yarn build:compile", "test": "karma start --single-run=true --autoWatch=false --browsers ChromeHeadless", "test-multi": "karma start" }, diff --git a/release.sh b/release.sh index 67869bc3c9..ff3e2ce6dc 100755 --- a/release.sh +++ b/release.sh @@ -1,6 +1,6 @@ #!/bin/bash # -# Script to perform a release of vector-web. +# Script to perform a release of riot-web. # # Requires github-changelog-generator; to install, do # pip install git+https://github.com/matrix-org/github-changelog-generator.git @@ -21,7 +21,7 @@ cd `dirname $0` for i in matrix-js-sdk matrix-react-sdk do depver=`cat package.json | jq -r .dependencies[\"$i\"]` - latestver=`npm show $i version` + latestver=`yarn info -s $i version` if [ "$depver" != "$latestver" ] then echo "The latest version of $i is $latestver but package.json depends on $depver" @@ -38,13 +38,12 @@ done # bump Electron's package.json first release="${1#v}" tag="v${release}" -echo "electron npm version" +echo "electron yarn version" cd electron_app -npm version --no-git-tag-version "$release" +yarn version --no-git-tag-version "$release" git commit package.json -m "$tag" - cd .. exec ./node_modules/matrix-js-sdk/release.sh -u vector-im -z "$orig_args" diff --git a/scripts/electron-package.sh b/scripts/electron-package.sh index 711a4a7ff8..0465081a4c 100755 --- a/scripts/electron-package.sh +++ b/scripts/electron-package.sh @@ -85,8 +85,8 @@ if [ -n "$conffile" ]; then pushd "$builddir" fi -npm install -npm run build:electron +yarn install +yarn build:electron popd diff --git a/scripts/fetch-develop.deps.sh b/scripts/fetch-develop.deps.sh index b748088adb..7fbb76f4ab 100755 --- a/scripts/fetch-develop.deps.sh +++ b/scripts/fetch-develop.deps.sh @@ -54,9 +54,6 @@ function dodep() { fi echo "$repo set to branch "`git -C "$repo" rev-parse --abbrev-ref HEAD` - - mkdir -p node_modules - npm link "./$repo" # This does an npm install for us } ############################## @@ -66,6 +63,13 @@ echo 'Setting up matrix-js-sdk' dodep matrix-org matrix-js-sdk +pushd matrix-js-sdk +yarn link +yarn install +popd + +yarn link matrix-js-sdk + echo -en 'travis_fold:end:matrix-js-sdk\r' ############################## @@ -75,23 +79,21 @@ echo 'Setting up matrix-react-sdk' dodep matrix-org matrix-react-sdk -# replace the version of js-sdk that got pulled into react-sdk with a link -# to our version. Make sure to do this *after* doing 'npm i' in react-sdk, -# otherwise npm helpfully moves another-json from matrix-js-sdk/node_modules -# into matrix-react-sdk/node_modules. -# -# (note this matches the instructions in the README.) -cd matrix-react-sdk -npm link ../matrix-js-sdk -cd ../ +pushd matrix-react-sdk +yarn link +yarn link matrix-js-sdk +yarn install +popd + +yarn link matrix-react-sdk echo -en 'travis_fold:end:matrix-react-sdk\r' ############################## -# Link the reskindex binary in place: if we used npm link, -# npm would do this for us, but we don't because we'd have -# to define the npm prefix somewhere so it could put the +# Link the reskindex binary in place: if we used `yarn link`, +# Yarn would do this for us, but we don't because we'd have +# to define the Yarn binary prefix somewhere so it could put the # intermediate symlinks there. Instead, we do it ourselves. mkdir -p node_modules/.bin ln -sfv ../matrix-react-sdk/scripts/reskindex.js node_modules/.bin/reskindex diff --git a/scripts/jenkins.sh b/scripts/jenkins.sh index 5e58a132bc..e3a6055190 100755 --- a/scripts/jenkins.sh +++ b/scripts/jenkins.sh @@ -8,31 +8,17 @@ nvm use 10 set -x -npm install - # check out corresponding branches of dependencies. -# -# clone the deps with depth 1: we know we will only ever need that one -# commit. -# We need to do this after npm install otherwise modern node versions -# just reset it back. +# clone the deps with depth 1: we know we will only ever need that one commit. `dirname $0`/fetch-develop.deps.sh --depth 1 -# install olm. A naive 'npm i ./olm/olm-*.tgz' fails because it uses the url -# from our package.json (or even matrix-js-sdk's) in preference. -# -# disabled for now, to avoid the annoying scenario of a release doing something -# different to /develop. Instead, add it to the 'npm install' list above. -# -- rav 2016/02/03 -#tar -C olm -xz < olm/olm-*.tgz -#rm -r node_modules/olm -#cp -r olm/package node_modules/olm +yarn install # run the mocha tests -npm run test +yarn test # run eslint -npm run lintall -- -f checkstyle -o eslint.xml || true +yarn lintall -- -f checkstyle -o eslint.xml || true rm dist/riot-*.tar.gz || true # rm previous artifacts without failing if it doesn't exist diff --git a/scripts/package.sh b/scripts/package.sh index 23d0925b05..fbca9a7332 100755 --- a/scripts/package.sh +++ b/scripts/package.sh @@ -13,11 +13,11 @@ else version=`git describe --dirty --tags || echo unknown` fi -npm run clean -npm run build$dev +yarn clean +yarn build$dev # include the sample config in the tarball. Arguably this should be done by -# `npm run build`, but it's just too painful. +# `yarn build`, but it's just too painful. cp config.sample.json webapp/ mkdir -p dist diff --git a/scripts/npm-sub.js b/scripts/yarn-sub.js similarity index 82% rename from scripts/npm-sub.js rename to scripts/yarn-sub.js index 6902123406..817ad33c92 100644 --- a/scripts/npm-sub.js +++ b/scripts/yarn-sub.js @@ -9,13 +9,13 @@ if (!moduleName) { const argString = process.argv.length > 3 ? process.argv.slice(3).join(" ") : ""; if (!argString) { - console.error("Expected an npm argument string to use"); + console.error("Expected an yarn argument string to use"); process.exit(1); } const modulePath = path.dirname(require.resolve(`${moduleName}/package.json`)); -child_process.execSync("npm " + argString, { +child_process.execSync("yarn " + argString, { env: process.env, cwd: modulePath, stdio: ['inherit', 'inherit', 'inherit'], diff --git a/webpack.config.js b/webpack.config.js index 9cdc9cae45..d01cd6c03e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -143,8 +143,9 @@ module.exports = { }, resolve: { alias: { - // alias any requires to the react module to the one in our path, otherwise - // we tend to get the react source included twice when using npm link. + // alias any requires to the react module to the one in our path, + // otherwise we tend to get the react source included twice when + // using `npm link` / `yarn link`. "react": path.resolve('./node_modules/react'), "react-dom": path.resolve('./node_modules/react-dom'), "react-addons-perf": path.resolve('./node_modules/react-addons-perf'),