From cc7bc9efd85eaa0083fda82ff50434abba5b7b70 Mon Sep 17 00:00:00 2001 From: Gabriel Grubba Date: Mon, 1 Sep 2025 10:17:14 -0300 Subject: [PATCH 01/45] DOCS:Remove references to Meteor Toolbox VS Code extension All mentions and links to the Meteor Toolbox VS Code extension have been removed from documentation and tutorials. Based on https://forums.meteor.com/t/vs-code-extension/64106/2?u=grubba, and since the extension repository appears to be unmaintained, it seems best to remove it from the docs. Soon, we will have a more defined process for third-party tools. --- v3-docs/docs/.vitepress/config.mts | 4 --- v3-docs/docs/about/what-is.md | 2 -- v3-docs/docs/tutorials/react/index.md | 2 +- .../vue/meteorjs3-vue3-vue-meteor-tracker.md | 29 +++++++++---------- 4 files changed, 15 insertions(+), 22 deletions(-) diff --git a/v3-docs/docs/.vitepress/config.mts b/v3-docs/docs/.vitepress/config.mts index 7c7671d07f..3cb0b54e26 100644 --- a/v3-docs/docs/.vitepress/config.mts +++ b/v3-docs/docs/.vitepress/config.mts @@ -72,10 +72,6 @@ export default defineConfig({ text: "Packages on Atmosphere", link: "https://atmospherejs.com/", }, - { - text: "VS Code Extension", - link: "https://marketplace.visualstudio.com/items?itemName=meteor-toolbox.meteor-toolbox", - }, { text: "DevTools - Chrome Extension", link: "https://chromewebstore.google.com/detail/ibniinmoafhgbifjojidlagmggecmpgf", diff --git a/v3-docs/docs/about/what-is.md b/v3-docs/docs/about/what-is.md index 11863a0e2b..b87832fa90 100644 --- a/v3-docs/docs/about/what-is.md +++ b/v3-docs/docs/about/what-is.md @@ -39,8 +39,6 @@ Meteor is a full-stack JavaScript platform for developing modern web and mobile - Explore and contribute to our [GitHub repository](https://github.com/meteor). You can access our code, request new features, and start contributing. -- Enhance your coding experience with the [VS Code Extension](https://marketplace.visualstudio.com/items?itemName=meteor-toolbox.meteor-toolbox), which provides IntelliSense support for Meteor's core and packages. - - Use the [Chrome Extension](https://chrome.google.com/webstore/detail/meteor-devtools-evolved/ibniinmoafhgbifjojidlagmggecmpgf) or [Firefox Extension](https://addons.mozilla.org/en-US/firefox/addon/meteor-devtools-evolved/) for insights into your app's performance and to understand what is going on under the hood of your application. - Discover [Meteor Examples](https://github.com/meteor/examples) to see a range of projects built with Meteor. diff --git a/v3-docs/docs/tutorials/react/index.md b/v3-docs/docs/tutorials/react/index.md index 1599e2d186..ef62761bb1 100644 --- a/v3-docs/docs/tutorials/react/index.md +++ b/v3-docs/docs/tutorials/react/index.md @@ -4,7 +4,7 @@ In this tutorial, we will create a simple To-Do app using [React](https://react. React is a popular JavaScript library for building user interfaces. It allows you to create dynamic and interactive applications by composing UI components. React uses a declarative approach, where you define how the UI should look based on the state, and it efficiently updates the view when the state changes. With JSX, a syntax extension that combines JavaScript and HTML, React makes it easy to create reusable components that manage their own state and render seamlessly in the browser. -To start building your React app, you'll need a code editor. If you're unsure which one to choose, [Visual Studio Code](https://code.visualstudio.com/) is a good option. After installing it, you can enhance your experience by adding extensions like [Meteor Toolbox](https://marketplace.visualstudio.com/items?itemName=meteor-toolbox.meteor-toolbox). +To start building your React app, you'll need a code editor. If you're unsure which one to choose, [Visual Studio Code](https://code.visualstudio.com/) is a good option. Let’s begin building your app! diff --git a/v3-docs/docs/tutorials/vue/meteorjs3-vue3-vue-meteor-tracker.md b/v3-docs/docs/tutorials/vue/meteorjs3-vue3-vue-meteor-tracker.md index 171d56d105..5b426a8599 100644 --- a/v3-docs/docs/tutorials/vue/meteorjs3-vue3-vue-meteor-tracker.md +++ b/v3-docs/docs/tutorials/vue/meteorjs3-vue3-vue-meteor-tracker.md @@ -4,8 +4,7 @@ In this tutorial, we will create a simple To-Do app using [Vue 3](https://vuejs. Vue.js is a powerful JavaScript framework for making user interfaces. It helps you build interactive applications by using templates that connect to data and update automatically when the data changes. Vue.js templates use a simple syntax similar to HTML and work with Vue’s reactivity system to show components in the browser. -To start building your Vue.js app, you'll need a code editor. If you're unsure which one to choose, [Visual Studio Code](https://code.visualstudio.com/) is a good option. After installing it, you can enhance your experience by adding extensions like [Meteor Toolbox](https://marketplace.visualstudio.com/items?itemName=meteor-toolbox.meteor-toolbox) and [Vue Language Features](https://marketplace.visualstudio.com/items?itemName=Vue.volar). - +To start building your Vue.js app, you'll need a code editor. If you're unsure which one to choose, [Visual Studio Code](https://code.visualstudio.com/) is a good option. :::warning This tutorial uses the `vue-meteor-tracker` package, which is currently in beta and does not support async calls yet. However, it is still a valuable package, and we hope it will be updated soon. We are also working on a new tutorial that will use Meteor core packages instead. ::: @@ -206,7 +205,7 @@ Before creating our collection, let's remove the `links.js` file from the `impor ::: code-group ```javascript [imports/api/tasksCollection.js] import { Mongo } from 'meteor/mongo'; - + export const TasksCollection = new Mongo.Collection('tasks'); ``` ::: @@ -259,7 +258,7 @@ Meteor works with Meteor packages and NPM packages, usually Meteor packages are The `vue-meteor-tracker` package is already included in the Vue skeleton, so you don’t need to add it. -When importing code from a Meteor package the only difference from NPM modules is that you need to prepend `meteor/` in the from part of your import. +When importing code from a Meteor package the only difference from NPM modules is that you need to prepend `meteor/` in the from part of your import. First we need to implement a subscription at the `App` component to get the tasks updated from the server. It can be done simply by using the `subscribe` and `autorun` functions from `vue-meteor-tracker`. ::: info @@ -500,7 +499,7 @@ Until now, you have only inserted documents to our collection. Let’s see how y ### 4.1: Add Checkbox -First, you need to add a `checkbox` element to your `Task` component, and we need to add the `v-model` directive to the checkbox. This will allow us to bind the value of the checkbox to the `checked` field of the task document. +First, you need to add a `checkbox` element to your `Task` component, and we need to add the `v-model` directive to the checkbox. This will allow us to bind the value of the checkbox to the `checked` field of the task document. To do this, we need to add a `ref` to the task document. This will allow us to access the task document in the template. And add a computed property `isChecked` for the state management of the checkbox. We also have a prop called `task` that is passed to the component. This prop is an object that represents the task document. @@ -604,7 +603,7 @@ const isChecked = computed(() => taskRef.value.checked); const handleCheckboxChange = async (event) => { const newCheckedValue = event.target.checked; taskRef.value.checked = newCheckedValue; - + try { await Meteor.callAsync('setIsCheckedTask', taskRef.value._id, newCheckedValue); } catch (error) { @@ -644,9 +643,9 @@ First add a button after the text in your `Task` component and receive a callbac {{ task.text }} - ... ``` @@ -829,7 +828,7 @@ You should avoid adding zero to your app bar when there are no pending tasks. ::: code-group ```vue [imports/ui/App.vue]