Do you have any plans to support vue3?

fritx commented 2 years ago

@nsano-rururu yes, I did, any work or help is appreciated!

PaulSaveur commented 2 years ago

Hi, some news about vue 3 compatibility ??

XIwen-chuan commented 1 year ago

@fritx Is there a version that supports VUE3 or is it under development？

nsano-rururu commented 1 year ago

@XIwen-chuan

It seems that vue3 support hasn't done anything yet. I think the following actions are necessary.

Migrating From JavaScript to TypeScript
- Add ESLint
Migrating From Webpack to Vite
Vue 3 Support
- element-ui to element-plus
- vuetify 2.x to 3.x

XIwen-chuan commented 1 year ago

@nsano-rururu thank you. this project is unique and useful. looking forward to supporting vue3

fritx commented 1 year ago

@nsano-rururu @XIwen-chuan now I'm trying with this guide:

Vue 3 Migration Build: safely upgrade your app to Vue 3 (Pt. 1) https://www.vuemastery.com/blog/vue-3-migration-build/

nsano-rururu commented 1 year ago

@fritx

Would you like to introduce eslint? . It can be easily introduced as follows. The execution result when specifying the 'plugin:vue/vue3-recommended' ruleset is as follows.

edit package.json

add scritps

    "lint": "vue-cli-service lint",
    "lint:fix": "vue-cli-service lint --fix"

add

  "dependencies": {
    "@vue/cli-service": "^4.5.19",
    "@vue/cli-plugin-eslint": "^4.5.19",
    "@vue/eslint-config-airbnb": "^5.3.0",
    "eslint": "^6.8.0",
    "eslint-plugin-vue": "^9.3.0"
  }

add .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-recommended',
    '@vue/airbnb',
  ],
  parserOptions: {
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
};

npm run lint

[CORP\sano@a-19f9vs8e9ite4 vue-at]$ npm run lint

> vue-at@2.5.0-beta.2 lint
> vue-cli-service lint

