Convert Class Components to Functional with Hooks, Migrate Tests to Jest, and Transition to TypeScript

.babelrc

@@ -1,11 +1,11 @@
 {
-  "presets": ["env", "react"],
+  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
   "plugins": [
-    ["transform-object-rest-spread", { "useBuiltIns": true }]
+    ["@babel/plugin-proposal-object-rest-spread", { "useBuiltIns": true }]
   ],
   "env": {
     "test": {
-      "plugins": ["istanbul"]
+      // "plugins": ["babel-plugin-istanbul"]
     }
   }
-}
+}

.eslintrc.json

@@ -1,24 +1,28 @@
 {
-    "extends": [ "eslint:recommended", "plugin:react/recommended" ],
-    "parser": "babel-eslint",
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true,
-            "restParams": true,
-            "spread": true
-        },
-        "sourceType": "module"
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true,
+      "restParams": true,
+      "spread": true
     },
-    "env": {
-        "es6": true,
-        "node": true
-    },
-    "rules": {
-        "semi": "off"
-    },
-    "plugins": [
-        "react",
-        "import",
-        "jsx-a11y"
-    ]
-}
+    "sourceType": "module"
+  },
+  "env": {
+    "es6": true,
+    "node": true,
+    "jest": true
+
+  },
+  "settings": {
+    "react": {
+      "version": "detect" // Automatically detects the React version
+    }
+  },
+  "rules": {
+    "semi": "off",
+    "@typescript-eslint/no-explicit-any": "off"
+  },
+  "plugins": ["react", "import", "jsx-a11y", "@typescript-eslint"]
+}

.vscode/launch.json

@@ -0,0 +1,29 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Attach",
+            "port": 9229,
+            "request": "attach",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "type": "node"
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "program": "${workspaceFolder}/dist/index.js",
+            "outFiles": [
+                "${workspaceFolder}/**/*.js"
+            ]
+        }
+    ]
+}

