jackmellis / require-extension-hooks-vue Goto Github PK

View Code? Open in Web Editor NEW

27.0 27.0 16.0 1.04 MB

Simple parser for vue files

JavaScript 77.97% Vue 22.03%

require-extension-hooks-vue's People

Contributors

Stargazers

Watchers

Forkers

blake-newman qt911025 es-repo ferm10n abrenneke distil trevonerd pearofducks dhershman1 oligot vinayakkulkarni superlanding 2k-web-archive levhita shadowgate15

require-extension-hooks-vue's Issues

How can I config it to work with typescript?

Hi,

Congratulations for your project, I had been searching something similar to this to integrate to my library,
Only need to typescript support to finish it

const hooks = require('require-extension-hooks');
hooks('vue').plugin('vue').push();
hooks(['vue', 'js']).plugin('babel').push();
hooks('ts');

let component = require('../tests/components/render-ts.vue');

console.log(component);

I don't know how add the transpiled

...\node_modules\babel-core\lib\transformation\file\index.js:590
      throw err;
      ^

SyntaxError: .../tests/components/render-ts.vue: Unexpected token (13:0)
  11 | import Component from "vue-class-component";
  12 |
> 13 | @Component({
     | ^
  14 |  name: 'Foot'
  15 | })
  16 | export default class Foot extends Vue {

Regards,

Doesn't support CSS Modules

Unfortunately it doesn't support Vue SFC with CSS Modules. Do you have planes to add this?

SVG as Vue components support

Not an issue anymore as I added support of this, JFYI.

Webpack's vue-svg-loader allows to use SVG files as Vue components. require-extension-hooks-vue alone can't handle such components so you need to include require-extension-hooks-vue-svg plugin as well.

Source map not used in stack trace

Hi @jackmellis , hope you're well.

Source maps produced by require-extension-hooks aren't used in the stack trace. It would be great if we could fix this issue.

Improve readme.md

(also add a changelog)

Doesn't seem to work with ES6/babel?

#Not sure if I'm just doing something wrong but it doesn't seem to work with single file components that rely on babel.

$ tape --require ./test_helper 'client/**/*.test.js'
/Users/chrisnicola/src/wealthbar-koa-starter/client/lib/components/Login.vue:9
import { mapGetters, mapActions } from '@/lib/vue';
^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at compile (/Users/chrisnicola/src/wealthbar-koa-starter/node_modules/require-extension-hooks/src/hook.js:59:10)
    at hook (/Users/chrisnicola/src/wealthbar-koa-starter/node_modules/require-extension-hooks/src/hook.js:16:3)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
error Command failed with exit code 1.

The test_helper looks like this:

const hooks = require('require-extension-hooks');
hooks('vue').plugin('vue');
require('babel-register');
require('./tape_sinon');
require('dotenv').config();
require('browser-env')();


// Node 8 prints a warning and catches unhandled promise rejections.
// This results in useless messages when exceptions are thrown in
// aysyncronous tests. This works around this.
process.on('unhandledRejection', (e) => {
  console.error(e);
  process.exit(1);
});

Non Self-Closing Script Tags Do Not Work

Including the Vue Component in a JS file in a .vue doesn't work if it's not a self-closing tag.
So, <script src="List.js" /> works while <script src="List.js"></script> does not. It may be intentional but it tripped me up hard. I have a small example project which demonstrates this:

https://github.com/Gregoyle/Ava_Vue_Multi_File_Fail/blob/master/src/components/List.vue

Failed installation in NPM 7

Issue nuxt/create-nuxt-app#760

@jackmellis Can you please publish a new version package for updating peerDependencies vue-template-compiler which will fix the failed package installation in NPM 7

Support for external scripts / templates

Load template from external source

Where tag is <template src="./path/to/my/template.html"/>

Vue development warning only if not requiring .vue files

Hello,

Background: I was setting up a test suite using ava, the recommended way to use vue + ava is to use this library.

During the setup I noticed that a Vue warning would popup if a test file does not require a .vue file or 'vue-test-utils` .

I have reproduced the bug in this repo: https://github.com/Nicolaidavies/vue-test-utils-ava-example.

Uncommenting the line that imports vue-test-utils in test/specs/List.spec.js makes the error go away.

Please let me know if this is not the right place for this bug report.

Nicolai

Make vue-template-compiler a peerDependency

Requiring require-extension-hooks-vue errors if the vue-template-compiler version doesn't match the imported version of Vue.

For example, as this currently depends on "^2.5.17", and I upgraded to Vue 2.6.9, I get the following error:

Error:

Vue packages version mismatch:

- [email protected]
- [email protected]

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

    at Object.<anonymous> (/code/work/cms2/node_modules/require-extension-hooks-vue/node_modules/vue-template-compiler/index.js:8:9)

I think making vue-template-compiler a peerDependency solves the issue, but maybe there's a better way.

/register

Have a register file that you can directly require that automatically sets up the hook

i.e.
mocha --require require-extension-hooks-vue/register ./**/*.test.js

Fails to mount .vue component if exporting Vue.extend

From avajs/ava#1276 (comment)

The render fn is attached tomodule.exports.default or module.exports but if you are exporting Vue.extend then the render fn needs to be attached to module.exports.default.options or module.exports.options

Support Vue 3

This library will need to be updated to work with Vue 3. vue-template-compiler is no longer the right package to use to compile Vue SFCs. There may be other issues further down the chain after installing the new template compiler, but this is the error I get right now:

not ok 1 - Error: Cannot find module 'vue-template-compiler'
Require stack:
- /app/node_modules/require-extension-hooks-vue/src/index.js
- /app/node_modules/require-extension-hooks-vue/register.js
- /app/test/setup.js
- /app/node_modules/ava/lib/worker/subprocess.js
  ---
    code: MODULE_NOT_FOUND
    requireStack:
      - /app/node_modules/require-extension-hooks-vue/src/index.js
      - /app/node_modules/require-extension-hooks-vue/register.js
      - /app/test/setup.js
      - /app/node_modules/ava/lib/worker/subprocess.js
    name: Error
    message: |-
      Cannot find module 'vue-template-compiler'
      Require stack:
      - /app/node_modules/require-extension-hooks-vue/src/index.js
      - /app/node_modules/require-extension-hooks-vue/register.js
      - /app/test/setup.js
      - /app/node_modules/ava/lib/worker/subprocess.js
    at: >-
      - node_modules/ava/lib/worker/subprocess.js

      Object.<anonymous>
      (node_modules/require-extension-hooks-vue/src/index.js:15:18)

      Object.<anonymous> (node_modules/require-extension-hooks-vue/register.js:2:16)
  ...
not ok 2 - test/components/HelloWorld.spec.mjs exited with a non-zero exit code: 1

If there is interest, I can dig in a little deeper to see if I can get it to work with Vue 3.

Throwing error with template-based, single-file functional components

Hello!

require-extension-hooks-vue version 1.0.0
vue version 2.5.16

With the addition of template-based functional components in Vue 2.5.0+, the script block does not seem to be required in .vue files. I get the following error, though, when I try to use these types of components with require-extension-hooks-vue.

/.../node_modules/require-extension-hooks-vue/src/index.js:68
    throw new Error(`Unable to read ${filename}: could not find a valid <script> tag`);
          ^
Error: Unable to read /.../DnTable.vue: could not find a valid <script> tag
    at getScriptPart (/.../node_modules/require-extension-hooks-vue/src/index.js:68:11)
    at Array.module.exports (/.../node_modules/require-extension-hooks-vue/src/index.js:184:22)
    at transpile (/.../node_modules/require-extension-hooks/src/hook.js:42:26)
    at hook (/.../node_modules/require-extension-hooks/src/hook.js:26:22)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/.../DnTable.spec.js:11:16)

