sxzz/vue-simple-props

Remove emits, slots, and attrs concepts in Vue.

vue-simple-props

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

npm i vue-simple-props

Usage

Conventions

• Starts with on for event handlers.
• Starts with render for slots.
• Others are props.

Functional Component (Stateful)

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 () => <div {...styles}>...</div>
  },
  {
    // other options, e.g. name, inheritAttrs, etc.
  },
)

<!-- parent.vue -->
<template>
  <Comp foo="bar" @click="handleClick">slot</Comp>
</template>

Options Component

import {
  defineSimpleComponent,
  useClassAndStyle,
  useProps,
} from 'vue-simple-props'

interface Props {
  foo: string
  onClick: () => void
  renderDefault?: () => JSX.Element
}

export const Comp = defineSimpleComponent<Props>({
  setup() {
    const props = useProps<Props>()
    const styles = useClassAndStyle()
    return () => <div {...props}>...</div>
  },
})

HMR support

// 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 © 2023-PRESENT 三咲智子 Kevin Deng