multiple entrypoints

dist/about.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)([]);
+        const {getSheetsData: getSheetsData, addSheet: addSheet, deleteSheet: deleteSheet, setActiveSheet: setActiveSheet} = server, [names, setNames] = Object(react["useState"])([]);
-        Object(react.useEffect)(() => {
+        Object(react["useEffect"])(() => {
             getSheetsData().then(setNames)["catch"](alert);
         }, []);
         const deleteButtonHandler = (e, sheetIndex) => {

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.onOpen = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["d"], global.openDialog = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["f"], 
-        global.getSheetsData = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__.c, global.addSheet = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__.a, 
+        global.openAboutSidebar = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__["e"], 
-        global.deleteSheet = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__.b, global.setActiveSheet = _sheets_utilities_js__WEBPACK_IMPORTED_MODULE_0__.f;
+        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;

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')
+  let html = HtmlService.createHtmlOutputFromFile('main')
     .setWidth(400)
     .setHeight(600);
   SpreadsheetApp
@@ -15,6 +16,13 @@ const openDialog = () => {
     .showModalDialog(html, 'Sheet Editor');
 };
 
+const openAboutSidebar = () => {
+  let html = HtmlService.createHtmlOutputFromFile('about');
+  SpreadsheetApp
+    .getUi()
+    .showSidebar(html);
+};
+
 const getSheets = () => SpreadsheetApp
   .getActive()
   .getSheets();
@@ -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 htmlTemplate = './src/client/dialog-template.html';
-const htmlPlugin = new HtmlWebpackPlugin({
-  template: "./src/client/dialog-template.html",
-  filename: "dialog.html",
-  inlineSource: '.(js|css)$' // embed all javascript and css inline
-});
-
 const htmlWebpackInlineSourcePlugin = new HtmlWebpackInlineSourcePlugin();
+const webpackCleanPlugin = new WebpackCleanPlugin([
+  destination + '/' + 'main.js',
+]);
+
+// Client entrypoints:
+const clientEntrypoints = [
+  {
+    name: "CLIENT - main dialog",
+    entry: "./src/client/index.jsx",
+    filename: "main.html"
+  },
+  {
+    name: "CLIENT - about sidebar",
+    entry: "./src/client/index.jsx",
+    filename: "about.html"
+  },
+];
 
 const sharedConfigSettings = {
   optimization: {
@@ -64,9 +75,10 @@ const appsscriptConfig = {
   ]
 };
 
-const clientConfig = Object.assign({}, sharedConfigSettings, {
+const clientConfig = {
-  name: "CLIENT",
+  ...sharedConfigSettings,
-  entry: "./src/client/index.jsx",
+  // name: "CLIENT",
+  // entry: "./src/client/index.jsx",
   output: {
     path: path.resolve(__dirname, destination),
   },
@@ -89,16 +101,35 @@ const clientConfig = Object.assign({}, sharedConfigSettings, {
       }
     ],
   },
-  plugins: [
+  // plugins: [
-    htmlPlugin,
+  //   htmlWebpackInlineSourcePlugin,
-    new HtmlWebpackInlineSourcePlugin(),
+  //   webpackCleanPlugin,
-    new WebpackCleanPlugin([
+  // ]
-      destination + '/' + 'main.js',
+};
-    ])
-  ]
-});
 
-const serverConfig = Object.assign({}, sharedConfigSettings, {
+const clientConfigs = clientEntrypoints.map((clientEntrypoint) => {
+  return ({
+    ...clientConfig,
+    name: clientEntrypoint.name,
+    entry: clientEntrypoint.entry,
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: htmlTemplate,
+        filename: clientEntrypoint.filename,
+        inlineSource: '.(js|css)$' // embed all javascript and css inline
+      }),
+      htmlWebpackInlineSourcePlugin,
+      webpackCleanPlugin,
+    ],
+  })
+});
+    // };
+  // };
+
+console.log(clientConfigs)
+
+const serverConfig = {
+  ...sharedConfigSettings,
   name: "SERVER",
   entry: "./src/server/code.js",
   output: {
@@ -121,10 +152,10 @@ const serverConfig = Object.assign({}, sharedConfigSettings, {
   plugins: [
     new GasPlugin()
   ]
-});
+};
 
 module.exports = [
   appsscriptConfig,
-  clientConfig,
+  ...clientConfigs,
   serverConfig,
 ];