Add custom element with method

Author: mrginglymus

libraries/__shared__/webcomponents/src/ce-with-methods.js

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+class CEWithMethods extends HTMLElement {
+
+    test() {
+        this.innerText = 'Success';
+    }
+
+    connectedCallback() {
+        this.test();
+    }
+
+}
+
+customElements.define('ce-with-methods', CEWithMethods);

libraries/angular/src/basic-tests.js

@@ -27,7 +27,8 @@ import {
   ComponentWithProperties,
   ComponentWithUnregistered,
   ComponentWithImperativeEvent,
-  ComponentWithDeclarativeEvent
+  ComponentWithDeclarativeEvent,
+  ComponentWithMethods
 } from "./components";
 
 beforeEach(function() {
@@ -40,7 +41,8 @@ beforeEach(function() {
       ComponentWithProperties,
       ComponentWithUnregistered,
       ComponentWithImperativeEvent,
-      ComponentWithDeclarativeEvent
+      ComponentWithDeclarativeEvent,
+      ComponentWithMethods
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
   });
@@ -146,6 +148,13 @@ describe("basic support", function() {
       let data = wc.str || wc.getAttribute("str");
       expect(data).to.eql("Angular");
     });
+
+    it('will not overwrite methods', function () {
+      let fixture = TestBed.createComponent(ComponentWithMethods);
+      fixture.detectChanges();
+      let root = fixture.debugElement.nativeElement;
+      expect(root.innerText).to.eql('Success')
+    });
   });
 
   describe("events", function() {

libraries/angular/src/components.ts

@@ -27,6 +27,7 @@ import 'ce-without-children';
 import 'ce-with-children';
 import 'ce-with-properties';
 import 'ce-with-event';
+import 'ce-with-methods';
 
 @Component({
   template: `
@@ -105,6 +106,15 @@ export class ComponentWithProperties {
   }
 }
 
+@Component({
+  template: `
+    <div>
+      <ce-with-methods [test]="true"></ce-with-methods>
+    </div>
+  `
+})
+export class ComponentWithMethods {}
+
 @Component({
   template: `
     <div>

libraries/react/src/basic-tests.js

@@ -29,6 +29,7 @@ import {
   ComponentWithUnregistered,
   ComponentWithImperativeEvent,
   ComponentWithDeclarativeEvent,
+  ComponentWithMethods,
 } from "./components";
 
 // Setup the test harness. This will get cleaned out with every test.
@@ -198,6 +199,19 @@ describe("basic support", function () {
       expect(data).to.eql("React");
     });
 
+    it('will not overwrite methods', function () {
+      let root;
+      render(
+        <ComponentWithMethods
+          ref={(current) => {
+            root = current;
+          }}
+        />
+      )
+      let wc = root.wc;
+      expect(wc.innerText).to.eql('Success');
+    })
+
     // TODO: Is it the framework's responsibility to check if the underlying
     // property is defined? Or should it just always assume it is and do its
     // usual default behavior? Preact will actually check if it's defined and

libraries/react/src/components.js

@@ -20,6 +20,7 @@ import 'ce-without-children';
 import 'ce-with-children';
 import 'ce-with-properties';
 import 'ce-with-event';
+import 'ce-with-methods';
 
 export class ComponentWithoutChildren extends Component {
   render() {
@@ -110,6 +111,14 @@ export class ComponentWithProperties extends Component {
   }
 }
 
+export class ComponentWithMethods extends Component {
+  render() {
+    return <div>
+      <ce-with-methods test ref={(el) => this.wc = el}></ce-with-methods>
+    </div>
+  }
+}
+
 export class ComponentWithUnregistered extends Component {
   render () {
     const data = {