├── .editorconfig
├── .github
    ├── ISSUE_TEMPLATE
    │   └── bug-report.md
    └── workflows
    │   ├── main.yml
    │   ├── publish.yml
    │   └── publishBeta.yml
├── .gitignore
├── .npmrc
├── CONTRIBUTING.md
├── README.md
├── babel.config.js
├── doc
    ├── API.md
    ├── README-zh.md
    └── Usage.md
├── lib
    └── index.js
├── package.json
├── rollup.config.js
├── src
    ├── index.js
    ├── plugins
    │   ├── constants
    │   │   ├── globals.js
    │   │   └── preservedNames.js
    │   ├── parse-with-statement.js
    │   └── utils
    │   │   └── shouldPrependVM.js
    ├── renderCompiler.js
    ├── templateCompiler.js
    └── utils
    │   ├── merge.js
    │   └── string.js
├── test
    ├── compileRender.spec.js
    ├── compileTemplate.spec.js
    ├── options.spec.js
    └── utils
    │   └── function.js
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | end_of_line = lf
 7 | indent_size = 2
 8 | indent_style = space
 9 | insert_final_newline = true
10 | trim_trailing_whitespace = true
11 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug-report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: "[Bug] Please describe your issue"
 5 | labels: need triage
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | - [ ] Would you like to work on a fix?
11 | 
12 | ## Current behavior
13 | Fork
14 | 
15 | 1.<a href="https://stackblitz.com/edit/github-vue-template-babel-compiler-cnvbcs?file=components%2FTutorial.vue&terminal=dev" target="_blank">
16 | Nuxt.js Online Example Project
17 | </a>
18 | 
19 | 2.<a href="https://stackblitz.com/edit/vue-template-babel-compiler-vue-cli-project?file=src%2FApp.vue&terminal=serve" target="_blank">
20 | Vue-CLI Online Example Project
21 | </a>
22 | 
23 | to re-produce your error.
24 | 
25 | And Paste Link to here: Your New Re-Production project Link
26 | 
27 | This will help us fix it ASAP.
28 | 
29 | ``` js
30 | // or write your error code here
31 | ```
32 | 
33 | ## Expected behavior
34 | 
35 | 
36 | ## Extra
37 | - Usage: Vue-CLI || Nuxt.js || Webpack || ...
38 | - Node.js Version: ?
39 | - Babel Version: ?
40 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | # This is a basic workflow to help you get started with Actions
 2 | 
 3 | name: CI
 4 | 
 5 | # Controls when the workflow will run
 6 | on:
 7 |   # Triggers the workflow on push or pull request events but only for the branches
 8 |   push:
 9 |     branches:
10 |       - '**'
11 |   pull_request:
12 |     branches: [ main ]
13 | 
14 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel
15 | jobs:
16 |   # This workflow contains a single job called "test"
17 |   test:
18 |     # The type of runner that the job will run on
19 |     runs-on: ubuntu-latest
20 | 
21 |     # Steps represent a sequence of tasks that will be executed as part of the job
22 |     steps:
23 |       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
24 |       - uses: actions/checkout@v2
25 |       - name: Set node version to 14
26 |         uses: actions/setup-node@v2
27 |         with:
28 |           node-version: 14
29 |           cache: 'yarn'
30 |       - run: yarn install
31 |       - run: yarn test
32 | 


--------------------------------------------------------------------------------
/.github/workflows/publish.yml:
--------------------------------------------------------------------------------
 1 | name: 'PublishLatestVersion'
 2 | 
 3 | on:
 4 |   push:
 5 |     tags:
 6 |       - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
 7 | 
 8 | jobs:
 9 |   publish:
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - uses: actions/checkout@v1
13 |       - uses: actions/setup-node@v1
14 |         with:
15 |           node-version: 14
16 |       - run: yarn install --frozen-lockfile
17 |       - run: yarn test
18 |       - uses: JS-DevTools/npm-publish@v1
19 |         with:
20 |           token: ${{ secrets.NPM_TOKEN }}
21 | 


--------------------------------------------------------------------------------
/.github/workflows/publishBeta.yml:
--------------------------------------------------------------------------------
 1 | name: 'PublishBetaVersion'
 2 | on:
 3 |   push:
 4 |     tags:
 5 |       - 'beta-v*' # Push events to matching beta-v*, i.e. beta-v1.0, beta-v20.15.10
 6 | 
 7 | jobs:
 8 |   publish:
 9 |     runs-on: ubuntu-latest