error: Irregular whitespace not allowed (no-irregular-whitespace) at src/App.vue:133:17:
  131 |       text: `
  132 | <<< Textarea >>>
> 133 | Awesome Electron 
      |                 ^
  134 | Useful resources for creating apps with Electron
  135 | Inspired by the awesome list thing. You might also like awesome-nodejs.
  136 | Example apps

error: Irregular whitespace not allowed (no-irregular-whitespace) at src/App.vue:134:40:
  132 | <<< Textarea >>>
  133 | Awesome Electron 
> 134 | Useful resources for creating apps with Electron
      |                                        ^
  135 | Inspired by the awesome list thing. You might also like awesome-nodejs.
  136 | Example apps
  137 | Some good apps written with Electron.

error: Irregular whitespace not allowed (no-irregular-whitespace) at src/App.vue:135:16:
  133 | Awesome Electron 
  134 | Useful resources for creating apps with Electron
> 135 | Inspired by the awesome list thing. You might also like awesome-nodejs.
      |                ^
  136 | Example apps
  137 | Some good apps written with Electron.
  138 | Open Source

error: Irregular whitespace not allowed (no-irregular-whitespace) at src/App.vue:135:24:
  133 | Awesome Electron 
  134 | Useful resources for creating apps with Electron
> 135 | Inspired by the awesome list thing. You might also like awesome-nodejs.
      |                        ^
  136 | Example apps
  137 | Some good apps written with Electron.
  138 | Open Source

error: Irregular whitespace not allowed (no-irregular-whitespace) at src/App.vue:135:56:
  133 | Awesome Electron 
  134 | Useful resources for creating apps with Electron
> 135 | Inspired by the awesome list thing. You might also like awesome-nodejs.
      |                                                        ^
  136 | Example apps
  137 | Some good apps written with Electron.
  138 | Open Source

error: Irregular whitespace not allowed (no-irregular-whitespace) at src/App.vue:139:5:
  137 | Some good apps written with Electron.
  138 | Open Source
> 139 | Atom - Code editor.
      |     ^
  140 | Nuclide - Unified IDE.
  141 | Playback - Video player.
  142 | Awesome Electron 

error: Irregular whitespace not allowed (no-irregular-whitespace) at src/App.vue:140:8:
  138 | Open Source
  139 | Atom - Code editor.
> 140 | Nuclide - Unified IDE.
      |        ^
  141 | Playback - Video player.
  142 | Awesome Electron 
  143 | Useful resources for creating apps with Electron

error: Irregular whitespace not allowed (no-irregular-whitespace) at src/App.vue:141:9:
  139 | Atom - Code editor.
  140 | Nuclide - Unified IDE.
> 141 | Playback - Video player.
      |         ^
  142 | Awesome Electron 
  143 | Useful resources for creating apps with Electron
  144 | Inspired by the awesome list thing. You might also like awesome-nodejs.

error: Irregular whitespace not allowed (no-irregular-whitespace) at src/App.vue:142:17:
  140 | Nuclide - Unified IDE.
  141 | Playback - Video player.
> 142 | Awesome Electron 
      |                 ^
  143 | Useful resources for creating apps with Electron
  144 | Inspired by the awesome list thing. You might also like awesome-nodejs.
  145 | Example apps

error: Irregular whitespace not allowed (no-irregular-whitespace) at src/App.vue:143:40:
  141 | Playback - Video player.
  142 | Awesome Electron 
> 143 | Useful resources for creating apps with Electron
      |                                        ^
  144 | Inspired by the awesome list thing. You might also like awesome-nodejs.
  145 | Example apps
  146 | Some good apps written with Electron.

error: Irregular whitespace not allowed (no-irregular-whitespace) at src/App.vue:144:16:
  142 | Awesome Electron 
  143 | Useful resources for creating apps with Electron
> 144 | Inspired by the awesome list thing. You might also like awesome-nodejs.
      |                ^
  145 | Example apps
  146 | Some good apps written with Electron.
  147 | Open Source

error: Irregular whitespace not allowed (no-irregular-whitespace) at src/App.vue:144:24:
  142 | Awesome Electron 
  143 | Useful resources for creating apps with Electron
> 144 | Inspired by the awesome list thing. You might also like awesome-nodejs.
      |                        ^
  145 | Example apps
  146 | Some good apps written with Electron.
  147 | Open Source

error: Irregular whitespace not allowed (no-irregular-whitespace) at src/App.vue:144:56:
  142 | Awesome Electron 
  143 | Useful resources for creating apps with Electron
> 144 | Inspired by the awesome list thing. You might also like awesome-nodejs.
      |                                                        ^
  145 | Example apps
  146 | Some good apps written with Electron.
  147 | Open Source

error: Irregular whitespace not allowed (no-irregular-whitespace) at src/App.vue:148:5:
  146 | Some good apps written with Electron.
  147 | Open Source
> 148 | Atom - Code editor.
      |     ^
  149 | Nuclide - Unified IDE.
  150 | Playback - Video player.
  151 |       `.trim(), // fix trailing abnormal nodes

error: Irregular whitespace not allowed (no-irregular-whitespace) at src/App.vue:149:8:
  147 | Open Source
  148 | Atom - Code editor.
> 149 | Nuclide - Unified IDE.
      |        ^
  150 | Playback - Video player.
  151 |       `.trim(), // fix trailing abnormal nodes
  152 |       html: `

error: Irregular whitespace not allowed (no-irregular-whitespace) at src/App.vue:150:9:
  148 | Atom - Code editor.
  149 | Nuclide - Unified IDE.
> 150 | Playback - Video player.
      |         ^
  151 |       `.trim(), // fix trailing abnormal nodes
  152 |       html: `
  153 |         <div>&lt;&lt;&lt; Content Editable Div &gt;&gt;&gt;</div><div>Awesome Electron&nbsp;

