DEV: Add uppy.js to build and project (#13645)

This PR adds uppy to the project with a custom JS build and the shims needed to import it into our JS code. We need a custom build of Uppy because we do not use webpack for our JS modules/build. The only way to get what you want from Uppy is to use the webpack modules or to include the entire Uppy project including all plugins in a single JS file. This way we can just use the plugins we actually want. Future PRs will actually use Uppy!

app/assets/javascripts/discourse-shims.js

@@ -44,3 +44,11 @@ define("@popperjs/core", ["exports"], function (__exports__) {
   __exports__.defaultModifiers = window.Popper.defaultModifiers;
   __exports__.popperGenerator = window.Popper.popperGenerator;
 });
+
+define("uppy", ["exports"], function (__exports__) {
+  __exports__.default = window.Uppy.Core;
+  __exports__.Plugin = window.Uppy.Plugin;
+  __exports__.XHRUpload = window.Uppy.XHRUpload;
+  __exports__.AwsS3 = window.Uppy.AwsS3;
+  __exports__.AwsS3Multipart = window.Uppy.AwsS3Multipart;
+});

app/assets/javascripts/vendor.js

@@ -22,6 +22,7 @@
 //= require mousetrap-global-bind.js
 //= require rsvp.js
 //= require show-html.js
+//= require uppy.js
 //= require buffered-proxy
 //= require jquery.autoellipsis-1.0.10
 //= require virtual-dom

lib/tasks/javascript.rake

@@ -217,7 +217,10 @@ def dependencies
       public: true,
       skip_versioning: true
     },
-
+    {
+      source: 'custom-uppy-build.js',
+      destination: 'uppy.js'
+    }
   ]
 end
 
@@ -339,7 +342,14 @@ task 'javascript:update' => 'clean_up' do
     # lodash.js needs building
     if src.include? "lodash.js"
       puts "Building custom lodash.js build"
-      system('yarn run lodash include="each,filter,map,range,first,isEmpty,chain,extend,every,omit,merge,union,sortBy,uniq,intersection,reject,compact,reduce,debounce,throttle,values,pick,keys,flatten,min,max,isArray,delay,isString,isEqual,without,invoke,clone,findIndex,find,groupBy" minus="template" -d -o "node_modules/lodash.js"')
+      system('yarn run lodash include="escapeRegExp,each,filter,map,range,first,isEmpty,chain,extend,every,omit,merge,union,sortBy,uniq,intersection,reject,compact,reduce,debounce,throttle,values,pick,keys,flatten,min,max,isArray,delay,isString,isEqual,without,invoke,clone,findIndex,find,groupBy" minus="template" -d -o "node_modules/lodash.js"')
+    end
+
+    # we need a custom build of uppy because we cannot import
+    # their modules easily, using browserify to do so
+    if src.include? "custom-uppy-build"
+      puts "Building custom uppy using browserify"
+      system("yarn run browserify #{vendor_js}/custom-uppy.js -o node_modules/custom-uppy-build.js")
     end
 
     unless File.exists?(dest)

package.json

@@ -10,6 +10,10 @@
     "@highlightjs/cdn-assets": "^10.6.0",
     "@json-editor/json-editor": "^2.5.2",
     "@popperjs/core": "v2.0.6",
+    "@uppy/aws-s3": "^1.7.12",
+    "@uppy/aws-s3-multipart": "^1.8.18",
+    "@uppy/core": "^1.19.2",
+    "@uppy/xhr-upload": "^1.7.5",
     "ace-builds": "1.4.12",
     "blueimp-file-upload": "10.13.0",
     "bootbox": "3.2.0",
@@ -42,6 +46,7 @@
   "devDependencies": {
     "@arkweid/lefthook": "^0.7.2",
     "@mixer/parallel-prettier": "^2.0.1",
+    "browserify": "^17.0.0",
     "chrome-launcher": "^0.12.0",
     "chrome-remote-interface": "^0.25",
     "lodash-cli": "https://github.com/lodash-archive/lodash-cli.git",

vendor/assets/javascripts/custom-uppy.js

@@ -0,0 +1,11 @@
+// We need a custom build of Uppy because we do not use webpack for
+// our JS modules/build. The only way to get what you want from Uppy
+// is to use the webpack modules or to include the entire Uppy project
+// including all plugins in a single JS file. This way we can just
+// use the plugins we actually want.
+window.Uppy = {}
+Uppy.Core = require('@uppy/core')
+Uppy.Plugin = Uppy.Core.Plugin
+Uppy.XHRUpload = require('@uppy/xhr-upload')
+Uppy.AwsS3 = require('@uppy/aws-s3')
+Uppy.AwsS3Multipart = require('@uppy/aws-s3-multipart')

vendor/assets/javascripts/lodash.js

@@ -1,7 +1,7 @@
 /**
  * @license
  * Lodash (Custom Build) <https://lodash.com/>
- * Build: `lodash include="each,filter,map,range,first,isEmpty,chain,extend,every,omit,merge,union,sortBy,uniq,intersection,reject,compact,reduce,debounce,throttle,values,pick,keys,flatten,min,max,isArray,delay,isString,isEqual,without,invoke,clone,findIndex,find,groupBy" minus="template" -d -o node_modules/lodash.js`
+ * Build: `lodash include="escapeRegExp,each,filter,map,range,first,isEmpty,chain,extend,every,omit,merge,union,sortBy,uniq,intersection,reject,compact,reduce,debounce,throttle,values,pick,keys,flatten,min,max,isArray,delay,isString,isEqual,without,invoke,clone,findIndex,find,groupBy" minus="template" -d -o node_modules/lodash.js`
  * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
  * Released under MIT license <https://lodash.com/license>
  * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
@@ -125,7 +125,8 @@
    * Used to match `RegExp`
    * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
    */
-  var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+  var reRegExpChar = /[\\^$.*+?()[\]{}|]/g,
+      reHasRegExpChar = RegExp(reRegExpChar.source);
 
   /** Used to match leading whitespace. */
   var reTrimStart = /^\s+/;
@@ -7373,6 +7374,30 @@
 
   /*------------------------------------------------------------------------*/
 
+  /**
+   * Escapes the `RegExp` special characters "^", "$", "\", ".", "*", "+",
+   * "?", "(", ")", "[", "]", "{", "}", and "|" in `string`.
+   *
+   * @static
+   * @memberOf _
+   * @since 3.0.0
+   * @category String
+   * @param {string} [string=''] The string to escape.
+   * @returns {string} Returns the escaped string.
+   * @example
+   *
+   * _.escapeRegExp('[lodash](https://lodash.com/)');
+   * // => '\[lodash\]\(https://lodash\.com/\)'
+   */
+  function escapeRegExp(string) {
+    string = toString(string);
+    return (string && reHasRegExpChar.test(string))
+      ? string.replace(reRegExpChar, '\\$&')
+      : string;
+  }
+
+  /*------------------------------------------------------------------------*/
+
   /**
    * Creates a function that returns `value`.
    *
@@ -7759,6 +7784,7 @@
   // Add methods that return unwrapped values in chain sequences.
   lodash.clone = clone;
   lodash.eq = eq;
+  lodash.escapeRegExp = escapeRegExp;
   lodash.every = every;
   lodash.find = find;
   lodash.findIndex = findIndex;