Update build system to support a React Native bundle

.gitignore

@@ -4,6 +4,7 @@
 /.idea
 .DS_Store
 /dist
+/RN
 /coverage
 /.nyc_output
 /package-lock.json

config/tsconfig.base.json

@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "lib": ["es2018", "dom"],
+ "module": "commonjs",
+ "moduleResolution": "node",
+ "target": "es5",
+ "strict": true,
+ "allowSyntheticDefaultImports": true,
+ "experimentalDecorators": true,
+ "noImplicitReturns": true,
+ "noImplicitThis": true,
+ "esModuleInterop": true,
+ "downlevelIteration": true,
+ "resolveJsonModule": true,
+ "allowJs": true,
+ "sourceMap": true,
+ "declaration": true,
+ },
+ "include": [
+ "../src/**/*.ts",
+ "../test/**/*.ts",
+ "../webpack/**/*.ts"
+ ],
+ "exclude": [
+ "../node_modules",
+ "../dist"
+ ]
+}

config/tsconfig.cdn.json

@@ -0,0 +1,9 @@
+{
+ "extends": "./tsconfig.base.json",
+ "compilerOptions": {
+ "rootDir": "../src",
+ "outDir": "../dist",
+ "declaration": false
+ },
+ "include": ["../src/**/*.ts"]
+}

config/tsconfig.cjs.json

@@ -0,0 +1,8 @@
+{
+ "extends": "./tsconfig.base.json",
+ "compilerOptions": {
+ "rootDir": "../src",
+ "outDir": "../dist/cjs"
+ },
+ "include": ["../src/**/*.ts"]
+}

config/tsconfig.react-native.json

@@ -0,0 +1,8 @@
+{
+ "extends": "./tsconfig.base.json",
+ "compilerOptions": {
+ "rootDir": "../src",
+ "outDir": "../RN"
+ },
+ "include": ["../src/**/*.ts"]
+}

config/tsconfig.test.json

@@ -0,0 +1,9 @@
+{
+ "extends": "./tsconfig.base.json",
+ "compilerOptions": {
+ "target": "es6",
+ "strict": false,
+ "noImplicitAny": false
+ },
+ "include": ["../test/**/*.ts"]
+}

config/tsconfig.webpack.json

@@ -0,0 +1,4 @@
+{
+ "extends": "./tsconfig.base.json",
+ "include": ["../webpack/**/*.ts"]
+}

package.json

@@ -9,16 +9,16 @@
  "url": "https://github.com/fortmatic/magic-js"
  },
  "homepage": "https://www.fortmatic.com",
- "main": "dist/cjs/magic.js",
- "types": "dist/cjs/src/index.d.ts",
+ "main": "dist/cjs/index.js",
+ "types": "dist/cjs/index.d.ts",
  "scripts": {
  "start": "yarn run clean:build && ./scripts/start.sh",
  "build": "yarn run clean:build && ./scripts/build.sh",
  "test": "yarn run clean:test-artifacts && ./scripts/test.sh",
  "lint": "eslint --fix src/**/*.ts",
  "clean": "npm-run-all -s clean:*",
  "clean:test-artifacts": "rimraf coverage && rimraf .nyc_output",
- "clean:build": "rimraf dist",
+ "clean:build": "rimraf dist && rimraf RN",
  "clean_node_modules": "rimraf node_modules"
  },
  "dependencies": {},

scripts/build.sh

@@ -5,6 +5,8 @@ export WEBPACK_ENV=production
 export BABEL_ENV=production
 
 export MAGIC_URL=https://auth.magic.link
+export SDK_NAME=$(node -pe "require('./package.json')['name']")
+export SDK_VERSION=$(node -pe "require('./package.json')['version']")
 
 # Increase memory limit for Node
 export NODE_OPTIONS=--max_old_space_size=4096

scripts/start.sh

@@ -5,6 +5,8 @@ export WEBPACK_ENV=development
 export BABEL_ENV=development
 
 export LOCAL_MAGIC_PORT=3014
+export SDK_NAME=$(node -pe "require('./package.json')['name']")
+export SDK_VERSION=$(node -pe "require('./package.json')['version']")
 
 set -e
 while test $# -gt 0; do

scripts/test.sh

@@ -4,6 +4,9 @@ echo
 echo "Running unit tests..."
 echo
 
+export SDK_NAME=$(node -pe "require('./package.json')['name']")
+export SDK_VERSION=$(node -pe "require('./package.json')['version']")
+
 if [ -n "$1" ]; then
  input=$(echo $(npx glob $1))
 fi

src/constants/config.ts

@@ -1 +1,4 @@
 export const MAGIC_URL = process.env.MAGIC_URL || 'https://auth.magic.link/';
+export const IS_REACT_NATIVE = Boolean(Number(process.env.IS_REACT_NATIVE));
+export const SDK_NAME = process.env.SDK_NAME!;
+export const SDK_VERSION = process.env.SDK_VERSION!;

src/core/sdk.ts

@@ -1,13 +1,12 @@
 /* eslint-disable no-underscore-dangle */
 
 import { encodeQueryParameters } from '../util/query-params';
-import { name as sdkName, version as sdkVersion } from '../../package.json';
 import { createMissingApiKeyError } from './sdk-exceptions';
 import { IframeController } from './iframe-controller';
 import { PayloadTransport } from './payload-transport';
 import { AuthModule } from '../modules/auth';
 import { UserModule } from '../modules/user';
