chore: update project configurations

- Simplify metro config and webpack configs for linking the project
- Update circleci config to 2.1

.circleci/config.yml

@@ -1,17 +1,23 @@
-version: 2
+version: 2.1
 
-defaults: &defaults
-  docker:
-    - image: circleci/node:10
-  working_directory: ~/react-native-paper
+executors:
+  default:
+    docker:
+      - image: circleci/node:10
+    working_directory: ~/react-native-paper
+
+commands:
+  attach_project:
+    steps:
+      - attach_workspace:
+          at: ~/react-native-paper
 
 jobs:
   install-dependencies:
-    <<: *defaults
+    executor: default
     steps:
       - checkout
-      - attach_workspace:
-          at: ~/react-native-paper
+      - attach_project
       - restore_cache:
           keys:
             - dependencies-{{ checksum "package.json" }}
@@ -24,10 +30,12 @@ jobs:
           keys:
             - dependencies-example-{{ checksum "example/package.json" }}
             - dependencies-example-
-      - run: |
-          yarn install --cwd example --frozen-lockfile
-          yarn install --cwd docs --frozen-lockfile
-          yarn install --frozen-lockfile
+      - run:
+          name: Install dependencies
+          command: |
+            yarn install --cwd example --frozen-lockfile
+            yarn install --cwd docs --frozen-lockfile
+            yarn install --frozen-lockfile
       - save_cache:
           key: dependencies-{{ checksum "package.json" }}
           paths: node_modules
@@ -40,68 +48,81 @@ jobs:
       - persist_to_workspace:
           root: .
           paths: .
+
   lint:
-      <<: *defaults
-      steps:
-        - attach_workspace:
-            at: ~/react-native-paper
-        - run: |
+    executor: default
+    steps:
+      - attach_project
+      - run:
+          name: Lint files
+          command: |
             yarn lint
+
   typescript:
-      <<: *defaults
-      steps:
-        - attach_workspace:
-            at: ~/react-native-paper
-        - run: yarn typescript
-  build-package:
-      <<: *defaults
-      steps:
-        - attach_workspace:
-            at: ~/react-native-paper
-        - run: yarn prepare
+    executor: default
+    steps:
+      - attach_project
+      - run:
+          name: Typecheck files
+          command: |
+            yarn typescript
+
   unit-tests:
-      <<: *defaults
-      steps:
-        - attach_workspace:
-            at: ~/react-native-paper
-        - restore_cache:
-            name: Restoring Jest Cache
-            keys:
+    executor: default
+    steps:
+      - attach_project
+      - restore_cache:
+          name: Restore Jest Cache
+          keys:
             - jest-cache-{{ .Branch }}
             - jest-cache
-        - run: yarn test --maxWorkers=2 --coverage
-        - store_artifacts:
-            path: coverage
-            destination: coverage
-        - save_cache:
-            paths:
-            - ./cache/jest
-            key: jest-cache-{{ .Branch }}
+      - run:
+          name: Run unit tests
+          command: |
+            yarn test --maxWorkers=2 --coverage
+      - store_artifacts:
+          path: coverage
+          destination: coverage
+      - save_cache:
+          paths: ./cache/jest
+          key: jest-cache-{{ .Branch }}
+
+  build-package:
+    executor: default
+    steps:
+      - attach_project
+      - run:
+          name: Build package
+          command: |
+            yarn prepare
+
   build-docs:
-      <<: *defaults
-      steps:
-        - attach_workspace:
-            at: ~/react-native-paper
-        - run: |
+    executor: default
+    steps:
+      - attach_project
+      - run:
+          name: Build docs
+          command: |
             cd docs && yarn build && cd ..
             bash .circleci/comment-artifacts.sh
-        - store_artifacts:
-            path: docs/dist
-            destination: docs
+      - store_artifacts:
+          path: docs/dist
+          destination: docs
+
   deploy-docs:
-      <<: *defaults
-      steps:
-        - checkout
-        - attach_workspace:
-            at: ~/react-native-paper
-        - add_ssh_keys:
-            fingerprints:
-              - "2f:b4:ed:e1:25:88:5c:4a:03:c2:16:40:56:70:29:29"
-        - run: |
+    executor: default
+    steps:
+      - checkout
+      - attach_project
+      - add_ssh_keys:
+          fingerprints:
+            - '2f:b4:ed:e1:25:88:5c:4a:03:c2:16:40:56:70:29:29'
+      - run:
+          name: Deploy docs to GitHub pages
+          command: |
             bash .circleci/deploy-docs.sh
 
 workflows:
-  version: 2
   build-and-test:
     jobs:
       - install-dependencies

example/babel.config.js

