Upload folder using huggingface_hub

.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    commonjs: true
+  },
+  extends: 'eslint:recommended',
+  rules: {
+    quotes: ['error', 'single']
+  },
+  parserOptions: {
+    sourceType: 'module'
+  }
+}

.github/workflows/main.yml

@@ -0,0 +1,27 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - 'master'
+    paths:
+      - 'src/**/*'
+
+jobs:
+  ci:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: |
+        npm i
+        npm run ci

.github/workflows/publish.yml

@@ -0,0 +1,28 @@
+name: Publish to NPM
+
+on:
+  workflow_dispatch:
+  release:
+    types: [created]
+
+jobs:
+  publish:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Build eruda timing
+        run: |
+          npm i
+          npm run build
+      - name: Publish package on NPM
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,4 @@
+/node_modules/
+eruda-timing.js
+eruda-timing.js.map
+package-lock.json

.prettierignore

@@ -0,0 +1,2 @@
+eruda-timing.js
+eruda-timing.min.js

CHANGELOG.md

@@ -0,0 +1,15 @@
+## v2.0.1 (26 Nov 2022)
+
+* fix: unable to load in eruda 2.5.0
+
+## v2.0.0 (6 Jan 2019)
+
+* feat: theme support
+
+## v1.1.3 (8 Nov 2019)
+
+* chore: update refresh icon style
+
+## v1.1.2 (22 Aug 2018)
+
+* Fix refresh icon missing

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 liriliri
+
+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

@@ -1,10 +1,30 @@
----
-title: Eruda Timing
-emoji: 👀
-colorFrom: purple
-colorTo: pink
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# eruda-timing
+
+[![NPM version][npm-image]][npm-url]
+[![Build status][ci-image]][ci-url]
+[![License][license-image]][npm-url]
+
+[npm-image]: https://img.shields.io/npm/v/eruda-timing.svg
+[npm-url]: https://npmjs.org/package/eruda-timing
+[ci-image]: https://img.shields.io/github/workflow/status/liriliri/eruda-timing/CI?style=flat-square
+[ci-url]: https://github.com/liriliri/eruda-timing/actions/workflows/main.yml
+[license-image]: https://img.shields.io/npm/l/eruda-timing.svg
+
+Eruda plugin for performance and resource timing.
+
+## Demo
+
+Browse it on your phone: 
+[http://eruda.liriliri.io/?plugin=timing](http://eruda.liriliri.io/?plugin=timing)
+
+## Install
+
+```bash
+npm install eruda-timing --save
+```
+
+```javascript
+eruda.add(erudaTiming);
+```
+
+Make sure Eruda is loaded before this plugin, otherwise won't work.

index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+    />
+    <title>Eruda-timing</title>
+  </head>
+  <body>
+    <script src="node_modules/eruda/eruda.js"></script>
+    <script>
+      eruda.init({ tool: ['sources'] })
+    </script>
+    <script src="assets/eruda-timing.js"></script>
+    <script>
+      eruda
+        .add(erudaTiming)
+        .show('timing')
+        .show()
+    </script>
+  </body>
+</html>

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "eruda-timing",
+  "version": "2.0.1",
+  "main": "eruda-timing.js",
+  "description": "Eruda plugin for performance and resource timing",
+  "scripts": {
+    "dev": "webpack-dev-server --host 0.0.0.0",
+    "build": "webpack -p",
+    "format": "prettier 'src/*.js' 'src/style.scss' '*.js' 'index.html' --write",
+    "ci": "npm run lint && npm run build",
+    "lint": "eslint src/**/*.js"
+  },
+  "files": [
+    "eruda-timing*"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/liriliri/eruda-timing.git"
+  },
+  "keywords": [
+    "eruda",
+    "plugin",
+    "timing"
+  ],
+  "author": "redhoodsu",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/liriliri/eruda-timing/issues"
+  },
+  "homepage": "https://github.com/liriliri/eruda-timing#readme",
+  "devDependencies": {
+    "@babel/core": "^7.7.2",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.7.1",
+    "@babel/runtime": "^7.7.2",
+    "autoprefixer": "^9.7.1",
+    "babel-loader": "^8.0.6",
+    "css-loader": "^3.2.0",
+    "eruda": "^2.6.0",
+    "eslint": "^6.6.0",
+    "handlebars": "^4.5.1",
+    "handlebars-loader": "^1.7.1",
+    "licia": "^1.37.0",
+    "node-sass": "^4.13.0",
+    "postcss": "^7.0.21",
+    "postcss-class-prefix": "^0.3.0",
+    "postcss-loader": "^3.0.0",
+    "prettier": "^1.18.2",
+    "sass-loader": "^8.0.0",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.9.0"
+  }
+}

