Skip to content

Latest commit

 

History

History
204 lines (137 loc) · 7.9 KB

CONTRIBUTING.md

File metadata and controls

204 lines (137 loc) · 7.9 KB
Raw

Feel free to ask maintainers anything by issue

Example: Fix issue#13 and Make a Pull Request

1. Find or create an issue

For example, we want to fix issue #13,

Reporter said there will be an error:

[Vue warn]: Error in render: "ReferenceError: _defineProperty is not defined"

when write:

<template>
    <div :class="{[`${componentCls}__single`]: true}">
    </div>
</template>

The first thing we need to do is identify and reproduce the issue.

2. Reproduce the issue

We can setup the Example Projects to reproduce the issue:

Follow its README to setup, usually we need:

git clone https://github.com/JuniorTour/vue-template-babel-compiler-vue-cli-project.git

cd ./vue-template-babel-compiler-vue-cli-project

yarn install

yarn server // or yarn dev

Then we can write the same code snippet in example project .vue files to reproduce error:

<template>
    <div :class="{[`${componentCls}__single`]: true}">
    </div>
</template>

<script>
  export default {
    name: 'Tutorial',
    data() {
      return {
        componentCls: 'willThrowError'
      }
    }
  }
</script>

If we can't reproduce, talk with the reporter and maintainer in the issue page.

3. Locate error

This lib is used in Node.js environment.

So when we reproduce the error, we can use node --inspect-brk file.js --runInBand to debug the whole process of code execution.

There are also built-in npm script in the Example Projects:

yarn debugDev

After execute node --inspect-brk,

A. Chrome DevTool will start to listening

image

B. Open Chrome DevTool for Node.js form any chrome tab

image

C. Use Chrome DevTool to debug this lib as usual

image

This npm package usually located in: vue-template-babel-compiler-nuxt-project\node_modules\vue-template-babel-compiler\lib\index.js

Hotkey: (ctrl || command) + P can be used to search file in DevTool:

image

4. Find a solution

After debug, I found the error above was caused by computed property in SFC <template> compiled with a helper functions (_defineProperty()) by babel

And I checked the Doc of babel-plugin-transform-computed-properties, found this is by designed.

image

But we don't need this helper function, with this function we will get Error in render: "ReferenceError: _defineProperty is not defined".

So we should remove defineProperty from compiled result.

Why we get this error:

Because we only keep the code inner render function, and strip other part of babel compile result by getFunctionBody()

After search through Google, stackoverflow.com/

Then I found there is an option for babel to remove this helper function: assumptions.setComputedProperties

After add this option to vue-template-babel-compiler-nuxt-project\node_modules\vue-template-babel-compiler\lib\index.js during debug.

I found the error will NOT throw, and everything works fine.

So I think this is the solution, After merge my changes to main branch, the issue#13 will be fixed.

5. Fork this Repo and setup

git clone https://github.com/JuniorTour/vue-template-babel-compiler.git

cd vue-template-babel-compiler

yarn install

yarn test // ensure your setup is right

6. Add test case and run yarn test

Before we make a Pull Request, We need to ensure this change doesn't break other logic of this lib.

That is the reason why we need Unit Test based on jest .

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.

Write test case is Easy!

A. Find a *.spec.js file to write

B. Add new test case based on jest API

If you are not familiar with jest, its Doc and Google will help you.

You can also refer to the existing cases of this project, or just copy the reproduce code snippet, and modify its content.

test('should use simple assign for computed properties', () => {
  // https://github.com/JuniorTour/vue-template-babel-compiler/issues/13
  const {ast, render, staticRenderFns, tips, errors} = templateCompiler.compile(
    '<div :class="{[`${foo}_bar`]: true}"></div>'
  )

  expect(errors.length === 0).toBeTruthy()
  expect(render).toMatch('class: (_class = {}, _class[`${_vm.foo}_bar`] = true, _class)')
})

C. Check test case by run yarn test

Make sure you see:

// ...
Test Suites: M passed, M total
Tests:       N passed, N total
Snapshots:   0 total
Time:        5.054s
Ran all test suites.
Done in 11.64s.

This means your code doesn't break anything :)

Debug test case:

  • add debugger to your test case code.
  • run yarn debugTest will start Chome DevTool like 3-locate-error

7. Git commit and Push

Finally, commit your changes like fix: use simple assign for computed properties (fix #13) and git push.

Don't forget Follow the commit convention: #{fix || chore || feat: xxx (fix #13)}

yarn.lock, package.json changes should be kept.

Create a new Pull Request fellow the tips from terminal and GitHub.

Then wait a moment, the maintainer will reply ASAP!