Skip to content

Commit ac33441

Browse files
loguelogue
committed
Update demo code.
(Changed eslint-linter-browserify from eslint4b for JS linter demo)
1 parent 9b9eecd commit ac33441

File tree

6 files changed

+239
-216
lines changed

6 files changed

+239
-216
lines changed

‎.github/workflows/build-docs.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ jobs:
2929
yarn build:docs
3030
3131
- name: Deploy to gh-pages 🚀
32-
uses: JamesIves/github-pages-deploy-action@v4.3.3
32+
uses: JamesIves/github-pages-deploy-action@v4.4.0
3333
with:
3434
branch: gh-pages # The branch the action should deploy to.
3535
folder: docs # The folder the action should deploy.

‎dev/App.vue‎

Lines changed: 74 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,82 @@
11
<!-- eslint-disable vuejs-accessibility/anchor-has-content -->
22
<template>
33
<div>
4-
<header>
5-
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
6-
<div class="container-fluid d-flex justify-content-between">
7-
<a class="navbar-brand" href="#">Vue CodeMirror6</a>
8-
<button
9-
class="navbar-toggler"
10-
type="button"
11-
data-bs-toggle="collapse"
12-
data-bs-target="#navbarCollapse"
13-
aria-controls="navbarCollapse"
14-
aria-expanded="false"
15-
aria-label="Toggle navigation"
16-
>
17-
<span class="navbar-toggler-icon" />
18-
</button>
19-
<div id="navbarCollapse" class="collapse navbar-collapse flex-grow-0">
20-
<ul class="navbar-nav">
21-
<li class="nav-item">
22-
<a
23-
class="nav-link"
24-
href="https://github.com/logue/vue-codemirror6"
4+
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
5+
<div class="container-fluid d-flex justify-content-between">
6+
<a class="navbar-brand" href="#">Vue CodeMirror6</a>
7+
<button
8+
class="navbar-toggler"
9+
type="button"
10+
data-bs-toggle="collapse"
11+
data-bs-target="#navbarCollapse"
12+
aria-controls="navbarCollapse"
13+
aria-expanded="false"
14+
aria-label="Toggle navigation"
15+
>
16+
<span class="navbar-toggler-icon" />
17+
</button>
18+
<div id="navbarCollapse" class="collapse navbar-collapse flex-grow-0">
19+
<ul class="navbar-nav">
20+
<li class="nav-item">
21+
<a
22+
class="nav-link"
23+
href="https://github.com/logue/vue-codemirror6"
24+
>
25+
<svg
26+
xmlns="http://www.w3.org/2000/svg"
27+
width="16"
28+
height="16"
29+
fill="currentColor"
30+
class="bi bi-github"
31+
viewBox="0 0 16 16"
32+
>
33+
<path
34+
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
35+
/>
36+
</svg>
37+
</a>
38+
</li>
39+
<li class="nav-item">
40+
<a class="nav-link" href="#" @click="dark = !dark">
41+
<svg
42+
xmlns="http://www.w3.org/2000/svg"
43+
width="16"
44+
height="16"
45+
fill="currentColor"
46+
class="bi bi-circle-half"
47+
viewBox="0 0 16 16"
2548
>
26-
<svg
27-
xmlns="http://www.w3.org/2000/svg"
28-
width="16"
29-
height="16"
30-
fill="currentColor"
31-
class="bi bi-github"
32-
viewBox="0 0 16 16"
33-
>
34-
<path
35-
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
36-
/>
37-
</svg>
38-
</a>
39-
</li>
40-
<li class="nav-item">
41-
<a class="nav-link" href="#" @click="dark = !dark">
42-
<svg
43-
xmlns="http://www.w3.org/2000/svg"
44-
width="16"
45-
height="16"
46-
fill="currentColor"
47-
class="bi bi-circle-half"
48-
viewBox="0 0 16 16"
49-
>
50-
<path
51-
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
52-
/>
53-
</svg>
54-
</a>
55-
</li>
56-
</ul>
57-
</div>
49+
<path
50+
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
51+
/>
52+
</svg>
53+
</a>
54+
</li>
55+
</ul>
5856
</div>
59-
</nav>
57+
</div>
58+
</nav>
59+
<header class="bg-light">
60+
<div class="container py-3">
61+
<h1>Vue CodeMirror6 Demo</h1>
62+
<p class="lead">
63+
A rough demo of Vue Codemirror in action. You can switch between dark
64+
modes from the
65+
<svg
66+
xmlns="http://www.w3.org/2000/svg"
67+
width="16"
68+
height="16"
69+
fill="currentColor"
70+
class="bi bi-circle-half"
71+
viewBox="0 0 16 16"
72+
>
73+
<path
74+
d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
75+
/>
76+
</svg>
77+
icon in the upper left.
78+
</p>
79+
</div>
6080
</header>
6181

