Merge pull request #761 from ZenUml/migrate-vite

Migrate 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/
 

fs-util.js renamed to fs-util.cjs

@@ -11,7 +11,7 @@ const childProcess = require('child_process');
 const merge = require('merge-stream');
 const zip = require('gulp-zip');
 const hashFilename = require('gulp-hash-filename');
-const fsUtil = require('./fs-util');
+const fsUtil = require('./fs-util.cjs');
 var packageJson = JSON.parse(fs.readFileSync('./package.json'));
 
 function minifyJs(fileName) {
@@ -31,12 +31,15 @@ function minifyJs(fileName) {
 
 gulp.task('copyFiles', function () {
   return merge(
+    // Copy static assets
     gulp.src('static/**/*').pipe(gulp.dest('app/static')),
     gulp.src('help/**/*').pipe(gulp.dest('app/help')),
     gulp.src('privacy-policy/*').pipe(gulp.dest('app/privacy-policy')),
     gulp
       .src('End-User-License-Agreement/*')
       .pipe(gulp.dest('app/End-User-License-Agreement')),
+
+    // Copy library files that are still needed
     gulp
       .src('src/lib/codemirror/lib/*')
       .pipe(gulp.dest('app/lib/codemirror/lib')),
@@ -57,6 +60,8 @@ gulp.task('copyFiles', function () {
     gulp.src('src/animation/*').pipe(gulp.dest('app/animation')),
     gulp.src('src/templates/*').pipe(gulp.dest('app/templates')),
     gulp.src('icons/*').pipe(gulp.dest('app/icons')),
+
+    // Copy root files
     gulp
       .src([
         'help.html',
@@ -65,29 +70,14 @@ gulp.task('copyFiles', function () {
         'src/icon-16.png',
         'src/icon-48.png',
         'src/icon-128.png',
-        'manifest.json',
+        'static/manifest.json',
       ])
       .pipe(gulp.dest('app')),
-    gulp.src('build/*.js').pipe(gulp.dest('app')),
-    gulp.src('build/*.css').pipe(gulp.dest('app')),
-    // Following CSS are copied to build/ folder where they'll be referenced by
-    // useRef plugin to concat into one.
-    gulp
-      .src('src/lib/codemirror/lib/codemirror.css')
-      .pipe(gulp.dest('build/lib/codemirror/lib')),
-    gulp
-      .src('src/lib/codemirror/addon/hint/show-hint.css')
-      .pipe(gulp.dest('build/lib/codemirror/addon/hint')),
-    gulp
-      .src('src/lib/codemirror/addon/fold/foldgutter.css')
-      .pipe(gulp.dest('build/lib/codemirror/addon/fold')),
-    gulp
-      .src('src/lib/codemirror/addon/dialog/dialog.css')
-      .pipe(gulp.dest('build/lib/codemirror/addon/dialog')),
-    gulp.src('src/lib/hint.min.css').pipe(gulp.dest('build/lib')),
-    gulp.src('src/lib/inlet.css').pipe(gulp.dest('build/lib')),
-    gulp.src('src/style.css').pipe(hashFilename()).pipe(gulp.dest('build')),
-    gulp.src('src/preview.html').pipe(gulp.dest('build')),
+
+    // Copy Vite build output from dist/ instead of build/
+    gulp.src('dist/**/*').pipe(gulp.dest('app')),
+
+    // Copy fonts
     gulp
       .src([
         'src/FiraCode.ttf',
@@ -99,80 +89,82 @@ gulp.task('copyFiles', function () {
   );
 });
 
-// Generate script.js, vendor.js, style.css and vendor.css and index.html under ./app/
-gulp.task('useRef', function () {
-  return gulp.src('build/*.html').pipe(useref()).pipe(gulp.dest('app'));
+// This task is no longer needed since Vite handles HTML processing
+gulp.task('useRef', function (callback) {
+  // Skip useRef since Vite already processes HTML files
+  callback();
 });
 
-const bundleJs = () => fsUtil.getBundleJs('build');
-
-gulp.task('concat', function () {
-  // TODO: Don't understand what does it do
-  gulp
-    .src([`app/${bundleJs()}`])
-    .pipe(concat(bundleJs()))
-    .pipe(gulp.dest('app'));
+// This task is no longer needed since Vite handles bundling
+gulp.task('concat', function (callback) {
+  // Skip concat since Vite already handles bundling
+  callback();
 });
 
 gulp.task('minify', function () {
-  // TODO: don't know why it causes unknown error: `Uncaught IllegalState`
-  // minifyJs(`app/${bundleJs()}`);
-  minifyJs('app/lib/screenlog.js');
-
-  gulp
-    .src('app/*.css')
-    .pipe(
-      cleanCSS(
-        {
-          debug: true,
-        },
-        (details) => {
-          console.log(`${details.name}: ${details.stats.originalSize}`);
-          console.log(`${details.name}: ${details.stats.minifiedSize}`);
-        },
-      ),
-    )
-    .pipe(gulp.dest('app'));
+  // Only minify specific files that need additional processing
+  if (fs.existsSync('app/lib/screenlog.js')) {
+    minifyJs('app/lib/screenlog.js');
+  }
+
+  // Minify CSS files if they exist
+  if (fs.existsSync('app') && fs.readdirSync('app').some(file => file.endsWith('.css'))) {
+    gulp
+      .src('app/*.css')
+      .pipe(
+        cleanCSS(
+          {
+            debug: true,
+          },
+          (details) => {
+            console.log(`${details.name}: ${details.stats.originalSize}`);
+            console.log(`${details.name}: ${details.stats.minifiedSize}`);
+          },
+        ),
+      )
+      .pipe(gulp.dest('app'));
+  }
 });
 
-gulp.task('fixIndex', function () {
-  var contents = fs.readFileSync('build/index.html', 'utf8');
-  // style.css is replaced with style-[hash].css
-  contents = contents.replace(
-    /style\.css/g,
-    fsUtil.getHashedFile('build', 'style-', 'css'),
-  );
-  fs.writeFileSync('build/index.html', contents, 'utf8');
-  contents = fs.readFileSync('build/preview.html', 'utf8');
-  // style.css is replaced with style-[hash].css
-  contents = contents.replace(
-    /style\.css/g,
-    fsUtil.getHashedFile('build', 'style-', 'css'),
-  );
-  fs.writeFileSync('build/preview.html', contents, 'utf8');
+// This task is no longer needed since Vite handles file processing
+gulp.task('fixIndex', function (callback) {
+  // Skip fixIndex since Vite already handles HTML processing with proper hashing
+  callback();
 });
 
 gulp.task('packageExtension', function () {
   childProcess.execSync('cp -R app/ extension');
-  childProcess.execSync('cp src/manifest.json extension');
+  childProcess.execSync('cp static/manifest.json extension');  // manifest.json is in root, not src/
   childProcess.execSync('cp src/extension/options.js extension');
   childProcess.execSync('cp src/extension/options.html extension');
   childProcess.execSync('cp src/extension/eventPage.js extension');
   childProcess.execSync('cp src/extension/script.js extension');
-  childProcess.execSync('cp src/icon-16.png extension');
-  childProcess.execSync('cp src/icon-48.png extension');
-  childProcess.execSync('cp src/icon-128.png extension');
+
+  // Copy icon files from their actual locations
+  if (fs.existsSync('static/icon-16.png')) {
+    childProcess.execSync('cp static/icon-16.png extension');
+  }
+  if (fs.existsSync('static/icon-48.png')) {
+    childProcess.execSync('cp static/icon-48.png extension');
+  }
+  if (fs.existsSync('icon-128.png')) {
+    childProcess.execSync('cp icon-128.png extension');
+  } else if (fs.existsSync('static/icon-128.png')) {
+    childProcess.execSync('cp static/icon-128.png extension');
+  }
 
   childProcess.execSync('rm -rf extension/partials');
   return merge(
-    gulp.src('build/bundle.*.js').pipe(gulp.dest('extension')),
+    // Copy any additional JS files from dist if they exist
+    gulp.src('dist/assets/*.js', { allowEmpty: true }).pipe(gulp.dest('extension/assets')),
     gulp.src('extension/**/*').pipe(zip(`extension.zip`)).pipe(gulp.dest('./')),
   );
 });
 
 gulp.task('cleanup', function () {
   return childProcess.execSync('rm -rf app extension');
 });
+
 gulp.task('cleanup-build', function () {
   return childProcess.execSync('rm -rf build');
 });

gulpfile.js renamed to gulpfile.cjs

@@ -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",
-    "release": "gulp release",
+    "build": "vite build",
+    "release": "gulp --gulpfile gulpfile.cjs 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",

package.json

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