Merge pull request #11086 from chris-visser/feature/create-vue-app

Roadmap.md

@@ -15,8 +15,8 @@ Ideally, every item in this roadmap should have at least two leaders, leaders ar
 ## Core
 
 ### Tree Shaking
-- Leaders: [Ben Newman](https://github.com/benjamn) / [Renan Castro](https://github.com/renanccastro)
-- Status: -
+- Leaders: [Filipe Névola](https://github.com/filipenevola) / [Renan Castro](https://github.com/renanccastro)
+- Status: In Progress
 - PRs: -
 
 Implement tree shaking / dead code elimination, which involves pruning the dependency tree while scanning imports in the `ImportScanner`. We believe it should be possible to treat values like `Meteor.isProduction` and `Meteor.isServer` as constants during this process, and eliminate those branches if their conditions are false (as in https://github.com/meteor/meteor/pull/10056).
@@ -66,7 +66,7 @@ Explore ideas to improve rebuild time such as split main client bundle into seve
 ### Performance improvements on Windows
 - Leaders: [zodern](https://github.com/zodern)
 - Status: In Progress
-- PRs: -
+- PRs: https://github.com/meteor/meteor/pull/10838
 
 Explore ideas to improve performance on Windows such as build in place.
 
@@ -89,9 +89,9 @@ Migrate packages that do not depend on Meteor exclusive features to NPM and we a
 ### Cordova documentation
 - Leaders: [Filipe Névola](https://github.com/filipenevola)
 - Status: In Progress
-- PRs: -
+- PRs: https://github.com/meteor/meteor/pull/11072
 
-Provide a skeleton or example with mobile native configurations already in place such as `mobile-config.js`, sample assets, Fastlane scripts, etc. Also improve docs and guide ([Forums post](https://forums.meteor.com/t/lets-create-the-ultimate-cordova-hot-code-push-faq-doc/50500)).
+Provide an example with mobile native configurations already in place such as `mobile-config.js`, sample assets, Fastlane scripts, etc. Also improve docs and guide ([Forums post](https://forums.meteor.com/t/lets-create-the-ultimate-cordova-hot-code-push-faq-doc/50500)).
 
 ## DB
 ### Minimongo secondary index support
@@ -109,6 +109,13 @@ Improve index support for Minimongo to enable better performance in the client f
 
 Provide a nice and friendly introduction for people that are learning Meteor.
 
+### Update Angular Tutorial
+- Leaders: [Brian Mulhall](https://github.com/BrianMulhall)
+- Status: -
+- PRs: -
+
+Angular tutorial should reflect latest best practices for using Meteor and Angular together.
+
 ### Update React Tutorial
 - Leaders: [Leonardo Venturini](https://github.com/leonardoventurini)
 - Status: In Progress
@@ -121,7 +128,7 @@ React tutorial should reflect latest best practices for using Meteor and React t
 - Status: In Progress
 - PRs: -
 
-Provide a skeleton or an example with PWA configurations already in place such as `manifest`, service worker, Open Graph meta tags, etc. Also improve docs and guide.
+Provide an example with PWA configurations already in place such as `manifest`, service worker, Open Graph meta tags, etc. Also improve docs and guide.
 
 ### SSR documentation
 - Leaders: [Kevin Newman](https://github.com/CaptainN) / [Eric Burel](https://github.com/eric-burel)
@@ -189,13 +196,6 @@ Relevant discussions:
 - https://github.com/storybookjs/storybook/issues/5975
 
 ## Recently completed
-### Update Angular Tutorial
-- Leaders: [Brian Mulhall](https://github.com/BrianMulhall)
-- Status: shipped in April 2020
-- PRs: https://github.com/meteor/tutorials/pull/200 https://github.com/meteor/tutorials/pull/199
-
-Angular tutorial should reflect latest best practices for using Meteor and Angular together.
-
 ### Update Blaze Tutorial
 - Leaders: [Jan Küster](https://github.com/jankapunkt), [Harry Adel](https://github.com/harryadelb), [Brian Mulhall](https://github.com/BrianMulhall)
 - Status: shipped in April 2020

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)