Move modern into its own package

packages/webamp-modern/.babelrc

@@ -0,0 +1,44 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry",
+        "corejs": "2",
+        "targets": {
+          "browsers": [
+            "last 2 Chrome versions",
+            "last 2 ChromeAndroid versions",
+            "last 2 Safari versions",
+            "last 2 Firefox versions",
+            "last 2 Edge versions",
+            "last 2 iOS versions",
+            "last 2 Opera versions"
+          ]
+        }
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-nullish-coalescing-operator",
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties"
+  ],
+  "env": {
+    "test": {
+      "plugins": [
+        "@babel/plugin-transform-modules-commonjs",
+        "@babel/plugin-syntax-dynamic-import"
+      ]
+    },
+    "library": {
+      "plugins": ["@babel/plugin-transform-runtime"]
+    },
+    "production": {
+      "plugins": ["@babel/plugin-syntax-dynamic-import"]
+    }
+  }
+}

packages/webamp-modern/.eslintignore

@@ -0,0 +1,6 @@
+*.min.js
+built/
+coverage/
+**/node_modules/
+examples/webpack/bundle.js
+pacakges/tweetBot/env/

packages/webamp-modern/.eslintrc

@@ -0,0 +1,167 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "jsx": true,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    }
+  },
+  "plugins": [
+    "react",
+    "prettier",
+    "import",
+    "@typescript-eslint",
+    "react-hooks"
+  ],
+  "settings": {
+    "react": {
+      "version": "15.2"
+    },
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".ts", ".tsx"]
+      }
+    }
+  },
+  "env": {
+    "node": true,
+    "amd": true,
+    "es6": true,
+    "jest": true
+  },
+  // TODO: Consider removing some of these.
+  // https://github.com/facebook/create-react-app/pull/1840
+  // Create React App and "Standard" only allow the following:
+  // * document
+  // * window
+  // * console
+  // * navigator
+  "globals": {
+    "window": true,
+    "document": true,
+    "console": true,
+    "navigator": true,
+    "alert": true,
+    "Blob": true,
+    "fetch": true,
+    "FileReader": true,
+    "Element": true,
+    "AudioNode": true,
+    "MutationObserver": true,
+    "Image": true,
+    "location": true
+  },
+  "rules": {
+    "no-multiple-empty-lines": [
+      "error",
+      {
+        "max": 2,
+        "maxEOF": 0,
+        "maxBOF": 0
+      }
+    ],
+    "block-scoped-var": "warn",
+    "camelcase": "error",
+    "constructor-super": "error",
+    "dot-notation": "error",
+    "eqeqeq": ["error", "smart"],
+    "guard-for-in": "error",
+    "lines-between-class-members": [
+      "warn",
+      "always",
+      { "exceptAfterSingleLine": true }
+    ],
+    "max-depth": ["warn", 4],
+    "max-params": ["warn", 5],
+    "new-cap": "error",
+    "no-caller": "error",
+    "no-catch-shadow": "error",
+    "no-const-assign": "error",
+    "no-debugger": "error",
+    "no-delete-var": "error",
+    "no-div-regex": "warn",
+    "no-dupe-args": "error",
+    "no-dupe-class-members": "error",
+    "no-dupe-keys": "error",
+    "no-duplicate-case": "error",
+    "no-duplicate-imports": "error",
+    "no-else-return": "error",
+    "no-empty-character-class": "error",
+    "no-eval": "error",
+    "no-ex-assign": "error",
+    "no-extend-native": "warn",
+    "no-extra-boolean-cast": "error",
+    "no-extra-semi": "error",
+    "no-fallthrough": "error",
+    "no-floating-decimal": "error",
+    "no-func-assign": "error",
+    "no-implied-eval": "error",
+    "no-inner-declarations": "error",
+    "no-irregular-whitespace": "error",
+    "no-label-var": "error",
+    "no-labels": "error",
+    "no-lone-blocks": "error",
+    "no-lonely-if": "error",
+    "no-multi-spaces": "warn",
+    "no-multi-str": "error",
+    "no-native-reassign": "error",
+    "no-negated-in-lhs": "warn",
+    "no-nested-ternary": "warn",
+    "no-new-object": "error",
+    "no-new-symbol": "error",
+    "no-new-wrappers": "error",
+    "no-obj-calls": "error",
+    "no-octal": "error",
+    "no-octal-escape": "error",
+    "no-proto": "error",
+    "no-redeclare": "error",
+    "no-shadow": "warn",
+    "no-spaced-func": "error",
+    "no-this-before-super": "error",
+    "no-throw-literal": "error",
+    "no-trailing-spaces": "error",
+    "no-undef": "error",
+    "no-undef-init": "error",
+    "no-unneeded-ternary": "error",
+    "no-unreachable": "error",
+    "no-unused-expressions": "error",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "ignoreRestSiblings": true }
+    ],
+    "no-use-before-define": ["error", "nofunc"],
+    "no-useless-rename": "error",
+    "no-var": "error",
+    "no-with": "error",
+    "prefer-arrow-callback": "warn",
+    "prefer-const": "error",
+    "prefer-spread": "error",
+    "prefer-template": "warn",
+    "radix": "error",
+    "no-return-await": "error",
+    "react/no-string-refs": "error",
+    "react/jsx-boolean-value": "error",
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    "react/prefer-es6-class": "error",
+    "react/jsx-pascal-case": "error",
+    "react/require-render-return": "error",
+    "react/self-closing-comp": "error",
+    "react/no-unescaped-entities": "error",
+    "use-isnan": "error",
+    "valid-typeof": "error",
+    "prettier/prettier": "error",
+    "import/default": "error",
+    "import/export": "error",
+    "import/first": "error",
+    "import/named": "error",
+    "import/namespace": "error",
+    "import/no-duplicates": "error",
+    "import/no-extraneous-dependencies": "error",
+    "import/no-named-as-default-member": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error"
+  }
+}

