@unocss/autocomplete 0.29.0 → 0.29.3

package/README.md

@@ -1,8 +1,72 @@
 # @unocss/autocomplete
 
-Autocomplete utils for UnoCSS.
+Autocomplete 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).
 
-> WIP
+## Syntax
+
+To add autocomplete support to your custom rules:
+
+### Static Rules
+
+Static rules like this will just works without any configuration.
+
+```ts
+rules: [
+  ['flex', { display: 'flex' }]
+]
+```
+
+### Dynamic Rules
+
+For dynamic rules, you can provide an extra `meta` object to the rule and specify the autocomplete template.
+
+```ts
+rules: [
+  [
+    /^m-(\d)$/,
+    ([, d]) => ({ margin: `${d / 4}rem` }),
+    { autocomplete: 'm-<num>' }, // <-- this
+  ],
+]
+```
+
+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>`, `<percent>` and `<directions>`
+- `$...`: theme infering. for example, `$colors` will list all the properties of the `colors` object of the theme.
+
+For examples:
+
+###### Example 1
+
+- **Template**: `(border|b)-(solid|dashed|dotted|double|hidden|none)`
+- **Input**: `b-do`
+- **Suggestions**: `b-dashed`, `b-double`
+
+###### Example 2
+
+- **Template**: `m-<num>`
+- **Input**: `m-`
+- **Suggestions**: `m-1`, `m-2`, `m-3` ...
+
+###### Example 3
+
+- **Template**: `text-$colors`
+- **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
 

package/dist/index.cjs

@@ -11,9 +11,10 @@ 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"];
 function handleRegexMatch(str, regex, onMatched, onNotMatched) {
   let lastIndex = 0;
   Array.from(str.matchAll(regex)).forEach((m) => {
@@ -40,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];
@@ -74,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") {
@@ -85,10 +91,11 @@ 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));
+        const keys = part.objects.flatMap((i) => Object.keys(i)).filter((i) => i && !ignoredThemeKeys.includes(i) && i[0] !== "_");
         const fullMatched = keys.find((i) => i && rest.startsWith(i));
         if (fullMatched != null) {
           matched += fullMatched;
@@ -105,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);
@@ -121,7 +127,14 @@ function createAutocomplete(uno) {
   const templateCache = /* @__PURE__ */ new Map();
   const cache = new LRU__default({ max: 1e3 });
   let staticUtils = [];
-  let templates = [];
+  const templates = [];
+  reset();
+  return {
+    suggest,
+    templates,
+    cache,
+    reset
+  };
   function getParsed(template) {
     if (!templateCache.has(template))
       templateCache.set(template, parseAutocomplete(template, uno.config.theme));
@@ -132,11 +145,18 @@ function createAutocomplete(uno) {
       return [];
     if (cache.has(input))
       return cache.get(input);
-    const result = await Promise.all([
-      suggestSelf(input),
-      suggestStatic(input),
-      ...suggestFromPreset(input)
-    ]).then((i) => core.uniq(i.flat()).sort().filter(Boolean));
+    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(processed),
+      suggestStatic(processed),
+      ...suggestFromPreset(processed),
+      ...suggestVariant(processed, variants)
+    ]), variantPrefix, variantPostfix);
     cache.set(input, result);
     return result;
   }
@@ -150,30 +170,34 @@ 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, 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);
   }
-  reset();
-  return {
-    suggest,
-    templates,
-    cache,
-    reset
-  };
 }
 
 function searchUsageBoundary(line, index) {
   let start = index;
   let end = index;
-  while (start && /[^\s"']/.test(line.charAt(start - 1)))
+  const regex = /[^\s>"'`]/;
+  while (start && regex.test(line.charAt(start - 1)))
     --start;
