chore: Replaced our custom file watcher for our TW plugin (#1735)

packages/plugin/package.json

@@ -4,7 +4,6 @@
 	"description": "Core plugin for Skeleton.",
 	"private": true,
 	"scripts": {
-		"dev": "pnpm build && node ./scripts/watcher.js",
 		"build": "tsx ./scripts/generate-jss.ts && tsup",
 		"sync": "pnpm build:jss && tsup",
 		"package": "pnpm build:jss && tsup",
@@ -41,7 +40,6 @@
 		"@types/postcss-import": "^14.0.0",
 		"@typescript-eslint/eslint-plugin": "5.59.9",
 		"@typescript-eslint/parser": "5.59.9",
-		"chokidar": "^3.5.3",
 		"eslint": "8.42.0",
 		"eslint-config-prettier": "8.8.0",
 		"postcss": "8.4.24",

packages/plugin/pnpm-lock.yaml

@@ -1,4 +1,4 @@
-lockfileVersion: '6.1'
+lockfileVersion: '6.0'
 
 settings:
   autoInstallPeers: true
@@ -17,9 +17,6 @@ devDependencies:
   '@typescript-eslint/parser':
     specifier: 5.59.9
     version: 5.59.9(eslint@8.42.0)(typescript@5.0.3)
-  chokidar:
-    specifier: ^3.5.3
-    version: 3.5.3
   eslint:
     specifier: 8.42.0
     version: 8.42.0

packages/plugin/scripts/generate-jss.ts

@@ -1,4 +1,3 @@
-#!/usr/bin/env tsx
 import type { CssInJs } from 'postcss-js';
 import { generateBaseTWStyles, transpileCssToJs } from './compile-css-to-js.js';
 import { mkdir, writeFile } from 'fs/promises';

packages/plugin/scripts/watcher.js

@@ -1,24 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const chokidar = require('chokidar');
-const { join, resolve, basename } = require('path');
-const { exec } = require('child_process');
-
-const pathToStyles = resolve('.', join('src'));
-// We want to ignore the `generated` dir so we don't have an endless loop
-const generatedPath = resolve('.', join('src', 'tailwind', 'generated'));
-
-// Simple watcher to detect changes in /packages/plugin/src
-// This will rebuild the package on any `src` file changes.
-let locked = false;
-
-chokidar.watch(pathToStyles, { ignored: [generatedPath] }).on('change', (path) => {
-	const now = Date.now();
-	console.log(`[Build Start]: File Updated: ${basename(path)}`);
-	if (!locked) {
-		locked = true;
-		exec('pnpm -F @skeletonlabs/tw-plugin build', () => {
-			console.log(`[Build End]: Completed in ${Date.now() - now}ms`);
-			locked = false;
-		});
-	}
-});

packages/plugin/src/types.ts

@@ -1,4 +1,3 @@
-import type { CSSRuleObject } from 'tailwindcss/types/config';
 import type { PresetTheme, ThemeProperties } from './tailwind/themes';
 
 export type ConfigOptions = {

sites/skeleton.dev/package.json

@@ -36,6 +36,7 @@
 		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-svelte": "^2.30.0",
 		"highlight.js": "^11.8.0",
+		"minimatch": "^9.0.3",
 		"postcss": "^8.4.24",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",

sites/skeleton.dev/pnpm-lock.yaml

@@ -1,4 +1,4 @@
-lockfileVersion: '6.1'
+lockfileVersion: '6.0'
 
 settings:
   autoInstallPeers: true
@@ -11,12 +11,12 @@ devDependencies:
   '@floating-ui/dom':
     specifier: ^1.2.9
     version: 1.2.9
-  '@skeletonlabs/tw-plugin':
-    specifier: workspace:*
-    version: link:../../packages/plugin
   '@skeletonlabs/skeleton':
     specifier: workspace:*
     version: link:../../packages/skeleton
+  '@skeletonlabs/tw-plugin':
+    specifier: workspace:*
+    version: link:../../packages/plugin
   '@sveltejs/adapter-vercel':
     specifier: ^3.0.1
     version: 3.0.1(@sveltejs/kit@1.20.2)
@@ -53,6 +53,9 @@ devDependencies:
   highlight.js:
     specifier: ^11.8.0
     version: 11.8.0
+  minimatch:
+    specifier: ^9.0.3
+    version: 9.0.3
   postcss:
     specifier: ^8.4.24
     version: 8.4.24
@@ -966,6 +969,12 @@ packages:
       concat-map: 0.0.1
     dev: true
 
+  /brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+    dependencies:
+      balanced-match: 1.0.2
+    dev: true
+
   /braces@3.0.2:
     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
     engines: {node: '>=8'}
@@ -1899,6 +1908,13 @@ packages:
       brace-expansion: 1.1.11
     dev: true
 
+  /minimatch@9.0.3:
+    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
     dev: true

sites/skeleton.dev/vite-plugin-skeleton-plugin-watcher/index.ts

@@ -0,0 +1,36 @@
+import type { Plugin } from 'vite';
+import { Minimatch } from 'minimatch';
+import { exec } from 'child_process';
+import { join, resolve, basename } from 'path';
+
+export default function skeletonPluginWatcher(): Plugin {
+	const pluginSrcPath = resolve('.', join('..', '..', 'packages', 'plugin', 'src'));
+	const mm = new Minimatch(join(pluginSrcPath, '**/*'));
+	let locked = false;
+
+	return {
+		name: 'skeleton-plugin-watcher',
+		configureServer(vite) {
+			vite.watcher.add(pluginSrcPath);
+			vite.watcher.on('all', async (event, path) => {
+				if (mm.match(path) && !path.includes('/generated/')) {
+					console.log(`[TW Plugin]: File Updated: ${basename(path)}`);
+					if (!locked) {
+						locked = true;
+						const now = Date.now();
+						exec('pnpm -F @skeletonlabs/tw-plugin build', () => {
+							console.log(`[TW Plugin]: Completed in ${Date.now() - now}ms`);
+							locked = false;
+						});
+					}
+				}
+			});
+		},
+		async buildStart() {
+			const now = Date.now();
+			exec('pnpm -F @skeletonlabs/tw-plugin build', () => {
+				console.log(`[TW Plugin]: Completed in ${Date.now() - now}ms`);
+			});
+		}
+	};
+}

sites/skeleton.dev/vite.config.ts

@@ -1,5 +1,6 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import type { UserConfig } from 'vite';
+import skeletonPluginWatcher from './vite-plugin-skeleton-plugin-watcher';
 import sveld from './vite-plugin-sveld';
 
 // Import package.json version
@@ -8,7 +9,7 @@ const json = readFileSync('../../packages/skeleton/package.json', 'utf8');
 const pkg = JSON.parse(json);
 
 const config: UserConfig = {
-	plugins: [sveltekit(), sveld()],
+	plugins: [sveltekit(), sveld(), skeletonPluginWatcher()],
 	define: {
 		__PACKAGE__: pkg
 	}