Skip to content

Commit

Permalink
switching to vite !! + umd support -- #137
Browse files Browse the repository at this point in the history
  • Loading branch information
fritx committed Sep 2, 2022
1 parent 85b4a88 commit 99fd47b
Show file tree
Hide file tree
Showing 20 changed files with 327 additions and 290 deletions.
39 changes: 0 additions & 39 deletions .babelrc

This file was deleted.

3 changes: 3 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
/dist/
/dist_demo/
/package/dist/
39 changes: 39 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
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'
}
}
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
.DS_Store
node_modules*/
dist/
dist_demo/
package/
*.tgz
npm-debug.log
yarn-error.log
89 changes: 40 additions & 49 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 vue-at@2.x # for Vue2 <----
npm i vue-at@1.x # 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 vue-at@2.x # for Vue2 (branch vue2)
npm i -S vue-at@1.x # 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)
Expand All @@ -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
Expand Down Expand Up @@ -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">
Expand Down
47 changes: 47 additions & 0 deletions build/ViteSingleCssPlugin.js
Original file line number Diff line number Diff line change
@@ -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 + ';;'
}
})
}
}
}
9 changes: 5 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
@@ -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>
61 changes: 22 additions & 39 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,60 +5,43 @@
"author": "Fritz Lin <uxfritz@163.com>",
"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"
}
}
File renamed without changes
File renamed without changes
1 change: 1 addition & 0 deletions public/demo/vite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 99fd47b

Please sign in to comment.