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 '' +
- '';
+ 'rect{' +
+ 'fill:#fffc;' +
+ 'animation:cycle 1.2s infinite' +
+ '}' +
+ '' +
+ 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"
+ }
}