stencil

Author: mrginglymus

libraries/stencil/src/basic-tests.js

@@ -129,6 +129,19 @@ describe("basic support", function () {
       expect(data).to.eql("Stencil");
     });
   });
+  describe('without properties', function () {
+    it("will not overwrite unwriteable properties", async function () {
+      this.weight = 3;
+      let root = document.createElement('component-without-properties');
+      scratch.appendChild(root);
+      await waitForRender(root);
+      let wc = root.shadowRoot.querySelector("#wc");
+      expect(wc.getAttribute('amethod')).to.eql('method');
+      expect(wc.getAttribute('agetter')).to.eql('getter');
+      expect(wc.getAttribute('areadonly')).to.eql('readonly');
+      expect(wc.innerHTML).to.eql('Success');
+    });
+  });
 
   describe("events", function () {
     it("can imperatively listen to a DOM event dispatched by a Custom Element", async function () {

libraries/stencil/src/components.d.ts

@@ -35,6 +35,8 @@ export namespace Components {
     }
     interface ComponentWithoutChildren {
     }
+    interface ComponentWithoutProperties {
+    }
 }
 declare global {
     interface HTMLComponentWithChildrenElement extends Components.ComponentWithChildren, HTMLStencilElement {
@@ -79,6 +81,12 @@ declare global {
         prototype: HTMLComponentWithoutChildrenElement;
         new (): HTMLComponentWithoutChildrenElement;
     };
+    interface HTMLComponentWithoutPropertiesElement extends Components.ComponentWithoutProperties, HTMLStencilElement {
+    }
+    var HTMLComponentWithoutPropertiesElement: {
+        prototype: HTMLComponentWithoutPropertiesElement;
+        new (): HTMLComponentWithoutPropertiesElement;
+    };
     interface HTMLElementTagNameMap {
         "component-with-children": HTMLComponentWithChildrenElement;
         "component-with-children-rerender": HTMLComponentWithChildrenRerenderElement;
@@ -87,6 +95,7 @@ declare global {
         "component-with-imperative-event": HTMLComponentWithImperativeEventElement;
         "component-with-properties": HTMLComponentWithPropertiesElement;
         "component-without-children": HTMLComponentWithoutChildrenElement;
+        "component-without-properties": HTMLComponentWithoutPropertiesElement;
     }
 }
 declare namespace LocalJSX {
@@ -118,6 +127,8 @@ declare namespace LocalJSX {
     }
     interface ComponentWithoutChildren {
     }
+    interface ComponentWithoutProperties {
+    }
     interface IntrinsicElements {
         "component-with-children": ComponentWithChildren;
         "component-with-children-rerender": ComponentWithChildrenRerender;
@@ -126,6 +137,7 @@ declare namespace LocalJSX {
         "component-with-imperative-event": ComponentWithImperativeEvent;
         "component-with-properties": ComponentWithProperties;
         "component-without-children": ComponentWithoutChildren;
+        "component-without-properties": ComponentWithoutProperties;
     }
 }
 export { LocalJSX as JSX };
@@ -139,6 +151,7 @@ declare module "@stencil/core" {
             "component-with-imperative-event": LocalJSX.ComponentWithImperativeEvent & JSXBase.HTMLAttributes<HTMLComponentWithImperativeEventElement>;
             "component-with-properties": LocalJSX.ComponentWithProperties & JSXBase.HTMLAttributes<HTMLComponentWithPropertiesElement>;
             "component-without-children": LocalJSX.ComponentWithoutChildren & JSXBase.HTMLAttributes<HTMLComponentWithoutChildrenElement>;
+            "component-without-properties": LocalJSX.ComponentWithoutProperties & JSXBase.HTMLAttributes<HTMLComponentWithoutPropertiesElement>;
         }
     }
 }

libraries/stencil/src/components.js

@@ -1,13 +1,15 @@
 import "ce-without-children";
 import "ce-with-children";
 import "ce-with-properties";
+import "ce-without-properties";
 import "ce-with-event";
 import { ComponentWithChildren } from "../dist/components/component-with-children.js";
 import { ComponentWithChildrenRerender } from "../dist/components/component-with-children-rerender.js";
 import { ComponentWithDeclarativeEvent } from "../dist/components/component-with-declarative-event.js";
 import { ComponentWithDifferentViews } from "../dist/components/component-with-different-views.js";
 import { ComponentWithImperativeEvent } from "../dist/components/component-with-imperative-event.js";
 import { ComponentWithProperties } from "../dist/components/component-with-properties.js";
+import { ComponentWithoutProperties } from "../dist/components/component-without-properties.js";
 import { ComponentWithoutChildren } from "../dist/components/component-without-children.js";
 
 customElements.define("component-without-children", ComponentWithoutChildren);
@@ -29,3 +31,4 @@ customElements.define(
   ComponentWithDeclarativeEvent
 );
 customElements.define("component-with-properties", ComponentWithProperties);
+customElements.define('component-without-properties', ComponentWithoutProperties);

libraries/stencil/src/components/component-without-properties/component-without-properties.tsx

@@ -0,0 +1,26 @@
+import { Component, Host, h } from "@stencil/core";
+
+@Component({
+  tag: "component-without-properties",
+  shadow: true
+})
+export class ComponentWithoutProperties {
+
+  render() {
+    const data = {
+      getter: 'getter',
+      method: 'method',
+      readonly: 'readonly'
+    }
+    return (
+      <Host>
+        <ce-without-properties
+          id="wc"
+          amethod={data.method}
+          agetter={data.getter}
+          areadonly={data.readonly}
+        ></ce-without-properties>
+      </Host>
+    );
+  }
+}