Initial commit
This commit is contained in:
Mu-An 慕安
Коммит
af2e957e94
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"env": {
|
||||
"esm": {
|
||||
"presets": ["github"]
|
||||
},
|
||||
"umd": {
|
||||
"plugins": [
|
||||
"@babel/plugin-transform-modules-umd"
|
||||
],
|
||||
"presets": ["github"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"extends": [
|
||||
"plugin:github/browser",
|
||||
"plugin:github/es6",
|
||||
"plugin:github/flow"
|
||||
],
|
||||
"parser": "babel-eslint",
|
||||
"overrides": [
|
||||
{
|
||||
"files": "test/**/*.js",
|
||||
"rules": {
|
||||
"flowtype/require-valid-file-annotation": "off",
|
||||
"github/unescaped-html-literal": "off"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
[ignore]
|
||||
|
||||
[include]
|
||||
|
||||
[libs]
|
||||
|
||||
[options]
|
||||
|
||||
[lints]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
dist
|
||||
node_modules
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
language: node_js
|
||||
sudo: required
|
||||
node_js:
|
||||
- "node"
|
||||
addons:
|
||||
chrome: stable
|
||||
cache:
|
||||
directories:
|
||||
- node_modules
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
Copyright (c) 2018 GitHub, Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
# <custom-element> element
|
||||
|
||||
Boilerplate for creating a custom element.
|
||||
|
||||
## Installation
|
||||
|
||||
```
|
||||
$ npm install @github/custom-element-element
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
import '@github/custom-element-element'
|
||||
```
|
||||
|
||||
```html
|
||||
<custom-element></custom-element>
|
||||
```
|
||||
|
||||
## Browser support
|
||||
|
||||
Browsers without native [custom element support][support] require a [polyfill][].
|
||||
|
||||
- Chrome
|
||||
- Firefox
|
||||
- Safari
|
||||
- Microsoft Edge
|
||||
|
||||
[support]: https://caniuse.com/#feat=custom-elementsv1
|
||||
[polyfill]: https://github.com/webcomponents/custom-elements
|
||||
|
||||
## Development
|
||||
|
||||
```
|
||||
npm install
|
||||
npm test
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
Distributed under the MIT license. See LICENSE for details.
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>custom-element demo</title>
|
||||
</head>
|
||||
<body>
|
||||
<custom-element></custom-element>
|
||||
|
||||
<!-- GitHub Pages development script, uncomment when running example locally and comment out the production one -->
|
||||
<!-- <script src="../dist/index.umd.js"></script> -->
|
||||
|
||||
<!-- GitHub Pages demo script -->
|
||||
<script src="https://unpkg.com/@github/custom-element-boilerplate@latest/dist/index.umd.js"></script></body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
/* @flow strict */
|
||||
|
||||
class CustomElementElement extends HTMLElement {
|
||||
constructor() {
|
||||
super()
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.textContent = ':wave:'
|
||||
}
|
||||
|
||||
disconnectedCallback() {}
|
||||
}
|
||||
|
||||
export default CustomElementElement
|
||||
|
||||
if (!window.customElements.get('custom-element')) {
|
||||
window.CustomElementElement = CustomElementElement
|
||||
window.customElements.define('custom-element', CustomElementElement)
|
||||
}
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,39 @@
|
|||
{
|
||||
"name": "@github/custom-element-element",
|
||||
"version": "0.0.1",
|
||||
"description": "Boilerplate for creating a custom element.",
|
||||
"main": "dist/index.umd.js",
|
||||
"module": "dist/index.esm.js",
|
||||
"license": "MIT",
|
||||
"repository": "github/custom-element-boilerplate",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"clean": "rm -rf dist",
|
||||
"lint": "eslint index.js test/ && flow check",
|
||||
"prebuild": "npm run clean && npm run lint && mkdir dist",
|
||||
"build-umd": "BABEL_ENV=umd babel index.js -o dist/index.umd.js",
|
||||
"build-esm": "BABEL_ENV=esm babel index.js -o dist/index.esm.js",
|
||||
"build": "npm run build-umd && npm run build-esm",
|
||||
"pretest": "npm run build",
|
||||
"test": "karma start test/karma.config.js",
|
||||
"prepublishOnly": "npm run build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.1.5",
|
||||
"@babel/core": "^7.1.5",
|
||||
"@babel/plugin-transform-modules-umd": "^7.2.0",
|
||||
"babel-preset-github": "^2.1.1",
|
||||
"chai": "^4.1.2",
|
||||
"eslint": "^5.14.1",
|
||||
"eslint-plugin-github": "^1.9.0",
|
||||
"flow-bin": "^0.93.0",
|
||||
"karma": "^4.0.0",
|
||||
"karma-chai": "^0.1.0",
|
||||
"karma-chrome-launcher": "^2.2.0",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-mocha-reporter": "^2.2.5",
|
||||
"mocha": "^5.0.5"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
module.exports = require('eslint-plugin-github/prettier.config')
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"env": {
|
||||
"mocha": true
|
||||
},
|
||||
"globals": {
|
||||
"assert": true
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
module.exports = function(config) {
|
||||
config.set({
|
||||
frameworks: ['mocha', 'chai'],
|
||||
files: ['../dist/index.umd.js', 'test.js'],
|
||||
reporters: ['mocha'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
browsers: ['ChromeHeadless'],
|
||||
autoWatch: false,
|
||||
singleRun: true,
|
||||
concurrency: Infinity
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
describe('custom-element', function() {
|
||||
describe('element creation', function() {
|
||||
it('creates from document.createElement', function() {
|
||||
const el = document.createElement('custom-element')
|
||||
assert.equal('CUSTOM-ELEMENT', el.nodeName)
|
||||
})
|
||||
|
||||
it('creates from constructor', function() {
|
||||
const el = new window.CustomElementElement()
|
||||
assert.equal('CUSTOM-ELEMENT', el.nodeName)
|
||||
})
|
||||
})
|
||||
|
||||
describe('after tree insertion', function() {
|
||||
beforeEach(function() {
|
||||
document.body.innerHTML = '<custom-element></custom-element>'
|
||||
})
|
||||
|
||||
afterEach(function() {
|
||||
document.body.innerHTML = ''
|
||||
})
|
||||
|
||||
it('initiates', function() {
|
||||
const ce = document.querySelector('custom-element')
|
||||
assert.equal(ce.textContent, ':wave:')
|
||||
})
|
||||
})
|
||||
})
|
||||
Загрузка…
Ссылка в новой задаче