aynish/grasp
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #29 from karlicoss/cleanup-webpack

Browse source 
Cleanup webpack
This commit is contained in:
Dmitrii Gerasimov 2020-02-14 23:30:12 +00:00 committed by GitHub
parent 7b637563b5 8f827fadbf
commit af24c99157
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 69 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
build
View file

@ -5,12 +5,11 @@ from subprocess import check_call
from pathlib import Path from pathlib import Path
TARGETS = ['chrome', 'firefox']
# TODO FIXME copypaste from promnesia # TODO FIXME copypaste from promnesia
# TODO FIXME use it in ci script # TODO FIXME use it in ci script
TARGETS = ['chrome', 'firefox']
def main(): def main():
p = argparse.ArgumentParser() p = argparse.ArgumentParser()
# TODO rename to --production??
p.add_argument('--release', action='store_true') p.add_argument('--release', action='store_true')
p.add_argument('--sign', action='store_true') p.add_argument('--sign', action='store_true')
p.add_argument('--lint', action='store_true') p.add_argument('--lint', action='store_true')
@ -22,6 +21,7 @@ def main():
args = p.parse_args() args = p.parse_args()
target = args.target target = args.target
assert target is not None
dist_dir = Path(__file__).absolute().parent / 'dist' dist_dir = Path(__file__).absolute().parent / 'dist'
def webext(*args, **kwargs): def webext(*args, **kwargs):
@ -33,10 +33,9 @@ def main():
*args, *args,
], **kwargs) ], **kwargs)
maybe_release = {'NODE_ENV': 'production'} if args.release else {}
env = { env = {
'TARGET': target, 'TARGET': target,
**maybe_release, 'RELEASE': 'YES' if args.release else 'NO',
**os.environ, **os.environ,
} }
check_call([ check_call([
@ -56,11 +55,12 @@ def main():
if target not in ['firefox', 'firefox-mobile']: if target not in ['firefox', 'firefox-mobile']:
raise RuntimeError("{target} is not supported for signing yet".format(target=target)) raise RuntimeError("{target} is not supported for signing yet".format(target=target))
dist_dir = Path(__file__).absolute().parent / 'dist'
src_dir = dist_dir / target
from firefox_dev_secrets import API_KEY, API_SECRET from firefox_dev_secrets import API_KEY, API_SECRET
webext( webext(
# TODO use UUID? https://addons.mozilla.org/en-GB/developers/addon/grasp/edit '--source-dir' , str(src_dir),
# TODO right, wouldn't work because it's listed..
'--artifacts-dir', str(dist_dir), '--artifacts-dir', str(dist_dir),
'--api-key' , API_KEY, '--api-key' , API_KEY,
'--api-secret', API_SECRET, '--api-secret', API_SECRET,
@ -69,3 +69,6 @@ def main():
if __name__ == '__main__': if __name__ == '__main__':
main() main()
# TODO use UUID? https://addons.mozilla.org/en-GB/developers/addon/grasp/edit
# TODO right, wouldn't work because it's listed..

16
package.json
View file

@ -1,7 +1,8 @@
{ {
"name": "grasp-extension", "name": "grasp",
"version": "0.6.6", "version": "0.6.6",
"description": "Reliably capture links and webpage content in a plaintext file (org-mode/markdown)", "description": "Reliably capture links and webpage content in a plaintext file (org-mode/markdown)",
"main": "dist/background.js",
"scripts": { "scripts": {
"build": "webpack --progress --profile --colors", "build": "webpack --progress --profile --colors",
"watch": "webpack --watch --progress --colors", "watch": "webpack --watch --progress --colors",
@ -13,6 +14,7 @@
"@babel/core": "^7.2.2", "@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3", "@babel/preset-env": "^7.2.3",
"@babel/preset-flow": "^7.0.0", "@babel/preset-flow": "^7.0.0",
"babel-loader": "^8.0.5",
"babel-eslint": "^10.0.1", "babel-eslint": "^10.0.1",
"clean-webpack-plugin": "^1.0.0", "clean-webpack-plugin": "^1.0.0",
"copy-webpack-plugin": "^4.2.0", "copy-webpack-plugin": "^4.2.0",
@ -20,20 +22,12 @@
"eslint": "^5.12.0", "eslint": "^5.12.0",
"eslint-config-google": "^0.11.0", "eslint-config-google": "^0.11.0",
"eslint-plugin-flowtype": "^3.2.0", "eslint-plugin-flowtype": "^3.2.0",
"file-loader": "^3.0.1",
"flow-bin": "^0.89.0", "flow-bin": "^0.89.0",
"flow-interfaces-chrome": "^0.5.3", "flow-interfaces-chrome": "^0.5.3",
"fs-extra": "^7.0.1", "style-loader": "^1.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.28.3", "webpack": "^4.28.3",
"webpack-cli": "^3.2.0", "webpack-cli": "^3.2.0",
"webpack-dev-server": "^3.1.14", "webpack-dev-server": "^3.1.14",
"webpack-extension-manifest-plugin": "^0.4.3", "webpack-extension-manifest-plugin": "^0.4.3"
"write-file-webpack-plugin": "^4.5.0"
},
"dependencies": {
"babel-loader": "^8.0.5"
} }
} }

1
server/test_with_browser.py
View file

@ -31,6 +31,7 @@ def get_webdriver():
driver.install_addon(str(addon_path), temporary=True) driver.install_addon(str(addon_path), temporary=True)
yield driver yield driver
finally: finally:
# confirm('ready to continue?')
driver.close() driver.close()

9
src/background.html
View file

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>

2
src/js/options_page.js
View file

@ -47,6 +47,7 @@ function refreshPermissionValidation(endpoint: string) {
} }
function restoreOptions() { function restoreOptions() {
getSaveButton().addEventListener('click', saveOptions);
get_options(opts => { get_options(opts => {
const ep = opts.endpoint; const ep = opts.endpoint;
getEndpoint().value = ep; getEndpoint().value = ep;
@ -74,4 +75,3 @@ function saveOptions() {
document.addEventListener('DOMContentLoaded', restoreOptions); document.addEventListener('DOMContentLoaded', restoreOptions);
getSaveButton().addEventListener('click', saveOptions);

14
src/manifest.json
View file

@ -1,14 +1,13 @@
{ {
"icons": { "name": "<webpack managed>",
"128": "unicorn.png" "version": "<webpack managed>",
"background": {
"scripts": ["background.js"],
"persistent": false
}, },
"options_ui": { "options_ui": {
"page": "options.html" "page": "options.html"
}, },
"background": {
"page": "background.html"
},
"browser_action": { "browser_action": {
"default_icon": "unicorn.png", "default_icon": "unicorn.png",
"default_popup": "popup.html", "default_popup": "popup.html",
@ -22,5 +21,8 @@
"description": "Capture page, with extra information" "description": "Capture page, with extra information"
} }
}, },
"icons": {
"128": "unicorn.png"
},
"manifest_version": 2 "manifest_version": 2
} }

2
src/options.html
View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title></title> <script type="text/javascript" src="options_page.js"/></script>
<style> <style>
input:invalid { input:invalid {
background-color: red; background-color: red;

1
src/popup.html
View file

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<script type="text/javascript" src="popup.js"></script>
</head> </head>
<body> <body>
<!-- TODO ugh didn't work --> <!-- TODO ugh didn't work -->

9
utils/build.js
View file

@ -1,9 +0,0 @@
var webpack = require("webpack"),
config = require("../webpack.config");
delete config.chromeExtensionBoilerplate;
webpack(
config,
function (err) { if (err) throw err; }
);

6
utils/env.js
View file

@ -1,6 +0,0 @@
// tiny wrapper with default env vars
module.exports = {
NODE_ENV: (process.env.NODE_ENV || "development"),
PORT: (process.env.PORT || 3000),
TARGET: (process.env.TARGET || 'chrome'),
};

34
utils/webserver.js
View file

@ -1,34 +0,0 @@
var WebpackDevServer = require("webpack-dev-server"),
webpack = require("webpack"),
config = require("../webpack.config"),
env = require("./env"),
path = require("path");
var options = (config.chromeExtensionBoilerplate || {});
var excludeEntriesToHotReload = (options.notHotReload || []);
for (var entryName in config.entry) {
if (excludeEntriesToHotReload.indexOf(entryName) === -1) {
config.entry[entryName] =
[
("webpack-dev-server/client?http://localhost:" + env.PORT),
"webpack/hot/dev-server"
].concat(config.entry[entryName]);
}
}
config.plugins =
[new webpack.HotModuleReplacementPlugin()].concat(config.plugins || []);
delete config.chromeExtensionBoilerplate;
var compiler = webpack(config);
var server =
new WebpackDevServer(compiler, {
hot: true,
contentBase: path.join(__dirname, "../build"),
headers: { "Access-Control-Allow-Origin": "*" }
});
server.listen(env.PORT);

117
webpack.config.js
View file

@ -1,33 +1,32 @@
var webpack = require("webpack"), const webpack = require('webpack'),
path = require("path"), path = require('path'),
fileSystem = require("fs"), CleanWebpackPlugin = require('clean-webpack-plugin'),
env = require("./utils/env"), CopyWebpackPlugin = require('copy-webpack-plugin'),
CleanWebpackPlugin = require("clean-webpack-plugin"), WebpackExtensionManifestPlugin = require('webpack-extension-manifest-plugin');
CopyWebpackPlugin = require("copy-webpack-plugin"), // TODO remove plugins from package.json
HtmlWebpackPlugin = require("html-webpack-plugin"),
WriteFilePlugin = require("write-file-webpack-plugin"), const T = {
WebpackExtensionManifestPlugin = require("webpack-extension-manifest-plugin"); CHROME : 'chrome',
FIREFOX: 'firefox',
};
const env = {
TARGET : process.env.TARGET, // TODO assert not null?
RELEASE: process.env.RELEASE,
};
const pkg = require('./package.json'); const pkg = require('./package.json');
const baseManifest = require('./src/manifest.json'); const baseManifest = require('./src/manifest.json');
const release = env.RELEASE == 'YES' ? true : false;
const dev = !release; // meh. maybe make up my mind?
const target = env.TARGET; const target = env.TARGET;
const dev = env.NODE_ENV === "development";
const pkg_name = "grasp" + (dev ? ' [dev]' : ''); const name = "grasp" + (dev ? ' [dev]' : '');
// TODO make permissions literate
const permissions = [
"storage",
"notifications",
"activeTab",
"http://localhost/capture",
"https://localhost/capture"
];
// Firefox wouldn't let you rebind its default shortcuts most of which use Shift // Firefox wouldn't let you rebind its default shortcuts most of which use Shift
// On the other hand, Chrome wouldn't let you use Alt // On the other hand, Chrome wouldn't let you use Alt
const modifier = target === 'chrome' ? 'Shift' : 'Alt'; const modifier = target === T.CHROME ? 'Shift' : 'Alt';
// ugh. declarative formats are shit. // ugh. declarative formats are shit.
const commandsExtra = { const commandsExtra = {
@ -45,8 +44,18 @@ const commandsExtra = {
}, },
}; };
// TODO make permissions literate
const permissions = [
"storage",
"notifications",
"activeTab",
"http://localhost/capture",
"https://localhost/capture"
];
const manifestExtra = { const manifestExtra = {
name: pkg_name, name: name,
version: pkg.version, version: pkg.version,
description: pkg.description, description: pkg.description,
permissions: permissions, permissions: permissions,
@ -61,43 +70,31 @@ if (dev) {
manifestExtra.content_security_policy = "script-src 'self' 'unsafe-eval'; object-src 'self'"; manifestExtra.content_security_policy = "script-src 'self' 'unsafe-eval'; object-src 'self'";
} }
if (target === 'chrome') { if (target === T.CHROME) {
manifestExtra.options_ui = {chrome_style: true}; manifestExtra.options_ui = {chrome_style: true};
} }
if (target === 'firefox') { if (target === T.FIREFOX) {
manifestExtra.options_ui = {browser_style: true}; manifestExtra.options_ui = {browser_style: true};
manifestExtra.browser_action = {browser_style: true}; manifestExtra.browser_action = {browser_style: true};
} }
// load the secrets
var alias = {};
var secretsPath = path.join(__dirname, ("secrets." + env.NODE_ENV + ".js"));
var fileExtensions = ["jpg", "jpeg", "png", "gif", "eot", "otf", "svg", "ttf", "woff", "woff2"];
if (fileSystem.existsSync(secretsPath)) {
alias["secrets"] = secretsPath;
}
const build_path = path.join(__dirname, "dist"); // TODO target?? const build_path = path.join(__dirname, "dist"); // TODO target??
var options = { const options = {
mode: 'production', mode: dev ? 'development' : 'production', // TODO map directly from MODE env var?
optimization: { optimization: {
// https://webpack.js.org/configuration/optimization // https://webpack.js.org/configuration/optimization
// don't thing minimize worth it for suck a tiny extension // don't think minimize worth it for such a tiny extension
minimize: false minimize: false
}, },
entry: { entry: {
popup : path.join(__dirname, "src", "js", "popup.js"), background : path.join(__dirname, "src", "js", "background"),
options : path.join(__dirname, "src", "js", "options_page.js"), popup : path.join(__dirname, "src", "js", "popup"),
background: path.join(__dirname, "src", "js", "background.js") options_page: path.join(__dirname, "src", "js", "options_page"),
}, },
output: { output: {
path: build_path, path: build_path,
// TODO why bundle??? filename: "[name].js",
filename: "[name].bundle.js",
}, },
module: { module: {
rules: [ rules: [
@ -110,12 +107,7 @@ var options = {
}, },
{ {
test: /\.css$/, test: /\.css$/,
loader: "style-loader!css-loader", loader: "style-loader!css-loader", // TODO different from promnesia??
exclude: /node_modules/
},
{
test: new RegExp('\.(' + fileExtensions.join('|') + ')$'),
loader: "file-loader?name=[name].[ext]",
exclude: /node_modules/ exclude: /node_modules/
}, },
{ {
@ -125,46 +117,23 @@ var options = {
} }
] ]
}, },
resolve: {
alias: alias
},
plugins: [ plugins: [
// clean the build folder
new CleanWebpackPlugin([build_path + "/*"]), new CleanWebpackPlugin([build_path + "/*"]),
new CopyWebpackPlugin([ new CopyWebpackPlugin([
{ from: 'src/img/*.png', flatten: true }, { from: 'src/img/*.png', flatten: true },
{ from: 'src/*.html' , flatten: true },
]), ]),
// expose and write the allowed env vars on the compiled bundle
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify(env.NODE_ENV)
}),
new WebpackExtensionManifestPlugin({ new WebpackExtensionManifestPlugin({
config: { config: {
base: baseManifest, base: baseManifest,
extend: manifestExtra, extend: manifestExtra,
} }
}), }),
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "popup.html"),
filename: "popup.html",
chunks: ["popup"],
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "options.html"),
filename: "options.html",
chunks: ["options"]
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "background.html"),
filename: "background.html",
chunks: ["background"]
}),
new WriteFilePlugin()
] ]
}; };
// TODO https://webpack.js.org/configuration/devtool // TODO https://webpack.js.org/configuration/devtool
if (env.NODE_ENV === "development") { if (dev) {
options.devtool = "cheap-module-eval-source-map"; options.devtool = "cheap-module-eval-source-map";
} }