holistics · Huy-DNA · Sep 7, 2024 · Sep 7, 2024 · Sep 7, 2024 · Sep 7, 2024
diff --git a/packages/dbml-playground/.eslintrc.js b/packages/dbml-playground/.eslintrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+  rules: {
+    'import/no-unresolved': 'off', // we rely on ts resolver now, no need eslint to check again
+  },
+};
diff --git a/packages/dbml-playground/README.md b/packages/dbml-playground/README.md
@@ -0,0 +1,5 @@
+# DBML playground
+
+## Requirements
+
+* Node: ^18.0.0
diff --git a/packages/dbml-playground/env.d.ts b/packages/dbml-playground/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/dbml-playground/index.html b/packages/dbml-playground/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DBML Playground</title>
+    <script type="module" src="/src/main.ts" defer></script>
+  </head>
+  <body class="m-0 p-0">
+    <div id="app" class="h-[93vh] m-0 p-0"></div>
+  </body>
+</html>
diff --git a/packages/dbml-playground/package.json b/packages/dbml-playground/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "@dbml/playground",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
+  },
+  "dependencies": {
+    "@dbml/parse": "^3.8.0",
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
+    "monaco-editor": "^0.49.0",
+    "pinia": "^2.1.7",
+    "splitpanes": "^3.1.5",
+    "vue": "^3.4.21",
+    "vue-json-pretty": "^2.4.0",
+    "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^20.12.5",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/test-utils": "^2.4.5",
+    "@vue/tsconfig": "^0.5.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "jsdom": "^24.0.0",
+    "npm-run-all2": "^6.1.2",
+    "prettier": "^3.2.5",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4",
+    "typescript": "~5.4.0",
+    "vite": "^5.2.8",
+    "vite-plugin-vue-devtools": "^7.0.25",
+    "vitest": "^1.4.0",
+    "vue-tsc": "^2.0.11"
+  }
+}
diff --git a/packages/dbml-playground/postcss.config.js b/packages/dbml-playground/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/packages/dbml-playground/public/favicon.ico b/packages/dbml-playground/public/favicon.ico
diff --git a/packages/dbml-playground/src/App.vue b/packages/dbml-playground/src/App.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { RouterLink, RouterView } from 'vue-router'
+import { Splitpanes } from 'splitpanes';
+import Header from './components/Header/Header.vue'
+</script>
+
+<template>
+  <Header />
+  <main class='w-full h-full bg-[#eeeeee]'>
+    <RouterView class='w-full h-full'/>
+  </main>
+</template>
diff --git a/packages/dbml-playground/src/assets/fonts/OpenSans/OpenSans-Italic.ttf b/packages/dbml-playground/src/assets/fonts/OpenSans/OpenSans-Italic.ttf
diff --git a/packages/dbml-playground/src/assets/fonts/OpenSans/OpenSans-Light.ttf b/packages/dbml-playground/src/assets/fonts/OpenSans/OpenSans-Light.ttf
diff --git a/packages/dbml-playground/src/assets/fonts/OpenSans/OpenSans-Regular.ttf b/packages/dbml-playground/src/assets/fonts/OpenSans/OpenSans-Regular.ttf
diff --git a/packages/dbml-playground/src/assets/fonts/OpenSans/OpenSans-SemiBold.ttf b/packages/dbml-playground/src/assets/fonts/OpenSans/OpenSans-SemiBold.ttf
diff --git a/packages/dbml-playground/src/assets/fonts/OpenSans/OpenSans-SemiBoldItalic.ttf b/packages/dbml-playground/src/assets/fonts/OpenSans/OpenSans-SemiBoldItalic.ttf
diff --git a/packages/dbml-playground/src/assets/images/dbml-logo.png b/packages/dbml-playground/src/assets/images/dbml-logo.png
diff --git a/packages/dbml-playground/src/assets/index.css b/packages/dbml-playground/src/assets/index.css
@@ -0,0 +1,42 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/OpenSans/OpenSans-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/OpenSans/OpenSans-SemiBold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/OpenSans/OpenSans-SemiBoldItalic.ttf') format('truetype');
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/OpenSans/OpenSans-Italic.ttf') format('truetype');
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/OpenSans/OpenSans-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+* {
+  font-family: 'Open Sans', sans-serif;
+}
diff --git a/packages/dbml-playground/src/components/AstExplorerPane/AstExplorerPane.vue b/packages/dbml-playground/src/components/AstExplorerPane/AstExplorerPane.vue
@@ -0,0 +1,12 @@
+<template>
+  <pane max-size='30' min-size='30' size='30'>
+    <slot>
+      <section class='h-full bg-white overflow-auto border rounded border-gray-300 flex flex-col p-2'>
+      </section>
+    </slot>
+  </pane>
+</template>
+
+<script setup lang="ts">
+  import { Pane } from 'splitpanes';
+</script>
diff --git a/packages/dbml-playground/src/components/DbmlEditorPane/DbmlEditorPane.vue b/packages/dbml-playground/src/components/DbmlEditorPane/DbmlEditorPane.vue
@@ -0,0 +1,19 @@
+<template>
+  <pane min-size='75' max-size='75' size='75'>
+    <slot>
+      <Editor
+        class='h-full bg-white overflow-auto border rounded border-gray-300 flex flex-col'
+        @source-change='(newSource) => compiler.setSource(newSource)'
+      />
+    </slot>
+  </pane>
+</template>
+
+<script setup lang="ts">
+  import { Pane } from 'splitpanes';
+  import * as monaco from 'monaco-editor';
+  import Editor from './Editor/Editor.vue';
+  import { useCompilerStore } from '@/stores/compiler';
+
+  const { compiler } = useCompilerStore();
+</script>
diff --git a/packages/dbml-playground/src/components/DbmlEditorPane/Editor/Editor.vue b/packages/dbml-playground/src/components/DbmlEditorPane/Editor/Editor.vue
@@ -0,0 +1,57 @@
+<template>
+  <div ref='editorRef' class='w-full h-full p-1'></div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, watch, } from 'vue';
+  import * as monaco from 'monaco-editor';
+  import { services } from '@dbml/parse';
+  import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker&inline';
+  import { initialCode } from './initialCode';
+  import { useCompilerStore } from '@/stores/compiler';
+
+  const editorWorker = new EditorWorker();
+
+  (window as any).MonacoEnvironment = {
+    getWorker () {
+      return editorWorker;
+    },
+  };
+
+  const emit = defineEmits<{
+    (e: 'source-change', source: string): void,
+  }>();
+
+  const editorRef = ref(null);
+  let editor: monaco.editor.ICodeEditor | null = null;
+  let model: monaco.editor.ITextModel | null = null;
+
+  watch(
+    () => undefined,
+    () => {
+      const { compiler } = useCompilerStore();
+      const languageServices = compiler.initMonacoServices();
+      monaco.languages.register({ id: 'dbml' });
+      monaco.languages.registerDefinitionProvider('dbml', languageServices.definitionProvider);
+      monaco.languages.registerReferenceProvider('dbml', languageServices.referenceProvider);
+      monaco.languages.registerCompletionItemProvider('dbml', languageServices.autocompletionProvider);
+    },
+    { once: true, immediate: true },
+  );
+
+  onMounted(() => {
+    editor = monaco.editor.create(editorRef.value, {
+      language: 'dbml',
+      value: initialCode,
+      automaticLayout: true,
+    });
+    emit('source-change', initialCode);       
+
+    model = editor.getModel();
+
+    model.onDidChangeContent(() => {
+      const currentSource = model.getValue();
+      emit('source-change', currentSource);       
+    });
+  }); 
+</script>
diff --git a/packages/dbml-playground/src/components/DbmlEditorPane/Editor/initialCode.ts b/packages/dbml-playground/src/components/DbmlEditorPane/Editor/initialCode.ts
@@ -0,0 +1,32 @@
+export const initialCode = `// Use DBML to define your database structure
+// Docs: https://dbml.dbdiagram.io/docs
+
+Table follows {
+  following_user_id integer
+  followed_user_id integer
+  created_at timestamp 
+}
+
+Table users {
+  id integer [primary key]
+  username varchar
+  role varchar
+  created_at timestamp
+}
+
+Table posts {
+  id integer [primary key]
+  title varchar
+  body text [note: 'Content of the post']
+  user_id integer
+  status varchar
+  created_at timestamp
+}
+
+Ref: posts.user_id > users.id // many-to-one
+
+Ref: users.id < follows.following_user_id
+
+Ref: users.id < follows.followed_user_id
+`;
+
diff --git a/packages/dbml-playground/src/components/ErrorPane/ErrorPane.vue b/packages/dbml-playground/src/components/ErrorPane/ErrorPane.vue
@@ -0,0 +1,32 @@
+<template>
+  <pane min-size='30' max-size='30' size='30'>
+    <slot>
+      <section class='h-full bg-white overflow-auto border rounded border-gray-300 flex flex-col p-4 text-sm'>
+        <ul v-if='errors.length' class='list-none'>
+          <li v-for='error in errors' :key='error'>
+            <p class='flex gap-2 items-center'>
+              <FontAwesomeIcon :icon='faExclamationCircle' class='text-red-500' />
+              {{ error }}
+            </p>
+          </li>
+        </ul>
+
+        <p v-else class='flex gap-2 items-center'>
+          <FontAwesomeIcon :icon='faCheckCircle' class='text-green-400' />
+          <span>No errors.</span>
+        </p>
+      </section>
+    </slot>
+  </pane>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { Pane } from 'splitpanes';
+  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+  import { faCheckCircle, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
+  import { useCompilerStore } from '@/stores/compiler';
+
+  const compiler = useCompilerStore();
+  const errors = computed(() => compiler.errors)
+</script>
diff --git a/packages/dbml-playground/src/components/FileTreePane/FileTreePane.vue b/packages/dbml-playground/src/components/FileTreePane/FileTreePane.vue
@@ -0,0 +1,12 @@
+<template>
+  <pane min-size='25' max-size='25' size='25'>
+    <slot>
+      <section class='h-full bg-white overflow-auto border rounded border-gray-300 flex flex-col p-2'>
+      </section>
+    </slot>
+  </pane>
+</template>
+
+<script setup lang="ts">
+  import { Pane } from 'splitpanes';
+</script>
diff --git a/packages/dbml-playground/src/components/Header/Header.vue b/packages/dbml-playground/src/components/Header/Header.vue
@@ -0,0 +1,14 @@
+<template>
+  <nav class='border-b-[1px] border-b-white bg-black h-16 p-4 flex justify-between'>
+    <div role='banner' class='flex flex-row items-center gap-2'>
+      <img :src='DbmlLogoUrl' width=24 />
+      <p class='font-bold text-white'>dbx / DBML Playground</p>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+  import { Pane } from 'splitpanes';
+  import DbmlLogoUrl from '@/assets/images/dbml-logo.png';
+</script>
+
diff --git a/packages/dbml-playground/src/main.ts b/packages/dbml-playground/src/main.ts
@@ -0,0 +1,14 @@
+import './assets/index.css'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')
diff --git a/packages/dbml-playground/src/pages/PlaygroundPage.vue b/packages/dbml-playground/src/pages/PlaygroundPage.vue
@@ -0,0 +1,38 @@
+<template>
+  <splitpanes vertical class='default-theme w-full h-full p-2'>
+    <pane min-size='70' max-size='70' size='70'>
+      <splitpanes horizontal>
+        <pane min-size='70' max-size='70' size='70'>
+          <splitpanes vertical>
+            <FileTreePane />
+            <DbmlEditorPane />
+          </splitpanes>
+        </pane>
+        <ErrorPane />
+      </splitpanes>
+    </pane>
+    <AstExplorerPane />
+  </splitpanes>
+</template>
+
+<script setup lang="ts">
+  import { reactive } from 'vue';
+  import { Splitpanes, Pane } from 'splitpanes';
+  import 'splitpanes/dist/splitpanes.css';
+  import AstExplorerPane from '../components/AstExplorerPane/AstExplorerPane.vue'
+  import ErrorPane from '../components/ErrorPane/ErrorPane.vue'
+  import DbmlEditorPane from '../components/DbmlEditorPane/DbmlEditorPane.vue'
+  import FileTreePane from '../components/FileTreePane/FileTreePane.vue'
+</script>
+
+<style>
+div.splitpanes__splitter {
+  background-color: #eeeeee !important;
+  &::before {
+    background-color: #1e1e1e !important;
+  }
+  &::after {
+    background-color: #1e1e1e !important;
+  }
+}
+</style>
diff --git a/packages/dbml-playground/src/router/index.ts b/packages/dbml-playground/src/router/index.ts
@@ -0,0 +1,11 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import PlaygroundPage from '../pages/PlaygroundPage.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    { path: '/', name: 'DBML Playground', component: PlaygroundPage, },
+  ]
+})
+
+export default router