jackmellis / require-extension-hooks-vue Goto Github PK
View Code? Open in Web Editor NEWSimple parser for vue files
Simple parser for vue files
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,
Unfortunately it doesn't support Vue SFC with CSS Modules. Do you have planes to add this?
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.
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.
(also add a changelog)
#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);
});
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
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
Where tag is <template src="./path/to/my/template.html"/>
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.
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.
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
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
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.
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!
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.
Rather than checking for <script>
, check for /<script(.*)(?:\/{0,1})>/
which will extract any script attributes.
Same goes for template tags too.
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.
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.
Where script tag is <script src="./url-of-my-script.js"/>
Defaults to true (current functionality), but if set to false, it attempts to load it via hook(Lang, templatePart)
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)
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"
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.
i.e.
<script lang="ts">
In theory this should be possible just by calling module._extensions[lang]
or something similar...
Currently transpileTemplates is true by defaul
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.