From 3f6e7ff6b5daadb5958b220c50afacc871003051 Mon Sep 17 00:00:00 2001 From: evazion Date: Sun, 7 Feb 2021 05:23:40 -0600 Subject: [PATCH] Fix #4701: Odd behavior on older versions of Chrome. Regression caused by the upgrade to Webpacker 6.0 in 90cd3293e. This caused various Javascript errors in old versions of Chrome, which somehow resulted in the keyboard shortcut for visiting the next page being triggered when you pressed any key. Specifically, the mobx library (used by the TagCounter component) called `Object.entries`, which isn't available in Chrome 49, and for some unknown reason this triggered the buggy shortcut behavior. `Object.entries` is supposed to be automatically polyfilled by Babel to support old browsers, but something changed in Webpacker 6 that broke this and I couldn't get it working again. The probable cause is that Webpacker 6 no longer transpiles code inside ./node_modules by default, which means that any libraries we use that use new Javascript features won't get transpiled down to support old browsers, but even after fixing that it still didn't work. The workaround is to just drop mobx and preact entirely to avoid the issue. --- app/javascript/packs/application.js | 3 + app/javascript/src/javascripts/tag_counter.js | 39 +++---- app/views/posts/partials/show/_edit.html.erb | 5 +- app/views/uploads/new.html.erb | 5 +- babel.config.js | 79 -------------- package.json | 5 +- yarn.lock | 103 ++++++++++-------- 7 files changed, 86 insertions(+), 153 deletions(-) delete mode 100644 babel.config.js diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 13a6db134..c70d4b29d 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -3,6 +3,9 @@ function importAll(r) { r.keys().forEach(r); } +// XXX for dropzone. +import "core-js/web/dom-collections"; + require('@rails/ujs').start(); require('hammerjs'); require('jquery-hotkeys'); diff --git a/app/javascript/src/javascripts/tag_counter.js b/app/javascript/src/javascripts/tag_counter.js index 428759688..a4c053b98 100644 --- a/app/javascript/src/javascripts/tag_counter.js +++ b/app/javascript/src/javascripts/tag_counter.js @@ -1,39 +1,29 @@ -import { h, Component, render } from "preact"; -import { makeObservable, observable, computed, action } from "mobx"; -import { observer } from "mobx-react"; - import Utility from "./utility"; -export default @observer class TagCounter extends Component { +export default class TagCounter { static lowCount = 10; static highCount = 20; - @observable tagCount = 0; - - constructor() { - super(); - makeObservable(this); + constructor($element) { + this.$element = $element; + this.$target.on("input", (event) => this.update(event)); + this.update(); } - componentDidMount() { - $(this.props.tags).on("input", this.updateCount); - this.updateCount(); + update() { + this.$element.find(".tag-count").text(`${this.tagCount} / ${TagCounter.highCount} tags`); + this.$element.find("img").attr("src", `/images/${this.iconName}.png`); } - render() { - return ( - - {this.tagCount} / {TagCounter.highCount} tags - - - ); + get $target() { + return $(this.$element.attr("data-for")); } - @action.bound updateCount() { - this.tagCount = Utility.regexp_split($(this.props.tags).val()).length; + get tagCount() { + return Utility.regexp_split(this.$target.val()).length; } - @computed get iconName() { + get iconName() { if (this.tagCount < TagCounter.lowCount) { return "blobglare"; } else if (this.tagCount >= TagCounter.lowCount && this.tagCount < TagCounter.highCount) { @@ -45,8 +35,7 @@ export default @observer class TagCounter extends Component { static initialize() { $("[data-tag-counter]").toArray().forEach(element => { - let target = $($(element).attr("data-for")).get(0); - render(h(TagCounter, { tags: target }), element); + new TagCounter($(element)); }); } } diff --git a/app/views/posts/partials/show/_edit.html.erb b/app/views/posts/partials/show/_edit.html.erb index eb7ba1b6b..2c99860dc 100644 --- a/app/views/posts/partials/show/_edit.html.erb +++ b/app/views/posts/partials/show/_edit.html.erb @@ -49,7 +49,10 @@
<%= f.label :tag_string, "Tags" %> - + + + + <%= external_link_icon(id: "open-edit-dialog", "data-shortcut": "shift+e") %> diff --git a/app/views/uploads/new.html.erb b/app/views/uploads/new.html.erb index c5cdf4b64..1ac675c6a 100644 --- a/app/views/uploads/new.html.erb +++ b/app/views/uploads/new.html.erb @@ -67,7 +67,10 @@
<%= f.label :tag_string, "Tags" %> - + + + + <%= external_link_icon(id: "open-edit-dialog", "data-shortcut": "shift+e") %> diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index 2f5c9da10..000000000 --- a/babel.config.js +++ /dev/null @@ -1,79 +0,0 @@ -module.exports = function(api) { - var validEnv = ['development', 'test', 'production'] - var currentEnv = api.env() - var isDevelopmentEnv = api.env('development') - var isProductionEnv = api.env('production') - var isTestEnv = api.env('test') - - if (!validEnv.includes(currentEnv)) { - throw new Error( - 'Please specify a valid `NODE_ENV` or ' + - '`BABEL_ENV` environment variables. Valid values are "development", ' + - '"test", and "production". Instead, received: ' + - JSON.stringify(currentEnv) + - '.' - ) - } - - return { - presets: [ - isTestEnv && [ - '@babel/preset-env', - { - targets: { - node: 'current' - } - } - ], - (isProductionEnv || isDevelopmentEnv) && [ - '@babel/preset-env', - { - forceAllTransforms: true, - useBuiltIns: 'entry', - corejs: 3, - modules: false, - exclude: ['transform-typeof-symbol'] - } - ] - ].filter(Boolean), - plugins: [ - 'babel-plugin-macros', - '@babel/plugin-syntax-dynamic-import', - isTestEnv && 'babel-plugin-dynamic-import-node', - '@babel/plugin-transform-destructuring', - ["@babel/plugin-proposal-decorators", { - legacy: true - }], - ["@babel/plugin-transform-react-jsx", { - pragma: "h", - pragmaFrag: "Fragment", - }], - [ - '@babel/plugin-proposal-class-properties', - { - loose: true - } - ], - [ - '@babel/plugin-proposal-object-rest-spread', - { - useBuiltIns: true - } - ], - [ - '@babel/plugin-transform-runtime', - { - helpers: false, - regenerator: true, - corejs: false - } - ], - [ - '@babel/plugin-transform-regenerator', - { - async: false - } - ] - ].filter(Boolean) - } -} diff --git a/package.json b/package.json index 4b664ab48..2c581767e 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,6 @@ "license": "MIT", "dependencies": { "@babel/plugin-proposal-decorators": "^7.10.5", - "@babel/plugin-transform-react-jsx": "^7.10.4", "@fortawesome/fontawesome-free": "^5.11.2", "@rails/ujs": "^6.0.2-1", "@rails/webpacker": "^6.0.0-beta.4", @@ -13,14 +12,11 @@ "jquery-hotkeys": "^0.2.2", "jquery-ui": "^1.12.1", "mini-css-extract-plugin": "^1.3.4", - "mobx": "^6.0", - "mobx-react": "^7.0", "postcss": "^8.2.4", "postcss-flexbugs-fixes": "^5.0.2", "postcss-import": "^14.0.0", "postcss-loader": "^4.2.0", "postcss-preset-env": "^6.7.0", - "preact": "^10.4.6", "rails-erb-loader": "^5.5.0", "sass": "^1.32.5", "sass-loader": "^10.1.1", @@ -39,6 +35,7 @@ "webpack-cli": "^4.2.0" }, "devDependencies": { + "@babel/cli": "^7.12.13", "@webpack-cli/serve": "^1.2.2", "babel-eslint": "^10.1.0", "eslint": "^7.0.0", diff --git a/yarn.lock b/yarn.lock index 5bfc7238d..915837d59 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,23 @@ # yarn lockfile v1 +"@babel/cli@^7.12.13": + version "7.12.13" + resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.12.13.tgz#ae2c6a75fa43f3db4bca0659799b0dfca3f5212b" + integrity sha512-Zto3HPeE0GRmaxobUl7NvFTo97NKe1zdAuWqTO8oka7nE0IIqZ4CFvuRZe1qf+ZMd7eHMhwqrecjwc10mjXo/g== + dependencies: + commander "^4.0.1" + convert-source-map "^1.1.0" + fs-readdir-recursive "^1.1.0" + glob "^7.0.0" + lodash "^4.17.19" + make-dir "^2.1.0" + slash "^2.0.0" + source-map "^0.5.0" + optionalDependencies: + "@nicolo-ribaudo/chokidar-2" "2.1.8-no-fsevents" + chokidar "^3.4.0" + "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.13": version "7.12.13" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658" @@ -400,13 +417,6 @@ dependencies: "@babel/helper-plugin-utils" "^7.8.0" -"@babel/plugin-syntax-jsx@^7.12.13": - version "7.12.13" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.13.tgz#044fb81ebad6698fe62c478875575bcbb9b70f15" - integrity sha512-d4HM23Q1K7oq/SLNmG6mRt85l2csmQ0cHRaxRXjKW0YFdEXqlZ5kzFQKH5Uc3rDJECgu+yCRgPkG04Mm98R/1g== - dependencies: - "@babel/helper-plugin-utils" "^7.12.13" - "@babel/plugin-syntax-logical-assignment-operators@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699" @@ -639,17 +649,6 @@ dependencies: "@babel/helper-plugin-utils" "^7.12.13" -"@babel/plugin-transform-react-jsx@^7.10.4": - version "7.12.13" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.12.13.tgz#6c9f993b9f6fb6f0e32a4821ed59349748576a3e" - integrity sha512-hhXZMYR8t9RvduN2uW4sjl6MRtUhzNE726JvoJhpjhxKgRUVkZqTsA0xc49ALZxQM7H26pZ/lLvB2Yrea9dllA== - dependencies: - "@babel/helper-annotate-as-pure" "^7.12.13" - "@babel/helper-module-imports" "^7.12.13" - "@babel/helper-plugin-utils" "^7.12.13" - "@babel/plugin-syntax-jsx" "^7.12.13" - "@babel/types" "^7.12.13" - "@babel/plugin-transform-regenerator@^7.12.13": version "7.12.13" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.12.13.tgz#b628bcc9c85260ac1aeb05b45bde25210194a2f5" @@ -878,6 +877,23 @@ resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz#218cd7276ab4f9ab57cc3d2efa2697e6a579f25d" integrity sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA== +"@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents": + version "2.1.8-no-fsevents" + resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.tgz#da7c3996b8e6e19ebd14d82eaced2313e7769f9b" + integrity sha512-+nb9vWloHNNMFHjGofEam3wopE3m1yuambrrd/fnPc+lFOMB9ROTqQlche9ByFWNkdNqfSgR/kkQtQ8DzEWt2w== + dependencies: + anymatch "^2.0.0" + async-each "^1.0.1" + braces "^2.3.2" + glob-parent "^3.1.0" + inherits "^2.0.3" + is-binary-path "^1.0.0" + is-glob "^4.0.0" + normalize-path "^3.0.0" + path-is-absolute "^1.0.0" + readdirp "^2.2.1" + upath "^1.1.1" + "@nodelib/fs.scandir@2.1.4": version "2.1.4" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69" @@ -1767,7 +1783,7 @@ character-reference-invalid@^1.0.0: resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560" integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg== -"chokidar@>=2.0.0 <4.0.0": +"chokidar@>=2.0.0 <4.0.0", chokidar@^3.4.0: version "3.5.1" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a" integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw== @@ -1901,6 +1917,11 @@ commander@^2.20.0, commander@^2.8.1: resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== +commander@^4.0.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068" + integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA== + commander@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/commander/-/commander-7.0.0.tgz#3e2bbfd8bb6724760980988fb5b22b7ee6b71ab2" @@ -1974,7 +1995,7 @@ content-type@~1.0.4: resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b" integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA== -convert-source-map@^1.7.0: +convert-source-map@^1.1.0, convert-source-map@^1.7.0: version "1.7.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442" integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA== @@ -2956,6 +2977,11 @@ fs-constants@^1.0.0: resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad" integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow== +fs-readdir-recursive@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27" + integrity sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA== + fs.realpath@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" @@ -4086,6 +4112,14 @@ make-dir@^1.0.0: dependencies: pify "^3.0.0" +make-dir@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5" + integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA== + dependencies: + pify "^4.0.1" + semver "^5.6.0" + make-dir@^3.0.2, make-dir@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f" @@ -4326,23 +4360,6 @@ mkdirp@^0.5.1, mkdirp@^0.5.5: dependencies: minimist "^1.2.5" -mobx-react-lite@^3.2.0: - version "3.2.0" - resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-3.2.0.tgz#331d7365a6b053378dfe9c087315b4e41c5df69f" - integrity sha512-q5+UHIqYCOpBoFm/PElDuOhbcatvTllgRp3M1s+Hp5j0Z6XNgDbgqxawJ0ZAUEyKM8X1zs70PCuhAIzX1f4Q/g== - -mobx-react@^7.0: - version "7.1.0" - resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-7.1.0.tgz#d947cada3cfad294b4b6f692e969c242b9c16eaf" - integrity sha512-DxvA6VXmnZ+N9f/UTtolWtdRnAAQY2iHWTSPLktfpj8NKlXUe4dabBAjuXrBcZUM8GjLWnxD1ZEjssXq1M0RAw== - dependencies: - mobx-react-lite "^3.2.0" - -mobx@^6.0: - version "6.1.4" - resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.1.4.tgz#6ba17f4e291146a3a26605a9c3a0c3ff8aea1e0b" - integrity sha512-DorvGl+ssJ9i5Sef90XzcIuOBMa2kWSC+PidTLHtgBX4f1bXOd+NKtujSjaRnQMDLTRkCzfJEFcC08hEjzCVaA== - ms@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8" @@ -5302,11 +5319,6 @@ postcss@^8.1.4, postcss@^8.2.4: nanoid "^3.1.20" source-map "^0.6.1" -preact@^10.4.6: - version "10.5.12" - resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.12.tgz#6a8ee8bf40a695c505df9abebacd924e4dd37704" - integrity sha512-r6siDkuD36oszwlCkcqDJCAKBQxGoeEGytw2DGMD5A/GGdu5Tymw+N2OBXwvOLxg6d1FeY8MgMV3cc5aVQo4Cg== - prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" @@ -5813,7 +5825,7 @@ selfsigned@^1.10.8: dependencies: node-forge "^0.10.0" -"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1: +"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0: version "5.7.1" resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ== @@ -5962,6 +5974,11 @@ signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3: resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c" integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA== +slash@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44" + integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A== + slash@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"