Added more WC in tests + more robustness

custom-widget-builder/src/CustomWidgetBuilder.ts

@@ -81,12 +81,14 @@ export class CustomWidgetBuilder {
   }
 
   private static getProperties(props: any): Array<Property> {
+    if (!props) {
+      return [];
+    }
     let properties: Array<Property> = [];
     for (let prop of props) {
-       if (!prop.type) {
-         // No type: potentially not a property, or we can't do anything with it...
-         continue;
-       }
+      if (this.propToExclude(prop.name)) {
+        continue;
+      }
       let customTagHandler;
       let help;
       if (prop.description) {
@@ -150,6 +152,9 @@ export class CustomWidgetBuilder {
     // string -> text
     // e,g, number | undefined -> number
 
+    if (!wcType) {
+      return wcType;
+    }
     wcType = wcType.replace(" | undefined","");
 
     switch (wcType) {
@@ -183,6 +188,11 @@ export class CustomWidgetBuilder {
       .toLowerCase();
   }
 
+  private static propToExclude(propName: string) {
+    // "styles" is a reserves word for css with lit-element
+    let toExclude = ["styles"];
+    return toExclude.indexOf(propName) > -1;
+  }
 }
 
 

custom-widget-builder/test/CustomWidgetBuilder.test.ts

@@ -88,6 +88,31 @@ describe('CustomWidgetBuilder', () => {
     handleSimpleWC("WcExample2.js");
   });
 
+  test('should generate a correct json file when a standard web component is given as input', async () => {
+    // Standard web component (i.e. extending HTMLElement)
+    builder.generatePropertiesFile("test/resources/app-drawer.js", tempDir);
+    let generatedFile = tempDir + "/appDrawer.json";
+    expect(fs.existsSync(generatedFile)).toBeTruthy();
+
+    let jsonProperties = JSON.parse(fs.readFileSync(generatedFile, 'utf8'));
+    // General info
+    expect(jsonProperties.id).toBe("appDrawer");
+    expect(jsonProperties.name).toBe("AppDrawer");
+    expect(jsonProperties.properties.length).toBe(2);
+
+    // Properties
+    let props = jsonProperties.properties;
+
+    let open = props.filter((prop: any) => {
+      return prop.name === "open"
+    })[0];
+    expect(open.label).toBe("Open");
+    let disabled = props.filter((prop: any) => {
+      return prop.name === "disabled"
+    })[0];
+    expect(disabled.label).toBe("Disabled");
+  });
+
   function handleSimpleWC(wcFilename: string) {
     let wcNameUppercase = wcFilename.substring(0, wcFilename.indexOf("."));
     let wcNameLowercase = wcNameUppercase.charAt(0).toLowerCase() + wcNameUppercase.slice(1);

custom-widget-builder/test/resources/app-drawer.js

+class AppDrawer extends HTMLElement {
+
+    // A getter/setter for an open property.
+    get open() {
+        return this.hasAttribute('open');
+    }
+
+    set open(val) {
+        // Reflect the value of the open property as an HTML attribute.
+        if (val) {
+            this.setAttribute('open', '');
+        } else {
+            this.removeAttribute('open');
+        }
+        this.toggleDrawer();
+    }
+
+    // A getter/setter for a disabled property.
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+
+    set disabled(val) {
+        // Reflect the value of the disabled property as an HTML attribute.
+        if (val) {
+            this.setAttribute('disabled', '');
+        } else {
+            this.removeAttribute('disabled');
+        }
+    }
+
+    // Can define constructor arguments if you wish.
+    constructor() {
+        // If you define a constructor, always call super() first!
+        // This is specific to CE and required by the spec.
+        super();
+
+        // Setup a click listener on <app-drawer> itself.
+        this.addEventListener('click', e => {
+            // Don't toggle the drawer if it's disabled.
+            if (this.disabled) {
+                return;
+            }
+            this.toggleDrawer();
+        });
+    }
+
+    toggleDrawer() {
+    // ...
+    }
+}
+
+customElements.define('app-drawer', AppDrawer);

custom-widget-builder/test/resources/lightning-simple.js

+import { LightningElement } from 'lwc';
+
+/**
+ * Simple component.
+ */
+export default class C1 extends LightningElement {
+}

custom-widget-builder/test/resources/word-count.js

+// Create a class for the element
+class WordCount extends HTMLParagraphElement {
+    constructor() {
+        // Always call super first in constructor
+        super();
+
+        // count words in element's parent element
+        const wcParent = this.parentNode;
+
+        function countWords(node){
+            const text = node.innerText || node.textContent;
+            return text.split(/\s+/g).length;
+        }
+
+        const count = `Words: ${countWords(wcParent)}`;
+
+        // Create a shadow root
+        const shadow = this.attachShadow({mode: 'open'});
+
+        // Create text node and add word count to it
+        const text = document.createElement('span');
+        text.textContent = count;
+
+        // Append it to the shadow root
+        shadow.appendChild(text);
+
+        // Update count when element content changes
+        setInterval(function() {
+            const count = `Words: ${countWords(wcParent)}`;
+            text.textContent = count;
+        }, 200);
+    }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });

custom-widget-builder/tsconfig.json

@@ -59,5 +59,5 @@
     // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
   },
-  "exclude": ["test/resources/*"]
+  "exclude": ["test/resources"]
 }