Merge branch 'devel' into release-3.0.4

This commit is contained in:
denihs
2024-09-25 10:43:22 -04:00
11 changed files with 165 additions and 55 deletions

View File

@@ -1,18 +0,0 @@
hexo.extend.filter.register('after_render:html', function(html) {
const scriptTag = `
<script async
src="https://widget.kapa.ai/kapa-widget.bundle.js"
data-website-id="64051b0e-d79f-4fe7-b3ca-ff5c84075693"
data-project-name="Meteor"
data-project-color="#101926"
data-project-logo="https://avatars.githubusercontent.com/u/789528?s=200&v=4”
data-modal-disclaimer=“This is a custom LLM for answering questions about Meteor. Answers are based on the contents of the docs, answered forum posts, YouTube videos and GitHub issues. Please note that answers are generated by AI and may not be fully accurate, so please use your best judgement."
></script>
`.trim();
if (html.indexOf('</body>') !== -1) {
return html.replace('</body>', scriptTag + '</body>');
}
return html;
});

View File

@@ -0,0 +1,35 @@
/* global hexo */
hexo.extend.filter.register('after_render:html', function (str) {
const warningMessage = `
<div class="warning-banner">
<p>
⚠️ You're browsing the documentation for an old version of Meteor.js.
Check out the <a href="https://docs.meteor.com" target="_blank">v3 docs</a> and <a href="https://v3-migration-docs.meteor.com/" target="_blank">migration guide</a>.
</p>
</div>
`;
const css = `
<style>
.warning-banner {
text-align: center;
background-color: #fff3cd;
border: 1px solid #ffeeba;
color: #856404;
margin-bottom: 20px;
}
.warning-banner a {
color: #0056b3;
text-decoration: underline;
}
.warning-banner a:hover {
color: #003d82;
}
</style>
`;
const injectedContent = css + warningMessage;
return str.replace(/<div class="content">/, `<div class="content" data-injected>${injectedContent}`);
});

View File

