vue-prism-editor - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

.eslintrc.js

@@ -6,13 +6,10 @@ module.exports = {
   },
-  'extends': [
-    'plugin:vue/essential',
-    '@vue/prettier'
-  ],
+  extends: ["plugin:vue/essential", "@vue/prettier"],
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
   },
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: "babel-eslint"
   }
-}
+};

.postcssrc.js

@@ -5,2 +5,2 @@ module.exports = {
   }
-}
+};

jest.config.js

@@ -5,3 +5,3 @@ module.exports = {
     "^.+\\.vue$": "vue-jest",
-    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
+    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
       "jest-transform-stub",
@@ -17,3 +17,4 @@ "^.+\\.jsx?$": "babel-jest"
   ],
+  transformIgnorePatterns: ["<rootDir>/node_modules/"],
   testURL: "http://localhost/"
 };

package.json

 {
   "name": "vue-prism-editor",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "scripts": {
@@ -10,2 +10,3 @@ "serve": "vue-cli-service serve",
     "test:unit": "vue-cli-service test:unit",
+    "test:unit:cov": "npm run lint && npm run test:unit -- --coverage",
     "publish-pkg": "npm run build && npm publish"
@@ -19,17 +20,16 @@ },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.0-beta.15",
-    "@vue/cli-plugin-eslint": "^3.0.0-beta.15",
-    "@vue/cli-plugin-pwa": "^3.0.0-beta.15",
-    "@vue/cli-plugin-unit-jest": "^3.0.3",
-    "@vue/cli-service": "^3.0.0-beta.15",
-    "@vue/eslint-config-prettier": "^3.0.0-beta.15",
-    "@vue/test-utils": "^1.0.0-beta.20",
+    "@vue/cli-plugin-babel": "^3.6.0",
+    "@vue/cli-plugin-eslint": "^3.6.0",
+    "@vue/cli-plugin-unit-jest": "^3.6.3",
+    "@vue/cli-service": "^3.6.0",
+    "@vue/eslint-config-prettier": "^4.0.1",
+    "@vue/test-utils": "^1.0.0-beta.29",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "^23.0.1",
+    "babel-jest": "^24.7.1",
+    "lint-staged": "^8.1.5",
     "prismjs": "^1.15.0",
-    "register-service-worker": "^1.5.2",
-    "rimraf": "^2.6.2",
+    "rimraf": "^2.6.3",
     "tailwindcss": "^0.6.5",
-    "vue": "^2.5.17",
-    "vue-template-compiler": "^2.5.16"
+    "vue": "^2.6.10",
+    "vue-template-compiler": "^2.6.10"
   },
@@ -63,3 +63,16 @@ "browserslist": [
     "email": "[e-mail]"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.js": [
+      "vue-cli-service lint",
+      "git add"
+    ],
+    "*.vue": [
+      "vue-cli-service lint",
+      "git add"
+    ]
   }
 }

README.md

 # Vue Prism Editor
 
+<p align="center">
+
+
+![version](https://img.shields.io/npm/v/vue-prism-editor.svg)
+![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/vue-prism-editor.svg)
+[![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/koca/vue-prism-editor)
+[![CircleCI branch](https://circleci.com/gh/koca/vue-prism-editor/tree/master.svg?style=shield)](https://circleci.com/gh/koca/vue-prism-editor/tree/master)
+<!-- ![Codecov](https://img.shields.io/codecov/c/github/koca/vue-prism-editor.svg) -->
+
+</p>
+
 > A dead simple code editor with syntax highlighting and line numbers. 7kb/gz
@@ -4,0 +15,0 @@

src/main.js

 import Vue from "vue";
 import App from "./App.vue";
-import "./registerServiceWorker";
 import "tailwindcss/dist/tailwind.min.css";
@@ -5,0 +4,0 @@ Vue.config.productionTip = false;

src/utils/selection-range.js

@@ -25,2 +25,3 @@ import iterator from "dom-iterator";
   var length = 0;
+  // eslint-disable-next-line
   var range = document.createRange();
@@ -27,0 +28,0 @@ var it = iterator(el)

tests/unit/Editor.spec.js

 import { mount } from "@vue/test-utils";
 import Editor from "@/components/Editor.vue";
 import "prismjs";
+// jest.mock("prismjs");
 import { compileToFunctions } from "vue-template-compiler";
 
-document.createRange = jest.fn();
-global.getSelection = jest.fn();
-global.getSelection.mockReturnValue({
-  rangeCount: 1,
-  getRangeAt: jest.fn().mockReturnValue({
-    cloneRange: jest.fn().mockReturnValue({
-      selectNodeContents: jest.fn(),
-      setEnd: jest.fn(),
-      setStart: jest.fn()
-    })
-  })
-});
-
+global.window.getSelection = jest.fn(() => ({}));
 describe("Editor.vue", () => {
-  test("renders", () => {
-    let code = "initialCode";
+  it("renders", () => {
+    const code = "initialCode";
     const wrapper = mount(Editor, {
@@ -27,6 +16,15 @@ propsData: { code }
   });
-  test("emits change event", () => {
-    let code = "console.log('test')";
+  it("sets contentEditable", () => {
     const wrapper = mount(Editor);
-    const $pre = wrapper.find(".prism-editor__code");
+    const $pre = wrapper.find("pre");
+    expect($pre.attributes().contenteditable).toBe("true");
+    wrapper.setProps({
+      readonly: true
+    });
+    expect($pre.attributes().contenteditable).toBe("false");
+  });
+  it("emits change event", () => {
+    const code = "console.log('test')";
+    const wrapper = mount(Editor);
+    const $pre = wrapper.find("pre");
     $pre.element.innerHTML = code;
@@ -37,3 +35,3 @@ $pre.trigger("keyup");
 
-  test("v-model works", () => {
+  it("v-model works", () => {
     const compiled = compileToFunctions(
@@ -57,2 +55,52 @@ '<div><Editor class="foo" v-model="code" /></div>'
   });
+
+  it("emits keydown event", () => {
+    const mockHandler = jest.fn();
+    const code = "console.log('test')";
+    const wrapper = mount(Editor, {
+      propsData: {
+        emitEvents: true
+      },
+      listeners: {
+        keydown: mockHandler
+      }
+    });
+    const $pre = wrapper.find("pre");
+    $pre.element.innerHTML = code;
+    $pre.trigger("keydown");
+    expect(wrapper.emitted()["keydown"]).toBeTruthy();
+    expect(mockHandler).toHaveBeenCalled();
+  });
+
+  it("emits keyup event", () => {
+    const mockHandler = jest.fn();
+    const code = "console.log('test')";
+    const wrapper = mount(Editor, {
+      propsData: {
+        emitEvents: true
+      },
+      listeners: {
+        keyup: mockHandler
+      }
+    });
+    const $pre = wrapper.find("pre");
+    $pre.element.innerHTML = code;
+    $pre.trigger("keyup");
+    expect(wrapper.emitted()["keyup"]).toBeTruthy();
+    expect(mockHandler).toHaveBeenCalled();
+  });
+
+  it("not neccessary but", async () => {
+    const code = "log()";
+    const wrapper = mount(Editor, {
+      propsData: {
+        code
+      },
+      sync: false
+    });
+
+    expect(wrapper.vm.content).toBe(
+      `<code><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code>`
+    );
+  });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Improved metrics

Dev dependency count

14

decreased by-6.67%

Lines of code

4016

increased by0.96%

Number of lines in readme file

149

increased by7.97%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

406618

decreased by-60.09%

Number of package files

32

decreased by-3.03%

No dependency changes