jaspr_markdown_plus 1.0.0
jaspr_markdown_plus: ^1.0.0 copied to clipboard
a jaspr component for parsing and displaying markdown content
import 'package:jaspr/server.dart';
import 'package:jaspr_markdown_plus/jaspr_markdown_plus.dart';
import 'jaspr_options.dart';
void main() {
Jaspr.initializeApp(options: defaultJasprOptions);
runApp(
Document(
title: 'example',
styles: [
css('*').styles(padding: Padding.zero, margin: Margin.zero),
css('html body').styles(width: 100.percent, height: 100.percent),
],
body: Markdown(
styles: Styles(
padding: Padding.all(1.rem),
fontFamily: FontFamilies.arial,
backgroundColor: Color('#141414'),
),
markdown: content,
styleConfig: MarkdownStyleConfig.defaultDark,
),
),
);
}
const content = """
> **DISCLAIMER:** This is a completely fictional README for a non-existent package named "ChronoGlide". All information, code, and links are for demonstration and testing purposes only.
# ChronoGlide: Effortless State Management with Time-Travel
[](https://pub.flutter-io.cn)
[](https://github.com)
[](https://opensource.org/licenses/MIT)
**ChronoGlide** is a revolutionary state management library for Jaspr that uses temporal data structures to provide unparalleled debugging and state restoration capabilities.
> "The best way to predict the future is to invent it, and the best way to debug it is to rewind it." - *A wise developer (probably)*
## Core Features
- **Atomic State Snapshots:** Automatically create efficient, point-in-time snapshots of your application state.
- **Time-Travel Debugging:** Seamlessly move back and forth through the history of your state changes.
- **Predictive State Prefetching:** Uses `Future` analysis to predict and pre-calculate upcoming states.
- **Zero-Configuration Setup:** Just wrap your root component and you're good to go. No boilerplate required.
- ~~Temporal Paradoxes~~: Guaranteed to be 100% paradox-free!
- *Lightweight & Performant*: Built with performance as a first-class citizen.
## Installation
To install ChronoGlide, add it to your `pubspec.yaml` file.
```yaml
dependencies:
jaspr: ^0.12.0
# Note: This package is not real!
chrono_glide: ^1.0.0-alpha
```
Then, run `dart pub get` in your terminal.
## Quick Start Guide
Getting started is as simple as 1, 2, 3.
1. **Wrap your App:** Use the `ChronoScope` component at the root of your application.
2. **Define a Glide:** Create a `Glide<T>` to hold a piece of your state. A `Glide` is a reactive variable that tracks its history.
3. **Listen and Rebuild:** Use the `ChronoBuilder` component to listen for changes to a `Glide` and rebuild your UI automatically.
Here is a complete example of a simple counter app:
```dart
import 'package:jaspr/jaspr.dart';
import 'package:chrono_glide/chrono_glide.dart';
// 1. Define a global glide for your counter state.
final counterGlide = Glide(0);
void main() {
// 2. Wrap your application with a ChronoScope.
runApp(ChronoScope(child: const MyApp()));
}
class MyApp extends StatelessComponent {
const MyApp({super.key});
@override
Component build(BuildContext context) {
return div([
// 3. Use ChronoBuilder to listen to changes.
ChronoBuilder(
listen: counterGlide,
builder: (context, int count) {
return p([
text('Current count: \$count'),
]);
},
),
button(
[text('Increment')],
onClick: () => counterGlide.value++,
),
button(
[text('Rewind State')],
onClick: () {
// Time-travel to the previous state!
if (counterGlide.history.canRewind) {
counterGlide.history.rewind();
}
},
),
]);
}
}
```
### API Overview
| Class | Description |
| --------------- | ------------------------------------------------------- |
| `ChronoScope` | The root provider that manages all glides in the app. |
| `Glide<T>` | A reactive variable that stores state and its history. |
| `ChronoBuilder` | A component that rebuilds when a `Glide` it listens to changes. |
| `History` | An object on `Glide` for controlling time-travel (`rewind`, `fastForward`). |
---
This package is a demonstration project. For real Jaspr resources, please visit the official [Jaspr Website](https://jaspr.dev).
""";