diff --git a/packages/plugin/package.json b/packages/plugin/package.json index 5b162345..f9696239 100644 --- a/packages/plugin/package.json +++ b/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", diff --git a/packages/plugin/pnpm-lock.yaml b/packages/plugin/pnpm-lock.yaml index 212e57ef..cac1f6fe 100644 --- a/packages/plugin/pnpm-lock.yaml +++ b/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 diff --git a/packages/plugin/scripts/generate-jss.ts b/packages/plugin/scripts/generate-jss.ts index 673ef031..ff21a538 100644 --- a/packages/plugin/scripts/generate-jss.ts +++ b/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'; diff --git a/packages/plugin/scripts/watcher.js b/packages/plugin/scripts/watcher.js deleted file mode 100644 index be2a0c7e..00000000 --- a/packages/plugin/scripts/watcher.js +++ /dev/null @@ -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; - }); - } -}); diff --git a/packages/plugin/src/types.ts b/packages/plugin/src/types.ts index 41d4c854..d80a6bd5 100644 --- a/packages/plugin/src/types.ts +++ b/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 = { diff --git a/sites/skeleton.dev/package.json b/sites/skeleton.dev/package.json index ff4d2c87..a95f88d1 100644 --- a/sites/skeleton.dev/package.json +++ b/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", diff --git a/sites/skeleton.dev/pnpm-lock.yaml b/sites/skeleton.dev/pnpm-lock.yaml index ae6b661e..904c7794 100644 --- a/sites/skeleton.dev/pnpm-lock.yaml +++ b/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 diff --git a/sites/skeleton.dev/vite-plugin-skeleton-plugin-watcher/index.ts b/sites/skeleton.dev/vite-plugin-skeleton-plugin-watcher/index.ts new file mode 100644 index 00000000..c30c520c --- /dev/null +++ b/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`); + }); + } + }; +} diff --git a/sites/skeleton.dev/vite.config.ts b/sites/skeleton.dev/vite.config.ts index 6e1733ec..6fcb9845 100644 --- a/sites/skeleton.dev/vite.config.ts +++ b/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 }