@unocss/autocomplete 0.29.1 → 0.29.4

package/README.md

@@ -33,7 +33,7 @@ rules: [
 The template uses a simle DSL to specify the autocomplete suggestions. The syntax is:
 
 - `(...|...)`: logic OR groups. `|` as the separator. Will be used as suggestions when the some of the groups match.
-- `<...>`: built-in short hands. currently supports `<num>`, `<precent>` and `<directions>`
+- `<...>`: built-in short hands. currently supports `<num>`, `<percent>` and `<directions>`
 - `$...`: theme infering. for example, `$colors` will list all the properties of the `colors` object of the theme.
 
 For examples:
@@ -56,6 +56,18 @@ For examples:
 - **Input**: `text-r`
 - **Suggestions**: `text-red`, `text-rose` ...
 
+###### Example 4
+
+For multiple templates
+
+- **Template**: `['(border|b)-<num>', '(border|b)-<directions>-<num>']`
+
+- **Input**: `b-`
+- **Suggestions**: `b-x`, `b-y`, `b-1`, `b-2` ...
+
+- **Input**: `b-x-`
+- **Suggestions**: `b-x-1`, `b-x-2` ...
+
 ## License
 
 MIT License © 2021-PRESENT [Anthony Fu](https://github.com/antfu)

package/dist/index.cjs

@@ -11,7 +11,7 @@ const LRU__default = /*#__PURE__*/_interopDefaultLegacy(LRU);
 
 const shorthands = {
   num: `(${[0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 24, 36].join("|")})`,
-  precent: `(${[0, 25, 50, 45, 100].join("|")})`,
+  percent: `(${Array.from({ length: 11 }, (_, i) => i * 10).join("|")})`,
   directions: "(x|y|t|b|l|r|s|e)"
 };
 const ignoredThemeKeys = ["DEFAULT"];
@@ -41,10 +41,9 @@ function parseAutocomplete(template, theme = {}) {
   };
   function handleNonGroup(input) {
     handleRegexMatch(input, /\$([\w\|]+)/g, (m) => {
-      const keys = m[1].split("|");
       parts.push({
         type: "theme",
-        objects: keys.map((i) => {
+        objects: m[1].split("|").map((i) => {
           if (!i || !theme[i])
             throw new Error(`Invalid theme key ${i}`);
           return theme[i];
@@ -75,8 +74,14 @@ function parseAutocomplete(template, theme = {}) {
     while (tempParts.length) {
       const part = tempParts.shift();
       if (part.type === "static") {
-        if (!rest.startsWith(part.value))
+        if (combinations.length)
+          combinations = combinations.map((i) => i + part.value);
+        if (part.value.startsWith(rest) && part.value !== rest && !combinations.length) {
+          combinations = [part.value];
           break;
+        } else if (!rest.startsWith(part.value)) {
+          break;
+        }
         matched += part.value;
         rest = rest.slice(part.value.length);
       } else if (part.type === "group") {
@@ -86,7 +91,8 @@ function parseAutocomplete(template, theme = {}) {
           rest = rest.slice(fullMatched.length);
         } else {
           combinations = part.values.filter((i) => i.startsWith(rest));
-          break;
+          if (tempParts[0]?.type !== "static")
+            break;
         }
       } else if (part.type === "theme") {
         const keys = part.objects.flatMap((i) => Object.keys(i)).filter((i) => i && !ignoredThemeKeys.includes(i) && i[0] !== "_");
@@ -106,12 +112,11 @@ function parseAutocomplete(template, theme = {}) {
           }
         } else {
           combinations = keys.filter((i) => i.startsWith(rest));
-          break;
+          if (tempParts[0]?.type !== "static")
+            break;
         }
       }
     }
-    if (!matched)
-      return [];
     if (combinations.length === 0)
       combinations.push("");
     return combinations.map((i) => matched + i).filter((i) => i.length >= input.length);
@@ -122,7 +127,7 @@ function createAutocomplete(uno) {
   const templateCache = /* @__PURE__ */ new Map();
   const cache = new LRU__default({ max: 1e3 });
   let staticUtils = [];
-  let templates = [];
+  const templates = [];
   reset();
   return {
     suggest,
@@ -140,11 +145,18 @@ function createAutocomplete(uno) {
       return [];
     if (cache.has(input))
       return cache.get(input);
+    const [, processed, , variants] = uno.matchVariants(input);
+    const idx = input.search(processed);
+    if (idx === -1)
+      return [];
+    const variantPrefix = input.slice(0, idx);
+    const variantPostfix = input.slice(idx + input.length);
     const result = processSuggestions(await Promise.all([
-      suggestSelf(input),
-      suggestStatic(input),
-      ...suggestFromPreset(input)
-    ]));
+      suggestSelf(processed),
+      suggestStatic(processed),
+      ...suggestFromPreset(processed),
+      ...suggestVariant(processed, variants)
+    ]), variantPrefix, variantPostfix);
     cache.set(input, result);
     return result;
   }
@@ -158,23 +170,24 @@ function createAutocomplete(uno) {
   function suggestFromPreset(input) {
     return templates.map((fn) => typeof fn === "function" ? fn(input) : getParsed(fn)(input)) || [];
   }
+  function suggestVariant(input, used) {
+    return uno.config.variants.filter((v) => v.autocomplete && (v.multiPass || !used.has(v))).flatMap((v) => core.toArray(v.autocomplete || [])).map((fn) => typeof fn === "function" ? fn(input) : getParsed(fn)(input));
+  }
   function reset() {
     templateCache.clear();
     cache.clear();
     staticUtils = Object.keys(uno.config.rulesStaticMap);
-    templates = [
-      ...uno.config.autocomplete || [],
-      ...uno.config.rulesDynamic.flatMap((i) => core.toArray(i?.[2]?.autocomplete || []))
-    ];
+    templates.length = 0;
+    templates.push(...uno.config.autocomplete || [], ...uno.config.rulesDynamic.flatMap((i) => core.toArray(i?.[2]?.autocomplete || [])));
   }
-  function processSuggestions(suggestions) {
-    return core.uniq(suggestions.flat()).filter((i) => !!(i && !i.match(/[:-]$/))).sort((a, b) => {
+  function processSuggestions(suggestions, prefix = "", suffix = "") {
+    return core.uniq(suggestions.flat()).filter((i) => !!(i && !i.match(/-$/))).sort((a, b) => {
       const numA = +(a.match(/\d+$/)?.[0] || NaN);
       const numB = +(b.match(/\d+$/)?.[0] || NaN);
       if (!Number.isNaN(numA) && !Number.isNaN(numB))
         return numA - numB;
       return a.localeCompare(b);
-    });
+    }).map((i) => prefix + i + suffix);
   }
 }
 

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import { uniq, toArray } from '@unocss/core';
+import { toArray, uniq } from '@unocss/core';
 import LRU from 'lru-cache';
 
 const shorthands = {
   num: `(${[0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 24, 36].join("|")})`,
-  precent: `(${[0, 25, 50, 45, 100].join("|")})`,
+  percent: `(${Array.from({ length: 11 }, (_, i) => i * 10).join("|")})`,
   directions: "(x|y|t|b|l|r|s|e)"
 };
 const ignoredThemeKeys = ["DEFAULT"];
@@ -33,10 +33,9 @@ function parseAutocomplete(template, theme = {}) {
   };
   function handleNonGroup(input) {
     handleRegexMatch(input, /\$([\w\|]+)/g, (m) => {
-      const keys = m[1].split("|");
       parts.push({
         type: "theme",
-        objects: keys.map((i) => {
+        objects: m[1].split("|").map((i) => {
           if (!i || !theme[i])
             throw new Error(`Invalid theme key ${i}`);
           return theme[i];
@@ -67,8 +66,14 @@ function parseAutocomplete(template, theme = {}) {
     while (tempParts.length) {
       const part = tempParts.shift();
       if (part.type === "static") {
-        if (!rest.startsWith(part.value))
+        if (combinations.length)
+          combinations = combinations.map((i) => i + part.value);
+        if (part.value.startsWith(rest) && part.value !== rest && !combinations.length) {
+          combinations = [part.value];
           break;
+        } else if (!rest.startsWith(part.value)) {
+          break;
+        }
         matched += part.value;
         rest = rest.slice(part.value.length);
       } else if (part.type === "group") {
@@ -78,7 +83,8 @@ function parseAutocomplete(template, theme = {}) {
           rest = rest.slice(fullMatched.length);
         } else {
           combinations = part.values.filter((i) => i.startsWith(rest));
-          break;
+          if (tempParts[0]?.type !== "static")
+            break;
         }
       } else if (part.type === "theme") {
         const keys = part.objects.flatMap((i) => Object.keys(i)).filter((i) => i && !ignoredThemeKeys.includes(i) && i[0] !== "_");
@@ -98,12 +104,11 @@ function parseAutocomplete(template, theme = {}) {
           }
         } else {
           combinations = keys.filter((i) => i.startsWith(rest));
-          break;
+          if (tempParts[0]?.type !== "static")
+            break;
         }
       }
     }
-    if (!matched)
-      return [];
     if (combinations.length === 0)
       combinations.push("");
     return combinations.map((i) => matched + i).filter((i) => i.length >= input.length);
@@ -114,7 +119,7 @@ function createAutocomplete(uno) {
   const templateCache = /* @__PURE__ */ new Map();
   const cache = new LRU({ max: 1e3 });
   let staticUtils = [];
-  let templates = [];
+  const templates = [];
   reset();
   return {
     suggest,
@@ -132,11 +137,18 @@ function createAutocomplete(uno) {
       return [];
     if (cache.has(input))
       return cache.get(input);
+    const [, processed, , variants] = uno.matchVariants(input);
+    const idx = input.search(processed);
+    if (idx === -1)
+      return [];
+    const variantPrefix = input.slice(0, idx);
+    const variantPostfix = input.slice(idx + input.length);
     const result = processSuggestions(await Promise.all([
-      suggestSelf(input),
-      suggestStatic(input),
-      ...suggestFromPreset(input)
-    ]));
+      suggestSelf(processed),
+      suggestStatic(processed),
+      ...suggestFromPreset(processed),
+      ...suggestVariant(processed, variants)
+    ]), variantPrefix, variantPostfix);
     cache.set(input, result);
     return result;
   }
@@ -150,23 +162,24 @@ function createAutocomplete(uno) {
   function suggestFromPreset(input) {
     return templates.map((fn) => typeof fn === "function" ? fn(input) : getParsed(fn)(input)) || [];
   }
+  function suggestVariant(input, used) {
+    return uno.config.variants.filter((v) => v.autocomplete && (v.multiPass || !used.has(v))).flatMap((v) => toArray(v.autocomplete || [])).map((fn) => typeof fn === "function" ? fn(input) : getParsed(fn)(input));
+  }
   function reset() {
     templateCache.clear();
     cache.clear();
     staticUtils = Object.keys(uno.config.rulesStaticMap);
-    templates = [
-      ...uno.config.autocomplete || [],
-      ...uno.config.rulesDynamic.flatMap((i) => toArray(i?.[2]?.autocomplete || []))
-    ];
+    templates.length = 0;
+    templates.push(...uno.config.autocomplete || [], ...uno.config.rulesDynamic.flatMap((i) => toArray(i?.[2]?.autocomplete || [])));
   }
-  function processSuggestions(suggestions) {
-    return uniq(suggestions.flat()).filter((i) => !!(i && !i.match(/[:-]$/))).sort((a, b) => {
+  function processSuggestions(suggestions, prefix = "", suffix = "") {
+    return uniq(suggestions.flat()).filter((i) => !!(i && !i.match(/-$/))).sort((a, b) => {
       const numA = +(a.match(/\d+$/)?.[0] || NaN);
       const numB = +(b.match(/\d+$/)?.[0] || NaN);
       if (!Number.isNaN(numA) && !Number.isNaN(numB))
         return numA - numB;
       return a.localeCompare(b);
-    });
+    }).map((i) => prefix + i + suffix);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/autocomplete",
-  "version": "0.29.1",
+  "version": "0.29.4",
   "description": "Autocomplete utils for UnoCSS",
   "keywords": [
     "unocss",
@@ -36,11 +36,11 @@
   },
   "devDependencies": {
     "@types/lru-cache": "^7.4.0",
-    "@unocss/core": "0.29.1"
+    "@unocss/core": "0.29.4"
   },
   "scripts": {
     "build": "unbuild",
     "stub": "unbuild --stub"
   },
-  "readme": "# @unocss/autocomplete\n\nAutocomplete utils for UnoCSS. This is embedded in [the playground](https://unocss.antfu.me/) and [the VS Code extension](https://github.com/unocss/unocss/tree/main/packages/vscode).\n\n## Syntax\n\nTo add autocomplete support to your custom rules:\n\n### Static Rules\n\nStatic rules like this will just works without any configuration.\n\n```ts\nrules: [\n  ['flex', { display: 'flex' }]\n]\n```\n\n### Dynamic Rules\n\nFor dynamic rules, you can provide an extra `meta` object to the rule and specify the autocomplete template.\n\n```ts\nrules: [\n  [\n    /^m-(\\d)$/,\n    ([, d]) => ({ margin: `${d / 4}rem` }),\n    { autocomplete: 'm-<num>' }, // <-- this\n  ],\n]\n```\n\nThe template uses a simle DSL to specify the autocomplete suggestions. The syntax is:\n\n- `(...|...)`: logic OR groups. `|` as the separator. Will be used as suggestions when the some of the groups match.\n- `<...>`: built-in short hands. currently supports `<num>`, `<precent>` and `<directions>`\n- `$...`: theme infering. for example, `$colors` will list all the properties of the `colors` object of the theme.\n\nFor examples:\n\n###### Example 1\n\n- **Template**: `(border|b)-(solid|dashed|dotted|double|hidden|none)`\n- **Input**: `b-do`\n- **Suggestions**: `b-dashed`, `b-double`\n\n###### Example 2\n\n- **Template**: `m-<num>`\n- **Input**: `m-`\n- **Suggestions**: `m-1`, `m-2`, `m-3` ...\n\n###### Example 3\n\n- **Template**: `text-$colors`\n- **Input**: `text-r`\n- **Suggestions**: `text-red`, `text-rose` ...\n\n## License\n\nMIT License © 2021-PRESENT [Anthony Fu](https://github.com/antfu)\n"
+  "readme": "# @unocss/autocomplete\n\nAutocomplete utils for UnoCSS. This is embedded in [the playground](https://unocss.antfu.me/) and [the VS Code extension](https://github.com/unocss/unocss/tree/main/packages/vscode).\n\n## Syntax\n\nTo add autocomplete support to your custom rules:\n\n### Static Rules\n\nStatic rules like this will just works without any configuration.\n\n```ts\nrules: [\n  ['flex', { display: 'flex' }]\n]\n```\n\n### Dynamic Rules\n\nFor dynamic rules, you can provide an extra `meta` object to the rule and specify the autocomplete template.\n\n```ts\nrules: [\n  [\n    /^m-(\\d)$/,\n    ([, d]) => ({ margin: `${d / 4}rem` }),\n    { autocomplete: 'm-<num>' }, // <-- this\n  ],\n]\n```\n\nThe template uses a simle DSL to specify the autocomplete suggestions. The syntax is:\n\n- `(...|...)`: logic OR groups. `|` as the separator. Will be used as suggestions when the some of the groups match.\n- `<...>`: built-in short hands. currently supports `<num>`, `<percent>` and `<directions>`\n- `$...`: theme infering. for example, `$colors` will list all the properties of the `colors` object of the theme.\n\nFor examples:\n\n###### Example 1\n\n- **Template**: `(border|b)-(solid|dashed|dotted|double|hidden|none)`\n- **Input**: `b-do`\n- **Suggestions**: `b-dashed`, `b-double`\n\n###### Example 2\n\n- **Template**: `m-<num>`\n- **Input**: `m-`\n- **Suggestions**: `m-1`, `m-2`, `m-3` ...\n\n###### Example 3\n\n- **Template**: `text-$colors`\n- **Input**: `text-r`\n- **Suggestions**: `text-red`, `text-rose` ...\n\n###### Example 4\n\nFor multiple templates\n\n- **Template**: `['(border|b)-<num>', '(border|b)-<directions>-<num>']`\n\n- **Input**: `b-`\n- **Suggestions**: `b-x`, `b-y`, `b-1`, `b-2` ...\n\n- **Input**: `b-x-`\n- **Suggestions**: `b-x-1`, `b-x-2` ...\n\n## License\n\nMIT License © 2021-PRESENT [Anthony Fu](https://github.com/antfu)\n"
 }