Merge pull request #67 from github/upgrade-to-new-web-component-standards

upgrade to new web component standards
This commit is contained in:
Keith Cirkel 2023-06-08 15:20:13 +01:00 коммит произвёл GitHub
Родитель 4e3b7ce1ee ed54c116e8
Коммит f70862f173
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
14 изменённых файлов: 9401 добавлений и 3886 удалений

Просмотреть файл

@ -1,26 +1,41 @@
{
"root": true,
"extends": [
"plugin:github/recommended",
"plugin:github/browser",
"plugin:github/typescript"
"plugin:github/recommended",
"plugin:github/typescript",
"plugin:custom-elements/recommended"
],
"globals": {
"ClipboardCopyElement": "readable"
"rules": {
"custom-elements/tag-name-matches-class": [
"error",
{
"suffix": "Element"
}
],
"custom-elements/define-tag-after-class-definition": "off",
"custom-elements/no-method-prefixed-with-on": "off",
"custom-elements/expose-class-on-global": "off",
"import/extensions": ["error", "always"],
"import/no-unresolved": "off"
},
"overrides": [
{
"files": "test/**/*.js",
"env": {
"mocha": true
},
"globals": {
"assert": true
"files": "src/*-define.ts",
"rules": {
"@typescript-eslint/no-namespace": "off"
}
},
{
"files": "*.js",
"parser": "espree",
"parserOptions": {"ecmaVersion": 8}
"files": "test/**/*.js",
"rules": {
"github/unescaped-html-literal": "off",
"github/no-inner-html": "off",
"i18n-text/no-en": "off"
},
"env": {
"mocha": true
}
}
]
}

24
.github/workflows/nodejs.yml поставляемый
Просмотреть файл

@ -5,15 +5,15 @@ jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Use Node.js 12.x
uses: actions/setup-node@v1
with:
node-version: 12.x
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
npm test
env:
CI: true
- uses: actions/checkout@v2
- name: Use Node.js 18.x
uses: actions/setup-node@v1
with:
node-version: 18.x
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
npm test
env:
CI: true

2
.github/workflows/publish.yml поставляемый
Просмотреть файл

@ -11,7 +11,7 @@ jobs:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 14
node-version: 18
registry-url: https://registry.npmjs.org/
cache: npm
- run: npm ci

349
custom-elements.json Normal file
Просмотреть файл

@ -0,0 +1,349 @@
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "dist/bundle.js",
"declarations": [
{
"kind": "variable",
"name": "ClipboardCopyElement",
"default": "class extends HTMLElement {\n static define(tag = \"clipboard-copy\", registry = customElements) {\n registry.define(tag, this);\n return this;\n }\n constructor() {\n super();\n this.addEventListener(\"click\", clicked);\n this.addEventListener(\"focus\", focused);\n this.addEventListener(\"blur\", blurred);\n }\n connectedCallback() {\n if (!this.hasAttribute(\"tabindex\")) {\n this.setAttribute(\"tabindex\", \"0\");\n }\n if (!this.hasAttribute(\"role\")) {\n this.setAttribute(\"role\", \"button\");\n }\n }\n get value() {\n return this.getAttribute(\"value\") || \"\";\n }\n set value(text) {\n this.setAttribute(\"value\", text);\n }\n}"
},
{
"kind": "variable",
"name": "dist_default",
"default": "ClipboardCopyElement"
}
],
"exports": [
{
"kind": "js",
"name": "ClipboardCopyElement",
"declaration": {
"name": "ClipboardCopyElement",
"module": "dist/bundle.js"
}
},
{
"kind": "js",
"name": "default",
"declaration": {
"name": "dist_default",
"module": "dist/bundle.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/clipboard-copy-element-define.js",
"declarations": [],
"exports": [
{
"kind": "js",
"name": "default",
"declaration": {
"name": "ClipboardCopyElement",
"module": "dist/clipboard-copy-element-define.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./clipboard-copy-element.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/clipboard-copy-element.js",
"declarations": [
{
"kind": "class",
"description": "",
"name": "ClipboardCopyElement",
"members": [
{
"kind": "method",
"name": "define",
"static": true,
"parameters": [
{
"name": "tag",
"default": "'clipboard-copy'"
},
{
"name": "registry",
"default": "customElements"
}
]
},
{
"kind": "field",
"name": "value"
}
],
"superclass": {
"name": "HTMLElement"
},
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "ClipboardCopyElement",
"declaration": {
"name": "ClipboardCopyElement",
"module": "dist/clipboard-copy-element.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/clipboard.js",
"declarations": [
{
"kind": "function",
"name": "copyNode",
"parameters": [
{
"name": "node"
}
]
},
{
"kind": "function",
"name": "copyText",
"parameters": [
{
"name": "text"
}
]
}
],
"exports": [
{
"kind": "js",
"name": "copyNode",
"declaration": {
"name": "copyNode",
"module": "dist/clipboard.js"
}
},
{
"kind": "js",
"name": "copyText",
"declaration": {
"name": "copyText",
"module": "dist/clipboard.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "dist/index.js",
"declarations": [],
"exports": [
{
"kind": "js",
"name": "ClipboardCopyElement",
"declaration": {
"name": "ClipboardCopyElement",
"module": "dist/index.js"
}
},
{
"kind": "js",
"name": "default",
"declaration": {
"name": "ClipboardCopyElement",
"module": "dist/index.js"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./clipboard-copy-element-define.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/clipboard-copy-element-define.ts",
"declarations": [],
"exports": [
{
"kind": "js",
"name": "default",
"declaration": {
"name": "ClipboardCopyElement",
"module": "src/clipboard-copy-element-define.ts"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./clipboard-copy-element.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/clipboard-copy-element.ts",
"declarations": [
{
"kind": "class",
"description": "",
"name": "ClipboardCopyElement",
"members": [
{
"kind": "method",
"name": "define",
"static": true,
"parameters": [
{
"name": "tag",
"default": "'clipboard-copy'"
},
{
"name": "registry",
"default": "customElements"
}
]
},
{
"kind": "field",
"name": "value",
"type": {
"text": "string"
}
}
],
"superclass": {
"name": "HTMLElement"
},
"customElement": true
}
],
"exports": [
{
"kind": "js",
"name": "ClipboardCopyElement",
"declaration": {
"name": "ClipboardCopyElement",
"module": "src/clipboard-copy-element.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/clipboard.ts",
"declarations": [
{
"kind": "function",
"name": "copyNode",
"return": {
"type": {
"text": "Promise<void>"
}
},
"parameters": [
{
"name": "node",
"type": {
"text": "Element"
}
}
]
},
{
"kind": "function",
"name": "copyText",
"return": {
"type": {
"text": "Promise<void>"
}
},
"parameters": [
{
"name": "text",
"type": {
"text": "string"
}
}
]
}
],
"exports": [
{
"kind": "js",
"name": "copyNode",
"declaration": {
"name": "copyNode",
"module": "src/clipboard.ts"
}
},
{
"kind": "js",
"name": "copyText",
"declaration": {
"name": "copyText",
"module": "src/clipboard.ts"
}
}
]
},
{
"kind": "javascript-module",
"path": "src/index.ts",
"declarations": [],
"exports": [
{
"kind": "js",
"name": "ClipboardCopyElement",
"declaration": {
"name": "ClipboardCopyElement",
"module": "src/index.ts"
}
},
{
"kind": "js",
"name": "default",
"declaration": {
"name": "ClipboardCopyElement",
"module": "src/index.ts"
}
},
{
"kind": "js",
"name": "*",
"declaration": {
"name": "*",
"package": "./clipboard-copy-element-define.js"
}
}
]
},
{
"kind": "javascript-module",
"path": "test/test.js",
"declarations": [],
"exports": []
}
]
}

12707
package-lock.json сгенерированный

Разница между файлами не показана из-за своего большого размера Загрузить разницу

Просмотреть файл

@ -7,15 +7,24 @@
"type": "module",
"module": "dist/index.js",
"types": "dist/index.d.ts",
"exports": {
".": "./dist/index.js",
"./define": "./dist/index.js",
"./relative-time": "./dist/relative-time-element.js",
"./relative-time/define": "./dist/relative-time-element-define.js"
},
"scripts": {
"clean": "rm -rf dist",
"lint": "eslint . --ext .js,.ts && tsc --noEmit",
"prebuild": "npm run clean && npm run lint",
"build": "tsc && rollup -c",
"pretest": "npm run build",
"test": "karma start test/karma.config.cjs",
"lint:fix": "npm run lint -- --fix",
"prebuild": "npm run clean && npm run lint && mkdir dist",
"bundle": "esbuild --bundle dist/index.js --keep-names --outfile=dist/bundle.js --format=esm",
"build": "tsc && npm run bundle && npm run manifest",
"prepublishOnly": "npm run build",
"postpublish": "npm publish --ignore-scripts --@github:registry='https://npm.pkg.github.com'"
"pretest": "npm run build",
"test": "web-test-runner",
"postpublish": "npm publish --ignore-scripts --@github:registry='https://npm.pkg.github.com'",
"manifest": "custom-elements-manifest analyze"
},
"keywords": [
"clipboard"
@ -26,11 +35,18 @@
],
"prettier": "@github/prettier-config",
"devDependencies": {
"@github/prettier-config": "0.0.4",
"@custom-elements-manifest/analyzer": "^0.8.3",
"@github/prettier-config": "^0.0.6",
"@open-wc/testing": "^3.1.8",
"@web/dev-server-esbuild": "^0.4.1",
"@web/test-runner": "^0.16.1",
"@web/test-runner-playwright": "^0.10.0",
"chai": "^4.2.0",
"chromium": "^3.0.3",
"eslint": "^6.8.0",
"eslint-plugin-github": "^4.0.0",
"esbuild": "^0.17.19",
"eslint": "^8.42.0",
"eslint-plugin-custom-elements": "^0.0.8",
"eslint-plugin-github": "^4.8.0",
"karma": "^6.3.16",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^3.1.0",
@ -38,9 +54,10 @@
"karma-mocha-reporter": "^2.2.5",
"mocha": "^10.1.0",
"rollup": "^1.32.1",
"typescript": "^3.9.3"
"typescript": "^5.1.3"
},
"eslintIgnore": [
"dist/"
]
],
"customElements": "custom-elements.json"
}

Просмотреть файл

@ -1,11 +0,0 @@
import pkg from './package.json'
export default {
input: 'dist/index.js',
output: [
{
file: pkg['module'],
format: 'es'
}
]
}

Просмотреть файл

@ -0,0 +1,33 @@
import {ClipboardCopyElement} from './clipboard-copy-element.js'
const root = (typeof globalThis !== 'undefined' ? globalThis : window) as typeof window
try {
root.ClipboardCopyElement = ClipboardCopyElement.define()
} catch (e: unknown) {
if (
!(root.DOMException && e instanceof DOMException && e.name === 'NotSupportedError') &&
!(e instanceof ReferenceError)
) {
throw e
}
}
type JSXBase = JSX.IntrinsicElements extends {span: unknown}
? JSX.IntrinsicElements
: Record<string, Record<string, unknown>>
declare global {
interface Window {
ClipboardCopyElement: typeof ClipboardCopyElement
}
interface HTMLElementTagNameMap {
'clipboard-copy': ClipboardCopyElement
}
namespace JSX {
interface IntrinsicElements {
['clipboard-copy']: JSXBase['span'] & Partial<Omit<ClipboardCopyElement, keyof HTMLElement>>
}
}
}
export default ClipboardCopyElement
export * from './clipboard-copy-element.js'

Просмотреть файл

@ -1,4 +1,4 @@
import {copyNode, copyText} from './clipboard'
import {copyNode, copyText} from './clipboard.js'
async function copy(button: HTMLElement) {
const id = button.getAttribute('for')
@ -57,7 +57,13 @@ function blurred(event: FocusEvent) {
;(event.currentTarget as HTMLElement).removeEventListener('keydown', keydown)
}
export default class ClipboardCopyElement extends HTMLElement {
export class ClipboardCopyElement extends HTMLElement {
static define(tag = 'clipboard-copy', registry = customElements) {
registry.define(tag, this)
return this
}
// eslint-disable-next-line custom-elements/no-constructor
constructor() {
super()
this.addEventListener('click', clicked)

Просмотреть файл

@ -1,17 +1,6 @@
import ClipboardCopyElement from './clipboard-copy-element'
import {ClipboardCopyElement} from './clipboard-copy-element.js'
export {ClipboardCopyElement}
export default ClipboardCopyElement
declare global {
interface Window {
ClipboardCopyElement: typeof ClipboardCopyElement
}
interface HTMLElementTagNameMap {
'clipboard-copy': ClipboardCopyElement
}
}
if (!window.customElements.get('clipboard-copy')) {
window.ClipboardCopyElement = ClipboardCopyElement
window.customElements.define('clipboard-copy', ClipboardCopyElement)
}
export * from './clipboard-copy-element-define.js'

Просмотреть файл

@ -1,16 +0,0 @@
process.env.CHROME_BIN = require('chromium').path
module.exports = function (config) {
config.set({
frameworks: ['mocha', 'chai'],
files: [{pattern: '../dist/index.js', type: 'module'}, 'test.js'],
reporters: ['mocha'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
browsers: ['ChromeHeadless'],
autoWatch: false,
singleRun: true,
concurrency: Infinity
})
}

Просмотреть файл

@ -1,8 +1,12 @@
import {assert} from '@open-wc/testing'
import {ClipboardCopyElement} from '../src/index.ts'
describe('clipboard-copy element', function () {
describe('element creation', function () {
it('creates from document.createElement', function () {
const el = document.createElement('clipboard-copy')
assert.equal('CLIPBOARD-COPY', el.nodeName)
assert(el instanceof ClipboardCopyElement)
assert(el instanceof window.ClipboardCopyElement)
})
@ -51,11 +55,13 @@ describe('clipboard-copy element', function () {
writeText(text) {
copiedText = text
return Promise.resolve()
}
},
})
whenCopied = new Promise(resolve => {
document.addEventListener('clipboard-copy', () => resolve(copiedText), {once: true})
document.addEventListener('clipboard-copy', () => resolve(copiedText), {
once: true,
})
})
})
@ -169,7 +175,7 @@ describe('clipboard-copy element', function () {
writeText(text) {
copiedText = text
return Promise.resolve()
}
},
})
whenCopied = new Promise(resolve => {
@ -198,6 +204,6 @@ function defineClipboard(customClipboard) {
configurable: true,
get() {
return customClipboard
}
},
})
}

Просмотреть файл

@ -1,13 +1,13 @@
{
"compilerOptions": {
"module": "esnext",
"module": "es2020",
"target": "es2017",
"strict": true,
"moduleResolution": "node",
"declaration": true,
"outDir": "dist",
"lib": ["dom", "dom.iterable", "es2020"],
"removeComments": true
},
"files": [
"src/index.ts"
]
"files": ["src/index.ts"]
}

18
web-test-runner.config.js Normal file
Просмотреть файл

@ -0,0 +1,18 @@
import {esbuildPlugin} from '@web/dev-server-esbuild'
import {playwrightLauncher} from '@web/test-runner-playwright'
const browser = product =>
playwrightLauncher({
product,
})
export default {
files: ['test/*'],
nodeResolve: true,
plugins: [esbuildPlugin({ts: true, target: 'es2020'})],
browsers: [browser('chromium')],
testFramework: {
config: {
timeout: 1000,
},
},
}