mirror of
https://github.com/meteor/meteor.git
synced 2026-05-02 03:01:46 -04:00
Merge branch 'release-3.4' into 3.4-roadmap
This commit is contained in:
Nacho Codoñer
@@ -56,7 +56,7 @@ How about trying a tutorial to get started with your favorite technology?
|
||||
| [<img align="left" width="25" src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"> React](https://docs.meteor.com/tutorials/react/) |
|
||||
| - |
|
||||
| [<img align="left" width="25" src="https://progsoft.net/images/blaze-css-icon-3e80acb3996047afd09f1150f53fcd78e98c1e1b.png"> Blaze](https://blaze-tutorial.meteor.com/) |
|
||||
| [<img align="left" width="25" src="https://vuejs.org/images/logo.png"> Vue](https://docs.meteor.com/tutorials/vue/meteorjs3-vue3-vue-meteor-tracker.html) |
|
||||
| [<img align="left" width="25" src="https://vuejs.org/images/logo.png"> Vue](https://docs.meteor.com/tutorials/vue/meteorjs3-vue3.html) |
|
||||
|
||||
# 🚀 Quick Start
|
||||
|
||||
|
||||
2
meteor
2
meteor
@@ -1,6 +1,6 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
BUNDLE_VERSION=22.22.0.2
|
||||
BUNDLE_VERSION=22.22.0.3
|
||||
|
||||
# OS Check. Put here because here is where we download the precompiled
|
||||
# bundles that are arch specific.
|
||||
|
||||
6
npm-packages/meteor-rspack/package-lock.json
generated
6
npm-packages/meteor-rspack/package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@meteorjs/rspack",
|
||||
"version": "0.3.56",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@meteorjs/rspack",
|
||||
"version": "0.3.56",
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
@@ -3251,7 +3251,7 @@
|
||||
}
|
||||
},
|
||||
"node_modules/media-typer": {
|
||||
"version": "0.3.56",
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||
"integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@meteorjs/rspack",
|
||||
"version": "0.3.56",
|
||||
"version": "1.0.0",
|
||||
"description": "Configuration logic for using Rspack in Meteor projects",
|
||||
"main": "index.js",
|
||||
"type": "commonjs",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
summary: "A user account system",
|
||||
version: "3.2.0-rc340.3",
|
||||
version: "3.2.0",
|
||||
});
|
||||
|
||||
Package.onUse((api) => {
|
||||
|
||||
@@ -5,7 +5,7 @@ Package.describe({
|
||||
// 2.2.x in the future. The version was also bumped to 2.0.0 temporarily
|
||||
// during the Meteor 1.5.1 release process, so versions 2.0.0-beta.2
|
||||
// through -beta.5 and -rc.0 have already been published.
|
||||
version: "3.2.2-rc340.3",
|
||||
version: "3.2.2",
|
||||
});
|
||||
|
||||
Npm.depends({
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
summary: 'No-password login/sign-up support for accounts',
|
||||
version: '3.1.0-rc340.3',
|
||||
version: '3.1.0',
|
||||
});
|
||||
|
||||
Package.onUse(api => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
summary: 'Unstyled version of login widgets',
|
||||
version: '1.8.0-rc340.3',
|
||||
version: '1.8.0',
|
||||
});
|
||||
|
||||
Package.onUse(function(api) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
summary: "Simple templates to add login widgets to an app",
|
||||
version: '1.5.0-rc340.3',
|
||||
version: '1.5.0',
|
||||
});
|
||||
|
||||
Package.onUse(api => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
Package.describe({
|
||||
name: "babel-compiler",
|
||||
summary: "Parser/transpiler for ECMAScript 2015+ syntax",
|
||||
version: '7.13.0-rc340.3',
|
||||
version: '7.13.0',
|
||||
devOnly: true,
|
||||
});
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
summary: "Generates the boilerplate html from program's manifest",
|
||||
version: '2.1.0-rc340.3',
|
||||
version: '2.1.0',
|
||||
});
|
||||
|
||||
Npm.depends({
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
summary: 'Check whether a value matches a pattern',
|
||||
version: '1.5.0-rc340.3',
|
||||
version: '1.5.0',
|
||||
});
|
||||
|
||||
Package.onUse(api => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
name: 'ecmascript',
|
||||
version: '0.17.0-rc340.3',
|
||||
version: '0.17.0',
|
||||
summary: 'Compiler plugin that supports ES2015+ in all .js files',
|
||||
documentation: 'README.md',
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
summary: "The Meteor command-line tool",
|
||||
version: "3.4.0-rc.3",
|
||||
version: "3.4.0",
|
||||
});
|
||||
|
||||
Package.includeTool();
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
Package.describe({
|
||||
summary: "Core Meteor environment",
|
||||
version: '2.2.0-rc340.3',
|
||||
version: '2.2.0',
|
||||
});
|
||||
|
||||
Package.registerBuildPlugin({
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
summary: "JavaScript minifier",
|
||||
version: '3.1.0-rc340.3',
|
||||
version: '3.1.0',
|
||||
});
|
||||
|
||||
Npm.depends({
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
summary: "Meteor's client-side datastore: a port of MongoDB to Javascript",
|
||||
version: "2.0.5-rc340.3",
|
||||
version: "2.0.5",
|
||||
});
|
||||
|
||||
Package.onUse((api) => {
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
Package.describe({
|
||||
summary: "Adaptor for using MongoDB and Minimongo over DDP",
|
||||
version: "2.2.0-rc340.3",
|
||||
version: "2.2.0",
|
||||
});
|
||||
|
||||
Npm.depends({
|
||||
|
||||
2
packages/react-fast-refresh/package.js
vendored
2
packages/react-fast-refresh/package.js
vendored
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
name: 'react-fast-refresh',
|
||||
version: '0.3.0-rc340.3',
|
||||
version: '0.3.0',
|
||||
summary: 'Automatically update React components with HMR',
|
||||
documentation: 'README.md',
|
||||
});
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
export const DEFAULT_RSPACK_VERSION = '1.7.1';
|
||||
|
||||
export const DEFAULT_METEOR_RSPACK_VERSION = '0.3.56';
|
||||
export const DEFAULT_METEOR_RSPACK_VERSION = '1.0.0';
|
||||
|
||||
export const DEFAULT_METEOR_RSPACK_REACT_HMR_VERSION = '1.4.3';
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
summary: "Integrate rspack into the Meteor lifecycle to run the bundler independently",
|
||||
version: '1.0.0-rc340.3',
|
||||
version: '1.0.0',
|
||||
});
|
||||
|
||||
Package.registerBuildPlugin({
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
name: "shell-server",
|
||||
version: '0.7.0-rc340.3',
|
||||
version: '0.7.0',
|
||||
summary: "Server-side component of the `meteor shell` command.",
|
||||
documentation: "README.md",
|
||||
devOnly: true,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
name: 'standard-minifier-css',
|
||||
version: '1.10.0-rc340.3',
|
||||
version: '1.10.0',
|
||||
summary: 'Standard css minifier used with Meteor apps by default.',
|
||||
documentation: 'README.md',
|
||||
devOnly: true,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
name: 'standard-minifier-js',
|
||||
version: '3.2.0-rc340.3',
|
||||
version: '3.2.0',
|
||||
summary: 'Standard javascript minifiers used with Meteor apps by default.',
|
||||
documentation: 'README.md',
|
||||
devOnly: true,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
name: 'standard-minifiers',
|
||||
version: '1.2.0-rc340.3',
|
||||
version: '1.2.0',
|
||||
summary: 'Standard minifiers used with Meteor apps by default.',
|
||||
documentation: 'README.md',
|
||||
devOnly: true,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
Package.describe({
|
||||
name: 'static-html',
|
||||
summary: "Define static page content in .html files",
|
||||
version: '1.5.0-rc340.3',
|
||||
version: '1.5.0',
|
||||
git: 'https://github.com/meteor/meteor.git',
|
||||
devOnly: true,
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
summary: "Run tests interactively in the browser",
|
||||
version: '1.5.0-rc340.3',
|
||||
version: '1.5.0',
|
||||
documentation: null
|
||||
});
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
summary: "Helpers for managing modern tools in Meteor",
|
||||
version: '1.0.0-rc340.3',
|
||||
version: '1.0.0',
|
||||
devOnly: true,
|
||||
});
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
name: 'typescript',
|
||||
version: '5.9.3-rc340.3',
|
||||
version: '5.9.3',
|
||||
summary:
|
||||
'Compiler plugin that compiles TypeScript and ECMAScript in .ts and .tsx files',
|
||||
documentation: 'README.md',
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Package.describe({
|
||||
summary: "Serves a Meteor app over HTTP",
|
||||
version: "2.1.0-rc340.3",
|
||||
version: "2.1.0",
|
||||
});
|
||||
|
||||
Npm.depends({
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"track": "METEOR",
|
||||
"version": "3.4-rc.3",
|
||||
"version": "3.4-rc.4",
|
||||
"recommended": false,
|
||||
"official": false,
|
||||
"description": "Meteor experimental release"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"track": "METEOR",
|
||||
"version": "3.3.2",
|
||||
"version": "3.4",
|
||||
"recommended": false,
|
||||
"official": true,
|
||||
"description": "The Official Meteor Distribution"
|
||||
|
||||
@@ -54,14 +54,14 @@ reactive-var@1.0.13
|
||||
reload@1.3.2
|
||||
retry@1.1.1
|
||||
routepolicy@1.1.2
|
||||
rspack@1.0.0-rc340.3
|
||||
rspack@1.0.0
|
||||
shell-server@0.6.1
|
||||
socket-stream-client@0.6.1
|
||||
standard-minifier-css@1.9.3
|
||||
standard-minifier-js@3.1.1
|
||||
static-html@1.4.0
|
||||
static-html-tools@1.0.0
|
||||
tools-core@1.0.0-rc340.3
|
||||
tools-core@1.0.0
|
||||
tracker@1.3.4
|
||||
typescript@5.6.5
|
||||
webapp@2.0.7
|
||||
|
||||
@@ -53,14 +53,14 @@ react-fast-refresh@0.2.9
|
||||
reload@1.3.2
|
||||
retry@1.1.1
|
||||
routepolicy@1.1.2
|
||||
rspack@1.0.0-rc340.3
|
||||
rspack@1.0.0
|
||||
shell-server@0.6.1
|
||||
socket-stream-client@0.6.1
|
||||
standard-minifier-css@1.9.3
|
||||
standard-minifier-js@3.1.1
|
||||
static-html@1.4.0
|
||||
static-html-tools@1.0.0
|
||||
tools-core@1.0.0-rc340.3
|
||||
tools-core@1.0.0
|
||||
tracker@1.3.4
|
||||
typescript@5.6.5
|
||||
webapp@2.0.7
|
||||
|
||||
@@ -54,14 +54,14 @@ reactive-var@1.0.13
|
||||
reload@1.3.2
|
||||
retry@1.1.1
|
||||
routepolicy@1.1.2
|
||||
rspack@1.0.0-rc340.3
|
||||
rspack@1.0.0
|
||||
shell-server@0.6.1
|
||||
socket-stream-client@0.6.1
|
||||
standard-minifier-css@1.9.3
|
||||
standard-minifier-js@3.1.1
|
||||
static-html@1.4.0
|
||||
static-html-tools@1.0.0
|
||||
tools-core@1.0.0-rc340.3
|
||||
tools-core@1.0.0
|
||||
tracker@1.3.4
|
||||
typescript@5.6.5
|
||||
webapp@2.0.7
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@meteorjs/rspack": "^0.3.56",
|
||||
"@meteorjs/rspack": "^1.0.0",
|
||||
"@rspack/cli": "^1.4.8",
|
||||
"@rspack/core": "^1.4.8",
|
||||
"@tailwindcss/postcss": "^4.1.12",
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/compiler-cli": "^20.0.0",
|
||||
"@meteorjs/rspack": "^0.3.56",
|
||||
"@meteorjs/rspack": "^1.0.0",
|
||||
"@nx/angular-rspack": "^21.1.0",
|
||||
"@rsdoctor/rspack-plugin": "^1.2.3",
|
||||
"@rspack/cli": "^1.7.1",
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
"devDependencies": {
|
||||
"@graphql-tools/webpack-loader": "^7.0.0",
|
||||
"@rsdoctor/rspack-plugin": "^1.2.3",
|
||||
"@meteorjs/rspack": "^0.3.56",
|
||||
"@meteorjs/rspack": "^1.0.0",
|
||||
"@rspack/cli": "^1.7.1",
|
||||
"@rspack/core": "^1.7.1",
|
||||
"@rspack/plugin-react-refresh": "^1.4.3",
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
"devDependencies": {
|
||||
"@babel/preset-env": "^7.28.3",
|
||||
"@babel/preset-react": "^7.23.3",
|
||||
"@meteorjs/rspack": "^0.3.56",
|
||||
"@meteorjs/rspack": "^1.0.0",
|
||||
"@rsdoctor/rspack-plugin": "^1.2.3",
|
||||
"@rspack/cli": "^1.7.1",
|
||||
"@rspack/core": "^1.7.1",
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
"meteor-node-stubs": "^1.2.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@meteorjs/rspack": "^0.3.56",
|
||||
"@meteorjs/rspack": "^1.0.0",
|
||||
"@rsdoctor/rspack-plugin": "^1.2.3",
|
||||
"@rspack/cli": "^1.7.1",
|
||||
"@rspack/core": "^1.7.1",
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@meteorjs/rspack": "^0.3.56",
|
||||
"@meteorjs/rspack": "^1.0.0",
|
||||
"@rsdoctor/rspack-plugin": "^1.2.3",
|
||||
"@rspack/cli": "^1.7.1",
|
||||
"@rspack/core": "^1.7.1",
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@meteorjs/rspack": "^0.3.56",
|
||||
"@meteorjs/rspack": "^1.0.0",
|
||||
"@rsdoctor/rspack-plugin": "^1.2.3",
|
||||
"@rspack/cli": "^1.7.1",
|
||||
"@rspack/core": "^1.7.1",
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
"meteor-node-stubs": "^1.2.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@meteorjs/rspack": "^0.3.56",
|
||||
"@meteorjs/rspack": "^1.0.0",
|
||||
"@rsdoctor/rspack-plugin": "^1.2.3",
|
||||
"@rspack/cli": "^1.7.1",
|
||||
"@rspack/core": "^1.7.1",
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@meteorjs/rspack": "^0.3.56",
|
||||
"@meteorjs/rspack": "^1.0.0",
|
||||
"@rsdoctor/rspack-plugin": "^1.2.3",
|
||||
"@rspack/cli": "^1.7.1",
|
||||
"@rspack/core": "^1.7.1",
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
"picocolors": "^1.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@meteorjs/rspack": "^0.3.56",
|
||||
"@meteorjs/rspack": "^1.0.0",
|
||||
"@rsdoctor/rspack-plugin": "^1.2.3",
|
||||
"@rspack/cli": "^1.7.1",
|
||||
"@rspack/core": "^1.7.1",
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
"meteor-node-stubs": "^1.2.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@meteorjs/rspack": "^0.3.56",
|
||||
"@meteorjs/rspack": "^1.0.0",
|
||||
"@rsdoctor/rspack-plugin": "^1.2.3",
|
||||
"@rspack/cli": "^1.7.1",
|
||||
"@rspack/core": "^1.7.1",
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
"react-dom": "^17.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@meteorjs/rspack": "^0.3.56",
|
||||
"@meteorjs/rspack": "^1.0.0",
|
||||
"@rsdoctor/rspack-plugin": "^1.2.3",
|
||||
"@rspack/cli": "^1.7.1",
|
||||
"@rspack/core": "^1.7.1",
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@meteorjs/rspack": "^0.3.56",
|
||||
"@meteorjs/rspack": "^1.0.0",
|
||||
"@rsdoctor/rspack-plugin": "^1.2.3",
|
||||
"@rspack/cli": "^1.7.1",
|
||||
"@rspack/core": "^1.7.1",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# Meteor + Vue3 + Vite
|
||||
# Meteor.js 3 + Vue3
|
||||
|
||||
This is a simple example of how to use Vue3 with Meteor.
|
||||
|
||||
@@ -12,7 +12,7 @@ This is a simple example of how to use Vue3 with Meteor.
|
||||
## Libraries used
|
||||
|
||||
- [Vue3](https://v3.vuejs.org/)
|
||||
- [Vite](https://vitejs.dev/)
|
||||
- [Rspack](https://rspack.dev/)
|
||||
- [Vue Router](https://next.router.vuejs.org/)
|
||||
- [Meteor](https://www.meteor.com/)
|
||||
- [Vue Meteor Tracker](https://github.com/meteor-vue/vue-meteor-tracker)
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@meteorjs/rspack": "^0.3.56",
|
||||
"@meteorjs/rspack": "^1.0.0",
|
||||
"@rsdoctor/rspack-plugin": "^1.2.3",
|
||||
"@rspack/cli": "^1.7.1",
|
||||
"@rspack/core": "^1.7.1",
|
||||
|
||||
@@ -37,8 +37,8 @@ export default defineConfig({
|
||||
link: "/tutorials/react/index",
|
||||
},
|
||||
{
|
||||
text: "Meteor + Vue + vue-meteor-tracker",
|
||||
link: "/tutorials/vue/meteorjs3-vue3-vue-meteor-tracker",
|
||||
text: "Meteor.js 3 + Vue",
|
||||
link: "/tutorials/vue/meteorjs3-vue3",
|
||||
},
|
||||
{
|
||||
text: "Meteor.js 3 + Solid",
|
||||
@@ -487,8 +487,8 @@ export default defineConfig({
|
||||
link: "/tutorials/react/index",
|
||||
},
|
||||
{
|
||||
link: "/tutorials/vue/meteorjs3-vue3-vue-meteor-tracker",
|
||||
text: "Meteor + Vue + vue-meteor-tracker",
|
||||
text: "Meteor.js 3 + Vue",
|
||||
link: "/tutorials/vue/meteorjs3-vue3",
|
||||
},
|
||||
{
|
||||
text: "Meteor.js 3 + Solid",
|
||||
|
||||
@@ -46,7 +46,7 @@ Starting with Meteor 3.4
|
||||
Add this Atmosphere package to your app:
|
||||
|
||||
``` bash
|
||||
meteor add rspack@1.0.0-rc340.3
|
||||
meteor add rspack@1.0.0
|
||||
```
|
||||
|
||||
On first run, the package installs the required Rspack setup at the project level. It compiles your app code with Rspack to get the full benefit of this integration.
|
||||
|
||||
@@ -18,7 +18,7 @@ Starting with Meteor 3.4
|
||||
Add this Atmosphere package to your app:
|
||||
|
||||
``` bash
|
||||
meteor add rspack@1.0.0-rc340.3
|
||||
meteor add rspack@1.0.0
|
||||
```
|
||||
|
||||
On first run, the package installs the required Rspack setup at the project level. It compiles your app code with Rspack to get the full benefit of this integration.
|
||||
@@ -587,27 +587,6 @@ module.exports = defineConfig((Meteor) => {
|
||||
|
||||
More info in [this forum post](https://forums.meteor.com/t/new-3-4-beta-12-release-faster-builds-smaller-bundles-and-modern-setups-with-the-rspack-integration/64124/94).
|
||||
|
||||
### Cache
|
||||
|
||||
Meteor cache remains active and continues to handle Atmosphere packages and intermediate builds. There’s an additional cache layer managed by Rspack to speed up rebuilds for your app code.
|
||||
|
||||
This Rspack cache is enabled by default in persistent mode. If you [encounter issues](https://github.com/web-infra-dev/rspack/issues/11804) or prefer to disable it, you can do so in your `rspack.config.js` using the helper:
|
||||
|
||||
```json
|
||||
const { defineConfig } = require('@meteorjs/rspack');
|
||||
const { rspack } = require('@rspack/core');
|
||||
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
|
||||
|
||||
module.exports = defineConfig(Meteor => ({
|
||||
// Disable cache, or use 'memory' to switch to in-memory cache
|
||||
...Meteor.setCache(false),
|
||||
}));
|
||||
|
||||
|
||||
```
|
||||
|
||||
This helper provide a shortcut to apply the needed Rspack configuration and safely override defaults, so you don’t have to handle it manually.
|
||||
|
||||
### Split Vendor Chunk
|
||||
|
||||
When using dynamic imports (`import()`), you might unintentionally include libraries like React, Mantine, or date utilities in multiple async chunks. To avoid this, it's best to define a stable `vendor` chunk for shared dependencies.
|
||||
|
||||
@@ -49,7 +49,7 @@ If you want detailed help about a specific command, run `meteor help <command>`.
|
||||
|
||||
## 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.
|
||||
- Follow the [React](/tutorials/react/index.html) or [Vue](/tutorials/vue/meteorjs3-vue3.html) tutorials. New tutorials are coming soon.
|
||||
- Learn about [Modern Build Stack](/about/modern-build-stack.md) for faster development, smaller bundle sizes, and more.
|
||||
- Read about [Cordova for Mobile Apps](/about/cordova.html).
|
||||
- Explore the [Meteor Guide](https://guide.meteor.com/).
|
||||
|
||||
@@ -29,7 +29,7 @@ Meteor is a full-stack JavaScript platform for developing modern web and mobile
|
||||
|
||||
- Start by learning how to install Meteor in the [Installation Section](/about/install.html).
|
||||
|
||||
- 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.
|
||||
- The tutorials are the perfect place to start. Build a simple app to manage a task list! Available for [React](/tutorials/react/index.html), [Vue 3](/tutorials/vue/meteorjs3-vue3.html), [Solid](/tutorials/solid/index.html), [Blaze](/tutorials/blaze/index.html) and [Svelte 5](/tutorials/svelte/index.html).
|
||||
|
||||
- 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.
|
||||
|
||||
|
||||
@@ -167,6 +167,10 @@ This way we avoid having to call a specific code before another specific code in
|
||||
|
||||
## Build Plugins API {#build-plugin-api}
|
||||
|
||||
::: warning
|
||||
Starting with Meteor 3.4+, most build plugins won't work for application code when [the Rspack bundler](../about/modern-build-stack/rspack-bundler-integration.md) is enabled (which is the default). However, they will still work for Atmosphere package code and any code specifically set for Meteor bundler processing. You can still use build plugins for scripting independent app processing. Many of these functionalities can now be handled more effectively through Rspack's plugin system and lifecycle management, which offers more modern and flexible ways to process your app source code.
|
||||
:::
|
||||
|
||||
Meteor packages can provide build plugins - programs that integrate with the
|
||||
build tool Isobuild used to compile and bundle your application.
|
||||
|
||||
@@ -202,6 +206,10 @@ process. Commonly, such files have the following methods:
|
||||
|
||||
## Linters {#build-plugin-linters}
|
||||
|
||||
::: warning
|
||||
In Meteor 3.4+ [with Rspack enabled](../about/modern-build-stack/rspack-bundler-integration.md), linter build plugins for application code have the same limitations as other build plugins. However, you can still use Rspack's ecosystem of linting tools and plugins, which offer more integration with modern JavaScript tooling and better performance.
|
||||
:::
|
||||
|
||||
Linters are programs that check the code for undeclared variables or find code
|
||||
that doesn't correspond to certain style guidelines. Some of the popular
|
||||
examples of linters are [JSHint](http://jshint.com/about/) and
|
||||
@@ -261,6 +269,10 @@ See an example of a linting plugin implemented in Core: [jshint](https://github.
|
||||
|
||||
## Compilers {#build-plugin-compilers}
|
||||
|
||||
::: warning
|
||||
With Meteor 3.4+ [with Rspack enabled](../about/modern-build-stack/rspack-bundler-integration.md), compiler build plugins won't process application code by default. Rspack has its own loader system for handling various file types and transformations, which is typically more performant and better integrated with the modern JavaScript ecosystem. You can leverage Rspack's loaders for compiling TypeScript, JSX, CSS preprocessors, and other transformations directly.
|
||||
:::
|
||||
|
||||
Compilers are programs that take the source files and output JavaScript or
|
||||
CSS. They also can output parts of HTML that is added to the `<head>` tag and
|
||||
static assets. Examples for the compiler plugins are: CoffeeScript, Babel.js,
|
||||
@@ -341,6 +353,10 @@ package (compiles ES2015+ to JavaScript that can run in the browsers).
|
||||
|
||||
## Minifiers {#build-plugin-minifiers}
|
||||
|
||||
::: warning
|
||||
In Meteor 3.4+ [with Rspack enabled](../about/modern-build-stack/rspack-bundler-integration.md), minifier build plugins won't be used for application code by default. Rspack includes its own optimization and minification capabilities through plugins like SwcJsMinimizerRspackPlugin for JavaScript and SwcJsMinimizerRspackPlugin for CSS. These provide efficient minification with modern optimizations and are integrated directly into the Rspack build process.
|
||||
:::
|
||||
|
||||
Minifiers run last after the sources has been compiled and JavaScript code has
|
||||
been linked. Minifiers are only ran for the client programs (`web.browser` and
|
||||
`web.cordova`).
|
||||
|
||||
@@ -268,20 +268,20 @@ If you run `meteor create` without arguments, Meteor will launch an interactive
|
||||
|
||||
### Application Types
|
||||
|
||||
| Option | Description | Tutorial / Example |
|
||||
|------------------|------------------------------|----------|
|
||||
| Option | Description | Tutorial / Example |
|
||||
|------------------|-------------------------|----------|
|
||||
| `--react` | Create a React app (default) | [Meteor 3 with React](https://docs.meteor.com/tutorials/react/), [Meteor 2 with React](https://react-tutorial.meteor.com/) |
|
||||
| `--vue` | Vue 3 + Tailwind CSS + Vite | [Meteor 3 with Vue](https://docs.meteor.com/tutorials/vue/meteorjs3-vue3-vue-meteor-tracker.html), [Meteor 2 with Vue](https://vue3-tutorial.meteor.com/) |
|
||||
| `--svelte` | Svelte | [Meteor 2 with Svelte](https://svelte-tutorial.meteor.com/) |
|
||||
| `--blaze` | Basic Blaze app | [Meteor 2 with Blaze](https://blaze-tutorial.meteor.com/) |
|
||||
| `--solid` | Solid + Vite | [Meteor 2 with Solid Example](https://github.com/fredmaiaarantes/meteor-solid-app/releases/tag/milestone-2.0) |
|
||||
| `--apollo` | React + Apollo (GraphQL) | [Meteor 2 with GraphQL](https://react-tutorial.meteor.com/simple-todos-graphql/) |
|
||||
| `--typescript` | React + TypeScript | [TypeScript Guide](https://guide.meteor.com/build-tool.html#typescript) |
|
||||
| `--tailwind` | React + Tailwind CSS | - |
|
||||
| `--chakra-ui` | React + Chakra UI | [Simple Tasks Example](https://github.com/fredmaiaarantes/simpletasks) |
|
||||
| `--coffeescript` | CoffeeScript | - |
|
||||
| `--babel` | React with Babel support | - |
|
||||
| `--angular` | Angular + Typescript | - |
|
||||
| `--vue` | Vue 3 + Tailwind CSS | [Meteor 3 with Vue](https://docs.meteor.com/tutorials/vue/meteorjs3-vue3.html), [Meteor 2 with Vue](https://vue3-tutorial.meteor.com/) |
|
||||
| `--svelte` | Svelte | [Meteor 2 with Svelte](https://svelte-tutorial.meteor.com/) |
|
||||
| `--blaze` | Basic Blaze app | [Meteor 2 with Blaze](https://blaze-tutorial.meteor.com/) |
|
||||
| `--solid` | Solid | [Meteor 2 with Solid Example](https://github.com/fredmaiaarantes/meteor-solid-app/releases/tag/milestone-2.0) |
|
||||
| `--apollo` | React + Apollo (GraphQL) | [Meteor 2 with GraphQL](https://react-tutorial.meteor.com/simple-todos-graphql/) |
|
||||
| `--typescript` | React + TypeScript | [TypeScript Guide](https://guide.meteor.com/build-tool.html#typescript) |
|
||||
| `--tailwind` | React + Tailwind CSS | - |
|
||||
| `--chakra-ui` | React + Chakra UI | [Simple Tasks Example](https://github.com/fredmaiaarantes/simpletasks) |
|
||||
| `--coffeescript` | CoffeeScript | - |
|
||||
| `--babel` | React with Babel support | - |
|
||||
| `--angular` | Angular + Typescript | - |
|
||||
|
||||
### Project Structure Options
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
## v3.4.0, not yet
|
||||
## v3.4.0, 30-01-2026
|
||||
|
||||
### Highlights
|
||||
|
||||
- **Meteor-Rspack Integration**, [PR#13910](https://github.com/meteor/meteor/pull/13910)
|
||||
- ⚡ New `rspack` package
|
||||
- ⚡ New `rspack` atmosphere package (requires at least rspack@1.7.1)
|
||||
Orchestrates the full Rspack setup, including the development server and production builds.
|
||||
- 📦 New `@meteorjs/rspack` npm package
|
||||
Provides a default rspack.config.js. Applications can extend or override this configuration with their own.
|
||||
@@ -33,11 +33,13 @@
|
||||
- Update TypeScript definitions for async support in accounts-base, [PR#13987](https://github.com/meteor/meteor/pull/13987)
|
||||
- Fix an error when files have identical names with different cases, [PR#13958](https://github.com/meteor/meteor/pull/13958)
|
||||
- Add experimental config disableBoilerplateResponse to improve React SSR, [PR#13855](https://github.com/meteor/meteor/pull/13855)
|
||||
- Upgrade to Node v22.21.0, TypeScript 5.9.2 and SWC 1.15.3, [PR#13997](https://github.com/meteor/meteor/pull/13997) and [PR#13760](https://github.com/meteor/meteor/pull/13760)
|
||||
- Upgrade to Node v22.22.0, TypeScript 5.9.2 and SWC 1.15.3, [PR#13997](https://github.com/meteor/meteor/pull/13997) and [PR#13760](https://github.com/meteor/meteor/pull/13760)
|
||||
|
||||
All Merged PRs@[GitHub PRs 3.4](https://github.com/meteor/meteor/pulls?q=is%3Apr+is%3Amerged+base%3Arelease-3.4)
|
||||
|
||||
React Packages Changelog: react-meteor-data@4.0.1 (TODO)
|
||||
React Packages:
|
||||
- [react-meteor-data@4.0.1](https://github.com/meteor/react-packages/blob/master/packages/react-meteor-data/CHANGELOG.md#v401-2026-1-30)
|
||||
- [react-template-helper@0.4.0](https://github.com/meteor/react-packages/blob/master/packages/react-template-helper/CHANGELOG.md#v040-2026-1-30)
|
||||
|
||||
#### Breaking Changes
|
||||
|
||||
@@ -58,7 +60,7 @@ meteor update --release 3.4-rc.3
|
||||
To apply `react-meteor-data` changes:
|
||||
|
||||
```bash
|
||||
meteor add react-meteor-data@4.0.1-rc.1
|
||||
meteor add react-meteor-data@4.0.1
|
||||
```
|
||||
|
||||
---
|
||||
@@ -76,7 +78,7 @@ Check out [the requirements for Meteor Bundler optimizations](https://deploy-pre
|
||||
**Add `rspack` package to enable the Rspack Bundler integration:**
|
||||
|
||||
```bash
|
||||
meteor add rspack-rc340.3
|
||||
meteor add rspack
|
||||
```
|
||||
|
||||
> This package is added by default for new apps.
|
||||
@@ -93,33 +95,33 @@ If you find any issues, please report them to the [Meteor issues tracker](https:
|
||||
|
||||
#### Bumped Meteor Packages
|
||||
|
||||
- accounts-base@3.2.0-rc340.3
|
||||
- accounts-password@3.2.2-rc340.3
|
||||
- accounts-ui-unstyled@1.8.0-rc340.3
|
||||
- accounts-ui@1.5.0-rc340.3
|
||||
- babel-compiler@7.13.0-rc340.3
|
||||
- boilerplate-generator@2.1.0-rc340.3
|
||||
- ecmascript@0.17.0-rc340.3
|
||||
- meteor@2.2.0-rc340.3
|
||||
- minifier-js@3.1.0-rc340.3
|
||||
- minimongo@2.0.5-rc340.3
|
||||
- mongo@2.2.0-rc340.3
|
||||
- react-fast-refresh@0.3.0-rc340.3
|
||||
- rspack@1.0.0-rc340.3
|
||||
- shell-server@0.7.0-rc340.3
|
||||
- standard-minifier-css@1.10.0-rc340.3
|
||||
- standard-minifier-js@3.2.0-rc340.3
|
||||
- standard-minifiers@1.2.0-rc340.3
|
||||
- static-html@1.5.0-rc340.3
|
||||
- test-in-browser@1.5.0-rc340.3
|
||||
- tools-core@1.0.0-rc340.3
|
||||
- typescript@5.9.3-rc340.3
|
||||
- webapp@2.1.0-rc340.3
|
||||
- meteor-tool@3.4.0-rc.3
|
||||
- accounts-base@3.2.0
|
||||
- accounts-password@3.2.2
|
||||
- accounts-ui-unstyled@1.8.0
|
||||
- accounts-ui@1.5.0
|
||||
- babel-compiler@7.13.0
|
||||
- boilerplate-generator@2.1.0
|
||||
- ecmascript@0.17.0
|
||||
- meteor@2.2.0
|
||||
- minifier-js@3.1.0
|
||||
- minimongo@2.0.5
|
||||
- mongo@2.2.0
|
||||
- react-fast-refresh@0.3.0
|
||||
- rspack@1.0.0
|
||||
- shell-server@0.7.0
|
||||
- standard-minifier-css@1.10.0
|
||||
- standard-minifier-js@3.2.0
|
||||
- standard-minifiers@1.2.0
|
||||
- static-html@1.5.0
|
||||
- test-in-browser@1.5.0
|
||||
- tools-core@1.0.0
|
||||
- typescript@5.9.3
|
||||
- webapp@2.1.0
|
||||
- meteor-tool@3.4.0
|
||||
|
||||
#### Bumped NPM Packages
|
||||
|
||||
- @meteorjs/rspack@0.3.56
|
||||
- @meteorjs/rspack@1.0.0
|
||||
|
||||
#### Special thanks to
|
||||
|
||||
|
||||
@@ -10,7 +10,152 @@ This is a complete history of changes for Meteor releases.
|
||||
|
||||
[//]: # (go to meteor/docs/generators/changelog/docs)
|
||||
|
||||
## v3.4.0, 30-01-2026
|
||||
|
||||
### Highlights
|
||||
|
||||
- **Meteor-Rspack Integration**, [PR#13910](https://github.com/meteor/meteor/pull/13910)
|
||||
- ⚡ New `rspack` atmosphere package (requires at least rspack@1.7.1)
|
||||
Orchestrates the full Rspack setup, including the development server and production builds.
|
||||
- 📦 New `@meteorjs/rspack` npm package
|
||||
Provides a default rspack.config.js. Applications can extend or override this configuration with their own.
|
||||
- 🛠️ New `tools-core` package
|
||||
Supplies runtime utilities for Meteor, designed to support this integration and future tool integrations.
|
||||
- 🔑 Core updates
|
||||
Enhanced Meteor’s core to support the Rspack integration.
|
||||
- ✅ Test suite additions
|
||||
Introduced tests for app skeletons and Meteor-Rspack features to ensure quality and reliability.
|
||||
- 📃 [Documentation](https://deploy-preview-13915.docs-online.meteor.com/about/modern-build-stack/rspack-bundler-integration.html)
|
||||
Complete documentation section covering all details of the Meteor-Rspack integration, including migration guides, configuration helpers and more.
|
||||
- Adopting Rspack gives you a faster build experience
|
||||
- Adopting Rspack produces smaller bundle sizes through advanced tree shaking
|
||||
- Adopting Rspack lets you extend your app with modern setups and tooling
|
||||
- Support for `devOnly` packages and `Npm.devDepends` to optimize production builds, [PR#13797](https://github.com/meteor/meteor/pull/13797)
|
||||
- Introduced `Meteor.deferDev` to optimize server startup during development, [PR#14006](https://github.com/meteor/meteor/pull/14006)
|
||||
- Optimize react-meteor-data Suspense hooks and isEqual checks, [PR#456](https://github.com/meteor/react-packages/pull/456)
|
||||
- Meteor runtime now shows `--raw-logs` by default, use `--timestamps` to keep timestamps, [PR#13944](https://github.com/meteor/meteor/pull/13944)
|
||||
- Integrate `collection-extensions` into core, [PR#13830](https://github.com/meteor/meteor/pull/13830)
|
||||
- Fix OPLOG includeCollections/excludeCollections when admin.$cmd happens, [PR#13949](https://github.com/meteor/meteor/pull/13949)
|
||||
- Report Mongo SIGILL crash errors, [PR#13930](https://github.com/meteor/meteor/pull/13930)
|
||||
- Fix bulk remove in LocalCollection to remove all items, [PR#13965](https://github.com/meteor/meteor/pull/13965)
|
||||
- Treat web.cordova as a modern architecture, [PR#13983](https://github.com/meteor/meteor/pull/13983)
|
||||
- Improve and beautify server error messages, [PR#13848](https://github.com/meteor/meteor/pull/13848)
|
||||
- Upgrade Accounts UI CSS (breaking visual change for accounts-ui users), [PR#13840](https://github.com/meteor/meteor/pull/13840)
|
||||
- Support NonEmptyString to check package, [#12852](https://github.com/meteor/meteor/pull/12852)
|
||||
- Update TypeScript definitions for async support in accounts-base, [PR#13987](https://github.com/meteor/meteor/pull/13987)
|
||||
- Fix an error when files have identical names with different cases, [PR#13958](https://github.com/meteor/meteor/pull/13958)
|
||||
- Add experimental config disableBoilerplateResponse to improve React SSR, [PR#13855](https://github.com/meteor/meteor/pull/13855)
|
||||
- Upgrade to Node v22.22.0, TypeScript 5.9.2 and SWC 1.15.3, [PR#13997](https://github.com/meteor/meteor/pull/13997) and [PR#13760](https://github.com/meteor/meteor/pull/13760)
|
||||
|
||||
All Merged PRs@[GitHub PRs 3.4](https://github.com/meteor/meteor/pulls?q=is%3Apr+is%3Amerged+base%3Arelease-3.4)
|
||||
|
||||
React Packages:
|
||||
- [react-meteor-data@4.0.1](https://github.com/meteor/react-packages/blob/master/packages/react-meteor-data/CHANGELOG.md#v401-2026-1-30)
|
||||
- [react-template-helper@0.4.0](https://github.com/meteor/react-packages/blob/master/packages/react-template-helper/CHANGELOG.md#v040-2026-1-30)
|
||||
|
||||
#### Breaking Changes
|
||||
|
||||
- `accounts-ui` CSS has changed, [PR#13840](https://github.com/meteor/meteor/pull/13840)
|
||||
|
||||
#### Internal API changes
|
||||
|
||||
N/A
|
||||
|
||||
#### Migration Steps
|
||||
|
||||
Please run the following command to update your project:
|
||||
|
||||
```bash
|
||||
meteor update --release 3.4-rc.3
|
||||
```
|
||||
|
||||
To apply `react-meteor-data` changes:
|
||||
|
||||
```bash
|
||||
meteor add react-meteor-data@4.0.1
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Add this to your `package.json` to enable the new modern build stack:**
|
||||
|
||||
```json
|
||||
"meteor": {
|
||||
"modern": true
|
||||
}
|
||||
```
|
||||
|
||||
Check out [the requirements for Meteor Bundler optimizations](https://deploy-preview-13915.docs-online.meteor.com/about/modern-build-stack/meteor-bundler-optimizations.html#requirements) on existing apps.
|
||||
|
||||
**Add `rspack` package to enable the Rspack Bundler integration:**
|
||||
|
||||
```bash
|
||||
meteor add rspack
|
||||
```
|
||||
|
||||
> This package is added by default for new apps.
|
||||
|
||||
Check out [the requirements for Rspack Bundler integration](https://deploy-preview-13915.docs-online.meteor.com/about/modern-build-stack/rspack-bundler-integration.html#requirements) on existing apps.
|
||||
|
||||
### [📃 Modern Build Stack docs](https://deploy-preview-13915.docs-online.meteor.com/about/modern-build-stack.html)
|
||||
|
||||
### [☄️ Meteor Bundler optimizations docs](https://deploy-preview-13915.docs-online.meteor.com/about/modern-build-stack/meteor-bundler-optimizations.html)
|
||||
|
||||
### [⚡ Rspack Bundler integration docs](https://deploy-preview-13915.docs-online.meteor.com/about/modern-build-stack/rspack-bundler-integration.html)
|
||||
|
||||
If you find any issues, please report them to the [Meteor issues tracker](https://github.com/meteor/meteor).
|
||||
|
||||
#### Bumped Meteor Packages
|
||||
|
||||
- accounts-base@3.2.0
|
||||
- accounts-password@3.2.2
|
||||
- accounts-ui-unstyled@1.8.0
|
||||
- accounts-ui@1.5.0
|
||||
- babel-compiler@7.13.0
|
||||
- boilerplate-generator@2.1.0
|
||||
- ecmascript@0.17.0
|
||||
- meteor@2.2.0
|
||||
- minifier-js@3.1.0
|
||||
- minimongo@2.0.5
|
||||
- mongo@2.2.0
|
||||
- react-fast-refresh@0.3.0
|
||||
- rspack@1.0.0
|
||||
- shell-server@0.7.0
|
||||
- standard-minifier-css@1.10.0
|
||||
- standard-minifier-js@3.2.0
|
||||
- standard-minifiers@1.2.0
|
||||
- static-html@1.5.0
|
||||
- test-in-browser@1.5.0
|
||||
- tools-core@1.0.0
|
||||
- typescript@5.9.3
|
||||
- webapp@2.1.0
|
||||
- meteor-tool@3.4.0
|
||||
|
||||
#### Bumped NPM Packages
|
||||
|
||||
- @meteorjs/rspack@1.0.0
|
||||
|
||||
#### Special thanks to
|
||||
|
||||
✨✨✨
|
||||
|
||||
- [@nachocodoner](https://github.com/nachocodoner)
|
||||
- [@italojs](https://github.com/italojs)
|
||||
- [@Grubba27](https://github.com/Grubba27)
|
||||
- [@welkinwong](https://github.com/welkinwong)
|
||||
- [@harryadel](https://github.com/harryadel)
|
||||
- [@vparpoil](https://github.com/vparpoil)
|
||||
- [@StorytellerCZ](https://github.com/StorytellerCZ)
|
||||
- [@turoar23](https://github.com/turoar23)
|
||||
- [@DipakHalkude](https://github.com/DipakHalkude)
|
||||
- [@sanki92](https://github.com/sanki92)
|
||||
- [@evolross](https://github.com/evolross)
|
||||
- [@malua](https://github.com/malua)
|
||||
- [@tmeyer24](https://github.com/tmeyer24)
|
||||
- [@jeetburman](https://github.com/jeetburman)
|
||||
- [@copleykj](https://github.com/copleykj)
|
||||
|
||||
✨✨✨
|
||||
|
||||
## v3.3.2, 01-09-2025
|
||||
|
||||
@@ -81,6 +226,7 @@ If you find any issues, please report them to the [Meteor issues tracker](https:
|
||||
- [@copleykj](https://github.com/copleykj)
|
||||
|
||||
✨✨✨
|
||||
|
||||
## v3.3.1, 05-08-2025
|
||||
|
||||
### Highlights
|
||||
|
||||
@@ -12,7 +12,13 @@ The easiest way to setup Meteor with Blaze is by using the command `meteor creat
|
||||
meteor create --blaze simple-todos-blaze
|
||||
```
|
||||
|
||||
Meteor will create all the necessary files for you.
|
||||
Meteor will create all the necessary files for you. With `--blaze` option, Meteor generates a project using Blaze and Rspack as the bundler, and this is the approach walked through in this tutorial. Using [the Rspack bundler](../../about/modern-build-stack/rspack-bundler-integration.md) is the default convention in Meteor 3.4+, as it improves dev speed, enables more build features, and provides better control over bundle size and configuration.
|
||||
|
||||
We provide the final app for both the Rspack and Meteor bundlers. This guide follows the Rspack version and reaches the same final state. The Meteor bundler version is for those who prefer the legacy bundler.
|
||||
|
||||
::: info
|
||||
You can find the final version of this app on GitHub using the [Rspack bundler](https://github.com/meteor/meteor3-blaze/tree/3.4-rspack) or the [Meteor bundler](https://github.com/meteor/meteor3-blaze/tree/3.4-meteor).
|
||||
:::
|
||||
|
||||
The files located in the `client` directory are setting up your client side (web), you can see for example `client/main.html` where Meteor is rendering your App main component into the HTML.
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ You have completed the tutorial!
|
||||
By now, you should have a good understanding of working with Meteor and Blaze.
|
||||
|
||||
::: info
|
||||
You can find the final version of this app in our [GitHub repository](https://github.com/meteor/meteor3-blaze).
|
||||
You can find the final version of this app on GitHub using the [Rspack bundler](https://github.com/meteor/meteor3-blaze/tree/3.4-rspack) or the [Meteor bundler](https://github.com/meteor/meteor3-blaze/tree/3.4-meteor).
|
||||
:::
|
||||
|
||||
Here are some options for what you can do next:
|
||||
|
||||
@@ -18,7 +18,13 @@ The easiest way to setup Meteor with React is by using the command `meteor creat
|
||||
meteor create simple-todos-react
|
||||
```
|
||||
|
||||
Meteor will create all the necessary files for you.
|
||||
Meteor will create all the necessary files for you. By default, Meteor generates a project using React and Rspack as the bundler, and this is the approach walked through in this tutorial. Using [the Rspack bundler](../../about/modern-build-stack/rspack-bundler-integration.md) is the default convention in Meteor 3.4+, as it improves dev speed, enables more build features, and provides better control over bundle size and configuration.
|
||||
|
||||
We provide the final app for both the Rspack and Meteor bundlers. This guide follows the Rspack version and reaches the same final state. The Meteor bundler version is for those who prefer the legacy bundler.
|
||||
|
||||
::: info
|
||||
You can find the final version of this app on GitHub using the [Rspack bundler](https://github.com/meteor/meteor3-react/tree/3.4-rspack) or the [Meteor bundler](https://github.com/meteor/meteor3-react/tree/3.4-meteor).
|
||||
:::
|
||||
|
||||
The files located in the `client` directory are setting up your client side (web), you can see for example `client/main.jsx` where Meteor is rendering your App main component into the HTML.
|
||||
|
||||
@@ -115,6 +121,12 @@ Remove the `Hello` and `Info` from your `App` component, remember to also remove
|
||||
|
||||
### 1.6: Hot Module Replacement {#hot-module-replacement}
|
||||
|
||||
Meteor by default when using React is already adding for you a package called `hot-module-replacement`. This package updates the javascript modules in a running app that were modified during a rebuild. Reduces the feedback cycle while developing so you can view and test changes quicker (it even updates the app before the build has finished). You are also not going to lose the state, your app code will be updated and your state will be the same.
|
||||
Starting from Meteor 3.4+, new apps use Rspack by default. It comes with built-in Hot Module Replacement (HMR) and includes `react-refresh` through a plugin. This lets you see changes as you make them, even inside React components, without losing component state.
|
||||
|
||||
In previous versions, Meteor already added the `hot-module-replacement` Atmosphere package when using React. This updates JavaScript modules in a running app during rebuilds. It reduces the feedback cycle during development so you can see and test changes faster, sometimes before the build finishes. Your app code updates while keeping the same state.
|
||||
|
||||
::: warning
|
||||
`hot-module-replacement` can still be added to a Meteor app when using Meteor-Rspack with the `rspack` Atmosphere package enabled (3.4+). It acts as the HMR strategy for modules that are still compiled by the Meteor bundler, such as Atmosphere packages or any files explicitly kept on the Meteor bundler side.
|
||||
:::
|
||||
|
||||
In the next step, we are going to work with our MongoDB database to store our tasks.
|
||||
|
||||
@@ -5,7 +5,7 @@ You have completed the tutorial!
|
||||
By now, you should have a good understanding of working with Meteor and React.
|
||||
|
||||
::: info
|
||||
You can find the final version of this app in our [GitHub repository](https://github.com/meteor/meteor3-react).
|
||||
You can find the final version of this app on GitHub using the [Rspack bundler](https://github.com/meteor/meteor3-react/tree/3.4-rspack) or the [Meteor bundler](https://github.com/meteor/meteor3-react/tree/3.4-meteor).
|
||||
:::
|
||||
|
||||
Here are some options for what you can do next:
|
||||
|
||||
@@ -12,7 +12,13 @@ The easiest way to setup Meteor with Solid is by using the command `meteor creat
|
||||
meteor create --solid simple-todos-solid
|
||||
```
|
||||
|
||||
Meteor will create all the necessary files for you.
|
||||
Meteor will create all the necessary files for you. With `--solid` option, Meteor generates a project using Solid and Rspack as the bundler, and this is the approach walked through in this tutorial. Using [the Rspack bundler](../../about/modern-build-stack/rspack-bundler-integration.md) is the default convention in Meteor 3.4+, as it improves dev speed, enables more build features, and provides better control over bundle size and configuration.
|
||||
|
||||
We provide the final app for both the Rspack and Meteor bundlers. This guide follows the Rspack version and reaches the same final state. The Meteor bundler version is for those who prefer the legacy bundler.
|
||||
|
||||
::: info
|
||||
You can find the final version of this app on GitHub using the [Rspack bundler](https://github.com/meteor/meteor3-solid/tree/3.4-rspack) or the [Meteor bundler](https://github.com/meteor/meteor3-solid/tree/3.4-meteor).
|
||||
:::
|
||||
|
||||
The files located in the `client` directory are setting up your client side (web), you can see for example `client/main.html` where Meteor is rendering your App main component into the HTML.
|
||||
|
||||
@@ -183,13 +189,20 @@ Now your app should scale properly on mobile devices and look like this:
|
||||
|
||||
### 1.7: Hot Module Replacement
|
||||
|
||||
Meteor uses a package called [hot-module-replacement](https://docs.meteor.com/packages/hot-module-replacement) which is already added for you. This package updates the javascript modules in a running app that were modified during a rebuild. Reduces the feedback cycle while developing, so you can view and test changes quicker (it even updates the app before the build has finished). You are also not going to lose the state, your app code will be updated, and your state will be the same.
|
||||
|
||||
By default, when using Solid with Meteor, reactivity is handled by integrating Solid's fine-grained signals and effects with Meteor's Tracker system. This allows real-time updates of the user's screen as data changes in the database without them having to manually refresh. You can achieve this using Tracker.autorun combined with Solid's createEffect or signals for seamless reactivity.
|
||||
Starting from Meteor 3.4+, new apps use Rspack by default. It includes built-in Hot Module Replacement (HMR) and `solid-refresh`. This lets you see changes as you make them, even inside Solid components, without losing component state.
|
||||
|
||||
If you use a previous Meteor version, you can opt in to the [hot-module-replacement](https://docs.meteor.com/packages/hot-module-replacement) which is already added for you. This package updates the javascript modules in a running app that were modified during a rebuild. Reduces the feedback cycle while developing, so you can view and test changes quicker (it even updates the app before the build has finished). You are also not going to lose the state, your app code will be updated, and your state will be the same.
|
||||
|
||||
::: warning
|
||||
`hot-module-replacement` can still be added to a Meteor app when using Meteor-Rspack with the `rspack` Atmosphere package enabled (3.4+). It acts as the HMR strategy for modules that are still compiled by the Meteor bundler, such as Atmosphere packages or any files explicitly kept on the Meteor bundler side.
|
||||
:::
|
||||
|
||||
By default, when using Solid with Meteor in previous versions, reactivity is handled by integrating Solid's fine-grained signals and effects with Meteor's Tracker system. This allows real-time updates of the user's screen as data changes in the database without them having to manually refresh. You can achieve this using Tracker.autorun combined with Solid's createEffect or signals for seamless reactivity.
|
||||
|
||||
> You can read more about packages [here](https://docs.meteor.com/packages/).
|
||||
|
||||
You should also add the package [dev-error-overlay](https://atmospherejs.com/meteor/dev-error-overlay) at this point, so you can see the errors in your web browser.
|
||||
You can also opt in to add the package [dev-error-overlay](https://atmospherejs.com/meteor/dev-error-overlay) when using previous versions, so you can see the errors in your web browser, so you can see the errors in your web browser.
|
||||
|
||||
```shell
|
||||
meteor add dev-error-overlay
|
||||
|
||||
@@ -5,7 +5,7 @@ You have completed the tutorial!
|
||||
By now, you should have a good understanding of working with Meteor and Solid.
|
||||
|
||||
::: info
|
||||
You can find the final version of this app in our [GitHub repository](https://github.com/meteor/meteor3-solid).
|
||||
You can find the final version of this app on GitHub using the [Rspack bundler](https://github.com/meteor/meteor3-solid/tree/3.4-rspack) or the [Meteor bundler](https://github.com/meteor/meteor3-solid/tree/3.4-meteor).
|
||||
:::
|
||||
|
||||
Here are some options for what you can do next:
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
In this tutorial, we will create a simple To-Do app using [Solid](https://www.solidjs.com/) and Meteor 3.0. Meteor works well with other frameworks like [React](https://react.dev/), [Vue 3](https://vuejs.org/), [Svelte](https://svelte.dev/), and [Blaze](https://www.blazejs.org/).
|
||||
|
||||
Solid is a modern UI framework that compiles your reactive code to highly efficient DOM updates at runtime, resulting in smaller bundles and exceptional performance without a virtual DOM. Launched in 2020, it has gained popularity for its fine-grained reactivity, simplicity, and lightweight nature. Compared to older approaches, Solid eliminates much of the boilerplate and runtime overhead found in frameworks like React by using a compiler that optimizes updates precisely where needed. It employs a declarative JSX syntax with built-in primitives like signals for state management, effects, and resources that can be seamlessly integrated with Meteor's reactive data sources like[Tracker](https://docs.meteor.com/api/tracker.html) and [Minimongo](https://docs.meteor.com/api/collections.html). This means your UI updates automatically as data changes, without manual DOM manipulation.
|
||||
Solid is a modern UI framework that compiles your reactive code to highly efficient DOM updates at runtime, resulting in smaller bundles and exceptional performance without a virtual DOM. Launched in 2020, it has gained popularity for its fine-grained reactivity, simplicity, and lightweight nature. Compared to older approaches, Solid eliminates much of the boilerplate and runtime overhead found in frameworks like React by using a compiler that optimizes updates precisely where needed. It employs a declarative JSX syntax with built-in primitives like signals for state management, effects, and resources that can be seamlessly integrated with Meteor's reactive data sources like [Tracker](https://docs.meteor.com/api/tracker.html) and [Minimongo](https://docs.meteor.com/api/collections.html). This means your UI updates automatically as data changes, without manual DOM manipulation.
|
||||
|
||||
If you're new and not sure what UI framework to use, Solid is a great place to start—it's easy to learn (especially if you're familiar with React-like JSX), highly performant with fine-grained reactivity, and has a growing community. You can still leverage Meteor packages designed for other frameworks, like [accounts-ui](https://docs.meteor.com/packages/accounts-ui), even in a Solid app.
|
||||
|
||||
|
||||
@@ -12,7 +12,13 @@ The easiest way to setup Meteor with Svelte is by using the command `meteor crea
|
||||
meteor create --svelte simple-todos-svelte
|
||||
```
|
||||
|
||||
Meteor will create all the necessary files for you.
|
||||
Meteor will create all the necessary files for you. With `--svelte` option, Meteor generates a project using Svelte 5 and Rspack as the bundler, and this is the approach walked through in this tutorial. Using [the Rspack bundler](../../about/modern-build-stack/rspack-bundler-integration.md) is the default convention in Meteor 3.4+, as it improves dev speed, enables more build features, and provides better control over bundle size and configuration.
|
||||
|
||||
We provide the final app for both the Rspack and Meteor bundlers. This guide follows the Rspack version and reaches the same final state. The Meteor bundler version is for those who prefer the legacy bundler.
|
||||
|
||||
::: info
|
||||
You can find the final version of this app on GitHub using the [Rspack bundler](https://github.com/meteor/meteor3-svelte/tree/3.4-rspack) or the [Meteor bundler](https://github.com/meteor/meteor3-svelte/tree/3.4-meteor).
|
||||
:::
|
||||
|
||||
The files located in the `client` directory are setting up your client side (web), you can see for example `client/main.html` where Meteor is rendering your App main component into the HTML.
|
||||
|
||||
@@ -56,11 +62,29 @@ The `client/main.js` file should import and render the main Svelte component:
|
||||
```js [client/main.js]
|
||||
import { Meteor } from 'meteor/meteor';
|
||||
import App from '../imports/ui/App.svelte';
|
||||
import { mount, unmount } from 'svelte';
|
||||
|
||||
let app; // will hold the mounted instance
|
||||
|
||||
Meteor.startup(() => {
|
||||
new App({
|
||||
target: document.getElementById('app')
|
||||
});
|
||||
const target = document.getElementById('app');
|
||||
|
||||
// (Re)mount
|
||||
app = mount(App, { target });
|
||||
|
||||
// Clean up on HMR so we don't double-mount
|
||||
if (import.meta.webpackHot) {
|
||||
import.meta.webpackHot.accept();
|
||||
import.meta.webpackHot.dispose(() => {
|
||||
if (app) {
|
||||
// pass the instance you got from mount()
|
||||
unmount(app, { outro: false }); // set outro:true if you want transitions
|
||||
app = null;
|
||||
}
|
||||
// optional: clear target to be extra safe
|
||||
target.innerHTML = '';
|
||||
});
|
||||
}
|
||||
});
|
||||
```
|
||||
:::
|
||||
@@ -119,7 +143,7 @@ tag. In the code above, we defined a `tasks` array directly in the component. In
|
||||
<span v-pre>{#each tasks as task}</span> to iterate over the array and display each task's `text`
|
||||
property using <span v-pre>{task.text}</span>
|
||||
|
||||
For Meteor-specific reactivity (like subscriptions and collections), Svelte in Meteor uses special syntax like `$m:` for reactive statements that integrate with Meteor's Tracker. We'll cover that in later steps.
|
||||
For Meteor-specific reactivity (like subscriptions and collections), Svelte in Meteor uses Tracker and reactive variables to integrate with Meteor's reactivity system. We'll cover that in later steps.
|
||||
|
||||
### 1.6: Mobile Look
|
||||
|
||||
@@ -166,13 +190,23 @@ Now your app should scale properly on mobile devices and look like this:
|
||||
|
||||
### 1.7: Hot Module Replacement
|
||||
|
||||
Meteor uses a package called [hot-module-replacement](https://docs.meteor.com/packages/hot-module-replacement) which is already added for you. This package updates the javascript modules in a running app that were modified during a rebuild. Reduces the feedback cycle while developing, so you can view and test changes quicker (it even updates the app before the build has finished). You are also not going to lose the state, your app code will be updated, and your state will be the same.
|
||||
Starting from Meteor 3.4+, new apps use Rspack by default. It includes built-in Hot Module Replacement (HMR) and solid-refresh. This lets you see changes as you make them, even inside Solid components, without losing component state.
|
||||
|
||||
By default, when using Svelte with Meteor, reactivity is handled by packages like `zodern:melte` (which integrates Svelte with Meteor). This allows real-time updates of the users screen as data changes in the database without them having to manually refresh. You can read more about it [here](https://atmospherejs.com/zodern/melte).
|
||||
If you use a previous Meteor version, you can opt in to the [hot-module-replacement](https://docs.meteor.com/packages/hot-module-replacement) which is already added for you. This package updates the javascript modules in a running app that were modified during a rebuild. Reduces the feedback cycle while developing, so you can view and test changes quicker (it even updates the app before the build has finished). You are also not going to lose the state, your app code will be updated, and your state will be the same.
|
||||
|
||||
::: warning
|
||||
`hot-module-replacement` can still be added to a Meteor app when using Meteor-Rspack with the `rspack` Atmosphere package enabled (3.4+). It acts as the HMR strategy for modules that are still compiled by the Meteor bundler, such as Atmosphere packages or any files explicitly kept on the Meteor bundler side.
|
||||
:::
|
||||
|
||||
In previous Meteor versions, reactivity with Svelte was often handled by packages like `zodern:melte`, which provided sugar syntax like `$m:` for reactive statements. However, with Meteor 3.4+ using the Rspack bundler, we now use a more standard approach that's compatible with the latest Svelte versions.
|
||||
|
||||
> You can read more about packages [here](https://docs.meteor.com/packages/).
|
||||
|
||||
You should also add the package [dev-error-overlay](https://atmospherejs.com/meteor/dev-error-overlay) at this point, so you can see the errors in your web browser.
|
||||
::: warning
|
||||
`zodern:melte` package is not compatible with Meteor Rspack apps (Meteor 3.4+ using the rspack package). This transition away from `zodern:melte` brings significant advantages, including support for the latest versions of Svelte 5 and better compatibility with the broader Svelte ecosystem. While we lose some sugar syntax helpers, we gain a more standard and future-proof implementation that will evolve alongside Svelte itself.
|
||||
:::
|
||||
|
||||
You can also opt in to add the package [dev-error-overlay](https://atmospherejs.com/meteor/dev-error-overlay) when using previous versions, so you can see the errors in your web browser.
|
||||
|
||||
```shell
|
||||
meteor add dev-error-overlay
|
||||
|
||||
@@ -73,11 +73,35 @@ In your `App.svelte` file, import the `TasksCollection` file and, instead of ret
|
||||
```html [imports/ui/App.svelte]
|
||||
<script>
|
||||
import { Meteor } from "meteor/meteor";
|
||||
import { Tracker } from "meteor/tracker";
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import { TasksCollection } from "../api/TasksCollection";
|
||||
|
||||
$m: handle = Meteor.subscribe("tasks");
|
||||
$m: subIsReady = handle.ready();
|
||||
$m: tasks = TasksCollection.find().fetch();
|
||||
// Reactive state
|
||||
let handle;
|
||||
let subIsReady = false;
|
||||
let tasks = [];
|
||||
|
||||
let computation;
|
||||
|
||||
onMount(() => {
|
||||
handle = Meteor.subscribe("tasks");
|
||||
|
||||
computation = Tracker.autorun(() => {
|
||||
subIsReady = handle.ready();
|
||||
tasks = TasksCollection.find().fetch();
|
||||
});
|
||||
|
||||
return () => {
|
||||
computation?.stop?.();
|
||||
handle?.stop?.();
|
||||
};
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
computation?.stop?.();
|
||||
handle?.stop?.();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
@@ -135,14 +159,20 @@ const insertTask = taskText => TasksCollection.insertAsync({ text: taskText });
|
||||
```
|
||||
:::
|
||||
|
||||
The only thing left is subscribe to this publication, which we've already added in `App.svelte` using:
|
||||
The only thing left is subscribe to this publication, which we've already added in `App.svelte` using Tracker and lifecycle hooks:
|
||||
|
||||
::: code-group
|
||||
|
||||
```javascript [imports/ui/App.svelte]
|
||||
...
|
||||
|
||||
$m: handle = Meteor.subscribe("tasks");
|
||||
onMount(() => {
|
||||
handle = Meteor.subscribe("tasks");
|
||||
|
||||
computation = Tracker.autorun(() => {
|
||||
// Reactive code here
|
||||
});
|
||||
});
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
@@ -53,6 +53,8 @@ Altogether, our file should look like:
|
||||
```html [imports/ui/App.svelte]
|
||||
<script>
|
||||
import { Meteor } from "meteor/meteor";
|
||||
import { Tracker } from "meteor/tracker";
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import { TasksCollection } from "../api/TasksCollection";
|
||||
|
||||
let newTask = '';
|
||||
@@ -68,9 +70,31 @@ Altogether, our file should look like:
|
||||
}
|
||||
}
|
||||
|
||||
$m: handle = Meteor.subscribe("tasks");
|
||||
$m: subIsReady = handle.ready();
|
||||
$m: tasks = TasksCollection.find().fetch();
|
||||
// Reactive state
|
||||
let handle;
|
||||
let subIsReady = false;
|
||||
let tasks = [];
|
||||
|
||||
let computation;
|
||||
|
||||
onMount(() => {
|
||||
handle = Meteor.subscribe("tasks");
|
||||
|
||||
computation = Tracker.autorun(() => {
|
||||
subIsReady = handle.ready();
|
||||
tasks = TasksCollection.find().fetch();
|
||||
});
|
||||
|
||||
return () => {
|
||||
computation?.stop?.();
|
||||
handle?.stop?.();
|
||||
};
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
computation?.stop?.();
|
||||
handle?.stop?.();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
@@ -205,7 +229,17 @@ Now you just need to make a change that will make users happy: we need to show t
|
||||
<script>
|
||||
// ... other imports and code
|
||||
|
||||
$m: tasks = TasksCollection.find({}, { sort: { createdAt: -1 } }).fetch(); // [!code highlight]
|
||||
// Update the Tracker.autorun to include sorting
|
||||
onMount(() => {
|
||||
handle = Meteor.subscribe("tasks");
|
||||
|
||||
computation = Tracker.autorun(() => {
|
||||
subIsReady = handle.ready();
|
||||
tasks = TasksCollection.find({}, { sort: { createdAt: -1 } }).fetch(); // [!code highlight]
|
||||
});
|
||||
|
||||
// ... rest of onMount remains the same
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- markup remains the same -->
|
||||
|
||||
@@ -38,6 +38,8 @@ Now, update `App.svelte` to import and use the `Task` component in the <span v-p
|
||||
```html [imports/ui/App.svelte]
|
||||
<script>
|
||||
import { Meteor } from "meteor/meteor";
|
||||
import { Tracker } from "meteor/tracker";
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import { TasksCollection } from "../api/TasksCollection";
|
||||
import "/imports/api/TasksMethods";
|
||||
import Task from "./Task.svelte"; // [!code highlight]
|
||||
@@ -55,9 +57,31 @@ Now, update `App.svelte` to import and use the `Task` component in the <span v-p
|
||||
}
|
||||
}
|
||||
|
||||
$m: handle = Meteor.subscribe("tasks");
|
||||
$m: subIsReady = handle.ready();
|
||||
$m: tasks = TasksCollection.find({}, { sort: { createdAt: -1 } }).fetch();
|
||||
// Reactive state
|
||||
let handle;
|
||||
let subIsReady = false;
|
||||
let tasks = [];
|
||||
|
||||
let computation;
|
||||
|
||||
onMount(() => {
|
||||
handle = Meteor.subscribe("tasks");
|
||||
|
||||
computation = Tracker.autorun(() => {
|
||||
subIsReady = handle.ready();
|
||||
tasks = TasksCollection.find({}, { sort: { createdAt: -1 } }).fetch();
|
||||
});
|
||||
|
||||
return () => {
|
||||
computation?.stop?.();
|
||||
handle?.stop?.();
|
||||
};
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
computation?.stop?.();
|
||||
handle?.stop?.();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
@@ -122,7 +146,17 @@ If your computer is fast enough, it's possible that when it sets up the default
|
||||
<script>
|
||||
// ... other code
|
||||
|
||||
$m: tasks = TasksCollection.find({}, { sort: { createdAt: -1, _id: -1 } }).fetch(); // [!code highlight]
|
||||
// Update the Tracker.autorun to include sorting by both createdAt and _id
|
||||
onMount(() => {
|
||||
handle = Meteor.subscribe("tasks");
|
||||
|
||||
computation = Tracker.autorun(() => {
|
||||
subIsReady = handle.ready();
|
||||
tasks = TasksCollection.find({}, { sort: { createdAt: -1, _id: -1 } }).fetch(); // [!code highlight]
|
||||
});
|
||||
|
||||
// ... rest of onMount remains the same
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- markup remains the same -->
|
||||
@@ -194,4 +228,3 @@ In a collection, every inserted document has a unique `_id` field that can refer
|
||||
and other fields like `isChecked` and `text`. We use these to call Meteor methods for updating or removing the specific task.
|
||||
|
||||
In the next step, we are going to improve the look of your app using CSS with Flexbox.
|
||||
|
||||
|
||||
@@ -157,6 +157,8 @@ Now you need to add some elements around your components. You are going to add a
|
||||
```html [imports/ui/App.svelte]
|
||||
<script>
|
||||
import { Meteor } from "meteor/meteor";
|
||||
import { Tracker } from "meteor/tracker";
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import { TasksCollection } from "../api/TasksCollection";
|
||||
import "/imports/api/TasksMethods";
|
||||
import Task from "./Task.svelte";
|
||||
@@ -174,9 +176,31 @@ Now you need to add some elements around your components. You are going to add a
|
||||
}
|
||||
}
|
||||
|
||||
$m: handle = Meteor.subscribe("tasks");
|
||||
$m: subIsReady = handle.ready();
|
||||
$m: tasks = TasksCollection.find({}, { sort: { createdAt: -1, _id: -1 } }).fetch();
|
||||
// Reactive state
|
||||
let handle;
|
||||
let subIsReady = false;
|
||||
let tasks = [];
|
||||
|
||||
let computation;
|
||||
|
||||
onMount(() => {
|
||||
handle = Meteor.subscribe("tasks");
|
||||
|
||||
computation = Tracker.autorun(() => {
|
||||
subIsReady = handle.ready();
|
||||
tasks = TasksCollection.find({}, { sort: { createdAt: -1, _id: -1 } }).fetch();
|
||||
});
|
||||
|
||||
return () => {
|
||||
computation?.stop?.();
|
||||
handle?.stop?.();
|
||||
};
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
computation?.stop?.();
|
||||
handle?.stop?.();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="app">
|
||||
|
||||
@@ -37,9 +37,31 @@ We'll add a `hideCompleted` variable to the `App.svelte` component and a functio
|
||||
hideCompleted = !hideCompleted; // [!code highlight]
|
||||
} // [!code highlight]
|
||||
|
||||
$m: handle = Meteor.subscribe("tasks");
|
||||
$m: subIsReady = handle.ready();
|
||||
$m: tasks = TasksCollection.find({}, { sort: { createdAt: -1, _id: -1 } }).fetch();
|
||||
// Reactive state
|
||||
let handle;
|
||||
let subIsReady = false;
|
||||
let tasks = [];
|
||||
|
||||
let computation;
|
||||
|
||||
onMount(() => {
|
||||
handle = Meteor.subscribe("tasks");
|
||||
|
||||
computation = Tracker.autorun(() => {
|
||||
subIsReady = handle.ready();
|
||||
tasks = TasksCollection.find({}, { sort: { createdAt: -1, _id: -1 } }).fetch();
|
||||
});
|
||||
|
||||
return () => {
|
||||
computation?.stop?.();
|
||||
handle?.stop?.();
|
||||
};
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
computation?.stop?.();
|
||||
handle?.stop?.();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- markup will be updated in next steps -->
|
||||
@@ -122,6 +144,8 @@ Now, update the reactive tasks fetch to apply the filter if `hideCompleted` is t
|
||||
```html [imports/ui/App.svelte]
|
||||
<script>
|
||||
import { Meteor } from "meteor/meteor";
|
||||
import { Tracker } from "meteor/tracker";
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import { TasksCollection } from "../api/TasksCollection";
|
||||
import "/imports/api/TasksMethods";
|
||||
import Task from "./Task.svelte";
|
||||
@@ -144,18 +168,42 @@ Now, update the reactive tasks fetch to apply the filter if `hideCompleted` is t
|
||||
hideCompleted = !hideCompleted;
|
||||
}
|
||||
|
||||
$m: handle = Meteor.subscribe("tasks");
|
||||
$m: subIsReady = handle.ready();
|
||||
// Reactive state
|
||||
let handle;
|
||||
let subIsReady = false;
|
||||
let tasks = [];
|
||||
let incompleteCount = 0;
|
||||
|
||||
// Reactive tasks with filter
|
||||
$m: tasks = TasksCollection.find( // [!code highlight]
|
||||
hideCompleted ? { isChecked: { $ne: true } } : {}, // [!code highlight]
|
||||
{ sort: { createdAt: -1, _id: -1 } } // [!code highlight]
|
||||
).fetch(); // [!code highlight]
|
||||
let computation;
|
||||
|
||||
// Reactive incomplete count // [!code highlight]
|
||||
$m: incompleteCount = TasksCollection.find({ isChecked: { $ne: true } }).count(); // [!code highlight]
|
||||
$m: incompleteDisplay = incompleteCount > 0 ? `(${incompleteCount})` : ''; // [!code highlight]
|
||||
$: incompleteDisplay = incompleteCount > 0 ? `(${incompleteCount})` : '';
|
||||
|
||||
onMount(() => {
|
||||
handle = Meteor.subscribe("tasks");
|
||||
|
||||
computation = Tracker.autorun(() => {
|
||||
subIsReady = handle.ready();
|
||||
|
||||
// Reactive tasks with filter
|
||||
tasks = TasksCollection.find(
|
||||
hideCompleted ? { isChecked: { $ne: true } } : {}, // [!code highlight]
|
||||
{ sort: { createdAt: -1, _id: -1 } } // [!code highlight]
|
||||
).fetch();
|
||||
|
||||
// Reactive incomplete count
|
||||
incompleteCount = TasksCollection.find({ isChecked: { $ne: true } }).count(); // [!code highlight]
|
||||
});
|
||||
|
||||
return () => {
|
||||
computation?.stop?.();
|
||||
handle?.stop?.();
|
||||
};
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
computation?.stop?.();
|
||||
handle?.stop?.();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- markup remains the same -->
|
||||
|
||||
@@ -134,9 +134,19 @@ To achieve this, we will use a conditional block in `App.svelte`:
|
||||
|
||||
```html [imports/ui/App.svelte]
|
||||
<script>
|
||||
// ... other imports and code
|
||||
import { Meteor } from "meteor/meteor";
|
||||
import { Tracker } from "meteor/tracker";
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import { TasksCollection } from "../api/TasksCollection";
|
||||
import "/imports/api/TasksMethods";
|
||||
import Task from "./Task.svelte";
|
||||
import Login from "./Login.svelte";
|
||||
|
||||
$m: currentUser = Meteor.user(); // Reactive current user // [!code highlight]
|
||||
let newTask = '';
|
||||
let hideCompleted = false;
|
||||
|
||||
// Reactive state
|
||||
let currentUser = null;
|
||||
</script>
|
||||
|
||||
<div class="app">
|
||||
@@ -289,7 +299,7 @@ Meteor.publish("tasks", function () {
|
||||
if (userId) {
|
||||
result = TasksCollection.find({ userId });
|
||||
}
|
||||
|
||||
|
||||
return result;
|
||||
});
|
||||
```
|
||||
@@ -303,22 +313,44 @@ Now let's check if we have a `currentUser` before trying to fetch any data. Upda
|
||||
<script>
|
||||
// ... other imports and code
|
||||
|
||||
$m: handle = Meteor.subscribe("tasks");
|
||||
$m: subIsReady = handle.ready();
|
||||
// Reactive state
|
||||
let handle;
|
||||
let subIsReady = false;
|
||||
let currentUser = null;
|
||||
let tasks = [];
|
||||
let incompleteCount = 0;
|
||||
|
||||
$m: currentUser = Meteor.user(); // Reactive current user
|
||||
let computation;
|
||||
|
||||
$m: tasks = currentUser // [!code highlight]
|
||||
? TasksCollection.find( // [!code highlight]
|
||||
hideCompleted ? { isChecked: { $ne: true } } : {}, // [!code highlight]
|
||||
{ sort: { createdAt: -1, _id: -1 } } // [!code highlight]
|
||||
).fetch() // [!code highlight]
|
||||
: []; // [!code highlight]
|
||||
|
||||
$: incompleteCount = currentUser // [!code highlight]
|
||||
? TasksCollection.find({ isChecked: { $ne: true } }).count() // [!code highlight]
|
||||
: 0; // [!code highlight]
|
||||
$: incompleteDisplay = incompleteCount > 0 ? `(${incompleteCount})` : '';
|
||||
|
||||
onMount(() => {
|
||||
handle = Meteor.subscribe("tasks");
|
||||
|
||||
computation = Tracker.autorun(() => {
|
||||
subIsReady = handle.ready();
|
||||
currentUser = Meteor.user();
|
||||
|
||||
if (currentUser) {
|
||||
const filter = hideCompleted ? { isChecked: { $ne: true } } : {};
|
||||
tasks = TasksCollection.find(filter, { sort: { createdAt: -1, _id: -1 } }).fetch();
|
||||
incompleteCount = TasksCollection.find({ isChecked: { $ne: true } }).count();
|
||||
} else {
|
||||
tasks = [];
|
||||
incompleteCount = 0;
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
computation?.stop?.();
|
||||
handle?.stop?.();
|
||||
};
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
computation?.stop?.();
|
||||
handle?.stop?.();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- markup remains the same -->
|
||||
|
||||
@@ -5,7 +5,7 @@ You have completed the tutorial!
|
||||
By now, you should have a good understanding of working with Meteor and Svelte.
|
||||
|
||||
::: info
|
||||
You can find the final version of this app in our [GitHub repository](https://github.com/meteor/meteor3-svelte).
|
||||
You can find the final version of this app on GitHub using the [Rspack bundler](https://github.com/meteor/meteor3-svelte/tree/3.4-rspack) or the [Meteor bundler](https://github.com/meteor/meteor3-svelte/tree/3.4-meteor).
|
||||
:::
|
||||
|
||||
Here are some options for what you can do next:
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Meteor.js 3 + Svelte
|
||||
|
||||
In this tutorial, we will create a simple To-Do app using [Svelte](https://svelte.dev/) and Meteor 3.0. Meteor works well with other frameworks like [React](https://react.dev/), [Vue 3](https://vuejs.org/), [Solid](https://www.solidjs.com/), and [Blaze](https://www.blazejs.org/).
|
||||
In this tutorial, we will create a simple To-Do app using [Svelte v5](https://svelte.dev/) and Meteor 3.0. Meteor works well with other frameworks like [React](https://react.dev/), [Vue 3](https://vuejs.org/), [Solid](https://www.solidjs.com/), and [Blaze](https://www.blazejs.org/).
|
||||
|
||||
Svelte is a modern UI framework that compiles your code to highly efficient vanilla JavaScript at build time, resulting in smaller bundles and faster runtime performance. Launched in 2016, it has gained popularity for its simplicity and reactivity without a virtual DOM. Compared to older approaches, Svelte eliminates much of the boilerplate and runtime overhead found in frameworks like React. It uses a declarative syntax with built-in state management, transitions, and stores that can be integrated with Meteor's reactive data sources like [Tracker](https://docs.meteor.com/api/tracker.html) and [Minimongo](https://docs.meteor.com/api/collections.html). This means your UI updates automatically as data changes, without manual DOM manipulation.
|
||||
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
# Meteor.js 3 + Vue 3 and `vue-meteor-tracker`
|
||||
# Meteor.js 3 + Vue 3
|
||||
|
||||
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/).
|
||||
|
||||
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.
|
||||
|
||||
:::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.
|
||||
:::
|
||||
@@ -36,13 +37,15 @@ To set up Meteor with Vue easily, run the following command, replacing `simple-t
|
||||
meteor create --vue simple-todos-vue
|
||||
```
|
||||
|
||||
Meteor will create all the necessary files for you. The `--vue` flag generates a project using Vue, Rspack and Tailwind CSS, and this is the approach walked through in this tutorial. Using [the Rspack bundler](../../about/modern-build-stack/rspack-bundler-integration.md) is the default convention in Meteor 3.4+, as it improves dev speed, enables more build features, and provides better control over bundle size and configuration.
|
||||
|
||||
We provide the final app for both the Rspack and Meteor bundlers. This guide follows the Rspack version and reaches the same final state. The Meteor bundler version is for those who prefer the legacy bundler.
|
||||
|
||||
::: info
|
||||
You can find the final version of this app in our [GitHub repository](https://github.com/meteor/meteor3-vue3).
|
||||
You can find the final version of this app on GitHub using the [Rspack bundler](https://github.com/meteor/meteor3-vue3/tree/3.4-rspack) or the [Meteor bundler](https://github.com/meteor/meteor3-vue3/tree/3.4-meteor).
|
||||
:::
|
||||
|
||||
Meteor will create all the necessary files for you. The `--vue` flag generates a project using Vue, Vite and Tailwind CSS.
|
||||
|
||||
You will find the `client` directory contains files for your client-side setup. Inside, there should be an empty `main.js` file required for Meteor's import mode. However, with Vite, the entry point is set in the `vite.config.js` file, pointing to `imports/ui/main.js`, which is where Meteor renders the main component.
|
||||
You will find the `client` directory contains files for your client-side setup. Inside, you can see for example `client/main.jsx` where Meteor is rendering your App main component into the HTML.
|
||||
|
||||
Check the server directory for the server setup where you will see `server/main.js` populating your MongoDB database with some default data. There's no need to install MongoDB separately, as Meteor includes an embedded version.
|
||||
|
||||
@@ -52,7 +55,7 @@ To run your app, use:
|
||||
meteor npm run start
|
||||
```
|
||||
|
||||
Your Vue code will be located in the `imports/ui directory`, with `App.vue` as the root component of your app.
|
||||
Your Vue code will be located in the `imports/ui` directory, with `App.vue` as the root component of your app.
|
||||
|
||||
Take a moment to explore the files created by Meteor. You don’t have to understand everything right away, but it helps to know where they are.
|
||||
|
||||
@@ -1366,7 +1369,7 @@ You have completed the tutorial!
|
||||
By now, you should have a good understanding of working with Meteor and Vue.
|
||||
|
||||
::: info
|
||||
You can find the final version of this app in our [GitHub repository](https://github.com/meteor/meteor3-vue3).
|
||||
You can find the final version of this app on GitHub using the [Rspack bundler](https://github.com/meteor/meteor3-vue3/tree/3.4-rspack) or the [Meteor bundler](https://github.com/meteor/meteor3-vue3/tree/3.4-meteor).
|
||||
:::
|
||||
|
||||
Here are some options for what you can do next:
|
||||
Reference in New Issue
Block a user