Add AlpineJS to Admin Panel

CTFd/themes/admin/assets/js/pages/main.js

@@ -1,4 +1,5 @@
 import CTFd from "core/CTFd";
+import Alpine from 'alpinejs'
 import $ from "jquery";
 import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
@@ -13,6 +14,7 @@ dayjs.extend(advancedFormat);
 
 CTFd.init(window.init);
 window.CTFd = CTFd;
+window.Alpine = Alpine
 window.helpers = helpers;
 window.$ = $;
 window.dayjs = dayjs;

CTFd/themes/admin/static/js/core.dev.js

@@ -8,7 +8,7 @@
 /***/ (function(module, exports, __webpack_require__) {
 
 ;
-eval("\n\nvar _CTFd = _interopRequireDefault(__webpack_require__(/*! core/CTFd */ \"./CTFd/themes/core/assets/js/CTFd.js\"));\n\nvar _jquery = _interopRequireDefault(__webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\"));\n\nvar _dayjs = _interopRequireDefault(__webpack_require__(/*! dayjs */ \"./node_modules/dayjs/dayjs.min.js\"));\n\nvar _advancedFormat = _interopRequireDefault(__webpack_require__(/*! dayjs/plugin/advancedFormat */ \"./node_modules/dayjs/plugin/advancedFormat.js\"));\n\nvar _nunjucks = _interopRequireDefault(__webpack_require__(/*! nunjucks */ \"./node_modules/nunjucks/browser/nunjucks.js\"));\n\nvar _howler = __webpack_require__(/*! howler */ \"./node_modules/howler/dist/howler.js\");\n\nvar _events = _interopRequireDefault(__webpack_require__(/*! core/events */ \"./CTFd/themes/core/assets/js/events.js\"));\n\nvar _times = _interopRequireDefault(__webpack_require__(/*! core/times */ \"./CTFd/themes/core/assets/js/times.js\"));\n\nvar _styles = _interopRequireDefault(__webpack_require__(/*! ../styles */ \"./CTFd/themes/admin/assets/js/styles.js\"));\n\nvar _helpers = _interopRequireDefault(__webpack_require__(/*! core/helpers */ \"./CTFd/themes/core/assets/js/helpers.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\n_dayjs[\"default\"].extend(_advancedFormat[\"default\"]);\n\n_CTFd[\"default\"].init(window.init);\n\nwindow.CTFd = _CTFd[\"default\"];\nwindow.helpers = _helpers[\"default\"];\nwindow.$ = _jquery[\"default\"];\nwindow.dayjs = _dayjs[\"default\"];\nwindow.nunjucks = _nunjucks[\"default\"];\nwindow.Howl = _howler.Howl;\n(0, _jquery[\"default\"])(function () {\n  (0, _styles[\"default\"])();\n  (0, _times[\"default\"])();\n  (0, _events[\"default\"])(_CTFd[\"default\"].config.urlRoot);\n});\n\n//# sourceURL=webpack:///./CTFd/themes/admin/assets/js/pages/main.js?");
+eval("\n\nvar _CTFd = _interopRequireDefault(__webpack_require__(/*! core/CTFd */ \"./CTFd/themes/core/assets/js/CTFd.js\"));\n\nvar _alpinejs = _interopRequireDefault(__webpack_require__(/*! alpinejs */ \"./node_modules/alpinejs/dist/module.esm.js\"));\n\nvar _jquery = _interopRequireDefault(__webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\"));\n\nvar _dayjs = _interopRequireDefault(__webpack_require__(/*! dayjs */ \"./node_modules/dayjs/dayjs.min.js\"));\n\nvar _advancedFormat = _interopRequireDefault(__webpack_require__(/*! dayjs/plugin/advancedFormat */ \"./node_modules/dayjs/plugin/advancedFormat.js\"));\n\nvar _nunjucks = _interopRequireDefault(__webpack_require__(/*! nunjucks */ \"./node_modules/nunjucks/browser/nunjucks.js\"));\n\nvar _howler = __webpack_require__(/*! howler */ \"./node_modules/howler/dist/howler.js\");\n\nvar _events = _interopRequireDefault(__webpack_require__(/*! core/events */ \"./CTFd/themes/core/assets/js/events.js\"));\n\nvar _times = _interopRequireDefault(__webpack_require__(/*! core/times */ \"./CTFd/themes/core/assets/js/times.js\"));\n\nvar _styles = _interopRequireDefault(__webpack_require__(/*! ../styles */ \"./CTFd/themes/admin/assets/js/styles.js\"));\n\nvar _helpers = _interopRequireDefault(__webpack_require__(/*! core/helpers */ \"./CTFd/themes/core/assets/js/helpers.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { \"default\": obj }; }\n\n_dayjs[\"default\"].extend(_advancedFormat[\"default\"]);\n\n_CTFd[\"default\"].init(window.init);\n\nwindow.CTFd = _CTFd[\"default\"];\nwindow.Alpine = _alpinejs[\"default\"];\nwindow.helpers = _helpers[\"default\"];\nwindow.$ = _jquery[\"default\"];\nwindow.dayjs = _dayjs[\"default\"];\nwindow.nunjucks = _nunjucks[\"default\"];\nwindow.Howl = _howler.Howl;\n(0, _jquery[\"default\"])(function () {\n  (0, _styles[\"default\"])();\n  (0, _times[\"default\"])();\n  (0, _events[\"default\"])(_CTFd[\"default\"].config.urlRoot);\n});\n\n//# sourceURL=webpack:///./CTFd/themes/admin/assets/js/pages/main.js?");
 
 /***/ }),
 

package.json

@@ -27,6 +27,7 @@
     "@babel/core": "^7.11.6",
     "@babel/preset-env": "^7.11.5",
     "@fortawesome/fontawesome-free": "^5.14.0",
+    "alpinejs": "^3.12.2",
     "babel-loader": "^8.1.0",
     "bootstrap": "~4.3.1",
     "bootstrap-multimodal": "~1.0.4",

yarn.lock

@@ -867,6 +867,18 @@
   optionalDependencies:
     prettier "^1.18.2"
 
+"@vue/reactivity@~3.1.1":
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.1.5.tgz#dbec4d9557f7c8f25c2635db1e23a78a729eb991"
+  integrity sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==
+  dependencies:
+    "@vue/shared" "3.1.5"
+
+"@vue/shared@3.1.5":
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.1.5.tgz#74ee3aad995d0a3996a6bb9533d4d280514ede03"
+  integrity sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==
+
 "@webassemblyjs/ast@1.7.11":
   version "1.7.11"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.7.11.tgz#b988582cafbb2b095e8b556526f30c90d057cace"
@@ -1087,6 +1099,13 @@ alphanum-sort@^1.0.0:
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
   integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
 
+alpinejs@^3.12.2:
+  version "3.12.2"
+  resolved "https://registry.yarnpkg.com/alpinejs/-/alpinejs-3.12.2.tgz#e76ffd00a4858623acf84112c27a4eecbee9ac74"
+  integrity sha512-wrUZULm9w6DYwWcUtB/anFLgRaF4riSuPgIJ3gcPUS8st9luAJnAxoIgro/Al97d2McSSz/JypWg/NlmKFIJJA==
+  dependencies:
+    "@vue/reactivity" "~3.1.1"
+
 ansi-align@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f"