error: Component name "At" should always be multi-word (vue/multi-word-component-names) at src/At.vue:10:9:
   8 |
   9 | export default {
> 10 |   name: 'At',
     |         ^
  11 |   mixins: [AtTemplate],
  12 |   props: {
  13 |     value: {

error: 'at' is defined but never used (no-unused-vars) at src/At.vue:63:30:
  61 |     filterMatch: {
  62 |       type: Function,
> 63 |       default: (name, chunk, at) =>
     |                              ^
  64 |         // match at lower-case
  65 |         name.toLowerCase()
  66 |           .indexOf(chunk.toLowerCase()) > -1,

error: Expected no linebreak before this expression (implicit-arrow-linebreak) at src/At.vue:65:9:
  63 |       default: (name, chunk, at) =>
  64 |         // match at lower-case
> 65 |         name.toLowerCase()
     |         ^
  66 |           .indexOf(chunk.toLowerCase()) > -1,
  67 |
  68 |     },

error: 'list' is assigned a value but never used (no-unused-vars) at src/At.vue:104:11:
  102 |       if (this.atwho) {
  103 |         const {
> 104 |           list, cur, x, y,
      |           ^
  105 |         } = this.atwho;
  106 |         const { wrap } = this.$refs;
  107 |         if (wrap) {

error: 'cur' is assigned a value but never used (no-unused-vars) at src/At.vue:104:17:
  102 |       if (this.atwho) {
  103 |         const {
> 104 |           list, cur, x, y,
      |                 ^
  105 |         } = this.atwho;
  106 |         const { wrap } = this.$refs;
  107 |         if (wrap) {

warning: Unexpected unnamed method 'atwho.cur' (func-names) at src/At.vue:120:5:
  118 |   },
  119 |   watch: {
> 120 |     'atwho.cur': function (index) {
      |     ^
  121 |       if (index != null) { // cur index exists
  122 |         this.$nextTick(() => {
  123 |           this.scrollToCur();

error: 'oldValue' is defined but never used (no-unused-vars) at src/At.vue:130:18:
  128 |       this.handleInput(true);
  129 |     },
> 130 |     value(value, oldValue) {
      |                  ^
  131 |       if (this.bindsValue) {
  132 |         this.handleValueUpdate(value);
  133 |       }

error: Unexpected mix of '||' and '&&' (no-mixed-operators) at src/At.vue:182:18:
  180 |           let a = range.endContainer.childNodes[range.endOffset]
  181 |             || range.endContainer.childNodes[range.endOffset - 1];
> 182 |           if (!a || a.nodeType === Node.TEXT_NODE && !/^\s?$/.test(a.data)) {
      |                  ^
  183 |             return;
  184 |           } if (a.nodeType === Node.TEXT_NODE) {
  185 |             if (a.previousSibling) a = a.previousSibling;

error: Unexpected mix of '||' and '&&' (no-mixed-operators) at src/At.vue:182:51:
  180 |           let a = range.endContainer.childNodes[range.endOffset]
  181 |             || range.endContainer.childNodes[range.endOffset - 1];
> 182 |           if (!a || a.nodeType === Node.TEXT_NODE && !/^\s?$/.test(a.data)) {
      |                                                   ^
  183 |             return;
  184 |           } if (a.nodeType === Node.TEXT_NODE) {
  185 |             if (a.previousSibling) a = a.previousSibling;

error: Expected to return a value at the end of arrow function (consistent-return) at src/At.vue:191:32:
  189 |           ch.unshift(a);
  190 |           let last;
> 191 |           [].some.call(ch, (c) => {
      |                                ^
  192 |             if (c.getAttribute && c.getAttribute('data-at-embedded') != null) {
  193 |               last = c;
  194 |               return true;

error: Unexpected mix of '&&' and '||' (no-mixed-operators) at src/At.vue:262:39:
  260 |       // 为了兼容ie ie9~11 editable无input事件 只能靠keydown触发 textarea正常
  261 |       // 另 ie9 textarea的delete不触发input
> 262 |       const isValid = e.keyCode >= 48 && e.keyCode <= 90 || e.keyCode === 8;
      |                                       ^
  263 |       if (isValid) {
  264 |         setTimeout(() => {
  265 |           this.handleInput();

error: Unexpected mix of '&&' and '||' (no-mixed-operators) at src/At.vue:262:58:
  260 |       // 为了兼容ie ie9~11 editable无input事件 只能靠keydown触发 textarea正常
  261 |       // 另 ie9 textarea的delete不触发input
> 262 |       const isValid = e.keyCode >= 48 && e.keyCode <= 90 || e.keyCode === 8;
      |                                                          ^
  263 |       if (isValid) {
  264 |         setTimeout(() => {
  265 |           this.handleInput();

warning: The "input" event has been triggered but not declared on `emits` option (vue/require-explicit-emits) at src/At.vue:285:18:
  283 |       if (this.hasComposition) return;
  284 |       const el = this.$el.querySelector('[contenteditable]');
> 285 |       this.$emit('input', el.innerHTML);
      |                  ^
  286 |
  287 |       const range = getPrecedingRange();
  288 |       if (range) {

warning: The "at" event has been triggered but not declared on `emits` option (vue/require-explicit-emits) at src/At.vue:321:24:
  319 |           const { members, filterMatch, itemName } = this;
  320 |           if (!keep && chunk) { // fixme: should be consistent with AtTextarea.vue
> 321 |             this.$emit('at', chunk);
      |                        ^
  322 |           }
  323 |           const matched = members.filter((v) => {
  324 |             const name = itemName(v);

error: 'suffix' is not defined (no-undef) at src/At.vue:438:43:
  436 |         r.setEndBefore(secondPart);
  437 |       } else {
> 438 |         const t = document.createTextNode(suffix);
      |                                           ^
  439 |         r.insertNode(newElement);
  440 |         r.setEndAfter(newElement);
  441 |         r.insertNode(t);

error: 'offset' is assigned a value but never used (no-unused-vars) at src/At.vue:450:16:
  448 |     insertItem() {
  449 |       const {
> 450 |         range, offset, list, cur,
      |                ^
  451 |       } = this.atwho;
  452 |       const {
  453 |         suffix, atItems, itemName, customsEmbedded,

warning: The "insert" event has been triggered but not declared on `emits` option (vue/require-explicit-emits) at src/At.vue:479:18:
  477 |       }
  478 |
> 479 |       this.$emit('insert', curItem);
      |                  ^
  480 |       this.handleInput();
  481 |     },
  482 |     htmlToElement(html) {

error: Assignment to function parameter 'html' (no-param-reassign) at src/At.vue:484:7:
  482 |     htmlToElement(html) {
  483 |       const template = document.createElement('template');
> 484 |       html = html.trim(); // Never return a text node of whitespace as the result
      |       ^
  485 |       template.innerHTML = html;
  486 |       return template.content.firstChild;
  487 |     },

error: 'textarea-caret' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies) at src/AtTextarea.vue:2:1:
  1 | <script>
> 2 | import getCaretCoordinates from 'textarea-caret';
    | ^
  3 | import At from './At.vue';
  4 | import { getAtAndIndex } from './util';
  5 |

error: 'list' is assigned a value but never used (no-unused-vars) at src/AtTextarea.vue:13:11:
  11 |       if (this.atwho) {
  12 |         const {
> 13 |           list, cur, x, y,
     |           ^
  14 |         } = this.atwho;
  15 |         const { wrap } = this.$refs;
  16 |         const el = this.$el.querySelector('textarea');

error: 'cur' is assigned a value but never used (no-unused-vars) at src/AtTextarea.vue:13:17:
  11 |       if (this.atwho) {
  12 |         const {
> 13 |           list, cur, x, y,
     |                 ^
  14 |         } = this.atwho;
  15 |         const { wrap } = this.$refs;
  16 |         const el = this.$el.querySelector('textarea');

error: 'e' is defined but never used (no-unused-vars) at src/AtTextarea.vue:40:18:
  38 |     },
  39 |
> 40 |     handleDelete(e) {
     |                  ^
  41 |       const el = this.$el.querySelector('textarea');
  42 |       const text = el.value.slice(0, el.selectionEnd);
  43 |       if (text) {

warning: The "input" event has been triggered but not declared on `emits` option (vue/require-explicit-emits) at src/AtTextarea.vue:68:18:
  66 |       if (this.hasComposition) return;
  67 |       const el = this.$el.querySelector('textarea');
> 68 |       this.$emit('input', el.value);
     |                  ^
  69 |
  70 |       const text = el.value.slice(0, el.selectionEnd);
  71 |       if (text) {

warning: The "at" event has been triggered but not declared on `emits` option (vue/require-explicit-emits) at src/AtTextarea.vue:94:24:
  92 |           const { members, filterMatch, itemName } = this;
  93 |           if (!keep) { // fixme: should be consistent with At.vue
> 94 |             this.$emit('at', chunk);
     |                        ^
  95 |           }
  96 |           const matched = members.filter((v) => {
  97 |             const name = itemName(v);

error: Assignment to property of function parameter 'ta' (no-param-reassign) at src/AtTextarea.vue:137:7:
  135 |       const start = ta.selectionStart;
  136 |       const end = ta.selectionEnd;
> 137 |       ta.value = ta.value.slice(0, start)
      |       ^
  138 |         + text + ta.value.slice(end);
  139 |       const newEnd = start + text.length;
  140 |       ta.selectionStart = newEnd;

error: Assignment to property of function parameter 'ta' (no-param-reassign) at src/AtTextarea.vue:140:7:
  138 |         + text + ta.value.slice(end);
  139 |       const newEnd = start + text.length;
> 140 |       ta.selectionStart = newEnd;
      |       ^
  141 |       ta.selectionEnd = newEnd;
  142 |       this.dispatchInput();
  143 |     },

error: Assignment to property of function parameter 'ta' (no-param-reassign) at src/AtTextarea.vue:141:7:
  139 |       const newEnd = start + text.length;
  140 |       ta.selectionStart = newEnd;
> 141 |       ta.selectionEnd = newEnd;
      |       ^
  142 |       this.dispatchInput();
  143 |     },
  144 |     insertItem() {

error: 'chunk' is assigned a value but never used (no-unused-vars) at src/AtTextarea.vue:146:9:
  144 |     insertItem() {
  145 |       const {
> 146 |         chunk, offset, list, cur, atEnd,
      |         ^
  147 |       } = this.atwho;
  148 |       const { suffix, atItems, itemName } = this;
  149 |       const el = this.$el.querySelector('textarea');

error: 'offset' is assigned a value but never used (no-unused-vars) at src/AtTextarea.vue:146:16:
  144 |     insertItem() {
  145 |       const {
> 146 |         chunk, offset, list, cur, atEnd,
      |                ^
  147 |       } = this.atwho;
  148 |       const { suffix, atItems, itemName } = this;
  149 |       const el = this.$el.querySelector('textarea');

warning: The "insert" event has been triggered but not declared on `emits` option (vue/require-explicit-emits) at src/AtTextarea.vue:158:18:
  156 |       const t = itemName(curItem) + suffix;
  157 |       this.insertText(t, el);
> 158 |       this.$emit('insert', curItem);
      |                  ^
  159 |       this.handleInput();
  160 |     },
  161 |   },

error: 'element-ui' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies) at src/main.js:1:1:
> 1 | import 'element-ui/lib/theme-chalk/index.css';
    | ^
  2 | import 'vuetify/dist/vuetify.min.css';
  3 | import Vuetify from 'vuetify';
  4 | import ElementUI from 'element-ui';

error: 'vuetify' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies) at src/main.js:2:1:
  1 | import 'element-ui/lib/theme-chalk/index.css';
> 2 | import 'vuetify/dist/vuetify.min.css';
    | ^
  3 | import Vuetify from 'vuetify';
  4 | import ElementUI from 'element-ui';
  5 | import Vue from 'vue';

error: 'vuetify' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies) at src/main.js:3:1:
  1 | import 'element-ui/lib/theme-chalk/index.css';
  2 | import 'vuetify/dist/vuetify.min.css';
> 3 | import Vuetify from 'vuetify';
    | ^
  4 | import ElementUI from 'element-ui';
  5 | import Vue from 'vue';
  6 | import App from './App.vue';

error: 'element-ui' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies) at src/main.js:4:1:
  2 | import 'vuetify/dist/vuetify.min.css';
  3 | import Vuetify from 'vuetify';
> 4 | import ElementUI from 'element-ui';
    | ^
  5 | import Vue from 'vue';
  6 | import App from './App.vue';
  7 |

error: Do not use 'new' for side effects (no-new) at src/main.js:11:1:
   9 | Vue.use(ElementUI);
  10 |
> 11 | new Vue({
     | ^
  12 |   el: '#app',
  13 |   render: (h) => h(App),
  14 | });

error: Assignment to function parameter 'scrollParent' (no-param-reassign) at src/util.js:11:7:
   9 |     const diff = el.offsetTop - scrollParent.scrollTop;
  10 |     if (diff < 0 || diff > scrollParent.offsetHeight - el.offsetHeight) {
> 11 |       scrollParent = scrollParent || el.parentElement;
     |       ^
  12 |       scrollParent.scrollTop = el.offsetTop;
  13 |     }
  14 |   }

error: Assignment to property of function parameter 'scrollParent' (no-param-reassign) at src/util.js:12:7:
  10 |     if (diff < 0 || diff > scrollParent.offsetHeight - el.offsetHeight) {
  11 |       scrollParent = scrollParent || el.parentElement;
> 12 |       scrollParent.scrollTop = el.offsetTop;
     |       ^
  13 |     }
  14 |   }
  15 | }

error: Expected to return a value at the end of function 'getRange' (consistent-return) at src/util.js:24:17:
  22 |   }
  23 | }
> 24 | export function getRange() {
     |                 ^
  25 |   const selection = window.getSelection();
  26 |   if (selection && selection.rangeCount > 0) {
  27 |     return selection.getRangeAt(0);

error: This line has a length of 110. Maximum allowed is 100 (max-len) at src/util.js:32:1:
  30 |
  31 | export function getAtAndIndex(text, ats) {
> 32 |   return ats.map((at) => ({ at, index: text.lastIndexOf(at) })).reduce((a, b) => (a.index > b.index ? a : b));
     | ^
  33 | }
  34 |
  35 | /* eslint-disable */

48 errors and 7 warnings found.

fritx commented 1 year ago

@nsano-rururu yes, agreed, but eslint is now off-topic right now. Let's deal with vue3 first

I've just pushed the wip branch above https://github.com/fritx/vue-at/commits/wip-vue3

...where I've worked out several errors except this one (failing to insert styled tag into editor):

[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes.
A vnode with ref must be created inside the render function.

Official guide I was following: https://v3-migration.vuejs.org/migration-build.html#preparations

nsano-rururu commented 1 year ago

@fritx

It's not irrelevant as eslint will tell you where you need vue3 compatibility with warnings and errors.

I would appreciate it if you could consider it as information that there is such a thing. There is no compulsion to adopt or not.

fritx commented 1 year ago

eslint is done! And now it seems to work. Checkout it out, pls wip-vue3

Any interest in contributing to PR that switches to vite ? @nsano-rururu @XIwen-chuan @PaulSaveur

XIwen-chuan commented 1 year ago

Yes,my pleasure

fritx commented 1 year ago

Here are some updates on vue3 support:

Switching to vue-demi

[ ] use vue-demi to keep one single codebase demo

Switching to vite -- branch: vite

[x] imported and used by a vite app -- demo: vue-at-vite-app
[x] demo build switching to vite
[ ] library build switching to vite
- [x] vite should support multiple library entries -- issue, workround
- [x] vite should support css extract=false -- issue
- workarounds to try
  - [ ] https://github.com/JackFGreen/vite/commit/d82de56e2462707a92a39947745f244ece233f27
  - [x] https://github.com/ruofee/vue-dynamic-form-component/blob/vite/build/ViteSingleCssPlugin.js
- [x] vite should ignore public dir / *.svg issue, discussion
- [x] workaround by shx rm -rf dist/demo
- [ ] testing the vite build
- [x] in local with pnpm --link workaround
- [ ] ensure build es2015 compatible issue

Release

[x] npm publish vue-at@3.0.0-alpha.2
[ ] npm publish vue-at@3.0.0

Some other related work by community

https://github.com/rppet/vue-at/commits/main

nsano-rururu commented 1 year ago

@fritx @XIwen-chuan

I've tried it locally so far. I don't know how to fix existing vue-cli commands to vite commands.

.eslintrc.js

add

    eqeqeq: 'off',
    'no-tabs': 'off',

index.html

add 「」

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>vue-at</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="dist/demo.js"></script>
    <script type="module" src="/src/main.js"></script>
</body>
</html>

[new]vite.config.js


import { defineConfig } from 'vite'
import path from 'path'
import envCompatible from 'vite-plugin-env-compatible'
import { createHtmlPlugin } from 'vite-plugin-html'
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: [
      {
        find: /^~/,
        replacement: ''
      },
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src')
      }
    ],
    extensions: [
      '.mjs',
      '.js',
      '.ts',
      '.jsx',
      '.tsx',
      '.json',
      '.vue'
    ]
  },
  plugins: [
    vue(),
    viteCommonjs(),
    envCompatible(),
    createHtmlPlugin({
      inject: {
        data: {
          title: 'vue-at'
        }
      }
    })
  ],
  css: {
    preprocessorOptions: {
      sass: {},
      scss: {}
    }
  },
  build: {}
})

package.json

add

"prepublish": "npm run build", "serve-vite": "vite", "build-vite": "vite build", "preview-vite": "vite preview"

"@vitejs/plugin-vue": "^3.0.1", "@originjs/vite-plugin-commonjs": "^1.0.1", "vite": "^3.0.1", "vite-plugin-env-compatible": "^1.1.1", "vite-plugin-html": "3.2.0",

{
  "name": "vue-at",
  "description": "At.js for Vue",
  "version": "3.0.0-alpha.0",
  "author": "Fritz Lin <uxfritz@163.com>",
  "repository": "https://github.com/fritx/vue-at",
  "scripts": {
    "lint:fix": "vue-cli-service lint",
    "lint": "vue-cli-service lint --no-fix",
    "dev:dist": "vue-cli-service serve --skip-plugins eslint",
    "dev": "vue-cli-service serve",
    "build:at": "vue-cli-service build ./src/At.vue --target lib --name vue-at",
    "build:at-ta": "vue-cli-service build ./src/AtTextarea.vue --target lib --name vue-at-textarea",
    "build": "rimraf dist && run-p build:at build:at-ta && rimraf dist/demo.html",
    "prepublish": "npm run build",
    "serve-vite": "vite",
    "build-vite": "vite build",
    "preview-vite": "vite preview"
  },
  "main": "dist/vue-at.common.js",
  "engines": {
    "node": ">= 14.x"
  },
  "dependencies": {
    "@vitejs/plugin-vue": "^3.0.1",
    "textarea-caret": "^3.1.0"
  },
  "peerDependencies": {
    "vue": "3.x"
  },
  "devDependencies": {
    "@babel/core": "^7.18.9",
    "@originjs/vite-plugin-commonjs": "^1.0.1",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
    "@vue/compat": "^3.1.0",
    "@vue/compiler-sfc": "^3.1.0",
    "@vue/eslint-config-standard": "^8.0.1",
    "element-plus": "^2.2.12",
    "eslint": "^8.21.0",
    "eslint-plugin-vue": "^9.3.0",
    "npm-run-all": "^4.1.5",
    "rimraf": "^3.0.2",
    "sass": "^1.53.0",
    "sass-loader": "^13.0.2",
    "vite": "^3.0.1",
    "vite-plugin-env-compatible": "^1.1.1",
    "vite-plugin-html": "3.2.0",
    "vue": "^3.1.0",
    "vue-loader": "^16.0.0",
    "webpack": "^5.73.0"
  }
}

fritx commented 1 year ago

@nsano-rururu cool, I'll take a look later

Also see https://github.com/fritx/vue-at/issues/137#issuecomment-1209312579 Check my branch out, it seems to work now: wip-vite

nsano-rururu commented 1 year ago

@fritx

There is no problem other than eslint errors.

[CORP\sano@a-19f9vs8e9ite4 vue-at]$ npm run lint

> vue-at@3.0.0-alpha.0 lint
> eslint --ext .js,.vue --ignore-path .gitignore src

/home/sano/dkwork3/e/vue-at/src/util.js
   8:22  error  Expected '===' and instead saw '=='  eqeqeq
  14:27  error  Unexpected tab character             no-tabs
  15:21  error  Unexpected tab character             no-tabs
  19:20  error  Expected '===' and instead saw '=='  eqeqeq
  25:26  error  Expected '!==' and instead saw '!='  eqeqeq

✖ 5 problems (5 errors, 0 warnings)

fritx commented 1 year ago

@nsano-rururu ah that's fixed. and 3.0.0-alpha.0 was already released.

npm i -S vue-at@3.0.0-alpha.2
# or
npm i -S vue-at@next

demo: https://github.com/we-demo/vue-at-vite-app

progress: https://github.com/fritx/vue-at/issues/137#issuecomment-1209312579

fritx commented 1 year ago

@nsano-rururu i'm not sure how to still support babel es2015-safe build via vite, any idea?

https://github.com/fritx/vue-at/issues/137#issuecomment-1209312579

nsano-rururu commented 1 year ago

Sounds like you need to look into babel-preset-env options. https://babeljs.io/docs/en/env/

nsano-rururu commented 1 year ago

babel-preset-env seems to transpile everything to ES5 notation if no options are specified.

fritx commented 1 year ago

@nsano-rururu but i could not manage to make babel work well with vite (library mode) 😢 https://github.com/vitejs/vite/issues/1639

nsano-rururu commented 1 year ago

@fritx Isn't it better not to move to vite yet?. I think it's better to migrate to vite after a solution is found.

nsano-rururu commented 1 year ago

@fritx It seems that the stable version of vuetify3 compatible with vue3 has been released https://github.com/vuetifyjs/vuetify/releases/tag/v3.0.0

junaidshad commented 1 year ago

What is the update on this? we're receiving webpack issues on "vue-at@next" branch (upgrading while migration: using compat build)

fritx commented 1 year ago

@junaidshad try vue-at@latest first. Is there a minimal demo?

fritx commented 1 year ago

@junaidshad also try the umd way, it can be a fallback solution https://github.com/fritx/vue-at/blob/vue3/test_umd.html https://github.com/fritx/vue-at/tree/vue3#umd-also-supported

junaidshad commented 1 year ago

@fritx Yes, It worked the umd way.

fritx / vue-at

Do you have any plans to support vue3? #137