Skip to content

Commit abd140c

Browse files
BOCOVOBOCOVO
committed
feat(prisma-ext): create prisma extension
1 parent f6b01e3 commit abd140c

25 files changed

+12716
-3
lines changed

‎.vscode/launch.json

+12
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,18 @@
2828
"${workspaceFolder}/packages/dbml-vs-code-extension/dist/extension/*.js"
2929
],
3030
"preLaunchTask": "npm: build"
31+
},
32+
{
33+
"name": "Preview Prisma Extension",
34+
"type": "extensionHost",
35+
"request": "launch",
36+
"args": [
37+
"--extensionDevelopmentPath=${workspaceFolder}/packages/prisma-vs-code-extension"
38+
],
39+
"outFiles": [
40+
"${workspaceFolder}/packages/prisma-vs-code-extension/dist/extension/*.js"
41+
],
42+
"preLaunchTask": "npm: build:prisma"
3143
}
3244
]
3345
}

‎.vscode/tasks.json

+14
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,20 @@
4444
"options": {
4545
"cwd": "${workspaceFolder}/packages/dbml-vs-code-extension"
4646
}
47+
},
48+
49+
// prisma
50+
{
51+
"type": "npm",
52+
"script": "build:prisma",
53+
"group": {
54+
"kind": "build",
55+
"isDefault": true
56+
},
57+
"problemMatcher": [],
58+
"options": {
59+
"cwd": "${workspaceFolder}/packages/prisma-vs-code-extension"
60+
}
4761
}
4862
]
4963
}

‎packages/prisma-vs-code-extension/.eslintrc.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"root": true,
3+
"parser": "@typescript-eslint/parser",
4+
"parserOptions": {
5+
"ecmaVersion": 6,
6+
"sourceType": "module"
7+
},
8+
"plugins": ["@typescript-eslint"],
9+
"rules": {
10+
"@typescript-eslint/naming-convention": [
11+
"warn",
12+
{
13+
"selector": "import",
14+
"format": ["camelCase", "PascalCase"]
15+
}
16+
],
17+
"@typescript-eslint/semi": "warn",
18+
"curly": "warn",
19+
"eqeqeq": "warn",
20+
"no-throw-literal": "warn",
21+
"semi": "off"
22+
},
23+
"ignorePatterns": ["out", "dist", "**/*.d.ts"]
24+
}

‎packages/prisma-vs-code-extension/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
dist

‎packages/prisma-vs-code-extension/.vscode-test.mjs

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { defineConfig } from '@vscode/test-cli';
2+
3+
export default defineConfig({
4+
files: 'out/test/**/*.test.js',
5+
});

