Merge pull request #257 from wechat-miniprogram/feat-checker

Add typescript & WXML interaction support

Author: LastLeaf

glass-easel-miniprogram-adapter/src/component.ts

@@ -8,6 +8,8 @@ import { MediaQueryObserver } from './media_query'
 type DataList = typeUtils.DataList
 type PropertyList = typeUtils.PropertyList
 type MethodList = typeUtils.MethodList
+export type Empty = typeUtils.Empty
+export type PropertyValues<TProperty extends PropertyList> = typeUtils.PropertyValues<TProperty>
 export type AllData<
   TData extends DataList,
   TProperty extends PropertyList,

glass-easel-miniprogram-adapter/src/space.ts

@@ -31,7 +31,13 @@ export interface PageConstructor {
           /* TExtraThisFields */ Empty
         >
       >,
-  ): void
+  ): ComponentType<
+    /* TData */ TData,
+    /* TProperty */ Empty,
+    /* TMethod */ TNewExtraFields,
+    /* TComponentExport */ never,
+    /* TExtraThisFields */ Empty
+  >
 }
 
 // The component constructor

glass-easel-miniprogram-adapter/tests/space.test.ts

@@ -1194,4 +1194,26 @@ describe('define', () => {
     root.getComponent().triggerPageLifetime('show', [])
     expect(domHtml(root.getComponent())).toBe('<comp1>2</comp1>')
   })
+
+  test('overall behavior', () => {
+    const env = new MiniProgramEnv()
+    const codeSpace = env.createCodeSpace('', true)
+
+    const componentSpace = codeSpace.getComponentSpace()
+    const overall = componentSpace.defineBehavior({
+      is: 'overall',
+      data: {
+        num: 1,
+      },
+    })
+    codeSpace.setOverallBehavior(overall)
+
+    codeSpace.addCompiledTemplate('comp', tmpl(`<div>{{ num }}</div>`))
+
+    codeSpace.component('comp').register()
+
+    const ab = env.associateBackend()
+    const root = ab.createRoot('body', codeSpace, 'comp')
+    expect(domHtml(root.getComponent())).toBe('<div>1</div>')
+  })
 })

glass-easel-miniprogram-template/package.json

@@ -17,13 +17,14 @@
     "eslint": "^7.32.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-promise": "^4.2.1",
+    "glass-easel-miniprogram-typescript": "workspace:*",
     "glass-easel-miniprogram-webpack-plugin": "workspace:*",
     "less": "^4.1.3",
     "less-loader": "^11.0.0",
     "mini-css-extract-plugin": "^2.6.1",
     "ts-loader": "^9.4.2",
     "typescript": "~5.2.2",
-    "webpack": "^5.85.0",
-    "webpack-cli": "^5.0.1"
+    "webpack": "^5.101.3",
+    "webpack-cli": "^6.0.1"
   }
 }

glass-easel-miniprogram-template/src/components/image/image.ts

@@ -1,5 +1,6 @@
-Component({
+export default Component({
   properties: {
     src: String,
   },
+  data: {},
 })

glass-easel-miniprogram-template/src/components/view/view.ts

@@ -1,9 +1,10 @@
 import { StyleSegmentIndex } from 'glass-easel'
 
-Component({
+export default Component({
   properties: {
     hidden: Boolean,
   },
+  data: {},
   observers: {
     hidden(hidden: boolean) {
       // `this._$` is the underlying glass-easel element

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

@@ -1,4 +1,4 @@
-Page({
+export default Page({
   data: {
     showAgain: false,
   },

glass-easel-miniprogram-typescript/.gitignore

@@ -0,0 +1,3 @@
+/package-lock.json
+/node_modules
+/dist

glass-easel-miniprogram-typescript/README.md

@@ -0,0 +1,40 @@
+# glass-easel-miniprogram-typescript
+
+An extra TypeScript checker for mini-program code running in glass-easel.
+
+Refer to the [glass-easel](https://github.com/wechat-miniprogram/glass-easel) project for further details.
+
+## Features
+
+If the component is written in TypeScript, this tool can do some type-checking on expressions inside WXML.
+
+Firstly, the component `.ts` must export the component as default. For example:
+
+```ts
+export default Component({
+  data: {
+    hello: 'world',
+  },
+})
+```
+
+Then in `.wxml` :
+
+```xml
+<div>{{ hello }}</div>
+
+<!-- This tool will report type errors like -->
+<div>{{ heloo }}</div> <!-- Error: 'heloo' does not exist -->
+```
+
+This tool is based on TypeScript (a.k.a. `tsserver` ) for type-checking.
+
+Note that it only report errors in component WXML files. For type errors in TS files, you should run standard TypeScript commands.
+
+## Usage
+
+After install this module, the `miniprogram-typescript-check` tool should be available.
+
+See all options: `npx miniprogram-typescript-check --help`
+
+In most cases, this command is suggested: `npx miniprogram-typescript-check -p [PATH_TO_SRC]`

glass-easel-miniprogram-typescript/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "glass-easel-miniprogram-typescript",
+  "description": "A checker for the glass-easel project in MiniProgram file structure",
+  "version": "0.13.0",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "bin": {
+    "miniprogram-typescript-check": "dist/cli.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wechat-miniprogram/glass-easel.git"
+  },
+  "keywords": [
+    "glass-easel"
+  ],
+  "author": "wechat-miniprogram",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/wechat-miniprogram/glass-easel/issues"
+  },
+  "homepage": "https://github.com/wechat-miniprogram/glass-easel",
+  "main": "dist/index.js",
+  "types": "src/index.ts",
+  "scripts": {
+    "build": "tsc -p .",
+    "dev": "tsc -w -p .",
+    "lint": "eslint src/**/*.ts",
+    "start": "node dist/cli.js",
+    "build-and-start": "npm run build && node dist/cli.js"
+  },
+  "peerDependencies": {
+    "glass-easel-miniprogram-adapter": "workspace:*",
+    "typescript": "^5.2.2"
+  },
+  "dependencies": {
+    "chalk": "4",
+    "chokidar": "^4.0.3",
+    "glass-easel-stylesheet-compiler": "workspace:*",
+    "glass-easel-template-compiler": "workspace:*"
+  }
+}