Merge pull request #12 from PilotConway/switch-to-library

Switch from CRA to Library Build

Author: John Conway

.eslintignore

@@ -0,0 +1,9 @@
+/dist
+/scripts
+/node_modules
+/.github
+/coverage
+/.vscode
+babel.config.js
+jest.config.js
+rollup.config.js

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 /coverage
+/dist

CHANGELOG.md

@@ -0,0 +1,3 @@
+## v0.1.0 (alpha 2)
+
+- [NEW] Converted from create-react-app to a babel/rollup library build.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 John Conway
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

babel.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+  plugins: [
+    '@babel/transform-runtime',
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-syntax-import-meta',
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-json-strings',
+  ],
+};

jest.config.js

@@ -0,0 +1,31 @@
+module.exports = {
+  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],
+  setupFiles: [],
+  setupFilesAfterEnv: [],
+  testMatch: [
+    '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
+    '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
+  ],
+  testEnvironment: 'jest-environment-jsdom-fourteen',
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
+  },
+  transformIgnorePatterns: [
+    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$',
+    '^.+\\.module\\.(css|sass|scss)$',
+  ],
+  modulePaths: [],
+  moduleFileExtensions: [
+    'web.js',
+    'js',
+    'web.ts',
+    'ts',
+    'web.tsx',
+    'tsx',
+    'json',
+    'web.jsx',
+    'jsx',
+    'node',
+  ],
+  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
+};

package.json

@@ -1,34 +1,72 @@
 {
-  "name": "rxjs-rest-api-with-hooks",
-  "version": "1.0.0",
-  "description": "Prototyping a rest api using RxJS ajax and hooks. This project is helping me test out some ideas before we write the new implementation. ",
+  "name": "@pilotconway/react-request-hook",
+  "productName": "react-request-hook",
+  "version": "0.1.0-alpha2",
+  "description": "Library for communicating with a RESTful server using React Hooks.",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "browser": "./dist/react-request-hook.umd.js",
   "keywords": [],
-  "main": "src/index.js",
-  "dependencies": {
-    "@material-ui/core": "4.0.2",
-    "@material-ui/icons": "^4.1.0",
-    "color": "3.1.2",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com/"
+  },
+  "peerDependencies": {
     "prop-types": "15.7.2",
     "react": "16.8.6",
     "react-dom": "16.8.6",
-    "react-scripts": "3.0.1",
     "rxjs": "6.5.2"
   },
+  "dependencies": {
+    "@material-ui/core": "4.0.2",
+    "@material-ui/icons": "^4.1.0",
+    "color": "3.1.2"
+  },
   "devDependencies": {
+    "@babel/cli": "^7.5.0",
+    "@babel/core": "7.4.3",
+    "@babel/plugin-syntax-import-meta": "^7.2.0",
+    "@babel/preset-env": "^7.5.4",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "10.0.1",
+    "babel-jest": "^24.8.0",
+    "babel-loader": "8.0.5",
+    "babel-plugin-named-asset-import": "^0.3.2",
+    "babel-preset-react-app": "^9.0.0",
     "codecov": "^3.5.0",
+    "eslint": "^5.16.0",
+    "eslint-config-react-app": "^4.0.1",
+    "eslint-loader": "2.1.2",
+    "eslint-plugin-flowtype": "2.50.1",
+    "eslint-plugin-import": "2.16.0",
+    "eslint-plugin-jsx-a11y": "6.2.1",
+    "eslint-plugin-react": "7.12.4",
+    "eslint-plugin-react-hooks": "^1.5.0",
+    "file-loader": "3.0.1",
+    "fs-extra": "7.0.1",
+    "jest": "^24.8.0",
+    "jest-environment-jsdom-fourteen": "0.1.0",
+    "jest-watch-typeahead": "^0.3.1",
     "nock": "^10.0.6",
-    "typescript": "3.3.3"
+    "rollup": "^1.17.0",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^10.0.1",
+    "rollup-plugin-eslint": "^7.0.0",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-terser": "^5.1.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom --coverage",
-    "eject": "react-scripts eject"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
+    "build": "yarn build:cjs && yarn build:esm && yarn build:es && yarn build:umd && yarn copy-files",
+    "build:cjs": "NODE_ENV=production BABEL_ENV=cjs babel ./src --out-dir ./dist --ignore \"**/*.spec.js\"",
+    "build:esm": "NODE_ENV=production BABEL_ENV=esm babel ./src --out-dir ./dist/esm --ignore \"**/*.spec.js\"",
+    "build:es": "NODE_ENV=production BABEL_ENV=es babel ./src --out-dir ./dist/es --ignore \"**/*.spec.js\"",
+    "build:umd": "BABEL_ENV=production-umd rollup -c ./rollup.config.js",
+    "copy-files": "node ./scripts/copy-files.js",
+    "dist:clean": "rm -rf dist/ && rm -rf node_modules/",
+    "test": "jest"
+  }
 }

