Test the npm package with Babel

tkrotoff · Aug 10, 2017 · 9d9fc2f · 9d9fc2f
1 parent 2f6bd6d
commit 9d9fc2f
Show file tree

Hide file tree

Showing 12 changed files with 128 additions and 9 deletions.
diff --git a/.npmignore b/.npmignore
@@ -1,3 +1,4 @@
 build/
-npm-package-test/build/
+npm-package-test/Babel/build/
+npm-package-test/TypeScript/build/
 coverage/
diff --git a/npm-package-test/Babel/App.jsx b/npm-package-test/Babel/App.jsx
@@ -0,0 +1,25 @@
+// @ts-check
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { FormWithConstraints, FieldFeedbacks, FieldFeedback } from 'react-form-with-constraints';
+
+import 'file-loader?name=[path][name].[ext]!./index.html';
+
+class Form extends FormWithConstraints {
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit.bind(this)} noValidate>
+        <input type="email" name="username" defaultValue="John Doe" required />
+        <FieldFeedbacks for="username">
+          <FieldFeedback when="*" />
+        </FieldFeedbacks>
+
+        <button>Submit</button>
+      </form>
+    );
+  }
+}
+
+ReactDOM.render(<Form />, document.getElementById('app'));
diff --git a/npm-package-test/index.html → npm-package-test/Babel/index.html b/npm-package-test/index.html → npm-package-test/Babel/index.html
diff --git a/npm-package-test/Babel/package.json b/npm-package-test/Babel/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "npm-package-test-babel",
+  "version": "0.0.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tkrotoff/ReactFormWithConstraints.git"
+  },
+  "description": "Simple form validation for React",
+  "license": "MIT",
+
+  "scripts": {
+    "clean": "rm -rf build",
+    "build": "webpack -d --env.development",
+    "test": "./test.sh"
+  },
+
+  "dependencies": {
+    "react-form-with-constraints": "../.."
+  },
+
+  "devDependencies": {
+    "babel-core": "latest",
+    "babel-preset-react": "latest",
+
+    "webpack": "latest",
+    "babel-loader": "latest",
+    "file-loader": "latest"
+  }
+}
diff --git a/npm-package-test/test.sh → npm-package-test/Babel/test.sh b/npm-package-test/test.sh → npm-package-test/Babel/test.sh
@@ -2,14 +2,14 @@
 echo '** Running rm -rf node_modules'
 rm -rf node_modules
 
-echo '** Running (cd .. && npm install)'
-(cd .. && npm install)
+echo '** Running (cd ../.. && npm install)'
+(cd ../.. && npm install)
 
 echo '** Running npm install'
 npm install
 
-echo '** Running (cd .. && rm -rf node_modules)'
-(cd .. && rm -rf node_modules)
+echo '** Running (cd ../.. && rm -rf node_modules)'
+(cd ../.. && rm -rf node_modules)
 
 echo '** Running npm run build'
 npm run build
diff --git a/npm-package-test/Babel/webpack.config.js b/npm-package-test/Babel/webpack.config.js
@@ -0,0 +1,30 @@
+const path = require('path');
+const optimize = require('webpack').optimize;
+
+module.exports = {
+  entry: {
+    'App': './App.jsx',
+
+    'react-form-with-constraints': 'react-form-with-constraints',
+    react: ['react', 'prop-types', 'react-dom']
+  },
+
+  output: {
+    path: path.join(__dirname, 'build'),
+    filename: '[name].js'
+  },
+
+  plugins: [
+    new optimize.CommonsChunkPlugin({names: ['react-form-with-constraints', 'react']})
+  ],
+
+  resolve: {
+    extensions: ['.js', '.jsx']
+  },
+
+  module: {
+    rules: [
+      { test: /\.jsx?$/, loader: 'babel-loader', options: {presets: ['react']} }
+    ]
+  }
+};
diff --git a/npm-package-test/App.tsx → npm-package-test/TypeScript/App.tsx b/npm-package-test/App.tsx → npm-package-test/TypeScript/App.tsx
diff --git a/npm-package-test/TypeScript/index.html b/npm-package-test/TypeScript/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>npm-package-test</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+
+    <script src="react.js"></script>
+    <script src="react-form-with-constraints.js"></script>
+    <script src="App.js"></script>
+  </body>
+</html>
diff --git a/npm-package-test/package.json → npm-package-test/TypeScript/package.json b/npm-package-test/package.json → npm-package-test/TypeScript/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "npm-package-test",
+  "name": "npm-package-test-typescript",
   "version": "0.0.1",
   "repository": {
     "type": "git",
@@ -15,7 +15,7 @@
   },
 
   "dependencies": {
-    "react-form-with-constraints": "../"
+    "react-form-with-constraints": "../.."
   },
 
   "devDependencies": {

diff --git a/npm-package-test/TypeScript/test.sh b/npm-package-test/TypeScript/test.sh
@@ -0,0 +1,15 @@
+#!/bin/sh
+echo '** Running rm -rf node_modules'
+rm -rf node_modules
+
+echo '** Running (cd ../.. && npm install)'
+(cd ../.. && npm install)
+
+echo '** Running npm install'
+npm install
+
+echo '** Running (cd ../.. && rm -rf node_modules)'
+(cd ../.. && rm -rf node_modules)
+
+echo '** Running npm run build'
+npm run build
diff --git a/npm-package-test/tsconfig.json → npm-package-test/TypeScript/tsconfig.json b/npm-package-test/tsconfig.json → npm-package-test/TypeScript/tsconfig.json
diff --git a/npm-package-test/webpack.config.ts → ...package-test/TypeScript/webpack.config.ts b/npm-package-test/webpack.config.ts → ...package-test/TypeScript/webpack.config.ts
@@ -1,7 +1,7 @@
 import * as path from 'path';
-import { optimize } from 'webpack';
+import { Configuration, optimize } from 'webpack';
 
-module.exports = {
+const config: Configuration = {
   entry: {
     'App': './App.tsx',
 
@@ -28,3 +28,5 @@ module.exports = {
     ]
   }
 };
+
+export = config;