feat: attributes and styles configurable

Author: sastan

src/configuration.ts

@@ -1,6 +1,8 @@
 export interface TwindPluginConfiguration {
-  readonly tags: ReadonlyArray<string>
   readonly configFile?: string
+  readonly tags: ReadonlyArray<string>
+  readonly attributes: ReadonlyArray<string>
+  readonly styles: ReadonlyArray<string>
   readonly debug?: boolean
   // Readonly validate: boolean;
   // readonly lint: { [key: string]: any };
@@ -10,6 +12,8 @@ export interface TwindPluginConfiguration {
 export class ConfigurationManager {
   private static readonly defaultConfiguration: TwindPluginConfiguration = {
     tags: ['tw', 'apply'],
+    attributes: ['tw', 'class', 'className'],
+    styles: ['style', 'styled'],
     debug: false,
     // Validate: true,
     // lint: {
@@ -30,18 +34,15 @@ export class ConfigurationManager {
   }
 
   public updateFromPluginConfig(config: Partial<TwindPluginConfiguration> = {}): void {
-    const { tags, ...mergedConfig } = {
+    const mergedConfig = {
       ...ConfigurationManager.defaultConfiguration,
       ...config,
     }
 
     this._configuration = {
       ...mergedConfig,
       debug: 'true' == String(mergedConfig.debug),
-      tags: this._configuration.tags,
     }
-    ;(this._configuration.tags as string[]).length = 0
-    ;(this._configuration.tags as string[]).push(...tags)
 
     for (const listener of this._configUpdatedListeners) {
       listener()

src/plugin.ts

@@ -67,19 +67,17 @@ export class TwindPlugin {
 
     const ttls = new TwindLanguageService(this.typescript, info, this._configManager, this._logger)
 
-    const templateSettings = getTemplateSettings(this._configManager)
-
     const helper = new StandardTemplateSourceHelper(
       this.typescript,
-      templateSettings,
+      this._configManager,
       new StandardScriptSourceHelper(this.typescript, info.project),
-      getSourceMatchers(this.typescript, templateSettings),
     )
 
     // Set up decorator
     return {
       ...languageService,
 
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       getCompletionEntryDetails: (fileName, position, name, ...rest: any[]) => {
         const context = helper.getTemplate(fileName, position)
 
@@ -91,6 +89,7 @@ export class TwindPlugin {
           )
         }
 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return (languageService.getCompletionsAtPosition as any)(fileName, position, name, ...rest)
       },
 
@@ -162,18 +161,6 @@ export class TwindPlugin {
   }
 }
 
-export function getTemplateSettings(configManager: ConfigurationManager): TemplateSettings {
-  return {
-    get tags() {
-      return configManager.config.tags
-    },
-    enableForStringWithSubstitutions: true,
-    getSubstitution(templateString, start, end) {
-      return `\${${'x'.repeat(end - start - 3)}}`
-    },
-  }
-}
-
 function isValidTypeScriptVersion(typescript: typeof ts): boolean {
   const [major, minor] = typescript.version.split('.')
 

src/source-helper.ts

@@ -9,7 +9,9 @@ import type {
 import type ScriptSourceHelper from 'typescript-template-language-service-decorator/lib/script-source-helper'
 import type TemplateSourceHelper from 'typescript-template-language-service-decorator/lib/template-source-helper'
 import { relative } from 'typescript-template-language-service-decorator/lib/nodes'
+import type { ConfigurationManager } from './configuration'
 import { match, Matcher } from './match'
+import { getSourceMatchers } from './source-matcher'
 
 class PlaceholderSubstituter {
   public static replacePlaceholders(
@@ -126,13 +128,35 @@ class StandardTemplateContext /* implements TemplateContext */ {
   }
 }
 
+export function getTemplateSettings(configManager: ConfigurationManager): TemplateSettings {
+  return {
+    get tags() {
+      return configManager.config.tags
+    },
+    enableForStringWithSubstitutions: true,
+    getSubstitution(templateString, start, end) {
+      return `\${${'x'.repeat(end - start - 3)}}`
+    },
+  }
+}
+
 export class StandardTemplateSourceHelper implements TemplateSourceHelper {
+  private templateSettings: TemplateSettings
+  private sourceMatchers: Matcher[]
+
   constructor(
     private readonly typescript: typeof ts,
-    private readonly templateStringSettings: TemplateSettings,
+    private readonly configManager: ConfigurationManager,
     private readonly helper: ScriptSourceHelper,
-    private readonly sourceMatchers: Matcher[],
-  ) {}
+  ) {
+    this.templateSettings = getTemplateSettings(this.configManager)
+    this.sourceMatchers = getSourceMatchers(this.typescript, this.configManager.config)
+
+    configManager.onUpdatedConfig(() => {
+      this.templateSettings = getTemplateSettings(this.configManager)
+      this.sourceMatchers = getSourceMatchers(this.typescript, this.configManager.config)
+    })
+  }
 
   public getTemplate(fileName: string, position: number): TemplateContext | undefined {
     const node = this.getValidTemplateNode(this.helper.getNode(fileName, position))
@@ -163,7 +187,7 @@ export class StandardTemplateSourceHelper implements TemplateSourceHelper {
       fileName,
       node,
       this.helper,
-      this.templateStringSettings,
+      this.templateSettings,
     ) as TemplateContext
   }
 
@@ -177,7 +201,7 @@ export class StandardTemplateSourceHelper implements TemplateSourceHelper {
             fileName,
             this.getValidTemplateNode(node) as ts.StringLiteralLike,
             this.helper,
-            this.templateStringSettings,
+            this.templateSettings,
           ) as TemplateContext,
       )
   }
@@ -199,7 +223,7 @@ export class StandardTemplateSourceHelper implements TemplateSourceHelper {
       return this.getValidTemplateNode(node.template)
     }
 
-    // TODO if templateStringSettings.enableForStringWithSubstitutions
+    // TODO if templateSettings.enableForStringWithSubstitutions
     if (this.typescript.isTemplateHead(node) || this.typescript.isTemplateSpan(node)) {
       return this.getValidTemplateNode(node.parent)
     }

src/source-matcher.ts

@@ -1,10 +1,10 @@
-import type { TemplateSettings } from 'typescript-template-language-service-decorator'
 import type * as ts from 'typescript/lib/tsserverlibrary'
 import type { Matcher } from './match'
+import type { TwindPluginConfiguration } from './configuration'
 
 export const getSourceMatchers = (
   { SyntaxKind }: typeof ts,
-  templateStringSettings: TemplateSettings,
+  config: TwindPluginConfiguration,
 ): Matcher[] => [
   // tw`...`
   {
@@ -13,7 +13,7 @@ export const getSourceMatchers = (
     // TODO styled.button, styled()
     tag: {
       kind: SyntaxKind.Identifier,
-      text: templateStringSettings.tags,
+      text: config.tags,
     },
   },
   // tw(...)
@@ -23,15 +23,15 @@ export const getSourceMatchers = (
     // TODO styled.button, styled()
     expression: {
       kind: SyntaxKind.Identifier,
-      text: templateStringSettings.tags,
+      text: config.tags,
     },
   },
   // JsxAttribute -> className=""
   {
     kind: SyntaxKind.JsxAttribute,
     name: {
       kind: SyntaxKind.Identifier,
-      text: ['tw', 'class', 'className'],
+      text: config.attributes,
     },
   },
   // { '@apply': `...` }
@@ -62,7 +62,7 @@ export const getSourceMatchers = (
         kind: SyntaxKind.CallExpression,
         expression: {
           kind: SyntaxKind.Identifier,
-          text: ['style', 'styled'],
+          text: config.styles,
         },
       },
     },
@@ -92,7 +92,7 @@ export const getSourceMatchers = (
               kind: SyntaxKind.CallExpression,
               expression: {
                 kind: SyntaxKind.Identifier,
-                text: ['style', 'styled'],
+                text: config.styles,
               },
             },
           },
@@ -123,7 +123,7 @@ export const getSourceMatchers = (
                 kind: SyntaxKind.CallExpression,
                 expression: {
                   kind: SyntaxKind.Identifier,
-                  text: ['style', 'styled'],
+                  text: config.styles,
                 },
               },
             },