switching to vite !! + umd support -- #137

vuetifyjs/vuetify#4068 (comment)
vuejs/core#4344 (comment)

.eslintignore

@@ -0,0 +1,3 @@
+/dist/
+/dist_demo/
+/package/dist/

.eslintrc.js

@@ -0,0 +1,38 @@
+module.exports = {
+  root: true,
+  extends: [
+    // https://eslint.vuejs.org/user-guide/#installation
+    // add more generic rulesets here, such as:
+    'eslint:recommended',
+    '@vue/standard',
+    // 'plugin:vue/vue3-recommended',
+    'plugin:vue/recommended', // Use this if you are using Vue.js 2.x.
+  ],
+  rules: {
+    'space-before-function-paren': 'warn',
+    'operator-linebreak': 'warn',
+    'no-tabs': 'warn',
+    'no-new': 'warn',
+    eqeqeq: 'warn',
+    indent: 'warn',
+    quotes: 'warn',
+    semi: 'warn',
+    'vue/multi-word-component-names': 'off',
+    'no-var': 'off',
+    // ...
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/first-attribute-linebreak': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'vue/order-in-components': 'off',
+    'vue/attributes-order': 'off',
+    'vue/html-indent': 'off',
+    'no-irregular-whitespace': 'off',
+    'no-mixed-operators': 'off',
+    'no-unused-vars': 'off',
+    'prefer-const': 'off',
+    'comma-dangle': 'off',
+    'max-len': 'off',
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  }
+}

.gitignore

@@ -1,5 +1,8 @@
 .DS_Store
 node_modules*/
 dist/
+dist_demo/
+package/
+*.tgz
 npm-debug.log
 yarn-error.log

README.md

@@ -12,57 +12,72 @@ Live Demo & Documentation: https://fritx.github.io/vue-at
 - [x] Plain-text based, no jQuery, no extra nodes
 - [x] Content-Editable / Textarea
 - [x] Avatars, custom templates
-- [x] Vue3 / Vue2 / Vue1
+- [x] Vite / Vue3 / Vue2 / Vue1
 - [x] Vuetify / Element UI / Element Plus
