🎉 Init typescript

Author: SettingDust

.browserslistrc

@@ -0,0 +1 @@
+cover 95%

.prettierignore

@@ -0,0 +1,3 @@
+dist/
+lib/
+node_modules/

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120,
+  "trailingComma": "none"
+}

index.ts

@@ -0,0 +1,9 @@
+/// <reference path="./types/monkey.d.ts" />
+
+export default {
+  name: 'Good Monkey',
+  description: 'A good monkey',
+  version: '1.0.0',
+  match: ['http*://*.google.com/*', 'http*://google.com/*'],
+  grant: ['GM_addStyle']
+} as Monkey.Metadata

monkey.config.ts

@@ -2,9 +2,11 @@
   "name": "webpack-tampermonkey",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
+  "main": "dist/good-monkey.user.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "webpack",
+    "dev": "webpack -c webpack.dev.config.ts",
+    "format": "prettier --write **/*.ts"
   },
   "repository": {
     "type": "git",
@@ -19,20 +21,27 @@
   "bugs": {
     "url": "https://github.com/SettingDust/webpack-tampermonkey/issues"
   },
-  "prettier": {
-    "semi": false,
-    "singleQuote": true,
-    "printWidth": 150
-  },
   "homepage": "https://github.com/SettingDust/webpack-tampermonkey#readme",
   "devDependencies": {
-    "@types/node": "^14.0.13",
-    "@types/webpack": "^4.41.17",
-    "@types/webpack-dev-server": "^3.11.0",
-    "ts-node": "^8.10.2",
-    "typescript": "^3.9.5",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0"
+    "@tsconfig/recommended": "^1.0.1",
+    "@types/node": "^15.12.1",
+    "@types/webpack-dev-server": "^3.11.4",
+    "autoprefixer": "^10.2.6",
+    "chalk": "^4.1.1",
+    "css-loader": "^5.2.6",
+    "cssnano": "^5.0.5",
+    "postcss": "^8.3.0",
+    "postcss-loader": "^5.3.0",
+    "prettier": "^2.3.0",
+    "sass": "^1.34.1",
+    "sass-loader": "^12.0.0",
+    "to-string-loader": "github:gajus/to-string-loader",
+    "ts-loader": "^9.2.2",
+    "ts-node": "^10.0.0",
+    "typescript": "^4.3.2",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.38.1",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "^3.11.2"
   }
 }

package-lock.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('cssnano'),
+    require('autoprefixer')
+  ]
+}

package.json

@@ -0,0 +1,33 @@
+import metadata from '../monkey.config'
+
+const paddingLength =
+  1 + Object.keys(metadata).reduce((prev, curr) => (curr.length > prev ? curr.length : prev), 0)
+
+const prefix = (arr: string[]): string[] => {
+  const newArr = arr.map((it) => `// ${it}`)
+  newArr.push('')
+  return newArr
+}
+
+const wrapMeta = (arr: string[]): string[] => arr.map((it) => (it.length ? `@${it}` : it))
+
+const sign = (arr: string[]): string[] => {
+  arr.push('==/UserScript==')
+  return ['==UserScript=='].concat(arr)
+}
+
+export default (dev: boolean = false): string => {
+  const metas: string[] = []
+  if (dev) {
+    if (!metadata.require)
+      metadata.require = []
+    metadata.require.push('file://' + __dirname + '\\build\\' + metadata.name.toLowerCase().replace(' ', '-') + '.js')
+  }
+  for (const [key, value] of Object.entries(metadata)) {
+    if (Array.isArray(value) && value.length) {
+      metas.push('')
+      for (const element of value) metas.push(key.padEnd(paddingLength) + element)
+    } else metas.push(key.padEnd(paddingLength) + value)
+  }
+  return prefix(sign(wrapMeta(metas))).join('\n')
+}

postcss.config.js

@@ -0,0 +1 @@
+GM_addStyle(require('./styles/style.scss'))

scripts/banner.ts

@@ -0,0 +1,3 @@
+body {
+  background: aqua;
+}

src/index.ts

@@ -1,8 +1,9 @@
 {
+  "extends": "@tsconfig/recommended/tsconfig.json",
   "compilerOptions": {
-    "outDir": "./dist/",
-    "module": "es6",
-    "target": "es5",
-    "sourceMap": true
+    "typeRoots": [
+      "./types",
+      "./node_modules/@types"
+    ]
   }
 }