feat(core): support ts check for native components attrs and refactor globalTypes code

Author: wangshunnn

inspect-extension/components/composition/attributesCheck.mpx

@@ -0,0 +1,6 @@
+<template>
+    <view>
+        <image />
+        <!-- ^ 报错提示：缺少必要的 src 属性 -->
+    </view>
+</template>

inspect-extension/components/composition/attrsValue.mpx renamed to inspect-extension/components/composition/attributesValue.mpx

@@ -1,6 +1,9 @@
-import type { MpxCompilerOptions } from '../types'
-import { getSlotsPropertyName } from '../utils/shared'
+import type { MpxCompilerOptions } from '../../types'
+import { getSlotsPropertyName } from '../../utils/shared'
 import { defineComponentTypesContents } from './defineComponentTypes'
+import { nativeComponentsTypesFileName } from './nativeComponentsTypes'
+
+export * from './nativeComponentsTypes'
 
 export function getGlobalTypesFileName({
   checkUnknownProps,
@@ -29,8 +32,8 @@ export function generateGlobalTypes({
 	const __VLS_placeholder: any;
 
 	type __VLS_NativeElements = __VLS_SpreadMerge<SVGElementTagNameMap, HTMLElementTagNameMap>;
-	type __VLS_IntrinsicElements = ${`import('${lib}/jsx-runtime').JSX.IntrinsicElements;`}
-	type __VLS_Element = ${`import('${lib}/jsx-runtime').JSX.Element;`}
+	type __VLS_NativeComponents = ${`import('./${nativeComponentsTypesFileName}').MpxNativeComponents;`}
+	type __VLS_Element = ${`import('./${nativeComponentsTypesFileName}').MpxElement;`}
 	type __VLS_GlobalComponents = ${`import('${lib}').GlobalComponents;`}
 	type __VLS_GlobalDirectives = import('${lib}').GlobalDirectives;
 	type __VLS_IsAny<T> = 0 extends 1 & T ? true : false;

packages/language-core/src/codegen/defineComponentTypes.ts renamed to packages/language-core/src/codegen/globalTypes/defineComponentTypes.ts

@@ -0,0 +1,26 @@
+export const nativeComponentsTypesFileName = 'mpx_native_components'
+
+export const nativeComponentsTypesContents = `
+export interface MpxNativeComponents extends NativeComponents {
+  [name: string]: any
+}
+
+type NativeComponents = {
+  [K in keyof NativeComponentAttrs]: NativeComponentAttrs[K] & ReservedProps
+}
+
+interface ReservedProps {
+  key?: PropertyKey
+  ref?: any
+}
+
+interface NativeComponentAttrs {
+  img: MpxImg
+  image: MpxImg
+  // ..
+}
+
+interface MpxImg {
+  src: number
+}
+`

packages/language-core/src/codegen/globalTypes.ts renamed to packages/language-core/src/codegen/globalTypes/index.ts

@@ -0,0 +1,30 @@
+/**
+ * ! 注意: 类型定义更新后后需要手动同步更新到 `nativeComponents.ts` 文件才能最终生效
+ *
+ * Mpx 原生组件类型定义
+ * - 组件属性必要性检查
+ * - 组件属性类型检查
+ */
+
+export interface MpxNativeComponents extends NativeComponents {
+  [name: string]: any
+}
+
+type NativeComponents = {
+  [K in keyof NativeComponentAttrs]: NativeComponentAttrs[K] & ReservedProps
+}
+
+interface ReservedProps {
+  key?: PropertyKey
+  ref?: any
+}
+
+interface NativeComponentAttrs {
+  img: MpxImg
+  image: MpxImg
+  // ..
+}
+
+interface MpxImg {
+  src: number
+}

packages/language-core/src/codegen/globalTypes/nativeComponentsTypes.ts

@@ -187,6 +187,15 @@ export function* generateScript(
   return ctx
 }
 
+/**
+ * 用 debuggger 作为 script 部分的默认分隔符
+ * 可以正常拦截非正常结束部分的报错
+ * eg:
+ * <script>
+ * const a = 
+ *       ^ Expression expected.ts-plugin(1109)
+ * </script>
+ */
 export function* generateScriptSectionPartiallyEnding(
   source: string,
   end: number,

packages/language-core/src/codegen/globalTypes/nativeComponentsTypes_refer.ts

@@ -54,7 +54,7 @@ function* generateTemplateCtx(options: ScriptCodegenOptions): Generator<Code> {
 }
 
 function* generateTemplateElements(): Generator<Code> {
-  yield `let __VLS_elements!: __VLS_IntrinsicElements${endOfLine}`
+  yield `let __VLS_elements!: __VLS_NativeComponents${endOfLine}`
 }
 
 function* generateTemplateComponents(): Generator<Code> {

packages/language-core/src/codegen/script/index.ts

@@ -12,6 +12,8 @@ import { hyphenateTag } from './shared'
 import {
   generateGlobalTypes,
   getGlobalTypesFileName,
+  nativeComponentsTypesContents,
+  nativeComponentsTypesFileName,
 } from '../codegen/globalTypes'
 
 export function createParsedCommandLineByJson(
@@ -285,6 +287,7 @@ export function setupGlobalTypes(
   }
   try {
     let dir = rootDir
+
     while (
       !host.fileExists(
         path.join(dir, 'node_modules', mpxOptions.lib, 'package.json'),
@@ -296,6 +299,7 @@ export function setupGlobalTypes(
       }
       dir = parentDir
     }
+
     const globalTypesPath = path.join(
       dir,
       'node_modules',
@@ -305,6 +309,15 @@ export function setupGlobalTypes(
     const globalTypesContents =
       `// @ts-nocheck\n` + `export {};\n` + generateGlobalTypes(mpxOptions)
     host.writeFile(globalTypesPath, globalTypesContents)
+
+    const nativeComponentsTypesPath = path.join(
+      dir,
+      'node_modules',
+      '.mpx-global-types',
+      `${nativeComponentsTypesFileName}.d.ts`,
+    )
+    host.writeFile(nativeComponentsTypesPath, nativeComponentsTypesContents)
+
     return { absolutePath: globalTypesPath }
   } catch {
     // noop