Migrate to using vite.

Author: MrCoder

.gitignore

@@ -1,5 +1,6 @@
 ### OSX ###
 .DS_Store
+.cursor
 
 .vscode
 logs
@@ -17,8 +18,9 @@ node_modules/
 *.map
 
 .sass-cache
-### folders built by preact or gulp
+### folders built by vite, preact or gulp
 /build/
+/dist/
 /extension/
 /app/
 

package.json

@@ -3,13 +3,15 @@
   "version": "1.0.24",
   "description": "A real-time tool for generating sequence diagrams",
   "main": "index.html",
+  "type": "module",
   "scripts": {
     "engine": "use yarn instead of npm please",
     "start": "if-env NODE_ENV=production && yarn serve || yarn dev",
-    "build": "preact build --template src/index.html --no-inline-css --no-prerender --no-sw",
+    "build": "vite build",
     "release": "gulp release",
     "prep:release:git-tag-push": "git tag release-`date +%Y%m%d%H%M` && git push origin release-`date +%Y%m%d%H%M`",
-    "dev": "preact watch --template src/index.html --no-prerender",
+    "dev": "vite",
+    "preview": "vite preview",
     "lint": "eslint src",
     "test": "jest ./",
     "deploy:staging": "firebase deploy --project staging",
@@ -25,6 +27,7 @@
   },
   "eslintIgnore": [
     "build/*",
+    "dist/*",
     "src/lib/",
     "src/tests/",
     "src/CodeMirror.js",
@@ -39,6 +42,9 @@
   "devDependencies": {
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@preact/preset-vite": "^2.10.1",
+    "@vitejs/plugin-legacy": "^6.1.1",
+    "autoprefixer": "^10.4.21",
     "babel-minify": "^0.5.2",
     "enzyme": "^3.11.0",
     "enzyme-adapter-preact-pure": "^2.3.0",
@@ -55,12 +61,14 @@
     "gulp-zip": "^5.0.2",
     "jest": "^24.9.0",
     "jest-preset-preact": "^1.0.0",
+    "postcss": "^8.5.4",
     "postcss-custom-media": "^10.0.4",
-    "preact-cli": "^3.5.1",
     "prettier": "^3.2.5",
     "run-sequence": "^2.2.1",
     "sirv-cli": "1.0.3",
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "^3.4.3",
+    "terser": "^5.41.0",
+    "vite": "^6.3.5"
   },
   "dependencies": {
     "@emmetio/codemirror-plugin": "^1.1.3",
@@ -82,6 +90,7 @@
     "http-server": "^0.12.3",
     "jszip": "3.8.0",
     "preact": "10.18.1",
+    "preact-compat": "^3.19.0",
     "preact-render-to-string": "^6.2.2",
     "preact-router": "^4.1.2",
     "split.js": "1.6.0",

postcss.config.js

@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    'postcss-custom-media': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}; 

preact.config.js

@@ -1,5 +1,5 @@
 import * as Dialog from '@radix-ui/react-dialog';
-import React from 'preact';
+import { h } from 'preact';
 
 const CheatSheetModal = ({ open, onClose }) => {
   return (

src/components/CheatSheetModal.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'preact';
+import { h, Component } from 'preact';
 import { saveAs } from 'file-saver';
 import UserCodeMirror from './UserCodeMirror.jsx';
 import Toolbox from './Toolbox.jsx';
@@ -287,13 +287,31 @@ export default class ContentWrap extends Component {
 
   showErrors(lang, errors) {
     var editor = this.cm[lang];
+    
+    // Safety checks to prevent CodeMirror errors
+    if (!editor || !editor.getDoc()) {
+      console.warn(`Editor for ${lang} is not properly initialized`);
+      return;
+    }
+    
     errors.forEach(function (e) {
-      editor.operation(function () {
-        var n = document.createElement('div');
-        n.setAttribute('data-title', e.message);
-        n.classList.add('gutter-error-marker');
-        editor.setGutterMarker(e.lineNumber, 'error-gutter', n);
-      });
+      try {
+        editor.operation(function () {
+          // Additional safety check for line number validity
+          const doc = editor.getDoc();
+          const lineCount = doc.lineCount();
+          
+          // Ensure lineNumber is valid (0-based indexing)
+          const lineNumber = Math.max(0, Math.min(e.lineNumber || 0, lineCount - 1));
+          
+          var n = document.createElement('div');
+          n.setAttribute('data-title', e.message);
+          n.classList.add('gutter-error-marker');
+          editor.setGutterMarker(lineNumber, 'error-gutter', n);
+        });
+      } catch (error) {
+        console.warn('Error setting gutter marker:', error);
+      }
     });
   }
 

src/components/ContentWrap.jsx

@@ -1,4 +1,4 @@
-import React from 'preact';
+import { h } from 'preact';
 import { ItemTile } from './ItemTile';
 import templates from '../templateList';
 import * as Dialog from '@radix-ui/react-dialog';

src/components/CreateNewModal.jsx

@@ -1,5 +1,5 @@
 import * as Dialog from '@radix-ui/react-dialog';
-import React from 'preact';
+import { h } from 'preact';
 
 const KeyboardShortcutsModal = ({ open, onClose }) => {
   return (

src/components/KeyboardShortcutsModal.jsx

@@ -33,7 +33,6 @@ export class LibraryAutoSuggest extends Component {
     var line = this.currentLineNumber;
     return this.t.value.split('\n')[line - 1];
   }
-  listMouseDownHandler() {}
   closeSuggestions() {
     this.list.classList.remove('is-open');
     this.isShowingSuggestions = false;

src/components/LibraryAutoSuggest.jsx

@@ -1,6 +1,6 @@
 import { auth } from '../auth';
 import * as Dialog from '@radix-ui/react-dialog';
-import { useEffect } from 'preact-compat';
+import { useEffect } from 'preact/hooks';
 import mixpanel from '../services/mixpanel';
 
 export default function LoginModal({ open, onClose }) {