vue-prism-editor - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

package.json

 {
   "name": "vue-prism-editor",
-  "version": "0.0.1",
-  "description": "A dead simple code editor with syntax highlighting and line numbers.",
-  "keywords": [
-    "vue",
-    "editor",
-    "code editor",
-    "prism"
-  ],
-  "main": "dist/VuePrismEditor.umd.js",
-  "module": "dist/VuePrismEditor.common.js",
-  "unpkg": "dist/VuePrismEditor.umd.min.js",
+  "version": "0.1.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build --dest site",
+    "lint": "vue-cli-service lint",
     "build:lib": "vue-cli-service build --target lib --name VuePrismEditor ./src/components/Editor.vue && rimraf dist/demo.html",
-    "lint": "vue-cli-service lint"
+    "test:unit": "vue-cli-service test:unit"
   },
-  "author": {
-    "name": "Mesut Koca",
-    "email": "[e-mail]"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/koca/vue-prism-editor.git"
-  },
-  "bugs": {
-    "url": "https://github.com/koca/vue-prism-editor/issues"
-  },
-  "homepage": "https://github.com/koca/vue-prism-editor#readme",
-  "license": "MIT",
   "dependencies": {
@@ -42,4 +20,8 @@ "dom-iterator": "^1.0.0",
     "@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",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-jest": "^23.0.1",
     "prismjs": "^1.15.0",
@@ -56,3 +38,26 @@ "register-service-worker": "^1.5.2",
     "not ie <= 8"
-  ]
+  ],
+  "unpkg": "dist/VuePrismEditor.umd.min.js",
+  "module": "dist/VuePrismEditor.common.js",
+  "main": "dist/VuePrismEditor.umd.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/koca/vue-prism-editor.git"
+  },
+  "bugs": {
+    "url": "https://github.com/koca/vue-prism-editor/issues"
+  },
+  "homepage": "https://github.com/koca/vue-prism-editor#readme",
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "editor",
+    "code editor",
+    "prism"
+  ],
+  "description": "A dead simple code editor with syntax highlighting and line numbers.",
+  "author": {
+    "name": "Mesut Koca",
+    "email": "[e-mail]"
+  }
 }

README.md

@@ -9,2 +9,7 @@ # Vue Prism Editor
 
+## Examples
+  
+ * Codesandbox: [https://codesandbox.io/s/61yrlnlnmn](https://codesandbox.io/s/61yrlnlnmn)
+ * Codepen: [https://codepen.io/koca/pen/QVgqyR](https://codepen.io/koca/pen/QVgqyR)
+
 ## Features
@@ -62,3 +67,3 @@
 import VuePrismEditor from "vue-prism-editor";
-import "vue-prism-editor/dist/vuePrismEditor.css"; // import the styles
+import "vue-prism-editor/dist/VuePrismEditor.css"; // import the styles
 Vue.component("prism-editor", VuePrismEditor);
@@ -74,3 +79,3 @@ ```
 <!-- vue-prism-editor CSS -->
-<link rel="stylesheet" href="https://unpkg.com/vue-prism-editor/dist/vuePrismEditor.css">
+<link rel="stylesheet" href="https://unpkg.com/vue-prism-editor/dist/VuePrismEditor.css">
 
@@ -86,11 +91,45 @@ <!-- use -->
 
-## Options
+## Prismjs
 
-_todo_
+This package won't install Prismjs. If you use Prismjs already skip this step. If not you need to load Prismjs somewhere in your app:
 
-## Dependencies
+```js
+// yarn add prismjs
+import "prismjs";
+import "prismjs/themes/prism.css";
+```
 
-- [prismjs](https://ghub.io/prismjs): Lightweight, robust, elegant syntax highlighting. A spin-off project from Dabblet.
-- [vue](https://ghub.io/vue): Reactive, component-oriented view layer for modern web interfaces.
+OR:
 
+```html
+<link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism.css" />
+<script src="https://unpkg.com/prismjs"></script>
+```
+
+## Props
+
+| Name                 | Type      | Default | Options                              | Description                                           |
+| -------------------- | --------- | ------- | ------------------------------------ | ----------------------------------------------------- |
+| v-model              | `string`  | -       | -                                    | for the `code` prop below                             |
+| code                 | `string`  | `""`    | -                                    | the code                                              |
+| language             | `String`  | `"js"`  | `vue,html,md,ts` + Prismjs Languages | language of the code                                  |
+| lineNumbers          | `Boolean` | `false` | -                                    | Whether to show line numbers or not                   |
+| readonly             | `Boolean` | `false` | -                                    | Indicates if the editor is read only or not.          |
+| emitEvents           | `Boolean` | `false` | -                                    | Indicates if the editor should emit events.           |
+| autoStyleLineNumbers | `Boolean` | `true`  | -                                    | Allow the line number to be styled by this component. |
+
+## Events
+
+| Name   | Parameters | Description                     |
+| ------ | ---------- | ------------------------------- |
+| change | `(code)`   | Fires when the code is changed. |
+
+The events below won't be fired unless you set the `emitEvents` prop to `true`.
+
+| Name         | Parameters | Description                                                                 |
+| ------------ | ---------- | --------------------------------------------------------------------------- |
+| keydown      | `(event)`  | This event is emitted when a keydown event happens in editor                |
+| keyup        | `(event)`  | This event is emitted when a keyup event happens in editor                  |
+| editor-click | `(event)`  | This event is emitted  when clicking anywhere in the contenteditable editor |
+
 ## Thanks
@@ -97,0 +136,0 @@

src/utils/prism.js

@@ -26,5 +26,2 @@ /* global Prism */
   }
-  if (lang === "py") {
-    lang = "python";
-  }
   if (Prism.languages[lang]) {
@@ -31,0 +28,0 @@ const code = Prism.highlight(str, Prism.languages[lang], lang);

No alert changes

Improved metrics

Total package byte prevSize

700909

increased by7.28%

Number of package files

29

increased by11.54%

Lines of code

3963

increased by1.8%

Number of lines in readme file

138

increased by39.39%

Worsened metrics

Dev dependency count

15

increased by36.36%

No dependency changes