Explore and extend more macros and syntax sugar to Vue.
Home Page: https://vue-macros.dev
License: MIT License
Explore more macros and syntax sugar to Vue.
npm i -D unplugin-vue-macros
💕 Thank you to all the contributors!
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
Not a issue per se, but everywhere I use the defineOptions, I get this error:
Cannot find name defineOptions?
Is there a way to turn this off, or it has to do something with configuration?
I might have missed something in the docs
I'm using it alongside @innocenzi's laravel-vite package and:
When I click on the Quick fix by vscode, it generates this function:
// 🤯
function defineOptions(arg0: {
layout: import("vue").DefineComponent < {},{},{},{},{},
import("vue").ComponentOptionsMixin,
import("vue").ComponentOptionsMixin,
import("vue").EmitsOptions,
string,
import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps,
Readonly < ... > ,
{} > ;
}) {
throw new Error("Function not implemented.");
}This is my vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import DefineOptions from "unplugin-vue-define-options/vite";
import laravel from "vite-plugin-laravel";
import { resolve } from "path";
export default defineConfig({
plugins: [vue(), laravel(), DefineOptions()],
resolve: {
alias: {
"@": resolve(__dirname, "./resources/ts"),
},
},
});Thanks.
it seem doesn't work.
"esbuild": "^0.13.15",
"unplugin": "^0.9.2",
"unplugin-vue": "^0.2.2",
"unplugin-vue-define-options": "^0.10.0",
System:
OS: Windows 10 10.0.19044
CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11400F @ 2.60GHz
Memory: 4.39 GB / 15.86 GB
Binaries:
Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.54), ChromiumDev (Hey friendnpm
比如
const myName = 'popup'
defineOptions({
name: myName
});
Like Tauri
I think we could combine bundlers and package managers into multi tabs
/cc @alexzhang1030 Would you like to make it?
由于源代码使用了该插件导致，导致vitepress不能直接引用没有经过编译的组件
如果可以的话，在修改源代码后文档可以实时更新
不清楚能不能实现！
No response
No response
按照文档基本示例提供的代码运行错误：
<script setup lang="ts">
import { useSlots } from 'vue'
defineOptions({
name: 'Foo',
inheritAttrs: false,
props: {
msg: { type: String, default: 'bar' },
},
emits: ['change', 'update'],
})
const slots = useSlots()
</script>报错信息：
[vite] Internal server error: unplugin-vue-define-options SyntaxError: defineOptions() please use defineProps or defineEmits instead.搜索 issuse 发现一条相关的问题：#19
但不能够消除我的困惑，根据作者提供的错误示例模板来看，我以为指的是 defineOptions 不能够与 defineProps 同时进行使用。
之后我创建了一个 Vite + Vue3 模板，按照文档中的基本示例提供的代码运行时也发生相同的错误。
所以我不明白这是属于一个 Bug 还是文档有误 或者 解释的不够清楚？如果这不属于一个 Bug 的话希望作者能重新编辑一下文档。
none
System:
OS: Windows 10 10.0.25163
CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
Memory: 16.64 GB / 31.94 GB
Binaries:
Node: 18.3.0 - C:\Program Files\nodejs\node.EXE
npm: 8.12.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.25163.1010.0), Chromium (98.0.1108.50)
Internet Explorer: 11.0.25163.1000npm
vuejs/core#6862 vuejs/rfcs#574
feature name TBD
当在组件中引入使用了defineOptions的模块时报错：
vite的配置如下：
On some platforms, the docs website application icon is missing.
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36 Edg/106.0.1370.47n/a
import { rollup } from 'rollup'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import DefineOptions from 'unplugin-vue-define-options/rollup'
...
const bundle = await rollup({
...
plugins: [
DefineOptions(),
vue({
isProduction: false,
}),
vueJsx(),
...
]
...
})
安装了unplugin-vue-define-options之后，在vite.config.ts 添加了plugins配置，还是报--- 找不到名称“defineOptions”。
let { visible } = defineModel<{
visible?: boolean;
}>();
const props = defineProps<{
visible?: boolean;
}>();
const emit = defineEmits<{
(event: 'update:visible', data?: boolean): void;
}>();
none
System:
OS: macOS 12.4
Memory: 441.52 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 17.5.0 - /usr/local/bin/node
Yarn: 1.22.18 - /usr/local/bin/yarn
npm: 8.8.0 - /usr/local/bin/npm
Browsers:
Chrome: 104.0.5112.79
Safari: 15.5yarn
This import works:
import type { IFieldEmits } from "../../my-component-lib/src/forms/FieldProps"
This import does not work, even though it resolves to the same folder:
import type { IFieldEmits } from "@/my-component-lib/src/forms/FieldProps"
The error I receive is:
5:48:41 PM [vite] warning: unplugin-vue-better-define SyntaxError: Cannot resolve TS definition.
Plugin: unplugin-vue-better-define
File: C:/MyProjectPath/src/forms/FieldInput.vue
SyntaxError: Cannot resolve TS definition.
at resolveDefinitions (C:\MyProjectPath\node_modules\@vue-macros\api\dist\index.js:459:13)
at async handleTSEmitsDefinition (C:\MyProjectPath\node_modules\@vue-macros\api\dist\index.js:389:43)
at async processDefineEmits (C:\MyProjectPath\node_modules\@vue-macros\api\dist\index.js:622:15)
at async analyzeSFC (C:\MyProjectPath\node_modules\@vue-macros\api\dist\index.js:548:9)
at async transformBetterDefine (C:\MyProjectPath\node_modules\@vue-macros\better-define\dist\chunk-7CI72ON6.js:17:18)
at async TransformContext.transform (C:\MyProjectPath\node_modules\@vue-macros\better-define\dist\chunk-7CI72ON6.js:99:16)
at async Object.transform (file:///C:/MyProjectPath/node_modules/vite/dist/node/chunks/dep-c842e491.js:41421:30)
at async loadAndTransform (file:///C:/MyProjectPath/node_modules/vite/dist/node/chunks/dep-c842e491.js:37808:29)
It appears (so far) that I can use the "@" syntax just fine for the defineProps types or their base types, just not for defineEmits. ("@" is mapped to the project root in my tsconfig.json, not to "/src".)
Thanks for writing this plugin!
https://github.com/richardtallent
I can provide a reproduction next week if needed, but I'm shutting down my work laptop for the weekend and wanted to get this issue filed beforehand.
System:
OS: Windows 10 10.0.19044
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
Memory: 17.01 GB / 31.73 GB
Binaries:
Node: 16.15.1 - C:\Program Files\nodejs\node.EXE
npm: 8.13.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (107.0.1418.26)
Internet Explorer: 11.0.19041.1566
Also:
- vue 3.2.41
- vite 3.2.2
- unplugin-vue-macros 0.16.0npm
根据 README 配置了 unplugin-vue-macros，没有找到 defineOptions 的定义。如果是 unplugin-vue-define-options 则没有这个问题。
如果 tsconfig.json 里的 types 调整一下，则正常。
{
"compilerOptions": {
...,
"types": ["unplugin-vue-macros/macros-global"]
},
...
}
https://github.com/ModyQyW/unplugin-vue-macros-bug
System:
OS: macOS 12.4
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Memory: 43.63 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
npm: 8.15.1 - ~/.nvm/versions/node/v16.16.0/bin/npm
Watchman: 2022.07.04.00 - /usr/local/bin/watchman
Browsers:
Safari: 15.5pnpm
如上图所示，一直在vue文件中显示找不到名称，试过删掉依赖重现安装，还是会提示
defineOptions
macOSyarn
First of all . thanks for code
Probably a mistake because I missed something, I'm sorry for that
I use this plugin as described in the README
1、npm i unplugin-vue-define-options -D
2、config vite.config.js
import DefineOptions from 'unplugin-vue-define-options/vite'
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [Vue(), DefineOptions()],
})
3、config tsconfig.json
{
"compilerOptions": {
// ...
"types": ["unplugin-vue-define-options/macros-global" /* ... */]
}
}
Then vscode will prompt me 'defineOptions' is not defined.
the defineOptions does not exist in .eslintrc-auto-import.json auto-imports.d.ts
https://github.com/yangliguo7/vite-project
npm run devnpm
[email protected] 依赖于 [email protected]，但 [email protected] 并没有发布到 npm 上。
https://cdn.jsdelivr.net/npm/[email protected]/package.json
https://www.npmjs.com/package/unplugin-vue-define-options
None
System:
OS: macOS 12.4
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Memory: 46.07 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
npm: 8.15.1 - ~/.nvm/versions/node/v16.16.0/bin/npm
Watchman: 2022.07.04.00 - /usr/local/bin/watchman
Browsers:
Safari: 15.5pnpm
When the project uses JS, this error occurs when using defineptions ().
[vite] Internal server error: [@vue/compiler-sfc] <script> and <script setup> must have the same language type.
Can this plug-in only be used in TS project ?
//index.vue
defineOptions({
name: "ColorSelector"
})
在其他组件中使用时无代码提示
期望值
No response
No response
for example, we have a component which use SetupFC to decorate
import { ref } from 'vue'
export const SetupFCType: SetupFC = () => {
const count = ref(0)
return () => (
<div>
<h3>SetupFCType</h3>
<p>count: {count.value}</p>
<button onClick={() => count.value++}>inc & check sourcemap</button>
</div>
)
}we hope it can correcly run, but failed, because plugin don't resolve import statements.
System:
OS: Windows 10 10.0.19044
CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
Memory: 789.61 MB / 15.79 GB
Binaries:
Node: 18.4.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.12.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (105.0.1343.53)
Internet Explorer: 11.0.19041.1566pnpm
vite 3.0.4
使用的v0.7.3版本 断点位置不对 切换到 0.6.2正常
v0.7.3调试断点位置不对
linuxpnpm
1、尝试在defineProps里使用局部变量，compiler-sfc提示要<script></script>标签声明局部变量
Internal server error: unplugin-vue-define-options Error: [@vue/compiler-sfc] defineProps() in <script setup> cannot reference locally declared variables because it will be hoisted outside of the setup() function. If your component options require initialization in the module scope, use a separate normal <script> to export the options instead.
我在 playground 确认这个语法是可以的
2、以下是示例
我看了 fixtures/error3.vue
应该是用于判断组件重复声明的，也许需要判断一下里面有没有export default {} ?
<script>
const props = {}
</script>
<script setup>
defineProps(props)
</script>
error: unplugin-vue-define-options SyntaxError: defineOptions cannot be used, with both script and script-setup.
"vite": "^2.9.12",
"vue": "^3.2.37"
vite.config.ts:
import DefineOptions from 'unplugin-vue-define-options/vite'
plugins: [
DefineOptions(),
],
use:
<script lang="ts" setup> defineOptions({ name: 'xxx-xxxx', }) </script>defineModel can't resolve inline expression, addition assignment and increment in function
- Operating System: `Darwin`
- Node Version: `v18.7.0`
- Package Manager: `[email protected]`
- unplugin-vue-macros version: `0.10.0`It seems I can't write vite.config.ts in the stackblitz reproduction, so it may need to be copied from HelloWorld.vue and App.vue.
https://stackblitz.com/edit/vue-w5pssk?file=src/components/HelloWorld.vue
it's ok in the terminal.pnpm
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are awaiting their schedule. Click on a checkbox to get an update now.
@rspack/core, @vitest/coverage-v8, @vitest/ui, @vue/compiler-core, @vue/compiler-dom, @vue/compiler-sfc, @vue/shared, astro, eslint, pnpm, quasar, rollup, tsx, type-fest, vite-plugin-vue-devtools, vitepress, vitest, vue)These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.
@vue/language-core, vue-tsc)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
playground/nuxt/package.json
@vueuse/core ^10.9.0vue ^3.4.23@nuxt/devtools ^1.2.0@unocss/nuxt ^0.59.4nuxt ^3.11.2quasar ^2.15.3
.github/workflows/release.yml
actions/checkout v4pnpm/action-setup v3.0.0actions/setup-node v4.github/workflows/unit-test.yml
actions/checkout v4pnpm/action-setup v3.0.0actions/setup-node v4actions/checkout v4pnpm/action-setup v3.0.0actions/setup-node v4
.node-version
docs/package.json
prettier ^3.2.5shiki ^1.3.0@vite-pwa/vitepress ^0.4.0@vitejs/plugin-vue-jsx ^3.1.0vite-plugin-pwa ^0.19.8vite-plugin-vue-devtools ^7.0.27vitepress ^1.1.3vue ^3.4.23package.json
@babel/types ^7.24.0@changesets/changelog-github ^0.5.0@changesets/cli ^2.27.1@rspack/core ^0.6.2@sxzz/eslint-config ^3.9.1@sxzz/prettier-config ^2.0.2@types/node ^20.12.7@vitest/coverage-v8 ^1.5.0@vitest/ui ^1.5.0esbuild ^0.20.2eslint ^9.1.0eslint-define-config ^1.24.1expect-type ^0.19.0fast-glob ^3.3.2monoman ^0.4.2npm-run-all2 ^6.1.2prettier ^3.2.5rimraf ^5.0.5rollup ^4.16.1tsup ^8.0.2tsx ^4.7.2typescript ~5.4.5unocss ^0.59.4unplugin-macros ^0.13.0unplugin-raw ^0.1.1vite ^5.2.10vitest ^1.5.0vue ^3.4.23vue-tsc 1.8.27vue2 ^2.7.16webpack ^5.91.0pnpm 9.0.5packages/api/package.json
@babel/types ^7.24.0resolve.exports ^2.0.2pnpm 9.0.5packages/astro/package.json
@vitejs/plugin-vue ^5.0.4astro ^4.6.3pnpm 9.0.5packages/better-define/package.json
unplugin ^1.10.1pnpm 9.0.5packages/boolean-prop/package.json
@vue/compiler-core ^3.4.23@vue/compiler-sfc ^3.4.23pnpm 9.0.5packages/chain-call/package.json
unplugin ^1.10.1pnpm 9.0.5packages/common/package.json
@babel/types ^7.24.0@rollup/pluginutils ^5.1.0@vue/compiler-sfc ^3.4.23ast-kit ^0.12.1local-pkg ^0.5.0magic-string-ast ^0.5.0@babel/parser ^7.24.4@vitejs/plugin-vue ^5.0.4pnpm 9.0.5packages/define-emit/package.json
unplugin ^1.10.1vue ^3.4.23pnpm 9.0.5packages/define-models/package.json
ast-walker-scope ^0.6.1unplugin ^1.10.1@vueuse/core ^10.9.0vue ^3.4.23pnpm 9.0.5packages/define-options/package.json
ast-walker-scope ^0.6.1unplugin ^1.10.1vue ^3.4.23pnpm 9.0.5packages/define-prop/package.json
unplugin ^1.10.1vue ^3.4.23pnpm 9.0.5packages/define-props-refs/package.json
unplugin ^1.10.1vue ^3.4.23pnpm 9.0.5packages/define-props/package.json
unplugin ^1.10.1vue ^3.4.23pnpm 9.0.5packages/define-render/package.json
unplugin ^1.10.1vue ^3.4.23pnpm 9.0.5packages/define-slots/package.json
unplugin ^1.10.1vue ^3.4.23pnpm 9.0.5packages/devtools/package.json
sirv ^2.0.4vue ^3.4.23@unocss/reset ^0.59.4@vitejs/plugin-vue ^5.0.4get-port ^7.1.0unocss ^0.59.4vite ^5.2.10pnpm 9.0.5packages/eslint-config/package.json
eslint ^9.1.0pnpm 9.0.5packages/export-expose/package.json
@vue/compiler-sfc ^3.4.23unplugin ^1.10.1vue ^3.4.23pnpm 9.0.5packages/export-props/package.json
unplugin ^1.10.1vue ^3.4.23pnpm 9.0.5packages/export-render/package.json
@vue/compiler-sfc ^3.4.23unplugin ^1.10.1vue ^3.4.23pnpm 9.0.5packages/hoist-static/package.json
unplugin ^1.10.1pnpm 9.0.5packages/jsx-directive/package.json
unplugin ^1.10.1vue ^3.4.23pnpm 9.0.5packages/macros/package.json
unplugin ^1.10.1unplugin-combine ^1.0.0vue ^3.4.23pnpm 9.0.5packages/named-template/package.json
@vue/compiler-dom ^3.4.23unplugin ^1.10.1vue ^3.4.23pnpm 9.0.5packages/nuxt/package.json
@nuxt/kit ^3.11.2@nuxt/devtools ^1.2.0@nuxt/schema ^3.11.2@vue/language-core 1.8.27pnpm 9.0.5packages/reactivity-transform/package.json
@babel/parser ^7.24.4@vue/compiler-core ^3.4.23@vue/shared ^3.4.23magic-string ^0.30.10unplugin ^1.10.1estree-walker ^3.0.3pnpm 9.0.5packages/setup-block/package.json
@vue/compiler-dom ^3.4.23unplugin ^1.10.1pnpm 9.0.5packages/setup-component/package.json
unplugin ^1.10.1vue ^3.4.23pnpm 9.0.5packages/setup-sfc/package.json
unplugin ^1.10.1vue ^3.4.23pnpm 9.0.5packages/short-bind/package.json
@vue/compiler-core ^3.4.23@vue/compiler-sfc ^3.4.23pnpm 9.0.5packages/short-emits/package.json
unplugin ^1.10.1pnpm 9.0.5packages/short-vmodel/package.json
@vue/compiler-core ^3.4.23@vue/compiler-sfc ^3.4.23pnpm 9.0.5packages/test-utils/package.json
@rollup/plugin-json ^6.1.0@rollup/plugin-node-resolve ^15.2.3@rollup/pluginutils ^5.1.0@vitejs/plugin-vue-jsx ^3.1.0@vitejs/plugin-vue2 ^2.3.1esbuild ^0.20.2fast-glob ^3.3.2rollup ^4.16.1rollup-plugin-esbuild ^6.1.1unplugin-vue ^5.0.5vite ^5.2.10vue ^3.4.23pnpm 9.0.5packages/volar/package.json
@rollup/pluginutils ^5.1.0@vue/language-core 1.8.27@vue/shared ^3.4.23@vue/compiler-dom ^3.4.23typescript ~5.4.5vue-tsc 1.8.27pnpm 9.0.5playground/astro/package.json
@astrojs/vue ^4.1.0@vueuse/core ^10.9.0astro ^4.6.3vue ^3.4.23playground/vue2/package.json
@vueuse/core ^10.9.0vue ^2.7.16@rollup/plugin-commonjs ^25.0.7@rollup/plugin-node-resolve ^15.2.3@vitejs/plugin-vue2 ^2.3.1@vitejs/plugin-vue2-jsx ^1.1.1@vue/babel-helper-vue-jsx-merge-props ^1.4.0esbuild ^0.20.2npm-run-all2 ^6.1.2rollup ^4.16.1rollup-plugin-esbuild ^6.1.1type-fest ^4.16.0typescript ~5.4.5unocss ^0.59.4vite ^5.2.10vite-hyper-config ^0.2.1vite-plugin-inspect ^0.8.4vue-tsc 1.8.27playground/vue3/package.json
@vueuse/core ^10.9.0quasar ^2.15.3vue ^3.4.23@rollup/plugin-commonjs ^25.0.7@rollup/plugin-node-resolve ^15.2.3@vitejs/plugin-vue ^5.0.4@vitejs/plugin-vue-jsx ^3.1.0esbuild ^0.20.2npm-run-all2 ^6.1.2rollup ^4.16.1rollup-plugin-esbuild ^6.1.1type-fest ^4.16.0typescript ~5.4.5unocss ^0.59.4vite ^5.2.10vite-hyper-config ^0.2.1vite-plugin-inspect ^0.8.4vue-tsc 1.8.27
dependencies：
"vue": "^3.2.13",
"unplugin-vue-define-options": "^0.6.1",
”webpack": "5.70.0"
vue.config.js config：
当前defineModel需要依赖新的实验性提案，该提案是否能通过还是未知数。
我认为是否可以通过一个writtebleComputed进行中介是否更加符合？
//====使用====
<script setup lang="ts">
// modelValue:WrittebleComputedRef<string>
const { modelValue } = defineModel<{
modelValue: string
}>()
console.log(modelValue.value)
modelValue.value = 'newValue'
</script>
//====输出====
<script setup lang="ts">
const props = defineProps<{
modelValue: string
}>();
const emit = defineEmits<{
(event: 'update:modelValue', value: string): void
}>()
//中介
const modelValue1=computed({
get:()=>props.modelValue,
set:(value)=>emit('update:modelValue', value),
})
//modelValue => modelValue1
console.log(modelValue1.value)
modelValue1.value = 'newValue'
</script>
No response
No response
defineModel works everywhere except when using withDefaults
const { form } = defineModel<{
form: { name: string }
}>()
interface Props {
color: string
}
withDefaults(defineProps<Props>(), {
color: 'blue'
})I'm guessing the compiler is not noticing withDefaults and therefore, not finding defineProps within.
Here's a reproduction:
https://stackblitz.com/edit/vitejs-vite-b7hjq1?file=src/components/CreatePost.vue
And here is more of the error:
[plugin:vite:vue] [@vue/compiler-sfc] duplicate defineProps() call
/home/projects/vitejs-vite-b7hjq1/src/components/CreatePost.vue
11 | }
12 |
13 | withDefaults(defineProps<Props>(), {
| ^^^^^^^^^^^^^^^^^^^^
14 | color: 'blue',
15 | });
https://stackblitz.com/edit/vitejs-vite-b7hjq1?file=src/components/CreatePost.vue
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 16.14.2 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 7.17.0 - /usr/local/bin/npmyarn
I just use the slot to render in ElButton.
if I save the button slot result by the function called will repeat multiple,
and if I try to remove defineOptions the result will be reasonable.
You can clone the element plus and copy the link demo to play and try to debug the components/button
element playgroundpnpm
file:///D:/workspace/github/ly/node_modules/.pnpm/[email protected]/node_modules/unplugin-vue-define-options/dist/chunk-WNNTV2HR.mjs:30
throw new Error('Dynamic require of "' + x + '" is not supported');
package.json 中的types 指向的是index.d.ts
但是最终生成的包中的包含的是
导致在vue文件中找不到defineOptions,可以通过在tsconfig.json 中通过引入macros-global.d.ts 来解决
建议更新一下文档或者package.json types 字段更改
https://github.com/SGAMERyu/piece-ui
System:
OS: Windows 10 10.0.19044
CPU: (6) x64 Intel(R) Core(TM) i5-9400F CPU @ 2.90GHz
Memory: 6.87 GB / 15.87 GB
Binaries:
Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (105.0.1343.27)
Internet Explorer: 11.0.19041.1566pnpm
'defineOptions' is not defined eslint no-undef
可以使用 vite 快速构建一个js项目，开启eslint
使用 defineOptions 便会出现这个错误提示
npm create vite@latest
MacOs Vscodenpm
import { ref } from 'vue';
const a = 1;
export const Foo: SetupFC = () => {
const count = ref(0);
console.log(a); // runtime: [Uncaught ReferenceError: a is not defined]
return () => (
<div>
<h3>SetupFCType</h3>
<p>count: {count.value}</p>
<button onClick={() => count.value++}>inc & check sourcemap</button>
</div>
)
};https://stackblitz.com/edit/vitejs-vite-wjvjkf?file=src%2FFoo.tsx
System:
OS: Windows 10 10.0.19044
CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
Memory: 533.91 MB / 15.79 GB
Binaries:
Node: 18.4.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.12.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (106.0.1370.52)
Internet Explorer: 11.0.19041.1566pnpm
!] (plugin rpt2) Error: src/components/panel/panel.vue?vue&type=script&setup=true&lang.ts:35:46 - error TS2769: No overload matches this call.
The last overload gave the following error.
Argument of type '{ props: { showHeader: { type: BooleanConstructor; required: boolean; default: boolean; }; title: { type: StringConstructor; required: boolean; default: string; }; contentStyle: { ...; }; border: { ...; }; shadow: { ...; }; }; ... 57 more ...; style?: unknown; }' is not assignable to parameter of type 'ComponentOptionsWithObjectProps<{}, unknown, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, string[], string, Readonly<ExtractPropTypes<{}>> & { ...; }, {}>'.
Type '{ props: { showHeader: { type: BooleanConstructor; required: boolean; default: boolean; }; title: { type: StringConstructor; required: boolean; default: string; }; contentStyle: { ...; }; border: { ...; }; shadow: { ...; }; }; ... 57 more ...; style?: unknown; }' is not assignable to type 'ComponentOptionsBase<Readonly<ExtractPropTypes<{}>> & { [x: on${Capitalize<string>}]: ((...args: any[]) => any) | undefined; }, unknown, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, string[], string, {}>'.
Types of property 'emits' are incompatible.
Type 'ThisType | (string[] & ThisType) | undefined' is not assignable to type '(string[] & ThisType) | undefined'.
Type 'ThisType' is not assignable to type 'string[] & ThisType'.
Type 'ThisType' is missing the following properties from type 'string[]': length, pop, push, concat, and 29 more.
35 export default /#PURE/_defineComponent({
~
36 ...default,
~~~~~~~~~~~~~~~~~
"pinia": "^2.0.17",
"rollup": "^2.60.0",
"unplugin-vue-define-options": "^0.12.3",pnpm
i think setupSFC, defineRender is a nice vue-jsx trial. But obviously they have serveral limitations, by using your playground example, i tried to use functional component code style to organize my code, but it compiled failed.
foo.setup.tsx
function A() {
return (
<div>1</div>
)
}
export default () => (
<div>
<A />
<h1>Hello World</h1>
</div>
)it will compiled to
<script setup lang="tsx">function A() {
return (
<div>1</div>
)
}
defineRender(() => (
<div>
<A />
<h1>Hello World</h1>
</div>
));</script>this makes me a little sad, because the code is correct jsx style, why plugin can't make it run? so i think that's your plugin limitation, i guess you want to make vue component close to functional component (just a guess), so why not change mind?
we can use compiler to implement it.
for example
const App: SetupFC<{
count: number
}> = (props) => {
const count = ref(props.count)
return () => (
<div>
<p>{ref.value}<p>
<button onClick={() => count.value++}>inc</button>
</div>
)
}it will compiled to
const App = defineSetupComponent(() => {
const props = defineProps<{
count: number
}>()
const count = ref(props.count)
return () => (
<div>
<p>{ref.value}<p>
<button onClick={() => count.value++}>inc</button>
</div>
)
})No response
No response
1、尝试在defineProps里使用局部变量，compiler-sfc提示要<script></script>标签声明局部变量
Internal server error: unplugin-vue-define-options Error: [@vue/compiler-sfc] defineProps() in <script setup> cannot reference locally declared variables because it will be hoisted outside of the setup() function. If your component options require initialization in the module scope, use a separate normal <script> to export the options instead.
我在 playground 确认这个语法是可以的
2、以下是示例
我看了 fixtures/error3.vue
应该是用于判断组件重复声明的，也许需要判断一下里面有没有export default {} ?
<script>
const props = {}
</script>
<script setup>
defineProps(props)
</script>
error: unplugin-vue-define-options SyntaxError: defineOptions cannot be used, with both script and script-setup.
The following code ignores the ? on form.
const { form } = defineModel<{
form?: ActivityPointersFilter
}>()This is evident by the warning:
[Vue warn]: Missing required prop: "form"
https://stackblitz.com/edit/vitejs-vite-8esn2h?file=src/components/CreatePost.vue
System:
OS: Linux 6.0 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-1240P
Memory: 23.58 GB / 31.20 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 18.9.0 - ~/.nvm/versions/node/v18.9.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v18.9.0/bin/yarn
npm: 8.19.1 - ~/.nvm/versions/node/v18.9.0/bin/npm
Browsers:
Chrome: 107.0.5304.87
Firefox: 106.0.5yarn
首先 引入了 CSSProperties 后，如果不加 template 模板出现如下报错，当然不限于这个属性。还有不支持热更新
<script lang="tsx" setup>
import { CSSProperties } from 'vue';
interface Props {
test?: any;
}
const { test = '11' } = defineProps<Props>();
defineRender(() => {
return (
<div>
<h1>{test}</h1>
</div>
);
});
</script>
<template>
</template>
如上述代码
MacOs Webstrom
"vite": "3.0.9",
"unplugin-vue-macros": "^0.11.1",pnpm
Error info:
unplugin-vue-define-options TypeError: Cannot read properties of undefined (reading 'script')
https://codesandbox.io/s/vue2-define-options-253lv4
System:
OS: macOS 12.5.1
CPU: (10) arm64 Apple M1 Pro
Memory: 91.86 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.14.2 - /var/folders/_8/56jw43kd3736fw5wjm2hjj_m0000gn/T/fnm_multishells/5286_1662459564218/bin/node
Yarn: 1.22.19 - ~/Library/pnpm/yarn
npm: 8.5.0 - /var/folders/_8/56jw43kd3736fw5wjm2hjj_m0000gn/T/fnm_multishells/5286_1662459564218/bin/npm
Browsers:
Chrome: 104.0.5112.79
Firefox: 100.0
Safari: 15.6.1pnpm
First of all, thanks! This is a really needed feature. especially for third-party Vue plugins.
https://github.com/sxzz/unplugin-vue-define-options/blob/main/src/core/utils.ts#L55
I understand the restriction, but I think it could potentially be worked around. In my case, I am using Inertia and I want to use a persistent layout.
If you are not familiar with Inertia, we need to declare a layout property on the Vue component itself:
<script lang="ts">
import layout from '@/views/layouts/default.vue'
export default {
layout
}
</script>
<script setup lang="ts">
// The rest of our code
</script>I already have a "solution" for this with a Vite plugin: https://twitter.com/enzoinnocenzi/status/1443171187190808578
However, I think defineOptions is also a very good potential alternative for this feature and I would like to use it:
<script setup lang="ts">
import layout from '@/views/layouts/default.vue'
defineOptions({
layout,
})
// The rest of our code
</script>This issue is that the macro doesn't support local variables, so I can't import the layout there. Do you think this could be worked around by copying local variables/imports to the generated <script>?
webpack.config.js中的配置
plugins: [
new ProgressBarPlugin(),
new VueLoaderPlugin(),
require('unplugin-vue-define-options/webpack')()
],
未打包之前的页面defineOptions
import { ElInput } from 'element-plus';
defineOptions({
name: 'SyInputNumber',
});
product
打包之后的
setup(__props, { emit }) {
const props = __props;
defineOptions({
name: 'SyInputNumber',
});
/* emit */
/* 全局禁用 */
let inputDisabled = (0,external_vue_namespaceObject.computed)(() => props.disabled);
/* 根据步长、精准度处理数值 */
let numPrecision = (0,external_vue_namespaceObject.computed)(() => {npm
Related to #2, I found how to consistently reproduce the issue I was talking about.
With the same repository as before (https://github.com/innocenzi/define-options-issue-2), you can simply start the dev server, open the page in your browser, and save App.vue to trigger an HMR update. It will trigger the following error:
After that, subsequent refreshes will all trigger the error. Restarting the server fixes them. Unfortunately I don't have enough Vite knowledge to understand where this issue comes from. I just know it's triggered there: https://github.com/sxzz/unplugin-vue-define-options/blob/main/src/index.ts#L40
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