public/index.html

@@ -0,0 +1,51 @@
+import resolve from 'rollup-plugin-node-resolve';
+import builtins from 'rollup-plugin-node-builtins';
+import commonjs from 'rollup-plugin-commonjs';
+import babel from 'rollup-plugin-babel';
+import { eslint } from 'rollup-plugin-eslint';
+import { terser } from 'rollup-plugin-terser';
+import pkg from './package.json';
+
+const external = ['react', 'react-dom'];
+
+const resolveOptions = {
+  extensions: ['.js', '.jsx', '.json'],
+  browser: true,
+  customResolveOptions: {
+    moduleDirectory: ['node_modules', '../../node_modules'],
+  },
+};
+
+const commonjsOptions = {
+  include: /node_modules/,
+  namedExports: {
+    '../../node_modules/react-is/index.js': ['ForwardRef'],
+  },
+};
+
+const babelOptions = {
+  root: './',
+  exclude: /node_modules/,
+  runtimeHelpers: true,
+};
+
+export default [
+  // browser-friendly UMD build
+  {
+    input: 'src/index.js',
+    output: {
+      name: pkg.productName,
+      file: pkg.browser,
+      format: 'umd',
+    },
+    external,
+    plugins: [
+      eslint(),
+      builtins(),
+      resolve(resolveOptions),
+      babel(babelOptions),
+      commonjs(commonjsOptions),
+      terser(),
+    ],
+  },
+];

rollup.config.js

@@ -0,0 +1,55 @@
+/* eslint-disable no-console */
+const fsExtra = require('fs-extra');
+const path = require('path');
+
+// Copies a file from the root repository into the `./dist` directory.
+async function copyFile(filename, destinationFilename = null) {
+  const dist = path.resolve(__dirname, '../dist/', destinationFilename || path.basename(filename));
+  await fsExtra.copy(filename, dist);
+  console.log(`Copied ${filename} to ${dist}`);
+}
+
+/**
+ * Copies the package.json to the `./dist` directory and then edits the
+ * main/modules entries in the package.json to remove the `dist` portion. This
+ * allows for the `dist` directory to be published to npm or github package repo.
+ * The original package.json must have the `dist` portion of the path otherwise
+ * the package won't work inside workspace directories locally since the root
+ * directory is what is linked via yarn workspace not the dist directory.
+ */
+async function copyPackageJson() {
+  const packageJson = await fsExtra.readFile(path.resolve(__dirname, '../package.json'), 'utf8');
+  const { scripts, devDependencies, files, ...packageDataOther } = JSON.parse(packageJson);
+
+  const newPackageJson = {
+    ...packageDataOther,
+    main: './index.js',
+    module: './index.es.js',
+  };
+
+  const output = path.resolve(__dirname, '../dist/package.json');
+
+  await fsExtra.writeFile(output, JSON.stringify(newPackageJson, null, 2), 'utf8');
+  console.log(`Created ${output}`);
+}
+
+/**
+ * Copies files from the root of the project into the built dist directory
+ * that are needed for the dist to be a publishable package to npm for github
+ * package repo.
+ *
+ * Copies package.json, index.js, README, CHANGELOG, and LICENSE.
+ */
+async function run() {
+  try {
+    await copyFile('./LICENSE');
+    await copyFile('./CHANGELOG.md');
+    await copyFile('./README.md');
+    await copyFile('./src/index.js', 'index.es.js');
+    await copyPackageJson();
+  } catch (error) {
+    console.error('Copy failed', error);
+  }
+}
+
+run();

scripts/copy-files.js

@@ -23,17 +23,6 @@
  * function. You can call these functions to get the first, last, next or previous pages.
  * Under the hood it's using the Link header urls to run a new request to get to that page.
  *
- * ## TODO
- *
- * Right now we are just passing the entire URL in as the endpoint, but, in production environments, we should
- * instead pull the client object from a provider in the hook and then be able to setup the client with
- * the url endpoints, headers, sessions, etc... for all client requests. This way, we can just pass something
- * like `/users` as the endpoint and it will know where to go.
- *
- * For browsers, this should be simpler because we will already have the domain and port, but, since this code will
- * have to run in electron, we will also have other mechanisms to pass in the domain or change the domain based on
- * which backend server (primary or secondary) we are connected to.
- *
  */
 // import React from 'react';
 import PropTypes from 'prop-types';
@@ -91,6 +80,6 @@ Request.defaultProps = {
 };
 
 export default function Request({ endpoint, params, options, children }) {
-  const [data, loading, error, links, client] = useEndpointData(endpoint);
+  const [data, loading, error, links, client] = useEndpointData(endpoint, { ...options, params });
   return children({ data, loading, error, links, client });
 }