babel plugin for vue 2.0 jsx

Overview

babel-plugin-transform-vue-jsx CircleCI

Babel plugin for Vue 2.0 JSX

Babel Compatibility Notes

  • If using Babel 7, use 4.x
  • If using Babel 6, use 3.x

Requirements

  • Assumes you are using Babel with a module bundler e.g. Webpack, because the spread merge helper is imported as a module to avoid duplication.

  • This is mutually exclusive with babel-plugin-transform-react-jsx.

Usage

npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  babel-preset-env\
  --save-dev

In your .babelrc:

{
  "presets": ["env"],
  "plugins": ["transform-vue-jsx"]
}

The plugin transpiles the following JSX:

<div id="foo">{this.text}</div>

To the following JavaScript:

h('div', {
  attrs: {
    id: 'foo'
  }
}, [this.text])

Note the h function, which is a shorthand for a Vue instance's $createElement method, must be in the scope where the JSX is. Since this method is passed to component render functions as the first argument, in most cases you'd do this:

Vue.component('jsx-example', {
  render (h) { // <-- h must be in scope
    return <div id="foo">bar</div>
  }
})

h auto-injection

Starting with version 3.4.0 we automatically inject const h = this.$createElement in any method and getter (not functions or arrow functions) declared in ES2015 syntax that has JSX so you can drop the (h) parameter.

Vue.component('jsx-example', {
  render () { // h will be injected
    return <div id="foo">bar</div>
  },
  myMethod: function () { // h will not be injected
    return <div id="foo">bar</div>
  },
  someOtherMethod: () => { // h will not be injected
    return <div id="foo">bar</div>
  }
})

@Component
class App extends Vue {
  get computed () { // h will be injected
    return <div id="foo">bar</div>
  }
}

Difference from React JSX

First, Vue 2.0's vnode format is different from React's. The second argument to the createElement call is a "data object" that accepts nested objects. Each nested object will be then processed by corresponding modules:

render (h) {
  return h('div', {
    // Component props
    props: {
      msg: 'hi',
      onCustomEvent: this.customEventHandler
    },
    // normal HTML attributes
    attrs: {
      id: 'foo'
    },
    // DOM props
    domProps: {
      innerHTML: 'bar'
    },
    // Event handlers are nested under "on", though
    // modifiers such as in v-on:keyup.enter are not
    // supported. You'll have to manually check the
    // keyCode in the handler instead.
    on: {
      click: this.clickHandler
    },
    // For components only. Allows you to listen to
    // native events, rather than events emitted from
    // the component using vm.$emit.
    nativeOn: {
      click: this.nativeClickHandler
    },
    // class is a special module, same API as `v-bind:class`
    class: {
      foo: true,
      bar: false
    },
    // style is also same as `v-bind:style`
    style: {
      color: 'red',
      fontSize: '14px'
    },
    // other special top-level properties
    key: 'key',
    ref: 'ref',
    // assign the `ref` is used on elements/components with v-for
    refInFor: true,
    slot: 'slot'
  })
}

The equivalent of the above in Vue 2.0 JSX is:

render (h) {
  return (
    <div
      // normal attributes or prefix with on props.
      id="foo"
      propsOnCustomEvent={this.customEventHandler}
      // DOM properties are prefixed with `domProps`
      domPropsInnerHTML="bar"
      // event listeners are prefixed with `on` or `nativeOn`
      onClick={this.clickHandler}
      nativeOnClick={this.nativeClickHandler}
      // other special top-level properties
      class={{ foo: true, bar: false }}
      style={{ color: 'red', fontSize: '14px' }}
      key="key"
      ref="ref"
      // assign the `ref` is used on elements/components with v-for
      refInFor
      slot="slot">
    </div>
  )
}

Component Tip

If a custom element starts with lowercase, it will be treated as a string id and used to lookup a registered component. If it starts with uppercase, it will be treated as an identifier, which allows you to do:

import Todo from './Todo.js'

export default {
  render (h) {
    return <Todo/> // no need to register Todo via components option
  }
}

