Merge branch 'develop' of github.com:sverweij/dependency-cruiser into…

… develop
ypresto · Apr 6, 2018 · e458d4f · e458d4f
2 parents 6ca8bce + 40553dd
commit e458d4f
Show file tree

Hide file tree

Showing 13 changed files with 248 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -104,7 +104,7 @@ You've come to the right place :-) :
     - [Road map](https://github.com/sverweij/dependency-cruiser/projects/1)
     - [Real world show cases](./doc/real-world-samples.md)
     - [TypeScript, CoffeeScript and LiveScript support](./doc/faq.md)
-    - [Support for .jsx, .tsx and .csx/ .cjsx](./doc/faq.md#im-developing-in-react-and-use-jsx-how-do-i-get-that-to-work)
+    - [Support for .jsx, .tsx, .csx/ .cjsx and .vue](./doc/faq.md#im-developing-in-react-and-use-jsx-how-do-i-get-that-to-work)
 
 ## License
 [MIT](LICENSE)

diff --git a/doc/faq.md b/doc/faq.md
@@ -10,7 +10,10 @@ jsx works out of the box
 Yep.
 
 ## I use the CoffeeScript variant of jsx (csx, cjsx)
-Works out of the box
+Works out of the box.
+
+## Let me guess, vue works out of the box as well?
+You guessed correctly.
 
 ## Does this mean dependency-cruiser installs transpilers for all these languages?
 No.

diff --git a/src/extract/transpile/jsxImplementationRationale.md b/src/extract/transpile/jsxImplementationRationale.md
@@ -43,3 +43,9 @@ Observing
 - ... implementing & testing this is a doddle ...
 
 **=> acorn_loose it is for now** ; maybe later an elegant solution for one of the above (plugin? passing babelrc?)
+
+# vue templates in dependency-cruiser
+For vue templates I've followed a similar process of elimination. I found several ways
+to transform vue templates to javascript but didn't find a satisfying one that would work in
+all cases. So I ended up using the acorn_loose route for vue templates as well. It
+seems to perform pretty ok, but a more elegant solution is welcome.
diff --git a/src/extract/transpile/meta.js b/src/extract/transpile/meta.js
@@ -21,6 +21,7 @@ const litCoffeeWrap        = require("./coffeeWrap")(true);
 const extension2wrapper = {
     ".js"        : javaScriptWrap,
     ".jsx"       : javaScriptWrap,
+    ".vue"       : javaScriptWrap,
     ".ts"        : typeScriptWrap,
     ".tsx"       : typeScriptWrap,
     ".d.ts"      : typeScriptWrap,

diff --git a/test/extract/fixtures/vue.json b/test/extract/fixtures/vue.json
@@ -0,0 +1,74 @@
+[
+    {
+        "title": "vue",
+        "input": {
+            "fileName": "test/extract/fixtures/vue/main.js"
+        },
+        "expected": [
+            {
+                "source": "test/extract/fixtures/vue/main.js",
+                "dependencies": [
+                    {
+                        "resolved": "test/extract/fixtures/vue/App.vue",
+                        "coreModule": false,
+                        "followable": true,
+                        "couldNotResolve": false,
+                        "dependencyTypes": [
+                            "local"
+                        ],
+                        "module": "./App.vue",
+                        "moduleSystem": "es6",
+                        "matchesDoNotFollow": false,
+                        "valid": true
+                    },
+                    {
+                        "resolved": "vue",
+                        "coreModule": false,
+                        "followable": false,
+                        "couldNotResolve": true,
+                        "dependencyTypes": [
+                            "unknown"
+                        ],
+                        "module": "vue",
+                        "moduleSystem": "es6",
+                        "matchesDoNotFollow": false,
+                        "valid": true
+                    }
+                ]
+            },
+            {
+                "source": "vue",
+                "followable": false,
+                "coreModule": false,
+                "couldNotResolve": true,
+                "matchesDoNotFollow": false,
+                "dependencyTypes": [
+                    "unknown"
+                ],
+                "dependencies": []
+            },
+            {
+                "source": "test/extract/fixtures/vue/App.vue",
+                "dependencies": [
+                    {
+                        "resolved": "test/extract/fixtures/vue/components/HelloWorld.vue",
+                        "coreModule": false,
+                        "followable": true,
+                        "couldNotResolve": false,
+                        "dependencyTypes": [
+                            "local"
+                        ],
+                        "module": "./components/HelloWorld.vue",
+                        "moduleSystem": "es6",
+                        "matchesDoNotFollow": false,
+                        "valid": true
+                    }
+                ]
+            },
+            {
+                "source": "test/extract/fixtures/vue/components/HelloWorld.vue",
+                "dependencies": []
+            }
+        ]
+    }
+]
diff --git a/test/extract/fixtures/vue/App.vue b/test/extract/fixtures/vue/App.vue
@@ -0,0 +1,28 @@
+<template>
+  <div id="app">
+    <img src="./assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+  name: 'app',
+  components: {
+    HelloWorld
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/test/extract/fixtures/vue/components/HelloWorld.vue b/test/extract/fixtures/vue/components/HelloWorld.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://github.com/vuejs/vue-cli/tree/dev/docs" target="_blank">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org/en/essentials/getting-started.html" target="_blank">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org/en/intro.html" target="_blank">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org/en" target="_blank">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
diff --git a/test/extract/fixtures/vue/main.js b/test/extract/fixtures/vue/main.js
@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')
diff --git a/test/extract/index.spec.js b/test/extract/index.spec.js
@@ -8,6 +8,7 @@ const deprecationFixtures     = require('./fixtures/deprecated-node-module.json'
 const bundledFixtures         = require('./fixtures/bundled-dependencies.json');
 const amdRecursiveFixtures    = require('./fixtures/amd-recursive.json');
 const tsRecursiveFixtures     = require('./fixtures/ts-recursive.json');
+const vueFixtures             = require('./fixtures/vue.json');
 const coffeeRecursiveFixtures = require('./fixtures/coffee-recursive.json');
 
 const expect = chai.expect;
@@ -34,6 +35,7 @@ describe('Deprecation - ', () => deprecationFixtures.forEach(runRecursiveFixture
 describe('Bundled - ', () => bundledFixtures.forEach(runRecursiveFixture));
 describe('AMD recursive - ', () => amdRecursiveFixtures.forEach(runRecursiveFixture));
 describe('TypeScript recursive - ', () => tsRecursiveFixtures.forEach(runRecursiveFixture));
+describe('vue - ', () => vueFixtures.forEach(runRecursiveFixture));
 describe(
     'CoffeeScript recursive - (not-testable-in-node4)',
     () => coffeeRecursiveFixtures.forEach(runRecursiveFixture)

diff --git a/test/extract/transpile/fixtures/vue.js b/test/extract/transpile/fixtures/vue.js
@@ -0,0 +1,28 @@
+<template>
+  <div id="app">
+    <img src="./assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+  name: 'app',
+  components: {
+    HelloWorld
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/test/extract/transpile/fixtures/vue.vue b/test/extract/transpile/fixtures/vue.vue
@@ -0,0 +1,28 @@
+<template>
+  <div id="app">
+    <img src="./assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+  name: 'app',
+  components: {
+    HelloWorld
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/test/extract/transpile/javascriptWrap.spec.js b/test/extract/transpile/javascriptWrap.spec.js
@@ -20,4 +20,14 @@ describe("jsx transpiler (the plain old javascript one)", () => {
             fs.readFileSync("./test/extract/transpile/fixtures/jsx.js", 'utf8')
         );
     });
+
+    it("transpiles vue", () => {
+        expect(
+            wrap.transpile(
+                fs.readFileSync("./test/extract/transpile/fixtures/vue.vue", 'utf8')
+            )
+        ).to.equal(
+            fs.readFileSync("./test/extract/transpile/fixtures/vue.js", 'utf8')
+        );
+    });
 });
diff --git a/test/extract/transpile/meta.spec.js b/test/extract/transpile/meta.spec.js
@@ -10,7 +10,7 @@ describe("transpiler meta (not-testable-in-node4)", () => {
         expect(
             meta.scannableExtensions
         ).to.deep.equal([
-            ".js", ".jsx", ".ts", ".tsx", ".d.ts", ".coffee", ".litcoffee", ".coffee.md", ".csx", ".cjsx"
+            ".js", ".jsx", ".vue", ".ts", ".tsx", ".d.ts", ".coffee", ".litcoffee", ".coffee.md", ".csx", ".cjsx"
         ]);
     });