6282
<main class="flex-shrink-0 pt-4 bg-white">

‎dev/DemoPage.vue‎

Lines changed: 41 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,7 @@
22
<!-- eslint-disable vuejs-accessibility/label-has-for -->
33
<template>
44
<div class="container">
5-
<section class="mb-5">
6-
<h1>Vue CodeMirror6 Demo</h1>
7-
<p>
8-
A rough demo of Vue Codemirror in action. You can switch between dark
9-
modes from the
10-
<svg
11-
xmlns="http://www.w3.org/2000/svg"
12-
width="16"
13-
height="16"
14-
fill="currentColor"
15-
class="bi bi-circle-half"
16-
viewBox="0 0 16 16"
17-
>
18-
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" />
19-
</svg>
20-
icon in the upper left.
21-
</p>
22-
</section>
23-
<section class="mb-5">
5+
<section class="mb-3">
246
<h2>Markdown Editor Demo</h2>
257
<p>
268
This is an example of simply pouring text into CodeMirror using
@@ -153,7 +135,7 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru
153135
.
154136
</p>
155137
</section>
156-
<section>
138+
<section class="mb-3">
157139
<h2>Slot Method</h2>
158140
<p>
159141
In this sample, the text is put directly inside the
@@ -179,7 +161,7 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru
179161
<pre>How razorback-jumping frogs can level six piqued gymnasts!</pre>
180162
</code-mirror>
181163
</section>
182-
<section>
164+
<section class="mb-3">
183165
<h2>Linter and cross binding demo</h2>
184166
<p>This is a sample using JavaScript and linter.</p>
185167
<p>
@@ -205,8 +187,11 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru
205187
</p>
206188
<p>
207189
This sample uses
208-
<a href="https://github.com/marijnh/eslint4b-prebuilt" target="_blank">
209-
eslint4b-prebuilt
190+
<a
191+
href="https://github.com/UziTech/eslint-linter-browserify"
192+
target="_blank"
193+
>
194+
eslint-linter-browserify
210195
</a>
211196
for the eslint linter.
212197
</p>
@@ -238,7 +223,7 @@ import { defineComponent } from 'vue';
238223
import CodeMirror from 'vue-codemirror6';
239224

240225
import { javascript, esLint } from '@codemirror/lang-javascript';
241-
import Linter from "eslint4b-prebuilt";
226+
import eslint from 'eslint-linter-browserify';
242227

