Merge pull request #17 from enuchi/support-multiple-entrypoints

Support multiple entrypoints

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 .clasp*
+creds.json

dist/code.js

@@ -2,6 +2,8 @@ function onOpen() {
 }
 function openDialog() {
 }
+function openAboutSidebar() {
+}
 function getSheetsData() {
 }
 function addSheet() {
@@ -60,22 +62,27 @@ function setActiveSheet() {
     "use strict";
     __webpack_require__.d(__webpack_exports__, "d", function() {
         return onOpen;
-    }), __webpack_require__.d(__webpack_exports__, "e", function() {
+    }), __webpack_require__.d(__webpack_exports__, "f", function() {
         return openDialog;
+    }), __webpack_require__.d(__webpack_exports__, "e", function() {
+        return openAboutSidebar;
     }), __webpack_require__.d(__webpack_exports__, "c", function() {
         return getSheetsData;
     }), __webpack_require__.d(__webpack_exports__, "a", function() {
         return addSheet;
     }), __webpack_require__.d(__webpack_exports__, "b", function() {
         return deleteSheet;
-    }), __webpack_require__.d(__webpack_exports__, "f", function() {
+    }), __webpack_require__.d(__webpack_exports__, "g", function() {
         return setActiveSheet;
     });
     var onOpen = function() {
-        SpreadsheetApp.getUi().createMenu("Custom scripts").addItem("Edit sheets [sample React project]", "openDialog").addToUi();
+        SpreadsheetApp.getUi().createMenu("Custom scripts").addItem("Edit sheets [sample React project]", "openDialog").addItem("About me", "openAboutSidebar").addToUi();
     }, openDialog = function() {
-        var html = HtmlService.createHtmlOutputFromFile("dialog").setWidth(400).setHeight(600);
+        var html = HtmlService.createHtmlOutputFromFile("main").setWidth(400).setHeight(600);
         SpreadsheetApp.getUi().showModalDialog(html, "Sheet Editor");
+    }, openAboutSidebar = function() {
+        var html = HtmlService.createHtmlOutputFromFile("about");
+        SpreadsheetApp.getUi().showSidebar(html);
     }, getSheets = function() {
         return SpreadsheetApp.getActive().getSheets();
     }, getSheetsData = function() {
@@ -100,9 +107,10 @@ function setActiveSheet() {
     "use strict";
     __webpack_require__.r(__webpack_exports__), function(global) {
         var _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-        global.onOpen = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__.d, global.openDialog = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__.e, 
-        global.getSheetsData = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__.c, global.addSheet = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__.a, 
-        global.deleteSheet = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__.b, global.setActiveSheet = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__.f;
+        global.onOpen = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["d"], global.openDialog = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["f"], 
+        global.openAboutSidebar = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["e"], 
+        global.getSheetsData = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["c"], global.addSheet = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["a"], 
+        global.deleteSheet = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["b"], global.setActiveSheet = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["g"];
     }.call(this, __webpack_require__(2));
 }, function(module, exports) {
     var g;

dist/main.html

@@ -5812,7 +5812,7 @@
     var react = __webpack_require__(0), react_default = __webpack_require__.n(react), react_dom = __webpack_require__(3), react_dom_default = __webpack_require__.n(react_dom), react_addons_css_transition_group = __webpack_require__(8), react_addons_css_transition_group_default = __webpack_require__.n(react_addons_css_transition_group), prop_types = __webpack_require__(1), prop_types_default = __webpack_require__.n(prop_types);
     __webpack_require__(7);
     function FormInput(props) {
-        const [text, setText] = Object(react.useState)("");
+        const [text, setText] = Object(react["useState"])("");
         return react_default.a.createElement("div", {
             className: "formBlock"
         }, react_default.a.createElement("span", null, "Add a sheet: "), react_default.a.createElement("form", {
@@ -5845,14 +5845,14 @@
         deleteButtonHandler: prop_types_default.a.func,
         clickSheetNameHandler: prop_types_default.a.func
     };
-    const ignoredMethods = [ "withFailureHandler", "withLogger", "withSuccessHandler", "withUserObject" ], serverMethods = {};
+    const serverMethods = {}, ignoredMethods = [ "withFailureHandler", "withLogger", "withSuccessHandler", "withUserObject" ];
     for (const method in google.script.run) ignoredMethods.includes(method) || (serverMethods[method] = ((...args) => new Promise((resolve, reject) => {
         google.script.run.withSuccessHandler(resolve).withFailureHandler(reject)[method](...args);
     })));
     var server = serverMethods;
     react_dom_default.a.render(react_default.a.createElement(function() {
-        const {getSheetsData: getSheetsData, addSheet: addSheet, deleteSheet: deleteSheet, setActiveSheet: setActiveSheet} = server, [names, setNames] = Object(react.useState)([]);
-        Object(react.useEffect)(() => {
+        const {getSheetsData: getSheetsData, addSheet: addSheet, deleteSheet: deleteSheet, setActiveSheet: setActiveSheet} = server, [names, setNames] = Object(react["useState"])([]);
+        Object(react["useEffect"])(() => {
             getSheetsData().then(setNames)["catch"](alert);
         }, []);
         const deleteButtonHandler = (e, sheetIndex) => {

package.json

@@ -4,6 +4,8 @@
   "description": "Starter project for using React with Google Apps Script",
   "scripts": {
     "test": "test",
+    "login": "clasp login",
+    "setup": "clasp create --type sheets --title 'My React Project' --rootDir ./dist",
     "start": "webpack --mode development",
     "build": "webpack --mode production",
     "deploy": "npm run build && npx clasp push"
@@ -34,6 +36,7 @@
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
     "babel-plugin-transform-es3-property-literals": "^6.22.0",
+    "clasp": "^1.0.0",
     "clean-webpack-plugin": "^0.1.19",
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^1.0.1",

src/client/about.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {AboutPage} from './components/about-sidebar';
+
+ReactDOM.render(
+  <AboutPage />,
+  document.getElementById('index')
+);

src/client/components/about-sidebar.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import '../styles.css';
+
+export const AboutPage = () => (
+  <div className="sheetNameText">
+    <div>Github repo:</div>
+    <a
+      href="https://www.github.com/enuchi/React-Google-Apps-Script"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+     React + Google Apps Script
+    </a>
+    <div>-Elisha Nuchi</div>
+  </div>
+);

src/server/code.js

@@ -3,6 +3,7 @@ import * as publicFunctions from './sheets-utilities.js';
 // Expose public functions
 global.onOpen = publicFunctions.onOpen;
 global.openDialog = publicFunctions.openDialog;
+global.openAboutSidebar = publicFunctions.openAboutSidebar;
 global.getSheetsData = publicFunctions.getSheetsData;
 global.addSheet = publicFunctions.addSheet;
 global.deleteSheet = publicFunctions.deleteSheet;

src/server/sheets-utilities.js

@@ -3,11 +3,12 @@ const onOpen = () => {
   SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
     .createMenu('Custom scripts')
     .addItem('Edit sheets [sample React project]', 'openDialog')
+    .addItem('About me', 'openAboutSidebar')
     .addToUi();
 };
 
 const openDialog = () => {
-  let html = HtmlService.createHtmlOutputFromFile('dialog')
+  const html = HtmlService.createHtmlOutputFromFile('main')
     .setWidth(400)
     .setHeight(600);
   SpreadsheetApp
@@ -15,6 +16,13 @@ const openDialog = () => {
     .showModalDialog(html, 'Sheet Editor');
 };
 
+const openAboutSidebar = () => {
+  const html = HtmlService.createHtmlOutputFromFile('about');
+  SpreadsheetApp
+    .getUi()
+    .showSidebar(html);
+};
+
 const getSheets = () => SpreadsheetApp
   .getActive()
   .getSheets();
@@ -24,9 +32,9 @@ const getActiveSheetName = () => SpreadsheetApp
   .getSheetName();
 
 const getSheetsData = () => {
-  let activeSheetName = getActiveSheetName();
+  const activeSheetName = getActiveSheetName();
   return getSheets().map((sheet, index) => {
-    let sheetName = sheet.getName();
+    const sheetName = sheet.getName();
     return {
       text: sheetName,
       sheetIndex: index,
@@ -43,7 +51,7 @@ const addSheet = (sheetTitle) => {
 };
 
 const deleteSheet = (sheetIndex) => {
-  let sheets = getSheets();
+  const sheets = getSheets();
   SpreadsheetApp
     .getActive()
     .deleteSheet(sheets[sheetIndex]);
@@ -61,6 +69,7 @@ const setActiveSheet = (sheetName) => {
 export {
   onOpen,
   openDialog,
+  openAboutSidebar,
   getSheetsData,
   addSheet,
   deleteSheet,

webpack.config.js

@@ -4,19 +4,30 @@ const CleanWebpackPlugin = require('clean-webpack-plugin');
 const GasPlugin = require('gas-webpack-plugin');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const WebpackCleanPlugin = require('webpack-clean');
-
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
 
+// settings
 const destination = 'dist';
-
-const htmlPlugin = new HtmlWebpackPlugin({
-  template: "./src/client/dialog-template.html",
-  filename: "dialog.html",
-  inlineSource: '.(js|css)$' // embed all javascript and css inline
-});
-
+const htmlTemplate = './src/client/dialog-template.html';
 const htmlWebpackInlineSourcePlugin = new HtmlWebpackInlineSourcePlugin();
+const webpackCleanPlugin = new WebpackCleanPlugin([
+  destination + '/' + 'main.js',
+]);
+
+// Client entrypoints:
+const clientEntrypoints = [
+  {
+    name: "CLIENT - main dialog",
+    entry: "./src/client/main.jsx",
+    filename: "main.html"
+  },
+  {
+    name: "CLIENT - about sidebar",
+    entry: "./src/client/about.jsx",
+    filename: "about.html"
+  },
+];
 
 const sharedConfigSettings = {
   optimization: {
@@ -64,9 +75,8 @@ const appsscriptConfig = {
   ]
 };
 
-const clientConfig = Object.assign({}, sharedConfigSettings, {
-  name: "CLIENT",
-  entry: "./src/client/index.jsx",
+const clientConfig = {
+  ...sharedConfigSettings,
   output: {
     path: path.resolve(__dirname, destination),
   },
@@ -89,16 +99,27 @@ const clientConfig = Object.assign({}, sharedConfigSettings, {
       }
     ],
   },
+};
+
+const clientConfigs = clientEntrypoints.map((clientEntrypoint) => {
+  return ({
+    ...clientConfig,
+    name: clientEntrypoint.name,
+    entry: clientEntrypoint.entry,
     plugins: [
-    htmlPlugin,
-    new HtmlWebpackInlineSourcePlugin(),
-    new WebpackCleanPlugin([
-      destination + '/' + 'main.js',
-    ])
-  ]
+      new HtmlWebpackPlugin({
+        template: htmlTemplate,
+        filename: clientEntrypoint.filename,
+        inlineSource: '.(js|css)$' // embed all javascript and css inline
+      }),
+      htmlWebpackInlineSourcePlugin,
+      webpackCleanPlugin,
+    ],
+  })
 });
 
-const serverConfig = Object.assign({}, sharedConfigSettings, {
+const serverConfig = {
+  ...sharedConfigSettings,
   name: "SERVER",
   entry: "./src/server/code.js",
   output: {
@@ -121,10 +142,10 @@ const serverConfig = Object.assign({}, sharedConfigSettings, {
   plugins: [
     new GasPlugin()
   ]
-});
+};
 
 module.exports = [
   appsscriptConfig,
-  clientConfig,
+  ...clientConfigs,
   serverConfig,
 ];