feat: switch from npm to yarn (#500)

* feat: switch from npm to yarn

* fix: build

* fix: replace yarn run with yarn

* fix: nodejs version install in Docker image

* fix: initialize mobx state

Co-authored-by: Karol Sójko <karolsojko@gmail.com>

.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": [
-    "@babel/typescript",
+    "@babel/preset-typescript",
     "@babel/preset-env"
   ],
   "plugins": [

.github/workflows/beta.yml

@@ -17,10 +17,10 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Install dependencies
-        run: npm ci
+        run: yarn install --pure-lockfile
 
       - name: Typescript
-        run: npm run tsc
+        run: yarn tsc
 
   deploy:
 

.github/workflows/dev.yml

@@ -17,10 +17,10 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Install dependencies
-        run: npm ci
+        run: yarn install --pure-lockfile
 
       - name: Typescript
-        run: npm run tsc
+        run: yarn tsc
 
   deploy:
 

.github/workflows/pr.yml

@@ -13,6 +13,6 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v2
       - name: Install dependencies
-        run: npm ci
+        run: yarn install --pure-lockfile
       - name: Typescript
-        run: npm run tsc
+        run: yarn tsc

.github/workflows/prod.yml

@@ -18,10 +18,10 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Install dependencies
-        run: npm ci
+        run: yarn install --pure-lockfile
 
       - name: Typescript
-        run: npm run tsc
+        run: yarn tsc
 
   deploy:
 

.gitignore

@@ -42,3 +42,7 @@ dump.rdb
 /dist/stylesheets
 /dist/fonts
 /dist/@types
+
+# Yarn
+yarn-error.log
+package-lock.json

Dockerfile

@@ -1,4 +1,4 @@
-FROM ruby:2.7.1-alpine
+FROM ruby:2.7.1-alpine3.12
 
 ARG UID=1000
 ARG GID=1000
@@ -7,10 +7,11 @@ RUN addgroup -S webapp -g $GID && adduser -D -S webapp -G webapp -u $UID
 
 RUN apk add --update --no-cache \
     alpine-sdk \
-    nodejs \
+    nodejs-current \
     python2 \
     git \
     nodejs-npm \
+    yarn \
     tzdata
 
 WORKDIR /app/
@@ -19,17 +20,17 @@ RUN chown -R $UID:$GID .
 
 USER webapp
 
-COPY --chown=$UID:$GID package.json package-lock.json Gemfile Gemfile.lock /app/
+COPY --chown=$UID:$GID package.json yarn.lock Gemfile Gemfile.lock /app/
 
 COPY --chown=$UID:$GID vendor /app/vendor
 
-RUN npm ci
+RUN yarn install --pure-lockfile
 
 RUN gem install bundler && bundle install
 
 COPY --chown=$UID:$GID . /app/
 
-RUN npm run bundle
+RUN yarn bundle
 
 RUN bundle exec rails assets:precompile
 

README.md

@@ -88,9 +88,10 @@ This repo contains the core code used in the web app, as well as the Electron-ba
 
 **Instructions:**
 
+1. Ensure you have [Yarn](https://classic.yarnpkg.com) installed
 1. Clone the repo
-1. `npm run setup`
-1. `npm start`
+1. `yarn setup`
+1. `yarn start`
 
 Then open your browser to `http://localhost:3001`.
 

app/assets/javascripts/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "esnext",
+    "target": "ES2019",
     "module": "commonjs",
     "moduleResolution": "node",
     "allowJs": true,

app/assets/javascripts/ui_models/app_state.ts

@@ -61,8 +61,8 @@ class ActionsMenuState {
 
 export class SyncState {
   inProgress = false;
-  errorMessage?: string;
-  humanReadablePercentage?: string;
+  errorMessage?: string = undefined;
+  humanReadablePercentage?: string = undefined;
 
   constructor() {
     makeObservable(this, {

package.json

@@ -7,24 +7,23 @@
     "url": "https://github.com/standardnotes/web"
   },
   "scripts": {
-    "setup": "npm run submodules && npm install",
+    "setup": "yarn submodules && yarn install",
     "start": "webpack-dev-server --progress --config webpack.dev.js",
     "watch": "webpack -w --config webpack.dev.js",
     "watch:desktop": "webpack -w --config webpack.dev.js --env.platform='desktop'",
-    "bundle": "webpack --config webpack.prod.js && npm run tsc",
+    "bundle": "webpack --config webpack.prod.js && yarn tsc",
     "bundle:desktop": "webpack --config webpack.prod.js --env.platform='desktop'",
     "bundle:desktop:beta": "webpack --config webpack.prod.js --env.platform='desktop' --env.public_beta='true'",
-    "build": "bundle install && npm ci && bundle exec rails assets:precompile && npm run bundle",
+    "build": "bundle install && yarn install --pure-lockfile && bundle exec rails assets:precompile && yarn bundle",
     "submodules": "git submodule update --init --force",
     "lint": "eslint --fix app/assets/javascripts/**/*.js",
     "tsc": "tsc --project app/assets/javascripts/tsconfig.json"
   },
   "devDependencies": {
-    "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.11.1",
+    "@babel/core": "^7.12.9",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/preset-typescript": "^7.10.4",
+    "@babel/preset-env": "^7.12.7",
+    "@babel/preset-typescript": "^7.12.7",
     "@types/angular": "^1.7.0",
     "@types/chai": "^4.2.11",
     "@types/lodash": "^4.14.149",
@@ -60,7 +59,7 @@
     "sass-loader": "^8.0.2",
     "serve-static": "^1.14.1",
     "sn-stylekit": "2.1.0",
-    "ts-loader": "^8.0.2",
+    "ts-loader": "^8.0.11",
     "typescript": "^3.9.7",
     "typescript-eslint": "0.0.1-alpha.0",
     "webpack": "^4.44.1",
@@ -71,7 +70,7 @@
   "dependencies": {
     "@bugsnag/js": "^7.5.1",
     "@standardnotes/sncrypto-web": "^1.2.9",
-    "@standardnotes/snjs": "^2.0.16",
+    "@standardnotes/snjs": "^2.0.20",
     "mobx": "^6.0.1"
   }
 }

webpack.config.js

@@ -3,12 +3,14 @@ const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 require('dotenv').config();
 
-module.exports = (env = {
-  platform: 'web'
-}) => ({
+module.exports = (
+  env = {
+    platform: 'web',
+  }
+) => ({
   entry: './app/assets/javascripts/index.ts',
   output: {
-    filename: './javascripts/app.js'
+    filename: './javascripts/app.js',
   },
   plugins: [
     new webpack.DefinePlugin({
@@ -19,28 +21,37 @@ module.exports = (env = {
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
       filename: './stylesheets/app.css',
-      ignoreOrder: true // Enable to remove warnings about conflicting order
-    })
+      ignoreOrder: true, // Enable to remove warnings about conflicting order
+    }),
   ],
   resolve: {
     extensions: ['.ts', '.js'],
     alias: {
       '%': path.resolve(__dirname, 'app/assets/templates'),
       '@': path.resolve(__dirname, 'app/assets/javascripts'),
-      '@Controllers': path.resolve(__dirname, 'app/assets/javascripts/controllers'),
+      '@Controllers': path.resolve(
+        __dirname,
+        'app/assets/javascripts/controllers'
+      ),
       '@Views': path.resolve(__dirname, 'app/assets/javascripts/views'),
       '@Services': path.resolve(__dirname, 'app/assets/javascripts/services'),
       '@node_modules': path.resolve(__dirname, 'node_modules'),
-    }
+    },
   },
   module: {
     rules: [
       {
         test: /\.(js|ts)$/,
         exclude: /(node_modules|snjs)/,
-        use: {
-          loader: 'babel-loader'
-        }
+        use: [
+          'babel-loader',
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+            },
+          },
+        ],
       },
       {
         test: /\.s?css$/,
@@ -49,12 +60,12 @@ module.exports = (env = {
             loader: MiniCssExtractPlugin.loader,
             options: {
               publicPath: '../', // The base assets directory in relation to the stylesheets
-              hmr: process.env.NODE_ENV === 'development'
-            }
+              hmr: process.env.NODE_ENV === 'development',
+            },
           },
           'css-loader',
-          'sass-loader'
-        ]
+          'sass-loader',
+        ],
       },
       {
         test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
@@ -63,36 +74,34 @@ module.exports = (env = {
             loader: 'file-loader',
             options: {
               name: '[name].[ext]',
-              outputPath: 'fonts/'
-            }
-          }
-        ]
+              outputPath: 'fonts/',
+            },
+          },
+        ],
       },
       {
         test: /\.html$/,
-        exclude: [
-          path.resolve(__dirname, 'index.html'),
-        ],
+        exclude: [path.resolve(__dirname, 'index.html')],
         use: [
           {
             loader: 'ng-cache-loader',
             options: {
-              prefix: 'templates:**'
-            }
-          }
-        ]
+              prefix: 'templates:**',
+            },
+          },
+        ],
       },
       {
         test: /\.pug$/,
         use: [
           {
-            loader: 'apply-loader'
+            loader: 'apply-loader',
           },
           {
-            loader: 'pug-loader'
-          }
-        ]
-      }
-    ]
-  }
+            loader: 'pug-loader',
+          },
+        ],
+      },
+    ],
+  },
 });