Using Typescript & Centralizing Builds

Author: weaverryan

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';