Fetch Version Fix

docs/docs/development/release.mdx

@@ -5,7 +5,14 @@ description: If you are a developer on the MobX project, here are few guidelines
 
 If you are a developer on the MobX project, here are few guidelines that will help in your journey. These apply to all the packages: `mobx`, `mobx_codegen`, `flutter_mobx`.
 
-### 1. pubspec.yaml
+### 1. Format your code
+
+To format your files following [Dart guidelines](https://dart.dev/guides/language/effective-dart/style#formatting). This will format your code accordingly regardless of your IDE settings.
+```
+dartfmt -w .
+```
+
+### 2. pubspec.yaml
 
 - Use the [semantic versioning policy](https://dart.dev/tools/pub/versioning) to update the version in `pubspec.yaml`.
 - Say you are updating from `0.1.0` to `0.2.0`, then update the `version` field in `pubspec.yaml`:
@@ -14,7 +21,7 @@ If you are a developer on the MobX project, here are few guidelines that will he
 version: 0.2.0
 ```
 
-### 2. Expose version
+### 3. Expose version
 
 - Expose the updated version of `pubspec.yaml` to the library `.dart` file by running the appropriate command:
 
@@ -28,7 +35,7 @@ There is a handy _npm-script_ called **`set:versions`** inside the root-level `p
 npm run set:versions
 ```
 
-### 3. Changelog
+### 4. Changelog
 
 - Update the `CHANGELOG.md` file to include the changes introduced in the new version. Normally you would do this by adding a new bullet point for the version and follow the template from earlier versions.
 - If the changes are minimal, you can also append the change to an earlier bullet point but include the new version as a range. For example, the changes in `0.3.2+3` were minimal, so we added it as a range from the earlier version.
@@ -37,10 +44,6 @@ npm run set:versions
 ## 0.3.0 - 0.3.2+3
 ```
 
-### 4. Update the versions in the Getting Started Guide
-
-The versions of packages mentioned in the [Getting Started Guide](/getting-started) should match the `pubspec.yaml` files of each package.
-
 ### 5. Git Push
 
 And that's it! The rest of the work will be automatically done by [Github Actions](https://github.com/mobxjs/mobx.dart/actions).

docs/docs/getting-started/index.mdx

@@ -24,16 +24,16 @@ Add the following **dependencies** to your `pubspec.yaml` file.
 
 ```yaml
 dependencies:
-  mobx: ^1.0.0
-  flutter_mobx: ^1.0.0
+  mobx: ^{{ plugins.mobx }}
+  flutter_mobx: ^{{ plugins.flutter_mobx }}
 ```
 
 Next add the following **dev_dependencies**:
 
 ```yaml
 dev_dependencies:
-  build_runner: ^1.7.2
-  mobx_codegen: ^1.0.0
+  build_runner: ^{{ plugins.build_runner }}
+  mobx_codegen: ^{{ plugins.mobx_codegen }}
 ```
 
 In your project folder, run this command to fetch all the packages:

docs/docs/guides/cheat-sheet.mdx

@@ -30,9 +30,12 @@ These packages should appear in your `pubspec.yaml` like below.
 
 ```yaml
 dependencies:
-  mobx: ^0.4.0
-  flutter_mobx: ^0.3.6
-  mobx_codegen: ^0.4.1
+  mobx: ^{{ plugins.mobx }}
+  flutter_mobx: ^{{ plugins.flutter_mobx }}
+
+dev_dependencies:
+  build_runner: ^{{ plugins.build_runner }}
+  mobx_codegen: ^{{ plugins.mobx_codegen }}
 ```
 
 ## Declaring a Store class

docs/docs/versions.js

@@ -0,0 +1,9 @@
+export default {
+  // Plugin versions are fetched from the public pub.dev API. See /plugins/fetch-versions
+  plugins: {
+    mobx: PUB_MOBX,
+    flutter_mobx: PUB_FLUTTER_MOBX,
+    mobx_codegen: PUB_MOBX_CODEGEN,
+    build_runner: PUB_BUILD_RUNNER,
+  }
+};

docs/docusaurus.config.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   title: 'MobX.dart',
   tagline: 'Hassle free state-management for your Dart and Flutter apps',
@@ -105,6 +107,9 @@ module.exports = {
       trackingID: 'UA-60235345-4',
     },
   },
+  plugins: [
+    path.resolve(__dirname, './plugins/fetch-versions'),
+  ],
   presets: [
     [
       '@docusaurus/preset-classic',

docs/package.json

@@ -14,7 +14,10 @@
     "@docusaurus/core": "2.0.0-alpha.65",
     "@docusaurus/preset-classic": "2.0.0-alpha.65",
     "@mdx-js/react": "^1.5.8",
+    "axios": "^0.20.0",
     "clsx": "^1.1.1",
+    "dotenv": "^8.2.0",
+    "lodash.get": "^4.4.2",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "styled-components": "^5.2.0"
@@ -36,8 +39,9 @@
     "@tsconfig/docusaurus": "^1.0.2",
     "@types/react": "^16.9.51",
     "@types/react-helmet": "^6.1.0",
-    "@types/react-router-dom": "^5.1.5",
+    "@types/react-router-dom": "^5.1.6",
     "prism-react-renderer": "^1.1.1",
-    "typescript": "^4.0.3"
+    "typescript": "^4.0.3",
+    "webpack": "^4.44.2"
   }
 }

docs/plugins/fetch-versions/index.js

@@ -0,0 +1,81 @@
+const webpack = require('webpack');
+const axios = require('axios');
+const plugins = [
+  {
+    pub: 'mobx',
+  },
+  {
+    pub: 'flutter_mobx',
+  },
+  {
+    pub: 'mobx_codegen',
+  },
+  {
+    pub: 'build_runner',
+  }
+];
+
+// Fetch the plugins latest version from the pub API
+async function fetchPluginVersion(plugin) {
+  try {
+    const response = await axios.get(`https://pub.dev/packages/${plugin}.json`);
+    const versions = response.data.versions;
+
+    if (!Array.isArray(versions)) {
+      return '';
+    }
+
+    return versions[versions.length - 1];
+  } catch (e) {
+    console.log(`Failed to load version for plugin "${plugin}".`);
+    return '';
+  }
+}
+
+module.exports = function sourceVersions() {
+  return {
+    name: '@mobx/fetch-versions',
+    // Create a content string which will contain pub.dev versions for each plugin in the format of a .env file
+    // See https://www.npmjs.com/package/dotenv#usage for more information.
+    async loadContent() {
+      let versions = '';
+
+      for (let i = 0; i < plugins.length; i++) {
+        const { pub } = plugins[i];
+
+        const version = await fetchPluginVersion(pub);
+        versions += `PUB_${pub.toUpperCase()}=${version}`;
+        if (i < plugins.length - 1) versions += '\n';
+      }
+
+      return versions;
+    },
+    // Using the content string, create a cached file on the local filesystem
+    // Read the contents of the file with dotenv.
+    // See https://www.npmjs.com/package/dotenv#path for more information.
+    async contentLoaded({ content, actions }) {
+      require('dotenv').config({
+        path: await actions.createData('versions.env', content),
+        debug: process.env.NODE_ENV !== 'production',
+      });
+    },
+    // Using webpack, create a global variable for each plugin, using the created environment variable.
+    // This ensures we can access the data on both the server and client.
+    // See https://webpack.js.org/plugins/define-plugin/ for more information.
+    configureWebpack() {
+      return {
+        plugins: [
+          new webpack.DefinePlugin(
+            plugins.reduce((current, plugin) => {
+              const envVar = `PUB_${plugin.pub.toUpperCase()}`;
+              return {
+                ...current,
+                [envVar]: JSON.stringify(process.env[envVar] || ''),
+              };
+            }, {}),
+          ),
+        ],
+      };
+    },
+  };
+};

docs/src/theme/MDXComponents/index.tsx

@@ -0,0 +1,22 @@
+import React, { HTMLProps } from 'react';
+import CodeBlock from '@theme/CodeBlock';
+
+import { getVersion } from './utils';
+
+export default {
+  inlineCode: (props: HTMLProps<HTMLElement>) => {
+    const { children } = props;
+    if (typeof children === 'string') {
+      return <code {...props}>{getVersion(children)}</code>;
+    }
+    return children;
+  },
+
+  code: (props: HTMLProps<HTMLElement>) => {
+    const { children } = props;
+    if (typeof children === 'string') {
+      return <CodeBlock {...props}>{getVersion(children)}</CodeBlock>;
+    }
+    return children;
+  },
+};

docs/src/theme/MDXComponents/utils.ts

@@ -0,0 +1,19 @@
+import get from 'lodash.get';
+import versions from '../../../docs/versions';
+
+const regex = /{{\s([a-zA-Z0-9_.]*)\s}}/gm;
+
+export function getVersion(value: string) {
+  let output = value;
+  let m;
+
+  while ((m = regex.exec(value)) !== null) {
+    // This is necessary to avoid infinite loops with zero-width matches
+    if (m.index === regex.lastIndex) {
+      regex.lastIndex++;
+    }
+
+    output = output.replace(m[0], get(versions, m[1], ''));
+  }
+  return output;
+}

mobx_examples/lib/dice/dice_widgets.dart

@@ -3,35 +3,33 @@ import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:provider/provider.dart';
 import 'dice_counter.dart';
 
-
 class DiceExample extends StatelessWidget {
   @override
   Widget build(BuildContext context) => Provider<DiceCounter>(
-    create: (_) => DiceCounter(),
-    child: Scaffold(
-        backgroundColor: Colors.amber,
-        appBar: AppBar(
-          backgroundColor: Colors.amberAccent,
-          title: Text(
-            'Tap the dice !!!'.toUpperCase(),
-            style: TextStyle( 
-                fontWeight: FontWeight.bold,
-                color: Colors.black,
-                fontSize: 16,
-                fontFamily: 'Hind'),
+        create: (_) => DiceCounter(),
+        child: Scaffold(
+          backgroundColor: Colors.amber,
+          appBar: AppBar(
+            backgroundColor: Colors.amberAccent,
+            title: Text(
+              'Tap the dice !!!'.toUpperCase(),
+              style: TextStyle(
+                  fontWeight: FontWeight.bold,
+                  color: Colors.black,
+                  fontSize: 16,
+                  fontFamily: 'Hind'),
+            ),
+          ),
+          body: SafeArea(
+            child: DiceView(),
           ),
         ),
-        body: SafeArea(
-          child: DiceView(),
-        ),
-      ),
-  );
+      );
 }
 
 class DiceView extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-
     final diceCounter = Provider.of<DiceCounter>(context);
 
     return Center(

mobx_examples/lib/examples.dart

@@ -99,5 +99,5 @@ final List<Example> examples = [
     description: 'A Fun Dice app.',
     path: '/dice',
     widgetBuilder: (_) => DiceExample(),
-  ),  
+  ),
 ];

tool/expose_version.dart

@@ -1,4 +1,5 @@
 #!/usr/bin/env dart
+
 import 'dart:io';
 
 void main(List<String> packages) {