Skip to content

Commit 8925565

Browse files
MartinKaneraMartinKanera
authored
feat: new demo for Vue integration tutorial (#6)
1 parent 31d4549 commit 8925565

17 files changed

+181
-181
lines changed

‎.browserslistrc

-3
This file was deleted.

‎.gitignore

-21
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,6 @@
11
.DS_Store
22
node_modules
3-
/dist
43
package-lock.json
54

6-
7-
# local env files
8-
.env.local
9-
.env.*.local
10-
11-
# Log files
12-
npm-debug.log*
13-
yarn-debug.log*
14-
yarn-error.log*
15-
pnpm-debug.log*
16-
17-
# Editor directories and files
18-
.idea
19-
.vscode
20-
*.suo
21-
*.ntvs*
22-
*.njsproj
23-
*.sln
24-
*.sw?
25-
265
# rappid
276
rappid.tgz

‎README.md

+18-3
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ To run the following code, you will need a [JointJS+ license](https://www.jointj
1010

1111
Make sure you have the following dependencies installed on your system:
1212

13-
- [Node.js](https://nodejs.org/en/)
13+
- [Node.js >= 16.0](https://nodejs.org/en/)
1414
- git
1515

1616
#### Setup
@@ -38,7 +38,22 @@ npm install
3838
Your demo is now ready to start.
3939

4040
```
41-
npm run serve
41+
npm run dev
4242
```
4343

44-
You should be able to view the demo at `http://localhost:8080/`.
44+
You should be able to view the demo at `http://localhost:5173/`.
45+
46+
## Recommended IDE Setup
47+
48+
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
49+
50+
## Type Support for `.vue` Imports in TS
51+
52+
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
53+
54+
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
55+
56+
1. Disable the built-in TypeScript Extension
57+
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
58+
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
59+
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

‎babel.config.js

-5
This file was deleted.

‎env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="icon" href="/favicon.ico">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎package.json

+26-16
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,36 @@
11
{
2-
"name": "rappid-tutorial-vue3",
3-
"version": "0.1.0",
2+
"name": "vue-documentation",
3+
"version": "0.0.0",
44
"private": true,
55
"scripts": {
6-
"serve": "vue-cli-service serve",
7-
"build": "vue-cli-service build"
6+
"dev": "vite",
7+
"build": "run-p type-check build-only",
8+
"preview": "vite preview",
9+
"build-only": "vite build",
10+
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
11+
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
12+
"format": "prettier --write src/"
813
},
914
"dependencies": {
10-
"@clientio/rappid": "file:rappid.tgz",
11-
"core-js": "^3.6.5",
12-
"vue": "^3.0.0",
13-
"vue-class-component": "^8.0.0-0"
15+
"vue": "^3.3.4",
16+
"@clientio/rappid": "file:rappid.tgz"
1417
},
1518
"devDependencies": {
19+
"@rushstack/eslint-patch": "^1.3.2",
20+
"@tsconfig/node18": "^18.2.0",
21+
"@types/node": "^18.17.0",
22+
"@vitejs/plugin-vue": "^4.2.3",
23+
"@vue/eslint-config-prettier": "^8.0.0",
24+
"@vue/eslint-config-typescript": "^11.0.3",
25+
"@vue/tsconfig": "^0.4.0",
26+
"eslint": "^8.45.0",
27+
"eslint-plugin-vue": "^9.15.1",
28+
"npm-run-all": "^4.1.5",
29+
"prettier": "^3.0.0",
30+
"typescript": "~5.1.6",
31+
"vite": "^4.4.6",
32+
"vue-tsc": "^1.8.6",
1633
"@types/backbone": "latest",
17-
"@types/jquery": "latest",
18-
"@vue/cli-plugin-babel": "~4.5.0",
19-
"@vue/cli-plugin-typescript": "~4.5.0",
20-
"@vue/cli-service": "~4.5.0",
21-
"@vue/compiler-sfc": "^3.0.0",
22-
"sass": "^1.26.5",
23-
"sass-loader": "^8.0.2",
24-
"typescript": "~4.1.5"
34+
"@types/jquery": "latest"
2535
}
2636
}

‎public/index.html

-17
This file was deleted.

‎src/App.vue

+53-72
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,61 @@
1-
<template>
2-
<div class="canvas" ref="canvas"></div>
3-
</template>
4-
5-
<script lang="ts">
6-
import { Options, Vue } from 'vue-class-component';
7-
import { dia, ui, shapes } from '@clientio/rappid';
8-
9-
@Options({})
10-
export default class App extends Vue {
11-
declare public $refs: {
12-
canvas: HTMLDivElement;
1+
<script setup lang="ts">
2+
import { ref, onMounted } from 'vue';
3+
import { dia, ui, shapes } from '@clientio/rappid/rappid.js';
4+
5+
const canvas = ref<Element | null>(null);
6+
7+
const graph = new dia.Graph({}, {
8+
cellNamespace: shapes
9+
});
10+
const paper = new dia.Paper({
11+
model: graph,
12+
background: {
13+
color: '#F8F9FA'
14+
},
15+
frozen: true,
16+
async: true,
17+
sorting: dia.Paper.sorting.APPROX,
18+
cellViewNamespace: shapes
19+
});
20+
21+
const scroller = new ui.PaperScroller({
22+
paper,
23+
autoResizePaper: true,
24+
cursor: 'grab'
25+
});
26+
27+
scroller.render();
28+
29+
const rect = new shapes.standard.Rectangle({
30+
position: { x: 100, y: 100 },
31+
size: { width: 100, height: 50 },
32+
attrs: {
33+
label: {
34+
text: 'Hello World'
35+
}
1336
}
37+
});
1438
15-
private graph: dia.Graph;
16-
private paper: dia.Paper;
17-
private scroller: ui.PaperScroller;
39+
graph.addCell(rect);
1840
19-
public created(): void {
20-
const graph = this.graph = new dia.Graph({}, { cellNamespace: shapes });
21-
22-
const paper = this.paper = new dia.Paper({
23-
model: graph,
24-
background: {
25-
color: '#F8F9FA',
26-
},
27-
frozen: true,
28-
async: true,
29-
sorting: dia.Paper.sorting.APPROX,
30-
cellViewNamespace: shapes
31-
});
32-
33-
const scroller = this.scroller = new ui.PaperScroller({
34-
paper,
35-
autoResizePaper: true,
36-
cursor: 'grab'
37-
});
38-
39-
scroller.render();
40-
41-
const rect = new shapes.standard.Rectangle({
42-
position: { x: 100, y: 100 },
43-
size: { width: 100, height: 50 },
44-
attrs: {
45-
label: {
46-
text: 'Hello World'
47-
}
48-
}
49-
});
50-
51-
this.graph.addCell(rect);
52-
}
53-
54-
public mounted(): void {
55-
const { scroller, paper, $refs : { canvas } } = this;
56-
canvas.appendChild(this.scroller.el);
57-
scroller.center();
58-
paper.unfreeze();
59-
}
60-
}
41+
onMounted(() => {
42+
canvas.value?.appendChild(scroller.el);
43+
scroller.center();
44+
paper.unfreeze();
45+
});
6146
</script>
6247

63-
<style lang="scss">
64-
@import "~@clientio/rappid/rappid.css";
65-
66-
body {
67-
height: 100vh;
68-
box-sizing: border-box;
69-
margin: 0;
48+
<template>
49+
<div class="canvas" ref="canvas"></div>
50+
</template>
7051

71-
.canvas {
72-
width: 100%;
73-
height: 100%;
52+
<style scoped>
53+
.canvas {
54+
width: 100%;
55+
height: 100%;
56+
}
7457
75-
.joint-paper {
76-
border: 1px solid #A0A0A0;
77-
}
78-
}
79-
}
58+
.canvas:deep(.joint-paper) {
59+
border: 1px solid #a0a0a0;
60+
}
8061
</style>

‎src/assets/logo.svg

+1
Loading

‎src/assets/main.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@import '@clientio/rappid/rappid.css';
2+
3+
body {
4+
height: 100vh;
5+
box-sizing: border-box;
6+
margin: 0;
7+
}
8+
9+
#app {
10+
height: 100%;
11+
}

‎src/main.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import './assets/main.css'
2+
13
import { createApp } from 'vue'
24
import App from './App.vue'
35

‎src/shims-vue.d.ts

-6
This file was deleted.

‎tsconfig.app.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"extends": "@vue/tsconfig/tsconfig.dom.json",
3+
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
4+
"exclude": ["src/**/__tests__/*"],
5+
"compilerOptions": {
6+
"composite": true,
7+
"baseUrl": ".",
8+
"paths": {
9+
"@/*": ["./src/*"]
10+
}
11+
}
12+
}

‎tsconfig.json

+12-38
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,15 @@
11
{
2-
"compilerOptions": {
3-
"target": "esnext",
4-
"module": "esnext",
5-
"strict": true,
6-
"jsx": "preserve",
7-
"importHelpers": true,
8-
"moduleResolution": "node",
9-
"experimentalDecorators": true,
10-
"skipLibCheck": true,
11-
"strictPropertyInitialization": false,
12-
"esModuleInterop": true,
13-
"allowSyntheticDefaultImports": true,
14-
"sourceMap": true,
15-
"baseUrl": ".",
16-
"types": [
17-
"webpack-env"
18-
],
19-
"paths": {
20-
"@/*": [
21-
"src/*"
22-
]
2+
"files": [],
3+
"references": [
4+
{
5+
"path": "./tsconfig.node.json"
236
},
24-
"lib": [
25-
"esnext",
26-
"dom",
27-
"dom.iterable",
28-
"scripthost"
29-
]
30-
},
31-
"include": [
32-
"src/**/*.ts",
33-
"src/**/*.tsx",
34-
"src/**/*.vue",
35-
"tests/**/*.ts",
36-
"tests/**/*.tsx"
7+
{
8+
"path": "./tsconfig.app.json"
9+
}
3710
],
38-
"exclude": [
39-
"node_modules"
40-
]
41-
}
11+
"compilerOptions": {
12+
"strictPropertyInitialization": false,
13+
"skipLibCheck": true
14+
}
15+
}

0 commit comments

Comments
 (0)