@@ -1,14 +1,21 @@
-module.exports = {
-  presets: ['expo'],
-  plugins: [
-    [
-      'module-resolver',
-      {
-        alias: {
-          'react-native-paper': '../src/index',
-          'react-native-vector-icons': '@expo/vector-icons',
+const path = require('path');
+const pak = require('../package.json');
+
+module.exports = function(api) {
+  api.cache(true);
+
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          alias: {
+            // For development, we want to alias the library to the source
+            [pak.name]: path.join(__dirname, '..', pak.source),
+          },
         },
-      },
+      ],
     ],
-  ],
+  };
 };

example/metro.config.js

@@ -1,31 +1,26 @@
 // /* eslint-disable import/no-commonjs */
 
 const path = require('path');
-const fs = require('fs');
 const blacklist = require('metro-config/src/defaults/blacklist');
 const escape = require('escape-string-regexp');
+const pak = require('../package.json');
 
 const root = path.resolve(__dirname, '..');
-const pak = JSON.parse(
-  fs.readFileSync(path.join(root, 'package.json'), 'utf8')
-);
 
-const modules = [
-  '@babel/runtime',
-  '@expo/vector-icons',
-  ...Object.keys(pak.dependencies),
-  ...Object.keys(pak.peerDependencies),
-];
+const modules = ['@expo/vector-icons', ...Object.keys(pak.peerDependencies)];
 
 module.exports = {
   projectRoot: __dirname,
   watchFolders: [root],
 
+  // We need to make sure that only one version is loaded for peerDependencies
+  // So we blacklist them at the root, and alias them to the versions in example's node_modules
   resolver: {
-    blacklistRE: blacklist([
-      new RegExp(`^${escape(path.join(root, 'node_modules'))}\\/.*$`),
-      new RegExp(`^${escape(path.join(root, 'docs', 'node_modules'))}\\/.*$`),
-    ]),
+    blacklistRE: blacklist(
+      modules.map(
+        m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
+      )
+    ),
 
     extraNodeModules: modules.reduce((acc, name) => {
       acc[name] = path.join(__dirname, 'node_modules', name);

example/package.json

@@ -12,7 +12,7 @@
   },
   "main": "node_modules/expo/AppEntry.js",
   "dependencies": {
-    "@callstack/react-theme-provider": "^3.0.2",
+    "@expo/vector-icons": "^10.2.0",
     "@react-native-community/masked-view": "0.1.8",
     "@react-navigation/drawer": "^5.6.1",
     "@react-navigation/native": "^5.2.1",
@@ -22,14 +22,11 @@
     "expo-keep-awake": "~8.1.0",
     "file-loader": "^4.0.0",
     "react": "16.9.0",
-    "react-art": "^16.7.0",
     "react-dom": "16.9.0",
-    "react-lifecycles-compat": "^3.0.4",
     "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz",
     "react-native-gesture-handler": "~1.6.0",
     "react-native-reanimated": "~1.8.0",
     "react-native-safe-area-context": "0.7.3",
-    "react-native-safe-area-view": "^0.14.6",
     "react-native-screens": "~2.5.0",
     "react-native-vector-icons": "^6.6.0",
     "react-native-web": "^0.11.7",
@@ -45,11 +42,5 @@
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-preset-expo": "^8.1.0",
     "expo-cli": "^3.4.1"
-  },
-  "resolutions": {
-    "**/color": "3.1.2",
-    "**/hoist-non-react-statics": "3.3.0",
-    "**/react-lifecycles-compat": "3.0.4",
-    "**/react": "16.9.0"
   }
 }

example/webpack.config.js

@@ -1,28 +1,24 @@
 const path = require('path');
 const createExpoWebpackConfigAsync = require('@expo/webpack-config');
-// eslint-disable-next-line import/no-extraneous-dependencies
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const { resolver } = require('./metro.config');
+
+const root = path.resolve(__dirname, '..');
+const node_modules = path.join(__dirname, 'node_modules');
 
 module.exports = async function(env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv);
 
   config.module.rules.push({
     test: /\.(js|ts|tsx)$/,
-    include: path.resolve('../src'),
+    include: path.resolve(root, 'src'),
     use: 'babel-loader',
   });
 
-  config.resolve.plugins = config.resolve.plugins.filter(
-    p => !(p instanceof ModuleScopePlugin)
-  );
-
+  // We need to make sure that only one version is loaded for peerDependencies
+  // So we alias them to the versions in example's node_modules
   Object.assign(config.resolve.alias, {
-    react: path.resolve(__dirname, 'node_modules', 'react'),
-    'react-native-web': path.resolve(
-      __dirname,
-      'node_modules',
-      'react-native-web'
-    ),
+    ...resolver.extraNodeModules,
+    'react-native-web': path.join(node_modules, 'react-native-web'),
     '@expo/vector-icons/MaterialCommunityIcons': require.resolve(
       '@expo/vector-icons/MaterialCommunityIcons'
     ),