@unocss/autocomplete 0.29.0 → 0.29.1

package/README.md

@@ -1,8 +1,60 @@
 # @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>`, `<precent>` 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` ...
 
 ## License
 

package/dist/index.cjs

@@ -14,6 +14,7 @@ const shorthands = {
   precent: `(${[0, 25, 50, 45, 100].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) => {
@@ -88,7 +89,7 @@ function parseAutocomplete(template, theme = {}) {
           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;
@@ -122,6 +123,13 @@ function createAutocomplete(uno) {
   const cache = new LRU__default({ max: 1e3 });
   let staticUtils = [];
   let templates = [];
+  reset();
+  return {
+    suggest,
+    templates,
+    cache,
+    reset
+  };
   function getParsed(template) {
     if (!templateCache.has(template))
       templateCache.set(template, parseAutocomplete(template, uno.config.theme));
@@ -132,11 +140,11 @@ function createAutocomplete(uno) {
       return [];
     if (cache.has(input))
       return cache.get(input);
-    const result = await Promise.all([
+    const result = processSuggestions(await Promise.all([
       suggestSelf(input),
       suggestStatic(input),
       ...suggestFromPreset(input)
-    ]).then((i) => core.uniq(i.flat()).sort().filter(Boolean));
+    ]));
     cache.set(input, result);
     return result;
   }
@@ -159,21 +167,24 @@ function createAutocomplete(uno) {
       ...uno.config.rulesDynamic.flatMap((i) => core.toArray(i?.[2]?.autocomplete || []))
     ];
   }
-  reset();
-  return {
-    suggest,
-    templates,
-    cache,
-    reset
-  };
+  function processSuggestions(suggestions) {
+    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);
+    });
+  }
 }
 
 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 +194,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

@@ -6,6 +6,7 @@ const shorthands = {
   precent: `(${[0, 25, 50, 45, 100].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) => {
@@ -80,7 +81,7 @@ function parseAutocomplete(template, theme = {}) {
           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;
@@ -114,6 +115,13 @@ function createAutocomplete(uno) {
   const cache = new LRU({ max: 1e3 });
   let staticUtils = [];
   let templates = [];
+  reset();
+  return {
+    suggest,
+    templates,
+    cache,
+    reset
+  };
   function getParsed(template) {
     if (!templateCache.has(template))
       templateCache.set(template, parseAutocomplete(template, uno.config.theme));
@@ -124,11 +132,11 @@ function createAutocomplete(uno) {
       return [];
     if (cache.has(input))
       return cache.get(input);
-    const result = await Promise.all([
+    const result = processSuggestions(await Promise.all([
       suggestSelf(input),
       suggestStatic(input),
       ...suggestFromPreset(input)
-    ]).then((i) => uniq(i.flat()).sort().filter(Boolean));
+    ]));
     cache.set(input, result);
     return result;
   }
@@ -151,21 +159,24 @@ function createAutocomplete(uno) {
       ...uno.config.rulesDynamic.flatMap((i) => toArray(i?.[2]?.autocomplete || []))
     ];
   }
-  reset();
-  return {
-    suggest,
-    templates,
-    cache,
-    reset
-  };
+  function processSuggestions(suggestions) {
+    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);
+    });
+  }
 }
 
 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 +185,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.1",
   "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.1"
   },
   "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>`, `<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"
 }