Thank you!

Simply requiring this module breaks ts-node w/mocha 😿

I've got a working test config using mocha with ts-node to run tests written in typescript. I was hoping to add .vue files to the mix using this module but the second I require it, all the tests fail.

Match scripts with additional attributes

Rather than checking for <script>, check for /<script(.*)(?:\/{0,1})>/ which will extract any script attributes.

Same goes for template tags too.

Unit Test

(intermediate value) is not a function

I'm attempting to use this so I can easily test Vue components with Ava. I made a very simple test component:

<template>
  <div class="foo-component">Hi!</div>
</template>
<script>
export default {
  name: 'Foo'
}
</script>

It looks like the hook compiles it to this (I unminified it a bit for readability):

(module.exports.default || module.exports).render = function() {
    var _vm = this;
    var _h = _vm.$createElement;
    var _c = _vm._self._c || _h;
    return _c('div', {
        staticClass: "foo-component"
    }, [_vm._v("Hi!")])
};

but I always get an (intermediate value) is undefined error.

TypeError: (intermediate value) is not a function
    at Object.<anonymous> (/Users/user/Sites/vue-tagger/src/Foo.vue:4:1)
    at Module._compile (module.js:571:32)
    at hook (/Users/user/Sites/vue-tagger/node_modules/require-extension-hooks/hook.js:43:10)

Any ideas? Would love to get this working so I don't have to resort to vue-node and webpack for simple component testing.

Is it possible to auto-compile templates based on lang?

Would be nice if we could find a synchronous version of consolidate.js as this is what vue-loader uses. But we don't want to have async loading of files.

Load scripts from external source

Where script tag is <script src="./url-of-my-script.js"/>

Add option to transpile templates

Defaults to true (current functionality), but if set to false, it attempts to load it via hook(Lang, templatePart)

Erroring with Vue 2.4.x

It looks like there's a problem with Vue 2.4.0 and require-extension-hooks-vue:

TypeError: this._init is not a function
    at Array.Vue$3 (/Users/eyerburgh/Sites/avoriaz-ava-example/node_modules/vue/dist/vue.runtime.common.js:4290:8)
    at transpile (/Users/eyerburgh/Sites/avoriaz-ava-example/node_modules/require-extension-hooks/src/hook.js:26:26)
    at hook (/Users/eyerburgh/Sites/avoriaz-ava-example/node_modules/require-extension-hooks/src/hook.js:15:22)

Doesn't seem to work with coffee?

Hello.

I was using this: https://medium.freecodecamp.org/how-to-write-blazing-fast-vue-unit-tests-with-tape-and-vue-test-utils-be069ccd4acf

My test.vue:

<template lang='pug'>
  span Hello from component test.
</template>

<script lang='coffee'></script>
export default {}
<style lang='stylus' scoped>
</style>

This gives an error: "Error: Unknown file extension .coffee"

TypeError: Super Expression must either be null or a function

I don't know if this issue falls on this module, on prettier, or on the component-compiler-utils ?

It seems like when attempting to run anything through the hooks you get this error (this was pulled directly from this modules unit tests)

TypeError: Super expression must either be null or a function
    ----------------------------------------------------------------
      name: TypeError
      message: Super expression must either be null or a function
      at: '_inherits (node_modules/prettier/index.js:1957:11)'

It looks like Prettier might be causing the underlying issue though. So I am unsure at this point of what this falls under or a proper work around.

Support alternate script langugages

i.e.

<script lang="ts">

In theory this should be possible just by calling module._extensions[lang] or something similar...

Support for additional script / template languages

Disable transpileTemplates

Currently transpileTemplates is true by defaul