vue-tsx-transformer v1.2.7

Vue2 Tsx Transformer

Installation

$ npm install vue-tsx-transformer --save-dev

Usage

import VueTsxTransformer from "vue-tsx-transformer";

export default {
  // ...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: "ts-loader",
            options: {
              transpileOnly: true,
              getCustomTransformers: () => ({
                before: [
                  VueTsxTransformer({
                    // options
                  }),
                ],
              }),
            },
          },
        ],
      },
    ],
  },
};

Changelog

• 2024-03-15 merge spread operator into attrs or props
• 2023-06-28 add JsxFragment transform
• 2022-12-14 fix select v-model, optimize directives merge
• 2022-09-19 fix native component v-model

Syntax

Content

• Automatic h injection syntactic sugar
• vModel syntactic sugar

render() {
  return <p>hello</p>
}

with dynamic content:

render() {
  return <p>hello { this.message }</p>
}

when self-closing:

render() {
  return <input />
}

with a component:

import MyComponent from "./my-component";

export default {
  render() {
    return <MyComponent>hello</MyComponent>;
  },
};

Attributes/Props

render() {
  return <input type="email" />
}

with a dynamic binding:

render() {
  return <input
    type="email"
    placeholder={this.placeholderText}
  />
}

with the spread operator (object needs to be compatible with Vue Data Object):

The spread operator will be merged into the attrs or props object for ts typing checking after v1.2.4.

// not supported > v1.2.4
render() {
  const inputAttrs = {
    type: 'email',
    placeholder: 'Enter your email'
  }
  return <input {...{ attrs: inputAttrs }} />
}

### Slots

named slots:

```tsx
render() {
  return (
    <MyComponent>
      <header slot="header">header</header>
      <footer slot="footer">footer</footer>
    </MyComponent>
  )
}

scoped slots:

render() {
  const scopedSlots = {
    header: () => <header>header</header>,
    footer: () => <footer>footer</footer>
  }

  return <MyComponent scopedSlots={scopedSlots} />
}

Directives

<input vModel={this.newTodoText} />

with a modifier: Not Supported, Follow the type validation of TSX

v-html:

<p domPropsInnerHTML={html} />