Feature/release 4.0

.github/workflows/codeql.yml

@@ -0,0 +1,41 @@
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+  schedule:
+    - cron: "22 8 * * 5"
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ javascript ]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+          queries: +security-and-quality
+
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2
+        with:
+          category: "/language:${{ matrix.language }}"

.github/workflows/comment-issue.yml

@@ -0,0 +1,31 @@
+name: Add immediate comment on new issues
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  createComment:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Create Comment
+        uses: peter-evans/create-or-update-comment@v1.4.2
+        with:
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            Thank you for submitting this issue!
+
+            We, the Members of Meteor Community Packages take every issue seriously.
+            Our goal is to provide long-term lifecycles for packages and keep up
+            with the newest changes in Meteor and the overall NodeJs/JavaScript ecosystem.
+
+            However, we contribute to these packages mostly in our free time.
+            Therefore, we can't guarantee you issues to be solved within certain time.
+
+            If you think this issue is trivial to solve, don't hesitate to submit
+            a pull request, too! We will accompany you in the process with reviews and hints
+            on how to get development set up.
+
+            Please also consider sponsoring the maintainers of the package.
+            If you don't know who is currently maintaining this package, just leave a comment
+            and we'll let you know

.gitignore

@@ -1,2 +1,4 @@
 node_modules/
 .eslintcache
+
+.idea/

README.md

@@ -2,11 +2,13 @@
 
 Simple isomorphic React SSR for Meteor with subscribed data re-hydration
 
-## Supporting the project
+## Supporting the project ❤️
 
 This project, like all of the projects maintained by the Meteor Community Packages org, takes time and hard work to keep updated. If you find this or any of our other packages useful, consider visiting the sponsor section of a repo and sending some love to the dedicated developers that keep your favorite packages up to date.
 
-## Upgrading from v2 to v3
+## Upgrades
+
+### Upgrading from v2 to v3
 
 To better align with the default app that is created by the `meteor create` command. This package by default now renders into an element with an id of `react-target` where it used to render to and id of `react-app`, but is also now configurable. If your are upgrading from v2, you will need to either change the id in your html file, or use the `renderTarget` configuration option to set the renderTarget id to `react-app`.
 
@@ -16,6 +18,10 @@ To better align with the default app that is created by the `meteor create` comm
   });
 ```
 
+### Upgrading from v3 to v4
+
+Update to `react-router-dom` to v6
+
 ## Install
 
 1. First install NPM dependencies
@@ -30,7 +36,11 @@ To better align with the default app that is created by the `meteor create` comm
    meteor add communitypackages:react-router-ssr
    ```
 
-## Package Exports
+> For `react-router-dom` v5 use v3 `communitypackages:react-router-ssr`.
+>
+> For `react-router-dom` v6 use v4 `communitypackages:react-router-ssr`.
+
+## Package Exports 📦
 
 **`renderWithSSR(rootComponent, [options])`** - Isomorphic app rendering.
 
@@ -66,7 +76,7 @@ To better align with the default app that is created by the `meteor create` comm
   });
   ```
 
-## Usage
+## Usage ⚙️
 
 By default this package renders your app into an HTML element with an id of `react-target`, so add one to your main HTML file for your project like so, or specify a different id using the `renderTarget` option
 
@@ -88,22 +98,21 @@ import { renderWithSSR } from "meteor/communitypackages:react-router-ssr";
 import { useTracker } from "meteor/react-meteor-data";
 
 import React from "react";
-import { Route } from "react-router-dom";
-
+import { Route, Routes } from "react-router-dom";
 import DashboardPage from "./imports/ui/pages/dashbaord";
 import ProfilePage from "./imports/ui/pages/profile";
 import LoginPage from "./imports/ui/pages/login";
 
-const App = ({ user }) => {
+const App = () => {
   const { user } = useTracker(() => ({
     user: Meteor.user()
   }));
   if (user) {
     return (
-      <>
-        <Route exact path="/" component={DashboardPage} />
-        <Route path="/profile/:username" component={ProfilePage} />
-      </>
+      <Routes>
+        <Route exact path="/" element={DashboardPage} />
+        <Route path="/profile/:username" element={ProfilePage} />
+      </Routes>
     );
   }
 
@@ -113,6 +122,6 @@ const App = ({ user }) => {
 renderWithSSR(<App />);
 ```
 
-## Styled Components
+## Styled Components 💅
 
-If the [styled-components](https://styled-components.com/) package is installed in your project, this package will detect it's presence, create a new `ServerStyleSheet`, collect all styles, and use them to render your app.
+If the [styled-components](https://styled-components.com/) package is installed in your project, this package will detect it is present, create a new `ServerStyleSheet`, collect all styles, and use them to render your app.

client.jsx

@@ -2,7 +2,7 @@ import { FastRender } from 'meteor/communitypackages:fast-render';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { BrowserRouter as Router, Switch } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 
 import './version-check';
 
@@ -19,11 +19,9 @@ try {
 const renderWithSSR = (component, { renderTarget = 'react-target', storeOptions } = {}) => {
 
     let ReactRouterSSR = () => (
-        <Router>
-            <Switch>
-                {component}
-            </Switch>
-        </Router>
+        <BrowserRouter>
+            {component}
+        </BrowserRouter>
     );
 
     if (storeOptions) {
@@ -35,11 +33,9 @@ const renderWithSSR = (component, { renderTarget = 'react-target', storeOptions
 
         ReactRouterSSR = () => (
             <Provider store={store}>
-                <Router>
-                    <Switch>
-                        {component}
-                    </Switch>
-                </Router>
+                <BrowserRouter>
+                    {component}
+                </BrowserRouter>
             </Provider>
         );
     }