@pikacss/integration 0.0.14 → 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; }
 
@@ -118,7 +119,7 @@ function generateVueDeclaration(ctx) {
     ""
   ];
 }
-async function generateOverloadContent(ctx) {
+function generateOverloadContent(ctx) {
   const paramsLines = [];
   const fnsLines = [];
   const usages = [...ctx.usages.values()].flat();
@@ -153,7 +154,7 @@ async function generateOverloadContent(ctx) {
     ...paramsLines
   ];
 }
-async function generateTsCodegenContent(ctx) {
+function generateTsCodegenContent(ctx) {
   const lines = [
     `// Auto-generated by ${ctx.currentPackageName}`,
     `import type { CSSProperty, CSSSelectors, DefineAutocomplete, Properties, StyleDefinition, StyleItem } from '${ctx.currentPackageName}'`,
@@ -174,7 +175,7 @@ async function generateTsCodegenContent(ctx) {
   lines.push(...generateStyleFn(ctx));
   lines.push(...generateGlobalDeclaration(ctx));
   lines.push(...generateVueDeclaration(ctx));
-  lines.push(...await generateOverloadContent(ctx));
+  lines.push(...generateOverloadContent(ctx));
   return lines.join("\n");
 }
 
@@ -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,
@@ -346,7 +350,6 @@ async function createCtx(options) {
         if (functionCalls.length === 0)
           return;
         const usages = [];
-        ctx.usages.set(id, usages);
         const transformed = new MagicString__default(code);
         for (const fnCall of functionCalls) {
           const functionCallStr = fnCall.snippet;
@@ -358,7 +361,6 @@ async function createCtx(options) {
             params: args
           };
           usages.push(usage);
-          ctx.hooks.tsCodegenUpdated.trigger();
           let transformedContent;
           if (ctx.fnUtils.isNormal(fnCall.fnName)) {
             transformedContent = ctx.transformedFormat === "array" ? `[${names.map((n) => `'${n}'`).join(", ")}]` : ctx.transformedFormat === "string" ? `'${names.join(" ")}'` : names.join(" ");
@@ -373,6 +375,9 @@ async function createCtx(options) {
           }
           transformed.update(fnCall.start, fnCall.end + 1, transformedContent);
         }
+        ctx.usages.set(id, usages);
+        ctx.hooks.styleUpdated.trigger();
+        ctx.hooks.tsCodegenUpdated.trigger();
         return {
           code: transformed.toString(),
           map: transformed.generateMap({ hires: true })
@@ -382,23 +387,35 @@ async function createCtx(options) {
         return void 0;
       }
     },
-    writeDevCssFile: async () => {
+    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();
-      await promises.writeFile(ctx.devCssFilepath, css);
+      return css;
     },
-    writeTsCodegenFile: async () => {
+    getTsCodegenContent: () => {
       if (ctx.isReady === false || ctx.tsCodegenFilepath == null)
+        return null;
+      const content = generateTsCodegenContent(ctx);
+      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;
-      const content = await generateTsCodegenContent(ctx);
       await promises.writeFile(ctx.tsCodegenFilepath, content);
-    }
+    }, 300)
   };
   await ctx.init();
   return ctx;

package/dist/index.d.cts

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

package/dist/index.d.mts

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

package/dist/index.d.ts

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

package/dist/index.mjs

@@ -1,12 +1,13 @@
 import { statSync } from 'node:fs';
 import { writeFile, mkdir, stat } from 'node:fs/promises';
-import { setWarnFn, warn, createEngine } from '@pikacss/core';
+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();
@@ -112,7 +113,7 @@ function generateVueDeclaration(ctx) {
     ""
   ];
 }
-async function generateOverloadContent(ctx) {
+function generateOverloadContent(ctx) {
   const paramsLines = [];
   const fnsLines = [];
   const usages = [...ctx.usages.values()].flat();
@@ -147,7 +148,7 @@ async function generateOverloadContent(ctx) {
     ...paramsLines
   ];
 }
-async function generateTsCodegenContent(ctx) {
+function generateTsCodegenContent(ctx) {
   const lines = [
     `// Auto-generated by ${ctx.currentPackageName}`,
     `import type { CSSProperty, CSSSelectors, DefineAutocomplete, Properties, StyleDefinition, StyleItem } from '${ctx.currentPackageName}'`,
@@ -168,7 +169,7 @@ async function generateTsCodegenContent(ctx) {
   lines.push(...generateStyleFn(ctx));
   lines.push(...generateGlobalDeclaration(ctx));
   lines.push(...generateVueDeclaration(ctx));
-  lines.push(...await generateOverloadContent(ctx));
+  lines.push(...generateOverloadContent(ctx));
   return lines.join("\n");
 }
 
@@ -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,
@@ -340,7 +344,6 @@ async function createCtx(options) {
         if (functionCalls.length === 0)
           return;
         const usages = [];
-        ctx.usages.set(id, usages);
         const transformed = new MagicString(code);
         for (const fnCall of functionCalls) {
           const functionCallStr = fnCall.snippet;
@@ -352,7 +355,6 @@ async function createCtx(options) {
             params: args
           };
           usages.push(usage);
-          ctx.hooks.tsCodegenUpdated.trigger();
           let transformedContent;
           if (ctx.fnUtils.isNormal(fnCall.fnName)) {
             transformedContent = ctx.transformedFormat === "array" ? `[${names.map((n) => `'${n}'`).join(", ")}]` : ctx.transformedFormat === "string" ? `'${names.join(" ")}'` : names.join(" ");
@@ -367,6 +369,9 @@ async function createCtx(options) {
           }
           transformed.update(fnCall.start, fnCall.end + 1, transformedContent);
         }
+        ctx.usages.set(id, usages);
+        ctx.hooks.styleUpdated.trigger();
+        ctx.hooks.tsCodegenUpdated.trigger();
         return {
           code: transformed.toString(),
           map: transformed.generateMap({ hires: true })
@@ -376,23 +381,35 @@ async function createCtx(options) {
         return void 0;
       }
     },
-    writeDevCssFile: async () => {
+    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();
-      await writeFile(ctx.devCssFilepath, css);
+      return css;
     },
-    writeTsCodegenFile: async () => {
+    getTsCodegenContent: () => {
       if (ctx.isReady === false || ctx.tsCodegenFilepath == null)
+        return null;
+      const content = generateTsCodegenContent(ctx);
+      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;
-      const content = await generateTsCodegenContent(ctx);
       await writeFile(ctx.tsCodegenFilepath, content);
-    }
+    }, 300)
   };
   await ctx.init();
   return ctx;

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.0.14",
+  "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.14"
+    "perfect-debounce": "^1.0.0",
+    "@pikacss/core": "0.0.16"
   },
   "devDependencies": {
     "@types/micromatch": "^4.0.9"