prepare for release

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

Author: keithamus

README.md

@@ -1,11 +1,11 @@
-# <custom-element> element
+# <blink-text> element
 
-Boilerplate for creating a custom element.
+An element which blinks in and out to try to get the users attention like the traditional blink 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 [**blink-text-element**](https://www.npmjs.com/package/blink-text-element).
 ```
-$ npm install --save @github/custom-element-element
+$ npm install --save blink-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 'blink-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/blink-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
+<blink-text>
+  This text will blink!
+</blink-text>
 ```
 
 ## Browser support

custom-elements.json

@@ -4,16 +4,23 @@
   "modules": [
     {
       "kind": "javascript-module",
-      "path": "src/custom-element.ts",
+      "path": "src/blink-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<blink-text>\n  This text will blink!\n</blink-text>\n```",
+          "name": "BlinkTextElement",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#renderRoot",
+              "privacy": "private"
+            }
+          ],
           "superclass": {
             "name": "HTMLElement"
           },
-          "tagName": "custom-element",
+          "tagName": "blink-text",
           "customElement": true
         }
       ],
@@ -22,16 +29,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CustomElementElement",
-            "module": "src/custom-element.ts"
+            "name": "BlinkTextElement",
+            "module": "src/blink-text-element.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "custom-element",
+          "name": "blink-text",
           "declaration": {
-            "name": "CustomElementElement",
-            "module": "src/custom-element.ts"
+            "name": "BlinkTextElement",
+            "module": "src/blink-text-element.ts"
           }
         }
       ]

package.json

@@ -1,26 +1,26 @@
 {
-  "name": "@github/custom-element-element",
+  "name": "blink-text-element",
   "version": "0.0.1",
-  "description": "Boilerplate for creating a custom element.",
-  "main": "dist/custom-element.js",
-  "module": "dist/custom-element.js",
+  "description": "An element which blinks in and out to try to get the users attention like the traditional blink element found in the browsers of yesteryear",
+  "main": "dist/blink-text-element.js",
+  "module": "dist/blink-text-element.js",
   "type": "module",
-  "types": "dist/custom-elements.d.ts",
+  "types": "dist/blink-text-elements.d.ts",
   "license": "MIT",
-  "repository": "github/custom-element-boilerplate",
+  "repository": "24webcomponents/blink-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",
     "build": "tsc",
     "pretest": "npm run build",
     "test": "web-test-runner \"test/**/*\" --node-resolve",
     "start": "web-dev-server --node-resolve --open --watch --app-index=examples/index.html --root-dir=. --esbuild-target auto",
-    "prepublishOnly": "npm run build",
-    "postpublish": "npm publish --ignore-scripts --@github:registry='https://npm.pkg.github.com'"
+    "prepublishOnly": "npm run build"
   },
   "prettier": "@github/prettier-config",
   "devDependencies": {

src/blink-text-element.ts

@@ -1,7 +1,15 @@
+/**
+ * ```html
+ * <blink-text>
+ *   This text will blink!
+ * </blink-text>
+ * ```
+ */
 class BlinkTextElement extends HTMLElement {
   #renderRoot = this.attachShadow({mode: 'open'})
 
   connectedCallback(): void {
+    // eslint-disable-next-line github/no-inner-html
     this.#renderRoot.innerHTML = `
     <style>
       :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/blink-text-element'
 
-describe('custom-element', function () {
+describe('blink-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('blink-text')
+      assert.equal('BLINK-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.BlinkTextElement()
+      assert.equal('BLINK-TEXT', el.nodeName)
     })
   })
 })

vscode.css-custom-data.json

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

vscode.html-custom-data.json

@@ -1,8 +1,9 @@
 {
+  "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```",
+      "name": "blink-text",
+      "description": "```html\n<blink-text>\n  This text will blink!\n</blink-text>\n```",
       "attributes": []
     }
   ]