JSX Spread

JSX spread is supported, and this plugin will intelligently merge nested data properties. For example:

const data = {
  class: ['b', 'c']
}
const vnode = <div class="a" {...data}/>

The merged data will be:

{ class: ['a', 'b', 'c'] }

Vue directives

Note that almost all built-in Vue directives are not supported when using JSX, the sole exception being v-show, which can be used with the v-show={value} syntax. In most cases there are obvious programmatic equivalents, for example v-if is just a ternary expression, and v-for is just an array.map() expression, etc.

For custom directives, you can use the v-name={value} syntax. However, note that directive arguments and modifiers are not supported using this syntax. There are two workarounds:

  1. Pass everything as an object via value, e.g. v-name={{ value, modifier: true }}

  2. Use the raw vnode directive data format:

const directives = [
  { name: 'my-dir', value: 123, modifiers: { abc: true } }
]

return <div {...{ directives }}/>
Comments
  • version >= 3.4.0 error: Duplicate declaration

    version >= 3.4.0 error: Duplicate declaration "h"

    the version i use >= 3.4.0. when i run the command line 'npm run dev' , there comes an error:

    Module build failed: TypeError /myproject/src/**.vue: Duplicate declaration "h" (This is an error on an internal node. Probably an internal error).

    my code is here:

          showVerify() {
            this.$alert({
              type: 'conform',
              jsx: <div></div>,
              showCancel: true,
              callback() {
                console.log('call driver');
              },
            });
          },
    
    import uCarAlert from 'components/alert';
    import vdom from 'utils/vdom';
    
    let instance = null;
    export default function (Vue) {
      Object.defineProperty(Vue.prototype, '$alert', {
        value(options, callback) {
          if (instance && !instance.$$destroyed) return;
          const initObj = {
            data: typeof options === 'string' ? { content: options } : options,
          };
          const Alert = Vue.extend(uCarAlert);
          const root = document.getElementById('app');
          if (callback) initObj.methods = { callback };
          instance = new Alert(initObj).$mount();
          if (options.jsx && vdom.isVNode(options.jsx)) instance.$slots.default = [options.message];
          root.appendChild(instance.$el);
          if (instance.type === 'notice') {
            setTimeout(() => {
              instance.show = false;
            }, 2000);
          }
        },
      });
    }
    
    opened by yusphy45 18
  • Issues with props rest spread operator

    Issues with props rest spread operator

    Hey Vue team,

    Very nice work on everything with 2.0. So far, it's been awesome to use!

    I just tried to use the spread operator with props, and I'm getting an error. I've verified that the spread operator is working correctly in other places, and I've also verified that the props are being passed in correctly.

    Here's the error that I am getting:

    screen shot 2016-06-18 at 8 39 01 pm

    Thanks again for the great work with 2.0!

    opened by bcarroll22 16
  • [Bug] Component are re-rendered even if not needed

    [Bug] Component are re-rendered even if not needed

    Given 2 very simple child components

    MyInput.jsx

    export default {
      props: ['update', 'value'],
      
      render(h) {
        return (
          <div>
           <input value={this.value} onInput={this.update} />
          </div>
        );
      }
    };
    

    and Foobar.jsx

    export default {
      updated() {
        console.log('FOOBAR is updated');
      },
    
      render(h) {
        return (
          <div>
           FOOBAR
          </div>
        );
      }
    };
    

    And the wrapper component:

    export default {
      data: () => ({
        value: 'myval'
      }),
    
      methods: {
        update(v) {
          this.value = v;
        }
      },
      
      render(h) {
        return (
          <div>
           <MyInput value={this.value} update={this.update} />
           <Foobar />
          </div>
        );
      }
    };
    

    Each time my value in the input is updated, then, the message: FOOBAR is updated is displayed. It make no sence to re-render FooBar component that depends on no props.

    Template version doesn't rerender Foobar:

    <template>
      <div>
        <MyInput :update=update :value=value />
        <FooBar />
      </div>
    </template>
    

    FOOBAR is updated is not displayed.

    The h version also work:

    render(h) {
      return h('div', [
        h('FooBar'),
        h('MyInput', {props: {value: this.value, update: this.update}})
      ]);
    };
    

    That look very weird because I thought the JSX version compile into my h version. This bug makes all my child components to be rerender even if they don't need.

    Update: I noticed that:

      h('Foobar', [])
    

    Display the message whereas

      h('Foobar')
    

    Work as expected. I don't know why the behavior is different in this case, I'll also open an issue in Vue.

    bug 
    opened by titouancreach 12
  • domPropsInnerHTML incorrect markup

    domPropsInnerHTML incorrect markup

    I'm trying to render HTML using JSX.

    For example:

      <div>
          <div domPropsInnerHTML={ this.body } />
     </div>
    

    However I'm getting the following error:

    The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
    

    When I try the same exact HTML using the v-html directive in a vue template, the error disapears.

    <div>
      <div v-html="body">
    </div>
    

    I would resort to using that, but I'm trying to use create a helper component for nuxtent that based on data renders a dynamic component or HTML at runtime, so that vue components could easily be used inside markdown.

    bug 
    opened by aleedmanath 12
  • <input> value does not update

    value does not update

    The example below reproduces a problem where the <input>'s value doesn't update when it's changed from the model.

    Dependencies (from .yarn.lock):

    [email protected]^0.1.0:
      version "0.1.0"
      resolved "https://registry.yarnpkg.com/babel-preset-vue/-/babel-preset-vue-0.1.0.tgz#adb84ceab3873bd72606fdd3f7047640f032301f"
      dependencies:
        babel-helper-vue-jsx-merge-props "^2.0.2"
        babel-plugin-syntax-jsx "^6.18.0"
        babel-plugin-transform-vue-jsx "^3.1.2"
    
    [email protected]^3.1.2:
      version "3.4.3"
    
    [email protected]^2.0.0, [email protected]^2.3.3, [email protected]^2.3.4:
      version "2.3.4"
      resolved "https://registry.yarnpkg.com/vue/-/vue-2.3.4.tgz#5ec3b87a191da8090bbef56b7cfabd4158038171"
    

    Codepen

    https://codepen.io/skyrpex/pen/Xgqaaz

    Example

    const prevent = callback => (event) => {
    	event.preventDefault();
    	return callback(event);
    };
    
    export default {
    	data: () => ({
    		query: '',
    	}),
    	methods: {
    		onSubmit() {
    			// The <p> element will change, but not the <input>.
    			this.query = '';
    		},
    	},
    	render() {
    		return (
    			<form on-submit={prevent(this.onSubmit)}>
    				<p>Query: "{this.query}"</p>
    				<input value={this.query} on-input={(e) => { this.query = e.target.value; }} />
    				<button type="submit">
    					Clear
    				</button>
    				<p>Press enter or click the button to clear the query.</p>
    			</form>
    		);
    	},
    };
    
    opened by skyrpex 12
  • Add v-on:keyup.enter to JSX

    Add v-on:keyup.enter to JSX

    We could do something like:

    render (h) {
      return <div onKeyup.enter={this.something} />
    }
    
    render (h) {
      return h('div', {
        on: {
          keyup: {
            enter: this.something
          }
        }
      }
    }
    

    to support the event modifiers, what do you think @yyx990803, @QingWei-Li, does it make any sense to you ?

    opened by nickmessing 11
  • [Feature Request] JSX equivalents for passing $attrs and $listeners introduced in Vue 2.4

    [Feature Request] JSX equivalents for passing $attrs and $listeners introduced in Vue 2.4

    Vue 2.4 provides new API $attrs and $listeners to ease creating wrapper components, the example given, however, is in vue template syntax. Could we have equivalents for these APIs, especially in object spread form?

    I've read through the readme and #1 and #51, but did not find an answer. In my experiment, {...{ this.$attrs } and { ...this.$attrs } do not seem to work. Please correct me if I've missed something.

    opened by KagamiChan 10
  • Module build failed: SyntaxError: Unexpected token

    Module build failed: SyntaxError: Unexpected token

    Hello,

    I am trying to migrate to Vue 2 and for this I need to use the vue-tables-2 component. I am using Laravel Elixir with webpack to compile my Vue projects. I followed the instructions and installed babel-plugin-transform-vue-jsx and its dependencies and create the .babelrc at the same level as the script. The below error is displayed :

    Error: ./~/vue-tables-2/lib/template.jsx Module build failed: SyntaxError: Unexpected token (15:7)

    The corresponding character is <

    Do you have any advice ?

    Thanks

    opened by bibiseb 10
  • Is it a good idea for this babel plugin to provide a browser version?

    Is it a good idea for this babel plugin to provide a browser version?

    when people want to play vue with jsx in browsers (eg. in vuep), a standalone babel plugin built for browsers may be useful.

    I've built one myself, but I don't know if a good idea for this plugin to provide a browser build.

    Maybe a custom build babel-standalone is a better idea.

    https://github.com/babel/babel-standalone/issues/38

    Any suggestions?

    opened by reverland 9
  • Using Vue JSX inside jsfiddle/codepen demo

    Using Vue JSX inside jsfiddle/codepen demo

    Is it possible to use Vue JSX inside a jsfiddle or codepen demo? I am trying to use it in codepen. I have the babel preprocessor selected and a cdn to the latest beta of Vue 2.0. But it doesn't seem to work. As it stands now, the only way to play around with Vue JSX is to setup a basic webpack project similar to the example provided in this repo?

    opened by p-adams 9
  • TypeError: Cannot read property '$createElement' of null

    TypeError: Cannot read property '$createElement' of null

    I use Nuxt and I have a code:

    @Component({
      functional: true
    })
    class KrTransition extends Vue {
      render() {
        return <h1>hello</h1>;
      }
    }
    
    export default KrTransition;
    

    when I try use it, I get a error:

    TypeError: Cannot read property '$createElement' of null
        at render (src/components/KrTransition/KrTransition.js:8:11)
        at createFunctionalComponent (D:\Projects\Vue\smart-landing\node_modules\vue\dist\vue.runtime.common.js:3073:35)
        at createComponent (D:\Projects\Vue\smart-landing\node_modules\vue\dist\vue.runtime.common.js:3027:12)
        at _createElement (D:\Projects\Vue\smart-landing\node_modules\vue\dist\vue.runtime.common.js:3327:15)
        at createElement (D:\Projects\Vue\smart-landing\node_modules\vue\dist\vue.runtime.common.js:3281:10)
        at vm._c (D:\Projects\Vue\smart-landing\node_modules\vue\dist\vue.runtime.common.js:3569:42)
        at Proxy.render (src/components/ImageSlider/ImageSlider.vue?92ca:2:0)
        at VueComponent.Vue._render (D:\Projects\Vue\smart-landing\node_modules\vue\dist\vue.runtime.common.js:3605:22)
        at renderComponent (D:\Projects\Vue\smart-landing\node_modules\vue-server-renderer\build.js:6698:25)
        at RenderContext.renderNode (D:\Projects\Vue\smart-landing\node_modules\vue-server-renderer\build.js:6681:7)
    
    opened by krasevych 8
  • Bump qs from 6.4.0 to 6.4.1

    Bump qs from 6.4.0 to 6.4.1

    Bumps qs from 6.4.0 to 6.4.1.

    Changelog

    Sourced from qs's changelog.

    6.4.1

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] use safer-buffer instead of Buffer constructor
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Fix] utils.merge`: avoid a crash with a null target and a truthy non-array source
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] Clean up license text so it’s properly detected as BSD-3-Clause
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 486aa46 v6.4.1
    • 727ef5d [Fix] parse: ignore __proto__ keys (#428)
    • cd1874e [Robustness] stringify: avoid relying on a global undefined (#427)
    • 45e987c [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 90a3bce [meta] fix README.md (#399)
    • 9566d25 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • 74227ef Clean up license text so it’s properly detected as BSD-3-Clause
    • 35dfb22 [actions] backport actions from main
    • 7d4670f [Dev Deps] backport from main
    • 0485440 [Fix] use safer-buffer instead of Buffer constructor
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump loader-utils from 1.1.0 to 1.4.2

    Bump loader-utils from 1.1.0 to 1.4.2

    Bumps loader-utils from 1.1.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    v1.4.0

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    v1.3.0

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    v1.2.3

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    v1.2.2

    1.2.2 (2018-12-27)

    Bug Fixes

    ... (truncated)

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    1.2.2 (2018-12-27)

    Bug Fixes

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by evilebottnawi, a new releaser for loader-utils since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump async from 2.6.0 to 2.6.4

    Bump async from 2.6.0 to 2.6.4

    Bumps async from 2.6.0 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)

    v2.6.3

    • Updated lodash to squelch a security warning (#1675)

    v2.6.2

    • Updated lodash to squelch a security warning (#1620)

    v2.6.1

    • Updated lodash to prevent npm audit warnings. (#1532, #1533)
    • Made async-es more optimized for webpack users (#1517)
    • Fixed a stack overflow with large collections and a synchronous iterator (#1514)
    • Various small fixes/chores (#1505, #1511, #1527, #1530)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump pathval from 1.1.0 to 1.1.1

    Bump pathval from 1.1.0 to 1.1.1

    Bumps pathval from 1.1.0 to 1.1.1.

    Release notes

    Sourced from pathval's releases.

    v1.1.1

    Fixes a security issue around prototype pollution.

    Commits
    • db6c3e3 chore: v1.1.1
    • 7859e0e Merge pull request #60 from deleonio/fix/vulnerability-prototype-pollution
    • 49ce1f4 style: correct rule in package.json
    • c77b9d2 fix: prototype pollution vulnerability + working tests
    • 49031e4 chore: remove very old nodejs
    • 57730a9 chore: update deps and tool configuration
    • a123018 Merge pull request #55 from chaijs/remove-lgtm
    • 07eb4a8 Delete MAINTAINERS
    • a0147cd Merge pull request #54 from astorije/patch-1
    • aebb278 Center repo name on README
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by chai, a new releaser for pathval since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Convert JSX to string in template

    Convert JSX to string in template

    I have a table generator like so:

    data.fields = [
            {
              title: 'ID',
              field: (row) => (<router-link to="/sales/lead/${row.lead_id}">${row.lead_id}</router-link>),
              sort: 'lead.id',
            },
            {
              title: 'Lead Source',
              field: (row) => {
                return `
                    <div class="flex-basis-100">
                        <span class="font-semibold">${trimEllip(row.lead_source)}</span>
                    </div>
                    <div class="flex-basis-100 grow flex items-center justify-end lg:justify-start">
                      <span class="font-light">${trimEllip(row.lead_type)}</span>
                    </div>
                `;
              },
              sort: 'lead.lead_source',
              show: Tenant.get('settings.lead.index.show_lead_source_column', true),
            },
    

    the name field would contain whatever it needs to put inside td in a table. How would I write a program to take the jsx and convert it to html string like the field for Lead Source? Also, template string doesn't work inside JSX, any solutions?

    opened by rationalthinker1 0
Owner
vuejs
vuejs
A babel plugin that provides jsx syntax for vue3

vue-next-jsx This project has been archived because Vue will have an official version. Vue Next JSX Explorer A babel plugin that provides jsx syntax f

Chunyang Huo 89 Aug 11, 2022
Babel preset for transforming Vue JSX.

babel-preset-vue Babel preset for all Vue plugins. Install npm install -D babel-preset-vue CDN: UNPKG Usage In your .babelrc: { "presets": ["vue"] }

vuejs 85 Dec 19, 2022
JSX Syntactic Sugar Plugin for Vue Functional Components

DEPRECATED: Check https://github.com/vuejs/jsx instead JSX Functional Components for Vue JSX This babel plugin adds some syntactic sugar to JSX. Usage

Nick Messing 66 May 26, 2022
JSX Syntactic Sugar Plugin for v-model

DEPRECATED: Check https://github.com/vuejs/jsx instead JSX v-model for Vue JSX This babel plugin adds some syntactic sugar to JSX. Usage: npm i babel-

Nick Messing 154 Feb 28, 2022
TypeScript preset for Babel 7.x supporting Vue.js components written in TS

babel-preset-typescript-vue TypeScript preset for Babel 7.x supporting Vue.js components written in TS. A drop-in replacement for @babel/preset-typesc

Paweł Gabryelewicz 21 Aug 18, 2022
Jsx-runtime for vue 3

vue-jsx-runtime-examples vue-jsx-runtime examples

doly mood 1 Apr 8, 2022
Vue 3 jsx runtime support.

vue-jsx-runtime Vue 3 jsx runtime support. The background https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html . With new jsx ru

doly mood 10 Dec 2, 2022
CSS encapsulation solution for Vue JSX

babel-plugin-vue-jsx-scoped-css ?? CSS encapsulation solution for Vue JSX About This plugin is used to implement the css scoped effect of template in

minfive 2 Mar 20, 2021
JSX for Vue 3

Babel Plugin JSX for Vue 3.0 To add Vue JSX support. English | 简体中文 Installation Install the plugin with: npm install @vue/babel-plugin-jsx -D Then ad

vuejs 1.5k Jan 3, 2023
Shrimpit 🍤 is a small CLI analysis tool for checking unused JavaScript, JSX & Vue templates ES6 exports in your project.

Shrimpit ?? Shrimpit is a small CLI analysis tool for checking unused JavaScript, JSX & Vue templates ES6 exports in your project. Install npm npm i -

Davy Duperron 260 Nov 29, 2022
Event modifiers syntactic sugar for JSX

Event Modifiers for JSX DEPRECATED: Check https://github.com/vuejs/jsx instead This babel plugin adds some syntactic sugar to JSX. Usage: npm i babel-

Nick Messing 45 Aug 31, 2021
Automatically imports createElement as h when writing JSX and functional syntax that supports only setup() and template refs that supports setup()

babel-preset-vca-jsx Support for automatic import of createElement as h and setup functional component syntax and setup template refs Feature Automati

lululuffy 73 Aug 24, 2022
Internationalization plugin for Vue.js - fluent-vue is Vue.js integration for Fluent.js

Internationalization plugin for Vue.js - fluent-vue is Vue.js integration for Fluent.js

Ivan Demchuk 164 Dec 28, 2022
simple vue plugin to implement underscore

vue-underscore You know Underscore.js is a utility-belt library for JavaScript that provides support for the usual functional suspects (each, map, red

Haluk Keskin 18 Apr 28, 2021
Vue.js plugin that allows you to reference methods on parent classes

vue-super Provides a $super handler for accessing parent vue methods from a subclass. Behaves similarly to python's super implementation. vue-super is

Ryan P Kilby 34 Dec 1, 2022
A Vue.js plugin that protects routes based on user roles. Add your own authentication.

vue-router-user-roles A plugin for Vue.js SPAs that protects routes depending on user role. Add your own authentication. ?? Usage Check out the demo h

Anthony Gore 241 Sep 24, 2022
Component and HTML unique id generation plugin for Vue.js

vue-unique-id Vue.js plugin that generates component-scoped HTML identifiers for use in form inputs, labels, jQuery plugins, etc. This solves the prob

Bertrand Guay-Paquet 47 Nov 23, 2022
A Vue.js plugin to use webworkers in a simply way.

VueWorker A Vue.js plugin to use webworkers in a simply way. Changelog 1.2.1 Highlights: Fix README examples See full changelog here. Why Create and u

Israel Sant'Anna 562 Dec 3, 2022
Vue.js Plugin to facilitate Backbone integration

vue-backbone Vue.js Plugin to facilitate gradual migration from Backbone. Backbone Collections and Models can be safely integrated with Vue instances

Michael Gallagher 44 Dec 21, 2022