minor #156 Using Typescript & Centralizing Builds (weaverryan)

This PR was squashed before being merged into the main branch.

Discussion
----------

Using Typescript & Centralizing Builds

| Q             | A
| ------------- | ---
| Bug fix?      | No
| New feature?  | Yes
| Tickets       | None
| License       | MIT

**Depends on #141**

Hi!

This PR converts the project to use TypeScript, but that in itself wasn't really the motivation.

## Motivations / Changes

* A) Standardize how we do things to be more like ``@hotwired`/stimulus` and other high-quality Stimulus libraries (like `stimulus-use`
* B) Centralize the build processes: the "build", "test" and "lint" processes are now all centralized so that each "library" can focus on just doing its job.
* C) This **removes support for IE11** (see below).

B) Was the main motivator - before, each library was responsible for setting up their own test process and (more importantly) their own build process, which allowed for inconsistencies for what transformations we make, etc.

## IE 11 Support Gone

Stimulus 3 dropped IE 11 support. This PR would be released with the version of Symfony UX that starts using Stimulus 3. So, we follow suit. It makes the builds smaller and makes (along with Typescript) our build process MUCH simpler.

It's pretty easy to see the difference  in the built files - for example https://github.com/symfony/ux/pull/156/files#diff-72060cc03a17f489a2c7e84dd42fab25c7d19ee5154f0c493f00b91d6a13285b

## TODOS

* [ ] Some additional cleanup so that the TypeScript build process finishes without warnings (it already finishes without errors).

Commits
-------

f8eb843 Using Typescript & Centralizing Builds

Author: tgalopin

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    presets: [
+        ['@babel/preset-env', {targets: {node: 'current'}}],
+        '@babel/preset-typescript',
+    ],
+};

jest.config.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+module.exports = {
+    testRegex: "test/.*\\.test.ts",
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: [
+        path.join(__dirname, 'test/setup.js'),
+    ],
+    transform: {
+        '\\.(j|t)s$': ['babel-jest', { configFile: path.join(__dirname, './babel.config.js') }]
+    },
+}

package.json