packages/webamp-modern/.gitignore

@@ -0,0 +1,7 @@
+**/node_modules
+
+/built
+/demo/built
+/coverage
+/examples/webpack/bundle.js
+**/__diff_output__/

packages/webamp-modern/.prettierignore

@@ -0,0 +1,8 @@
+package.json
+**/*.min.css
+**/base-skin.css
+demo/js/googleAnalytics.min.js
+built/*
+demo/built/*
+coverage/*
+examples/webpack/bundle.js

packages/webamp-modern/config/jest.unit.js

@@ -0,0 +1,18 @@
+module.exports = {
+  displayName: "test",
+  rootDir: "../",
+  testRegex: "\\.test\\.(js|ts|tsx)$",
+  globals: {
+    SENTRY_DSN: null,
+  },
+  moduleFileExtensions: ["js", "tsx", "ts"],
+  moduleNameMapper: {
+    "\\.css$": "<rootDir>/js/__mocks__/styleMock.js",
+    "\\.wsz$": "<rootDir>/js/__mocks__/fileMock.js",
+    "\\.mp3$": "<rootDir>/js/__mocks__/fileMock.js",
+  },
+  transform: {
+    "^.+\\.(js|ts|tsx)$": "babel-jest",
+  },
+  testPathIgnorePatterns: ["/node_modules/"],
+};

packages/webamp-modern/config/webpack.library.js

@@ -0,0 +1,58 @@
+const path = require("path");
+const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
+
+module.exports = {
+  devtool: "source-map",
+  mode: "production",
+  resolve: {
+    extensions: [".js", ".ts", ".tsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          "style-loader",
+          { loader: "css-loader", options: { importLoaders: 1 } },
+          // We really only need this in prod. We could find a way to disable it in dev.
+        ],
+      },
+      {
+        test: /\.(js|ts|tsx)$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            envName: "library",
+          },
+        },
+      },
+    ],
+    noParse: [/jszip\.js$/],
+  },
+  plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: "static",
+      reportFilename: "library-report.html",
+      openAnalyzer: false,
+    }),
+  ],
+  performance: {
+    // We do some crazy shit okay! Don't judge!
+    maxEntrypointSize: 9000000,
+    maxAssetSize: 9000000,
+  },
+  entry: {
+    bundle: "./js/webamp.js",
+    "bundle.min": "./js/webamp.js",
+    "lazy-bundle": "./js/webampLazy.tsx",
+    "lazy-bundle.min": "./js/webampLazy.tsx",
+  },
+  output: {
+    path: path.resolve(__dirname, "../built"),
+    filename: "webamp.[name].js",
+    library: "Webamp",
+    libraryTarget: "umd",
+    libraryExport: "default",
+  },
+};

packages/webamp-modern/demo/config/webpack.common.js

@@ -0,0 +1,74 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+  resolve: {
+    extensions: [".js", ".ts", ".tsx"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          "style-loader",
+          { loader: "css-loader", options: { importLoaders: 1 } },
+          // We really only need this in prod. We could find a way to disable it in dev.
+        ],
+      },
+      {
+        test: /\.(js|ts|tsx)?$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            envName: "production",
+          },
+        },
+      },
+      {
+        test: /\.(wsz|wal|mp3|png|ico|jpg|svg)$/,
+        use: [
+          {
+            loader: "file-loader",
+            options: {
+              emitFile: true,
+              name: "[path][name]-[hash].[ext]",
+            },
+          },
+        ],
+      },
+    ],
+    noParse: [/jszip\.js$/],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      filename: "modern/index.html",
+      template: "../modern/index.html",
+      chunks: ["modern"],
+    }),
+    // Ideally we could just do this via client-side routing, but it's tricky
+    // with both the real app and this sub directory. So we just hack it to
+    // duplicate the html file in both places and move on with our lives.
+    new HtmlWebpackPlugin({
+      filename: "modern/ready/index.html",
+      template: "../modern/index.html",
+      chunks: ["modern"],
+    }),
+  ],
+
+  performance: {
+    // We do some crazy shit okay! Don't judge!
+    maxEntrypointSize: 7000000,
+    maxAssetSize: 7000000,
+  },
+  entry: {
+    modern: ["../modern/src/index.js"],
+  },
+  context: path.resolve(__dirname, "../"),
+  output: {
+    filename: "[name]-[hash].js",
+    chunkFilename: "[name]-[hash].js",
+    publicPath: "/",
+    path: path.resolve(__dirname, "../built"),
+  },
+};

packages/webamp-modern/demo/config/webpack.dev.js

@@ -0,0 +1,10 @@
+const merge = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+  devtool: "source-map",
+  mode: "development",
+  devServer: {
+    overlay: true,
+  },
+});

packages/webamp-modern/demo/config/webpack.prod.js

@@ -0,0 +1,10 @@
+const merge = require("webpack-merge");
+
+const common = require("./webpack.common.js");
+
+const config = merge(common, {
+  devtool: "source-map",
+  mode: "production",
+});
+
+module.exports = config;