feat: dev

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+.turbo

.npmrc

@@ -0,0 +1,4 @@
+# pnpm
+prefer-workspace-packages=true
+auto-install-peers=true
+save-exact=true

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,41 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "vue.updateImportsOnFileMove.enabled": true,
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off", "fixable": true },
+    { "rule": "format/*", "severity": "off", "fixable": true },
+    { "rule": "*-indent", "severity": "off", "fixable": true },
+    { "rule": "*-spacing", "severity": "off", "fixable": true },
+    { "rule": "*-spaces", "severity": "off", "fixable": true },
+    { "rule": "*-order", "severity": "off", "fixable": true },
+    { "rule": "*-dangle", "severity": "off", "fixable": true },
+    { "rule": "*-newline", "severity": "off", "fixable": true },
+    { "rule": "*quotes", "severity": "off", "fixable": true },
+    { "rule": "*semi", "severity": "off", "fixable": true }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "typescript",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "xml",
+    "css",
+    "scss"
+  ]
+}

apps/backend/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@online-editor/backend",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "tsx watch src/index.ts",
+    "build": "tsc",
+    "type-check": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@crashmax/tsconfig": "2.2.0",
+    "@fastify/static": "8.0.1",
+    "fastify": "5.0.0",
+    "tsx": "4.19.1",
+    "typescript": "5.6.3",
+    "vite": "5.4.8"
+  }
+}

public/editor/index.js → apps/backend/public/editor/index.js

@@ -6,7 +6,7 @@ Object.assign(app.style, {
   display: 'flex',
   flexDirection: 'column',
   gap: '8px',
-  padding: '8px'
+  padding: '8px',
 })
 
 let files = []
@@ -40,8 +40,8 @@ function renderEditor() {
       const tabs = menu.querySelectorAll('menu[role=tablist] > button')
       for (const tab of tabs) {
         if (
-          tab.getAttribute('aria-controls') ===
-          event.target.getAttribute('aria-controls')
+          tab.getAttribute('aria-controls')
+          === event.target.getAttribute('aria-controls')
         ) {
           tab.setAttribute('aria-selected', true)
           openTab(event)
@@ -72,7 +72,7 @@ function renderEditor() {
       resize: 'vertical',
       fontSize: '16px',
       fontFamily: 'monospace',
-      background: 'transparent'
+      background: 'transparent',
     })
     textarea.value = file.source
     textarea.addEventListener('input', () => (file.source = textarea.value))
@@ -95,7 +95,7 @@ function renderEditor() {
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
   })
 
   const windowTitlebar = document.createElement('div')
@@ -112,8 +112,7 @@ function renderEditor() {
   const maximizeWindowButton = document.createElement('button')
   maximizeWindowButton.setAttribute('aria-label', 'Maximize')
   maximizeWindowButton.addEventListener('click', () =>
-    open('/output/', 'target=_blank')
-  )
+    open('/output/', 'target=_blank'))
   windowTitlebarControls.append(maximizeWindowButton)
   windowTitlebar.append(windowTitlebarControls)
 
@@ -147,9 +146,9 @@ function renderError(data) {
     height: 'calc(100% - 8px)',
     marginRight: '-5px',
     marginTop: '-8px',
-    marginLeft: '-5px'
+    marginLeft: '-5px',
   })
-  errorMessage.textContent = data.message.replace(/\u001b\[(31|39|36|33)m/g, '')
+  errorMessage.textContent = data.message.replace(/\u001B\[(31|39|36|33)m/g, '')
   windowOutput.replaceChildren(errorMessage)
 }
 
@@ -175,18 +174,18 @@ function renderOutput(data) {
   windowStatusBar.replaceChildren(
     modulesTransformedField,
     bundleSizeField,
-    buildTimeField
+    buildTimeField,
   )
 }
 
 function formatBytes(bytes) {
   const sizes = [
     'B',
     'KB',
-    'MB'
+    'MB',
   ]
   const i = Math.floor(Math.log(bytes) / Math.log(1024))
-  return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i]
+  return Number.parseFloat((bytes / 1024 ** i).toFixed(2)) + sizes[i]
 }
 
 function openTab(event) {
@@ -218,7 +217,7 @@ async function sendFiles() {
     const req = await fetch('/api/files', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(files)
+      body: JSON.stringify(files),
     })
     const data = await req.json()
     if (data.error) {

public/input/counter.js → apps/backend/public/input/counter.js

@@ -6,6 +6,6 @@ export function counter(initialValue = 0) {
     increment: () => ++count,
     get count() {
       return count
-    }
+    },
   }
 }

