优化Card组件

Imshann
1 parent 2092c4d5
Showing 14 changed files with 198 additions and 116 deletions Show diff stats
build/Button/Button.js
build/Card/Card.html
build/Card/Card.js
build/Slot/Slot.js
dist/ng-antd.js
example/button.html
example/card.html
example/test.html
package.json
src/BreadcrumbItem/BreadcrumbItem.js
src/Card/Card.html
src/Card/Card.js
src/Slot/Slot.js
yarn.lock
@@ -11,7 +11,7 @@ angular.module(&quot;esNgAntd&quot;).directive(&quot;antdButton&quot;, [&quot;esNgAntd&quot;, function (esNgAn
       size: "@",
       htmlType: "@",
       ghost: "=",
-      loading: "@"
+      loading: "="
     },
     controller: function ($scope) {
       $scope.state = {
@@ -32,9 +32,7 @@ angular.module(&quot;esNgAntd&quot;).directive(&quot;antdButton&quot;, [&quot;esNgAntd&quot;, function (esNgAn
     },
     link: function ($scope, $element, $attrs, $controllers, $transclude) {
       esNgAntd.createStyle("ant-btn", style);
-        let className = ["ant-btn"];
-        
-        console.log($scope);
+      let className = ["ant-btn"];
       if ($scope.type) {
         className.push("ant-btn-" + $scope.type);
-<div ng-class="'ant-card'+(bordered==='false'?'':' ant-card-bordered')">
+<div ng-class="'ant-card'+(bordered===false?'':' ant-card-bordered')">
     <div ng-if="title" class="ant-card-head">
         <div class="ant-card-head-wrapper">
             <div class="ant-card-head-title">{{title}}</div>
             <div ng-if="extra" class="ant-card-extra">
-                <antd-slot content="{{extra}}" context="antdCard.getContext().$parent"></antd-slot>
+                <antd-slot content="{{extra}}" context="self.$parent"></antd-slot>
             </div>
         </div>
     </div>
-import template from "./Card.html";
 import style from "antd/lib/card/style/index.css";
-angular.module("esNgAntd").directive("antdCard", function (esNgAntd) {
-    return {
-        controllerAs: "antdCard",
-        restrict: "E",
-        transclude: true,
-        replace: true,
-        scope: {
-            title: "@",
-            extra: "@",
-            bordered: "@",
-        },
-        template: template,
-        controller: function ($scope, $element, $attrs) {
-            this.getContext = function () {
-                return $scope;
-            };
-
-            $scope.state = {
-                extra: $scope.extra,
-            };
-        },
-        link: function ($scope, $element, $attrs, $controllers, $transclude) {
-            $element[0].removeAttribute("title");
-            $element[0].removeAttribute("extra");
-            $element[0].removeAttribute("ng-class");
-            esNgAntd.createStyle("ant-card", style);
-        },
-    };
-});
+import template from "./Card.html";
+angular.module("esNgAntd").directive("antdCard", ["esNgAntd", function (esNgAntd) {
+  return {
+    template: template,
+    restrict: "E",
+    replace: true,
+    transclude: true,
+    scope: {
+      title: "@",
+      extra: "@",
+      bordered: "="
+    },
+    link: function ($scope, $element) {
+      $element[0].removeAttribute("title");
+      $element[0].removeAttribute("extra");
+      $element[0].removeAttribute("ng-class");
+      $scope.self = $scope;
+      esNgAntd.createStyle("ant-card", style);
+    }
+  };
+}]);
 \ No newline at end of file
-angular.module("esNgAntd").directive("antdSlot", function ($compile) {
-    return {
-        controllerAs: "antdSlot",
-        restrict: "E",
-        transclude: true,
-        replace: true,
-        scope: {
-            content: "@",
-            context: "=",
-        },
-        controller: function ($scope, $element, $attrs) {
-            this.getContext = function () {
-                return $scope;
-            };
-
-            $scope.watch = {
-                content: (newValue) => {
-                    if (newValue !== undefined) {
-                        if (/<[^>]+>/.test(newValue)) {
-                            $element.replaceWith(
-                                $compile(newValue)(
-                                    $scope.context ? $scope.context : $scope
-                                )
-                            );
-                        } else {
-                            $element.text(newValue);
-                        }
-                    }
-                },
-            };
-
-            for (const key in $scope.watch) {
-                $scope.$watch(key, $scope.watch[key], true);
+angular.module("esNgAntd").directive("antdSlot", ["$compile", function ($compile) {
+  return {
+    restrict: "E",
+    replace: true,
+    transclude: true,
+    scope: {
+      content: "@",
+      context: "="
+    },
+    controller: function ($scope, $element) {
+      $scope.watch = {
+        content: function (newVal) {
+          if (newVal !== undefined) {
+            if (/<[^>]+>/.test(newVal)) {
+              $element.replaceWith($compile(newVal)($scope.context ? $scope.context : $scope));
+            } else {
+              $element.text(newVal);
             }
-        },
-        link: function ($scope, $element, $attrs, $controllers, $transclude) {},
-    };
-});
+          }
+        }
+      };
+    },
+    link: function ($scope) {
+      for (const key in $scope.watch) {
+        $scope.$watch(key, $scope.watch[key], true);
+      }
+    }
+  };
+}]);
 \ No newline at end of file
@@ -49,7 +49,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Bre
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_button_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/button/style/index.css */ \"./node_modules/antd/lib/button/style/index.css\");\n/* harmony import */ var _Button_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Button.html */ \"./build/Button/Button.html\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdButton\", [\"esNgAntd\", function (esNgAntd) {\n  return {\n    template: _Button_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n    restrict: \"E\",\n    replace: true,\n    transclude: true,\n    scope: {\n      type: \"@\",\n      size: \"@\",\n      htmlType: \"@\",\n      ghost: \"=\",\n      loading: \"@\"\n    },\n    controller: function ($scope) {\n      $scope.state = {\n        disabled: null,\n        className: \"\"\n      };\n      $scope.watch = {\n        loading: newVal => {\n          if (newVal !== undefined) {\n            if (newVal === \"true\") {\n              $scope.state.className += \" ant-btn-loading\";\n            } else {\n              $scope.state.className = $scope.state.className.replace(\" ant-btn-loading\", \"\");\n            }\n          }\n        }\n      };\n    },\n    link: function ($scope, $element, $attrs, $controllers, $transclude) {\n      esNgAntd.createStyle(\"ant-btn\", antd_lib_button_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n        let className = [\"ant-btn\"];\n        \n        console.log($scope);\n\n      if ($scope.type) {\n        className.push(\"ant-btn-\" + $scope.type);\n      }\n\n      if ($scope.size && [\"lg\", \"sm\", \"xs\"].includes($scope.size)) {\n        className.push(\"ant-btn-\" + $scope.size);\n      }\n\n      if ($scope.ghost) {\n        className.push(\"ant-btn-background-ghost\");\n      }\n\n      $scope.state.className = className.join(\" \");\n\n      if ($scope.htmlType) {\n        $element[0].setAttribute(\"type\", $scope.htmlType);\n      }\n    }\n  };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Button/Button.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_button_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/button/style/index.css */ \"./node_modules/antd/lib/button/style/index.css\");\n/* harmony import */ var _Button_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Button.html */ \"./build/Button/Button.html\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdButton\", [\"esNgAntd\", function (esNgAntd) {\n  return {\n    template: _Button_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n    restrict: \"E\",\n    replace: true,\n    transclude: true,\n    scope: {\n      type: \"@\",\n      size: \"@\",\n      htmlType: \"@\",\n      ghost: \"=\",\n      loading: \"=\"\n    },\n    controller: function ($scope) {\n      $scope.state = {\n        disabled: null,\n        className: \"\"\n      };\n      $scope.watch = {\n        loading: newVal => {\n          if (newVal !== undefined) {\n            if (newVal === \"true\") {\n              $scope.state.className += \" ant-btn-loading\";\n            } else {\n              $scope.state.className = $scope.state.className.replace(\" ant-btn-loading\", \"\");\n            }\n          }\n        }\n      };\n    },\n    link: function ($scope, $element, $attrs, $controllers, $transclude) {\n      esNgAntd.createStyle(\"ant-btn\", antd_lib_button_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n      let className = [\"ant-btn\"];\n\n      if ($scope.type) {\n        className.push(\"ant-btn-\" + $scope.type);\n      }\n\n      if ($scope.size && [\"lg\", \"sm\", \"xs\"].includes($scope.size)) {\n        className.push(\"ant-btn-\" + $scope.size);\n      }\n\n      if ($scope.ghost) {\n        className.push(\"ant-btn-background-ghost\");\n      }\n\n      $scope.state.className = className.join(\" \");\n\n      if ($scope.htmlType) {\n        $element[0].setAttribute(\"type\", $scope.htmlType);\n      }\n    }\n  };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Button/Button.js?");
 /***/ }),
@@ -60,7 +60,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Card_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Card.html */ \"./build/Card/Card.html\");\n/* harmony import */ var antd_lib_card_style_index_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! antd/lib/card/style/index.css */ \"./node_modules/antd/lib/card/style/index.css\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdCard\", function (esNgAntd) {\n    return {\n        controllerAs: \"antdCard\",\n        restrict: \"E\",\n        transclude: true,\n        replace: true,\n        scope: {\n            title: \"@\",\n            extra: \"@\",\n            bordered: \"@\",\n        },\n        template: _Card_html__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n        controller: function ($scope, $element, $attrs) {\n            this.getContext = function () {\n                return $scope;\n            };\n\n            $scope.state = {\n                extra: $scope.extra,\n            };\n        },\n        link: function ($scope, $element, $attrs, $controllers, $transclude) {\n            $element[0].removeAttribute(\"title\");\n            $element[0].removeAttribute(\"extra\");\n            $element[0].removeAttribute(\"ng-class\");\n            esNgAntd.createStyle(\"ant-card\", antd_lib_card_style_index_css__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n        },\n    };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Card/Card.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var antd_lib_card_style_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! antd/lib/card/style/index.css */ \"./node_modules/antd/lib/card/style/index.css\");\n/* harmony import */ var _Card_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Card.html */ \"./build/Card/Card.html\");\n\n\nangular.module(\"esNgAntd\").directive(\"antdCard\", [\"esNgAntd\", function (esNgAntd) {\n  return {\n    template: _Card_html__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n    restrict: \"E\",\n    replace: true,\n    transclude: true,\n    scope: {\n      title: \"@\",\n      extra: \"@\",\n      bordered: \"=\"\n    },\n    link: function ($scope, $element) {\n      $element[0].removeAttribute(\"title\");\n      $element[0].removeAttribute(\"extra\");\n      $element[0].removeAttribute(\"ng-class\");\n      $scope.self = $scope;\n      esNgAntd.createStyle(\"ant-card\", antd_lib_card_style_index_css__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n    }\n  };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Card/Card.js?");
 /***/ }),
@@ -367,7 +367,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Sel
   \****************************/
 /***/ (() => {
-eval("angular.module(\"esNgAntd\").directive(\"antdSlot\", function ($compile) {\n    return {\n        controllerAs: \"antdSlot\",\n        restrict: \"E\",\n        transclude: true,\n        replace: true,\n        scope: {\n            content: \"@\",\n            context: \"=\",\n        },\n        controller: function ($scope, $element, $attrs) {\n            this.getContext = function () {\n                return $scope;\n            };\n\n            $scope.watch = {\n                content: (newValue) => {\n                    if (newValue !== undefined) {\n                        if (/<[^>]+>/.test(newValue)) {\n                            $element.replaceWith(\n                                $compile(newValue)(\n                                    $scope.context ? $scope.context : $scope\n                                )\n                            );\n                        } else {\n                            $element.text(newValue);\n                        }\n                    }\n                },\n            };\n\n            for (const key in $scope.watch) {\n                $scope.$watch(key, $scope.watch[key], true);\n            }\n        },\n        link: function ($scope, $element, $attrs, $controllers, $transclude) {},\n    };\n});\n\n\n//# sourceURL=webpack://ng-antd/./build/Slot/Slot.js?");
+eval("angular.module(\"esNgAntd\").directive(\"antdSlot\", [\"$compile\", function ($compile) {\n  return {\n    restrict: \"E\",\n    replace: true,\n    transclude: true,\n    scope: {\n      content: \"@\",\n      context: \"=\"\n    },\n    controller: function ($scope, $element) {\n      $scope.watch = {\n        content: function (newVal) {\n          if (newVal !== undefined) {\n            if (/<[^>]+>/.test(newVal)) {\n              $element.replaceWith($compile(newVal)($scope.context ? $scope.context : $scope));\n            } else {\n              $element.text(newVal);\n            }\n          }\n        }\n      };\n    },\n    link: function ($scope) {\n      for (const key in $scope.watch) {\n        $scope.$watch(key, $scope.watch[key], true);\n      }\n    }\n  };\n}]);\n\n//# sourceURL=webpack://ng-antd/./build/Slot/Slot.js?");
 /***/ }),
@@ -9474,7 +9474,7 @@ eval(&quot;__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<div ng-class=\\\"'ant-card'+(bordered==='false'?'':' ant-card-bordered')\\\">\\n    <div ng-if=\\\"title\\\" class=\\\"ant-card-head\\\">\\n        <div class=\\\"ant-card-head-wrapper\\\">\\n            <div class=\\\"ant-card-head-title\\\">{{title}}</div>\\n            <div ng-if=\\\"extra\\\" class=\\\"ant-card-extra\\\">\\n                <antd-slot content=\\\"{{extra}}\\\" context=\\\"antdCard.getContext().$parent\\"></antd-slot>\n            </div>\n        </div>\n    </div>\n    <div class=\\"ant-card-body\\" ng-transclude></div>\n</div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Card/Card.html?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n// Module\nvar code = \"<div ng-class=\\\"'ant-card'+(bordered===false?'':' ant-card-bordered')\\\">\\n    <div ng-if=\\\"title\\\" class=\\\"ant-card-head\\\">\\n        <div class=\\\"ant-card-head-wrapper\\\">\\n            <div class=\\\"ant-card-head-title\\\">{{title}}</div>\\n            <div ng-if=\\\"extra\\\" class=\\\"ant-card-extra\\\">\\n                <antd-slot content=\\\"{{extra}}\\\" context=\\\"self.$parent\\"></antd-slot>\n            </div>\n        </div>\n    </div>\n    <div class=\\"ant-card-body\\" ng-transclude></div>\n</div>\";\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);\n\n//# sourceURL=webpack://ng-antd/./build/Card/Card.html?");
 /***/ }),
@@ -24,7 +24,7 @@
             <h2>Ghost</h2>
             <antd-button type="primary" ghost="ghost">Link</antd-button>
             <h2>Loading</h2>
-            <antd-button type="primary" loading="{{true}}" ng-click="enterLoading()">Click me</antd-button>
+            <antd-button type="primary" loading="true" ng-click="enterLoading()">Click me</antd-button>
         </div>
     </div>
     <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script>
@@ -7,7 +7,9 @@
     <body>
         <div ng-app="esNgAntd" ng-controller="mainCtrl">
             <div class="container" style="padding: 50px">
-                <es-card title="提示" extra="{{status}}"></es-card>
+                <antd-card title="提示" extra="{{status}}">
+                    <p>I am content.</p>
+                </antd-card>
             </div>
         </div>
         <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script>
@@ -16,8 +18,10 @@
             angular
                 .module("esNgAntd")
                 .controller("mainCtrl", function ($scope) {
-                    $scope.isRead = false;
-                    $scope.status  = `<span>More</span>`
+                    $scope.status  = `<span ng-click="onClick()">More</span>`;
+                    $scope.onClick = function() {
+                        alert("I am onClick");
+                    }
                 });
         </script>
     </body>
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <title></title>
+    <style>
+        .container>div {
+            margin-bottom: 10px;
+        }
+    </style>
+</head>
+
+<body>
+    <div ng-app="esNgAntd" ng-controller="mainCtrl">
+        <div class="container" style="padding: 50px">
+            <test a="123" b="{{b}}" c="{{c}}" d="{{d}}" e="{{e}}" f="1.00"></test>
+        </div>
+    </div>
+    <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.min.js"></script>
+    <script>
+        angular
+            .module("esNgAntd", [])
+            .directive("test", function ($parse, $interpolate) {
+                return {
+                    replace: true,
+                    restrict: "E",
+                    scope: {
+                        f: "="
+                    },
+                    template: `<div><h1>I am test{{foo}}{{c.a}}</h1></div>`,
+                    compile: function (tElement, tAttrs, transclude) {
+                        let props = {
+                            a: {
+                                type: "string",
+                                compile: tAttrs.a.indexOf("{{") !== -1
+                            },
+                            b: {
+                                type: "boolean",
+                                compile: tAttrs.b.indexOf("{{") !== -1
+                            },
+                            c: {
+                                type: "object",
+                                compile: tAttrs.c.indexOf("{{") !== -1
+                            },
+                            d: {
+                                type: "array",
+                                compile: tAttrs.d.indexOf("{{") !== -1
+                            },
+                            e: {
+                                type: "number",
+                                compile: tAttrs.e.indexOf("{{") !== -1
+                            }
+                        }
+                        return function ($scope) {
+                            Object.keys(props).forEach(function (propKey) {
+                                tAttrs.$observe(propKey, function (newVal) {
+                                    let { type, compile } = props[propKey];
+                                    if (!compile) {
+                                        $scope[propKey] = newVal;
+                                    } else if (type === "boolean") {
+                                        $scope[propKey] = newVal === "true";
+                                    } else if (["object", "array"].includes(type)) {
+                                        $scope[propKey] = $parse(newVal)();
+                                    } else if (type === "number") {
+                                        let segments = newVal.split(".");
+                                        let len = !segments[1] ? 0 : segments[1].length;
+                                        $scope[propKey] = Math.floor(newVal * Math.pow(10, len)) / Math.pow(10, len);
+                                    } else {
+                                        $scope[propKey] = newVal;
+                                    }
+                                })
+                            })
+                            if (typeof $scope.constructor === "function") {
+                                $scope.constructor();
+                            }
+                        }
+                    },
+                    controller: function ($scope, $element, $attrs) {
+                        $scope.constructor = function () {
+                            console.log($scope);
+                        }
+                    },
+                }
+            })
+            .controller("mainCtrl", function ($scope, $timeout) {
+                $scope.b = true;
+                $scope.c = { a: 1 };
+                $scope.d = ["a"];
+                $scope.e = "1.0002";
+
+                $timeout(function () {
+                    $scope.foo = false;
+                    $scope.c.a = 2;
+                }, 3000)
+            });
+    </script>
+</body>
+
+</html>
 \ No newline at end of file
@@ -12,7 +12,7 @@
     "devDependencies": {
         "@ant-design/icons-svg": "^4.2.1",
         "antd": "^4.18.2",
-        "beanboom": "^0.9.4",
+        "beanboom": "^0.9.7",
         "css-loader": "^6.5.1",
         "html-loader": "^3.0.1",
         "style-loader": "^3.3.1",
 import template from "./BreadcrumbItem.html";
 class BreadcrumbItem {
+    
     useModules = ["esNgAntd"];
     constructor() {
-<div className={'ant-card'+(bordered==="false"?"":" ant-card-bordered")}>
+<div className={'ant-card'+(bordered===false?"":" ant-card-bordered")}>
     {title && <div class="ant-card-head">
         <div class="ant-card-head-wrapper">
             <div class="ant-card-head-title">{title}</div>
             {extra && <div class="ant-card-extra">
-                <antd-slot content="{{extra}}" context="antdCard.getContext().$parent"></antd-slot>
+                <antd-slot content="{{extra}}" context="self.$parent"></antd-slot>
             </div>}
         </div>
     </div>}
@@ -2,24 +2,24 @@ import template from &quot;./Card.html&quot;;
 import style from "antd/lib/card/style/index.css";
 class Card {
-    props = {
-        title: String,
-        extra: String,
-        bordered: Boolean,
-    };
-
-    state = {
-        extra: this.props.extra,
-    };
     useModules = ["esNgAntd"];
-    template = template;
-
-    constructor() {
+    constructor($element) {
         $element[0].removeAttribute("title");
         $element[0].removeAttribute("extra");
         $element[0].removeAttribute("ng-class");
+        this.self = $scope;
         esNgAntd.createStyle("ant-card", style);
     }
+
+    render() {
+        return template;
+    }
 }
+
+Card.propTypes = {
+    title: PropTypes.string,
+    extra: PropTypes.string,
+    bordered: PropTypes.boolean,
+};
 class Slot {
-    props = {
-        content: String,
-        context: Object,
-    };
     useModules = ["$compile"];
-
-    watch = {
-        content: (newValue) => {
-            if (newValue !== undefined) {
-                if (/<[^>]+>/.test(newValue)) {
+    
+    componentDidUpdate(prevProps) {
+        if(prevProps.content !== this.props.content) {
+        	if (newVal !== undefined) {
+                if (/<[^>]+>/.test(newVal)) {
                     $element.replaceWith(
-                        $compile(newValue)(
+                        $compile(newVal)(
                             $scope.context ? $scope.context : $scope
                         )
                     );
                 } else {
-                    $element.text(newValue);
+                    $element.text(newVal);
                 }
             }
-        },
-    };
-    
-    constructor() {
-
+        }
     }
 }
+
+Slot.propTypes = {
+    content: PropTypes.string,
+    context: PropTypes.object,
+};
 \ No newline at end of file
@@ -1320,10 +1320,10 @@ babel-plugin-polyfill-regenerator@^0.2.3:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.2.4"
-beanboom@^0.9.4:
-  version "0.9.4"
-  resolved "https://registry.npmmirror.com/beanboom/-/beanboom-0.9.4.tgz#efde9461228151689a82f88610ce58b80d11369f"
-  integrity sha512-fnz4cE8ZC5Nks8Off/vQTWYfNjLQDfGM34uoNt5+BhK6RlbgIbomQ5g37kXnViTwXrFD6nry7xcowt7wFF5nOw==
+beanboom@^0.9.7:
+  version "0.9.7"
+  resolved "https://registry.npmmirror.com/beanboom/-/beanboom-0.9.7.tgz#095f340d0e38067b492ed1de914552396c63aaf1"
+  integrity sha512-0Gqzaos1EJOajLdLesgb2l4+ZzKbW2OKkXXeV5pUqEfE4PGlKXmmPpzdTP21jtHu1vQCxV8nt+Qql4+2J5YEzg==
   dependencies:
     "@babel/core" "^7.12.10"
     "@babel/plugin-proposal-class-properties" "^7.13.0"