Prep for publishing package

This works on client side:

`import { Comical, Bubble, BubbleSpec } from "comicaljs";`

Author: hatton

.gitignore

@@ -1,2 +1,5 @@
 node_modules
-storybook-static
+storybook-static
+dist
+build
+yarn-error.log

package.json

@@ -1,10 +1,11 @@
 {
-  "name": "comical-js",
+  "name": "comicaljs",
   "version": "0.1.0",
   "description": "Edit cartoon bubble frames around an HTML element",
   "main": "index.js",
+  "types": "index.d.ts",
   "repository": "https://github.com/BloomBooks/comical-js.git",
-  "author": "John Thomson <[email protected]>",
+  "author": "SIL Bloom Team & Contributors",
   "license": "MIT",
   "private": false,
   "devDependencies": {
@@ -14,20 +15,24 @@
     "@types/svg.js": "^2.3.1",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.6",
+    "babel-preset-env": "^1.7.0",
+    "copy-webpack-plugin": "^5.0.4",
+    "globule": "^1.2.1",
     "npx": "^10.2.0",
     "shx": "^0.3.2",
+    "ts-loader": "^6.2.0",
     "typescript": "^3.5.3",
     "webpack": "^4.39.2",
-    "webpack-cli": "^3.3.6"
+    "webpack-cli": "^3.3.6",
+    "webpack-merge": "^4.2.2"
   },
   "dependencies": {
+    "babel-preset-react": "^6.24.1",
     "paper": "^0.12.3"
   },
   "scripts": {
     "storybook": "start-storybook -s ./storyStatic -p 6006",
     "build-storybook": "build-storybook",
-    "makebloomdesktopdir": "shx mkdir ..\\BloomDesktop\\src\\BloomBrowserUI\\node_modules\\comical-js",
-    "cleanbloomdesktopdir": "shx rm ..\\BloomDesktop\\src\\BloomBrowserUI\\node_modules\\comical-js\\*",
-    "tobloomdesktop": "shx cp src\\*.ts ..\\BloomDesktop\\src\\BloomBrowserUI\\node_modules\\comical-js"
+    "build": "shx rm -r dist/ && webpack --config webpack.config-prod.js"
   }
 }

src/index.ts

@@ -0,0 +1,8 @@
+// This file exists to import everything else (and define the module exports).
+// It is the root for building the bundle.
+
+import Comical from "./comical";
+import Bubble from "./bubble";
+import { BubbleSpec, BubbleSpecPattern, TailSpec } from "./bubbleSpec";
+
+export { Comical, Bubble, BubbleSpec, BubbleSpecPattern, TailSpec };

tsconfig.json

@@ -1,27 +1,27 @@
 {
-    "compilerOptions": {
-      "outDir": "build/lib",
-      "module": "commonjs",
-      "target": "es5",
-      "lib": ["es5", "es6", "es7", "es2017", "dom"],
-      "sourceMap": true,
-      "allowJs": false,
-      "jsx": "react",
-      "moduleResolution": "node",
-      "rootDirs": ["src", "stories"],
-      "baseUrl": "src",
-      "forceConsistentCasingInFileNames": true,
-      "noImplicitReturns": true,
-      "noImplicitThis": true,
-      "noImplicitAny": true,
-      "strictNullChecks": true,
-      "suppressImplicitAnyIndexErrors": true,
-      "noUnusedLocals": true,
-      "declaration": true,
-      "allowSyntheticDefaultImports": true,
-      "experimentalDecorators": true,
-      "emitDecoratorMetadata": true
-    },
-    "include": ["src/**/*"],
-    "exclude": ["node_modules", "build", "scripts"]
-  }
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "commonjs",
+    "target": "es5",
+    "lib": ["es5", "es6", "es7", "es2017", "dom"],
+    "sourceMap": true,
+    "allowJs": false,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDirs": ["src", "stories"],
+    "baseUrl": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "declaration": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "build", "scripts"]
+}

webpack.common.js

@@ -0,0 +1,93 @@
+var path = require("path");
+var webpack = require("webpack");
+var node_modules = path.resolve(__dirname, "node_modules");
+
+var globule = require("globule");
+const CopyPlugin = require("copy-webpack-plugin");
+var outputDir = "dist";
+
+// From Bloom's webpack, it seems this is needed
+// if ever our output directory does not have the same parent as our node_modules. We then
+// need to resolve the babel related presets (and plugins).  This mapping function was
+// suggested at https://github.com/babel/babel-loader/issues/166.
+// Since our node_modules DOES have the same parent, maybe we could do without it?
+function localResolve(preset) {
+  return Array.isArray(preset)
+    ? [require.resolve(preset[0]), preset[1]]
+    : require.resolve(preset);
+}
+
+module.exports = {
+  // mode must be set to either "production" or "development" in webpack 4.
+  // Webpack-common is intended to be 'required' by something that provides that.
+  context: __dirname,
+  entry: {
+    index: "./src/index.ts"
+  },
+
+  output: {
+    path: path.join(__dirname, outputDir),
+    filename: "[name].js",
+    library: "Comical"
+  },
+
+  resolve: {
+    modules: [".", node_modules],
+    extensions: [".js", ".jsx", ".ts", ".tsx"]
+  },
+
+  optimization: {
+    minimize: false,
+    namedModules: true,
+    splitChunks: {
+      cacheGroups: {
+        default: false
+      }
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts(x?)$/,
+        use: [{ loader: "ts-loader" }]
+      },
+      {
+        test: /\.less$/i,
+        use: [
+          {
+            loader: "style-loader" // creates style nodes from JS strings
+          },
+          {
+            loader: "css-loader" // translates CSS into CommonJS
+          },
+          {
+            loader: "less-loader" // compiles Less to CSS
+          }
+        ]
+      },
+      {
+        test: /\.css$/,
+        loader: "style-loader!css-loader"
+      },
+      // WOFF Font--needed?
+      {
+        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
+        use: {
+          loader: "url-loader",
+          options: {
+            limit: 10000,
+            mimetype: "application/font-woff"
+          }
+        }
+      },
+      {
+        // this allows things like background-image: url("myComponentsButton.svg") and have the resulting path look for the svg in the stylesheet's folder
+        // the last few seem to be needed for (at least) slick-carousel to build.
+        test: /\.(svg|jpg|png|ttf|eot|gif)$/,
+        use: {
+          loader: "file-loader"
+        }
+      }
+    ]
+  }
+};

webpack.config-prod.js

@@ -0,0 +1,16 @@
+const merge = require("webpack-merge");
+const common = require("./webpack.common.js");
+const TerserPlugin = require("terser-webpack-plugin");
+
+module.exports = merge(common, {
+    mode: "production",
+    devtool: "source-map",
+    output: {filename: "[name].min.js", sourceMapFilename: "[file].map" },
+
+    optimization: {
+        minimize: true,
+        minimizer: [new TerserPlugin({
+            sourceMap: true
+        })]
+    }
+});

webpack.config.js

@@ -0,0 +1,10 @@
+const merge = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+    mode: "development",
+    devtool: "source-map",
+    devServer: {
+        contentBase: "./dist"
+    }
+});