initial commit

.github/workflows/publish.yml

@@ -0,0 +1,37 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "14.x"
+          registry-url: https://registry.npmjs.org/
+      - run: yarn
+      - run: yarn build
+      - run: yarn publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+
+  publish-gpr:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "14.x"
+          registry-url: https://npm.pkg.github.com/
+      - run: yarn
+      - run: yarn build
+      - run: yarn publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -0,0 +1,118 @@
+/public
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+public

.storybook/main.js

@@ -0,0 +1,30 @@
+const path = require("path");
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-knobs",
+  ],
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    config.module.rules = config.module.rules.map((data) => {
+      if (/svg\|/.test(String(data.test)))
+        data.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/;
+      return data;
+    });
+
+    // Make whatever fine-grained changes you need
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["raw-loader"],
+      // include: path.resolve(__dirname, './assets/infinite-loop/'),
+    });
+
+    // Return the altered config
+    return config;
+  },
+};

.storybook/preview.js

@@ -0,0 +1,4 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: { expanded: true },
+};

LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2021 lonr
+
+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.

README.md

@@ -0,0 +1,59 @@
+# browser-logo-spinner
+
+Use browser logos as spinners!
+
+![chrome](./assets/infinite-loop/chrome.svg)
+![edge](./assets/infinite-loop/edge.svg)
+![firefox](./assets/infinite-loop/firefox.svg)
+![opera](./assets/infinite-loop/opera.svg)
+![safari](./assets/infinite-loop/safari.svg)
+
+## Installation
+
+```bash
+yarn add @lonr/browser-logo-spinner
+```
+
+## Usage
+
+This package provides several specific elements (e.g. `<chrome-spinner>`) and a `<browser-logo-spinner>` element which auto detects the visitor's UA and chooses one logo
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Usage</title>
+    <script defer src="https://unpkg.com/@lonr/browser-logo-spinner"></script>
+  </head>
+  <body>
+    <chrome-spinner style="width: 100px" loading></chrome-spinner>
+    <browser-logo-spinner
+      style="width: 200px"
+      loading
+      delay="500"
+      faster-rate="3"
+    ></browser-logo-spinner>
+  </body>
+</html>
+```
+
+`spinner.setAttribute('loading', '')` or `spinner.loading = true` to mark the spinner loading. The spinner will wait for `delay`(defaults to `200`ms) and then starting spinning
+
+Then `spinner.removeAttribute('loading')` or `spinner.loading = false` to mark the spinner loaded. The spinner will speed up(controlled by `faster-rate`; defaults to `2`) and stop at the end of the current iteration
+
+You should at least size the element or one of it's parent elements
+
+You probably want to set an initial `loading` attribute
+
+```html
+<browser-logo-spinner style="width: 100px" loading></browser-logo-spinner>
+```
+
+There is also a [storybook](https://lonr.github.io/browser-logo-spinner) playground
+
+## Limitations
+
+The Opera spinner is broken in Firefox and Safari
+
+Higher CPU usage

assets/README.md

@@ -0,0 +1,5 @@
+# assets
+
+Raw logos were copied from [Browser Logos](https://github.com/alrra/browser-logos)
+
+TODO: update tweaked SVGs according to newest SVGs from [Browser Logos](https://github.com/alrra/browser-logos) and [Firefox logo](https://mozilla.design/firefox/logos-usage/)