-  while (end < line.length && /[^\s"']/.test(line.charAt(end)))
+  while (end < line.length && regex.test(line.charAt(end)))
     ++end;
   return {
     content: line.slice(start, end),
@@ -183,5 +207,7 @@ function searchUsageBoundary(line, index) {
 }
 
 exports.createAutocomplete = createAutocomplete;
+exports.ignoredThemeKeys = ignoredThemeKeys;
 exports.parseAutocomplete = parseAutocomplete;
 exports.searchUsageBoundary = searchUsageBoundary;
+exports.shorthands = shorthands;

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { UnoGenerator, AutoCompleteFunction } from '@unocss/core';
 import LRU from 'lru-cache';
 
 declare function createAutocomplete(uno: UnoGenerator): {
-    suggest: (input: string) => Promise<string[] | undefined>;
+    suggest: (input: string) => Promise<string[]>;
     templates: (string | AutoCompleteFunction)[];
     cache: LRU<string, string[]>;
     reset: () => void;
@@ -26,6 +26,8 @@ interface ParsedAutocompleteTemplate {
     suggest(input: string): string[] | undefined;
 }
 
+declare const shorthands: Record<string, string>;
+declare const ignoredThemeKeys: string[];
 declare function parseAutocomplete(template: string, theme?: any): ParsedAutocompleteTemplate;
 
 declare function searchUsageBoundary(line: string, index: number): {
@@ -34,4 +36,4 @@ declare function searchUsageBoundary(line: string, index: number): {
     end: number;
 };
 
-export { AutocompleteTemplateGroup, AutocompleteTemplatePart, AutocompleteTemplateStatic, AutocompleteTemplateTheme, ParsedAutocompleteTemplate, createAutocomplete, parseAutocomplete, searchUsageBoundary };
+export { AutocompleteTemplateGroup, AutocompleteTemplatePart, AutocompleteTemplateStatic, AutocompleteTemplateTheme, ParsedAutocompleteTemplate, createAutocomplete, ignoredThemeKeys, parseAutocomplete, searchUsageBoundary, shorthands };

package/dist/index.mjs

@@ -1,11 +1,12 @@
-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"];
 function handleRegexMatch(str, regex, onMatched, onNotMatched) {
   let lastIndex = 0;
   Array.from(str.matchAll(regex)).forEach((m) => {
@@ -32,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];
@@ -66,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") {
@@ -77,10 +83,11 @@ 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));
+        const keys = part.objects.flatMap((i) => Object.keys(i)).filter((i) => i && !ignoredThemeKeys.includes(i) && i[0] !== "_");
         const fullMatched = keys.find((i) => i && rest.startsWith(i));
         if (fullMatched != null) {
           matched += fullMatched;
@@ -97,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);
@@ -113,7 +119,14 @@ function createAutocomplete(uno) {
   const templateCache = /* @__PURE__ */ new Map();
   const cache = new LRU({ max: 1e3 });
   let staticUtils = [];
-  let templates = [];
+  const templates = [];
+  reset();
+  return {
+    suggest,
+    templates,
+    cache,
+    reset
+  };
   function getParsed(template) {
     if (!templateCache.has(template))
       templateCache.set(template, parseAutocomplete(template, uno.config.theme));
@@ -124,11 +137,18 @@ function createAutocomplete(uno) {
       return [];
     if (cache.has(input))
       return cache.get(input);
-    const result = await Promise.all([
-      suggestSelf(input),
-      suggestStatic(input),
-      ...suggestFromPreset(input)
-    ]).then((i) => uniq(i.flat()).sort().filter(Boolean));
+    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(processed),
+      suggestStatic(processed),
+      ...suggestFromPreset(processed),
+      ...suggestVariant(processed, variants)
+    ]), variantPrefix, variantPostfix);
     cache.set(input, result);
     return result;
   }
@@ -142,30 +162,34 @@ 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, 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);
   }
-  reset();
-  return {
-    suggest,
-    templates,
-    cache,
-    reset
-  };
 }
 
 function searchUsageBoundary(line, index) {
   let start = index;
   let end = index;
-  while (start && /[^\s"']/.test(line.charAt(start - 1)))
+  const regex = /[^\s>"'`]/;
+  while (start && regex.test(line.charAt(start - 1)))
     --start;
-  while (end < line.length && /[^\s"']/.test(line.charAt(end)))
+  while (end < line.length && regex.test(line.charAt(end)))
     ++end;
   return {
     content: line.slice(start, end),
@@ -174,4 +198,4 @@ function searchUsageBoundary(line, index) {
   };
 }
 
-export { createAutocomplete, parseAutocomplete, searchUsageBoundary };
+export { createAutocomplete, ignoredThemeKeys, parseAutocomplete, searchUsageBoundary, shorthands };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unocss/autocomplete",
-  "version": "0.29.0",
+  "version": "0.29.3",
   "description": "Autocomplete utils for UnoCSS",
   "keywords": [
     "unocss",
@@ -36,11 +36,11 @@
   },
   "devDependencies": {
     "@types/lru-cache": "^7.4.0",
-    "@unocss/core": "0.29.0"
+    "@unocss/core": "0.29.3"
   },
   "scripts": {
     "build": "unbuild",
     "stub": "unbuild --stub"
   },
-  "readme": "# @unocss/autocomplete\n\nAutocomplete utils for UnoCSS.\n\n> WIP\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"
 }