-
- );
-};
diff --git a/docs/src/components/Shield.tsx b/docs/src/components/Shield.tsx
index 597dd76f5..a5229cd9a 100644
--- a/docs/src/components/Shield.tsx
+++ b/docs/src/components/Shield.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
const GithubWorkflowStatus = ({
label,
@@ -60,3 +60,20 @@ export const FlutterFavorite = () => (
/>
);
+
+interface Props {
+ name: string;
+}
+
+export const PubBadge: FunctionComponent
+
+ );
+};
diff --git a/docs/src/components/home/HeroSection.tsx b/docs/src/components/home/HeroSection.tsx
new file mode 100644
index 000000000..0964aced2
--- /dev/null
+++ b/docs/src/components/home/HeroSection.tsx
@@ -0,0 +1,62 @@
+import { Section } from './Section';
+import React from 'react';
+import Spline from '@splinetool/react-spline';
+
+export function HeroSection() {
+ return (
+
+
+
+
+ MobX for Dart and
+ Flutter
+
+
+
+ Hassle free state-management for your Dart and Flutter apps.
+
+
+
+ Use the power of
+
+
+ Observables, Actions and{' '}
+ Reactions to supercharge the state in your apps.
+
+ MobX is a state-management library that makes it simple to connect the
+ reactive data of your application with the UI (or any observer). This
+ wiring is completely automatic and feels very natural. As the
+ application-developer, you focus purely on what reactive-data needs to
+ be consumed without worrying about keeping the two in sync.
+
+
+
+
+ Actions are responsible for mutating the reactive state.
+ When the mutations happen, the notifications are fired
+ immediately, causing all the reactions to execute. An action
+ acts as an intentionally-named operation that changes the state
+ of the application.
+
+ }
+ />
+
+
+ Observables store the reactive state of your application.
+ It will notify the associated reactions whenever the state
+ changes. Observables can be simple primitives like numbers,
+ strings, booleans to List, Map, Stream and Future.
+
+ }
+ />
+
+ .default})
+
+
+
+
+ Let's see in code...
+
+
+
+ );
+}
diff --git a/docs/src/components/home/Section.tsx b/docs/src/components/home/Section.tsx
new file mode 100644
index 000000000..cfb9b606a
--- /dev/null
+++ b/docs/src/components/home/Section.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+export function Section({
+ children,
+ className,
+ containerClassName,
+ title,
+}: {
+ children: React.ReactNode;
+ className?: string;
+ containerClassName?: string;
+ title?: string;
+}) {
+ return (
+
+
+ {counterSource}
+
+
+
+
+
+ -
+
-
+
+
+ Setup the observable state. In this case its a simple count as an + integer. This forms the reactive state of our example. +Step 1Observable State +
+ -
+
+
+ Setup the action to increment the count. When the action is + executed, it will fire notifications automatically and inform all + associated reactions. +Step 2Action to mutate state +
+ -
+
+
+ Display the count using the Observer. The Observer is a reaction + internally that tracks changes to the associated observable + (count). When the count changes, it gets notified by the action + and re-renders the Flutter Widget to show the updated count. +Step 3Reaction to observe state +
+
mobx_codegen package.
+
+ {title &&
+ {title}
} + {children} ++
diff --git a/docs/src/components/Testimonial.tsx b/docs/src/components/home/Testimonial.tsx
similarity index 96%
rename from docs/src/components/Testimonial.tsx
rename to docs/src/components/home/Testimonial.tsx
index 4d1036799..e2d494778 100644
--- a/docs/src/components/Testimonial.tsx
+++ b/docs/src/components/home/Testimonial.tsx
@@ -1,5 +1,5 @@
import React, { CSSProperties, FunctionComponent } from 'react';
-import { testimonials } from './testimonials';
+import { testimonials } from '../../data/testimonials';
interface Props {
author: string;
diff --git a/docs/src/data/sponsors.ts b/docs/src/data/sponsors.ts
new file mode 100644
index 000000000..e15ce18c7
--- /dev/null
+++ b/docs/src/data/sponsors.ts
@@ -0,0 +1,17 @@
+export const sponsors = [
+ {
+ logo: require('../images/publicis-sapient-sponsor.png').default,
+ url: 'https://publicis.sapient.com',
+ active: false,
+ },
+ {
+ logo: require('../images/wunderdog-sponsor.png').default,
+ url: 'https://wunderdog.fi',
+ active: false,
+ },
+ {
+ logo: 'https://www.netlify.com/img/global/badges/netlify-color-bg.svg',
+ url: 'https://www.netlify.com',
+ active: true,
+ },
+];
diff --git a/docs/src/components/testimonials.ts b/docs/src/data/testimonials.ts
similarity index 100%
rename from docs/src/components/testimonials.ts
rename to docs/src/data/testimonials.ts
diff --git a/docs/src/images/mobx.png b/docs/src/images/mobx.png
index d56b68eec..7ee7db39a 100644
Binary files a/docs/src/images/mobx.png and b/docs/src/images/mobx.png differ
diff --git a/docs/src/images/mobx.svg b/docs/src/images/mobx.svg
index 335e23dbf..7d9b4e3ae 100644
--- a/docs/src/images/mobx.svg
+++ b/docs/src/images/mobx.svg
@@ -1,15 +1 @@
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/docs/src/images/mobx@2x.png b/docs/src/images/mobx@2x.png
index 030c9c840..9b944431c 100644
Binary files a/docs/src/images/mobx@2x.png and b/docs/src/images/mobx@2x.png differ
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
index 807c5a75d..9161e89ca 100644
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -1,4 +1,3 @@
-import { PubBadge } from '../components/PubBadge';
import book from '../images/book.png';
import {
BuildStatus,
@@ -6,14 +5,16 @@ import {
DiscordChat,
FlutterFavorite,
NetlifyStatus,
+ PubBadge,
PublishStatus,
} from '../components/Shield';
-import { SponsorList } from '../components/Sponsor';
-import { TestimonialList } from '../components/Testimonial';
-
-import MobXLogo from '../images/mobx.svg';
+import { SponsorList } from '../components/home/Sponsor';
+import { TestimonialList } from '../components/home/Testimonial';
import React from 'react';
import Layout from '@theme/Layout';
+import { Section } from '../components/home/Section';
+import { NutshellSection } from '../components/home/NutshellSection';
+import { HeroSection } from '../components/home/HeroSection';
export default function () {
return (
@@ -21,64 +22,17 @@ export default function () {
-
-
-
- MobX for Dart and
- Flutter
-
-
-
- Hassle free state-management for your Dart and Flutter apps.
-
-
-
- Use the power of
-
-
- Observables, Actions and{' '}
- Reactions to supercharge the state in your apps.
-
@@ -111,74 +65,9 @@ function BadgesSection() {
);
}
-function NutshellSection() {
- return (
-
-
- Reactions, as the name suggests are responsible for{' '}
- reacting to the state changes. These can be anything from
- a simple console log, API calls to rendering the Flutter UI.
- Reaction (aka "side-effect") is the only element that can
- take you out of the MobX reactivity loop.
-
- }
- />
-
-
-
- MobX is a state-management library that makes it simple to connect the
- reactive data of your application with the UI (or any observer). This
- wiring is completely automatic and feels very natural. As the
- application-developer, you focus purely on what reactive-data needs to
- be consumed without worrying about keeping the two in sync.
-
-
-
-
- Actions are responsible for mutating the reactive state.
- When the mutations happen, the notifications are fired
- immediately, causing all the reactions to execute. An action
- acts as an intentionally-named operation that changes the state
- of the application.
-
- }
- />
-
-
- Observables store the reactive state of your application.
- It will notify the associated reactions whenever the state
- changes. Observables can be simple primitives like numbers,
- strings, booleans to List, Map, Stream and Future.
-
- }
- />
-
- .default})
-
-
-
-
We are very thankful to our sponsors to make us part of their{' '}
Open Source Software (OSS) program.
@@ -240,58 +129,3 @@ function ConcludingSection() {
);
}
-
-function NutshellListItem({
- title,
- detail,
- index,
-}: {
- title: string;
- detail: React.ReactElement;
- index: number;
-}) {
- // NOTE:
- // Have to specifically create this array to ensure the tailwindcss processor
- // does not exclude these classes
- const blue = ['bg-blue-100', 'bg-blue-200', 'bg-blue-300'];
- return (
-
- );
-}
-
-function Section({
- children,
- className,
- containerClassName,
- title,
-}: {
- children: React.ReactNode;
- className?: string;
- containerClassName?: string;
- title?: string;
-}) {
- return (
-
-
- );
-}
diff --git a/mobx_examples/.metadata b/mobx_examples/.metadata
index ce13b4201..3e6e02afb 100644
--- a/mobx_examples/.metadata
+++ b/mobx_examples/.metadata
@@ -1,11 +1,11 @@
# This file tracks properties of this Flutter project.
# Used by Flutter tool to assess capabilities and perform upgrades etc.
#
-# This file should be version controlled.
+# This file should be version controlled and should not be manually edited.
version:
- revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851
- channel: stable
+ revision: "78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9"
+ channel: "stable"
project_type: app
@@ -13,26 +13,26 @@ project_type: app
migration:
platforms:
- platform: root
- create_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851
- base_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851
+ create_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9
+ base_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9
- platform: android
- create_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851
- base_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851
+ create_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9
+ base_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9
- platform: ios
- create_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851
- base_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851
+ create_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9
+ base_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9
- platform: linux
- create_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851
- base_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851
+ create_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9
+ base_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9
- platform: macos
- create_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851
- base_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851
+ create_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9
+ base_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9
- platform: web
- create_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851
- base_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851
+ create_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9
+ base_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9
- platform: windows
- create_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851
- base_revision: ee4e09cce01d6f2d7f4baebd247fde02e5008851
+ create_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9
+ base_revision: 78666c8dc57e9f7548ca9f8dd0740fbf0c658dc9
# User provided section
diff --git a/mobx_examples/lib/counter/without_codegen.dart b/mobx_examples/lib/counter/without_codegen.dart
new file mode 100644
index 000000000..0d973cc23
--- /dev/null
+++ b/mobx_examples/lib/counter/without_codegen.dart
@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_mobx/flutter_mobx.dart';
+import 'package:mobx/mobx.dart';
+
+class SimpleCounter {
+// highlight-start
+ // Step 1
+ final count = Observable(0);
+// highlight-end
+
+// highlight-start
+ // Step 2
+ void increment() {
+ runInAction(() => count.value++);
+ }
+// highlight-end
+}
+
+class CounterView extends StatefulWidget {
+ const CounterView({Key? key}) : super(key: key);
+
+ @override
+ CounterExampleState createState() => CounterExampleState();
+}
+
+class CounterExampleState extends State {
+ final SimpleCounter counter = SimpleCounter();
+
+ @override
+ Widget build(BuildContext context) => Scaffold(
+ appBar: AppBar(
+ backgroundColor: Colors.blue,
+ title: const Text('MobX Counter'),
+ ),
+ body: Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ const Text(
+ 'You have pushed the button this many times:',
+ ),
+// highlight-start
+ // Step 3
+ Observer(
+ builder: (_) => Text(
+ '${counter.count.value}',
+ style: const TextStyle(fontSize: 40),
+ )),
+// highlight-end
+ ],
+ ),
+ ),
+ floatingActionButton: FloatingActionButton(
+ onPressed: counter.increment,
+ tooltip: 'Increment',
+ child: const Icon(Icons.add),
+ ),
+ );
+}
- {title &&
-