Merge pull request #67 from github/upgrade-to-new-web-component-standards
upgrade to new web component standards
This commit is contained in:
Коммит
f70862f173
|
@ -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
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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": []
|
||||
}
|
||||
]
|
||||
}
|
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
37
package.json
37
package.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)
|
||||
|
|
17
src/index.ts
17
src/index.ts
|
@ -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
|
||||
})
|
||||
}
|
14
test/test.js
14
test/test.js
|
@ -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"]
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
},
|
||||
}
|
Загрузка…
Ссылка в новой задаче