Add create command for vuejs

tools/cli/commands.js

@@ -517,6 +517,7 @@ main.registerCommand({
     minimal: { type: Boolean },
     full: { type: Boolean },
     react: { type: Boolean },
+    vue: { type: Boolean },
     typescript: { type: Boolean },
   },
   catalogRefresh: new catalog.Refresh.Never()
@@ -770,6 +771,8 @@ main.registerCommand({
     skelName += "-full";
   } else if (options.react) {
     skelName += "-react";
+  } else if (options.vue) {
+    skelName += "-vue";
   } else if (options.typescript) {
     skelName += "-typescript";
   }
@@ -886,8 +889,9 @@ main.registerCommand({
       ! options.minimal &&
       ! options.full &&
       ! options.react &&
+      ! options.vue &&
       ! options.typescript) {
-    // Notify people about --bare, --minimal, --full, --react, and --typescript.
+    // Notify people about --bare, --minimal, --full, --react, --vue, and --typescript.
     Console.info([
       "",
       "To start with a different app template, try one of the following:",
@@ -898,6 +902,7 @@ main.registerCommand({
     cmd("meteor create --minimal    # to create an app with as few Meteor packages as possible");
     cmd("meteor create --full       # to create a more complete scaffolded app");
     cmd("meteor create --react      # to create a basic React-based app");
+    cmd("meteor create --vue        # to create a basic Vue-based app");
     cmd("meteor create --typescript # to create an app using TypeScript and React");
   }
 

tools/static-assets/skel-vue/.gitignore

@@ -0,0 +1 @@
+node_modules/

tools/static-assets/skel-vue/.meteor/.gitignore

@@ -0,0 +1 @@
+local

tools/static-assets/skel-vue/.meteor/packages

@@ -0,0 +1,24 @@
+# Meteor packages used by this project, one per line.
+# Check this file (and the other files in this directory) into your repository.
+#
+# 'meteor add' and 'meteor remove' will edit this file for you,
+# but you can also edit it by hand.
+
+meteor-base             # Packages every Meteor app needs to have
+mobile-experience       # Packages for a great mobile UX
+mongo                   # The database Meteor supports right now
+reactive-var            # Reactive variable for tracker
+
+standard-minifier-css   # CSS minifier run for production mode
+standard-minifier-js    # JS minifier run for production mode
+es5-shim                # ECMAScript 5 compatibility for older browsers
+ecmascript              # Enable ECMAScript2015+ syntax in app code
+typescript              # Enable TypeScript syntax in .ts and .tsx modules
+shell-server            # Server-side component of the `meteor shell` command
+
+tracker                 # Dependency tracker to allow reactive callbacks
+static-html             # Define static page content in .html files
+akryum:vue-component    # Vue-CLI template to publish components
+
+meteortesting:mocha               # A package for writing and running your meteor app and package tests with mocha
+johanbrook:publication-collector  # Test a Meteor publication by collecting its output

tools/static-assets/skel-vue/.meteor/platforms

@@ -0,0 +1,2 @@
+server
+browser

tools/static-assets/skel-vue/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "skel",
+  "private": true,
+  "scripts": {
+    "start": "meteor run",
+    "test": "meteor test --once --driver-package meteortesting:mocha",
+    "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
+    "visualize": "meteor --production --extra-packages bundle-visualizer"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.8.3",
+    "meteor-node-stubs": "^1.0.0",
+    "vue": "^2.6.11",
+    "vue-meteor-tracker": "^2.0.0-beta.5"
+  },
+  "meteor": {
+    "mainModule": {
+      "client": "src/client.js",
+      "server": "src/server.js"
+    },
+    "testModule": "tests/main.js"
+  }
+}

tools/static-assets/skel-vue/src/App.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <h1>Welcome to Meteor!</h1>
+    <hello/>
+    <info/>
+  </div>
+</template>
+
+<script>
+import Hello from './components/Hello.vue'
+import Info from './components/Info.vue'
+
+export default {
+  components: {
+    Hello,
+    Info,
+  },
+}
+</script>
+
+<style>
+  body {
+    font-family: sans-serif;
+    padding: 10px;
+  }
+</style>

tools/static-assets/skel-vue/src/client.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+
+import './plugins'
+
+import App from './App.vue'
+
+Meteor.startup(() => {
+  new Vue({
+    el: '#app',
+    ...App,
+  })
+})

tools/static-assets/skel-vue/src/collections/Links.js

@@ -0,0 +1,3 @@
+import { Mongo } from 'meteor/mongo';
+
+export default new Mongo.Collection('links');

tools/static-assets/skel-vue/src/collections/Links.tests.js

@@ -0,0 +1,24 @@
+// Tests for the behavior of the links collection
+//
+// https://guide.meteor.com/testing.html
+
+import { Meteor } from 'meteor/meteor';
+import { assert } from 'chai';
+import Links from './links.js';
+
+if (Meteor.isServer) {
+  describe('links collection', function () {
+    it('insert correctly', function () {
+      const linkId = Links.insert({
+        title: 'meteor homepage',
+        url: 'https://www.meteor.com',
+      });
+      const added = Links.find({ _id: linkId });
+      const collectionName = added._getCollectionName();
+      const count = added.count();
+
+      assert.equal(collectionName, 'links');
+      assert.equal(count, 1);
+    });
+  });
+}

tools/static-assets/skel-vue/src/components/Hello.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <button @click="increment">Click Me</button>
+    <p>You've pressed the button {{counter}} times.</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      counter: 0,
+    }
+  },
+  methods: {
+    increment() {
+      this.counter += 1
+    }
+  },
+}
+</script>
+
+<style scoped>
+  p {
+    font-family: serif;
+  }
+</style>

tools/static-assets/skel-vue/src/components/Info.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <h2>Learn Meteor!</h2>
+    <ul>
+      <li>
+        <form class="info-link-add">
+          <input type="text" v-model="title" name="title" placeholder="Title" required>
+          <input type="url" v-model="url" name="url" placeholder="Url" required>
+          <input type="submit" name="submit" @click="submit($event)" value="Add new link">
+        </form>
+      </li>
+      <li v-for="link in links"><a :href="link.url" target="_blank">{{link.title}}</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import Links from '../collections/Links'
+
+export default {
+  data() {
+    return {
+      title: "",
+      url: "",
+    }
+  },
+  meteor: {
+    $subscribe: {
+      'links': [],
+    },
+    links () {
+      return Links.find({})
+    },
+  },
+  methods: {
+    submit(event) {
+      event.preventDefault()
+      Meteor.call('createLink', this.title, this.url, (error) => {
+        if (error) {
+          alert(error.error)
+        } else {
+          this.title = ''
+          this.url = ''
+        }
+      })
+    }
+  },
+}
+</script>
+
+<style scoped>
+  ul {
+    font-family: monospace;
+  }
+</style>

tools/static-assets/skel-vue/src/fixtures.js

@@ -0,0 +1,32 @@
+import { Meteor } from 'meteor/meteor';
+import Links from './collections/Links.js';
+
+Meteor.startup(() => {
+  // if the Links collection is empty
+  if (Links.find().count() === 0) {
+    const data = [
+      {
+        title: 'Do the Tutorial',
+        url: 'https://www.meteor.com/try',
+        createdAt: new Date(),
+      },
+      {
+        title: 'Follow the Guide',
+        url: 'http://guide.meteor.com',
+        createdAt: new Date(),
+      },
+      {
+        title: 'Read the Docs',
+        url: 'https://docs.meteor.com',
+        createdAt: new Date(),
+      },
+      {
+        title: 'Discussions',
+        url: 'https://forums.meteor.com',
+        createdAt: new Date(),
+      },
+    ];
+
+    data.forEach(link => Links.insert(link));
+  }
+});

tools/static-assets/skel-vue/src/main.html

@@ -0,0 +1,7 @@
+<head>
+  <title>skel</title>
+</head>
+
+<body>
+  <div id="app"></div>
+</body>

tools/static-assets/skel-vue/src/methods/createLink.js

@@ -0,0 +1,16 @@
+import { Meteor } from 'meteor/meteor';
+import { check } from 'meteor/check';
+import Links from '../collections/Links.js';
+
+Meteor.methods({
+  'createLink'(title, url) {
+    check(url, String);
+    check(title, String);
+
+    return Links.insert({
+      url,
+      title,
+      createdAt: new Date(),
+    });
+  },
+});

tools/static-assets/skel-vue/src/methods/createLink.tests.js

@@ -0,0 +1,20 @@
+import { Meteor } from 'meteor/meteor';
+import { assert } from 'chai';
+import Links from '../collections/Links.js';
+import './methods.js';
+
+if (Meteor.isServer) {
+  describe('method: createLink', function () {
+    beforeEach(function () {
+      Links.remove({});
+    });
+
+    it('can add a new link', function () {
+      const addLink = Meteor.server.method_handlers['createLink'];
+
+      addLink.apply({}, ['meteor.com', 'https://www.meteor.com']);
+
+      assert.equal(Links.find().count(), 1);
+    });
+  });
+}

tools/static-assets/skel-vue/src/methods/index.js

@@ -0,0 +1 @@
+import './createLink'

tools/static-assets/skel-vue/src/plugins.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueMeteorTracker from 'vue-meteor-tracker'
+
+Vue.use(VueMeteorTracker)

tools/static-assets/skel-vue/src/publications/index.js

@@ -0,0 +1 @@
+import './links'

tools/static-assets/skel-vue/src/publications/links.js

@@ -0,0 +1,6 @@
+import { Meteor } from 'meteor/meteor';
+import Links from '../collections/Links.js';
+
+Meteor.publish('links', function () {
+  return Links.find();
+});

tools/static-assets/skel-vue/src/publications/links.tests.js

@@ -0,0 +1,22 @@
+import { assert } from 'chai'
+import { PublicationCollector } from 'meteor/johanbrook:publication-collector'
+import Links from '../collections/Links.js'
+import './publications.js'
+
+describe('Publish links', function () {
+  beforeEach(function () {
+    Links.remove({})
+    Links.insert({
+      title: 'meteor homepage',
+      url: 'https://www.meteor.com'
+    })
+  })
+
+  it('sends all links', function (done) {
+    const collector = new PublicationCollector()
+    collector.collect('links', (collections) => {
+      assert.equal(collections.links.length, 1)
+      done()
+    })
+  })
+})

tools/static-assets/skel-vue/src/server.js

@@ -0,0 +1,3 @@
+import './fixtures'
+import './methods'
+import './publications'

tools/static-assets/skel-vue/tests/main.js

@@ -0,0 +1,20 @@
+import assert from "assert";
+
+describe("skel", function () {
+  it("package.json has correct name", async function () {
+    const { name } = await import("../package.json");
+    assert.strictEqual(name, "skel");
+  });
+
+  if (Meteor.isClient) {
+    it("client is not server", function () {
+      assert.strictEqual(Meteor.isServer, false);
+    });
+  }
+
+  if (Meteor.isServer) {
+    it("server is not client", function () {
+      assert.strictEqual(Meteor.isClient, false);
+    });
+  }
+});