v2 Enable local development (#52)

- Create local dev environment
- Add gas-client and google-apps-script-webpack-dev-server packages for development
- Add dev/ wrapper app
- Update webpack config to support development environment
- Redesigned READMEs
- Support typescript
- Update npm scripts
- Organize and update .gitignore file
- Add .vscode settings for clasp files
- Remove tracking for files in dist/

dev/index.js

@@ -0,0 +1,66 @@
+import React, { useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import server from '../src/client/utils/server';
+
+const { serverFunctions } = server;
+
+const { FILENAME, PORT } = process.env;
+
+const DevServer = () => {
+  const iframe = React.useRef(null);
+  useEffect(() => {
+    const handleRequest = event => {
+      const request = event.data;
+      const { type, functionName, id, args } = request;
+
+      if (type !== 'REQUEST') return;
+
+      serverFunctions[functionName](...args)
+        .then(response => {
+          iframe.current.contentWindow.postMessage(
+            { type: 'RESPONSE', id, status: 'SUCCESS', response },
+            `https://localhost:${PORT}`
+          );
+        })
+        .catch(err => {
+          iframe.current.contentWindow.postMessage(
+            {
+              type: 'RESPONSE',
+              id,
+              status: 'ERROR',
+              response: err,
+            },
+            `https://localhost:${PORT}`
+          );
+        });
+    };
+
+    window.addEventListener('message', handleRequest, false);
+  }, []);
+
+  return (
+    <div
+      // we want our dev environment to fill the dialog window
+      style={{
+        width: '100%',
+        height: '100%',
+      }}
+    >
+      <iframe
+        style={{
+          width: '100%',
+          height: '100%',
+          border: '0',
+          position: 'absolute',
+        }}
+        ref={iframe}
+        // The "/gas/" path here must match the path where the custom dev server is being loaded.
+        // See webpack.config.js "devServer" "before" settings.
+        // Filename extension "-impl" must match webpack.config.js clientConfigs filename settings for development.
+        src={`https://localhost:${PORT}/gas/${FILENAME}-impl.html`}
+      />
+    </div>
+  );
+};
+
+ReactDOM.render(<DevServer />, document.getElementById('index'));