@pikacss/integration 0.0.15 → 0.0.16

package/dist/index.cjs

@@ -8,6 +8,7 @@ const localPkg = require('local-pkg');
 const MagicString = require('magic-string');
 const micromatch = require('micromatch');
 const pathe = require('pathe');
+const perfectDebounce = require('perfect-debounce');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
@@ -296,7 +297,7 @@ async function createCtx(options) {
       const config = await jiti$1.import(resolvedConfigPath, { default: true });
       return { config, file: resolvedConfigPath };
     },
-    init: async () => {
+    init: perfectDebounce.debounce(async () => {
       ctx.isReady = false;
       ctx.usages.clear();
       const { config, file } = await ctx.loadConfig().catch((error) => {
@@ -304,18 +305,21 @@ async function createCtx(options) {
         return { config: null, file: null };
       });
       ctx.resolvedConfigPath = file;
-      try {
-        ctx.engine = await core.createEngine(config ?? {});
-      } catch (error) {
-        core.warn(`Failed to create engine: ${error.message}. Maybe the config file is invalid, falling back to default config.`, error);
-        ctx.engine = await core.createEngine({});
-      }
-      ctx.engine.config.plugins.unshift({
+      const devPlugin = core.defineEnginePlugin({
         name: "@pikacss/integration:dev",
         preflightUpdated: () => ctx.hooks.styleUpdated.trigger(),
         atomicStyleAdded: () => ctx.hooks.styleUpdated.trigger(),
         autocompleteConfigUpdated: () => ctx.hooks.tsCodegenUpdated.trigger()
       });
+      try {
+        const _config = config ?? {};
+        _config.plugins = _config.plugins ?? [];
+        _config.plugins.unshift(devPlugin);
+        ctx.engine = await core.createEngine(_config);
+      } catch (error) {
+        core.warn(`Failed to create engine: ${error.message}. Maybe the config file is invalid, falling back to default config.`, error);
+        ctx.engine = await core.createEngine({ plugins: [devPlugin] });
+      }
       await promises.mkdir(pathe.dirname(devCssFilepath), { recursive: true }).catch(() => {
       });
       const isDevCssFileExists = await promises.stat(devCssFilepath).then((stat2) => stat2.isFile()).catch(() => false);
@@ -326,12 +330,12 @@ async function createCtx(options) {
         });
         const isGenTsFileExists = await promises.stat(tsCodegenFilepath).then((stat2) => stat2.isFile()).catch(() => false);
         if (isGenTsFileExists === false) {
-          const content = await generateTsCodegenContent(ctx);
+          const content = generateTsCodegenContent(ctx);
           await promises.writeFile(tsCodegenFilepath, content);
         }
       }
       ctx.isReady = true;
-    },
+    }, 300),
     isReady: false,
     configSources,
     resolvedConfigPath: null,
@@ -383,23 +387,35 @@ async function createCtx(options) {
         return void 0;
       }
     },
-    writeDevCssFile: () => {
+    getCssContent: (isDev) => {
       if (ctx.isReady === false)
-        return;
+        return null;
       const atomicStyleIds = [...new Set([...ctx.usages.values()].flatMap((i) => [...new Set(i.flatMap((i2) => i2.atomicStyleIds))]))];
       const css = [
         `/* Auto-generated by ${ctx.currentPackageName} */`,
-        ctx.engine.renderPreflights(true),
-        ctx.engine.renderAtomicStyles(true, { atomicStyleIds })
+        ctx.engine.renderPreflights(isDev),
+        ctx.engine.renderAtomicStyles(isDev, { atomicStyleIds })
       ].join("\n").trim();
-      node_fs.writeFileSync(ctx.devCssFilepath, css);
+      return css;
     },
-    writeTsCodegenFile: () => {
+    getTsCodegenContent: () => {
       if (ctx.isReady === false || ctx.tsCodegenFilepath == null)
-        return;
+        return null;
       const content = generateTsCodegenContent(ctx);
-      node_fs.writeFileSync(ctx.tsCodegenFilepath, content);
-    }
+      return content;
+    },
+    writeDevCssFile: perfectDebounce.debounce(async () => {
+      const content = ctx.getCssContent(true);
+      if (content == null)
+        return;
+      await promises.writeFile(ctx.devCssFilepath, content);
+    }, 300),
+    writeTsCodegenFile: perfectDebounce.debounce(async () => {
+      const content = ctx.getTsCodegenContent();
+      if (ctx.tsCodegenFilepath == null || content == null)
+        return;
+      await promises.writeFile(ctx.tsCodegenFilepath, content);
+    }, 300)
   };
   await ctx.init();
   return ctx;

