feat: add global template backend config support

Author: LastLeaf

glass-easel-miniprogram-template/src/pages/index/test.ts

@@ -0,0 +1,31 @@
+import type { ComponentProperties as _GlobalComponentProperties_ } from '../glass-easel-miniprogram-typescript/sample-template-backend-config.d.ts'
+import type component from './index'
+import type _component_view from './../../components/view/view'
+import type _component_image from './../../components/image/image'
+
+type _Component_<P, W, M> = { propertyValues: P, dataWithProperties: W, methods: M }
+type _ComponentFieldTypes_<T> = (T & Record<string, never>)['_$fieldTypes']
+interface UnknownElement { _$fieldTypes: { propertyValues: Record<string, never>, dataWithProperties: Record<string, never>, methods: Record<string, never> } }
+
+type _Properties_<T> = _ComponentFieldTypes_<T> extends _Component_<infer P, any, any>
+? P
+: { [k: string]: any }
+
+declare const data: _ComponentFieldTypes_<typeof component> extends _Component_<any, infer W, any>
+? W
+: { [k: string]: any }
+
+declare const methods: _ComponentFieldTypes_<typeof component> extends _Component_<any, any, infer M>
+? M
+: { [k: string]: any }
+
+declare const tags: _GlobalComponentProperties_ & {
+'view': _Properties_<typeof _component_view>;
+'image': _Properties_<typeof _component_image>;
+[other: string]: unknown }
+export default {}
+
+type _ForIndex_<T> = T extends any[] ? number : T extends { [key: string | symbol]: any } ? string | symbol : number;
+type _ForItem_<T> = T extends (infer T)[] ? T : T extends { [key: string | symbol]: infer V } ? V : any;
+type _ForKey_<T, N extends string> = N extends "*this" ? _ForItem_<T> : _ForItem_<T> extends { [k: string]: any } ? _ForItem_<T>[N] : unknown;
+{const _tag_=tags['view'];{const _tag_=tags['image'];var _string_or_number_:string|number=_tag_.src;var _class_:string="logo";}}{const _tag_=tags['view'];var _class_:string="hello";var _event_:Function=methods.helloTap;}{const _tag_=tags['view'];_tag_.hidden=!data.showAgain;var _class_:string="hello";}

glass-easel-miniprogram-typescript/sample-template-backend-config.d.ts

@@ -0,0 +1,15 @@
+export type GlassEaselTemplateBackendConfig = {
+  name: 'sample'
+  description: 'An example of template backend configuration.'
+  majorVersion: 1
+  minorVersion: 0
+}
+
+export type ComponentProperties = {
+  div: {
+    hidden: boolean
+  }
+  img: {
+    src: string
+  }
+}

glass-easel-miniprogram-typescript/src/cli.ts

@@ -1,4 +1,5 @@
 import { parseArgs } from 'util'
+import fs from 'node:fs'
 import * as ts from 'typescript'
 import { TmplGroup } from 'glass-easel-template-compiler'
 import { type Diagnostic, DiagnosticLevel, Server } from './server'
@@ -26,6 +27,10 @@ const { values } = parseArgs({
       type: 'boolean',
       short: 'w',
     },
+    templateBackendConfig: {
+      type: 'string',
+      short: 'c',
+    },
   },
   strict: true,
 })
@@ -35,11 +40,12 @@ if (values.help) {
   console.log(`Usage: miniprogram-typescript-check [options]
 
 Options:
-  -h, --help            Show this help message and exit
-  -p, --path <path>     The path of the mini-program project (default: .)
-  -w, --watch           Watch the project and analyze on change
-  -s, --strict          Enable strict mode (avoid using \`any\` types when possible)
-  -v, --verbose         Print verbose messages
+  -h, --help                          Show this help message and exit
+  -p, --path <path>                   The path of the mini-program project (default: .)
+  -c, --templateBackendConfig <path>  The path of the template backend config (including the extension)
+  -w, --watch                         Watch the project and analyze on change
+  -s, --strict                        Enable strict mode (avoid using \`any\` types when possible)
+  -v, --verbose                       Print verbose messages
 `)
   process.exit(0)
 }
