From 932672378237df6f286368c0388fc4c21333c00b Mon Sep 17 00:00:00 2001 From: zhiyuanzmj <260480378@qq.com> Date: Tue, 28 Jan 2025 09:10:48 +0800 Subject: [PATCH 1/7] feat(jsx-directive): add lib option to support vue/vapor --- docs/features/jsx-directive.md | 4 ++ docs/zh-CN/features/jsx-directive.md | 4 ++ packages/jsx-directive/src/api.ts | 64 +++++++++++++++++++ packages/jsx-directive/src/core/index.ts | 14 ++-- packages/jsx-directive/src/core/v-for.ts | 39 ++++++++--- packages/jsx-directive/src/core/v-slot.ts | 7 +- packages/jsx-directive/src/index.ts | 56 +--------------- .../tests/__snapshots__/v-for.test.ts.snap | 45 +++++++++++++ packages/jsx-directive/tests/v-for.test.ts | 30 ++++++++- packages/jsx-directive/tests/v-html.test.ts | 14 +++- packages/jsx-directive/tests/v-if.test.ts | 7 +- packages/jsx-directive/tests/v-memo.test.ts | 7 +- packages/jsx-directive/tests/v-model.test.ts | 7 +- packages/jsx-directive/tests/v-on.test.ts | 14 +++- packages/jsx-directive/tests/v-slot.test.ts | 14 +++- 15 files changed, 244 insertions(+), 82 deletions(-) diff --git a/docs/features/jsx-directive.md b/docs/features/jsx-directive.md index 01f409421..b28f9e470 100644 --- a/docs/features/jsx-directive.md +++ b/docs/features/jsx-directive.md @@ -24,6 +24,10 @@ interface Options { * @default 'v-' */ prefix?: string + /** + * @default 'vue' + */ + lib?: 'vue' | 'vue/vapor' } ``` diff --git a/docs/zh-CN/features/jsx-directive.md b/docs/zh-CN/features/jsx-directive.md index 2e92df566..0b33caf80 100644 --- a/docs/zh-CN/features/jsx-directive.md +++ b/docs/zh-CN/features/jsx-directive.md @@ -24,6 +24,10 @@ interface Options { * @default 'v-' */ prefix?: string + /** + * @default 'vue' + */ + lib?: 'vue' | 'vue/vapor' } ``` diff --git a/packages/jsx-directive/src/api.ts b/packages/jsx-directive/src/api.ts index 46d458ad7..2fb2f41c2 100644 --- a/packages/jsx-directive/src/api.ts +++ b/packages/jsx-directive/src/api.ts @@ -1 +1,65 @@ +import { + createFilter, + detectVueVersion, + FilterFileType, + getFilterPattern, + REGEX_NODE_MODULES, + REGEX_SETUP_SFC, + type BaseOptions, + type MarkRequired, +} from '@vue-macros/common' +import { generatePluginName } from '#macros' with { type: 'macro' } +import { transformJsxDirective } from './core' +import type { UnpluginContextMeta, UnpluginFactory } from 'unplugin' + export * from './core' + +export type Options = BaseOptions & { + prefix?: string + lib?: 'vue' | 'vue/vapor' | 'react' | 'preact' | (string & {}) +} +export type OptionsResolved = MarkRequired< + Options, + 'version' | 'prefix' | 'lib' +> + +function resolveOptions( + options: Options, + framework: UnpluginContextMeta['framework'], +): OptionsResolved { + const version = options.version || detectVueVersion(undefined, 0) + const include = getFilterPattern( + [FilterFileType.VUE_SFC, FilterFileType.SRC_FILE], + framework, + ) + return { + include, + exclude: [REGEX_NODE_MODULES, REGEX_SETUP_SFC], + ...options, + prefix: options.prefix ?? 'v-', + lib: options.lib ?? 'vue', + version, + } +} + +const name = generatePluginName() + +const plugin: UnpluginFactory = ( + userOptions = {}, + { framework } = { framework: 'vite' }, +) => { + const options = resolveOptions(userOptions, framework) + const filter = createFilter(options) + + return { + name, + enforce: 'pre', + + transformInclude: filter, + transform(code, id) { + return transformJsxDirective(code, id, options) + }, + } +} +// eslint-disable-next-line import/no-default-export +export default plugin diff --git a/packages/jsx-directive/src/core/index.ts b/packages/jsx-directive/src/core/index.ts index 29b5913dc..5d72afec3 100644 --- a/packages/jsx-directive/src/core/index.ts +++ b/packages/jsx-directive/src/core/index.ts @@ -8,6 +8,7 @@ import { walkAST, type CodeTransform, } from '@vue-macros/common' +import type { OptionsResolved } from '../api' import { transformVFor } from './v-for' import { transformVHtml } from './v-html' import { transformVIf } from './v-if' @@ -30,8 +31,7 @@ const onWithModifiersRegex = /^on[A-Z]\S*_\S+/ export function transformJsxDirective( code: string, id: string, - version: number, - prefix = 'v-', + options: OptionsResolved, ): CodeTransform | undefined { const lang = getLang(id) @@ -56,7 +56,7 @@ export function transformJsxDirective( const s = new MagicStringAST(code) for (const [ast, offset] of programs) { s.offset = offset - transform(s, ast, version, prefix) + transform(s, ast, options) } return generateTransform(s, id) } @@ -64,9 +64,9 @@ export function transformJsxDirective( function transform( s: MagicStringAST, program: Program, - version: number, - prefix = 'v-', + options: OptionsResolved, ) { + const { prefix, version } = options const vIfMap = new Map() const vForNodes: JsxDirective[] = [] const vMemoNodes: (JsxDirective & { @@ -212,12 +212,12 @@ function transform( }) vIfMap.forEach((nodes) => transformVIf(nodes, s, version, prefix)) - transformVFor(vForNodes, s, version) + transformVFor(vForNodes, s, options) if (!version || version >= 3.2) transformVMemo(vMemoNodes, s, version) transformVHtml(vHtmlNodes, s, version) transformVOn(vOnNodes, s, version) transformOnWithModifiers(onWithModifiers, s, version, prefix) - transformVSlot(vSlotMap, s, version, prefix) + transformVSlot(vSlotMap, s, options) } export function isVue2(version: number): boolean { diff --git a/packages/jsx-directive/src/core/v-for.ts b/packages/jsx-directive/src/core/v-for.ts index 80ec09f60..c03e4a912 100644 --- a/packages/jsx-directive/src/core/v-for.ts +++ b/packages/jsx-directive/src/core/v-for.ts @@ -3,17 +3,19 @@ import { importHelperFn, type MagicStringAST, } from '@vue-macros/common' +import type { OptionsResolved } from '../api' import { isVue2, type JsxDirective } from '.' export function resolveVFor( attribute: JsxDirective['attribute'], + node: JsxDirective['node'], { s, + lib, version, vMemoAttribute, - }: { + }: OptionsResolved & { s: MagicStringAST - version: number vMemoAttribute?: JsxDirective['attribute'] }, ): string { @@ -40,6 +42,10 @@ export function resolveVFor( index ??= `${HELPER_PREFIX}index` } + const params = `(${item}${ + index ? `, ${index}` : '' + }${objectIndex ? `, ${objectIndex}` : ''})` + const renderList = isVue2(version) ? 'Array.from' : importHelperFn( @@ -49,9 +55,26 @@ export function resolveVFor( version ? 'vue' : '@vue-macros/jsx-directive/helpers', ) - return `${renderList}(${list}, (${item}${ - index ? `, ${index}` : '' - }${objectIndex ? `, ${objectIndex}` : ''}) => ` + if (lib === 'vue/vapor') { + const key = node.openingElement.attributes.find( + (i) => i.type === 'JSXAttribute' && i.name.name === 'key', + ) + if ( + key && + key.type === 'JSXAttribute' && + key.value?.type === 'JSXExpressionContainer' && + key.value.expression + ) { + s.appendRight( + node.end!, + `, ${params} => (${s.sliceNode(key.value.expression)})`, + ) + s.remove(key.start! - 1, key.end!) + } + return `${importHelperFn(s, 0, 'createFor', lib)}(() => ${list}, ${params} => ` + } else { + return `${renderList}(${list}, ${params} => ` + } } } @@ -61,7 +84,7 @@ export function resolveVFor( export function transformVFor( nodes: JsxDirective[], s: MagicStringAST, - version: number, + options: OptionsResolved, ): void { if (nodes.length === 0) return @@ -71,7 +94,7 @@ export function transformVFor( ) s.appendLeft( node.start!, - `${hasScope ? '{' : ''}${resolveVFor(attribute, { s, version, vMemoAttribute })}`, + `${hasScope ? '{' : ''}${resolveVFor(attribute, node, { ...options, s, vMemoAttribute })}`, ) const isTemplate = @@ -79,7 +102,7 @@ export function transformVFor( node.openingElement.name.type === 'JSXIdentifier' && node.openingElement.name.name === 'template' if (isTemplate && node.closingElement) { - const content = isVue2(version) ? 'span' : '' + const content = isVue2(options.version) ? 'span' : '' s.overwriteNode(node.openingElement.name, content) s.overwriteNode(node.closingElement.name, content) } diff --git a/packages/jsx-directive/src/core/v-slot.ts b/packages/jsx-directive/src/core/v-slot.ts index 702708703..d7969cdd4 100644 --- a/packages/jsx-directive/src/core/v-slot.ts +++ b/packages/jsx-directive/src/core/v-slot.ts @@ -1,4 +1,5 @@ import { importHelperFn, type MagicStringAST } from '@vue-macros/common' +import type { OptionsResolved } from '../api' import { resolveVFor } from './v-for' import { isVue2 } from '.' import type { JSXAttribute, JSXElement, Node } from '@babel/types' @@ -21,9 +22,9 @@ export type VSlotMap = Map< export function transformVSlot( nodeMap: VSlotMap, s: MagicStringAST, - version: number, - prefix: string, + options: OptionsResolved, ): void { + const { version, prefix } = options Array.from(nodeMap) .reverse() .forEach(([node, { attributeMap, vSlotAttribute }]) => { @@ -52,7 +53,7 @@ export function transformVSlot( if (vForAttribute) { result.push( '...Object.fromEntries(', - resolveVFor(vForAttribute, { s, version }), + resolveVFor(vForAttribute, node, { ...options, s, version }), '([', ) } diff --git a/packages/jsx-directive/src/index.ts b/packages/jsx-directive/src/index.ts index 7805cdfe3..0c1b6cf33 100644 --- a/packages/jsx-directive/src/index.ts +++ b/packages/jsx-directive/src/index.ts @@ -1,57 +1,7 @@ -import { - createFilter, - detectVueVersion, - FilterFileType, - getFilterPattern, - REGEX_NODE_MODULES, - REGEX_SETUP_SFC, - type BaseOptions, - type MarkRequired, -} from '@vue-macros/common' -import { generatePluginName } from '#macros' with { type: 'macro' } -import { - createUnplugin, - type UnpluginContextMeta, - type UnpluginInstance, -} from 'unplugin' -import { transformJsxDirective } from './core' - -export type Options = BaseOptions & { prefix?: string } -export type OptionsResolved = MarkRequired - -function resolveOptions( - options: Options, - framework: UnpluginContextMeta['framework'], -): OptionsResolved { - const version = options.version || detectVueVersion(undefined, 0) - const include = getFilterPattern( - [FilterFileType.VUE_SFC, FilterFileType.SRC_FILE], - framework, - ) - return { - include, - exclude: [REGEX_NODE_MODULES, REGEX_SETUP_SFC], - ...options, - version, - } -} - -const name = generatePluginName() +import { createUnplugin, type UnpluginInstance } from 'unplugin' +import transformJsxDirective, { type Options } from './api' const plugin: UnpluginInstance = createUnplugin( - (userOptions = {}, { framework }) => { - const options = resolveOptions(userOptions, framework) - const filter = createFilter(options) - - return { - name, - enforce: 'pre', - - transformInclude: filter, - transform(code, id) { - return transformJsxDirective(code, id, options.version, options.prefix) - }, - } - }, + transformJsxDirective, ) export default plugin diff --git a/packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap b/packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap index 0c60cae86..26c779ce2 100644 --- a/packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap +++ b/packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap @@ -86,3 +86,48 @@ defineRender(() => ( " `; + +exports[`jsx-vue-directive > vue/vapor v-for > ./fixtures/v-for/index.vue 1`] = ` +" +" +`; diff --git a/packages/jsx-directive/tests/v-for.test.ts b/packages/jsx-directive/tests/v-for.test.ts index a2af6fea4..e3a302cd3 100644 --- a/packages/jsx-directive/tests/v-for.test.ts +++ b/packages/jsx-directive/tests/v-for.test.ts @@ -10,7 +10,12 @@ describe('jsx-vue-directive', () => { query: '?raw', import: 'default', }), - (_, id, code) => transformJsxDirective(code, id, 2.7)?.code, + (_, id, code) => + transformJsxDirective(code, id, { + version: 2.7, + lib: 'vue', + prefix: 'v-', + })?.code, ) }) @@ -21,7 +26,28 @@ describe('jsx-vue-directive', () => { query: '?raw', import: 'default', }), - (_, id, code) => transformJsxDirective(code, id, 3)?.code, + (_, id, code) => + transformJsxDirective(code, id, { + version: 3, + lib: 'vue', + prefix: 'v-', + })?.code, + ) + }) + + describe('vue/vapor v-for', async () => { + await testFixtures( + import.meta.glob('./fixtures/v-for/*.{vue,jsx,tsx}', { + eager: true, + query: '?raw', + import: 'default', + }), + (_, id, code) => + transformJsxDirective(code, id, { + version: 3, + lib: 'vue/vapor', + prefix: 'v-', + })?.code, ) }) }) diff --git a/packages/jsx-directive/tests/v-html.test.ts b/packages/jsx-directive/tests/v-html.test.ts index 9e17a210c..18df5013f 100644 --- a/packages/jsx-directive/tests/v-html.test.ts +++ b/packages/jsx-directive/tests/v-html.test.ts @@ -10,7 +10,12 @@ describe('jsx-vue-directive', () => { query: '?raw', import: 'default', }), - (_, id, code) => transformJsxDirective(code, id, 3)?.code, + (_, id, code) => + transformJsxDirective(code, id, { + version: 3, + lib: 'vue', + prefix: 'v-', + })?.code, ) }) @@ -21,7 +26,12 @@ describe('jsx-vue-directive', () => { query: '?raw', import: 'default', }), - (_, id, code) => transformJsxDirective(code, id, 2.7)?.code, + (_, id, code) => + transformJsxDirective(code, id, { + version: 2.7, + lib: 'vue', + prefix: 'v-', + })?.code, ) }) }) diff --git a/packages/jsx-directive/tests/v-if.test.ts b/packages/jsx-directive/tests/v-if.test.ts index 68d67cfba..149bb551e 100644 --- a/packages/jsx-directive/tests/v-if.test.ts +++ b/packages/jsx-directive/tests/v-if.test.ts @@ -10,7 +10,12 @@ describe('jsx-vue-directive', () => { query: '?raw', import: 'default', }), - (_, id, code) => transformJsxDirective(code, id, 2.7)?.code, + (_, id, code) => + transformJsxDirective(code, id, { + version: 3, + lib: 'vue', + prefix: 'v-', + })?.code, ) }) }) diff --git a/packages/jsx-directive/tests/v-memo.test.ts b/packages/jsx-directive/tests/v-memo.test.ts index 4d325ae58..95ad0eae8 100644 --- a/packages/jsx-directive/tests/v-memo.test.ts +++ b/packages/jsx-directive/tests/v-memo.test.ts @@ -10,7 +10,12 @@ describe('jsx-vue-directive', () => { query: '?raw', import: 'default', }), - (_, id, code) => transformJsxDirective(code, id, 3.2)?.code, + (_, id, code) => + transformJsxDirective(code, id, { + version: 3.2, + lib: 'vue', + prefix: 'v-', + })?.code, ) }) }) diff --git a/packages/jsx-directive/tests/v-model.test.ts b/packages/jsx-directive/tests/v-model.test.ts index 4ffebe462..a0bb3f0e7 100644 --- a/packages/jsx-directive/tests/v-model.test.ts +++ b/packages/jsx-directive/tests/v-model.test.ts @@ -10,7 +10,12 @@ describe('jsx-vue-directive', () => { query: '?raw', import: 'default', }), - (_, id, code) => transformJsxDirective(code, id, 3)?.code, + (_, id, code) => + transformJsxDirective(code, id, { + version: 3, + lib: 'vue', + prefix: 'v-', + })?.code, ) }) }) diff --git a/packages/jsx-directive/tests/v-on.test.ts b/packages/jsx-directive/tests/v-on.test.ts index 8b77934c7..c64afaf91 100644 --- a/packages/jsx-directive/tests/v-on.test.ts +++ b/packages/jsx-directive/tests/v-on.test.ts @@ -10,7 +10,12 @@ describe('jsx-vue-directive', () => { query: '?raw', import: 'default', }), - (_, id, code) => transformJsxDirective(code, id, 3)?.code, + (_, id, code) => + transformJsxDirective(code, id, { + version: 3, + lib: 'vue', + prefix: 'v-', + })?.code, ) }) @@ -21,7 +26,12 @@ describe('jsx-vue-directive', () => { query: '?raw', import: 'default', }), - (_, id, code) => transformJsxDirective(code, id, 2.7)?.code, + (_, id, code) => + transformJsxDirective(code, id, { + version: 2.7, + lib: 'vue', + prefix: 'v-', + })?.code, ) }) }) diff --git a/packages/jsx-directive/tests/v-slot.test.ts b/packages/jsx-directive/tests/v-slot.test.ts index 38a09556c..3dd6180f6 100644 --- a/packages/jsx-directive/tests/v-slot.test.ts +++ b/packages/jsx-directive/tests/v-slot.test.ts @@ -10,7 +10,12 @@ describe('jsx-vue-directive', () => { query: '?raw', import: 'default', }), - (_, id, code) => transformJsxDirective(code, id, 3)?.code, + (_, id, code) => + transformJsxDirective(code, id, { + version: 3, + lib: 'vue', + prefix: 'v-', + })?.code, ) }) @@ -21,7 +26,12 @@ describe('jsx-vue-directive', () => { query: '?raw', import: 'default', }), - (_, id, code) => transformJsxDirective(code, id, 2.7)?.code, + (_, id, code) => + transformJsxDirective(code, id, { + version: 2.7, + lib: 'vue', + prefix: 'v-', + })?.code, ) }) }) From bed1e0bf4b9eb2e71d5ff513ad065dbf013f80ea Mon Sep 17 00:00:00 2001 From: zhiyuanzmj <260480378@qq.com> Date: Tue, 28 Jan 2025 09:25:53 +0800 Subject: [PATCH 2/7] fix: typecheck --- .changeset/pretty-paws-yell.md | 6 ++++++ packages/jsx-directive/src/index.ts | 2 ++ 2 files changed, 8 insertions(+) create mode 100644 .changeset/pretty-paws-yell.md diff --git a/.changeset/pretty-paws-yell.md b/.changeset/pretty-paws-yell.md new file mode 100644 index 000000000..4a907cd2d --- /dev/null +++ b/.changeset/pretty-paws-yell.md @@ -0,0 +1,6 @@ +--- +"@vue-macros/jsx-directive": patch +--- + +add lib option to support vue/vapor + \ No newline at end of file diff --git a/packages/jsx-directive/src/index.ts b/packages/jsx-directive/src/index.ts index 0c1b6cf33..3855c780e 100644 --- a/packages/jsx-directive/src/index.ts +++ b/packages/jsx-directive/src/index.ts @@ -1,6 +1,8 @@ import { createUnplugin, type UnpluginInstance } from 'unplugin' import transformJsxDirective, { type Options } from './api' +export { type Options } + const plugin: UnpluginInstance = createUnplugin( transformJsxDirective, ) From f96d42b83a87a49f9e560e76e330bc4f24ba9215 Mon Sep 17 00:00:00 2001 From: zhiyuanzmj <260480378@qq.com> Date: Tue, 28 Jan 2025 09:41:58 +0800 Subject: [PATCH 3/7] fix: key --- packages/jsx-directive/src/core/v-for.ts | 5 ++--- .../tests/__snapshots__/v-for.test.ts.snap | 12 ++++++------ 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/jsx-directive/src/core/v-for.ts b/packages/jsx-directive/src/core/v-for.ts index c03e4a912..2d2296294 100644 --- a/packages/jsx-directive/src/core/v-for.ts +++ b/packages/jsx-directive/src/core/v-for.ts @@ -60,12 +60,11 @@ export function resolveVFor( (i) => i.type === 'JSXAttribute' && i.name.name === 'key', ) if ( - key && - key.type === 'JSXAttribute' && + key?.type === 'JSXAttribute' && key.value?.type === 'JSXExpressionContainer' && key.value.expression ) { - s.appendRight( + s.appendLeft( node.end!, `, ${params} => (${s.sliceNode(key.value.expression)})`, ) diff --git a/packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap b/packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap index 26c779ce2..6e2680231 100644 --- a/packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap +++ b/packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap @@ -103,29 +103,29 @@ defineRender(() => ( <> {__MACROS_createFor(() => 4, (i) =>
{i}
-
)}, (i) => (i) + , (i) => (i))} {__MACROS_createFor(() => object, (value, key, index) =>
{key}: {value} -
)}, (value, key, index) => (index) + , (value, key, index) => (index))} {__MACROS_createFor(() => [1, 2, 3][Symbol.iterator](), (i, index) =>
{i}
-
)}, (i, index) => (index) + , (i, index) => (index))} {__MACROS_createFor(() => [1, 2, 3], (i, __MACROS_index) =>
{i}
-
)}, (i, __MACROS_index) => (i) + , (i, __MACROS_index) => (i))} {(set) ? __MACROS_createFor(() => set, (i) =>
{i}
-
) : null}, (i) => (i) + , (i) => (i)) : null} {__MACROS_createFor(() => map, ([key, value], index) =>
{key}: {value}
-
)}, ([key, value], index) => (index) + , ([key, value], index) => (index))} )) From e3f564ab12ad3ef59e1009ae72e8df7b10323e98 Mon Sep 17 00:00:00 2001 From: zhiyuanzmj <260480378@qq.com> Date: Tue, 28 Jan 2025 12:01:37 +0800 Subject: [PATCH 4/7] chore: update --- packages/jsx-directive/src/core/v-for.ts | 14 ++++---------- packages/jsx-directive/src/core/v-slot.ts | 2 +- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/packages/jsx-directive/src/core/v-for.ts b/packages/jsx-directive/src/core/v-for.ts index 2d2296294..f61ea0915 100644 --- a/packages/jsx-directive/src/core/v-for.ts +++ b/packages/jsx-directive/src/core/v-for.ts @@ -9,15 +9,9 @@ import { isVue2, type JsxDirective } from '.' export function resolveVFor( attribute: JsxDirective['attribute'], node: JsxDirective['node'], - { - s, - lib, - version, - vMemoAttribute, - }: OptionsResolved & { - s: MagicStringAST - vMemoAttribute?: JsxDirective['attribute'] - }, + s: MagicStringAST, + { lib, version }: OptionsResolved, + vMemoAttribute?: JsxDirective['attribute'], ): string { if (attribute.value) { let item, index, objectIndex, list @@ -93,7 +87,7 @@ export function transformVFor( ) s.appendLeft( node.start!, - `${hasScope ? '{' : ''}${resolveVFor(attribute, node, { ...options, s, vMemoAttribute })}`, + `${hasScope ? '{' : ''}${resolveVFor(attribute, node, s, options, vMemoAttribute)}`, ) const isTemplate = diff --git a/packages/jsx-directive/src/core/v-slot.ts b/packages/jsx-directive/src/core/v-slot.ts index d7969cdd4..480245be7 100644 --- a/packages/jsx-directive/src/core/v-slot.ts +++ b/packages/jsx-directive/src/core/v-slot.ts @@ -53,7 +53,7 @@ export function transformVSlot( if (vForAttribute) { result.push( '...Object.fromEntries(', - resolveVFor(vForAttribute, node, { ...options, s, version }), + resolveVFor(vForAttribute, node, s, options), '([', ) } From f5337dfd6c41de6b3b6fe2425c90e2378306194f Mon Sep 17 00:00:00 2001 From: zhiyuanzmj <260480378@qq.com> Date: Tue, 28 Jan 2025 12:54:13 +0800 Subject: [PATCH 5/7] fix: skip v-slot --- packages/jsx-directive/src/core/v-slot.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/jsx-directive/src/core/v-slot.ts b/packages/jsx-directive/src/core/v-slot.ts index 480245be7..28efffaa8 100644 --- a/packages/jsx-directive/src/core/v-slot.ts +++ b/packages/jsx-directive/src/core/v-slot.ts @@ -53,7 +53,7 @@ export function transformVSlot( if (vForAttribute) { result.push( '...Object.fromEntries(', - resolveVFor(vForAttribute, node, s, options), + resolveVFor(vForAttribute, node, s, { ...options, lib: 'vue' }), '([', ) } From 887470e27276dd84bcc99d57c91b761a4a5eb3ff Mon Sep 17 00:00:00 2001 From: zhiyuanzmj <260480378@qq.com> Date: Tue, 28 Jan 2025 21:48:44 +0800 Subject: [PATCH 6/7] revert: api --- packages/jsx-directive/src/api.ts | 64 ----------------------------- packages/jsx-directive/src/index.ts | 64 +++++++++++++++++++++++++++-- 2 files changed, 60 insertions(+), 68 deletions(-) diff --git a/packages/jsx-directive/src/api.ts b/packages/jsx-directive/src/api.ts index 2fb2f41c2..46d458ad7 100644 --- a/packages/jsx-directive/src/api.ts +++ b/packages/jsx-directive/src/api.ts @@ -1,65 +1 @@ -import { - createFilter, - detectVueVersion, - FilterFileType, - getFilterPattern, - REGEX_NODE_MODULES, - REGEX_SETUP_SFC, - type BaseOptions, - type MarkRequired, -} from '@vue-macros/common' -import { generatePluginName } from '#macros' with { type: 'macro' } -import { transformJsxDirective } from './core' -import type { UnpluginContextMeta, UnpluginFactory } from 'unplugin' - export * from './core' - -export type Options = BaseOptions & { - prefix?: string - lib?: 'vue' | 'vue/vapor' | 'react' | 'preact' | (string & {}) -} -export type OptionsResolved = MarkRequired< - Options, - 'version' | 'prefix' | 'lib' -> - -function resolveOptions( - options: Options, - framework: UnpluginContextMeta['framework'], -): OptionsResolved { - const version = options.version || detectVueVersion(undefined, 0) - const include = getFilterPattern( - [FilterFileType.VUE_SFC, FilterFileType.SRC_FILE], - framework, - ) - return { - include, - exclude: [REGEX_NODE_MODULES, REGEX_SETUP_SFC], - ...options, - prefix: options.prefix ?? 'v-', - lib: options.lib ?? 'vue', - version, - } -} - -const name = generatePluginName() - -const plugin: UnpluginFactory = ( - userOptions = {}, - { framework } = { framework: 'vite' }, -) => { - const options = resolveOptions(userOptions, framework) - const filter = createFilter(options) - - return { - name, - enforce: 'pre', - - transformInclude: filter, - transform(code, id) { - return transformJsxDirective(code, id, options) - }, - } -} -// eslint-disable-next-line import/no-default-export -export default plugin diff --git a/packages/jsx-directive/src/index.ts b/packages/jsx-directive/src/index.ts index 3855c780e..06ff17db3 100644 --- a/packages/jsx-directive/src/index.ts +++ b/packages/jsx-directive/src/index.ts @@ -1,9 +1,65 @@ -import { createUnplugin, type UnpluginInstance } from 'unplugin' -import transformJsxDirective, { type Options } from './api' +import { + createFilter, + detectVueVersion, + FilterFileType, + getFilterPattern, + REGEX_NODE_MODULES, + REGEX_SETUP_SFC, + type BaseOptions, + type MarkRequired, +} from '@vue-macros/common' +import { generatePluginName } from '#macros' with { type: 'macro' } +import { + createUnplugin, + type UnpluginContextMeta, + type UnpluginInstance, +} from 'unplugin' +import { transformJsxDirective } from './core' -export { type Options } +export type Options = BaseOptions & { + prefix?: string + lib?: 'vue' | 'vue/vapor' | (string & {}) +} +export type OptionsResolved = MarkRequired< + Options, + 'version' | 'prefix' | 'lib' +> + +function resolveOptions( + options: Options, + framework: UnpluginContextMeta['framework'], +): OptionsResolved { + const version = options.version || detectVueVersion(undefined, 0) + const include = getFilterPattern( + [FilterFileType.VUE_SFC, FilterFileType.SRC_FILE], + framework, + ) + return { + include, + exclude: [REGEX_NODE_MODULES, REGEX_SETUP_SFC], + ...options, + prefix: options.prefix ?? 'v-', + lib: options.lib ?? 'vue', + version, + } +} + +const name = generatePluginName() const plugin: UnpluginInstance = createUnplugin( - transformJsxDirective, + (userOptions = {}, { framework }) => { + const options = resolveOptions(userOptions, framework) + const filter = createFilter(options) + + return { + name, + enforce: 'pre', + + transformInclude: filter, + transform(code, id) { + return transformJsxDirective(code, id, options) + }, + } + }, ) export default plugin From d4f36e9524c6c2bb78d1ef51f3401783cf7e7e96 Mon Sep 17 00:00:00 2001 From: zhiyuanzmj <260480378@qq.com> Date: Tue, 28 Jan 2025 21:54:45 +0800 Subject: [PATCH 7/7] fix: correct path --- docs/features/jsx-directive.md | 2 +- docs/zh-CN/features/jsx-directive.md | 2 +- packages/jsx-directive/src/core/index.ts | 2 +- packages/jsx-directive/src/core/v-for.ts | 2 +- packages/jsx-directive/src/core/v-slot.ts | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/features/jsx-directive.md b/docs/features/jsx-directive.md index b28f9e470..320634cfb 100644 --- a/docs/features/jsx-directive.md +++ b/docs/features/jsx-directive.md @@ -27,7 +27,7 @@ interface Options { /** * @default 'vue' */ - lib?: 'vue' | 'vue/vapor' + lib?: 'vue' | 'vue/vapor' | string } ``` diff --git a/docs/zh-CN/features/jsx-directive.md b/docs/zh-CN/features/jsx-directive.md index 0b33caf80..b1af69e0c 100644 --- a/docs/zh-CN/features/jsx-directive.md +++ b/docs/zh-CN/features/jsx-directive.md @@ -27,7 +27,7 @@ interface Options { /** * @default 'vue' */ - lib?: 'vue' | 'vue/vapor' + lib?: 'vue' | 'vue/vapor' | string } ``` diff --git a/packages/jsx-directive/src/core/index.ts b/packages/jsx-directive/src/core/index.ts index 5d72afec3..eab4431d4 100644 --- a/packages/jsx-directive/src/core/index.ts +++ b/packages/jsx-directive/src/core/index.ts @@ -8,7 +8,7 @@ import { walkAST, type CodeTransform, } from '@vue-macros/common' -import type { OptionsResolved } from '../api' +import type { OptionsResolved } from '..' import { transformVFor } from './v-for' import { transformVHtml } from './v-html' import { transformVIf } from './v-if' diff --git a/packages/jsx-directive/src/core/v-for.ts b/packages/jsx-directive/src/core/v-for.ts index f61ea0915..9640f86ca 100644 --- a/packages/jsx-directive/src/core/v-for.ts +++ b/packages/jsx-directive/src/core/v-for.ts @@ -3,7 +3,7 @@ import { importHelperFn, type MagicStringAST, } from '@vue-macros/common' -import type { OptionsResolved } from '../api' +import type { OptionsResolved } from '..' import { isVue2, type JsxDirective } from '.' export function resolveVFor( diff --git a/packages/jsx-directive/src/core/v-slot.ts b/packages/jsx-directive/src/core/v-slot.ts index 28efffaa8..0f5eaebc6 100644 --- a/packages/jsx-directive/src/core/v-slot.ts +++ b/packages/jsx-directive/src/core/v-slot.ts @@ -1,5 +1,5 @@ import { importHelperFn, type MagicStringAST } from '@vue-macros/common' -import type { OptionsResolved } from '../api' +import type { OptionsResolved } from '..' import { resolveVFor } from './v-for' import { isVue2 } from '.' import type { JSXAttribute, JSXElement, Node } from '@babel/types'