feat: version compatible with vue 3 #95

elevatebart · 2020-10-15T20:49:22Z

Hello @koca ,

Here is the first draft of the prism editor working with vue 3.
I have been asked to startup a vue-live engine for vue 3.

Would you be open to delivering this one on the @next channel?

Do you need anything more?

)

koca · 2020-10-15T22:37:22Z

Hey @elevatebart! Thank you for the PR ♥️ i will review this after work(today).

elevatebart · 2020-10-15T22:56:05Z

I just found out that the @testing-library/vue was indirectly dependent on vue 2 (through their version of the vue test utils).
It means that the unit tests will not work until they deliver their upgrade.

Could we to deliver this version as an alpha?

koca · 2020-10-16T16:54:52Z

Why do i see my old commits? There should be only 1 commit i think 🤔

elevatebart · 2020-10-16T17:04:23Z

Yep @koca I forgot to mention that.

Note that my PR is based on the next branch.

The next branch is behind master by those 20 commits.
I started by rebasing master into next before starting the refactor.

The only change that matters here is the last commit:

394b1ce

koca · 2020-10-16T17:07:14Z

can you rebase this branch and update the PR?

koca · 2020-10-16T17:09:26Z

oh i see its not from master branch

koca · 2020-10-16T17:14:01Z

packages/vue-prism-editor/src/Editor.ts

      immediate: true,
