chore: code generator for new elements

Author: urish

.hygen.js

@@ -0,0 +1,7 @@
+const { classify } = require('inflection');
+
+module.exports = {
+  helpers: {
+    className: s => classify(s.replace(/[- ]/g, '_'))
+  }
+};

_templates/element/help/index.ejs.t

@@ -0,0 +1,4 @@
+---
+message: |
+  hygen {bold element new} --name [NAME]
+---

_templates/element/new/element.stories.ts.t

@@ -0,0 +1,18 @@
+---
+to: src/<%= name %>-element.stories.ts
+---
+import { withKnobs, number } from '@storybook/addon-knobs';
+import { storiesOf } from '@storybook/web-components';
+import { html } from 'lit-html';
+import './<%= name %>-element';
+
+storiesOf('<%= h.changeCase.title(h.className(name)) %>', module)
+  .addDecorator(withKnobs)
+  .add(
+    'Default',
+    () => html`
+      <wokwi-<%= name %>
+        value=${number('value', 5, { min: 1, max: 10 })}
+      ></wokwi-<%= name %>>
+    `
+  );

_templates/element/new/element.ts.t

@@ -0,0 +1,24 @@
+---
+to: src/<%= name %>-element.ts
+---
+import { customElement, html, LitElement, property, svg } from 'lit-element';
+
+@customElement('wokwi-<%= name %>')
+export class <%= h.className(name) %>Element extends LitElement {
+  @property() value = 0;
+
+  render() {
+    const { value } = this;
+    return html`
+      <svg
+        width="40mm"
+        height="25mm"
+        version="1.1"
+        viewBox="0 0 40 25"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="20" cy="12.5" r="${value}" fill="red" stroke="blue" />
+      </svg>
+    `;
+  }
+}

_templates/element/new/index.ts.t

@@ -0,0 +1,7 @@
+---
+to: src/index.ts
+inject: true
+skip_if: <%= h.className(name) %>Element
+append: true
+---
+export { <%= h.className(name) %>Element } from './<%= name %>-element';