player/gas-react-sheets
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

optimize webpack and other minor changes

Browse Source
This commit is contained in:
Elisha Nuchi
2020-02-11 00:17:02 -05:00
parent ac658369f7
commit ad490675c1
19 changed files with 2884 additions and 13512 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.prettierrc.json
+4
View File
@@ -0,0 +1,4 @@
{
"singleQuote": true,
"trailingComma": "es5"
}
appsscript.json
+5 -4
View File
@@ -1,9 +1,10 @@
{
"timeZone": "America/New_York",
"dependencies": {
},
"dependencies": {},
"exceptionLogging": "STACKDRIVER",
"oauthScopes": [
"https://www.googleapis.com/auth/script.container.ui",
"https://www.googleapis.com/auth/spreadsheets"
]
}
],
"runtimeVersion": "V8"
}
dist/about.html
Vendored
+1 -5296
View File
File diff suppressed because it is too large Load Diff
dist/appsscript.json
Vendored
+5 -4
View File
@@ -1,9 +1,10 @@
{
"timeZone": "America/New_York",
"dependencies": {
},
"dependencies": {},
"exceptionLogging": "STACKDRIVER",
"oauthScopes": [
"https://www.googleapis.com/auth/script.container.ui",
"https://www.googleapis.com/auth/spreadsheets"
]
}
],
"runtimeVersion": "V8"
}
dist/code.js
Vendored
+15 -15
View File
@@ -60,21 +60,21 @@ function setActiveSheet() {
}, __webpack_require__.p = "", __webpack_require__(__webpack_require__.s = 1);
}([ function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.d(__webpack_exports__, "d", function() {
__webpack_require__.d(__webpack_exports__, "d", (function() {
return onOpen;
}), __webpack_require__.d(__webpack_exports__, "f", function() {
})), __webpack_require__.d(__webpack_exports__, "f", (function() {
return openDialog;
}), __webpack_require__.d(__webpack_exports__, "e", function() {
})), __webpack_require__.d(__webpack_exports__, "e", (function() {
return openAboutSidebar;
}), __webpack_require__.d(__webpack_exports__, "c", function() {
})), __webpack_require__.d(__webpack_exports__, "c", (function() {
return getSheetsData;
}), __webpack_require__.d(__webpack_exports__, "a", function() {
})), __webpack_require__.d(__webpack_exports__, "a", (function() {
return addSheet;
}), __webpack_require__.d(__webpack_exports__, "b", function() {
})), __webpack_require__.d(__webpack_exports__, "b", (function() {
return deleteSheet;
}), __webpack_require__.d(__webpack_exports__, "g", 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").addItem("About me", "openAboutSidebar").addToUi();
}, openDialog = function() {
@@ -87,14 +87,14 @@ function setActiveSheet() {
return SpreadsheetApp.getActive().getSheets();
}, getSheetsData = function() {
var activeSheetName = SpreadsheetApp.getActive().getSheetName();
return getSheets().map(function(sheet, index) {
return getSheets().map((function(sheet, index) {
var sheetName = sheet.getName();
return {
text: sheetName,
sheetIndex: index,
isActive: sheetName === activeSheetName
};
});
}));
}, addSheet = function(sheetTitle) {
return SpreadsheetApp.getActive().insertSheet(sheetTitle), getSheetsData();
}, deleteSheet = function(sheetIndex) {
@@ -106,11 +106,11 @@ function setActiveSheet() {
}, function(module, __webpack_exports__, __webpack_require__) {
"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__["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"];
var _sheets_utilities__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
global.onOpen = _sheets_utilities__WEBPACK_IMPORTED_MODULE_0__["d"], global.openDialog = _sheets_utilities__WEBPACK_IMPORTED_MODULE_0__["f"],
global.openAboutSidebar = _sheets_utilities__WEBPACK_IMPORTED_MODULE_0__["e"], global.getSheetsData = _sheets_utilities__WEBPACK_IMPORTED_MODULE_0__["c"],
global.addSheet = _sheets_utilities__WEBPACK_IMPORTED_MODULE_0__["a"], global.deleteSheet = _sheets_utilities__WEBPACK_IMPORTED_MODULE_0__["b"],
global.setActiveSheet = _sheets_utilities__WEBPACK_IMPORTED_MODULE_0__["g"];
}.call(this, __webpack_require__(2));
}, function(module, exports) {
var g;
dist/main.html
Vendored
+1 -5870
View File
File diff suppressed because one or more lines are too long
package-lock.json
Generated
+2664 -2147
View File
File diff suppressed because it is too large Load Diff
package.json
+32 -30
View File
@@ -19,57 +19,59 @@
],
"author": "Elisha Nuchi",
"license": "MIT",
"dependencies": {},
"dependencies": {
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-addons-css-transition-group": "^15.6.2",
"react-dom": "^16.12.0",
"react-transition-group": "^4.3.0"
},
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.5",
"@babel/plugin-proposal-class-properties": "^7.5.0",
"@babel/plugin-proposal-object-rest-spread": "^7.5.4",
"@babel/plugin-transform-object-assign": "^7.2.0",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"@google/clasp": "^1.7.0",
"@types/google-apps-script": "0.0.26",
"babel-eslint": "^10.0.2",
"@babel/cli": "^7.8.4",
"@babel/core": "^7.8.4",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-object-rest-spread": "^7.8.3",
"@babel/plugin-transform-object-assign": "^7.8.3",
"@babel/polyfill": "^7.8.3",
"@babel/preset-env": "^7.8.4",
"@babel/preset-react": "^7.8.3",
"@google/clasp": "^2.3.0",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"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",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^1.0.1",
"dynamic-cdn-webpack-plugin": "^5.0.0",
"eslint": "^5.16.0",
"eslint-config-google": "^0.9.1",
"eslint-config-prettier": "^2.9.0",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-config-prettier": "^2.10.0",
"eslint-config-standard": "^11.0.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-googleappsscript": "^1.0.2",
"eslint-plugin-import": "^2.17.3",
"eslint-plugin-googleappsscript": "^1.0.3",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-prettier": "^2.6.2",
"eslint-plugin-prettier": "^2.7.0",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-react": "^7.13.0",
"eslint-plugin-react": "^7.18.3",
"eslint-plugin-standard": "^3.1.0",
"gas-lib": "^2.0.3",
"gas-types-detailed": "^1.0.0",
"gas-webpack-plugin": "^0.3.0",
"html-webpack-inline-source-plugin": "0.0.10",
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.18.2",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-addons-css-transition-group": "^15.6.2",
"react-dom": "^16.8.6",
"react-transition-group": "^2.9.0",
"module-to-cdn": "^3.1.5",
"prettier": "^1.19.1",
"style-loader": "^0.22.1",
"tern": "^0.22.3",
"tern": "^0.24.3",
"tern-googleappsscript": "^1.0.2",
"uglifyjs-webpack-plugin": "^1.2.7",
"webpack": "^4.33.0",
"terser-webpack-plugin": "^2.3.4",
"webpack": "^4.41.5",
"webpack-clean": "^1.2.3",
"webpack-cli": "^3.3.3"
"webpack-cli": "^3.3.10"
}
}
src/client/.eslintrc.json
+4 -10
View File
@@ -1,17 +1,11 @@
{
"root": true,
"parser": "babel-eslint",
"extends": [
"plugin:react/recommended",
"eslint:recommended",
"google"
],
"plugins": [
"babel",
"react"
],
"extends": ["airbnb-base", "plugin:react/recommended", "eslint:recommended"],
"plugins": ["babel", "react"],
"env": {
"browser": true
"browser": true,
"es6": true
},
"globals": {
"google": false,
src/client/components/about-sidebar.jsx → src/client/components/about-sidebar.js
+1 -2
View File
@@ -1,5 +1,4 @@
import React from 'react';
import '../styles.css';
export const AboutPage = () => (
<div className="sheetNameText">
@@ -9,7 +8,7 @@ export const AboutPage = () => (
target="_blank"
rel="noopener noreferrer"
>
React + Google Apps Script
React + Google Apps Script
</a>
<div>-Elisha Nuchi</div>
</div>
src/client/components/form-input.jsx → src/client/components/form-input.js
+3 -4
View File
@@ -1,13 +1,12 @@
import React, {useState} from 'react';
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import '../styles.css';
export default function FormInput(props) {
const [text, setText] = useState('');
const handleChange = (event) => setText(event.target.value);
const handleChange = event => setText(event.target.value);
const handleSubmit = (event) => {
const handleSubmit = event => {
event.preventDefault();
if (text.length === 0) return;
src/client/components/sheet-button.js
+28
View File
@@ -0,0 +1,28 @@
import React from 'react';
import PropTypes from 'prop-types';
const SheetButton = props => {
const { name, deleteButtonHandler, clickSheetNameHandler } = props;
const { sheetIndex, text, isActive } = name;
return (
<div className="sheetLine">
<button onClick={e => deleteButtonHandler(e, sheetIndex)}>X</button>
<span
onClick={e => clickSheetNameHandler(e, text)}
className={'sheetNameText ' + (isActive ? 'active-sheet' : '')}
>
{text}
</span>
</div>
);
};
export default SheetButton;
SheetButton.propTypes = {
name: PropTypes.object,
deleteButtonHandler: PropTypes.func,
clickSheetNameHandler: PropTypes.func,
};
src/client/components/sheet-button.jsx
-31
View File
@@ -1,31 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import '../styles.css';
const SheetButton = (props) => {
const {name, deleteButtonHandler, clickSheetNameHandler} = props;
const {sheetIndex, text, isActive} = name;
return (
<div className="sheetLine">
<button
onClick={(e) => deleteButtonHandler(e, sheetIndex)}
>X
</button>
<span
onClick={(e) => clickSheetNameHandler(e, text)}
className={'sheetNameText ' + (isActive ? 'active-sheet' : '')}
>{text}
</span>
</div>
);
};
export default SheetButton;
SheetButton.propTypes = {
name: PropTypes.object,
deleteButtonHandler: PropTypes.func,
clickSheetNameHandler: PropTypes.func,
};
src/client/components/sheet-editor.jsx → src/client/components/sheet-editor.js
+14 -13
View File
@@ -1,4 +1,4 @@
import React, {useState, useEffect} from 'react';
import React, { useState, useEffect } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import FormInput from './form-input';
import SheetButton from './sheet-button';
@@ -6,7 +6,7 @@ import SheetButton from './sheet-button';
import server from '../server';
export default function SheetEditor() {
const {getSheetsData, addSheet, deleteSheet, setActiveSheet} = server;
const { getSheetsData, addSheet, deleteSheet, setActiveSheet } = server;
const [names, setNames] = useState([]);
@@ -43,18 +43,19 @@ export default function SheetEditor() {
transitionEnterTimeout={100}
transitionLeaveTimeout={100}
>
{names.length ? names.map((name) => {
return <SheetButton
name={name}
deleteButtonHandler={deleteButtonHandler}
clickSheetNameHandler={clickSheetNameHandler}
key={name.sheetName}
/>;
})
: null}
{names.length
? names.map(name => {
return (
<SheetButton
name={name}
deleteButtonHandler={deleteButtonHandler}
clickSheetNameHandler={clickSheetNameHandler}
key={name.sheetName}
/>
);
})
: null}
</ReactCSSTransitionGroup>
</div>
);
}
src/client/main.jsx
+2
View File
@@ -1,6 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import SheetEditor from './components/sheet-editor';
import './styles.css';
ReactDOM.render(
<SheetEditor />,
src/server/.eslintrc.json
+5 -4
View File
@@ -1,8 +1,8 @@
{
"root": true,
"parser": "babel-eslint",
"extends": ["eslint:recommended", "google"],
"plugins": ["googleappsscript"],
"extends": ["airbnb-base", "prettier"],
"plugins": ["googleappsscript", "prettier"],
"env": {
"googleappsscript/googleappsscript": true
},
@@ -12,6 +12,7 @@
"global": true
},
"rules": {
"import/prefer-default-export": 0
"import/prefer-default-export": 0,
"prettier/prettier": "error"
}
}
}
src/server/code.js
+1 -1
View File
@@ -1,4 +1,4 @@
import * as publicFunctions from './sheets-utilities.js';
import * as publicFunctions from './sheets-utilities';
// Expose public functions
global.onOpen = publicFunctions.onOpen;
src/server/sheets-utilities.js
+10 -22
View File
@@ -11,25 +11,18 @@ const openDialog = () => {
const html = HtmlService.createHtmlOutputFromFile('main')
.setWidth(400)
.setHeight(600);
SpreadsheetApp
.getUi() // Or DocumentApp or FormApp.
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(html, 'Sheet Editor');
};
const openAboutSidebar = () => {
const html = HtmlService.createHtmlOutputFromFile('about');
SpreadsheetApp
.getUi()
.showSidebar(html);
SpreadsheetApp.getUi().showSidebar(html);
};
const getSheets = () => SpreadsheetApp
.getActive()
.getSheets();
const getSheets = () => SpreadsheetApp.getActive().getSheets();
const getActiveSheetName = () => SpreadsheetApp
.getActive()
.getSheetName();
const getActiveSheetName = () => SpreadsheetApp.getActive().getSheetName();
const getSheetsData = () => {
const activeSheetName = getActiveSheetName();
@@ -43,24 +36,19 @@ const getSheetsData = () => {
});
};
const addSheet = (sheetTitle) => {
SpreadsheetApp
.getActive()
.insertSheet(sheetTitle);
const addSheet = sheetTitle => {
SpreadsheetApp.getActive().insertSheet(sheetTitle);
return getSheetsData();
};
const deleteSheet = (sheetIndex) => {
const deleteSheet = sheetIndex => {
const sheets = getSheets();
SpreadsheetApp
.getActive()
.deleteSheet(sheets[sheetIndex]);
SpreadsheetApp.getActive().deleteSheet(sheets[sheetIndex]);
return getSheetsData();
};
const setActiveSheet = (sheetName) => {
SpreadsheetApp
.getActive()
const setActiveSheet = sheetName => {
SpreadsheetApp.getActive()
.getSheetByName(sheetName)
.activate();
return getSheetsData();
webpack.config.js
+89 -59
View File
@@ -1,55 +1,52 @@
/*********************************
* import webpack plugins
********************************/
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const GasPlugin = require('gas-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const WebpackCleanPlugin = require('webpack-clean');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const DynamicCdnWebpackPlugin = require('dynamic-cdn-webpack-plugin');
// settings
/*********************************
* define file paths
********************************/
const destination = 'dist';
const htmlTemplate = './src/client/dialog-template.html';
const htmlWebpackInlineSourcePlugin = new HtmlWebpackInlineSourcePlugin();
const webpackCleanPlugin = new WebpackCleanPlugin([
destination + '/' + 'main.js',
]);
// Client entrypoints:
/*********************************
* client entry point paths
********************************/
const clientEntrypoints = [
{
name: "CLIENT - main dialog",
entry: "./src/client/main.jsx",
filename: "main.html"
name: 'CLIENT - main dialog',
entry: './src/client/main.jsx',
filename: 'main.html',
},
{
name: "CLIENT - about sidebar",
entry: "./src/client/about.jsx",
filename: "about.html"
name: 'CLIENT - about sidebar',
entry: './src/client/about.jsx',
filename: 'about.html',
},
];
/*********************************
* Declare settings
********************************/
// any shared client & server settings
const sharedConfigSettings = {
optimization: {
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
warnings: false,
ie8: true,
mangle: false,
compress: {
properties: false
},
output: {
beautify: true
}
}
})
]
performance: {
hints: 'warning',
maxEntrypointSize: 512000,
maxAssetSize: 512000,
},
module: {},
};
// eslint settings, to check during build if desired
const eslintConfig = {
enforce: 'pre',
test: /\.jsx?$/,
@@ -58,51 +55,55 @@ const eslintConfig = {
options: {
cache: false,
failOnError: false,
fix: true
}
fix: true,
},
};
// appscript copy settings, to copy this file over to the destination directory
const appsscriptConfig = {
name: "COPY APPSSCRIPT.JSON",
entry: "./appsscript.json",
name: 'COPY APPSSCRIPT.JSON',
entry: './appsscript.json',
plugins: [
new CleanWebpackPlugin([destination]),
new CopyWebpackPlugin([
{
from: './appsscript.json'
}
])
]
from: './appsscript.json',
},
]),
],
};
// config shared for all client settings
const clientConfig = {
...sharedConfigSettings,
output: {
path: path.resolve(__dirname, destination),
},
resolve: {
extensions: ['.js', '.jsx', '.json']
extensions: ['.js', '.jsx', '.json'],
},
module: {
rules: [
// turned off by default, but uncomment below to run linting during build
// eslintConfig,
{
test: /\.jsx$/,
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
use: ['style-loader', 'css-loader'],
},
],
},
};
const clientConfigs = clientEntrypoints.map((clientEntrypoint) => {
return ({
// config for EACH client entrypoint
const clientConfigs = clientEntrypoints.map(clientEntrypoint => {
return {
...clientConfig,
name: clientEntrypoint.name,
entry: clientEntrypoint.entry,
@@ -110,42 +111,71 @@ const clientConfigs = clientEntrypoints.map((clientEntrypoint) => {
new HtmlWebpackPlugin({
template: htmlTemplate,
filename: clientEntrypoint.filename,
inlineSource: '.(js|css)$' // embed all javascript and css inline
inlineSource: '^[^(//)]+.(js|css)$', // embed all js and css inline, exclude packages with '//' for dynamic cdn insertion
}),
htmlWebpackInlineSourcePlugin,
webpackCleanPlugin,
new HtmlWebpackInlineSourcePlugin(),
new WebpackCleanPlugin([path.join(destination, 'main.js')]),
new DynamicCdnWebpackPlugin(),
],
})
};
});
const serverConfig = {
...sharedConfigSettings,
name: "SERVER",
entry: "./src/server/code.js",
name: 'SERVER',
entry: './src/server/code.js',
output: {
filename: 'code.js',
path: path.resolve(__dirname, destination),
libraryTarget: 'this'
libraryTarget: 'this',
},
module: {
rules: [
// turned off by default, but uncomment below to run linting during build
// eslintConfig,
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
loader: 'babel-loader',
},
},
],
},
plugins: [
new GasPlugin()
]
optimization: {
minimizer: [
new TerserPlugin({
sourceMap: true,
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
properties: false,
},
mangle: false,
module: false,
output: {
beautify: true,
},
toplevel: false,
nameCache: null,
ie8: true,
keep_classnames: undefined,
keep_fnames: false,
safari10: false,
},
}),
],
},
plugins: [new GasPlugin()],
};
module.exports = [
// 1. Copy the appscript file.
appsscriptConfig,
// 2. One client bundle for each client entrypoint.
...clientConfigs,
// 3. Bundle the server
serverConfig,
];