prepare for release

Co-authored-by: langermank <[email protected]>

Author: keithamus

README.md

@@ -1,11 +1,11 @@
-# <custom-element> element
+# <marquee-text> element
 
-Boilerplate for creating a custom element.
+An elemen which scrolls the text inside it like the traditional [marquee](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee) element found in the browsers of yesteryear.
 
 ## Installation
-Available on [npm](https://www.npmjs.com/) as [**@github/custom-element-element**](https://www.npmjs.com/package/@github/custom-element-element).
+Available on [npm](https://www.npmjs.com/) as [**marquee-text-element**](https://www.npmjs.com/package/marquee-text-element).
 ```
-$ npm install --save @github/custom-element-element
+$ npm install --save marquee-text-element
 ```
 
 ## Usage
@@ -15,22 +15,19 @@ $ npm install --save @github/custom-element-element
 Import as ES modules:
 
 ```js
-import '@github/custom-element-element'
+import 'marquee-text-element'
 ```
 
 Include with a script tag:
 
 ```html
-<script type="module" src="./node_modules/@github/custom-element-element/dist/index.js">
+<script type="module" src="./node_modules/marquee-text-element/dist/index.js">
 ```
 
-An example Custom Element. This documentation ends up in the
-README so describe how this elements works here.
-
-You can event add examples on the element is used with Markdown.
-
-```
-<custom-element></custom-element>
+```html
+<marquee-text duration="2s">
+  This text will scroll across the page over 2s
+</marquee-text>
 ```
 
 ## Browser support

custom-elements.json

@@ -4,16 +4,32 @@
   "modules": [
     {
       "kind": "javascript-module",
-      "path": "src/custom-element.ts",
+      "path": "src/marquee-text-element.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "An example Custom Element. This documentation ends up in the\nREADME so describe how this elements works here.\n\nYou can event add examples on the element is used with Markdown.\n\n```\n<custom-element></custom-element>\n```",
-          "name": "CustomElementElement",
+          "description": "```html\n<marquee-text duration=\"2s\">\n  This text will scroll across the page over 2s\n</marquee-text>\n```",
+          "name": "MarqueeTextElement",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#renderRoot",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "duration"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "duration"
+            }
+          ],
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "custom-element",
+          "tagName": "marquee-text",
           "customElement": true
         }
       ],
@@ -22,16 +38,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CustomElementElement",
-            "module": "src/custom-element.ts"
+            "name": "MarqueeTextElement",
+            "module": "src/marquee-text-element.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "custom-element",
+          "name": "marquee-text",
           "declaration": {
-            "name": "CustomElementElement",
-            "module": "src/custom-element.ts"
+            "name": "MarqueeTextElement",
+            "module": "src/marquee-text-element.ts"
           }
         }
       ]

package.json

@@ -1,17 +1,18 @@
 {
-  "name": "@github/custom-element-element",
-  "version": "0.0.1",
-  "description": "Boilerplate for creating a custom element.",
-  "main": "dist/custom-element.js",
-  "module": "dist/custom-element.js",
+  "name": "marquee-text-element",
+  "version": "0.0.0-development",
+  "description": "An elemen which scrolls the text inside it like the traditional [marquee](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee) element found in the browsers of yesteryear.",
+  "main": "dist/marquee-text-element.js",
+  "module": "dist/marquee-text-element.js",
   "type": "module",
-  "types": "dist/custom-elements.d.ts",
+  "types": "dist/marquee-text-elements.d.ts",
   "license": "MIT",
-  "repository": "github/custom-element-boilerplate",
+  "repository": "24webcomponents/marquee-text-element",
   "files": [
     "dist"
   ],
   "scripts": {
+    "meta": "custom-elements-manifest analyze",
     "clean": "rm -rf dist",
     "lint": "eslint . --ext .ts,.js",
     "prebuild": "npm run clean && npm run lint && mkdir dist",

src/marquee-text-element.ts

@@ -1,25 +1,34 @@
+const DEFAULT_DURATION = '5s'
+
+/**
+ * ```html
+ * <marquee-text duration="2s">
+ *   This text will scroll across the page over 2s
+ * </marquee-text>
+ * ```
+ */
 class MarqueeTextElement extends HTMLElement {
   static observedAttributes = ['duration']
 
-  
   #renderRoot = this.attachShadow({mode: 'open'})
 
   get duration() {
     const value = this.getAttribute('duration')
-    return value
+    return value ?? DEFAULT_DURATION
   }
 
   set duration(value: string) {
     this.setAttribute('duration', value)
   }
 
-  attributeChangedCallback(name: 'duration', oldValue: null|string, newValue: null|string) {
+  attributeChangedCallback(name: 'duration', oldValue: null | string, newValue: null | string) {
     if (oldValue === newValue) return
     if (newValue === null) return
     if (newValue) this.style.setProperty('--animation-duration', newValue)
   }
 
   connectedCallback(): void {
+    // eslint-disable-next-line github/no-inner-html
     this.#renderRoot.innerHTML = `
     <style>
       @keyframes marqueeeee {
@@ -31,7 +40,7 @@ class MarqueeTextElement extends HTMLElement {
         }
       }
       :host slot {
-        animation: var(--animation-duration, 5s) linear infinite marqueeeee;
+        animation: var(--animation-duration, ${DEFAULT_DURATION}) linear infinite marqueeeee;
         display: inline-block;
       }
       :host {

test/test.ts

@@ -1,27 +1,16 @@
-import {assert, fixture, html} from '@open-wc/testing'
-import '../src/custom-element'
+import {assert} from '@open-wc/testing'
+import '../src/marquee-text-element'
 
-describe('custom-element', function () {
+describe('marquee-text-element', function () {
   describe('element creation', function () {
     it('creates from document.createElement', function () {
-      const el = document.createElement('custom-element')
-      assert.equal('CUSTOM-ELEMENT', el.nodeName)
+      const el = document.createElement('marquee-text')
+      assert.equal('MARQUEE-TEXT', el.nodeName)
     })
 
     it('creates from constructor', function () {
-      const el = new window.CustomElementElement()
-      assert.equal('CUSTOM-ELEMENT', el.nodeName)
-    })
-  })
-
-  describe('after tree insertion', function () {
-    beforeEach(async function () {
-      await fixture(html` <custom-element></custom-element>`)
-    })
-
-    it('initiates', function () {
-      const ce = document.querySelector('custom-element')
-      assert.equal(ce?.textContent, ':wave:')
+      const el = new window.MarqueeTextElement()
+      assert.equal('MARQUEE-TEXT', el.nodeName)
     })
   })
 })

vscode.css-custom-data.json

@@ -0,0 +1,5 @@
+{
+  "version": 1.1,
+  "properties": [],
+  "pseudoElements": []
+}

vscode.html-custom-data.json

@@ -1,9 +1,10 @@
 {
+  "version": 1.1,
   "tags": [
     {
-      "name": "custom-element",
-      "description": "An example Custom Element. This documentation ends up in the\nREADME so describe how this elements works here.\n\nYou can event add examples on the element is used with Markdown.\n\n```\n<custom-element></custom-element>\n```",
-      "attributes": []
+      "name": "marquee-text",
+      "description": "```html\n<marquee-text duration=\"2s\">\n  This text will scroll across the page over 2s\n</marquee-text>\n```",
+      "attributes": [{ "name": "duration", "values": [] }]
     }
   ]
 }