-- [ ] Vue-CLI migration
-- [ ] Vite migration
+- [x] CommonJS / UMD Support
 
 See also: [react-at](https://github.com/fritx/react-at)
 
-## Motivation
-
-[At.js](https://github.com/ichord/At.js) is awesome, but:
-
-- It is based on jQuery and jQuery-Caret.
-- It introduces extra node wrappers.
-- It could be unstable on content edit/copy/paste.
-
-Finally I ended up creating this.
-
 for Vue3, read [this one](https://github.com/fritx/vue-at/tree/vue3#readme) instead.
 
 ```plain
-npm i vue-at@next  # for Vue3 (branch wip-vue3)
-
-npm i [email protected]  # for Vue2  <----
-npm i [email protected]  # for Vue1 (branch vue1-legacy)
-npm i vue1-at  # for Vue1 (branch vue1-new)
+npm i -S vue-at@next  # for Vue3 (branch vue3)
+npm i -S [email protected]  # for Vue2  (branch vue2)
+npm i -S [email protected]  # for Vue1 (branch vue1-legacy)
+npm i -S vue1-at  # for Vue1 (branch vue1-new)
 ```
 
 ```vue
 <template>
   <at :members="members">
     <div contenteditable></div>
   </at>
+  <at-ta :members="members">
+    <textarea></textarea>
+  </at-ta>
 </template>
 
 <script>
-import At from 'vue-at'
+import At from 'vue-at' // for content-editable
+import AtTa from 'vue-at/dist/vue-at-textarea' // for textarea
 
 export default {
-  components: { At },
+  components: { At, AtTa },
   data () {
     return {
       members: ['Roxie Miles', 'grace.carroll', '小浩']
     }
   }
 }
 </script>
+```
 
-<style>
-#app .atwho-view { /* more */ }
-#app .atwho-ul { /* more */ }
-</style>
+## UMD Also Supported
+
+```html
+<!-- fpr Vue3 -->
+<script src="//unpkg.com/vue@3"></script>
+<script src="//unpkg.com/vue-at@next/dist/vue-at.umd.js"></script>
+<script src="//unpkg.com/vue-at@next/dist/vue-at-textarea.umd.js"></script>
+<!-- ... -->
+
+<!-- fpr Vue2 -->
+<script src="//unpkg.com/vue@2"></script>
+<script src="//unpkg.com/vue-at@2/dist/vue-at.umd.js"></script>
+<script src="//unpkg.com/vue-at@2/dist/vue-at-textarea.umd.js"></script>
+<div id="app">
+  <at>
+    <div contenteditable></div>
+  </at>
+  <at-textarea>
+    <textarea></textarea>
+  </at-textarea>
+</div>
+<script>
+Vue.component('at', At)
+Vue.component('at-textarea', AtTextarea)
+new Vue(/* ... */)
+</script>
 ```
 
 ## Using V-Model (Recommended)
@@ -74,35 +89,11 @@ With Textarea, `v-model` should be bound in `<textarea>` itself.
 <at v-model="html">
   <div contenteditable></div>
 </at>
-
 <at-ta>
   <textarea v-model="text"></textarea>
 </at-ta>
 ```
 
-## Textarea
-
-```vue
-<template>
-  <at-ta>
-    <textarea></textarea>
-  </at-ta>
-</template>
-
-<script>
-// import At from 'vue-at' // for content-editable
-import AtTa from 'vue-at/dist/vue-at-textarea' // for textarea
-
-export default {
-  components: { AtTa }
-}
-</script>
-```
-
-```plain
-npm i -S textarea-caret  # also, for textarea
-```
-
 ## Custom Templates
 
 ### Custom List
@@ -176,7 +167,7 @@ This gives you the option of changing the style of inserted tagged items. It is
 </at-ta>
 ```
 
-### Element-UI el-input
+### Element UI / Element-Plus el-input
 
 ```vue
 <at-ta :members="members">

build/ViteSingleCssPlugin.js

@@ -0,0 +1,47 @@
+// supports vite css.extract=false.
+// credits: @ruofee
+// https://github.com/vitejs/vite/issues/4345#issuecomment-1073734133
+// https://github.com/ruofee/vue-dynamic-form-component/blob/vite/build/ViteSingleCssPlugin.js
+
+let packageNames = []
+let viteConfig
+let IIFEcss
+
+// __notice__: this is for package.json without `type=module`
+// https://vitejs.dev/guide/build.html#library-mode
+// https://nodejs.org/api/packages.html#type
+let extMap = {
+  cjs: '.js',
+  es: '.mjs',
+  umd: '.umd.js',
+}
+
+// 将 css 打包到 js 文件中
+export default function () {
+  return {
+    apply: 'build',
+    enforce: 'post',
+    name: 'pack-css',
+    configResolved (config) {
+      viteConfig = config
+      packageNames = viteConfig.build.lib.formats.map(format => {
+        return viteConfig.build.lib.fileName + extMap[format]
+      })
+    },
+    generateBundle (_, bundle) {
+      const cssFileName = 'style.css'
+      const { [cssFileName]: cssBundle } = bundle
+      if (cssBundle) {
+        IIFEcss = `(function() {try {var elementStyle = document.createElement('style');elementStyle.textContent = ${JSON.stringify(
+          cssBundle.source
+        )};document.head.appendChild(elementStyle);} catch(error) {console.error(error, 'unable to concat style inside the bundled file')}})()`
+        delete bundle[cssFileName]
+      }
+      packageNames.forEach(packageName => {
+        if (bundle[packageName]) {
+          bundle[packageName].code += ';;' + IIFEcss + ';;'
+        }
+      })
+    }
+  }
+}

index.html

@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width">
-    <title>vue-at</title>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="demo/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Demo: 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>

package.json

@@ -5,60 +5,43 @@
   "author": "Fritz Lin <[email protected]>",
   "repository": "https://github.com/fritx/vue-at",
   "scripts": {
-    "dev": "webpack serve --config webpack/demo --open --inline --hot --mode development",
-    "demo": "webpack --config webpack/demo --progress --mode development",
-    "build": "webpack --config webpack/prod --progress --mode production",
+    "lint:fix": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore src",
+    "dev": "vite --force --config vite.demo.config.js",
+    "dev:local-testing": "cross-env LOCAL_TESTING=1 vite --force --config vite.demo.config.js",
+    "demo": "vite build --base ./ --config vite.demo.config.js",
+    "build": "shx rm -rf dist && run-s build:at build:at-ta && shx rm -rf dist/demo",
+    "build:at": "vite build --config vite.config.1.js",
+    "build:at-ta": "vite build --config vite.config.2.js",
     "prepublish": "npm run build"
   },
-  "main": "dist/vue-at.js",
+  "main": "dist/vue-at",
   "files": [
     "dist"
   ],
   "engines": {
     "node": ">= 14.x"
   },
+  "dependencies": {
+    "textarea-caret": "^3.1.0"
+  },
   "peerDependencies": {
     "vue": "2.x"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-decorators": "^7.18.9",
-    "@babel/plugin-proposal-do-expressions": "^7.18.6",
-    "@babel/plugin-proposal-export-default-from": "^7.18.9",
-    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@babel/plugin-proposal-function-bind": "^7.18.9",
-    "@babel/plugin-proposal-function-sent": "^7.18.6",
-    "@babel/plugin-proposal-json-strings": "^7.18.6",
-    "@babel/plugin-proposal-logical-assignment-operators": "^7.18.9",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-    "@babel/plugin-proposal-numeric-separator": "^7.18.6",
-    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
-    "@babel/plugin-proposal-pipeline-operator": "^7.18.9",
-    "@babel/plugin-proposal-throw-expressions": "^7.18.6",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/preset-env": "^7.18.9",
-    "babel-loader": "^8.2.5",
-    "babel-preset-minify": "^0.5.2",
+    "@vue/eslint-config-standard": "^8.0.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^0.28.11",
     "element-ui": "^2.15.9",
-    "file-loader": "^6.2.0",
+    "eslint": "^8.21.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "lodash": "^4.17.21",
+    "npm-run-all": "^4.1.5",
     "sass": "^1.53.0",
-    "sass-loader": "^13.0.2",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.3.3",
-    "textarea-caret": "^3.1.0",
-    "url-loader": "^4.1.1",
+    "shx": "^0.3.4",
+    "vite": "^3.0.5",
+    "vite-plugin-vue2": "^2.0.2",
     "vue": "^2.7.8",
-    "vue-hot-reload-api": "^2.3.4",
-    "vue-loader": "^14.2.4",
-    "vue-style-loader": "^4.1.3",
-    "vue-template-compiler": "^2.7.8",
-    "vuetify": "^2.6.7",
-    "webpack": "^5.73.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^3.11.0"
+    "vue-template-compiler": "^2.7.10",
+    "vuetify": "^2.6.7"
   }
 }