@@ -5,34 +5,56 @@
         "src/**/assets"
     ],
     "scripts": {
-        "build": "yarn workspaces run build",
-        "test": "yarn workspaces run test",
-        "lint": "yarn workspaces run lint --fix",
-        "format": "prettier src/*/Resources/assets/{src,test}/*.js {,src/*/}*.{json,md} --write",
+        "build": "yarn rollup -c",
+        "test": "yarn workspaces run jest",
+        "lint": "yarn workspaces run eslint src test",
+        "format": "prettier src/*/Resources/assets/src/*.ts src/*/Resources/assets/test/*.js {,src/*/}*.{json,md} --write",
         "check-lint": "yarn lint --no-fix",
         "check-format": "yarn format --no-write --check"
     },
     "devDependencies": {
-        "@babel/eslint-parser": "^7.12.1",
-        "eslint": "^7.15.0",
-        "eslint-config-prettier": "^6.15.0",
-        "eslint-plugin-jest": "^24.1.3",
-        "prettier": "^2.2.1"
+        "@babel/core": "^7.15.8",
+        "@babel/preset-env": "^7.15.8",
+        "@babel/preset-typescript": "^7.15.0",
+        "@rollup/plugin-node-resolve": "^13.0.0",
+        "@rollup/plugin-typescript": "^8.3.0",
+        "@symfony/stimulus-testing": "^1.1.0",
+        "@typescript-eslint/eslint-plugin": "^5.2.0",
+        "@typescript-eslint/parser": "^5.2.0",
+        "babel-jest": "^27.3.1",
+        "eslint": "^8.1.0",
+        "eslint-config-prettier": "^8.0.0",
+        "eslint-plugin-jest": "^25.2.2",
+        "jest": "^27.3.1",
+        "pkg-up": "^3.1.0",
+        "prettier": "^2.2.1",
+        "rollup": "^2.52.2",
+        "tslib": "^2.3.1",
+        "typescript": "^4.4.4"
     },
     "eslintConfig": {
         "root": true,
-        "parser": "@babel/eslint-parser",
+        "parser": "@typescript-eslint/parser",
+        "plugins": [
+            "@typescript-eslint"
+        ],
         "extends": [
             "eslint:recommended",
-            "prettier"
+            "prettier",
+            "plugin:@typescript-eslint/eslint-recommended",
+            "plugin:@typescript-eslint/recommended"
         ],
+        "rules": {
+            "@typescript-eslint/no-explicit-any": "off"
+        },
         "env": {
             "browser": true
         },
         "overrides": [
             {
                 "files": [
-                    "src/*/Resources/assets/test/*.js"
+                    "src/*/Resources/assets/test/**/*.ts",
+                    "src/*/assets/test/**/*.ts"
                 ],
                 "extends": [
                     "plugin:jest/recommended"

rollup.config.js

@@ -0,0 +1,30 @@
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import glob from 'glob';
+import path from 'path';
+import pkgUp from 'pkg-up';
+
+const files = glob.sync("src/**/assets/src/*controller.ts");
+const packages = files.map((file) => {
+    const absolutePath = path.join(__dirname, file);
+    const packageData = require(pkgUp.sync({ cwd: absolutePath }));
+    const peerDependencies = [
+        '@hotwired/stimulus',
+        ...(packageData.peerDependencies ? Object.keys(packageData.peerDependencies) : [])
+    ];
+
+    return {
+        input: file,
+        output: {
+            file: path.join(absolutePath, '..', '..', 'dist', path.basename(file, '.ts') + '.js'),
+            format: 'esm',
+        },
+        external: peerDependencies,
+        plugins: [
+            resolve(),
+            typescript(),
+        ],
+    };
+});
+
+export default packages;

src/Chartjs/Resources/assets/.babelrc

@@ -1,87 +1,32 @@
-/*
- * This file is part of the Symfony package.
- *
- * (c) Fabien Potencier <[email protected]>
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-'use strict';
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _stimulus = require("@hotwired/stimulus");
-
-var _chart = require("chart.js");
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-var _default = /*#__PURE__*/function (_Controller) {
-  _inherits(_default, _Controller);
-
-  var _super = _createSuper(_default);
-
-  function _default() {
-    _classCallCheck(this, _default);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(_default, [{
-    key: "connect",
-    value: function connect() {
-      var payload = JSON.parse(this.element.getAttribute('data-view'));
-
-      if (Array.isArray(payload.options) && 0 === payload.options.length) {
-        payload.options = {};
-      }
-
-      this._dispatchEvent('chartjs:pre-connect', {
-        options: payload.options
-      });
-
-      var chart = new _chart.Chart(this.element.getContext('2d'), payload);
-
-      this._dispatchEvent('chartjs:connect', {
-        chart: chart
-      });
+import { Controller } from '@hotwired/stimulus';
+import { Chart } from 'chart.js';
+
+class controller extends Controller {
+    connect() {
+        if (!(this.element instanceof HTMLCanvasElement)) {
+            throw new Error('Invalid element');
+        }
+        const viewData = this.element.getAttribute('data-view');
+        if (!viewData) {
+            throw new Error('Missing data-view attribute.');
+        }
+        const payload = JSON.parse(viewData);
+        if (Array.isArray(payload.options) && 0 === payload.options.length) {
+            payload.options = {};
+        }
+        this._dispatchEvent('chartjs:pre-connect', { options: payload.options });
+        const canvasContext = this.element.getContext('2d');
+        if (!canvasContext) {
+            throw new Error('Could not getContext() from Element');
+        }
+        const chart = new Chart(canvasContext, payload);
+        this._dispatchEvent('chartjs:connect', { chart });
     }
-  }, {
-    key: "_dispatchEvent",
-    value: function _dispatchEvent(name) {
-      var payload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      var canBubble = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-      var cancelable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-      var userEvent = document.createEvent('CustomEvent');
-      userEvent.initCustomEvent(name, canBubble, cancelable, payload);
-      this.element.dispatchEvent(userEvent);
+    _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) {
+        const userEvent = document.createEvent('CustomEvent');
+        userEvent.initCustomEvent(name, canBubble, cancelable, payload);
+        this.element.dispatchEvent(userEvent);
     }
-  }]);
-
-  return _default;
-}(_stimulus.Controller);
+}
 
-exports["default"] = _default;
+export { controller as default };

src/Chartjs/Resources/assets/dist/controller.js

@@ -0,0 +1,5 @@
+const config = require('../../../../jest.config.js');
+
+config.setupFilesAfterEnv.push('./test/setup.js');
+
+module.exports = config;

src/Chartjs/Resources/assets/jest.config.js

@@ -13,29 +13,14 @@
             }
         }
     },
-    "scripts": {
-        "build": "babel src -d dist",
-        "test": "babel src -d dist && jest",
-        "lint": "eslint src test"
-    },
     "peerDependencies": {
-        "chart.js": "^2.9.4",
-        "@hotwired/stimulus": "^3.0.0"
+        "@hotwired/stimulus": "^3.0.0",
+        "chart.js": "^2.9.4"
     },
     "devDependencies": {
-        "@babel/cli": "^7.12.1",
-        "@babel/core": "^7.12.3",
-        "@babel/plugin-proposal-class-properties": "^7.12.1",
-        "@babel/preset-env": "^7.12.7",
-        "@symfony/stimulus-testing": "^1.1.0",
+        "@hotwired/stimulus": "^3.0.0",
+        "@types/chart.js": "^2.9.34",
         "chart.js": "^2.9.4",
-        "jest-canvas-mock": "^2.3.0",
-        "@hotwired/stimulus": "^3.0.0"
-    },
-    "jest": {
-        "testRegex": "test/.*\\.test.js",
-        "setupFilesAfterEnv": [
-            "./test/setup.js"
-        ]
+        "jest-canvas-mock": "^2.3.0"
     }
 }

src/Chartjs/Resources/assets/package.json

@@ -14,19 +14,32 @@ import { Chart } from 'chart.js';
 
 export default class extends Controller {
     connect() {
-        const payload = JSON.parse(this.element.getAttribute('data-view'));
+        if (!(this.element instanceof HTMLCanvasElement)) {
+            throw new Error('Invalid element');
+        }
+
+        const viewData = this.element.getAttribute('data-view');
+        if (!viewData) {
+            throw new Error('Missing data-view attribute.');
+        }
+
+        const payload = JSON.parse(viewData);
         if (Array.isArray(payload.options) && 0 === payload.options.length) {
             payload.options = {};
         }
 
         this._dispatchEvent('chartjs:pre-connect', { options: payload.options });
 
-        const chart = new Chart(this.element.getContext('2d'), payload);
+        const canvasContext = this.element.getContext('2d');
+        if (!canvasContext) {
+            throw new Error('Could not getContext() from Element');
+        }
+        const chart = new Chart(canvasContext, payload);
 
         this._dispatchEvent('chartjs:connect', { chart });
     }
 
-    _dispatchEvent(name, payload = null, canBubble = false, cancelable = false) {
+    _dispatchEvent(name: string, payload: any = null, canBubble = false, cancelable = false) {
         const userEvent = document.createEvent('CustomEvent');
         userEvent.initCustomEvent(name, canBubble, cancelable, payload);
 

src/Chartjs/Resources/assets/src/controller.js renamed to src/Chartjs/Resources/assets/src/controller.ts

@@ -12,7 +12,7 @@
 import { Application, Controller } from '@hotwired/stimulus';
 import { getByTestId, waitFor } from '@testing-library/dom';
 import { clearDOM, mountDOM } from '@symfony/stimulus-testing';
-import ChartjsController from '../dist/controller';
+import ChartjsController from '../src/controller';
 
 // Controller used to check the actual controller was properly booted
 class CheckController extends Controller {

src/Chartjs/Resources/assets/test/controller.test.js renamed to src/Chartjs/Resources/assets/test/controller.test.ts

@@ -9,5 +9,4 @@
 
 'use strict';
 
-import '@symfony/stimulus-testing/setup';
 import 'jest-canvas-mock';