@@ -155,7 +155,10 @@ export default defineConfig({
text: "Install Meteor",
link: "/about/install",
},
// TODO: Your first app meteor app
{
text: "Web Apps",
link: "/about/web-apps",
},
{
text: "Cordova",
link: "/about/cordova",
@@ -401,11 +404,11 @@ export default defineConfig({
// TODO: Open issue in Vitepress about this
{ link: "/history", text: "Meteor.js v3 (Current)" },
{
link: "https://docs.meteor.com/changelog",
link: "https://v2-docs.meteor.com/changelog",
text: "Meteor.js v2",
},
{
link: "https://docs.meteor.com/changelog#v112220211012",
link: "https://v2-docs.meteor.com/changelog#v112220211012",
text: "Meteor.js v1",
},
],

View File

@@ -0,0 +1,54 @@
# Web Apps
Meteor allows developers to build web applications using front-end frameworks like React, Vue, Blaze, Svelte, and Solid.
This section will help you quickly set up a new MeteorJS project using React.
## Step 1: Install Meteor
Ensure you have the latest official Meteor release installed. You can find installation instructions in our [docs](/about/install.html).
## Step 2: Create a New Project
To create a new project with Meteor and React, use the command:
```shell
meteor create myapp
```
This command sets up a Meteor project with React, allowing you to start developing right away.
You can also add the `--react` option to explicitly choose React, but it's already included by default.
If you prefer TypeScript, simply add the `--typescript` option.
```shell
meteor create myapp --typescript
```
### Additional Options
Meteor offers flags to generate different types of apps, like choosing a different front-end framework or configurations during project setup.
Additional options are available in the [Meteor CLI](/cli/#meteor-create-app-name) section.
## Step 3: Run Your Project Locally
Navigate into your project directory and start the Meteor server:
```shell
cd myapp
meteor
```
With no arguments, `meteor` runs the project in the current directory in local development mode.
Your application will be running at `http://localhost:3000/`, ready for you to begin development.
## Getting Help
You can find help for using the Meteor command line. Just run `meteor help` to see a list of common commands.
If you want detailed help about a specific command, run `meteor help <command>`. For example, `meteor help create`.
## Next Steps
- Follow the [React](/tutorials/react/index.html) or [Vue](/tutorials/vue/meteorjs3-vue3-vue-meteor-tracker.html) tutorials. New tutorials are coming soon.
- Read about [Cordova for Mobile Apps](/about/cordova.html).
- Explore the [Meteor Guide](https://guide.meteor.com/).

View File

@@ -12,7 +12,7 @@
Meteor is a full-stack JavaScript platform for developing modern web and mobile applications. Meteor includes a key set of technologies for building connected-client reactive applications, a build tool, and a curated set of packages from the Node.js and general JavaScript community.
- Meteor allows you to develop in **one language**, JavaScript, in all environments: application server, web browser, and mobile device.
- Meteor allows you to develop in **one language**, JavaScript or TypeScript, in all environments: application server, web browser, and mobile device.
- Meteor uses **data on the wire**, meaning the server sends data, not HTML, and the client renders it.
@@ -20,15 +20,21 @@ Meteor is a full-stack JavaScript platform for developing modern web and mobile
- Meteor provides **full stack reactivity**, allowing your UI to seamlessly reflect the true state of the world with minimal development effort.
- Meteor offers **flexibility in front-end** development, allowing you to choose your preferred framework such as React, Vue, Blaze, Svelte, or Solid.
- Meteor **simplifies back-end and front-end integration** through Methods, its built-in Remote Procedure Call (RPC) system for seamless communication.
- Meteor includes a **ready-to-use Login and Accounts** package, eliminating the need to rebuild authentication systems for your applications.
## Meteor Resources {#learning-more}
### Learning Meteor
- Start by learning how to install Meteor in the [Installation Section](/about/install.html).
- For beginners, the [Tutorials](https://www.meteor.com/developers/tutorials) are the perfect place to start with Meteor. Build a simple app to manage a task list! Available for [React](https://react-tutorial.meteor.com/), [Blaze](https://blaze-tutorial.meteor.com/), [Svelte](https://svelte-tutorial.meteor.com/), and [Vue 3](https://vue3-tutorial.meteor.com/).
- The tutorials are the perfect place to start. Build a simple app to manage a task list! Available for [React](/tutorials/react/index.html), and [Vue 3](/tutorials/vue/meteorjs3-vue3-vue-meteor-tracker.html). Blaze and Svelte tutorials are coming soon.
- Participate in Meteor's fully professional, engaging and interactive online school. Join [Meteor University](https://university.meteor.com/).
- Participate in Meteor's fully professional, engaging and interactive online school. Join [Meteor University](https://university.meteor.com/). Our courses cover Meteor 2 but most of the content is still relevant.
- Subscribe to our official [Youtube channel](https://www.youtube.com/@meteorsoftware) and watch the latest MeteorJS videos and presentations.
@@ -46,8 +52,8 @@ Meteor is a full-stack JavaScript platform for developing modern web and mobile
### Join Our Community
- Participate in the [Official Forum](https://forums.meteor.com) for project news, support, community discussions, and updates on core features.
- Participate in the [Official Forum](https://forums.meteor.com) for project news, support, and community discussions.
- Join the discussion and stay updated with announcements on the official [Meteor Lounge Discord](https://discord.gg/hZkTCaVjmT).
- Join the discussion and live streams on the official [Meteor Lounge Discord](https://discord.gg/hZkTCaVjmT).
- Engage with peers in the [Meteor Slack Community](https://join.slack.com/t/meteor-community/shared_invite/enQtODA0NTU2Nzk5MTA3LWY5NGMxMWRjZDgzYWMyMTEyYTQ3MTcwZmU2YjM5MTY3MjJkZjQ0NWRjOGZlYmIxZjFlYTA5Mjg4OTk3ODRiOTc) for technical support, meeting new developers, and exchanging ideas.
- Engage with peers in the [Meteor Slack Community](https://join.slack.com/t/meteor-community/shared_invite/enQtODA0NTU2Nzk5MTA3LWY5NGMxMWRjZDgzYWMyMTEyYTQ3MTcwZmU2YjM5MTY3MjJkZjQ0NWRjOGZlYmIxZjFlYTA5Mjg4OTk3ODRiOTc).

View File

@@ -1175,11 +1175,16 @@ option:
You can pass any MongoDB valid option, these are just examples using
certificates configurations.
If you're using a certificate and having authentication errors when trying to connect to a database other than `admin`, make sure to provide the flags `&ssl=true&authSource=admin`. You MONGO_URL string should look like this:
```
mongodb://<username>:<password>@[server-1],[server-2],[server-3]/my-database?replicaSet=my-replica&ssl=true&authSource=admin
```
### Mongo Oplog Options {#mongo-oplog-options}
> Oplog options were introduced in Meteor 2.15.1
If you set the [`MONGO_OPLOG_URL`](https://docs.meteor.com/environment-variables.html#MONGO-OPLOG-URL) env var, Meteor will use MongoDB's Oplog to show efficient, real time updates to your users via your subscriptions.
If you set the [`MONGO_OPLOG_URL`](/cli/environment-variables.html#mongo-oplog-url) env var, Meteor will use MongoDB's Oplog to show efficient, real time updates to your users via your subscriptions.
Due to how Meteor's Oplog implementation is built behind the scenes, if you have certain collections where you expect **big amounts of write operations**, this might lead to **big CPU spikes on your meteor app server, even if you have no publications/subscriptions on any data/documents of these collections**. For more information on this, please have a look into [this blog post from 2016](https://blog.meteor.com/tuning-meteor-mongo-livedata-for-scalability-13fe9deb8908), [this github discussion from 2022](https://github.com/meteor/meteor/discussions/11842) or [this meteor forums post from 2023](https://forums.meteor.com/t/cpu-spikes-due-to-oplog-updates-without-subscriptions/60028).

View File

@@ -1,13 +1,13 @@
# Top Level Await
[Top level await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#top_level_await) (TLA) allows you to use `await` in the top level of a module or file instead of only in async functions. One way to view it is as if every file runs inside an `async` function.
[Top-level await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#top_level_await) (TLA) allows you to use `await` in the top-level of a module or file instead of only in async functions. One way to view it is as if every file runs inside an `async` function.
Here is an example of using top level await on the server. When this file is loaded, the `await` will cause the module to wait for the count before the code in the rest of the module is run.
Here is an example of using top-level await on the server. When this file is loaded, the `await` will cause the module to wait for the count before the code in the rest of the module is run.
```js
const Links = new Mongo.Collection('links');
// Async code using top level await.
// Async code using top-level await.
// The module waits for this to finish before continuing
const count = await Links.find().countAsync();
@@ -16,29 +16,29 @@ if (count === 0) {
}
```
In previous versions of Meteor, async code using fibers could be run in the top level of a module. Top level await allows writing similar code that works without fibers. There are a few differences that this article will cover.
Before Meteor 3, async code using fibers could run at the top level of a module. Top-level await allows similar code to work without fibers. This article will cover a few differences.
Meteor's implementation of top level await tries to closely follow the specification. There currently are some differences with how Meteor handles circular dependencies.
Meteor's implementation of top-level await tries to closely follow the specification. However, there are currently some differences in how Meteor handles circular dependencies.
## Using Top Level Await
Top level await can be used in any app or package that uses the `ecmascript`, `typescript`, or `coffeescript` packages, or that uses any other build plugin that compiles top level await using reify.
Generally, if you can use ECMAScript modules, then you can also use top level await.
Top-level await can be used in any app or package that uses the `ecmascript`, `typescript`, or `coffeescript` packages, or that uses any other build plugin that compiles top-level await using reify.
Generally, if you can use ECMAScript modules, then you can also use top-level await.
There are some extra considerations when using top level await in packages. They are covered later in this article.
There are some extra considerations when using top-level await in packages. They are covered later in this article.
Top level await is only enabled by default on the server. You can enable it for the client by setting the env var `METEOR_ENABLE_CLIENT_TOP_LEVEL_AWAIT` to `true`. There are a couple known issues with using TLA on the client:
Top-level await is only enabled by default on the server. You can enable it for the client by setting the env var `METEOR_ENABLE_CLIENT_TOP_LEVEL_AWAIT` to `true`. There are a couple known issues with using TLA on the client:
1. It breaks any files in `/client/compatibility` since it now wraps those files in a function
2. Hot module replacement has not been updated to work with TLA
## Async Modules
With top level await, some modules are considered async, which affects how they behave. There are two ways a module can become an async module:
1. It uses top level await
With top-level await, some modules are considered async, which affects how they behave. There are two ways a module can become an async module:
1. It uses top-level await
2. It imports a module that is async
For example, this module (`setup.js`) would be async because it uses top level await:
For example, this module (`setup.js`) would be async because it uses top-level await:
```js
await setupLanguages();
@@ -50,7 +50,7 @@ This module (`main.js`) would be sync:
console.log('in main.js');
```
However, if it imports `setup.js` which does use top level await, then `main.js` also becomes async.
However, if it imports `setup.js` which does use top-level await, then `main.js` also becomes async.
```js
import './setup.js';
@@ -67,10 +67,10 @@ When using `require` to load an async module, instead of directly returning a mo
const promise = require('./init.js');
```
If you are using `require`, this does mean you need to be careful when adding or removing top level await in a file since you also have to update where the module is required.
Since a module becomes async if it depends on an async module, this could affect more than just the individual modules using top level await.
If you are using `require`, this does mean you need to be careful when adding or removing top-level await in a file since you also have to update where the module is required.
Since a module becomes async if it depends on an async module, this could affect more than just the individual modules using top-level await.
When possible, you can use ecmascript import syntax or dynamic imports instead so you don't have to worry about which modules are sync or async.
When possible, you can use ECMAScript import syntax or dynamic imports instead so you don't have to worry about which modules are sync or async.
## Nested Imports
@@ -88,13 +88,13 @@ export function showNotification(message) {
}
```
This is a feature unique to Meteor, so the top level await specification wasn't written to work with nested imports. Using nested imports to import a sync module continues to work, but it will throw an error if used to import an async module. You can use `require` or dynamic imports for async modules in these situations.
This feature is unique to Meteor, so the top-level await specification wasn't written to work with nested imports. Using nested imports to import a sync module continues to work, but it will throw an error if used to import an async module. You can use `require` or dynamic imports for async modules in these situations.
## Using in Packages
Top level await is only supported starting in Meteor 3. Published build plugins are able to use top level await in older Meteor versions since the runtime is bundled when they are published, though in development they require Meteor 3.
Top-level await is only supported starting in Meteor 3. Published build plugins are able to use top-level await in older Meteor versions since the runtime is bundled when they are published, though in development they require Meteor 3.
If you want to ensure your package only runs in versions of Meteor that support top level await, you can have your package use `isobuild:top-level-await`:
If you want to ensure your package only runs in versions of Meteor that support top-level await, you can have your package use `isobuild:top-level-await`:
```js
Package.onUse(function (api) {
@@ -103,17 +103,17 @@ Package.onUse(function (api) {
});
```
When importing a package that does not have a lazy main module, it will work the same whether a package uses top level await or not. This is true even when using `require`. This allows packages to add or remove top level await without it being a breaking change.
When importing a package that does not have a lazy main module, it will work the same whether a package uses top-level await or not. This is true even when using `require`. This allows packages to add or remove top-level await without it being a breaking change.
There are a couple cases where adding or removing top level await from a module in a package could be considered a breaking change:
There are a couple of cases where adding or removing top-level await from a module in a package could be considered a breaking change:
1. If specific modules are require'd from a package. For example: `require('meteor/zodern:aurorae/svelte.js')`. When importing a specific module from a package, `require` changes its behavior based on if the module is async or not.
2. If a package that has lazy main modules is require'd. Unlike normal packages, `require` will return a promise if the lazy main module is an async module. Changing if the lazy main module is async or not should be considered a breaking change for the package.
## Module and Package Execution Order
Normally, modules are run one at a time. This was even true when using async code with fibers in the root of a module. However, top level await is different - it allows siblings (modules that do not depend on each other) to sometimes run in parallel. This can allow the app to load faster, which is especially important on the client. However, this could cause code to run in an unexpected order if you are used to how Meteor worked with fibers.
Normally, modules are run one at a time. This was even true when using async code with fibers in the root of a module. However, top-level await is different - it allows siblings (modules that do not depend on each other) to sometimes run in parallel. This can allow the app to load faster, which is especially important on the client. However, this could cause code to run in an unexpected order if you are used to how Meteor works with fibers.
This is also applies to packages. Packages that do not directly or indirectly depend on each other are able to load in parallel if they use top level await.
This also applies to packages. Packages that do not directly or indirectly depend on each other can load in parallel if they use top-level await.
Modules that are eagerly evaluated (added in packages with `api.addFiles`, or outside of `imports` in apps that do not have a main module) and not directly imported continue to run one at a time, even if they use top level await, since it is common for these modules to implicitly depend on the previous modules.
Modules that are eagerly evaluated (added in packages with `api.addFiles`, or outside of `imports` in apps that do not have a main module) and not directly imported continue to run one at a time, even if they use top-level await since it is common for these modules to implicitly depend on the previous modules.

View File

@@ -1,4 +1,4 @@
## v3.0.3, 2024-09-xx
## v3.0.3, 2024-09-11
### Highlights

View File

@@ -1,4 +1,4 @@
# Building with Meteor.js 3, Vue 3 and `vue-meteor-tracker`
# Meteor.js 3 + Vue 3 and `vue-meteor-tracker`
In this tutorial, we will create a simple To-Do app using [Vue 3](https://vuejs.org/) and Meteor 3.0. Meteor works well with other frameworks like [Blaze](https://www.blazejs.org/), [React](https://react.dev/), [Solid](https://www.solidjs.com/), and [Svelte](https://svelte.dev/).
@@ -314,7 +314,7 @@ import '../imports/api/tasksPublications';
```
:::
> If you want to learn more about how publications works, you can read the [Meteor Guide](https://docs.meteor.com/api/pubsub.html).
> If you want to learn more about how publications works, you can read [here](/api/meteor.html#pubsub).
Now, your app should look like this:

View File

@@ -22,6 +22,7 @@ export default defineConfig({
{text: "Meteor.call x Meteor.callAsync", link: "/breaking-changes/call-x-callAsync"},
{text: "Upgrading packages", link: "/breaking-changes/upgrading-packages"},
{text: "Publishing Packages", link: "/guide/publishing-packages"},
{text: "Common Errors", link: "/guide/common-errors"},
]
},
{

View File

@@ -0,0 +1,24 @@
# Common Errors
Below you will find a collection of documented common errors you may encounter when migrating from Meteor version 2 to version 3. Each error includes an explanation of why it happens and a recommended solution.
If there is any other issues you think should be here, please report them in our [Forums](https://forums.meteor.com/).
## Cannot Enlarge Memory Array
**Why this happens:**
This error occurs when the memory allocated for the build process is insufficient, often due to the large number of dependencies being processed in the migration to Meteor 3. As you update, the system tries to handle all dependencies, and older or larger packages may cause the build to run out of memory.
**How to solve it:**
To resolve this issue, follow these steps:
1. Temporarily reduce the number of meteor packages in your `.meteor/packages` file by removing non-essential or outdated ones.
2. Rebuild the application with the minimal set of packages.
3. Gradually add back the packages, one at a time, to identify which one(s) might be causing the issue.
4. Update or replace outdated packages as needed.
By reducing the package footprint and updating dependencies, you should be able to complete the migration without memory-related errors.
This error was lastly reported [here](https://forums.meteor.com/t/meteor-update-fails/62171).