10 |     steps:
11 |       - uses: actions/checkout@v1
12 |       - uses: actions/setup-node@v1
13 |         with:
14 |           node-version: 14
15 |       - run: yarn install --frozen-lockfile
16 |       - run: yarn test
17 |       - uses: JS-DevTools/npm-publish@v1
18 |         with:
19 |           token: ${{ secrets.NPM_TOKEN }}
20 |           tag: 'beta'
21 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | .idea
4 | yarn-error.log
5 | .yarn
6 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | registry=https://registry.npmjs.org
2 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
  1 | > Feel free to ask maintainers anything by [issue](https://github.com/JuniorTour/vue-template-babel-compiler/issues/new/choose)
  2 | 
  3 | - [Example: Fix issue #13 and Make a Pull Request](#example-fix-issue13-and-make-a-pull-request)
  4 |   * [1. Find or create an issue](#1-find-or-create-an-issue)
  5 |   * [2. Reproduce the issue](#2-reproduce-the-issue)
  6 |   * [3. Locate error](#3-locate-error)
  7 |     + [A. Chrome DevTool will start to listening](#a-chrome-devtool-will-start-to-listening)
  8 |     + [B. Open Chrome DevTool for Node.js form any chrome tab](#b-open-chrome-devtool-for-nodejs-form-any-chrome-tab)
  9 |     + [C. Use Chrome DevTool to debug this lib as usual](#c-use-chrome-devtool-to-debug-this-lib-as-usual)
 10 |   * [4. Find a solution](#4-find-a-solution)
 11 |   * [5. Fork this Repo and setup](#5-fork-this-repo-and-setup)
 12 |   * [6. Add test case and run `yarn test`](#6-add-test-case-and-run-yarn-test)
 13 |     + [Write test case is Easy!](#write-test-case-is-easy)
 14 |       - [A. find a `*.spec.js` file to write](#a-find-a-specjs-file-to-write)
 15 |       - [B. Copy the reproduce code snippet above with `jest API`](#b-copy-the-reproduce-code-snippet-above-with-jest-api)
 16 |       - [C. Run `yarn test`](#c-run-yarn-test)
 17 |   * [7. Git commit and Push](#7-git-commit-and-push)
 18 | 
 19 | 
 20 | # Example: Fix [issue#13](https://github.com/JuniorTour/vue-template-babel-compiler/commit/b5e8bd13e603bfb1b9dd87f1222b831fd2a68c49) and Make a Pull Request
 21 | 
 22 | ## 1. Find or create an issue
 23 | For example, we want to fix [issue #13](https://github.com/JuniorTour/vue-template-babel-compiler/issues/13),
 24 | 
 25 | Reporter said there will be an error:
 26 | 
 27 | `[Vue warn]: Error in render: "ReferenceError: _defineProperty is not defined"`
 28 | 
 29 | when write:
 30 | ``` js
 31 | <template>
 32 |     <div :class="{[`${componentCls}__single`]: true}">
 33 |     </div>
 34 | </template>
 35 | ```
 36 | 
 37 | The first thing we need to do is identify and reproduce the issue.
 38 | 
 39 | ## 2. Reproduce the issue
 40 | We can setup the Example Projects to reproduce the issue:
 41 | - [Example Project for Vue-CLI](https://github.com/JuniorTour/vue-template-babel-compiler-vue-cli-project)
 42 | - [Example Project for nuxt.js](https://github.com/JuniorTour/vue-template-babel-compiler-nuxt-project)
 43 | 
 44 | Follow its README to setup, usually we need:
 45 | ``` shell script
 46 | git clone https://github.com/JuniorTour/vue-template-babel-compiler-vue-cli-project.git
 47 | 
 48 | cd ./vue-template-babel-compiler-vue-cli-project
 49 | 
 50 | yarn install
 51 | 
 52 | yarn server // or yarn dev
 53 | ```
 54 | 
 55 | Then we can write the same code snippet in example project `.vue` files to reproduce error:
 56 | ``` html
 57 | <template>
 58 |     <div :class="{[`${componentCls}__single`]: true}">
 59 |     </div>
 60 | </template>
 61 | 
 62 | <script>
 63 |   export default {
 64 |     name: 'Tutorial',
 65 |     data() {
 66 |       return {
 67 |         componentCls: 'willThrowError'
 68 |       }
 69 |     }
 70 |   }
 71 | </script>
 72 | ```
 73 | 
 74 | If we can't reproduce, talk with the reporter and maintainer in the issue page.
 75 | 
 76 | 
 77 | ## 3. Locate error
 78 | This lib is used in Node.js environment.
 79 | 
 80 | So when we reproduce the error, we can use `node --inspect-brk file.js --runInBand` to debug the whole process of code execution.
 81 | 
 82 | There are also [built-in npm script in the Example Projects](https://github.com/JuniorTour/vue-template-babel-compiler-vue-cli-project/blob/main/package.json#L9):
 83 | ```shell script
 84 | yarn debugDev
 85 | ```
 86 | 
 87 | After execute `node --inspect-brk`,
 88 | 
 89 | ### A. Chrome DevTool will start to listening
 90 | ![image](https://user-images.githubusercontent.com/14243906/144751411-cc1a122c-91fe-46ad-a3f1-263d12c197d4.png)
 91 | 
 92 | ### B. Open Chrome DevTool for Node.js form any chrome tab
 93 | 
 94 | ![image](https://user-images.githubusercontent.com/14243906/144751826-4ed1b48d-2c92-4db3-ad64-1b65be406bc3.png)
 95 | 
 96 | 
 97 | ### C. Use Chrome DevTool to debug this lib as usual
 98 | ![image](https://user-images.githubusercontent.com/14243906/144751318-7f4149ba-c74a-42d1-97e2-d9b8deabfbeb.png)
 99 | 
100 | This npm package usually located in:
101 | `vue-template-babel-compiler-nuxt-project\node_modules\vue-template-babel-compiler\lib\index.js`
102 | 
103 | > Hotkey: (ctrl || command) + P can be used to search file in DevTool:
104 | 
105 | ![image](https://user-images.githubusercontent.com/14243906/144751635-ac73ff2c-2717-49ce-80f8-3606c768d2f9.png)
106 | 
107 | 
108 | ## 4. Find a solution
109 | After debug, I found the error above was caused by `computed property` in SFC `<template>` compiled with a helper functions (`_defineProperty()`) by `babel`
110 | 
111 | And I checked the [Doc of babel-plugin-transform-computed-properties](https://babeljs.io/docs/en/babel-plugin-transform-computed-properties), found this is by designed.
112 | 
113 | ![image](https://user-images.githubusercontent.com/14243906/144752181-99d9621b-c77e-43ed-bfc7-94375629633c.png)
114 | 
115 | But we don't need this helper function, with this function we will get `Error in render: "ReferenceError: _defineProperty is not defined"`.
116 | 
117 | So we should remove `defineProperty` from compiled result.
118 | 
119 | > Why we get this error:
120 | >
121 | > Because we only keep the code inner render function, and strip other part of babel compile result by [getFunctionBody()](https://github.com/JuniorTour/vue-template-babel-compiler/blob/c68a991be1fb91f26397ee5e61ef307a15f05d3c/src/templateCompiler.js#L18)
122 | 
123 | After search through [Google](https://google.com/), [stackoverflow.com/](https://stackoverflow.com/)
124 | 
125 | Then I found there is an option for babel to remove this helper function: [assumptions.setComputedProperties](https://babeljs.io/docs/en/babel-plugin-transform-computed-properties#loose)
126 | 
127 | After add this option to `vue-template-babel-compiler-nuxt-project\node_modules\vue-template-babel-compiler\lib\index.js ` during debug.
128 | 
129 | I found the error will NOT throw, and everything works fine.
130 | 
131 | So I think this is the solution, After merge my changes to `main branch`, the issue#13 will be fixed.
132 | 
133 | ## 5. Fork this Repo and setup
134 | 
135 | ``` shell script
136 | git clone https://github.com/JuniorTour/vue-template-babel-compiler.git
137 | 
138 | cd vue-template-babel-compiler
139 | 
140 | yarn install
141 | 
142 | yarn test // ensure your setup is right
143 | ```
144 | 
145 | 
146 | ## 6. Add test case and run `yarn test`
147 | Before we make a Pull Request, We need to ensure this change doesn't break other logic of this lib.
148 | 
149 | That is the reason why we need `Unit Test` based on [jest](https://jestjs.io/) .
150 | 
151 | When we add new code, it will be better to add some test case to ensure our new code never break by others later added.
152 | 
153 | ### Write test case is Easy!
154 | #### A. Find a `*.spec.js` file to write
155 | 
156 | #### B. Add new test case based on `jest API`
157 | 
158 | > If you are not familiar with [jest](https://jestjs.io/), its Doc and [Google](https://google.com/) will help you.
159 | 
160 | > You can also refer to the [existing cases of this project](https://github.com/JuniorTour/vue-template-babel-compiler/tree/main/test), or just copy the reproduce code snippet, and modify its content.
161 | ``` js
162 | test('should use simple assign for computed properties', () => {
163 |   // https://github.com/JuniorTour/vue-template-babel-compiler/issues/13
164 |   const {ast, render, staticRenderFns, tips, errors} = templateCompiler.compile(
165 |     '<div :class="{[`${foo}_bar`]: true}"></div>'
166 |   )
167 | 
168 |   expect(errors.length === 0).toBeTruthy()
169 |   expect(render).toMatch('class: (_class = {}, _class[`${_vm.foo}_bar`] = true, _class)')
170 | })
171 | ```
172 | 
173 | #### C. Check test case by run `yarn test`
174 | Make sure you see:
175 | ```shell script
176 | // ...
177 | Test Suites: M passed, M total
178 | Tests:       N passed, N total
179 | Snapshots:   0 total
180 | Time:        5.054s
181 | Ran all test suites.
182 | Done in 11.64s.
183 | ```
184 | 
185 | This means your code doesn't break anything :)
186 | 
187 | #### Debug test case:
188 | - add `debugger` to your test case code.
189 | - run `yarn debugTest` will start Chome DevTool like [3-locate-error](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/CONTRIBUTING.md#3-locate-error)
190 | 
191 | ## 7. Git commit and Push
192 | 
193 | Finally, commit your changes like [fix: use simple assign for computed properties (fix #13)](https://github.com/JuniorTour/vue-template-babel-compiler/commit/b5e8bd13e603bfb1b9dd87f1222b831fd2a68c49#) and `git push`.
194 | 
195 | > Don't forget Follow the [commit convention](https://www.conventionalcommits.org/en/v1.0.0/): `#{fix || chore || feat: xxx (fix #13)}`
196 | 
197 | > yarn.lock, package.json changes should be kept.
198 | 
199 | Create a new `Pull Request` fellow the tips from terminal and GitHub.
200 | 
201 | Then wait a moment, the maintainer will reply ASAP!
202 | 
203 | 
204 | 
205 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-template-babel-compiler &middot; [![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/JuniorTour/vue-template-babel-compiler) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/CONTRIBUTING.md)
  2 | 
  3 | Enable `Optional Chaining(?.)`, `Nullish Coalescing(??)` and many new ES syntax for [Vue.js SFC](https://vuejs.org/v2/guide/single-file-components.html) based on [Babel](https://babeljs.io/).
  4 | 
  5 | <p align="center">
  6 |   <a href="https://www.npmjs.com/package/vue-template-babel-compiler" target="_blank">
  7 |     <img
  8 |     src="https://img.shields.io/npm/dt/vue-template-babel-compiler"
  9 |     alt="Downloads">
 10 |   </a>
 11 |   <a href="https://www.npmjs.com/package/vue-template-babel-compiler" target="_blank">
 12 |     <img
 13 |     src="https://img.shields.io/github/size/JuniorTour/vue-template-babel-compiler/lib/index.js"
 14 |     alt="Size">
 15 |   </a>
 16 |   <a href="https://www.npmjs.com/package/vue-template-babel-compiler" target="_blank">
 17 |     <img
 18 |     src="https://img.shields.io/npm/v/vue-template-babel-compiler.svg?sanitize=true"
 19 |     alt="Version">
 20 |   </a>
 21 |   <a href="https://github.com/JuniorTour/vue-template-babel-compiler" target="_blank">
 22 |     <img
 23 |     src="https://img.shields.io/github/last-commit/JuniorTour/vue-template-babel-compiler?sanitize=true"
 24 |     alt="LastCommit">
 25 |   </a>
 26 |   <a href="https://github.com/JuniorTour/vue-template-babel-compiler/actions/workflows/main.yml" target="_blank">
 27 |     <img
 28 |     src="https://github.com/JuniorTour/vue-template-babel-compiler/actions/workflows/main.yml/badge.svg"
 29 |     alt="CIStatus">
 30 |   </a>
 31 | </p>
 32 | 
 33 | ## DEMO
 34 | <a href="https://stackblitz.com/edit/github-vue-template-babel-compiler-cnvbcs?file=components%2FTutorial.vue&terminal=dev" target="_blank">
 35 | Visit Online Playground →
 36 | </a>
 37 | 
 38 | ![DEMO](https://user-images.githubusercontent.com/14243906/127761300-076db45a-cdce-4fda-bd02-1f4fa96de6d8.png)
 39 | 
 40 | ## Features
 41 | - All features of [vue-template-compiler](https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#readme) && [vue-template-es2015-compiler](https://github.com/vuejs/vue-template-es2015-compiler)
 42 | - New ES syntax: `Optional Chaining`, `Bigint`, `Nullish Coalescing` and more
 43 | - Use babel to transpile vue render function, customization syntax, babel options customization
 44 | 
 45 | ## Usage
 46 | ### 1. Install
 47 | ``` bash
 48 | npm install vue-template-babel-compiler --save-dev
 49 | ```
 50 | 
 51 | ### 2. Config
 52 | #### 1. [Vue-CLI](https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader)
 53 | 
 54 | <a href="https://stackblitz.com/edit/vue-template-babel-compiler-vue-cli-project?file=src%2FApp.vue&terminal=serve" target="_blank">
 55 | Vue-CLI Online Example Project
 56 | </a>
 57 | 
 58 | ``` js
 59 | // vue.config.js
 60 | module.exports = {
 61 |   chainWebpack: config => {
 62 |     config.module
 63 |       .rule('vue')
 64 |       .use('vue-loader')
 65 |       .tap(options => {
 66 |         options.compiler = require('vue-template-babel-compiler')
 67 |         return options
 68 |       })
 69 |   }
 70 | }
 71 | ```
 72 | 
 73 | #### 2. [Nuxt.js](https://nuxtjs.org/docs/2.x/features/configuration#extend-webpack-to-load-audio-files)
 74 | 
 75 | <a href="https://stackblitz.com/edit/github-vue-template-babel-compiler-cnvbcs?file=components%2FTutorial.vue&terminal=dev" target="_blank">
 76 | Nuxt.js Online Example Project
 77 | </a>
 78 | 
 79 | ``` js
 80 | // nuxt.config.js
 81 | export default {
 82 |   // Build Configuration: https://go.nuxtjs.dev/config-build
 83 |   build: {
 84 |     loaders: {
 85 |       vue: {
 86 |         compiler: require('vue-template-babel-compiler')
 87 |       }
 88 |     },
 89 |   },
 90 |   // ...
 91 | }
 92 | ```
 93 | 
 94 | ## [Doc](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md)
 95 | - [vue-jest Usage](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md#1-vue-jest)
 96 | - [Webpack Usage](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md#2-webpack)
 97 | - [Vite Usage](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md#4-vite-usage)
 98 | - [VueUse && `<script setup>` Usage](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md#3-vueuse--script-setup)
 99 | - [babel options customization](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md#1-babel-options-customization)
100 | - [Functional Component Usage](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md#1-functional-component-usage)
101 | 
102 | ## [API Doc](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/API.md)
103 | 
104 | 
105 | ### Welcome for Issues && PR, see [CONTRIBUTING.md](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/CONTRIBUTING.md) for detail.
106 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     ['@babel/preset-env', {targets: {node: 12}}]
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/doc/API.md:
--------------------------------------------------------------------------------
  1 | # API of vue-template-babel-compiler
  2 | 
  3 | ## transpile(renderSourceCode: String, options: Object): String
  4 | - Desc:
  5 | 
  6 | Transpile es2015+ render function into standard es2015.
  7 | 
  8 | Same as [vue-template-es2015-compiler](https://github.com/vuejs/vue-template-es2015-compiler).
  9 | 
 10 | But use [Babel](https://babeljs.io/) to transpile.
 11 | 
 12 | - Params:
 13 |   - `renderSourceCode: String`: Source code of render function in string type.
 14 |   - `options: Object`: Available options for transpile and Babel.
 15 |     - (Work in progress, Welcome for contribution)
 16 | - Return Value:
 17 |   - String value, the `renderSourceCode: String` after transpile into standard es2015.
 18 | 
 19 | - Usage Demo:
 20 | ```js
 21 | const transpile = require('./lib')
 22 | 
 23 | const renderFunctionBody = `
 24 | var __render__ = function () {
 25 |   with (this) {
 26 |     return _c(
 27 |       'div', {attrs: {"id": "app"}},
 28 |       [
 29 |         _c('h1', [_v("Hello vue-template-babel-compiler")]),
 30 |         _v(" "),
 31 |         (optional?.chaining)
 32 |           ? _c('h2', [_v("\\n      Optional Chaining enabled: " + _s(optional?.chaining) + "\\n    ")])
 33 |           : _e()
 34 |       ]
 35 |     )
 36 |   }
 37 | }
 38 | `
 39 | 
 40 | const afterTranspile = transpile(renderFunctionBody, {transforms: {stripWithFunctional: false}})
 41 | 
 42 | // afterTranspile ===
 43 | var __render__ = function () {
 44 |   var _vm$optional, _vm$optional2;
 45 | 
 46 |   var _vm=this;
 47 |   var _h=_vm.$createElement;
 48 |   var _c=_vm._self._c||_h;
 49 | 
 50 |   return _c('div', {
 51 |     attrs: {
 52 |       "id": "app"
 53 |     }
 54 |   }, [
 55 |     _c('h1', [_vm._v("Hello vue-template-babel-compiler")]),
 56 |     _vm._v(" "),
 57 |     (_vm$optional = _vm.optional) !== null && _vm$optional !== void 0 && _vm$optional.chaining
 58 |       ? _c('h2', [
 59 |         _vm._v("\n      Optional Chaining enabled: " + _vm._s((_vm$optional2 = _vm.optional) === null || _vm$optional2 === void 0
 60 |           ? void 0
 61 |           : _vm$optional2.chaining) + "\n    ")])
 62 |       : _vm._e()
 63 |     ]
 64 |   );
 65 | }
 66 | 
 67 | // More: /test/compileRender.spec.js
 68 | ```
 69 | 
 70 | ## transpile.compile(templateSourceCode: String, options: Object): Object
 71 | - Desc:
 72 | 
 73 | Compile `<template>` of [Vue.js SFC](https://vuejs.org/v2/guide/single-file-components.html) into renders in standard es2015.
 74 | 
 75 | Same as [vue-template-compiler](https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler).
 76 | 
 77 | But use [Babel](https://babeljs.io/) to transpile.
 78 | 
 79 | - Params:
 80 |   - `templateSourceCode: String`: Source code of render function in string type.
 81 |   - `options: Object`: Available options for compile `<template>` and Babel.
 82 |     - (Work in progress, Welcome for contribution)
 83 | - Return Value: Object
 84 | ```ts
 85 | {
 86 |   ast: ?ASTElement, // parsed template elements to AST
 87 |   render: string,   // main render function code
 88 |   staticRenderFns: Array<string>, // render code for static sub trees, if any
 89 |   errors: Array<string> // template syntax errors, if any
 90 | }
 91 | ```
 92 | 
 93 | - Usage Demo:
 94 | ```js
 95 | const Compiler = require('./lib')
 96 | 
 97 | const {ast, render, staticRenderFns, tips, errors} = Compiler.compile(`<div>Hello vue-template-babel-compiler</div>`)
 98 | 
 99 | // render ===
100 | var _vm=this;
101 | var _h=_vm.$createElement;
102 | var _c=_vm._self._c||_h;
103 | 
104 | return _c('div', [_vm._v("Hello vue-template-babel-compiler")]);
105 | 
106 | // More: /test/compileTemplate.spec.js
107 | ```
108 | 
109 | ## More...
110 | 


--------------------------------------------------------------------------------
/doc/README-zh.md:
--------------------------------------------------------------------------------
 1 | # vue-template-babel-compiler
 2 | 使用 [Babel](https://babeljs.io/) 为 [Vue.js SFC](https://vuejs.org/v2/guide/single-file-components.html) 启用 `可选链(?.)`, `空值合并(??)` 等诸多 ES 新语法。
 3 | 
 4 | <p align="center">
 5 |   <a href="https://www.npmjs.com/package/vue-template-babel-compiler">
 6 |     <img
 7 |     src="https://img.shields.io/npm/v/vue-template-babel-compiler.svg?sanitize=true"
 8 |     alt="Version">
 9 |   </a>
10 |   <a href="https://github.com/JuniorTour/vue-template-babel-compiler">
11 |     <img
12 |     src="https://img.shields.io/github/last-commit/JuniorTour/vue-template-babel-compiler?sanitize=true"
13 |     alt="last-commit">
14 |   </a>
15 | </p>
16 | 
17 | ## 示例
18 | ![DEMO](https://user-images.githubusercontent.com/14243906/127761300-076db45a-cdce-4fda-bd02-1f4fa96de6d8.png)
19 | 
20 | ## 特性
21 | - [vue-template-compiler](https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#readme) && [vue-template-es2015-compiler](https://github.com/vuejs/vue-template-es2015-compiler) 的所有功能
22 | - 新语法: `Optional Chaining`, `Bigint`, `nullish coalescing` and more
23 | - 自定义语法、babel 插件等等...
24 | 
25 | ## 用法
26 | ### 1. 安装
27 | ``` bash
28 | npm install vue-template-babel-compiler --save-dev
29 | ```
30 | 
31 | ### 2. 配置
32 | #### 1. [Vue-CLI](https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader)
33 | [Vue-CLI 配置演示项目](https://github.com/JuniorTour/vue-template-babel-compiler-vue-cli-project)
34 | ``` js
35 | // vue.config.js
36 | module.exports = {
37 |     chainWebpack: config => {
38 |         config.module
39 |             .rule('vue')
40 |             .use('vue-loader')
41 |             .tap(options => {
42 |                 options.compiler = require('vue-template-babel-compiler')
43 |                 return options
44 |             })
45 |     }
46 | }
47 | ```
48 | 
49 | #### 2. [Nuxt.js](https://nuxtjs.org/docs/2.x/features/configuration#extend-webpack-to-load-audio-files)
50 | [Nuxt.js 配置演示项目](https://github.com/JuniorTour/vue-template-babel-compiler-nuxt-project)
51 | ``` js
52 | // nuxt.config.js
53 | export default {
54 |   // Build Configuration: https://go.nuxtjs.dev/config-build
55 |   build: {
56 |     loaders: {
57 |       vue: {
58 |         compiler: require('vue-template-babel-compiler')
59 |       }
60 |     },
61 |   },
62 |   // ...
63 | }
64 | ```
65 | 
66 | #### 3. [Webpack](https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader)
67 | ``` js
68 | // your webpack.config.js where config vue-loader
69 | module.exports = {
70 |   // ...
71 |   module: {
72 |     rules: [
73 |       {
74 |         test: /\.vue$/,
75 |         loader: 'vue-loader',
76 |         options: {
77 |             compiler: require('vue-template-babel-compiler')
78 |         }
79 |       }
80 |     ]
81 |   }
82 | }
83 | ```
84 | 
85 | ### 欢迎 Issues && PR.
86 | 


--------------------------------------------------------------------------------
/doc/Usage.md:
--------------------------------------------------------------------------------
  1 | # Usage
  2 | 
  3 | ##### Table of Contents
  4 | - [Usage Detail](#Usage-Detail)
  5 |   - [vue-jest Usage](#1-vue-jest)
  6 |   - [Webpack Usage](#2-Webpack)
  7 |   - [VueUse && `<script setup>`](#3-vueuse--script-setup)
  8 | - [Options](#Options)
  9 |   - [babel options customization](#1-babel-options-customization)
 10 | - [Caveats](#Caveats)
 11 |   - [Functional Component Usage](#1-Functional-Component-Usage)
 12 |   - [Only Substitute `vue-template-es2015-compiler`](#2-only-substitute-vue-template-es2015-compiler)
 13 |   - [Prevent been compiled by other babel config](#3-Prevent-been-compiled-by-other-babel-config)
 14 | 
 15 | ## Usage Detail
 16 | 
 17 | #### 1. [vue-jest](https://github.com/JuniorTour/vue-template-babel-compiler/issues/8)
 18 | - [vue-jest@26 DEMO commit](https://github.com/JuniorTour/vue-template-babel-compiler-nuxt-project/commit/633ac52a7787fb416e4b35a8074a8d9c6a71b43c)
 19 | - [vue-jest@28 DEMO commit](https://github.com/JuniorTour/vue-template-babel-compiler-nuxt-project/commit/4c475274cc5eedf4aa918cca53e29bd346af197a)
 20 | 
 21 | 
 22 | ``` js
 23 | // jest.config.js
 24 | module.exports = {
 25 |   testEnvironment: "jsdom",
 26 |   moduleNameMapper: {
 27 |     "^vue$": "vue/dist/vue.common.js"
 28 |   },
 29 |   moduleFileExtensions: ["js", "vue", "json"],
 30 |   transform: {
 31 |     "^.+\\.js$": "babel-jest",
 32 |     ".*\\.(vue)$": "@vue/vue2-jest"
 33 |   },
 34 |   globals: {
 35 |     'vue-jest': {
 36 |       templateCompiler: {
 37 |         compiler: require('vue-template-babel-compiler')
 38 |       }
 39 |     }
 40 |   }
 41 | };
 42 | ```
 43 | 
 44 | #### 2. [Webpack](https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader)
 45 | ``` js
 46 | // your webpack.config.js where config vue-loader
 47 | module.exports = {
 48 |   // ...
 49 |   module: {
 50 |     rules: [
 51 |       {
 52 |         test: /\.vue$/,
 53 |         loader: 'vue-loader',
 54 |         options: {
 55 |             compiler: require('vue-template-babel-compiler')
 56 |         }
 57 |       }
 58 |     ]
 59 |   }
 60 | }
 61 | ```
 62 | 
 63 | 
 64 | #### 3. [VueUse && `<script setup>`](https://github.com/JuniorTour/vue-template-babel-compiler-VueUse-Example)
 65 | 
 66 | Example Project: https://github.com/JuniorTour/vue-template-babel-compiler-VueUse-Example
 67 | 
 68 | ```js
 69 | // vue.config.js
 70 | module.exports = {
 71 |     parallel: false,  // disable thread-loader, which is not compactible with this plugin
 72 |     chainWebpack: config => {
 73 |         // disable type check and let `vue-tsc` handles it
 74 |         config.plugins.delete('fork-ts-checker')
 75 |         config.module
 76 |             .rule('vue')
 77 |             .use('vue-loader')
 78 |             .tap(options => {
 79 |                 options.compiler = require('vue-template-babel-compiler')
 80 |                 return options
 81 |             })
 82 |     },
 83 |     configureWebpack: {
 84 |         plugins: [
 85 |             require('unplugin-vue2-script-setup/webpack')({ /* options */ }),
 86 |         ],
 87 |     },
 88 | }
 89 | ```
 90 | 
 91 | 
 92 | #### 4. Vite usage
 93 | 
 94 | ##### 1. With `vite-plugin-vue2` plugin (https://github.com/vitejs/vite-plugin-vue2)
 95 | 
 96 | ``` js
 97 | // vite.config.js
 98 | import { defineConfig } from "vite";
 99 | import { createVuePlugin } from "vite-plugin-vue2";
100 | 
101 | export default defineConfig({
102 |   plugins: [
103 |     createVuePlugin({
104 |       jsx: true,
105 |       vueTemplateOptions: {
106 |         compiler: require('vue-template-babel-compiler'),
107 |       },
108 |     }),
109 |   ],
110 | });
111 | ```
112 | 
113 | ##### 2. With `vite-plugin-vue2` plugin (https://www.npmjs.com/package/vite-plugin-vue2)
114 | 
115 | This plugin contains `vue-template-babel-compiler@1.2.0` out of box: https://github.com/underfin/vite-plugin-vue2/blob/master/package.json#L71
116 | 
117 | Just add `vite-plugin-vue2` plugin, new syntax including `optional chaining` will work.
118 | 
119 | If you need new version, just `npm install vue-template-babel-compiler@latest`.
120 | 
121 | 
122 | ## Options
123 | 
124 | ### 1. babel options customization
125 | 
126 | We can customize babel options for this compiler by `babelOptions` property:
127 | ```js
128 | // vue.config.js
129 | module.exports = {
130 |     chainWebpack: config => {
131 |         config.module
132 |             .rule('vue')
133 |             .use('vue-loader')
134 |             .tap(options => {
135 |                 options.compilerOptions.babelOptions = {
136 |                     filename: 'newFilename',
137 |                     newProp: true,
138 |                     assumptions: {
139 |                       additional: 'additional'
140 |                     },
141 |                     plugins: [
142 |                       'newPlugin'
143 |                     ]
144 |                 }
145 |                 options.compiler = require('vue-template-babel-compiler')
146 |                 return options
147 |             })
148 |     }
149 | }
150 | 
151 | // nuxt.config.js
152 | export default {
153 |   // Build Configuration: https://go.nuxtjs.dev/config-build
154 |   build: {
155 |     loaders: {
156 |       vue: {
157 |         compilerOptions: {
158 |           babelOptions: {
159 |             /* ... */
160 |           },
161 |         },
162 |         compiler: require('vue-template-babel-compiler')
163 |       }
164 |     },
165 |   },
166 |   // ...
167 | }
168 | ```
169 | 
170 | This `babelOptions` property will merge with [default options](https://github.com/JuniorTour/vue-template-babel-compiler/blob/b49006bbf3913230bc604203452404b011a443f0/src/renderCompiler.js#L15-L35)
171 | 
172 | 
173 | ## Caveats
174 | 
175 | ### 1. Functional Component Usage
176 | 
177 | We have to rename `functional component .vue file` to contain `.functional` mark.
178 | 
179 | > [Example Functional Component .vue file link](https://github.com/JuniorTour/vue-template-babel-compiler-vue-cli-project/blob/main/src/components/FunctionalComponent.functional.vue)
180 | 
181 | You can customize the mark by `functionalComponentFileIdentifier` option :
182 | ``` js
183 |   // where you config to use vue-template-babel-compiler, eg: vue.config.js
184 |   .tap(options => {
185 |   options.functionalComponentFileIdentifier = 'whateverYouWantToMarkFunctionalComponentFile'
186 |   options.compiler = require('vue-template-babel-compiler')
187 |     return options
188 |   })
189 | ```
190 | 
191 | See [issue#10](https://github.com/JuniorTour/vue-template-babel-compiler/issues/10) for detail and feedback.
192 | 
193 | 
194 | ### 2. Only Substitute `vue-template-es2015-compiler`
195 | 
196 | This lib can be used to replace [vue-template-es2015-compiler](https://github.com/vuejs/vue-template-es2015-compiler) only.
197 | 
198 | Please refer to: [API Doc: transpile(renderSourceCode: String, options: Object): String](https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/API.md#transpilerendersourcecode-string-options-object-string)
199 | 
200 | eg:
201 | ```shell script
202 | #!/bin/sh
203 | mv node_modules/vue-template-es2015-compiler node_modules/vue-template-es2015-compiler-deprecated
204 | mv node_modules/vue-template-babel-compiler node_modules/vue-template-es2015-compiler
205 | echo 'Use vue-template-babel-compiler Success!'
206 | ```
207 | 
208 | ### 3. Prevent been compiled by other babel config
209 | 
210 | Sometimes, we want the Vue `<template>` only compiled by this compiler's config, not babel config from others.
211 | 
212 | For example: [Issue #13: call typeof error](https://github.com/JuniorTour/vue-template-babel-compiler/issues/23).
213 | 
214 | In this scenario, we need prevent this compiler uses [babel config chain](https://github.com/babel/babel/blob/b2d9156cc62d37f4c522c9505a00f50b99a1eb74/packages/babel-core/src/config/partial.ts#L139), and don't compile `typeof` keyword by `@babel/plugin-transform-typeof-symbol` from `@vue/cli-plugin-babel/preset`.
215 | 
216 | So we can `exclude` vue template from babel config:
217 | ``` js
218 | // babel.config.js
219 | module.exports = {
220 |   presets: [
221 |     '@vue/cli-plugin-babel/preset'
222 |   ],
223 |   exclude: 'VueTemplateBabelCompiler'
224 | }
225 | ```
226 | 
227 | After this config, this compiler will not use `@vue/cli-plugin-babel/preset` to compile Vue `<template>`, then the `typeof` keyword will not run into error.
228 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // allowed globals in Vue render functions.
  4 | // TODO add option to customize
  5 | const GLOBALS_IN_TEMPLATE = ["BigInt", "Infinity", "undefined", "NaN", "isFinite", "isNaN", "parseFloat", "parseInt", "decodeURI", "decodeURIComponent", "encodeURI", "encodeURIComponent", "Math", "Number", "Date", "Array", "Object", "Boolean", "String", "RegExp", "Map", "Set", "JSON", "Intl", "require", "arguments", "_vm", "_h", "_c"];
  6 | const hash = Object.create(null);
  7 | GLOBALS_IN_TEMPLATE.forEach(name => {
  8 |   hash[name] = true;
  9 | });
 10 | 
 11 | /*
 12 | Interpret Bubble's logic:
 13 | https://github.com/yyx990803/buble/blob/f5996c9cdb2e61cb7dddf0f6c6f25d0f3f600055/src/utils/prependVm.js
 14 | */
 15 | 
 16 | const t$1 = require('@babel/types');
 17 | 
 18 | function inScope(scope, nodeName) {
 19 |   if (!scope || !scope.bindings) return false;
 20 |   let ret = false;
 21 |   let cur = scope;
 22 | 
 23 |   while (cur && !ret) {
 24 |     ret = cur.bindings[nodeName];
 25 |     cur = cur.parent;
 26 |   }
 27 | 
 28 |   return ret;
 29 | }
 30 | 
 31 | function shouldPrependVm(path) {
 32 |   var _scope$path, _scope$block$params;
 33 | 
 34 |   const parent = path.parent;
 35 |   const node = path.node;
 36 |   const nodeName = node.name;
 37 |   const scope = path.scope;
 38 | 
 39 |   if ( // not function parameter destructuring
 40 |   ((_scope$path = scope.path) === null || _scope$path === void 0 ? void 0 : _scope$path.listKey) !== 'params' // not a id of a Declaration:
 41 |   && !(t$1.isVariableDeclarator(parent) && parent.id === node) // not a param of a function
 42 |   && !(t$1.isFunctionExpression(parent) && parent.params.indexOf(node) > -1) // not a property of OptionalMemberExpression
 43 |   && !(t$1.isOptionalMemberExpression(parent) && parent.property === node && !parent.computed) // not a key of Property
 44 |   && !(t$1.isObjectProperty(parent) && parent.key === node && !parent.computed) // not a property of a MemberExpression
 45 |   && !(t$1.isMemberExpression(parent) && parent.property === node && !parent.computed) // not in an Array destructure pattern
 46 |   && !t$1.isArrayPattern(parent) // not in an Object destructure pattern
 47 |   && !t$1.isObjectPattern(parent.parent) // skip globals + commonly used shorthands
 48 |   && !hash[nodeName] // not cur function param
 49 |   && !(scope !== null && scope !== void 0 && (_scope$block$params = scope.block.params) !== null && _scope$block$params !== void 0 && _scope$block$params.find(node => node.name === nodeName)) // not already in scope
 50 |   && !inScope(scope, nodeName) && !t$1.isObjectMethod(path.container)) {
 51 |     return true;
 52 |   }
 53 | }
 54 | 
 55 | const vueModelName = '_vm';
 56 | const WithStatementReplaceComment = '__VUE_TEMPLATE_BABEL_COMPILER_WITH_PLACEHOLDER__';
 57 | 
 58 | const t = require('@babel/types');
 59 | 
 60 | const nestedVisitor = {
 61 |   Identifier(path) {
 62 |     if (shouldPrependVm(path)) {
 63 |       path.replaceWith(t.memberExpression(t.identifier(vueModelName), path.node));
 64 |     }
 65 |   }
 66 | 
 67 | };
 68 | function parseWithStatementToVm() {
 69 |   return {
 70 |     visitor: {
 71 |       WithStatement(path) {
 72 |         // only traverse children ast of `with(this) {...}` part,
 73 |         // just like the `identifier.program.inWith` of bubble's logic
 74 |         path.scope.addGlobal(t.identifier(vueModelName));
 75 |         path.traverse(nestedVisitor);
 76 |         const withStatementReturnBody = path.node.body.body[0];
 77 |         t.addComment(withStatementReturnBody, "leading", WithStatementReplaceComment);
 78 |         path.replaceWithMultiple([withStatementReturnBody]);
 79 |       }
 80 | 
 81 |     }
 82 |   };
 83 | }
 84 | 
 85 | function escapeRegExp(string) {
 86 |   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 87 | }
 88 | 
 89 | const merge = require('deepmerge');
 90 | 
 91 | function mergeOptions(oldOptions, newOptions) {
 92 |   return merge(oldOptions, newOptions);
 93 | }
 94 | 
 95 | const babel = require('@babel/core');
 96 | 
 97 | const matchWithRegex = new RegExp(escapeRegExp(`/*${WithStatementReplaceComment}*/`), 'g');
 98 | const withReplacement = 'var _vm=this;\n  var _h=_vm.$createElement;\n  var _c=_vm._self._c||_h;\n';
 99 | const functionalWithReplacement = 'var _c=_vm._c;\n';
100 | function renderCompiler(code, options) {
101 |   var _options$transforms;
102 | 
103 |   // TODO add customize individual options
104 |   const isFunctional = options === null || options === void 0 ? void 0 : (_options$transforms = options.transforms) === null || _options$transforms === void 0 ? void 0 : _options$transforms.stripWithFunctional;
105 |   const output = babel.transformSync(code, mergeOptions({
106 |     filename: 'VueTemplateBabelCompiler',
107 |     // not enable strict mode, in order to parse WithStatement
108 |     sourceType: 'script',
109 |     assumptions: {
110 |       setComputedProperties: true,
111 |       iterableIsArray: true
112 |     },
113 |     plugins: [require.resolve('@babel/plugin-transform-computed-properties'), require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'), require.resolve('@babel/plugin-proposal-optional-chaining'), require.resolve('@babel/plugin-transform-block-scoping'), require.resolve('@babel/plugin-transform-destructuring'), require.resolve("@babel/plugin-transform-spread"), [require.resolve("@babel/plugin-proposal-object-rest-spread"), {
114 |       loose: true,
115 |       useBuiltIns: true
116 |     }], require.resolve('@babel/plugin-transform-arrow-functions'), require.resolve('@babel/plugin-transform-parameters'), parseWithStatementToVm]
117 |   }, (options === null || options === void 0 ? void 0 : options.babelOptions) || {}));
118 |   return output.code.replace(matchWithRegex, isFunctional ? functionalWithReplacement : withReplacement);
119 | }
120 | 
121 | const templateCompiler = require('vue-template-compiler');
122 | 
123 | function toFunction(code, isFunctional) {
124 |   return `function (${isFunctional ? `_h,_vm` : ``}) {${code}}`;
125 | }
126 | 
127 | function getMarkRange(code, startMark, endMark) {
128 |   if (!code || !code.indexOf) {
129 |     // TODO handle edge error
130 |     return false;
131 |   }
132 | 
133 |   return {
134 |     start: code.indexOf(startMark) + 1,
135 |     end: code.lastIndexOf(endMark)
136 |   };
137 | }
138 | 
139 | function getFunctionBody(code) {
140 |   const range = getMarkRange(code, '{', '}');
141 |   return code.substring(range.start, range.end);
142 | }
143 | 
144 | function getArrayItems(code) {
145 |   const range = getMarkRange(code, '[', ']');
146 |   return code.substring(range.start, range.end) // after babel compile, will add '\n' to after and end of /**/
147 |   .split(staticRenderFnsSpliter + '\n').filter(functionBodyStr => Boolean(functionBodyStr)).map(getFunctionBody);
148 | }
149 | 
150 | const renderSeparator = '/* renderSeparator */';
151 | const staticRenderFnsSpliter = '/* staticRenderFnsSpliter */';
152 | function compileTemplate(source, options) {
153 |   var _options, _options$filename, _options2;
154 | 
155 |   const isFunctional = (_options = options) === null || _options === void 0 ? void 0 : (_options$filename = _options.filename) === null || _options$filename === void 0 ? void 0 : _options$filename.includes(((_options2 = options) === null || _options2 === void 0 ? void 0 : _options2.functionalComponentFileIdentifier) || '.functional');
156 |   const {
157 |     ast,
158 |     render,
159 |     staticRenderFns,
160 |     tips,
161 |     errors
162 |   } = templateCompiler.compile(source, options); // TODO rm semicolon && \n : https://babeljs.io/docs/en/options#minified
163 | 
164 |   let code = `var render = ${toFunction(render, isFunctional)}` + ';' + renderSeparator;
165 |   const hasStaticRenders = staticRenderFns.length;
166 | 
167 |   if (hasStaticRenders) {
168 |     code += `var staticRenderFns = [${staticRenderFns.map(render => toFunction(render, isFunctional) + staticRenderFnsSpliter)}]`;
169 |   }
170 | 
171 |   if (!options) {
172 |     options = {};
173 |   }
174 | 
175 |   options.transforms = {
176 |     stripWithFunctional: isFunctional
177 |   };
178 |   const [compiledRender, compiledStaticRenders] = renderCompiler(code, options).split(renderSeparator);
179 |   return {
180 |     ast,
181 |     render: getFunctionBody(compiledRender),
182 |     staticRenderFns: hasStaticRenders ? getArrayItems(compiledStaticRenders) : staticRenderFns,
183 |     tips,
184 |     errors
185 |   };
186 | }
187 | function extendTemplateCompiler(obj) {
188 |   for (const key in templateCompiler) {
189 |     obj[key] = templateCompiler[key];
190 |   }
191 | 
192 |   obj.ssrCompile = compileTemplate;
193 |   obj.compile = compileTemplate;
194 | }
195 | 
196 | const transpile = renderCompiler; // enhance vue-template-compiler with babel:
197 | 
198 | extendTemplateCompiler(transpile); // babel prepend vm plugin:
199 | 
200 | transpile.parseWithStatementToVmPlugin = parseWithStatementToVm;
201 | module.exports = transpile;
202 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-template-babel-compiler",
 3 |   "version": "2.0.0",
 4 |   "description": "Post compiler for Vue template render functions to support ES features with Babel",
 5 |   "main": "lib/index.js",
 6 |   "author": "JuniorTour",
 7 |   "license": "MIT",
 8 |   "files": [
 9 |     "lib/index.js"
10 |   ],
11 |   "engines": {
12 |     "node": ">=14.0.0"
13 |   },
14 |   "scripts": {
15 |     "build": "rollup -c rollup.config.js",
16 |     "test": " npm run build && jest",
17 |     "debugTest": "npm run build && node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand",
18 |     "prepublishOnly": "jest && npm run build"
19 |   },
20 |   "jest": {
21 |     "testPathIgnorePatterns": [
22 |       "/node_modules/"
23 |     ]
24 |   },
25 |   "devDependencies": {
26 |     "@babel/preset-env": "^7.14.7",
27 |     "@rollup/plugin-babel": "^5.3.0",
28 |     "@rollup/plugin-node-resolve": "^13.0.0",
29 |     "jest": "^24.1.0",
30 |     "rollup": "^2.53.0",
31 |     "vue": "^2.6.0",
32 |     "vue-template-compiler": "^2.6.0"
33 |   },
34 |   "peerDependencies": {
35 |     "vue-template-compiler": "^2.6.0"
36 |   },
37 |   "dependencies": {
38 |     "@babel/core": "^7.14.3",
39 |     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
40 |     "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
41 |     "@babel/plugin-proposal-optional-chaining": "^7.14.2",
42 |     "@babel/plugin-transform-arrow-functions": "^7.14.5",
43 |     "@babel/plugin-transform-block-scoping": "^7.14.5",
44 |     "@babel/plugin-transform-computed-properties": "^7.14.5",
45 |     "@babel/plugin-transform-destructuring": "^7.14.5",
46 |     "@babel/plugin-transform-parameters": "^7.14.5",
47 |     "@babel/plugin-transform-spread": "^7.14.5",
48 |     "@babel/types": "^7.14.5",
49 |     "deepmerge": "^4.2.2"
50 |   },
51 |   "keywords": [
52 |     "vuejs",
53 |     "babel",
54 |     "sfc",
55 |     "vue-template",
56 |     "vue-template-babel"
57 |   ],
58 |   "repository": "https://github.com/JuniorTour/vue-template-babel-compiler"
59 | }
60 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import resolve from '@rollup/plugin-node-resolve';
 2 | import babel from '@rollup/plugin-babel';
 3 | 
 4 | export default {
 5 |     input: './src/index.js',
 6 |     output: {
 7 |         file: 'lib/index.js',
 8 |         format: 'cjs'
 9 |     },
10 |     plugins: [
11 |         resolve(),
12 |         babel({ babelHelpers: 'bundled' })
13 |     ]
14 | };
15 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import {renderCompiler} from "./renderCompiler"
 2 | import {extendTemplateCompiler} from "./templateCompiler"
 3 | import parseWithStatementToVm from "./plugins/parse-with-statement";
 4 | 
 5 | // vue-es2015-compiler substitution:
 6 | const transpile = renderCompiler
 7 | 
 8 | // enhance vue-template-compiler with babel:
 9 | extendTemplateCompiler(transpile)
10 | 
11 | // babel prepend vm plugin:
12 | transpile.parseWithStatementToVmPlugin = parseWithStatementToVm
13 | 
14 | module.exports = transpile
15 | 


--------------------------------------------------------------------------------
/src/plugins/constants/globals.js:
--------------------------------------------------------------------------------
 1 | // allowed globals in Vue render functions.
 2 | // TODO add option to customize
 3 | const GLOBALS_IN_TEMPLATE = [
 4 |   "BigInt",
 5 |   "Infinity",
 6 |   "undefined",
 7 |   "NaN",
 8 |   "isFinite",
 9 |   "isNaN",
10 |   "parseFloat",
11 |   "parseInt",
12 |   "decodeURI",
13 |   "decodeURIComponent",
14 |   "encodeURI",
15 |   "encodeURIComponent",
16 |   "Math",
17 |   "Number",
18 |   "Date",
19 |   "Array",
20 |   "Object",
21 |   "Boolean",
22 |   "String",
23 |   "RegExp",
24 |   "Map",
25 |   "Set",
26 |   "JSON",
27 |   "Intl",
28 |   "require",
29 |   "arguments",
30 |   "_vm",
31 |   "_h",
32 |   "_c"
33 | ]
34 | 
35 | const hash = Object.create(null)
36 | GLOBALS_IN_TEMPLATE.forEach(name => {
37 |   hash[name] = true
38 | })
39 | 
40 | export default hash
41 | 


--------------------------------------------------------------------------------
/src/plugins/constants/preservedNames.js:
--------------------------------------------------------------------------------
1 | export const vueModelName = '_vm'
2 | export const createEleName = '_h'
3 | export const renderFuncName = '_c'
4 | export const WithStatementReplaceComment = '__VUE_TEMPLATE_BABEL_COMPILER_WITH_PLACEHOLDER__'
5 | 


--------------------------------------------------------------------------------
/src/plugins/parse-with-statement.js:
--------------------------------------------------------------------------------
 1 | import {shouldPrependVm} from "./utils/shouldPrependVM";
 2 | import {vueModelName, WithStatementReplaceComment} from "./constants/preservedNames";
 3 | 
 4 | const t = require('@babel/types');
 5 | 
 6 | const nestedVisitor = {
 7 |   Identifier(path) {
 8 |     if (shouldPrependVm(path)) {
 9 |       path.replaceWith(t.memberExpression(t.identifier(vueModelName), path.node))
10 |     }
11 |   }
12 | };
13 | 
14 | export default function parseWithStatementToVm() {
15 |   return {
16 |     visitor: {
17 |       WithStatement(path) {
18 |         // only traverse children ast of `with(this) {...}` part,
19 |         // just like the `identifier.program.inWith` of bubble's logic
20 |         path.scope.addGlobal(t.identifier(vueModelName));
21 |         path.traverse(nestedVisitor);
22 |         const withStatementReturnBody = path.node.body.body[0]
23 |         t.addComment(withStatementReturnBody, "leading", WithStatementReplaceComment)
24 |         path.replaceWithMultiple([withStatementReturnBody])
25 |       }
26 |     },
27 |   };
28 | }
29 | 


--------------------------------------------------------------------------------
/src/plugins/utils/shouldPrependVM.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Interpret Bubble's logic:
 3 | https://github.com/yyx990803/buble/blob/f5996c9cdb2e61cb7dddf0f6c6f25d0f3f600055/src/utils/prependVm.js
 4 | */
 5 | import globals from '../constants/globals'
 6 | const t = require('@babel/types')
 7 | 
 8 | function inScope(scope, nodeName) {
 9 |   if (!scope || !scope.bindings) return false
10 | 
11 |   let ret = false
12 |   let cur = scope
13 |   while (cur && !ret) {
14 |     ret = cur.bindings[nodeName]
15 |     cur = cur.parent
16 |   }
17 | 
18 |   return ret
19 | }
20 | 
21 | export function shouldPrependVm(path) {
22 |   const parent = path.parent
23 |   const node = path.node
24 |   const nodeName = node.name
25 |   const scope = path.scope
26 | 
27 |   if (
28 |     // not function parameter destructuring
29 |     scope.path?.listKey !== 'params'
30 |     // not a id of a Declaration:
31 |     && !(t.isVariableDeclarator(parent) && parent.id === node)
32 |     // not a param of a function
33 |     && !(t.isFunctionExpression(parent) && parent.params.indexOf(node) > -1)
34 |     // not a property of OptionalMemberExpression
35 |     && !(t.isOptionalMemberExpression(parent) && parent.property === node && !parent.computed)
36 |     // not a key of Property
37 |     && !(t.isObjectProperty(parent) && parent.key === node && !parent.computed)
38 |     // not a property of a MemberExpression
39 |     && !(t.isMemberExpression(parent) && parent.property === node && !parent.computed)
40 |     // not in an Array destructure pattern
41 |     && !t.isArrayPattern(parent)
42 |     // not in an Object destructure pattern
43 |     && !t.isObjectPattern(parent.parent)
44 |     // skip globals + commonly used shorthands
45 |     && !globals[nodeName]
46 |     // not cur function param
47 |     && !scope?.block.params?.find(node => node.name === nodeName)
48 |     // not already in scope
49 |     && !inScope(scope, nodeName)
50 |     && !t.isObjectMethod(path.container)
51 |   ) {
52 |     return true
53 |   }
54 | }
55 | 
56 | 


--------------------------------------------------------------------------------
/src/renderCompiler.js:
--------------------------------------------------------------------------------
 1 | import parseWithStatementToVm from './plugins/parse-with-statement'
 2 | import {WithStatementReplaceComment} from "./plugins/constants/preservedNames"
 3 | import {escapeRegExp} from "./utils/string"
 4 | import {mergeOptions} from "./utils/merge";
 5 | 
 6 | const babel = require('@babel/core')
 7 | 
 8 | const matchWithRegex = new RegExp(escapeRegExp(`/*${WithStatementReplaceComment}*/`), 'g')
 9 | const withReplacement = 'var _vm=this;\n  var _h=_vm.$createElement;\n  var _c=_vm._self._c||_h;\n'
10 | const functionalWithReplacement = 'var _c=_vm._c;\n'
11 | 
12 | export function renderCompiler(code, options) {
13 |   // TODO add customize individual options
14 |   const isFunctional = options?.transforms?.stripWithFunctional
15 | 
16 |   const output = babel.transformSync(code, mergeOptions({
17 |     filename: 'VueTemplateBabelCompiler',
18 |     // not enable strict mode, in order to parse WithStatement
19 |     sourceType: 'script',
20 |     assumptions: {
21 |       setComputedProperties: true,
22 |       iterableIsArray: true,
23 |     },
24 |     plugins: [
25 |       require.resolve('@babel/plugin-transform-computed-properties'),
26 |       require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
27 |       require.resolve('@babel/plugin-proposal-optional-chaining'),
28 |       require.resolve('@babel/plugin-transform-block-scoping'),
29 |       require.resolve('@babel/plugin-transform-destructuring'),
30 |       require.resolve("@babel/plugin-transform-spread"),
31 |       [require.resolve("@babel/plugin-proposal-object-rest-spread"), { loose: true, useBuiltIns: true }],
32 |       require.resolve('@babel/plugin-transform-arrow-functions'),
33 |       require.resolve('@babel/plugin-transform-parameters'),
34 |       parseWithStatementToVm,
35 |     ],
36 |   },
37 |   options?.babelOptions || {})
38 |   )
39 | 
40 |   return output.code.replace(matchWithRegex, isFunctional ? functionalWithReplacement : withReplacement)
41 | }
42 | 


--------------------------------------------------------------------------------
/src/templateCompiler.js:
--------------------------------------------------------------------------------
 1 | import {renderCompiler} from "./renderCompiler"
 2 | 
 3 | const templateCompiler = require('vue-template-compiler')
 4 | 
 5 | function toFunction(code, isFunctional) {
 6 |   return `function (${isFunctional ? `_h,_vm` : ``}) {${code}}`
 7 | }
 8 | function getMarkRange(code, startMark, endMark) {
 9 |   if (!code || !code.indexOf) {
10 |     // TODO handle edge error
11 |     return false
12 |   }
13 |   return {
14 |     start: code.indexOf(startMark) + 1,
15 |     end: code.lastIndexOf(endMark)
16 |   }
17 | }
18 | function getFunctionBody(code) {
19 |   const range = getMarkRange(code, '{', '}')
20 |   return code.substring(range.start, range.end)
21 | }
22 | function getArrayItems(code) {
23 |   const range = getMarkRange(code, '[', ']')
24 |   return code.substring(range.start, range.end)
25 |     // after babel compile, will add '\n' to after and end of /**/
26 |     .split(staticRenderFnsSpliter + '\n')
27 |     .filter((functionBodyStr) => Boolean(functionBodyStr))
28 |     .map(getFunctionBody)
29 | }
30 | 
31 | const renderSeparator = '/* renderSeparator */'
32 | const staticRenderFnsSpliter = '/* staticRenderFnsSpliter */'
33 | 
34 | 
35 | export function compileTemplate(source, options) {
36 |   const isFunctional = options?.filename
37 |     ?.includes(options?.functionalComponentFileIdentifier || '.functional')
38 | 
39 |   const {ast, render, staticRenderFns, tips, errors} = templateCompiler.compile(source, options)
40 | 
41 |   // TODO rm semicolon && \n : https://babeljs.io/docs/en/options#minified
42 |   let code = `var render = ${toFunction(render, isFunctional)}` + ';'+ renderSeparator
43 |   const hasStaticRenders = staticRenderFns.length
44 |   if (hasStaticRenders) {
45 |     code += `var staticRenderFns = [${
46 |        staticRenderFns
47 |       .map((render) => toFunction(render, isFunctional) + staticRenderFnsSpliter)
48 |     }]`
49 |   }
50 | 
51 |   if (!options) {
52 |     options = {}
53 |   }
54 |   options.transforms = {
55 |     stripWithFunctional: isFunctional
56 |   }
57 |   const [compiledRender, compiledStaticRenders] = renderCompiler(code, options)
58 |     .split(renderSeparator)
59 | 
60 |   return {
61 |     ast,
62 |     render: getFunctionBody(compiledRender),
63 |     staticRenderFns: hasStaticRenders ? getArrayItems(compiledStaticRenders) : staticRenderFns,
64 |     tips,
65 |     errors
66 |   }
67 | }
68 | 
69 | export function extendTemplateCompiler(obj) {
70 |   for (const key in templateCompiler) {
71 |     obj[key] = templateCompiler[key]
72 |   }
73 |   obj.ssrCompile = compileTemplate
74 |   obj.compile = compileTemplate
75 | }
76 | 


--------------------------------------------------------------------------------
/src/utils/merge.js:
--------------------------------------------------------------------------------
1 | const merge = require('deepmerge')
2 | 
3 | export function mergeOptions(oldOptions, newOptions) {
4 |   return merge(oldOptions, newOptions)
5 | }
6 | 


--------------------------------------------------------------------------------
/src/utils/string.js:
--------------------------------------------------------------------------------
1 | export function escapeRegExp(string) {
2 |   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
3 | }
4 | 


--------------------------------------------------------------------------------
/test/compileRender.spec.js:
--------------------------------------------------------------------------------
  1 | const transpile = require('../lib')
  2 | const Vue = require('vue')
  3 | const {compile} = require('vue-template-compiler')
  4 | 
  5 | function transpileWithOption(code) {
  6 |   return transpile(code, {transforms: {stripWithFunctional: false}})
  7 | }
  8 | 
  9 | function addWrapperForTranspile(code) {
 10 |   return `var __render__ = function (){${code}}`
 11 | }
 12 | 
 13 | const toFunction = code => {
 14 |   code = transpileWithOption(addWrapperForTranspile(code))
 15 |   code = code.replace(/var __render__ = function \(\) \{/g, '').slice(0, -2)
 16 |   return new Function(code)
 17 | }
 18 | 
 19 | const compileAsFunctions = template => {
 20 |   const {render, staticRenderFns} = compile(template)
 21 |   return {
 22 |     render: toFunction(render),
 23 |     staticRenderFns: staticRenderFns.map(toFunction)
 24 |   }
 25 | }
 26 | 
 27 | test('should work', () => {
 28 |   const vm = new Vue({
 29 |     ...compileAsFunctions(`
 30 |       <div>
 31 |         <div>{{ foo }}</div>
 32 |         <div>{{ a[foo] }}</div>
 33 |         <div v-for="{ name } in items">{{ name }}</div>
 34 |         <div v-bind="{ ...a, ...b }"/>
 35 |       </div>
 36 |     `),
 37 |     data: {
 38 |       foo: 'id',
 39 |       items: [
 40 |         {name: 'foo'},
 41 |         {name: 'bar'}
 42 |       ],
 43 |       a: {id: 'foo'},
 44 |       b: {class: 'bar'}
 45 |     }
 46 |   }).$mount()
 47 | 
 48 |   expect(vm.$el.innerHTML).toMatch(
 49 |     `<div>id</div> ` +
 50 |     `<div>foo</div> ` +
 51 |     `<div>foo</div><div>bar</div> ` +
 52 |     `<div id="foo" class="bar"></div>`
 53 |   )
 54 | })
 55 | 
 56 | test('arg spread', () => {
 57 |   const res = compile(`
 58 |     <button @click="(...args) => { store.foo(...args) }">Go</button>
 59 |   `)
 60 |   const code = transpileWithOption(addWrapperForTranspile(res.render))
 61 |   expect(code).toMatch(`(_vm$store = _vm.store).foo.apply(_vm$store, arguments)`)
 62 |   const spreadOperator = '...'
 63 |   expect(code).not.toMatch(spreadOperator)
 64 | })
 65 | 
 66 | test('rest spread in scope position', () => {
 67 |   const vm = new Vue({
 68 |     ...compileAsFunctions(`
 69 |       <div>
 70 |         <foo v-slot="{ foo, ...rest }">{{ rest }}</foo><foo v-slot="{ bar, ...rest }">{{ rest }}</foo>
 71 |       </div>
 72 |     `),
 73 |     components: {
 74 |       foo: {
 75 |         render(h) {
 76 |           return h('div', this.$scopedSlots.default({
 77 |             foo: 1,
 78 |             bar: 2,
 79 |             baz: 3
 80 |           }))
 81 |         }
 82 |       }
 83 |     }
 84 |   }).$mount()
 85 | 
 86 |   function stringify(obj) {
 87 |     return JSON.stringify(obj, null, 2)
 88 |   }
 89 | 
 90 |   expect(vm.$el.innerHTML).toMatch(
 91 |     `<div>${stringify({bar: 2, baz: 3})}</div><div>${stringify({foo: 1, baz: 3})}</div>`
 92 |   )
 93 | })
 94 | 
 95 | test('trailing function comma', () => {
 96 |   const spy = jest.fn()
 97 |   const vm = new Vue({
 98 |     ...compileAsFunctions(`
 99 |       <button @click="spy(1,)" />
100 |     `),
101 |     methods: {
102 |       spy
103 |     }
104 |   }).$mount()
105 |   vm.$el.click()
106 |   expect(spy).toHaveBeenCalled()
107 | })
108 | 
109 | test('v-model should work', () => {
110 |   const vModelVal = 'foo'
111 |   const vm = new Vue({
112 |     ...compileAsFunctions(`
113 |       <div>
114 |             <input v-model="text" />
115 |       </div>
116 |     `),
117 |     data: {
118 |       text: vModelVal
119 |     }
120 |   }).$mount()
121 | 
122 |   expect(vm.$el.innerHTML).toMatch(`<input>`)
123 |   expect(vm.$el.querySelector('input').value).toMatch(vModelVal)
124 | })
125 | 
126 | test('should work for optional chaining', () => {
127 |   const vm = new Vue({
128 |     ...compileAsFunctions(`
129 |       <div>
130 |         <h1 v-if="optional?.chaining">optional chaining worked</h1>
131 |       </div>
132 |     `),
133 |     data: {
134 |       optional: {
135 |         chaining: true
136 |       }
137 |     }
138 |   }).$mount()
139 | 
140 |   expect(vm.$el.innerHTML).toMatch(`<h1>optional chaining worked</h1>`)
141 | })
142 | 
143 | test('should work for computed property accessing in optional chaining', () => {
144 |   const vm = new Vue({
145 |     ...compileAsFunctions(`
146 |       <div>
147 |         <h1 v-if="optional?.[key]">optional chaining worked</h1>
148 |       </div>
149 |     `),
150 |     data: {
151 |       optional: {
152 |         chaining: true
153 |       },
154 |       key: 'chaining'
155 |     }
156 |   }).$mount()
157 | 
158 |   expect(vm.$el.innerHTML).toMatch(`<h1>optional chaining worked</h1>`)
159 | })
160 | 
161 | test('should work for optional function calling as event handler', () => {
162 |   let called = false
163 |   new Vue({
164 |     ...compileAsFunctions(`
165 |       <child @hook:mounted="handler?.()" />
166 |     `),
167 |     data() {
168 |       return {
169 |         handler: function () {
170 |           called = true
171 |         }
172 |       }
173 |     },
174 |     components: {
175 |       child: {
176 |         render(h) { return h(null) }
177 |       }
178 |     }
179 |   }).$mount()
180 | 
181 |   expect(called).toBeTruthy()
182 | })
183 | 
184 | test('should work for __staticRenderFns__', () => {
185 |   const transpileResult = transpileWithOption(`
186 | var __render__ = function () {with (this) {return _m(0)}}
187 | var __staticRenderFns__ = [
188 |   function () {
189 |     with (this) {
190 |       return _c(
191 |         'div', {attrs: {"id": "app"}},
192 |         [
193 |           _c('img', {attrs: {"alt": "Vue logo", "src": require("./assets/logo.png")}}),
194 |           _c('p', [_v(" static "),
195 |             _c('a', {attrs: {"href": "https://github.com/JuniorTour/vue-template-babel-compiler"}},
196 |               [_v(" JuniorTour/vue-template-babel-compiler ")])
197 |           ])
198 |         ]
199 |       )
200 |     }
201 |   }]
202 | `)
203 | 
204 |   expect(transpileResult).toMatch(`[_vm._v(" JuniorTour/vue-template-babel-compiler ")]`)
205 | })
206 | 
207 | test('should work for nullish coalescing', () => {
208 |   const vm = new Vue({
209 |     ...compileAsFunctions(`
210 |       <div>
211 |         {{null ?? 'nullish coalescing'}}
212 |       </div>
213 |     `),
214 |   }).$mount()
215 | 
216 |   expect(vm.$el.innerHTML).toMatch(`nullish coalescing`)
217 | })
218 | 
219 | test('variableDeclarator init should append vm', () => {
220 |   // v-model target value should not throw 'not defined' error
221 |   // Src: https://github.com/JuniorTour/vue-template-babel-compiler/issues/5
222 |   const vm = new Vue({
223 |     ...compileAsFunctions(`
224 |     <div>
225 |         <input type="checkbox"
226 |                value="1"
227 |                v-model="checkboxVal">
228 |     </div>
229 |     `),
230 |     data: {
231 |       checkboxVal: true,
232 |     }
233 |   }).$mount()
234 | 
235 |   expect(() => {
236 |     const checkboxEl = vm.$el.querySelector('input')
237 |     checkboxEl.click()
238 |   }).not.toThrow()
239 | })
240 | 
241 | test('not already in scoped slot should work', () => {
242 |   // argument should not be undefined in function invoke of scoped slot
243 |   // Src: https://github.com/JuniorTour/vue-template-babel-compiler/issues/2
244 |   const dataMsg = 'dataMsg'
245 |   let scopedSlotContext
246 |   const vm = new Vue({
247 |     ...compileAsFunctions(`
248 |     <scopeSlot>
249 |       <template v-slot:default="{dataMsg}">
250 |         <span @click="greet(dataMsg)">
251 |           v-slot:content worked
252 |         </span>
253 |       </template>
254 |     </scopeSlot>
255 |     `),
256 |     components: {
257 |       scopeSlot: {
258 |         ...compileAsFunctions(`
259 |           <div>
260 |             <h4>
261 |               <slot v-bind:dataMsg="dataMsg">
262 |                   content
263 |               </slot>
264 |             </h4>
265 |           </div>
266 |           `),
267 |         data() {
268 |           return {
269 |             dataMsg,
270 |           }
271 |         }
272 |       },
273 |     },
274 |     data: {
275 |       checkboxVal: true,
276 |     },
277 |     methods: {
278 |       greet(dataMsg) {
279 |         scopedSlotContext = dataMsg
280 |       },
281 |     },
282 |   }).$mount()
283 | 
284 |   expect(() => {
285 |     const checkboxEl = vm.$el.querySelector('span')
286 |     checkboxEl.click()
287 |   }).not.toThrow()
288 |   expect(scopedSlotContext).toMatch(dataMsg)
289 | })
290 | 
291 | // https://github.com/JuniorTour/vue-template-babel-compiler/issues/25
292 | test('spread should allowArrayLike ', () => {
293 |   // Node.js don't have document API
294 |   // So we use `{length: 1}` to simulate Array-Like
295 |   const vm = new Vue({
296 |     ...compileAsFunctions(`
297 |       <div>{{ [...{length: 1}].length }}</div>
298 |     `),
299 |   }).$mount()
300 | 
301 |   expect(vm.$el.innerHTML).toMatch('1')
302 | })
303 | 
304 | test('should work for object method', () => {
305 |   const vm = new Vue({
306 |     ...compileAsFunctions(`
307 |       <div>
308 |         <h1 :rules="[{ transform(value) { return +value} }]">object method worked</h1>
309 |       </div>
310 |     `),
311 |   }).$mount()
312 | 
313 |   expect(vm.$el.innerHTML).toMatch(`<h1 rules=\"[object Object]\">object method worked</h1>`)
314 | })


--------------------------------------------------------------------------------
/test/compileTemplate.spec.js:
--------------------------------------------------------------------------------
  1 | const templateCompiler = require('../lib')
  2 | const Vue = require('vue')
  3 | 
  4 | // TODO enable esm `import {}` for jest
  5 | function toFunction(code) {
  6 |   return new Function(code)
  7 | }
  8 | 
  9 | test('template compile should work', () => {
 10 |   const msg = 'Hello vue-template-babel-compiler'
 11 |   const {ast, render, staticRenderFns, tips, errors} = templateCompiler.compile(`<div>${msg}</div>`)
 12 | 
 13 |   const vm = new Vue({
 14 |     render: toFunction(render)
 15 |   }).$mount()
 16 | 
 17 |   expect(vm.$el.innerHTML).toMatch(msg)
 18 |   expect(errors.length === 0).toBeTruthy()
 19 | })
 20 | 
 21 | test('should extend template compile', () => {
 22 |   const functionType = 'function'
 23 |   expect(typeof templateCompiler).toMatch(functionType)
 24 |   expect(typeof templateCompiler.compile).toMatch(functionType)
 25 |   expect(typeof templateCompiler.parseComponent).toMatch(functionType)
 26 |   expect(typeof templateCompiler.compileToFunctions).toMatch(functionType)
 27 |   expect(typeof templateCompiler.ssrCompile).toMatch(functionType)
 28 |   expect(typeof templateCompiler.ssrCompileToFunctions).toMatch(functionType)
 29 |   expect(typeof templateCompiler.generateCodeFrame).toMatch(functionType)
 30 | 
 31 |   // use same compiler for ssr and non-ssr, fix: https://github.com/JuniorTour/vue-template-babel-compiler/issues/7
 32 |   expect(templateCompiler.ssrCompile).toEqual(templateCompiler.compile)
 33 | })
 34 | 
 35 | test('should work for functional component', () => {
 36 |   const msg = 'Functional Component'
 37 | 
 38 |   const {render} = templateCompiler.compile(
 39 |     `<div>${msg}</div>`,
 40 |     {filename: 'foo.functional.js'})
 41 | 
 42 |   expect(render).toMatch('var _c=_vm._c')
 43 | })
 44 | 
 45 | test('should use object.assign for object rest spread', () => {
 46 |   // https://github.com/JuniorTour/vue-template-babel-compiler/issues/9
 47 |   const {ast, render, staticRenderFns, tips, errors} = templateCompiler.compile(`
 48 |     <h3 v-if="{...a}">object rest spread</h3>
 49 | `)
 50 | 
 51 |   expect(errors.length === 0).toBeTruthy()
 52 |   expect(render).toMatch(`Object.assign({}, _vm.a) ? _c('h3', [_vm._v("object rest spread")]) : _vm._e()`)
 53 | })
 54 | 
 55 | test('should use simple assign for computed properties', () => {
 56 |   // https://github.com/JuniorTour/vue-template-babel-compiler/issues/13
 57 |   const {ast, render, staticRenderFns, tips, errors} = templateCompiler.compile(
 58 |     '<div :class="{[`${foo}_bar`]: true}"></div>'
 59 |   )
 60 | 
 61 |   expect(errors.length === 0).toBeTruthy()
 62 |   expect(render).toMatch('class: (_class = {}, _class[`${_vm.foo}_bar`] = true, _class)')
 63 | })
 64 | 
 65 | test('should traverse scope to judge shouldPrependVm', () => {
 66 |   // https://github.com/JuniorTour/vue-template-babel-compiler/issues/16
 67 |   const {ast, render, staticRenderFns, tips, errors} = templateCompiler.compile(`
 68 |   <div>
 69 |     <div v-for="actionKey in actionKeys">
 70 |       <input type="checkbox" v-model="enabled[actionKey]" />
 71 |     </div>
 72 |   </div>`)
 73 | 
 74 |   const vm = new Vue({
 75 |     render: toFunction(render),
 76 |     data() {
 77 |       return {
 78 |         actionKeys: ['1','2','3'],
 79 |         enabled: {
 80 |           1: true,
 81 |           2: true,
 82 |           3: true,
 83 |         },
 84 |       }
 85 |     }
 86 |   }).$mount()
 87 | 
 88 |   expect(errors.length === 0).toBeTruthy()
 89 |   expect(vm.$el.innerHTML).toMatch('<input type="checkbox"')
 90 |   expect(() => {
 91 |     const checkboxEl = vm.$el.querySelector('input')
 92 |     checkboxEl.click()
 93 |   }).not.toThrow()
 94 |   expect(vm.$data.enabled[1]).toBeFalsy()
 95 | })
 96 | 
 97 | test('should prepend vm to computed property', () => {
 98 |   // https://github.com/JuniorTour/vue-template-babel-compiler/issues/28
 99 |   const {ast, render, staticRenderFns, tips, errors} = templateCompiler.compile(`
100 |   <div>
101 |     <div :class="{
102 |         [class1]: condition1
103 |     }"></div>
104 |   </div>`)
105 | 
106 |   const vm = new Vue({
107 |     render: toFunction(render),
108 |     data() {
109 |       return {
110 |         class1: 'firstClass',
111 |         condition1: true,
112 |       }
113 |     }
114 |   }).$mount()
115 | 
116 |   expect(errors.length === 0).toBeTruthy()
117 |   expect(vm.$el.innerHTML).toMatch('<div class="firstClass"')
118 | })
119 | 
120 | test('babelOptions should work for assumptions', () => {
121 |   const {ast, render, staticRenderFns, tips, errors} = templateCompiler.compile(
122 |       '<div :class="{[`${foo}_single`]: true}"></div>',
123 |       {
124 |         babelOptions: {
125 |           assumptions: {
126 |             setComputedProperties: false,
127 |           },
128 |         }
129 |       }
130 |     )
131 | 
132 |   expect(render).toMatch('class: _defineProperty({}, `${_vm.foo}_single`, true)')
133 | })
134 | 
135 | test('should treat iterable as array', () => {
136 |   // #31, #25
137 |   const {ast, render, staticRenderFns, tips, errors} = templateCompiler.compile(`
138 |   <div>
139 |     <div v-for="[one, two] in [[1,2]]">
140 |     {{one}}+{{two}}
141 |     </div>
142 |   </div>`)
143 | 
144 |   expect(errors.length === 0).toBeTruthy()
145 |   expect(render).not.toMatch('_maybeArrayLike')
146 |   expect(render).toMatch('_vm._s(one) + "+" + _vm._s(two)')
147 | })
148 | 
149 | test('should split staticRenderFns correct', () => {
150 |   // #34
151 |   const {ast, render, staticRenderFns, tips, errors} = templateCompiler.compile(`
152 |   <div>
153 |     <div data-class="function">1</div>
154 |   </div>`)
155 | 
156 |   expect(errors.length === 0).toBeTruthy()
157 |   expect(staticRenderFns.length === 1).toBeTruthy()
158 |   expect(staticRenderFns[0]).toMatch(`"data-class": "function"`)
159 | })
160 | 
161 | 
162 | test('should split multiple staticRenderFns correct', () => {
163 |   const {ast, render, staticRenderFns, tips, errors} = templateCompiler.compile(`
164 |   <div>
165 |     <h1>{{header}}</h1>
166 |     <ul>
167 |         <li>static1</li>
168 |     </ul>
169 |     <ul>
170 |         <li>static2</li>
171 |     </ul>
172 |     <ul>
173 |         <li>static3</li>
174 |     </ul>
175 |   </div>`)
176 | 
177 |   expect(errors.length === 0).toBeTruthy()
178 |   expect(staticRenderFns.length === 3).toBeTruthy()
179 |   expect(staticRenderFns[0]).toMatch(`_vm._v("static1")`)
180 |   expect(staticRenderFns[1]).toMatch(`_vm._v("static2")`)
181 |   expect(staticRenderFns[2]).toMatch(`_vm._v("static3")`)
182 | })
183 | 


--------------------------------------------------------------------------------
/test/options.spec.js:
--------------------------------------------------------------------------------
 1 | import {mergeOptions} from "../src/utils/merge";
 2 | 
 3 | const parseWithStatementToVm = () => {}
 4 | 
 5 | // #30
 6 | test('should merge options for babel', () => {
 7 |   const oldOptions = {
 8 |     filename: 'VueTemplateBabelCompiler',
 9 |     // not enable strict mode, in order to parse WithStatement
10 |     sourceType: 'script',
11 |     assumptions: {
12 |       setComputedProperties: true,
13 |       arrayLikeIsIterable: true,
14 |     },
15 |     plugins: [
16 |       '@babel/plugin-transform-computed-properties',
17 |       '@babel/plugin-proposal-nullish-coalescing-operator',
18 |       '@babel/plugin-proposal-optional-chaining',
19 |       '@babel/plugin-transform-block-scoping',
20 |       '@babel/plugin-transform-destructuring',
21 |       "@babel/plugin-transform-spread",
22 |       ["@babel/plugin-proposal-object-rest-spread", { loose: true, useBuiltIns: true }],
23 |       '@babel/plugin-transform-arrow-functions',
24 |       '@babel/plugin-transform-parameters',
25 |       parseWithStatementToVm,
26 |     ],
27 |   }
28 | 
29 |   const additionalOptions = {
30 |     filename: 'newFilename',
31 |     newProp: true,
32 |     assumptions: {
33 |       additional: 'additional'
34 |     },
35 |     plugins: [
36 |       'newPlugin'
37 |     ]
38 |   }
39 | 
40 |   const newOptions = mergeOptions(
41 |     oldOptions,
42 |     additionalOptions,
43 |   )
44 | 
45 |   expect(newOptions.assumptions.additional).toMatch(additionalOptions.assumptions.additional)
46 |   expect(newOptions.plugins.length).toEqual(oldOptions.plugins.length+1)
47 |   expect(newOptions.plugins[9]).toEqual(oldOptions.plugins[9])
48 |   expect(newOptions.filename).toEqual(additionalOptions.filename)
49 |   expect(newOptions.newProp).toEqual(additionalOptions.newProp)
50 | })
51 | 


--------------------------------------------------------------------------------
/test/utils/function.js:
--------------------------------------------------------------------------------
1 | export function toFunction(code) {
2 |   code = transpile(addWrapperForTranspile(code))
3 |   code = code.replace(/var __render__ = function \(\) \{/g, '').slice(0, -2)
4 |   return new Function(code)
5 | }
6 | 


--------------------------------------------------------------------------------