prettier.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  singleQuote: true,
+  tabWidth: 2,
+  semi: false
+}

src/index.js

@@ -0,0 +1 @@
+module.exports = require('./timing').default

src/style.scss

@@ -0,0 +1,120 @@
+@mixin overflow-auto($direction: 'both') {
+  @if $direction == 'both' {
+    overflow: auto;
+  } @else {
+    overflow-#{$direction}: auto;
+  }
+  -webkit-overflow-scrolling: touch;
+}
+
+$padding: 10px;
+$font-size-s: 12px;
+$font-size-l: 16px;
+$font-size: 14px;
+$anim-duration: 0.3s;
+
+.timing {
+  @include overflow-auto(y);
+  .performance-timing {
+    padding: $padding 0;
+    .inner-wrapper {
+      background: var(--darker-background);
+      .bar {
+        @include overflow-auto(x);
+        border-bottom: 1px solid var(--border);
+        span {
+          font-size: $font-size-s;
+          white-space: nowrap;
+          padding: 5px 0;
+          background: var(--highlight);
+          display: inline-block;
+        }
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+  .performance-timing-data {
+    padding-bottom: $padding;
+    text-align: center;
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      text-align: left;
+      th {
+        background: var(--darker-background);
+        text-align: left;
+        font-size: $font-size;
+      }
+      td {
+        font-size: $font-size-s;
+      }
+      th,
+      td {
+        padding: 10px;
+        border: 1px solid var(--border);
+      }
+      tr:nth-child(even) {
+        background: var(--contrast);
+      }
+    }
+  }
+  .title {
+    border-top: 1px solid var(--border);
+    background: var(--darker-background);
+    padding: $padding;
+    .btn {
+      display: flex;
+      margin-left: 5px;
+      float: right;
+      width: 18px;
+      height: 18px;
+      justify-content: center;
+      align-items: center;
+      font-size: $font-size-l;
+      cursor: pointer;
+      transition: color $anim-duration;
+      &:active {
+        color: var(--select-foreground);
+      }
+    }
+  }
+  .entries {
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 10px;
+    @include overflow-auto(x);
+    table {
+      min-width: 100%;
+      cursor: pointer;
+      tr:nth-child(4n-1) {
+        background: var(--contrast);
+      }
+      td.timeline {
+        padding: 0;
+        height: 4px;
+        font-size: 0;
+        span {
+          display: inline-block;
+          height: 100%;
+        }
+      }
+      td {
+        border: 1px solid var(--border);
+        padding: 10px;
+        white-space: nowrap;
+      }
+      .right {
+        text-align: right;
+      }
+    }
+  }
+  .not-supported {
+    background: var(--console-error-background);
+    border: 1px solid var(--console-error-border);
+    color: var(--console-error-foreground);
+    margin: 10px;
+    padding: $padding;
+    text-align: center;
+  }
+}

src/template.hbs

@@ -0,0 +1,68 @@
+{{#if timing}}
+    <div class="eruda-performance-timing">
+        <div class="eruda-inner-wrapper">
+            {{#each data}}
+                <div class="eruda-bar">
+                    <span style="position:relative;left:{{start}}%;width:{{len}}%">{{name}}({{duration}}ms)</span>
+                </div>
+            {{/each}}
+        </div>
+    </div>
+
+    {{#if showPerformanceDetail}}
+        <div class="eruda-performance-timing-data">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Time(ms)</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {{#each timing}}
+                        <tr>
+                            <td>{{@key}}</td>
+                            <td>{{this}}</td>
+                        </tr>
+                    {{/each}}
+                </tbody>
+            </table>
+        </div>
+    {{/if}}
+{{/if}}
+
+{{#if entries}}
+    <div class="eruda-title">
+        ResourceTiming
+        <div class="eruda-btn eruda-refresh-resource-timing">
+            <span class="eruda-icon-refresh"></span>
+        </div>
+    </div>
+    <div class="eruda-entries">
+        <table>
+            <tbody>
+                {{#each entries}}
+                    <tr class="eruda-entry" data-idx="{{@key}}">
+                        <td>{{name}}</td>
+                        <td>{{#if initiatorType}}<span>{{initiatorType}}</span>{{/if}}</td>
+                        <td class="eruda-right">{{displayTime}}</td>
+                        <td class="eruda-blue">{{url}}</td>
+                    </tr>
+                    <tr>
+                        <td class="eruda-timeline" colspan="4">
+                            <span style="border-left: 1px solid #707d8b; background: #707d8b; margin-left: {{timeline.left}}%; width: {{timeline.connection}}%;"></span>
+                            <span style="background: #009688; width: {{timeline.ttfb}}%"></span>
+                            <span style="background: #2196f3; width: {{timeline.response}}%"></span>
+                        </td>
+                    </tr>
+                {{/each}}
+            </tbody>
+        </table>
+    </div>
+{{/if}}
+
+{{#if notSupported}}
+    <div class="eruda-not-supported">
+        Not supported for this browser!
+    </div>
+{{/if}}

src/timing.js

@@ -0,0 +1,236 @@
+import ready from 'licia/ready'
+import isFn from 'licia/isFn'
+import $ from 'licia/$'
+import { getFileName } from './util'
+
+export default function(eruda) {
+  let { evalCss } = eruda.util
+
+  class Timing extends eruda.Tool {
+    constructor() {
+      super()
+      this.name = 'timing'
+      this._style = evalCss(require('./style.scss'))
+      this._performanceTimingData = []
+      this._performanceTiming = {}
+      this._showPerformanceDetail = false
+      this._resourceTimingData = []
+      this._tpl = require('./template.hbs')
+
+      let performance = (this._performance =
+        window.webkitPerformance || window.performance)
+      this._hasResourceTiming = performance && isFn(performance.getEntries)
+    }
+    init($el, container) {
+      super.init($el, container)
+
+      this._container = container
+      this._bindEvent()
+    }
+    show() {
+      super.show()
+
+      this._render()
+    }
+    hide() {
+      super.hide()
+    }
+    destroy() {
+      super.destroy()
+      evalCss.remove(this._style)
+    }
+    _bindEvent() {
+      let $el = this._$el,
+        container = this._container
+
+      let self = this
+
+      $el
+        .on('click', '.eruda-performance-timing', function() {
+          self._showPerformanceDetail = !self._showPerformanceDetail
+          self._render()
+        })
+        .on('click', '.eruda-entry', function() {
+          let idx = $(this).data('idx'),
+            data = self._resourceTimingData[Number(idx)]
+
+          if (data.initiatorType === 'img') {
+            showSources('img', data.url)
+          }
+        })
+        .on('click', '.eruda-refresh-resource-timing', () => {
+          this._render()
+        })
+
+      function showSources(type, data) {
+        let sources = container.get('sources')
+        if (!sources) return
+
+        sources.set(type, data)
+
+        container.showTool('sources')
+      }
+    }
+    _getPerformanceTimingData() {
+      let performance = this._performance
+      if (!performance) return
+
+      let timing = performance.timing
+      if (!timing) return
+
+      let data = []
+
+      /* eslint-disable no-unused-vars */
+      let {
+        navigationStart,
+        unloadEventStart,
+        unloadEventEnd,
+        redirectStart,
+        redirectEnd,
+        fetchStart,
+        domainLookupStart,
+        domainLookupEnd,
+        connectStart,
+        connectEnd,
+        secureConnectionStart,
+        requestStart,
+        responseStart,
+        responseEnd,
+        domLoading,
+        domInteractive,
+        domContentLoadedEventStart,
+        domContentLoadedEventEnd,
+        domComplete,
+        loadEventStart,
+        loadEventEnd
+      } = timing
+
+      let start = navigationStart,
+        end = loadEventEnd,
+        ready = true,
+        total = end - start
+
+      function getData(name, startTime, endTime) {
+        let duration = endTime - startTime
+        if (duration < 0) ready = false
+
+        return {
+          name: name,
+          start: ((startTime - start) / total) * 100,
+          duration: duration,
+          len: (duration / total) * 100
+        }
+      }
+
+      data.push(getData('Total', navigationStart, loadEventEnd))
+      data.push(getData('Network/Server', navigationStart, responseStart))
+      data.push(getData('App Cache', fetchStart, domainLookupStart))
+      data.push(getData('DNS', domainLookupStart, domainLookupEnd))
+      data.push(getData('TCP', connectStart, connectEnd))
+      data.push(getData('Time to First Byte', requestStart, responseStart))
+      data.push(getData('Response', responseStart, responseEnd))
+      data.push(getData('Unload', unloadEventStart, unloadEventEnd))
+      data.push(getData('DOM Processing', domLoading, domComplete))
+      data.push(getData('DOM Construction', domLoading, domInteractive))
+
+      if (!ready) return
+
+      this._performanceTimingData = data
+
+      let performanceTiming = {}
+      ;[
+        'navigationStart',
+        'unloadEventStart',
+        'unloadEventEnd',
+        'redirectStart',
+        'redirectEnd',
+        'fetchStart',
+        'domainLookupStart',
+        'domainLookupEnd',
+        'connectStart',
+        'connectEnd',
+        'secureConnectionStart',
+        'requestStart',
+        'responseStart',
+        'responseEnd',
+        'domLoading',
+        'domInteractive',
+        'domContentLoadedEventStart',
+        'domContentLoadedEventEnd',
+        'domComplete',
+        'loadEventStart',
+        'loadEventEnd'
+      ].forEach(val => {
+        performanceTiming[val] = timing[val] === 0 ? 0 : timing[val] - start
+      })
+      this._performanceTiming = performanceTiming
+    }
+    _getResourceTimingData() {
+      if (!this._hasResourceTiming) return
+
+      let entries = this._performance.getEntries(),
+        data = []
+
+      let totalTime = 0
+      entries.forEach(entry => {
+        if (entry.entryType !== 'resource') return
+        if (entry.responseEnd > totalTime) totalTime = entry.responseEnd
+      })
+
+      entries.forEach(entry => {
+        if (entry.entryType !== 'resource') return
+
+        let timeline = {
+          left: (entry.startTime / totalTime) * 100,
+          connection:
+            ((entry.requestStart - entry.startTime) / totalTime) * 100,
+          ttfb: ((entry.responseStart - entry.requestStart) / totalTime) * 100,
+          response:
+            ((entry.responseEnd - entry.responseStart) / totalTime) * 100
+        }
+
+        data.push({
+          name: getFileName(entry.name),
+          displayTime: Math.round(entry.duration) + 'ms',
+          url: entry.name,
+          timeline,
+          initiatorType: entry.initiatorType
+        })
+      })
+
+      this._resourceTimingData = data
+    }
+    _render() {
+      if (!this.active) return
+
+      this._getResourceTimingData()
+
+      let renderData = { entries: this._resourceTimingData }
+
+      if (this._performanceTimingData.length === 0) {
+        ready(() => {
+          this._getPerformanceTimingData()
+          this._render()
+        })
+      } else {
+        this._getPerformanceTimingData()
+      }
+      renderData.data = this._performanceTimingData
+      renderData.timing = this._performanceTiming
+      renderData.showPerformanceDetail = this._showPerformanceDetail
+
+      if (!renderData.timing && !renderData.entries) {
+        renderData.notSupported = true
+      }
+
+      this._renderHtml(this._tpl(renderData))
+    }
+    _renderHtml(html) {
+      if (html === this._lastHtml) return
+      this._lastHtml = html
+      this._$el.html(html)
+    }
+  }
+
+  return new Timing()
+}

src/util.js

@@ -0,0 +1,16 @@
+import last from 'licia/last'
+import trim from 'licia/trim'
+import Url from 'licia/Url'
+
+export function getFileName(url) {
+  let ret = last(url.split('/'))
+
+  if (ret.indexOf('?') > -1) ret = trim(ret.split('?')[0])
+
+  if (ret === '') {
+    url = new Url(url)
+    ret = url.hostname
+  }
+
+  return ret
+}

webpack.config.js

@@ -0,0 +1,73 @@
+const autoprefixer = require('autoprefixer')
+const postcss = require('postcss')
+const webpack = require('webpack')
+const pkg = require('./package.json')
+const classPrefix = require('postcss-class-prefix')
+
+const banner = pkg.name + ' v' + pkg.version + ' ' + pkg.homepage
+
+module.exports = {
+  devtool: 'source-map',
+  entry: './src/index.js',
+  devServer: {
+    contentBase: './',
+    port: 3000
+  },
+  output: {
+    path: __dirname,
+    filename: 'eruda-timing.js',
+    publicPath: '/assets/',
+    library: ['erudaTiming'],
+    libraryTarget: 'umd'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules|index\.js/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+            plugins: ['@babel/plugin-transform-runtime']
+          }
+        }
+      },
+      {
+        test: /\.scss$/,
+        loaders: [
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: function() {
+                return [
+                  postcss.plugin('postcss-namespace', function() {
+                    // Add '.dev-tools .tools ' to every selector.
+                    return function(root) {
+                      root.walkRules(function(rule) {
+                        if (!rule.selectors) return rule
+
+                        rule.selectors = rule.selectors.map(function(selector) {
+                          return '.dev-tools .tools ' + selector
+                        })
+                      })
+                    }
+                  }),
+                  classPrefix('eruda-'),
+                  autoprefixer
+                ]
+              }
+            }
+          },
+          'sass-loader'
+        ]
+      },
+      {
+        test: /\.hbs$/,
+        loader: 'handlebars-loader'
+      }
+    ]
+  },
+  plugins: [new webpack.BannerPlugin(banner)]
+}