Upload folder using huggingface_hub

.eslintignore

@@ -0,0 +1 @@
+/src/util.js

.eslintrc.json

@@ -0,0 +1,17 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "amd": true,
+    "commonjs": true
+  },
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "extends": "eslint:recommended",
+  "rules": {
+    "indent": ["error", 2],
+    "quotes": ["error", "single"],
+    "no-extra-semi": "off"
+  }
+}

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+ko_fi: surunzi
+open_collective: eruda

.github/workflows/main.yml

@@ -0,0 +1,28 @@
+name: CI
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - 'master'
+    paths:
+      - 'src/**/*'
+
+jobs:
+  ci:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.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: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Build eruda code
+        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-code.js
+eruda-code.js.map
+package-lock.json

.prettierignore

@@ -0,0 +1 @@
+eruda-code.js

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "semi": false
+}

CHANGELOG.md

@@ -0,0 +1,11 @@
+## v2.2.0 (22 Jul 2024)
+
+* fix: cursor color
+
+## v2.1.0 (29 Nov 2020)
+
+* feat: support theme
+
+## v2.0.0 (6 Jan 2020)
+
+* feat: theme support

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 Code
-emoji: 🔥
-colorFrom: green
-colorTo: blue
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# eruda-code
+
+[![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-code.svg
+[npm-url]: https://npmjs.org/package/eruda-code
+[ci-image]: https://img.shields.io/github/actions/workflow/status/liriliri/eruda-code/main.yml?branch=master&style=flat-square 
+[ci-url]: https://github.com/liriliri/eruda-code/actions/workflows/main.yml
+[license-image]: https://img.shields.io/npm/l/eruda-code.svg
+
+Eruda plugin for running JavaScript code.
+
+## Demo
+
+Browse it on your phone: 
+[https://eruda.liriliri.io/?plugin=code](https://eruda.liriliri.io/?plugin=code)
+
+## Install
+
+```bash
+npm install eruda-code --save
+```
+
+```javascript
+eruda.add(erudaCode);
+```
+
+Make sure Eruda is loaded before this plugin, otherwise won't work.

index.html

@@ -0,0 +1,14 @@
+<!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-code</title>
+    </head>
+    <body>
+        <script src="node_modules/eruda/eruda.js"></script>
+        <script>eruda.init({tool: 'console'});</script>
+        <script src="assets/eruda-code.js"></script>
+        <script>eruda.add(erudaCode).show('code').show();</script>
+    </body>
+</html>

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "eruda-code",
+  "version": "2.2.0",
+  "description": "Eruda plugin for running JavaScript code",
+  "main": "eruda-code.js",
+  "browserslist": [
+    "since 2015",
+    "not dead"
+  ],
+  "files": [
+    "eruda-code.js",
+    "eruda-code.js.map"
+  ],
+  "scripts": {
+    "dev": "webpack-dev-server --host 0.0.0.0 --mode development",
+    "build": "webpack --mode production",
+    "ci": "npm run lint && npm run build && npm run es5",
+    "lint": "eslint src/**/*.js",
+    "format": "lsla prettier \"src/*.{js,scss}\" \"*.{js,json}\" --write",
+    "es5": "es-check es5 eruda-code.js"
+  },
+  "keywords": [
+    "eruda",
+    "plugin"
+  ],
+  "author": "surunzi",
+  "devDependencies": {
+    "@babel/core": "^7.21.3",
+    "@babel/plugin-transform-runtime": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "autoprefixer": "^10.4.14",
+    "babel-loader": "^9.1.2",
+    "codemirror": "^5.65.17",
+    "css-loader": "^3.4.2",
+    "eruda": "^3.2.0",
+    "es-check": "^7.2.1",
+    "eslint": "^8.57.0",
+    "js-beautify": "^1.14.7",
+    "licia": "^1.41.0",
+    "node-sass": "^8.0.0",
+    "postcss": "^8.4.21",
+    "postcss-class-prefix": "^0.3.0",
+    "postcss-loader": "^7.0.2",
+    "sass": "^1.77.8",
+    "sass-loader": "^14.2.1",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.12.0"
+  }
+}

src/CodeMirror.css

@@ -0,0 +1,46 @@
+.CodeMirror {
+  height: 100%;
+  background: var(--background);
+  color: var(--foreground);
+}
+
+.CodeMirror-cursor {
+  border-left: 1px solid var(--light);
+  border-right: 1px solid var(--dark);
+}
+
+.CodeMirror-gutters {
+  background: var(--background);
+  border-color: var(--border);
+}
+
+/* Sync style with chrome dev-tool */
+.cm-s-default .cm-keyword {
+  color: var(--keyword-color);
+}
+.cm-s-default .cm-number {
+  color: var(--number-color);
+}
+.cm-s-default .cm-comment {
+  color: var(--comment-color) !important;
+  font-style: italic;
+}
+.cm-s-default .cm-string,
+.cm-s-default .com-string-2 {
+  color: var(--string-color);
+}
+.cm-atom {
+  color: var(--attribute-name-color);
+}
+.cm-s-default .cm-def {
+  color: var(--foreground);
+}
+.cm-operator {
+  color: var(--operator-color);
+}
+.cm-s-default .cm-meta {
+  color: var(--tag-name-color);
+}
+.cm-s-default .cm-variable-2 {
+  color: var(--var-color);
+}

src/code.js

@@ -0,0 +1,110 @@
+import CodeMirror from 'codemirror'
+import 'codemirror/mode/javascript/javascript'
+import nextTick from 'licia/nextTick'
+import copy from 'licia/copy'
+import beautify from 'js-beautify'
+import stripIndent from 'licia/stripIndent'
+
+export default function (eruda) {
+  let { evalCss } = eruda.util
+
+  class Code extends eruda.Tool {
+    constructor() {
+      super()
+      this.name = 'code'
+      this._style = evalCss(require('./style.scss'))
+      this._CodeMirrorStyle = evalCss(
+        require('codemirror/lib/codemirror.css') +
+          require('codemirror/theme/material-darker.css')
+      )
+      this._CodeMirrorCustomStyle = evalCss(require('./CodeMirror.css'))
+      this._editor = null
+    }
+    init($el, container) {
+      super.init($el, container)
+
+      $el.html(stripIndent`<textarea class="eruda-editor">function fib(num) {
+        if (num <= 2) return 1;
+        return fib(num - 1) + fib(num - 2);
+      }
+      console.log(fib(5));</textarea>
+      <div class="eruda-bottom-bar">
+        <div class="eruda-btn eruda-beautify">
+          Beautify
+        </div>
+        <div class="eruda-btn eruda-copy">
+          Copy
+        </div>
+        <div class="eruda-btn eruda-clear">
+          Clear
+        </div>
+        <div class="eruda-btn eruda-run">
+          Run
+        </div>
+      </div>`)
+      this._bindEvent()
+    }
+    show() {
+      super.show()
+      if (!this._editor) {
+        let container = this._$el.find('.eruda-editor').get(0)
+        this._editor = CodeMirror.fromTextArea(container, {
+          lineNumbers: 'true',
+          mode: 'javascript',
+        })
+        nextTick(() => this._editor.refresh())
+      }
+    }
+    hide() {
+      super.hide()
+    }
+    run() {
+      try {
+        evalJs(this._editor.getValue())
+      } catch (e) {
+        /* eslint-disable no-console */
+        console.error(e)
+      }
+    }
+    beautify() {
+      let editor = this._editor
+
+      let value = editor.getValue()
+      editor.setValue(beautify(value))
+    }
+    copy() {
+      copy(this._editor.getValue())
+      eruda.get().notify('Copied', { icon: 'success' })
+    }
+    clear() {
+      this._editor.setValue('')
+    }
+    destroy() {
+      super.destroy()
+      evalCss.remove(this._style)
+      evalCss.remove(this._CodeMirrorStyle)
+      evalCss.remove(this._CodeMirrorCustomStyle)
+    }
+    _bindEvent() {
+      this._$el
+        .on('click', '.eruda-run', () => this.run())
+        .on('click', '.eruda-beautify', () => this.beautify())
+        .on('click', '.eruda-clear', () => this.clear())
+        .on('click', '.eruda-copy', () => this.copy())
+    }
+  }
+
+  let evalJs = (code) => {
+    let ret
+
+    try {
+      ret = eval.call(window, `(${code})`)
+    } catch (e) {
+      ret = eval.call(window, code)
+    }
+
+    return ret
+  }
+
+  return new Code()
+}

src/index.js

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

src/style.scss

@@ -0,0 +1,36 @@
+$anim-duration: 0.3s;
+
+.code {
+  padding-bottom: 40px;
+  .editor {
+    height: 100%;
+  }
+  .bottom-bar {
+    height: 40px;
+    background: var(--darker-background);
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    font-size: 0;
+    border-top: 1px solid var(--border);
+    .btn {
+      cursor: pointer;
+      text-align: center;
+      color: var(--foreground);
+      font-size: 14px;
+      line-height: 40px;
+      width: 25%;
+      border-right: 1px solid var(--border);
+      display: inline-block;
+      transition: background-color $anim-duration, color $anim-duration;
+      &:active {
+        background: var(--highlight);
+        color: var(--select-foreground);
+      }
+      &.active {
+        color: var(--select-foreground);
+      }
+    }
+  }
+}

webpack.config.js

@@ -0,0 +1,126 @@
+const autoprefixer = require('autoprefixer')
+const postcss = require('postcss')
+const webpack = require('webpack')
+const path = require('path')
+const pkg = require('./package.json')
+const classPrefix = require('postcss-class-prefix')
+const TerserPlugin = require('terser-webpack-plugin')
+
+const banner = pkg.name + ' v' + pkg.version + ' ' + pkg.homepage
+
+module.exports = (env, argv) => {
+  const config = {
+    devtool: 'source-map',
+    entry: './src/index.js',
+    devServer: {
+      static: {
+        directory: path.join(__dirname, './'),
+      },
+      port: 8080,
+    },
+    output: {
+      path: __dirname,
+      filename: 'eruda-code.js',
+      publicPath: '/assets/',
+      library: ['erudaCode'],
+      libraryTarget: 'umd',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              sourceType: 'unambiguous',
+              presets: ['@babel/preset-env'],
+              plugins: ['@babel/plugin-transform-runtime'],
+            },
+          },
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            'css-loader',
+            {
+              loader: 'postcss-loader',
+              options: {
+                postcssOptions: {
+                  plugins: [
+                    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: /\.css$/,
+          use: [
+            'css-loader',
+            {
+              loader: 'postcss-loader',
+              options: {
+                postcssOptions: {
+                  plugins: [
+                    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 '.eruda-dev-tools .eruda-tools ' + selector
+                          })
+                        })
+                      }
+                    }),
+                    autoprefixer,
+                  ],
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+    plugins: [new webpack.BannerPlugin(banner)],
+  }
+
+  if (argv.mode === 'production') {
+    config.optimization = {
+      minimize: true,
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            format: {
+              comments: false,
+            },
+          },
+          extractComments: false,
+        }),
+      ],
+    }
+  }
+
+  return config
+}