-import { MAGIC_URL } from '../constants/config';
+import { MAGIC_URL, SDK_NAME, SDK_VERSION, IS_REACT_NATIVE } from '../constants/config';
 import { MagicSDKAdditionalConfiguration } from '../types';
 import { RPCProviderModule } from '../modules/rpc-provider';
 
@@ -47,8 +46,8 @@ export class MagicSDK {
  DOMAIN_ORIGIN: window.location ? window.location.origin : '',
  ETH_NETWORK: options?.network,
  host: new URL(this.endpoint).host,
- sdk: sdkName,
- version: sdkVersion,
+ sdk: IS_REACT_NATIVE ? `${SDK_NAME}-rn` : SDK_NAME,
+ version: SDK_VERSION,
  });
 
  /* istanbul ignore next */

test/tsconfig.json

@@ -1,14 +1,3 @@
 {
- "extends": "../tsconfig.json",
- "compilerOptions": {
- "module": "commonjs",
- "target": "es6",
- "strict": false,
- "noImplicitAny": false,
- "downlevelIteration": true,
- "esModuleInterop": true
- },
- "include": [
- "./**/*.ts"
- ]
+ "extends": "../config/tsconfig.test.json"
 }

tsconfig.json

@@ -1,28 +1,3 @@
 {
- "compilerOptions": {
- "lib": ["es2018", "dom"],
- "module": "commonjs",
- "moduleResolution": "node",
- "target": "es5",
- "strict": true,
- "allowSyntheticDefaultImports": true,
- "experimentalDecorators": true,
- "noImplicitReturns": true,
- "noImplicitThis": true,
- "esModuleInterop": true,
- "downlevelIteration": true,
- "resolveJsonModule": true,
- "allowJs": true,
- "sourceMap": true,
- "declaration": true,
- "outDir": "dist/cjs"
- },
- "include": [
- "src"
- ],
- "exclude": [
- "node_modules",
- "dist",
- "lib"
- ]
+ "extends": "./config/tsconfig.base.json"
 }

webpack/env-variables.json

@@ -1,3 +1,5 @@
 [
- "MAGIC_URL"
+ "MAGIC_URL",
+ "SDK_NAME",
+ "SDK_VERSION"
 ]

webpack/tsconfig.json

@@ -1,4 +1,3 @@
 {
- "extends": "../tsconfig.json",
- "include": ["."]
+ "extends": "../config/tsconfig.webpack.json"
 }

webpack/webpack.config.ts

@@ -1,26 +1,24 @@
 /* eslint-disable import/no-extraneous-dependencies */
 
 import { resolve } from 'path';
-import { EnvironmentPlugin } from 'webpack';
+import { EnvironmentPlugin, DefinePlugin } from 'webpack';
 import Config from 'webpack-chain';
 import envVariables from './env-variables.json';
 
 const isDevelopment = process.env.NODE_ENV !== 'production';
 
-function configBase(transpileOnly = false) {
+function configBase(tsconfig: string, transpileOnly = false) {
  const config = new Config();
 
  config.context(resolve(__dirname, '..'));
  config.mode(isDevelopment ? 'development' : 'production');
 
- /* eslint-disable prettier/prettier */
  config.module
  .rule('compile')
- .test(/.tsx?$/)
- .use('typescript')
- .loader('ts-loader')
- .options({ transpileOnly });
- /* eslint-enable prettier/prettier */
+ .test(/.tsx?$/)
+ .use('typescript')
+ .loader('ts-loader')
+ .options({ transpileOnly, configFile: resolve(__dirname, `../config/${tsconfig}`) });
 
  config.plugin('environment').use(EnvironmentPlugin, [envVariables]);
 
@@ -35,15 +33,35 @@ function configBase(transpileOnly = false) {
  TypeScript to build ESM files for distribution.
  */
 
-const configCJS = configBase();
+const configCJS = configBase('tsconfig.cjs.json');
 configCJS.name('cjs');
 configCJS.entry('main').add('./src/index.ts');
 configCJS.output
  .path(resolve(__dirname, '../dist/cjs'))
- .filename('magic.js')
+ .filename('index.js')
  .libraryTarget('commonjs2');
 
-const configCDN = configBase();
+const configReactNative = configBase('tsconfig.react-native.json');
+configReactNative.name('rn');
+configReactNative.entry('main').add('./src/index.ts');
+configReactNative.plugin('rn-environment').use(DefinePlugin, [
+ {
+ 'process.env.IS_REACT_NATIVE': JSON.stringify(1),
+ },
+]);
+configReactNative.externals({
+ react: 'react',
+ 'react-native': 'react-native',
+ 'react-dom': 'react-dom',
+ 'react-native-webview': 'react-native-webview',
+});
+configReactNative.output
+ .path(resolve(__dirname, '../RN'))
+ .filename('index.js')
+ .libraryTarget('commonjs2')
+ .libraryExport('default');
+
+const configCDN = configBase('tsconfig.cdn.json');
 configCDN.name('cdn');
 configCDN.entry('main').add('./src/index.cdn.ts');
 configCDN.output
@@ -53,4 +71,4 @@ configCDN.output
  .libraryExport('default')
  .library('Magic');
 
-module.exports = [configCJS.toConfig(), configCDN.toConfig()];
+module.exports = [configCJS.toConfig(), configReactNative.toConfig(), configCDN.toConfig()];