243228
export default defineComponent({
244229
components: {
@@ -254,8 +239,21 @@ export default defineComponent({
254239

255240
/** CodeMirror Language */
256241
const cmLang = javascript();
257-
/** CodeMirror Linter */
258-
const cmLinter = esLint(new Linter());
242+
/** JavaScript Linter */
243+
const cmLinter = esLint(
244+
// eslint-disable-next-line
245+
new eslint.Linter(),
246+
{
247+
parserOptions: {
248+
ecmaVersion: 2022,
249+
sourceType: 'module',
250+
},
251+
env: {
252+
browser: true,
253+
node: true,
254+
},
255+
}
256+
);
259257

260258
return {
261259
value,
@@ -278,6 +276,7 @@ export default defineComponent({
278276
:linter="cmLintJs"
279277
:dark="dark"
280278
lint-gutter
279+
warp
281280
basic
282281
/>
283282
</div>
@@ -292,7 +291,7 @@ export default defineComponent({
292291
</div>
293292
<p>Also, make sure that changing either value reflects that value.</p>
294293
</section>
295-
<section class="mb-3">
294+
<section>
296295
<h2>
297296
Toggle
298297
<a
@@ -368,7 +367,7 @@ import { javascript, esLint } from '@codemirror/lang-javascript';
368367
import { markdown as md } from '@codemirror/lang-markdown';
369368
import { html } from '@codemirror/lang-html';
370369
371-
import Linter from 'eslint4b-prebuilt';
370+
import eslint from 'eslint-linter-browserify';
372371
373372
export default defineComponent({
374373
components: {
@@ -402,7 +401,20 @@ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseru
402401
/** JavaScript */
403402
const cmLangJs = javascript();
404403
/** JavaScript Linter */
405-
const cmLintJs = esLint(new Linter());
404+
const cmLintJs = esLint(
405+
// eslint-disable-next-line
406+
new eslint.Linter(),
407+
{
408+
parserOptions: {
409+
ecmaVersion: 2022,
410+
sourceType: 'module',
411+
},
412+
env: {
413+
browser: true,
414+
node: true,
415+
},
416+
}
417+
);
406418
407419
const cmTheme = ref({
408420
'.cm-lineWrapping': {

‎package.json‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
"./sfc": "./src/components/CodeMirror.ts"
5252
},
5353
"engines": {
54-
"node": ">=16.17.0",
54+
"node": ">=16.17.1",
5555
"yarn": ">=1.22.10"
5656
},
5757
"packageManager": "[email protected]",
@@ -72,7 +72,7 @@
7272
"vue-demi": "latest"
7373
},
7474
"peerDependencies": {
75-
"@vue/composition-api": "^1.7.0",
75+
"@vue/composition-api": "^1.7.1",
7676
"codemirror": "^6.0.1",
7777
"vue": "^2.6.14 || ^3.2.39"
7878
},
@@ -82,37 +82,37 @@
8282
}
8383
},
8484
"devDependencies": {
85-
"@codemirror/lang-javascript": "^6.0.2",
85+
"@codemirror/lang-javascript": "^6.1.0",
8686
"@codemirror/lang-markdown": "^6.0.1",
8787
"@types/lodash": "^4.14.185",
88-
"@types/node": "^18.7.18",
89-
"@typescript-eslint/eslint-plugin": "^5.37.0",
90-
"@typescript-eslint/parser": "^5.37.0",
88+
"@types/node": "^18.7.23",
89+
"@typescript-eslint/eslint-plugin": "^5.38.1",
90+
"@typescript-eslint/parser": "^5.38.1",
9191
"@vitejs/plugin-vue": "^3.1.0",
9292
"@vue/eslint-config-prettier": "^7.0.0",
9393
"@vue/tsconfig": "^0.1.3",
9494
"codemirror": "^6.0.1",
95-
"eslint": "^8.23.1",
95+
"eslint": "^8.24.0",
9696
"eslint-config-google": "^0.14.0",
9797
"eslint-config-prettier": "^8.5.0",
9898
"eslint-import-resolver-alias": "^1.1.2",
9999
"eslint-import-resolver-typescript": "^3.5.1",
100+
"eslint-linter-browserify": "^8.24.0",
100101
"eslint-plugin-html": "^7.1.0",
101102
"eslint-plugin-import": "^2.26.0",
102103
"eslint-plugin-jsdoc": "^39.3.6",
103104
"eslint-plugin-tsdoc": "^0.2.17",
104-
"eslint-plugin-vue": "^9.4.0",
105+
"eslint-plugin-vue": "^9.5.1",
105106
"eslint-plugin-vuejs-accessibility": "^1.2.0",
106107
"eslint-plugin-yaml": "^0.5.0",
107-
"eslint4b-prebuilt": "^6.7.2",
108108
"husky": "^8.0.1",
109109
"lint-staged": "^13.0.3",
110110
"lodash": "^4.17.21",
111111
"prettier": "^2.7.1",
112112
"rimraf": "^3.0.2",
113-
"rollup-plugin-visualizer": "^5.8.1",
113+
"rollup-plugin-visualizer": "^5.8.2",
114114
"typescript": "^4.8.3",
115-
"vite": "^3.1.1",
115+
"vite": "^3.1.3",
116116
"vite-plugin-banner": "^0.5.0",
117117
"vite-plugin-checker": "^0.5.1",
118118
"vue": "^3.2.39",

‎vite.config.docs.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ const config: UserConfig = {
5959
'@codemirror/lang-javascript',
6060
'@codemirror/lang-markdown',
6161
],
62-
eslint4b: ['eslint4b-prebuilt'],
62+
eslint: ['eslint-linter-browserify'],
6363
},
6464
},
6565
},

0 commit comments

Comments
 (0)