web: migrate to babel

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

authentik/core/templates/base/skeleton.html

@@ -13,7 +13,7 @@
         <link rel="stylesheet" type="text/css" href="{% static 'dist/patternfly.min.css' %}?v={{ ak_version }}">
         <link rel="stylesheet" type="text/css" href="{% static 'dist/authentik.css' %}?v={{ ak_version }}">
         <script src="{% url 'authentik_api:javascript-catalog' %}?v={{ ak_version }}"></script>
-        <script src="{% static 'dist/adoptedStyleSheets.js' %}?v={{ ak_version }}" type="module"></script>
+        <script src="{% static 'dist/poly.js' %}?v={{ ak_version }}" type="module"></script>
         {% block head %}
         {% endblock %}
     </head>

web/.babelrc

@@ -0,0 +1,26 @@
+{
+    "presets": [
+        "@babel/env",
+        "@babel/typescript"
+    ],
+    "plugins": [
+        [
+            "@babel/plugin-proposal-decorators",
+            {
+                "decoratorsBeforeExport": true
+            }
+        ],
+        [
+            "@babel/plugin-proposal-class-properties",
+            {
+                "loose": true
+            }
+        ],
+        [
+            "@babel/plugin-transform-runtime",
+            {
+                "regenerator": true
+            }
+        ]
+    ]
+}

web/package.json

@@ -10,10 +10,15 @@
         "lit-analyse": "lit-analyzer src"
     },
     "dependencies": {
+        "@babel/core": "^7.13.14",
+        "@babel/plugin-proposal-decorators": "^7.13.5",
+        "@babel/preset-env": "^7.13.12",
+        "@babel/preset-typescript": "^7.13.0",
         "@fortawesome/fontawesome-free": "^5.15.3",
         "@patternfly/patternfly": "^4.96.2",
         "@polymer/iron-form": "^3.0.1",
         "@polymer/paper-input": "^3.2.1",
+        "@rollup/plugin-babel": "^5.3.0",
         "@sentry/browser": "^6.2.5",
         "@sentry/tracing": "^6.2.5",
         "@types/chart.js": "^2.9.31",
@@ -37,6 +42,7 @@
         "yaml": "^1.10.2"
     },
     "devDependencies": {
+        "@babel/plugin-transform-runtime": "^7.13.10",
         "@rollup/plugin-typescript": "^8.2.1",
         "@typescript-eslint/eslint-plugin": "^4.20.0",
         "@typescript-eslint/parser": "^4.20.0",

web/rollup.config.js

@@ -6,6 +6,11 @@ import typescript from "@rollup/plugin-typescript";
 import cssimport from "rollup-plugin-cssimport";
 import copy from "rollup-plugin-copy";
 import externalGlobals from "rollup-plugin-external-globals";
+import babel from '@rollup/plugin-babel';
+
+const extensions = [
+    '.js', '.jsx', '.ts', '.tsx',
+];
 
 const resources = [
     { src: "node_modules/rapidoc/dist/rapidoc-min.js", dest: "dist/" },
@@ -67,20 +72,15 @@ export default [
         ],
         output: [
             {
-                format: "es",
-                dir: "dist",
+                format: "iife",
+                file: "dist/poly.js",
                 sourcemap: true,
             }
         ],
         plugins: [
             cssimport(),
-            typescript(),
-            externalGlobals({
-                django: "django",
-            }),
             resolve({ browser: true }),
             commonjs(),
-            sourcemaps(),
             isProdBuild && terser(),
         ].filter(p => p),
         watch: {
@@ -100,12 +100,16 @@ export default [
         ],
         plugins: [
             cssimport(),
-            typescript(),
+            resolve({ extensions, browser: true }),
+            commonjs(),
+            babel({
+                extensions,
+                babelHelpers: 'runtime',
+                include: ['src/**/*'],
+            }),
             externalGlobals({
                 django: "django",
             }),
-            resolve({ browser: true }),
-            commonjs(),
             sourcemaps(),
             isProdBuild && terser(),
         ].filter(p => p),
@@ -127,12 +131,16 @@ export default [
         ],
         plugins: [
             cssimport(),
-            typescript(),
+            resolve({ extensions, browser: true }),
+            commonjs(),
+            babel({
+                extensions,
+                babelHelpers: 'runtime',
+                include: ['src/**/*'],
+            }),
             externalGlobals({
                 django: "django"
             }),
-            resolve({ browser: true }),
-            commonjs(),
             sourcemaps(),
             isProdBuild && terser(),
         ].filter(p => p),

web/src/interfaces/admin/index.html

@@ -8,7 +8,7 @@
         <link rel="stylesheet" type="text/css" href="/static/dist/patternfly-base.css">
         <link rel="stylesheet" type="text/css" href="/static/dist/authentik.css">
         <script src="/api/jsi18n/"></script>
-        <script src="/static/dist/adoptedStyleSheets.js" type="module"></script>
+        <script src="/static/dist/poly.js" type="module"></script>
         <script src="/static/dist/AdminInterface.js" type="module"></script>
         <title>authentik</title>
     </head>

web/src/interfaces/flow/index.html

@@ -8,7 +8,7 @@
         <link rel="stylesheet" type="text/css" href="/static/dist/patternfly-base.css">
         <link rel="stylesheet" type="text/css" href="/static/dist/authentik.css">
         <script src="/api/jsi18n/"></script>
-        <script src="/static/dist/adoptedStyleSheets.js" type="module"></script>
+        <script src="/static/dist/poly.js" type="module"></script>
         <script src="/static/dist/FlowInterface.js" type="module"></script>
         <title>authentik</title>
     </head>