Merge pull request #133 from umbraco/feature/rollup-hbs-update

Add new package format to plop templates

Author: iOvergaard

plopfile.js

@@ -79,6 +79,11 @@ module.exports = function (plop) {
         path: './packages/{{> tagnamePartial }}/package.json',
         templateFile: './templates/plop-templates/package.json.hbs',
       },
+      {
+        type: 'append',
+        path: './packages/uui/lib/index.ts',
+        template: "import '@umbraco-ui/{{> tagnamePartial }}/lib';",
+      },
     ],
   });
 };

templates/plop-templates/README.md.hbs

@@ -15,13 +15,13 @@ npm i @umbraco-ui/{{> tagnamePartial}}
 Import the registration of `<{{> tagnamePartial}}>` via:
 
 ```javascript
-import '@umbraco-ui/{{> tagnamePartial}}/lib';
+import '@umbraco-ui/{{> tagnamePartial}}';
 ```
 
 When looking to leverage the `{{className name}}` base class as a type and/or for extension purposes, do so via:
 
 ```javascript
-import { {{className name}} } from '@umbraco-ui/{{> tagnamePartial}}/lib';
+import { {{className name}} } from '@umbraco-ui/{{> tagnamePartial}}';
 ```
 
 ## Usage

templates/plop-templates/component.ts.hbs

@@ -1,8 +1,10 @@
-import { LitElement, html, css } from 'lit';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { css, html, LitElement } from 'lit';
 
 /**
  * @element {{> tagnamePartial }}
  */
+@defineElement('{{> tagnamePartial }}')
 export class {{className name}} extends LitElement {
       static styles = [
     css`
@@ -17,4 +19,10 @@ export class {{className name}} extends LitElement {
             Markup goes here
         `;
     }
-}
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    '{{> tagnamePartial }}': {{className name}} ;
+  }
+}

templates/plop-templates/index.ts.hbs

@@ -1,6 +1 @@
-import { {{ className name }} } from './{{> tagnamePartial }}.element';
-import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-
-defineElement('{{> tagnamePartial }}', {{ className name }});
-
 export * from './{{> tagnamePartial }}.element';

templates/plop-templates/package.json.hbs

@@ -19,11 +19,12 @@
   "bugs": {
     "url": "https://github.com/umbraco/Umbraco.UI/issues"
   },
-  "main": "./dist/{{> tagnamePartial }}.min.js",
+  "main": "./lib/index.js",
   "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "type": "module",
   "customElements": "custom-elements.json",
   "files": [
-    "dist",
     "lib/**/*.d.ts",
     "lib/**/*.js",
     "custom-elements.json"

templates/plop-templates/test.ts.hbs

@@ -11,6 +11,10 @@ describe('{{className name}}', () => {
     );
   });
 
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf({{className name}});
+  });
+
   it('passes the a11y audit', async () => {
     await expect(element).shadowDom.to.be.accessible();
   });