package/dist/index.d.cts

@@ -56,8 +56,10 @@ interface IntegrationContext {
         code: string;
         map: SourceMap;
     } | Nullish>;
-    writeDevCssFile: () => void;
-    writeTsCodegenFile: () => void;
+    getCssContent: (isDev: boolean) => string | Nullish;
+    getTsCodegenContent: () => string | Nullish;
+    writeDevCssFile: () => Promise<void>;
+    writeTsCodegenFile: () => Promise<void>;
 }
 interface IntegrationContextOptions {
     cwd: string;

package/dist/index.d.mts

@@ -56,8 +56,10 @@ interface IntegrationContext {
         code: string;
         map: SourceMap;
     } | Nullish>;
-    writeDevCssFile: () => void;
-    writeTsCodegenFile: () => void;
+    getCssContent: (isDev: boolean) => string | Nullish;
+    getTsCodegenContent: () => string | Nullish;
+    writeDevCssFile: () => Promise<void>;
+    writeTsCodegenFile: () => Promise<void>;
 }
 interface IntegrationContextOptions {
     cwd: string;

package/dist/index.d.ts

@@ -56,8 +56,10 @@ interface IntegrationContext {
         code: string;
         map: SourceMap;
     } | Nullish>;
-    writeDevCssFile: () => void;
-    writeTsCodegenFile: () => void;
+    getCssContent: (isDev: boolean) => string | Nullish;
+    getTsCodegenContent: () => string | Nullish;
+    writeDevCssFile: () => Promise<void>;
+    writeTsCodegenFile: () => Promise<void>;
 }
 interface IntegrationContextOptions {
     cwd: string;

package/dist/index.mjs

@@ -1,12 +1,13 @@
-import { writeFileSync, statSync } from 'node:fs';
-import { mkdir, stat, writeFile } from 'node:fs/promises';
-import { setWarnFn, warn, createEngine } from '@pikacss/core';
+import { statSync } from 'node:fs';
+import { writeFile, mkdir, stat } from 'node:fs/promises';
+import { setWarnFn, warn, defineEnginePlugin, createEngine } from '@pikacss/core';
 export * from '@pikacss/core';
 import { createJiti } from 'jiti';
 import { isPackageExists } from 'local-pkg';
 import MagicString from 'magic-string';
 import micromatch from 'micromatch';
 import { isAbsolute, resolve, join, dirname, relative } from 'pathe';
+import { debounce } from 'perfect-debounce';
 
 function createEventHook() {
   const listeners = /* @__PURE__ */ new Set();
@@ -290,7 +291,7 @@ async function createCtx(options) {
       const config = await jiti.import(resolvedConfigPath, { default: true });
       return { config, file: resolvedConfigPath };
     },
-    init: async () => {
+    init: debounce(async () => {
       ctx.isReady = false;
       ctx.usages.clear();
       const { config, file } = await ctx.loadConfig().catch((error) => {
@@ -298,18 +299,21 @@ async function createCtx(options) {
         return { config: null, file: null };
       });
       ctx.resolvedConfigPath = file;
-      try {
-        ctx.engine = await createEngine(config ?? {});
-      } catch (error) {
-        warn(`Failed to create engine: ${error.message}. Maybe the config file is invalid, falling back to default config.`, error);
-        ctx.engine = await createEngine({});
-      }
-      ctx.engine.config.plugins.unshift({
+      const devPlugin = defineEnginePlugin({
         name: "@pikacss/integration:dev",
         preflightUpdated: () => ctx.hooks.styleUpdated.trigger(),
         atomicStyleAdded: () => ctx.hooks.styleUpdated.trigger(),
         autocompleteConfigUpdated: () => ctx.hooks.tsCodegenUpdated.trigger()
       });
+      try {
+        const _config = config ?? {};
+        _config.plugins = _config.plugins ?? [];
+        _config.plugins.unshift(devPlugin);
+        ctx.engine = await createEngine(_config);
+      } catch (error) {
+        warn(`Failed to create engine: ${error.message}. Maybe the config file is invalid, falling back to default config.`, error);
+        ctx.engine = await createEngine({ plugins: [devPlugin] });
+      }
       await mkdir(dirname(devCssFilepath), { recursive: true }).catch(() => {
       });
       const isDevCssFileExists = await stat(devCssFilepath).then((stat2) => stat2.isFile()).catch(() => false);
@@ -320,12 +324,12 @@ async function createCtx(options) {
         });
         const isGenTsFileExists = await stat(tsCodegenFilepath).then((stat2) => stat2.isFile()).catch(() => false);
         if (isGenTsFileExists === false) {
-          const content = await generateTsCodegenContent(ctx);
+          const content = generateTsCodegenContent(ctx);
           await writeFile(tsCodegenFilepath, content);
         }
       }
       ctx.isReady = true;
-    },
+    }, 300),
     isReady: false,
     configSources,
     resolvedConfigPath: null,
@@ -377,23 +381,35 @@ async function createCtx(options) {
         return void 0;
       }
     },
-    writeDevCssFile: () => {
+    getCssContent: (isDev) => {
       if (ctx.isReady === false)
-        return;
+        return null;
       const atomicStyleIds = [...new Set([...ctx.usages.values()].flatMap((i) => [...new Set(i.flatMap((i2) => i2.atomicStyleIds))]))];
       const css = [
         `/* Auto-generated by ${ctx.currentPackageName} */`,
-        ctx.engine.renderPreflights(true),
-        ctx.engine.renderAtomicStyles(true, { atomicStyleIds })
+        ctx.engine.renderPreflights(isDev),
+        ctx.engine.renderAtomicStyles(isDev, { atomicStyleIds })
       ].join("\n").trim();
-      writeFileSync(ctx.devCssFilepath, css);
+      return css;
     },
-    writeTsCodegenFile: () => {
+    getTsCodegenContent: () => {
       if (ctx.isReady === false || ctx.tsCodegenFilepath == null)
-        return;
+        return null;
       const content = generateTsCodegenContent(ctx);
-      writeFileSync(ctx.tsCodegenFilepath, content);
-    }
+      return content;
+    },
+    writeDevCssFile: debounce(async () => {
+      const content = ctx.getCssContent(true);
+      if (content == null)
+        return;
+      await writeFile(ctx.devCssFilepath, content);
+    }, 300),
+    writeTsCodegenFile: debounce(async () => {
+      const content = ctx.getTsCodegenContent();
+      if (ctx.tsCodegenFilepath == null || content == null)
+        return;
+      await writeFile(ctx.tsCodegenFilepath, content);
+    }, 300)
   };
   await ctx.init();
   return ctx;

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.0.15",
+  "version": "0.0.16",
   "author": "DevilTea <ch19980814@gmail.com>",
   "license": "MIT",
   "repository": {
@@ -40,7 +40,8 @@
     "magic-string": "^0.30.12",
     "micromatch": "^4.0.8",
     "pathe": "^2.0.3",
-    "@pikacss/core": "0.0.15"
+    "perfect-debounce": "^1.0.0",
+    "@pikacss/core": "0.0.16"
   },
   "devDependencies": {
     "@types/micromatch": "^4.0.9"