@@ -67,6 +73,7 @@ const server = new Server({
   typescriptNodeModule: ts,
   tmplGroup: new TmplGroup(),
   projectPath: values.path,
+  templateBackendConfigPath: values.templateBackendConfig,
   verboseMessages: values.verbose,
   strictMode: values.strict,
   onFirstScanDone() {

glass-easel-miniprogram-typescript/src/server.ts

@@ -82,6 +82,10 @@ export type ServerOptions = {
   projectPath: string
   /** the working directory */
   workingDirectory?: string
+  /** the path to the template backend configuration */
+  templateBackendConfigPath?: string
+  /** the content of the template backend configuration */
+  templateBackendConfig?: string
   /** whether to print verbose messages */
   verboseMessages?: boolean
   /** Whether to enable strict checks (avoid `any` type fallbacks) */
@@ -103,6 +107,8 @@ export class Server {
   private rootFilePaths: Cache<string[]>
   private rootTsFileCount: number
   private rootFilePathsVersion: number
+  private templateBackendConfigPath: string
+  private templateBackendConfig: ts.IScriptSnapshot | null
   private configErrors: ts.Diagnostic[]
   private pendingAsyncTasksListeners: (() => void)[] = []
 
@@ -111,9 +117,15 @@ export class Server {
     const tsc = this.tsc
     this.tmplGroup = options.tmplGroup
     const tmplGroup = this.tmplGroup
-    this.options = options
     this.workingDirectory = options.workingDirectory ?? process.cwd()
     this.projectPath = path.resolve(this.workingDirectory, options.projectPath)
+    this.templateBackendConfig = options.templateBackendConfig
+      ? tsc.ScriptSnapshot.fromString(options.templateBackendConfig)
+      : null
+    this.templateBackendConfigPath = options.templateBackendConfigPath
+      ? path.resolve(this.workingDirectory, options.templateBackendConfigPath)
+      : ''
+    this.options = options
 
     // initialize virtual file system
     this.projectDirManager = new ProjectDirManager(tsc, tmplGroup, this.projectPath, () => {
@@ -217,9 +229,19 @@ export class Server {
         return this.rootFilePaths.get()
       },
       getScriptVersion: (fullPath) => {
+        if (fullPath === this.options.templateBackendConfigPath) {
+          if (this.templateBackendConfig !== null) {
+            return '1'
+          }
+        }
         return this.projectDirManager.getFileVersion(fullPath)?.toString() ?? ''
       },
       getScriptSnapshot: (fullPath) => {
+        if (fullPath === this.options.templateBackendConfigPath) {
+          if (this.templateBackendConfig !== null) {
+            return this.templateBackendConfig
+          }
+        }
         const content = this.projectDirManager.getFileTsContent(fullPath)
         if (content === null) return undefined
         return tsc.ScriptSnapshot.fromString(content)
@@ -302,6 +324,13 @@ export class Server {
     // escape helper
     const escapeJsString = (str: string) => str.replace(/['\\]/g, (a) => `\\${a}`)
 
+    // get global backend configuraion fields
+    const globalBackendConfigLine = this.templateBackendConfigPath
+      ? `import type { ComponentProperties as _GlobalComponentProperties_ } from '${escapeJsString(
+          this.templateBackendConfigPath,
+        )}'`
+      : 'type _GlobalComponentProperties_ = Record<string, never>'
+
     // get exports from corresponding ts file
     const defaultExport = getDefaultExportOfSourceFile(tc, source)
     const relPath = path.relative(compDir, tsFullPath.slice(0, -3))
@@ -322,7 +351,7 @@ declare const methods: _ComponentFieldTypes_<typeof component> extends _Componen
 
     // get exports from using components
     const propertiesHelperLine = `
-type Properties<T> = _ComponentFieldTypes_<T> extends _Component_<infer P, any, any>
+type _Properties_<T> = _ComponentFieldTypes_<T> extends _Component_<infer P, any, any>
 ? P
 : { [k: string]: any }`
     let usingComponentsImports = ''
@@ -336,7 +365,7 @@ type Properties<T> = _ComponentFieldTypes_<T> extends _Component_<infer P, any,
       const relPath = path.relative(compDir, compPath)
       const entryName = `_component_${tagName.replace(/-/g, '_')}`
       usingComponentsImports += `import type ${entryName} from './${escapeJsString(relPath)}'\n`
-      usingComponentsItems.push(`'${tagName}': Properties<typeof ${entryName}>;\n`)
+      usingComponentsItems.push(`'${tagName}': _Properties_<typeof ${entryName}>;\n`)
     })
 
     // treat generics as any type tags
@@ -355,13 +384,14 @@ type Properties<T> = _ComponentFieldTypes_<T> extends _Component_<infer P, any,
       ? '[other: string]: unknown'
       : '[other: string]: any'
     const tagsLine = `
-declare const tags: {
+declare const tags: _GlobalComponentProperties_ & {
 ${usingComponentsItems.join('')}${otherComponents} }`
 
     // add an empty export to avoid some tsc behavior
     const exportLine = 'export default {}'
 
     return [
+      globalBackendConfigLine,
       tsImportLine,
       usingComponentsImports,
       adapterTypesLine,