-      handler(newVal: string): void {
+      handler(this: any, newVal: string): void {


why did you add this:any to some methods?

koca · 2020-10-16T17:14:31Z

packages/vue-prism-editor/src/Editor.ts

@@ -104,31 +105,31 @@ export const PrismEditor = Vue.extend({
    },
    content: {
      immediate: true,
-      handler(): void {
+      handler(this: any): void {


same this:any

koca · 2020-10-16T17:19:15Z

packages/vue-prism-editor/src/Editor.ts

-const KEYCODE_ENTER = 13;
-const KEYCODE_TAB = 9;
-const KEYCODE_BACKSPACE = 8;
-const KEYCODE_Y = 89;
-const KEYCODE_Z = 90;
-const KEYCODE_M = 77;
-const KEYCODE_PARENS = 57;
-const KEYCODE_BRACKETS = 219;
-const KEYCODE_QUOTE = 222;
-const KEYCODE_BACK_QUOTE = 192;
-const KEYCODE_ESCAPE = 27;
+const KEYCODE_ENTER = 'Enter';
+const KEYCODE_TAB = 'Tab';
+const KEYCODE_BACKSPACE = 'Backspace';
+const KEYCODE_Y = 'y';
+const KEYCODE_Z = 'z';
+const KEYCODE_M = 'm';
+const KEYCODE_PARENS = '(';
+const KEYCODE_BRACKETS = '{';
+const KEYCODE_QUOTE = '"';
+const KEYCODE_BACK_QUOTE = '`';
+const KEYCODE_ESCAPE = 'Escape';


these are not keycodes anymore what was the problem?

event.keyCode is deprecated
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

and event.key seems compatible with IE9+
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

It has nothing to do with vue 3 and I should remove this change from this PR.

i think its okay we can keep the changes

elevatebart · 2020-10-16T19:42:14Z

Thank you @koca for the comments,

this: any turned out to be unnecessary so I removed it.

the keyCode property is deprecated but should not prevent vue.3 from working so I removed this change too.

I hope it simplifies the review a little.

Sorry again for the confusion.

elevatebart · 2020-10-16T19:44:58Z

packages/vue-prism-editor/src/Editor.ts

@@ -55,7 +56,7 @@ export const PrismEditor = Vue.extend({
      type: Boolean,
      default: false,
    },
-    value: {
+    modelValue: {


value => modelValue
https://v3.vuejs.org/guide/migration/v-model.html#migration-strategy

elevatebart · 2020-10-16T19:45:42Z

packages/vue-prism-editor/src/Editor.ts

@@ -261,7 +262,7 @@ export const PrismEditor = Vue.extend({
      input.selectionStart = record.selectionStart;
      input.selectionEnd = record.selectionEnd;

-      this.$emit('input', record.value);
+      this.$emit('update:modelValue', record.value);


this.$emit('input' => 'update:modelValue'

https://v3.vuejs.org/guide/migration/v-model.html#migration-strategy

elevatebart · 2020-10-16T19:49:03Z

packages/vue-prism-editor/src/Editor.ts

-        // onKeyDown(e);
-        this.$emit('keydown', e);
+      // onKeyDown(e);
+      this.$emit('keydown', e);


this.$listeners has been removed in vue 3 (or is null as far as I can tell) which triggers an undefined error.

After investigation, this.$listeners exists only if it has been implemented, with an @click= or an @keydown=
It should be protected against null.
Since it is deprecated anyway, I removed it completely.

yep they've merged $listeners to $attrs. So $attrs has both $attrs and $listeners in vue 3

elevatebart · 2020-10-16T19:49:30Z

packages/vue-prism-editor/src/Editor.ts

@@ -512,27 +511,23 @@ export const PrismEditor = Vue.extend({
      }
    },
  },
-  render(h): VNode {
+  render() {


h is now imported from vue

packages/vue-prism-editor/src/Editor.ts

elevatebart · 2020-10-16T19:54:00Z

I have added comments in this commit to explain my changes

77bb9af

koca · 2020-10-16T20:13:45Z

There is only console.log left can you please remove it and i've tested on my local, seems to be working fine. We can't run tests but I'll publish the alpha version for you. Thank you @elevatebart 😊👍

Co-authored-by: Mesut Koca <[email protected]> Co-authored-by: Lane Wagner <[email protected]> Co-authored-by: Jan Östlund <[email protected]>

koca · 2020-10-16T21:02:51Z

Hey @elevatebart just released v2.0.0-alpha.1

example vue 3 csb: https://codesandbox.io/s/vue-3-support-for-vue-prism-editor-fm7v5

install:

npm install vue-prism-editor@alpha

or

yarn add vue-prism-editor@alpha

cheers 🎉

koca and others added 16 commits August 8, 2020 10:42

chore: update readme

40f6c4e

chore: update size badge

b3e10ac

chore: update site

cc1768f

Update README.md

ddb4681

chore: update readme

bcc4186

chore: update readme add gif

36da377

chore: update readme gif

2f16160

fix: scrolling problem - text won't display past initial height (koca#84

48339da

)

chore: release v1.1.0

86246f0

fix: remove height ups

4c45df1

chore: release version v1.2.0

fc94a57

fix: fix koca#86 and auto register prism-editor when using umd bundle

df6174a

chore: release v1.2.1

a1801fc

chore: update readme

f12dc81

chore: release v1.2.2

57799a7

chore: Update README.md (koca#89)

291070f

koca requested changes Oct 16, 2020

View reviewed changes

koca reviewed Oct 16, 2020

View reviewed changes

elevatebart force-pushed the feature/next branch from 394b1ce to 77bb9af Compare October 16, 2020 19:39

elevatebart commented Oct 16, 2020

View reviewed changes

packages/vue-prism-editor/src/Editor.ts Show resolved Hide resolved

fix: vue 3 version working

e2870ea

elevatebart force-pushed the feature/next branch from 77bb9af to e2870ea Compare October 16, 2020 20:15

koca approved these changes Oct 16, 2020

View reviewed changes

koca merged commit c5b9f9f into koca:feature/next Oct 16, 2020

koca added a commit that referenced this pull request Oct 16, 2020

feat: version compatible with vue 3 (#95)

2921524

Co-authored-by: Mesut Koca <[email protected]> Co-authored-by: Lane Wagner <[email protected]> Co-authored-by: Jan Östlund <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: version compatible with vue 3 #95

feat: version compatible with vue 3 #95

elevatebart commented Oct 15, 2020

koca commented Oct 15, 2020

elevatebart commented Oct 15, 2020

koca commented Oct 16, 2020

elevatebart commented Oct 16, 2020

koca commented Oct 16, 2020

koca commented Oct 16, 2020

koca Oct 16, 2020

koca Oct 16, 2020

koca Oct 16, 2020

elevatebart Oct 16, 2020

koca Oct 16, 2020

elevatebart Oct 16, 2020

elevatebart commented Oct 16, 2020

elevatebart Oct 16, 2020

elevatebart Oct 16, 2020

elevatebart Oct 16, 2020

elevatebart Oct 16, 2020

koca Oct 16, 2020

elevatebart Oct 16, 2020

elevatebart commented Oct 16, 2020

koca commented Oct 16, 2020

koca commented Oct 16, 2020

feat: version compatible with vue 3 #95

feat: version compatible with vue 3 #95

Conversation

elevatebart commented Oct 15, 2020

koca commented Oct 15, 2020

elevatebart commented Oct 15, 2020

koca commented Oct 16, 2020

elevatebart commented Oct 16, 2020

koca commented Oct 16, 2020

koca commented Oct 16, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elevatebart commented Oct 16, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elevatebart commented Oct 16, 2020

koca commented Oct 16, 2020

koca commented Oct 16, 2020