https://github.com/sxzz/vue-simple-props
Remove emits, slots, and attrs concepts in Vue.
https://github.com/sxzz/vue-simple-props
Last synced: 20 days ago
JSON representation
Remove emits, slots, and attrs concepts in Vue.
- Host: GitHub
- URL: https://github.com/sxzz/vue-simple-props
- Owner: sxzz
- License: mit
- Created: 2023-10-30T11:51:38.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-28T06:37:26.000Z (6 months ago)
- Last Synced: 2024-10-29T14:45:50.322Z (6 months ago)
- Language: TypeScript
- Homepage:
- Size: 482 KB
- Stars: 83
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# vue-simple-props [](https://npmjs.com/package/vue-simple-props)
[](https://github.com/sxzz/vue-simple-props/actions/workflows/unit-test.yml)
Remove emits, slots, and attrs concepts in Vue.
## Features
- 🤐 No need to define props, emits, slots, and attrs in runtime.
- 🦾 Fully TypeScript support.
- 👾 Non-invasive.
## Install
```bash
npm i vue-simple-props
```
## Usage
### Conventions
- Starts with `on` for event handlers.
- Starts with `render` for slots.
- Others are props.
### Functional Component (Stateful)
```tsx
import { defineFunctionalComponent, useClassAndStyle } from 'vue-simple-props'
interface Props {
foo: string
onClick: () => void
renderDefault?: () => JSX.Element
}
const Comp = defineFunctionalComponent(
(props: Props) => {
const styles = useClassAndStyle()
return () =>
...
},
{
// other options, e.g. name, inheritAttrs, etc.
},
)
```
```vue
slot
```
### Options Component
```tsx
import {
defineSimpleComponent,
useClassAndStyle,
useProps,
} from 'vue-simple-props'
interface Props {
foo: string
onClick: () => void
renderDefault?: () => JSX.Element
}
export const Comp = defineSimpleComponent({
setup() {
const props = useProps()
const styles = useClassAndStyle()
return () =>
...
},
})
```
### HMR support
```ts
// vite.config.ts
import vueJsx from '@vitejs/plugin-vue-jsx'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
// ...
vueJsx({
defineComponentName: [
'defineComponent',
'defineFunctionalComponent',
'defineSimpleComponent',
],
}),
],
})
```
## Caveats
- `inheritAttrs` is `false` by default.
## Sponsors
## License
[MIT](./LICENSE) License © 2023-PRESENT [三咲智子 Kevin Deng](https://github.com/sxzz)