dist/ExtensionPoint/ExtensionPoint.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ExtensionRegistry = _interopRequireDefault(require("../ExtensionRegistry"));
+var _validateExtensionName = _interopRequireDefault(require("../internal/validateExtensionName"));
+var _ExtensionProvider = require("../ExtensionProvider");
+var _excluded = ["extensionName", "children", "registry"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var ExtensionPoint = function ExtensionPoint(_ref) {
+  var extensionName = _ref.extensionName,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    registryFromProps = _ref.registry,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var registry = (0, _ExtensionProvider.useExtensionRegistry)() || registryFromProps || _ExtensionRegistry["default"];
+  var validatedExtensionName = (0, _validateExtensionName["default"])(extensionName);
+  var Extension = registry === null || registry === void 0 ? void 0 : registry.getExtension(validatedExtensionName);
+  if (typeof children === "function") {
+    return children(Extension, props) || null;
+  } else if (typeof Extension === "undefined") {
+    if ( /*#__PURE__*/_react["default"].isValidElement(children)) {
+      return /*#__PURE__*/_react["default"].cloneElement(children, props);
+    } else {
+      return children;
+    }
+  } else if (!Extension) {
+    return null;
+  }
+  return /*#__PURE__*/_react["default"].createElement(Extension, props);
+};
+var _default = exports["default"] = ExtensionPoint;

dist/ExtensionPoint/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _ExtensionPoint = _interopRequireDefault(require("./ExtensionPoint"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _default = exports["default"] = _ExtensionPoint["default"];

dist/ExtensionProvider/ExtensionProvider.js

@@ -0,0 +1,29 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useExtensionRegistry = exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _invariant = _interopRequireDefault(require("invariant"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var ExtensionRegistryContext = /*#__PURE__*/(0, _react.createContext)(null);
+var useExtensionRegistry = exports.useExtensionRegistry = function useExtensionRegistry() {
+  var registry = (0, _react.useContext)(ExtensionRegistryContext);
+  return registry;
+};
+var ExtensionProvider = function ExtensionProvider(_ref) {
+  var registry = _ref.registry,
+    children = _ref.children;
+  var initialRegistry = (0, _react.useRef)(registry);
+  (0, _react.useEffect)(function () {
+    (0, _invariant["default"])(initialRegistry.current === registry, "You can't change the extension registry after it has been rendered");
+  }, [registry]);
+  return /*#__PURE__*/_react["default"].createElement(ExtensionRegistryContext.Provider, {
+    value: registry
+  }, _react["default"].Children.only(children));
+};
+var _default = exports["default"] = ExtensionProvider;

dist/ExtensionProvider/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+Object.defineProperty(exports, "useExtensionRegistry", {
+  enumerable: true,
+  get: function get() {
+    return _ExtensionProvider.useExtensionRegistry;
+  }
+});
+var _ExtensionProvider = _interopRequireWildcard(require("./ExtensionProvider"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var _default = exports["default"] = _ExtensionProvider["default"];

dist/ExtensionRegistry/ExtensionRegistry.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.createExtensionRegistry = void 0;
+var _validateExtensionName = _interopRequireDefault(require("../internal/validateExtensionName"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+// Import React
+
+var required = function required(name) {
+  throw new TypeError("".concat(name, " is required"));
+};
+var createExtensionRegistry = exports.createExtensionRegistry = function createExtensionRegistry() {
+  var extensions = {};
+  var addExtension = function addExtension(extensionName, extension) {
+    extensionName = (0, _validateExtensionName["default"])(extensionName);
+    if (!extension && extension !== null) {
+      return required("extension");
+    }
+    extensions[extensionName.toLowerCase()] = extension;
+  };
+  var getExtension = function getExtension(extensionName) {
+    extensionName = (0, _validateExtensionName["default"])(extensionName);
+    return extensions[extensionName.toLowerCase()];
+  };
+  return {
+    addExtension: addExtension,
+    getExtension: getExtension
+  };
+};
+var defaultRegistry = exports["default"] = createExtensionRegistry();

dist/ExtensionRegistry/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+var _ExtensionRegistry = _interopRequireWildcard(require("./ExtensionRegistry"));
+Object.keys(_ExtensionRegistry).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ExtensionRegistry[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ExtensionRegistry[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var _default = exports["default"] = _ExtensionRegistry["default"];

dist/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  ExtensionProvider: true,
+  ExtensionRegistry: true
+};
+Object.defineProperty(exports, "ExtensionProvider", {
+  enumerable: true,
+  get: function get() {
+    return _ExtensionProvider["default"];
+  }
+});
+Object.defineProperty(exports, "ExtensionRegistry", {
+  enumerable: true,
+  get: function get() {
+    return _ExtensionRegistry["default"];
+  }
+});
+exports["default"] = void 0;
+var _ExtensionPoint = _interopRequireDefault(require("./ExtensionPoint"));
+var _ExtensionProvider = _interopRequireDefault(require("./ExtensionProvider"));
+var _ExtensionRegistry = _interopRequireWildcard(require("./ExtensionRegistry"));
+Object.keys(_ExtensionRegistry).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ExtensionRegistry[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ExtensionRegistry[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _default = exports["default"] = _ExtensionPoint["default"];

index.d.ts

@@ -0,0 +1,12 @@
+import { ExtensionRegistry } from './lib/ExtensionRegistry/ExtensionRegistry';
+import {ExtensionProvider} from './lib/ExtensionProvider/ExtensionProvider';
+import {ExtentionPoint} from './lib/ExtensionPoint/ExtensionPoint';
+import {CreateExtensionRegistry} from './lib/ExtensionRegistry/ExtensionRegistry';
+
+// Exporting types and interfaces
+export {
+  ExtensionProvider,
+  ExtentionPoint,
+  CreateExtensionRegistry,
+  ExtensionRegistry
+};

jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    transform: {
+      "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
+    },
+  };
+