feat: drop typescript support for new branch

.babelrc

@@ -15,13 +15,16 @@
         }
       }
     ],
-    "@babel/typescript",
     "@babel/react"
   ],
   "plugins": [
     ["@babel/plugin-proposal-class-properties"],
-    ["@babel/plugin-transform-destructuring", { "useBuiltIns": true }],
+    ["@babel/plugin-transform-destructuring", {
-    ["@babel/plugin-proposal-object-rest-spread", { "useBuiltIns": true }],
+      "useBuiltIns": true
+    }],
+    ["@babel/plugin-proposal-object-rest-spread", {
+      "useBuiltIns": true
+    }],
     [
       // Polyfills the runtime needed for async/await and generators
       "@babel/plugin-transform-runtime",

.eslintignore

@@ -1,5 +1,4 @@
 node_modules/
-dist/
 extension/
 .yarn/
 .pnp.js

.eslintrc.json

@@ -1,6 +1,6 @@
 {
 	"extends": [
-		"@abhijithvijayan/eslint-config/typescript",
+		"@abhijithvijayan/eslint-config",
 		"@abhijithvijayan/eslint-config/react"
 	],
 	"rules": {
@@ -12,4 +12,4 @@
 	"env": {
 		"webextensions": true
 	}
-}
+}

LICENCE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) Abhijith Vijayan <34790378+abhijithvijayan@users.noreply.github.com> (abhijithvijayan.in)
+Copyright (c) Abhijith Vijayan <email@abhijithvijayan.in> (abhijithvijayan.in)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,9 +1,8 @@
 <h1 align="center">🚀 web-extension-starter</h1>
-<h3 align="center">TypeScript + React Version</h3>
 <p align="center">Web Extension starter to build "Write Once Run on Any Browser" extension</p>
 <div align="center">
   <a href="https://travis-ci.com/abhijithvijayan/web-extension-starter">
-    <img src="https://travis-ci.com/abhijithvijayan/web-extension-starter.svg?branch=react-typescript" alt="Travis Build" />
+    <img src="https://travis-ci.com/abhijithvijayan/web-extension-starter.svg?branch=react-javascript" alt="Travis Build" />
   </a>
   </a>
   <a href="https://david-dm.org/abhijithvijayan/web-extension-starter">
@@ -31,7 +30,11 @@
 
 ❤️ it? ⭐️ it on [GitHub](https://github.com/abhijithvijayan/web-extension-starter) or [Tweet](https://twitter.com/intent/tweet?text=Check%20out%20web-extension-starter%21%20by%20%40_abhijithv%0A%0AWeb%20Extension%20starter%20to%20build%20%22Write%20Once%20Run%20on%20Any%20Browser%22%20extension.%20https%3A%2F%2Fgithub.com%2Fabhijithvijayan%2Fweb-extension-starter%0A%0A%23javascript%20%23react%20%23typescript%20%23sass%20%23webextension%20%23chrome%20%23firefox%20%23opera) about it.
 
-👶🏼 Looking for [Non React/TypeScript Version](https://github.com/abhijithvijayan/web-extension-starter/tree/master) instead?
+😨 **React + JavaScript** = [This](https://github.com/abhijithvijayan/web-extension-starter/tree/react-javascript) branch
+
+🧙‍♂️ **React + TypeScript** = Checkout [react-typescript](https://github.com/abhijithvijayan/web-extension-starter/tree/react-typescript) branch
+
+👶🏼 **HTML + JavaScript** = Checkout [master](https://github.com/abhijithvijayan/web-extension-starter/tree/master) branch
 
 ## Features
 
@@ -40,7 +43,6 @@
 - Automatic build on code changes
 - Auto packs browser specific build files
 - SASS styling
-- TypeScript by default
 - ES6 modules support
 - React UI Library by default
 - Smart reload
@@ -60,7 +62,7 @@
 Create a new directory and run
 
 ```
-curl -fsSL https://github.com/abhijithvijayan/web-extension-starter/archive/react-typescript.tar.gz | tar -xz --strip-components=1
+curl -fsSL https://github.com/abhijithvijayan/web-extension-starter/archive/react-javascript.tar.gz | tar -xz --strip-components=1
 ```
 
 ## 🚀 Quick Start
@@ -165,10 +167,9 @@ See the original [README](https://github.com/abhijithvijayan/wext-manifest-loade
 
 Please file an issue [here](https://github.com/abhijithvijayan/web-extension-starter/issues/new) for bugs, missing documentation, or unexpected behavior.
 
-### Linting & TypeScript Config
+### Linting Config
 
 - Shared Eslint & Prettier Configuration - [`@abhijithvijayan/eslint-config`](https://www.npmjs.com/package/@abhijithvijayan/eslint-config)
-- Shared TypeScript Configuration - [`@abhijithvijayan/tsconfig`](https://www.npmjs.com/package/@abhijithvijayan/tsconfig)
 
 ## License
 

package.json

@@ -1,10 +1,14 @@
 {
   "name": "web-extension-starter",
-  "version": "2.0.0",
+  "version": "3.0.0",
-  "description": "Web extension starter using react and typescript",
+  "description": "Web extension starter using react and javascript",
   "private": true,
   "repository": "https://github.com/abhijithvijayan/web-extension-starter.git",
-  "author": "abhijithvijayan <34790378+abhijithvijayan@users.noreply.github.com>",
+  "author": {
+    "name": "abhijithvijayan",
+    "email": "email@abhijithvijayan.in",
+    "url": "https://abhijithvijayan.in"
+  },
   "license": "MIT",
   "engines": {
     "node": ">=10.0.0",
@@ -18,8 +22,8 @@
     "build:firefox": "cross-env NODE_ENV=production cross-env TARGET_BROWSER=firefox webpack",
     "build:opera": "cross-env NODE_ENV=production cross-env TARGET_BROWSER=opera webpack",
     "build": "yarn run build:chrome && yarn run build:firefox && yarn run build:opera",
-    "lint": "eslint . --ext .ts,.tsx",
+    "lint": "eslint . --ext .js,.jsx",
-    "lint:fix": "eslint . --ext .ts,.tsx --fix"
+    "lint:fix": "eslint . --ext .js,.jsx --fix"
   },
   "dependencies": {
     "@babel/runtime": "^7.9.6",
@@ -28,11 +32,10 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "webext-base-css": "^1.1.0",
-    "webextension-polyfill-ts": "^0.15.0"
+    "webextension-polyfill": "^0.6.0"
   },
   "devDependencies": {
     "@abhijithvijayan/eslint-config": "^1.4.0",
-    "@abhijithvijayan/tsconfig": "^1.1.2",
     "@babel/core": "^7.9.6",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
@@ -40,10 +43,6 @@
     "@babel/plugin-transform-runtime": "^7.9.6",
     "@babel/preset-env": "^7.9.6",
     "@babel/preset-react": "^7.9.4",
-    "@babel/preset-typescript": "^7.9.0",
-    "@types/react": "^16.9.35",
-    "@types/react-dom": "^16.9.8",
-    "@types/webpack": "^4.41.13",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "^2.34.0",
     "autoprefixer": "^9.8.0",
@@ -61,7 +60,6 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^2.5.1",
-    "fork-ts-checker-webpack-plugin": "^4.1.3",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^4.14.1",
@@ -71,7 +69,6 @@
     "resolve-url-loader": "^3.1.1",
     "sass-loader": "^8.0.2",
     "terser-webpack-plugin": "^2.3.6",
-    "typescript": "^3.9.3",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
     "webpack-extension-reloader": "^1.1.4",
@@ -79,4 +76,4 @@
     "wext-manifest-webpack-plugin": "^1.1.1",
     "zip-webpack-plugin": "^3.0.0"
   }
-}
+}

source/Background/index.js

@@ -0,0 +1,6 @@
+import 'emoji-log';
+import browser from 'webextension-polyfill';
+
+browser.runtime.onInstalled.addListener(() => {
+  console.emoji('🦄', 'extension installed');
+});

source/Background/index.ts

@@ -1,6 +0,0 @@
-import 'emoji-log';
-import {browser} from 'webextension-polyfill-ts';
-
-browser.runtime.onInstalled.addListener((): void => {
-  console.emoji('🦄', 'extension installed');
-});

source/Options/Options.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import './styles.scss';
 
-const Options: React.FC = () => {
+const Options = () => {
   return (
     <div>
       <form>

source/Popup/Popup.jsx

@@ -1,20 +1,20 @@
 import React from 'react';
-import {browser, Tabs} from 'webextension-polyfill-ts';
+import browser from 'webextension-polyfill';
 
 import './styles.scss';
 
-function openWebPage(url: string): Promise<Tabs.Tab> {
+function openWebPage(url) {
   return browser.tabs.create({url});
 }
 
-const Popup: React.FC = () => {
+const Popup = () => {
   return (
     <section id="popup">
       <h2>WEB-EXTENSION-STARTER</h2>
       <button
         id="options__button"
         type="button"
-        onClick={(): Promise<Tabs.Tab> => {
+        onClick={() => {
           return openWebPage('options.html');
         }}
       >
@@ -25,7 +25,7 @@ const Popup: React.FC = () => {
           <li>
             <button
               type="button"
-              onClick={(): Promise<Tabs.Tab> => {
+              onClick={() => {
                 return openWebPage(
                   'https://github.com/abhijithvijayan/web-extension-starter'
                 );
@@ -37,7 +37,7 @@ const Popup: React.FC = () => {
           <li>
             <button
               type="button"
-              onClick={(): Promise<Tabs.Tab> => {
+              onClick={() => {
                 return openWebPage(
                   'https://www.buymeacoffee.com/abhijithvijayan'
                 );

tsconfig.json

@@ -1,21 +0,0 @@
-{
-	"extends": "@abhijithvijayan/tsconfig",
-	"compilerOptions": {
-		"target": "es5", // ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'.
-		"module": "esnext", // Module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'.
-		"lib": [
-			"dom",
-			"dom.iterable",
-			"esnext"
-		],
-		"declaration": false,
-		"isolatedModules": true,
-		/* Additional Checks */
-		"useDefineForClassFields": true,
-		"skipLibCheck": true,
-	},
-	"include": [
-		"source",
-		"webpack.config.ts"
-	]
-}

views/options.html

@@ -1,11 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
-    <meta charset="UTF-8" />
+<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta charset="UTF-8" />
-    <title>Options</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  </head>
+  <title>Options</title>
-  <body>
+</head>
-    <div id="options-root"></div>
+
-  </body>
+<body>
-</html>
+  <div id="options-root"></div>
+</body>
+
+</html>

views/popup.html

@@ -1,11 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
-    <meta charset="UTF-8" />
+<head>
-    <meta name="viewport" content="width=500" />
+  <meta charset="UTF-8" />
-    <title>Popup</title>
+  <meta name="viewport" content="width=500" />
-  </head>
+  <title>Popup</title>
-  <body>
+</head>
-    <div id="popup-root"></div>
+
-  </body>
+<body>
-</html>
+  <div id="popup-root"></div>
+</body>
+
+</html>

webpack.config.js

@@ -8,7 +8,6 @@ const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 const ExtensionReloader = require('webpack-extension-reloader');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const WextManifestWebpackPlugin = require('wext-manifest-webpack-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 const viewsPath = path.join(__dirname, 'views');
@@ -59,10 +58,10 @@ module.exports = {
 
   entry: {
     manifest: path.join(sourcePath, 'manifest.json'),
-    background: path.join(sourcePath, 'Background', 'index.ts'),
+    background: path.join(sourcePath, 'Background', 'index.js'),
-    contentScript: path.join(sourcePath, 'ContentScript', 'index.ts'),
+    contentScript: path.join(sourcePath, 'ContentScript', 'index.js'),
-    popup: path.join(sourcePath, 'Popup', 'index.tsx'),
+    popup: path.join(sourcePath, 'Popup', 'index.jsx'),
-    options: path.join(sourcePath, 'Options', 'index.tsx'),
+    options: path.join(sourcePath, 'Options', 'index.jsx'),
   },
 
   output: {
@@ -71,10 +70,10 @@ module.exports = {
   },
 
   resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.json'],
+    extensions: ['.js', '.jsx', '.json'],
     alias: {
-      'webextension-polyfill-ts': path.resolve(
+      'webextension-polyfill': path.resolve(
-        path.join(__dirname, 'node_modules', 'webextension-polyfill-ts')
+        path.join(__dirname, 'node_modules', 'webextension-polyfill')
       ),
     },
   },
@@ -113,7 +112,7 @@ module.exports = {
             loader: 'postcss-loader', // For autoprefixer
             options: {
               ident: 'postcss',
-              // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+              // eslint-disable-next-line global-require
               plugins: [require('autoprefixer')()],
             },
           },
@@ -129,7 +128,6 @@ module.exports = {
     new WextManifestWebpackPlugin(),
     // Generate sourcemaps
     new webpack.SourceMapDevToolPlugin({filename: false}),
-    new ForkTsCheckerWebpackPlugin(),
     // environmental variables
     new webpack.EnvironmentPlugin(['NODE_ENV', 'TARGET_BROWSER']),
     // delete previous build files