src/api.ts → apps/backend/src/api.ts

@@ -1,10 +1,10 @@
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import { build } from 'vite'
-import type { FastifyInstance } from 'fastify'
-
 import { publicDir } from './constants.js'
 
+import type { FastifyInstance } from 'fastify'
+
 interface FileData {
   name: string
   source: string
@@ -14,10 +14,10 @@ const SchemaFileData = {
   type: 'object',
   properties: {
     name: { type: 'string' },
-    source: { type: 'string' }
+    source: { type: 'string' },
   },
   required: ['name', 'source'],
-  additionalProperties: false
+  additionalProperties: false,
 }
 
 export function api(fastify: FastifyInstance) {
@@ -32,14 +32,14 @@ export function api(fastify: FastifyInstance) {
     async (req, reply) => {
       const res = await writeFiles(req.body)
       reply.send(res)
-    }
+    },
   )
 }
 
 function getInputFiles() {
   return fs.readdir(path.resolve(publicDir, 'input'), {
     encoding: 'utf8',
-    recursive: true
+    recursive: true,
   })
 }
 
@@ -55,7 +55,7 @@ async function readFiles() {
     const fileData = await fs.readFile(filePath, 'utf8')
     files[fileName === 'index.js' ? 'unshift' : 'push']({
       name: fileName,
-      source: fileData
+      source: fileData,
     })
   }
 
@@ -92,9 +92,9 @@ async function buildProject() {
         entry: 'index.js',
         name: 'output',
         formats: ['iife'],
-        fileName: () => 'index.js'
-      }
-    }
+        fileName: () => 'index.js',
+      },
+    },
   })
 
   performance.mark('build-end')
@@ -103,7 +103,7 @@ async function buildProject() {
   const buildMeta = {
     bundleSize: 0,
     modulesTransformed: 0,
-    time: Math.floor(perf.duration)
+    time: Math.floor(perf.duration),
   }
 
   if (Array.isArray(output)) {

src/constants.ts → apps/backend/src/constants.ts

@@ -4,5 +4,5 @@ import url from 'node:url'
 export const publicDir = path.resolve(
   path.dirname(url.fileURLToPath(import.meta.url)),
   '..',
-  'public'
+  'public',
 )

src/index.ts → apps/backend/src/index.ts

@@ -7,7 +7,7 @@ import { publicDir } from './constants.js'
 const app = fastify()
 
 app.register(fastifyStatic, {
-  root: publicDir
+  root: publicDir,
 })
 
 app.get('/', (req, reply) => {
@@ -19,10 +19,10 @@ app.register(
     api(instance)
     done()
   },
-  { prefix: '/api' }
+  { prefix: '/api' },
 )
 
-app.listen({ port: 3000 }, (err, address) => {
+app.listen({ host: 'localhost', port: 3000 }, (err, address) => {
   if (err) throw err
   console.log(`Server is now listening on ${address}`)
 })

tsconfig.json → apps/backend/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "extends": "@crashmax/tsconfig",
   "compilerOptions": {
-    "outDir": "dist",
     "declaration": false,
+    "outDir": "dist",
     "sourceMap": false
   },
   "include": [

apps/frontend/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Editor</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

apps/frontend/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@online-editor/frontend",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "type-check": "vue-tsc -b"
+  },
+  "dependencies": {
+    "pinia": "^2.2.4",
+    "vue": "3.5.12",
+    "xp.css": "0.2.6"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "5.1.4",
+    "typescript": "5.4.5",
+    "vite": "5.4.8",
+    "vue-tsc": "2.1.6"
+  }
+}