chore: add lint checker

Author: zhiyuanzmj

.github/workflows/ci.yml

@@ -28,30 +28,33 @@ jobs:
       - name: Lint
         run: nr lint
 
-  # test:
-  #   runs-on: ${{ matrix.os }}
+  test:
+    runs-on: ${{ matrix.os }}
 
-  #   strategy:
-  #     matrix:
-  #       node: [16.x, 18.x]
-  #       os: [ubuntu-latest, windows-latest, macos-latest]
-  #     fail-fast: false
+    strategy:
+      matrix:
+        node: [16.x, 18.x]
+        os: [ubuntu-latest, windows-latest, macos-latest]
+      fail-fast: false
 
-  #   steps:
-  #     - uses: actions/checkout@v3
-  #     - name: Set node ${{ matrix.node }}
-  #       uses: actions/setup-node@v3
-  #       with:
-  #         node-version: ${{ matrix.node }}
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set node ${{ matrix.node }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
 
-  #     - name: Setup
-  #       run: npm i -g @antfu/ni
+      - name: Setup
+        run: npm i -g @antfu/ni
+
+      - name: Install
+        run: nci
 
-  #     - name: Install
-  #       run: nci
+      - name: Build
+        run: nr build
 
-  #     - name: Build
-  #       run: nr build
+      - name: Type Check
+        run: nr typecheck
 
-  #     - name: Test
-  #       run: nr test
+      - name: Test
+        run: nr test

.prettierrc renamed to .prettierrc.json

@@ -86,6 +86,7 @@
     "build": "tsup",
     "dev": "tsup --watch src",
     "build:fix": "esno scripts/postbuild.ts",
+    "typecheck": "tsc --noEmit",
     "lint": "eslint .",
     "play": "npm -C playground run dev",
     "prepublishOnly": "npm run build",

package.json

@@ -8,6 +8,7 @@
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
+    "types": ["vite/client"],
     "strict": true,
     "strictNullChecks": true,
     "esModuleInterop": true

playground/tsconfig.json

@@ -1,11 +1,10 @@
-import type { Options } from './types'
-
 import unplugin from '.'
+import type { Options } from './types'
 
 export default (options: Options) => ({
   name: 'unplugin-vue-jsx-vapor',
   hooks: {
-    'astro:config:setup': async (astro: any) => {
+    'astro:config:setup': (astro: any) => {
       astro.config.vite.plugins ||= []
       astro.config.vite.plugins.push(unplugin.vite(options))
     },

src/astro.ts

@@ -7,10 +7,9 @@ import {
 import { extend, isString } from '@vue/shared'
 import {
   type VaporCodegenResult as BaseVaporCodegenResult,
-  type HackOptions,
   generate,
 } from '@vue-vapor/compiler-vapor'
-import { type Overwrite, babelParse } from '@vue-macros/common'
+import { babelParse } from '@vue-macros/common'
 import {
   type DirectiveTransform,
   type NodeTransform,
@@ -19,7 +18,12 @@ import {
 
 import { transformElement } from './transforms/transformElement'
 import { transformChildren } from './transforms/transformChildren'
-import { IRNodeTypes, type RootIRNode, type RootNode } from './ir'
+import {
+  type HackOptions,
+  IRNodeTypes,
+  type RootIRNode,
+  type RootNode,
+} from './ir'
 import { transformText } from './transforms/transformText'
 import type { JSXElement, JSXFragment, Program } from '@babel/types'
 
@@ -108,12 +112,7 @@ export function compile(
   return generate(ir as any, resolvedOptions) as unknown as VaporCodegenResult
 }
 
-export type CompilerOptions = Overwrite<
-  HackOptions<BaseCompilerOptions>,
-  {
-    nodeTransforms?: NodeTransform[]
-  }
->
+export type CompilerOptions = HackOptions<BaseCompilerOptions>
 export type TransformPreset = [
   NodeTransform[],
   Record<string, DirectiveTransform>,

src/core/compiler/compile.ts

@@ -1,12 +1,11 @@
 import type { SimpleExpressionNode } from '@vue/compiler-dom'
 import type { IRFor } from '@vue-vapor/compiler-vapor'
-import type { JSXAttribute } from '@babel/types'
 import type { DirectiveTransformResult } from '../transform'
 import type { BlockIRNode } from './index'
 
 // props
 export interface IRProp extends Omit<DirectiveTransformResult, 'value'> {
-  values: JSXAttribute['value'][]
+  values: SimpleExpressionNode[]
 }
 
 export enum IRDynamicPropsKind {

src/core/compiler/ir/component.ts

@@ -1,24 +1,27 @@
 import {
+  type TransformOptions as BaseTransformOptions,
   type CommentNode,
   type CompilerCompatOptions,
   type SimpleExpressionNode,
   defaultOnError,
   defaultOnWarn,
 } from '@vue/compiler-dom'
 import { EMPTY_OBJ, NOOP, extend, isArray } from '@vue/shared'
+import { newBlock, newDynamic } from './transforms/utils'
+import { isConstantExpression } from './utils'
 import {
+  type BlockIRNode,
   DynamicFlag,
+  type HackOptions,
   type IRDynamicInfo,
   IRNodeTypes,
   type IRSlots,
   type OperationNode,
+  type RootIRNode,
+  type RootNode,
   type VaporDirectiveNode,
-} from '@vue-vapor/compiler-vapor'
-import { newBlock, newDynamic } from './transforms/utils'
-import { isConstantExpression } from './utils'
-import type { CompilerOptions } from './compile'
-import type { JSXAttribute, JSXElement } from '@babel/types'
-import type { BlockIRNode, RootIRNode, RootNode } from './ir/index'
+} from './ir/index'
+import type { JSXElement, JSXFragment } from '@babel/types'
 
 export type NodeTransform = (
   node: BlockIRNode['node'],
@@ -32,17 +35,16 @@ export type DirectiveTransform = (
 ) => DirectiveTransformResult | void
 
 export interface DirectiveTransformResult {
-  key: JSXAttribute['name']
-  value: JSXAttribute['value']
+  key: SimpleExpressionNode
+  value: SimpleExpressionNode
   modifier?: '.' | '^'
   runtimeCamelize?: boolean
   handler?: boolean
   model?: boolean
   modelModifiers?: string[]
 }
 
-export type TransformOptions = CompilerOptions
-
+export type TransformOptions = HackOptions<BaseTransformOptions>
 const defaultOptions = {
   filename: '',
   prefixIdentifiers: false,
@@ -70,7 +72,7 @@ const defaultOptions = {
 export class TransformContext<
   T extends BlockIRNode['node'] = BlockIRNode['node'],
 > {
-  parent: TransformContext<RootNode> | null = null
+  parent: TransformContext<RootNode | JSXElement | JSXFragment> | null = null
   root: TransformContext<RootNode>
   index: number = 0
 
@@ -100,7 +102,7 @@ export class TransformContext<
     options: TransformOptions = {},
   ) {
     this.options = extend({}, defaultOptions, options)
-    this.root = this as TransformContext<T>
+    this.root = this as TransformContext<RootNode>
   }
 
   enterBlock(ir: BlockIRNode, isVFor: boolean = false): () => void {

src/core/compiler/transform.ts

@@ -16,7 +16,8 @@ import {
   type IRPropsDynamicAttribute,
   type IRPropsStatic,
 } from '../ir'
-import { isComponent as _isComponent } from '../utils'
+import { isComponent as _isComponent, resolveSimpleExpression } from '../utils'
+import { EMPTY_EXPRESSION } from './utils'
 import type { SimpleExpressionNode } from '@vue/compiler-dom'
 import type { JSXAttribute, JSXElement, JSXSpreadAttribute } from '@babel/types'
 import type {
@@ -61,7 +62,7 @@ export const transformElement: NodeTransform = (node, context) => {
 function transformComponentElement(
   tag: string,
   propsResult: PropsResult,
-  context: TransformContext,
+  context: TransformContext<JSXElement>,
 ) {
   let asset = true
 
@@ -104,7 +105,7 @@ function transformComponentElement(
 function resolveSetupReference(name: string, context: TransformContext) {
   const bindings = context.options.bindingMetadata
   // TODO
-  if (bindings) return name
+  if (!context.options.prefixIdentifiers) return name
   if (!bindings || bindings.__isScriptSetup === false) {
     return
   }
@@ -164,6 +165,7 @@ function transformNativeElement(
   if (
     context.parent &&
     context.parent.node.type === 'JSXElement' &&
+    context.parent.node.openingElement.name.type === 'JSXIdentifier' &&
     !isValidHTMLNesting(context.parent.node.openingElement.name.name, tag)
   ) {
     context.reference()
@@ -234,13 +236,17 @@ function transformProp(
 ): DirectiveTransformResult | void {
   if (prop.type === 'JSXSpreadAttribute') return
 
-  let { name, value } = prop
+  let name = prop.name.type === 'JSXIdentifier' ? prop.name.name : ''
+  const value = prop.value?.type === 'StringLiteral' ? prop.value.value : ''
 
   if (prop.type === 'JSXAttribute') {
-    if (isReservedProp(name.name)) return
+    if (isReservedProp(name)) return
     return {
-      key: name,
-      value: prop.value ? value : null,
+      key: resolveSimpleExpression(name, true, prop.name.loc!),
+      value:
+        prop.value && prop.value.type === 'StringLiteral'
+          ? resolveSimpleExpression(value, true, prop.value.loc!)
+          : EMPTY_EXPRESSION,
     }
   }
 

src/core/compiler/transforms/transformElement.ts

@@ -17,7 +17,7 @@ export type RootNodes = {
 export function transformVueJsxVapor(
   code: string,
   id: string,
-  options?: Options,
+  _options?: Options,
 ) {
   const s = new MagicStringAST(code)
   const rootNodes: RootNodes = []
@@ -43,7 +43,6 @@ export function transformVueJsxVapor(
         mode: 'module',
         prefixIdentifiers: false,
         inline: true,
-        source: s.sliceNode(node),
       })
       vaporHelpers.forEach((i) => importSet.add(`${i} as _${i}`))
       preamble = preamble.replace(/^[^\n]*;\n?/, '')

src/core/transform.ts

@@ -11,7 +11,7 @@ export default defineNuxtModule<ModuleOptions>({
     name: 'nuxt-unplugin-vue-jsx-vapor',
     configKey: 'unpluginStarter',
   },
-  setup(options, _nuxt) {
+  setup(options) {
     addVitePlugin(() => vite(options))
     addWebpackPlugin(() => webpack(options))
 

src/nuxt.ts

@@ -1,7 +1,6 @@
 import { describe, expect, test } from 'vitest'
 
 import {
-  compile,
   transformChildren,
   transformElement,
   transformText,
@@ -21,17 +20,17 @@ const compileWithElementTransform = makeCompile({
 describe('compiler: children transform', () => {
   test.todo('basic')
 
-  test('children & sibling references', () => {
+  test.only('children & sibling references', () => {
     const { code, vaporHelpers } = compileWithElementTransform(
-      `<div>
+      `<div id>
         <p>{ first }</p> 
         { second }
         <p>{ forth }</p>
       </div>`,
     )
     expect(code).toMatchInlineSnapshot(`
       "import { next as _next, createTextNode as _createTextNode, insert as _insert, renderEffect as _renderEffect, setText as _setText, template as _template } from 'vue/vapor';
-      const t0 = _template("<div><p></p> <!><p></p></div>")
+      const t0 = _template("<div id><p></p> <!><p></p></div>")
 
       export function render(_ctx) {
         const n4 = t0()

test/transforms/transformChildren.spec.ts

@@ -30,10 +30,11 @@ describe('compiler: element transform', () => {
     test('import + resolve component', () => {
       const { code, vaporHelpers } = compileWithElementTransform(`<Foo/>`)
       expect(code).toMatchInlineSnapshot(`
-        "import { createComponent as _createComponent } from 'vue/vapor';
+        "import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
 
         export function render(_ctx) {
-          const n0 = _createComponent(_ctx.Foo, null, null, true)
+          const _component_Foo = _resolveComponent("Foo")
+          const n0 = _createComponent(_component_Foo, null, null, true)
           return n0
         }"
       `)

test/transforms/transformElement.spec.ts

@@ -10,7 +10,8 @@
     "resolveJsonModule": true,
     "strict": true,
     "strictNullChecks": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "skipLibCheck": true
   },
-  "exclude": ["dist", "eslint.config.js"]
+  "exclude": ["dist", "eslint.config.js", "playground"]
 }

tsconfig.json

@@ -1,9 +1,9 @@
 import type { Options } from 'tsup'
 
-export default <Options>{
+export default {
   entryPoints: ['src/*.ts'],
   clean: true,
   format: ['cjs', 'esm'],
   dts: true,
   onSuccess: 'npm run build:fix',
-}
+} satisfies Options