‎packages/prisma-vs-code-extension/.vscodeignore

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.vscode/**
2+
.vscode-test/**
3+
out/**
4+
node_modules/**
5+
src/**
6+
.gitignore
7+
.yarnrc
8+
webpack.config.js
9+
vsc-extension-quickstart.md
10+
**/tsconfig.json
11+
**/.eslintrc.json
12+
**/*.map
13+
**/*.ts
14+
**/.vscode-test.*
15+
*.vsix
16+
extension/**
17+
index.html
18+
vite.config.js

‎packages/prisma-vs-code-extension/.yarnrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
--ignore-engines true

‎packages/prisma-vs-code-extension/CHANGELOG.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Change Log
2+
3+
All notable changes to the "prisma-erd-visualizer" extension will be documented in this file.
4+
5+
Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
6+
7+
## [0.0.1]
8+
9+
### Added
10+
11+
- Create diagram from Prisma code
12+
- Add light and dark theme

‎packages/prisma-vs-code-extension/LICENCE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License
2+
3+
Copyright (c) 2024 DBSchemaVisualizer
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE

‎packages/prisma-vs-code-extension/README.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Prisma ERD Visualizer
2+
3+
Allow to visualize the database schema in ERD ( Entity Relationship Diagram ) from .prisma file in your vscode.
4+
5+
## Features
6+
7+
![Demo](https://github.com/BOCOVO/db-schema-visualizer/assets/51182814/a59fd0c0-246d-4f00-be39-9885d88b8b85)
8+
9+
- Create Entity Relationship Diagram from your prisma file
10+
- Allow you to drag diagrams
11+
- Support both light and dark themes
12+
13+
## Extension Settings
14+
15+
The following Visual Studio Code settings are available for the extension.
16+
17+
- `prismaERDPreviewer.preferredTheme`: This configuration define the theme to use. There are two different theme the `light` and `dark`. The default theme is `dark`.
18+
19+
## Release Notes
20+
21+
Release notes are [here](./CHANGELOG.md)
22+
23+
## Author
24+
25+
[@BOCOVO](https://github.com/BOCOVO)

‎packages/prisma-vs-code-extension/assets/icons/open-preview-dark.svg

+3
Loading

‎packages/prisma-vs-code-extension/assets/icons/open-preview.svg

+3
Loading

‎packages/prisma-vs-code-extension/assets/icons/preview-dark.svg

+3
Loading

‎packages/prisma-vs-code-extension/assets/icons/preview.svg

+3
Loading

‎packages/prisma-vs-code-extension/assets/logo.png

26.2 KB
Loading

‎packages/prisma-vs-code-extension/extension/constants/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const WEB_VIEW_NAME = "prisma-preview-webview";
2+
export const WEB_VIEW_TITLE = "Prisma Diagram Preview";
3+
export const EXTENSION_CONFIG_SESSION = "prismaERDPreviewer";

‎packages/prisma-vs-code-extension/extension/index.ts

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { commands, type ExtensionContext } from "vscode";
2+
3+
import { parsePrismaToJSON } from "prisma-to-json-table-schema";
4+
5+
import { MainPanel } from "extension-shared/extension/views/panel";
6+
import {
7+
EXTENSION_CONFIG_SESSION,
8+
WEB_VIEW_NAME,
9+
WEB_VIEW_TITLE,
10+
} from "@/extension/constants";
11+
12+
export function activate(context: ExtensionContext): void {
13+
// Add command to the extension context
14+
context.subscriptions.push(
15+
commands.registerCommand(
16+
"prisma-erd-visualizer.previewDiagrams",
17+
async () => {
18+
lunchExtension(context);
19+
},
20+
),
21+
);
22+
}
23+
24+
const lunchExtension = (context: ExtensionContext): void => {
25+
MainPanel.render({
26+
context,
27+
extensionConfigSession: EXTENSION_CONFIG_SESSION,
28+
webviewConfig: {
29+
name: WEB_VIEW_NAME,
30+
title: WEB_VIEW_TITLE,
31+
},
32+
parser: parsePrismaToJSON,
33+
fileExt: "prisma",
34+
});
35+
};
36+
37+
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
38+
export function deactivate() {}

‎packages/prisma-vs-code-extension/index.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" crossorigin href="/assets/index.css" />
8+
<title>Document</title>
9+
</head>
10+
<body>
11+
<div id="app"></div>
12+
<script type="module" src="/src/index.tsx"></script>
13+
14+
<script type="text/javascript">
15+
// <%DEFAULT-SCRIPT%>
16+
</script>
17+
18+
<script>
19+
// I add this because calling acquireVsCodeApi from the don't work
20+
// i getting error that the parent is not defined on window object
21+
var vsCodeWebviewAPI = acquireVsCodeApi();
22+
</script>
23+
</body>
24+
</html>

‎packages/prisma-vs-code-extension/package.json

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
{
2+
"name": "prisma-erd-visualizer",
3+
"displayName": "Prisma Entity-Relationship Diagrams visualizer",
4+
"description": "A VS Code extension for viewing the ERD (Entity Relationship Diagram) database schema from a prismal file in your VS Code Editor.",
5+
"version": "0.0.3",
6+
"icon": "assets/logo.png",
7+
"publisher": "bocovo",
8+
"engines": {
9+
"vscode": "^1.87.0"
10+
},
11+
"categories": [
12+
"Other"
13+
],
14+
"activationEvents": [],
15+
"main": "./dist/extension/index.js",
16+
"contributes": {
17+
"commands": [
18+
{
19+
"command": "prisma-erd-visualizer.previewDiagrams",
20+
"title": "Show diagram",
21+
"icon": {
22+
"light": "./assets/icons/open-preview.svg",
23+
"dark": "./assets/icons/open-preview-dark.svg"
24+
}
25+
}
26+
],
27+
"menus": {
28+
"editor/title": [
29+
{
30+
"when": "resourceLangId == prisma",
31+
"command": "prisma-erd-visualizer.previewDiagrams",
32+
"group": "navigation"
33+
}
34+
]
35+
},
36+
"configuration": {
37+
"title": "Prisma Entity Relationship Diagram",
38+
"properties": {
39+
"prismaERDPreviewer.preferredTheme": {
40+
"type": "string",
41+
"default": "dark",
42+
"enum": [
43+
"dark",
44+
"light"
45+
],
46+
"enumDescriptions": [
47+
"To use dark mode theme colors",
48+
"To use light mode theme colors"
49+
]
50+
}
51+
}
52+
}
53+
},
54+
"scripts": {
55+
"vscode:prepublish": "yarn run package",
56+
"compile-tests": "tsc -p . --outDir out",
57+
"watch-tests": "tsc -p . -w --outDir out",
58+
"pretest": "yarn run compile-tests && yarn run build && yarn run lint",
59+
"lint": "eslint src --ext ts",
60+
"test": "vscode-test",
61+
"build:prisma": "vite build && yarn run generate:css",
62+
"package": "yarn run build",
63+
"preview": "vite preview",
64+
"generate:css": "cd ../json-table-schema-visualizer && npx tailwindcss -i ./src/styles/index.css > ../prisma-vs-code-extension/dist/webview/assets/index.css --minify"
65+
},
66+
"devDependencies": {
67+
"@tomjs/vite-plugin-vscode": "^2.2.0",
68+
"@types/mocha": "^10.0.6",
69+
"@types/node": "18.x",
70+
"@types/react": "^18.2.75",
71+
"@types/react-dom": "^18.2.24",
72+
"@types/vscode": "^1.87.0",
73+
"@typescript-eslint/eslint-plugin": "^7.4.0",
74+
"@typescript-eslint/parser": "^7.4.0",
75+
"@vitejs/plugin-react-swc": "^3.6.0",
76+
"@vscode/test-cli": "^0.0.8",
77+
"@vscode/test-electron": "^2.3.9",
78+
"eslint": "^8.57.0",
79+
"ts-loader": "^9.5.1",
80+
"vite": "^5.2.8",
81+
"vite-tsconfig-paths": "^4.3.2"
82+
},
83+
"dependencies": {
84+
"json-table-schema-visualizer": "1.0.0",
85+
"prisma-to-json-table-schema": "0.0.1",
86+
"react": "^18.2.0",
87+
"react-dom": "^18.2.0",
88+
"shared": "0.0.0"
89+
},
90+
"repository": {
91+
"type": "git",
92+
"url": "https://github.com/BOCOVO/db-schema-visualizer"
93+
}
94+
}

‎packages/prisma-vs-code-extension/src/index.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { createExtensionApp } from "extension-shared/src/index";
2+
3+
createExtensionApp();

‎packages/prisma-vs-code-extension/tsconfig.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"compilerOptions": {
4+
"module": "Node16",
5+
"target": "ES2022",
6+
"lib": ["ES2022", "DOM"],
7+
"sourceMap": true,
8+
"rootDir": "./",
9+
"baseUrl": "./",
10+
"strict": true,
11+
"jsx": "react-jsx",
12+
"paths": {
13+
"@/*": ["./*"]
14+
},
15+
"skipLibCheck": true
16+
},
17+
"exclude": ["node_modules", "vite.config.js"],
18+
"include": ["**/*.ts", "**/*.tsx"]
19+
}

‎packages/prisma-vs-code-extension/vite.config.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import vscode from "@tomjs/vite-plugin-vscode";
2+
import react from "@vitejs/plugin-react-swc";
3+
import { defineConfig } from "vite";
4+
import tsconfigPaths from "vite-tsconfig-paths";
5+
6+
// https://vitejs.dev/config/
7+
export default defineConfig({
8+
plugins: [tsconfigPaths(), react(), vscode({})],
9+
});

0 commit comments

Comments
 (0)