diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml new file mode 100644 index 0000000..066bb0e --- /dev/null +++ b/.github/workflows/release-please.yml @@ -0,0 +1,18 @@ +on: + push: + branches: + - master + +permissions: + contents: write + pull-requests: write + +name: release-please + +jobs: + release-please: + runs-on: ubuntu-latest + steps: + - uses: google-github-actions/release-please-action@v3 + with: + release-type: node diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index ac28ca7..a5acdf5 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -8,11 +8,11 @@ jobs: test: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v4 - name: Setup Node.js - uses: actions/setup-node@v1 + uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 - run: npm install - name: Lint run: npm test diff --git a/loading.js b/loading.js index 0da17af..0c33ae7 100644 --- a/loading.js +++ b/loading.js @@ -2,25 +2,25 @@ // 1. No external resources blocking loader display // 2. Terser friendly (no multi-line JS templates) const getSVG = () => { - const rect = (_, index) => ``; + const rect = (_, index) => ``; - return '' + - '' + - '' + + Array.from({length: 12}) + .map(rect) + .join('') + + ''; }; const createElement = (tag, properties) => Object.assign(document.createElement(tag), properties); @@ -28,50 +28,50 @@ const createStyle = textContent => createElement('style', {textContent}); const tagName = 'cfware-loading'; customElements.define(tagName, class CFWareLoading extends HTMLElement { - constructor() { - super(); + constructor() { + super(); - this.attachShadow({mode: 'open'}).append( - createStyle( - ':host{' + - 'display:grid;' + - 'grid:1fr auto auto 1fr/1fr;' + - 'opacity:1;' + - 'background:#333;' + - 'color:#ddd;' + - 'user-select:none;' + - 'font-size:1.2rem;' + - 'line-height:1;' + - 'text-align:center' + - '}' + + this.attachShadow({mode: 'open'}).append( + createStyle( + ':host{' + + 'display:grid;' + + 'grid:1fr auto auto 1fr/1fr;' + + 'opacity:1;' + + 'background:#333;' + + 'color:#ddd;' + + 'user-select:none;' + + 'font-size:1.2rem;' + + 'line-height:1;' + + 'text-align:center' + + '}' + - 'img{' + - 'width:4rem;' + - 'margin:auto' + - '}' - ), - createElement('div'), - createElement('img', { - alt: '', - src: `data:image/svg+xml;base64,${btoa(getSVG())}` - }), - 'Loading' - ); - } + 'img{' + + 'width:4rem;' + + 'margin:auto' + + '}' + ), + createElement('div'), + createElement('img', { + alt: '', + src: `data:image/svg+xml;base64,${btoa(getSVG())}` + }), + 'Loading' + ); + } }); document.head.prepend(createStyle( - 'html,body{' + - 'display:grid;' + - 'height:100%;' + - 'margin:0;' + - 'overflow:hidden' + - '}' + + 'html,body{' + + 'display:grid;' + + 'height:100%;' + + 'margin:0;' + + 'overflow:hidden' + + '}' + - 'body[loaded] ' + tagName + ',' + - 'body:not([loaded]) :not(' + tagName + '){' + - 'display:none' + - '}' + 'body[loaded] ' + tagName + ',' + + 'body:not([loaded]) :not(' + tagName + '){' + + 'display:none' + + '}' )); document.body.prepend(createElement(tagName)); diff --git a/package.json b/package.json index 41ae1c5..32a1f23 100644 --- a/package.json +++ b/package.json @@ -1,27 +1,27 @@ { - "name": "@cfware/loading", - "version": "0.1.3", - "description": "Display a loading spinner until the `loaded` attribute is set to the document body", - "type": "module", - "main": "loading.js", - "exports": "./loading.js", - "scripts": { - "test": "cfware-lint ." - }, - "engines": { - "node": ">=16.12.0" - }, - "author": "Corey Farrell", - "license": "MIT", - "repository": { - "type": "git", - "url": "git+https://github.com/cfware/loading.git" - }, - "bugs": { - "url": "https://github.com/cfware/loading/issues" - }, - "homepage": "https://github.com/cfware/loading#readme", - "devDependencies": { - "@cfware/lint": "^3.0.4" - } + "name": "@cfware/loading", + "version": "0.1.3", + "description": "Display a loading spinner until the `loaded` attribute is set to the document body", + "type": "module", + "main": "loading.js", + "exports": "./loading.js", + "scripts": { + "test": "cfware-lint ." + }, + "engines": { + "node": ">=18" + }, + "author": "Corey Farrell", + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/cfware/loading.git" + }, + "bugs": { + "url": "https://github.com/cfware/loading/issues" + }, + "homepage": "https://github.com/cfware/loading#readme", + "devDependencies": { + "@cfware/lint": "^4" + } }