[WIP] Server Components

apps/dart_quotes/lib/main.client.options.dart

@@ -40,8 +40,8 @@ ClientOptions get defaultClientOptions => ClientOptions(
   clients: {
     'quote_like_button': ClientLoader(
       (p) => _quote_like_button.QuoteLikeButton(
-        id: p['id'] as String,
-        initialCount: p['initialCount'] as int,
+        id: p.get<String>('id'),
+        initialCount: p.get<int>('initialCount'),
       ),
       loader: _quote_like_button.loadLibrary,
     ),

apps/dart_quotes_server/lib/main.client.options.dart

@@ -29,8 +29,8 @@ ClientOptions get defaultClientOptions => ClientOptions(
   clients: {
     'quote_like_button': ClientLoader(
       (p) => _quote_like_button.QuoteLikeButton(
-        id: p['id'] as int,
-        initialCount: p['initialCount'] as int,
+        id: p.get<int>('id'),
+        initialCount: p.get<int>('initialCount'),
       ),
       loader: _quote_like_button.loadLibrary,
     ),

apps/fluttercon/lib/main.client.options.dart

@@ -38,7 +38,7 @@ ClientOptions get defaultClientOptions => ClientOptions(
   clients: {
     'like_button': ClientLoader(
       (p) => _like_button.LikeButton(
-        session: _session.SessionCodex.decode(p['session'] as String),
+        session: _session.SessionCodex.decode(p.get<String>('session')),
       ),
       loader: _like_button.loadLibrary,
     ),

apps/website/lib/main.client.options.dart

@@ -37,7 +37,7 @@ import 'package:website/pages/home/5_community/components/sponsors_list.dart'
 ClientOptions get defaultClientOptions => ClientOptions(
   clients: {
     'header': ClientLoader(
-      (p) => _header.Header(showHome: p['showHome'] as bool),
+      (p) => _header.Header(showHome: p.get<bool>('showHome')),
       loader: _header.loadLibrary,
     ),
     'install_command': ClientLoader(

examples/backend_dart_frog/lib/main.client.options.dart

@@ -32,7 +32,7 @@ ClientOptions get defaultClientOptions => ClientOptions(
       loader: _counter.loadLibrary,
     ),
     'hello': ClientLoader(
-      (p) => _hello.Hello(name: p['name'] as String),
+      (p) => _hello.Hello(name: p.get<String>('name')),
       loader: _hello.loadLibrary,
     ),
   },

experiments/server-components/.gitignore

@@ -0,0 +1,6 @@
+# Files and directories created by pub.
+.dart_tool/
+.packages
+
+# Conventional directory for build output.
+build/

experiments/server-components/README.md

@@ -0,0 +1,3 @@
+# server_components
+
+A basic pure-dart web app with ssr & automatic client hydration.

experiments/server-components/analysis_options.yaml

@@ -0,0 +1 @@
+include: package:lints/recommended.yaml

experiments/server-components/lib/counter.dart

@@ -0,0 +1,51 @@
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+
+@client
+class Counter extends StatefulComponent {
+  const Counter({this.step = 1, this.child, super.key});
+
+  final int step;
+  final Component? child;
+
+  @override
+  State<StatefulComponent> createState() => CounterState();
+}
+
+class CounterState extends State<Counter>
+    with SyncStateMixin<Counter, Map<String, dynamic>> {
+  int count = 0;
+
+  @override
+  Map<String, dynamic> getState() {
+    return {'stepDouble': component.step * 2};
+  }
+
+  @override
+  void updateState(Map<String, dynamic> value) {
+    print("GOT SYNC: $value");
+  }
+
+  @override
+  Component build(BuildContext context) {
+    print("Building Counter with count=$count and step=${component.step}");
+    return div(classes: 'client', [
+      .text('$count '),
+      button(
+        onClick: () {
+          setState(() {
+            count += component.step;
+          });
+        },
+        [.text("Increase by ${component.step}")],
+      ),
+      if (component.child != null) component.child!,
+      button(
+        onClick: () {
+          context.reload();
+        },
+        [.text('Reload Page')],
+      ),
+    ]);
+  }
+}

experiments/server-components/lib/main.client.dart

@@ -0,0 +1,26 @@
+// The entrypoint for the **client** environment.
+//
+// The [main] method will only be executed on the client after loading the page.
+
+// Client-specific Jaspr import.
+import 'package:jaspr/client.dart';
+
+// This file is generated automatically by Jaspr, do not remove or edit.
+import 'main.client.options.dart';
+
+void main() {
+  // Initializes the client environment with the generated default options.
+  Jaspr.initializeApp(
+    options: defaultClientOptions,
+  );
+
+  // Starts the app.
+  //
+  // [ClientApp] automatically loads and renders all components annotated with @client.
+  //
+  // You can wrap this with additional [InheritedComponent]s to share state across multiple 
+  // @client components if needed.
+  runApp(
+    const ClientApp(),
+  );
+}

experiments/server-components/lib/main.client.options.dart

@@ -0,0 +1,42 @@
+// dart format off
+// ignore_for_file: type=lint
+
+// GENERATED FILE, DO NOT MODIFY
+// Generated with jaspr_builder
+
+import 'package:jaspr/client.dart';
+
+import 'package:server_components/counter.dart' deferred as _counter;
+import 'package:server_components/minicounter.dart' deferred as _minicounter;
+
+/// Default [ClientOptions] for use with your Jaspr project.
+///
+/// Use this to initialize Jaspr **before** calling [runApp].
+///
+/// Example:
+/// ```dart
+/// import 'main.client.options.dart';
+///
+/// void main() {
+///   Jaspr.initializeApp(
+///     options: defaultClientOptions,
+///   );
+///
+///   runApp(...);
+/// }
+/// ```
+ClientOptions get defaultClientOptions => ClientOptions(
+  clients: {
+    'counter': ClientLoader(
+      (p) => _counter.Counter(
+        step: p.get<int>('step'),
+        child: p.mount(p.get<String>('child')),
+      ),
+      loader: _counter.loadLibrary,
+    ),
+    'minicounter': ClientLoader(
+      (p) => _minicounter.MiniCounter(),
+      loader: _minicounter.loadLibrary,
+    ),
+  },
+);

experiments/server-components/lib/main.server.dart

@@ -0,0 +1,43 @@
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/server.dart';
+import 'main.server.options.dart';
+
+import 'counter.dart';
+import 'minicounter.dart';
+
+void main() {
+  Jaspr.initializeApp(options: defaultServerOptions);
+
+  runApp(
+    Document(
+      title: 'server_components',
+      body: Builder(
+        builder: (context) {
+          var time = DateTime.now();
+          return div(classes: 'server', [
+            p([.text('Server Time: $time')]),
+            Counter(
+              step: time.second,
+              child: p(classes: 'server', [
+                .text('This is a server component, rendered at $time.'),
+                MiniCounter(),
+              ]),
+            ),
+          ]);
+        },
+      ),
+    ),
+  );
+}
+
+@css
+List<StyleRule> get styles => [
+  css('.server').styles(
+    padding: Padding.all(2.px),
+    border: Border.all(color: Colors.red),
+  ),
+  css('.client').styles(
+    padding: Padding.all(2.px),
+    border: Border.all(color: Colors.green),
+  ),
+];

experiments/server-components/lib/main.server.options.dart

@@ -0,0 +1,45 @@
+// dart format off
+// ignore_for_file: type=lint
+
+// GENERATED FILE, DO NOT MODIFY
+// Generated with jaspr_builder
+
+import 'package:jaspr/server.dart';
+import 'package:server_components/counter.dart' as _counter;
+import 'package:server_components/main.server.dart' as _main$server;
+import 'package:server_components/minicounter.dart' as _minicounter;
+
+/// Default [ServerOptions] for use with your Jaspr project.
+///
+/// Use this to initialize Jaspr **before** calling [runApp].
+///
+/// Example:
+/// ```dart
+/// import 'main.server.options.dart';
+///
+/// void main() {
+///   Jaspr.initializeApp(
+///     options: defaultServerOptions,
+///   );
+///
+///   runApp(...);
+/// }
+/// ```
+ServerOptions get defaultServerOptions => ServerOptions(
+  clientId: 'main.client.dart.js',
+  clients: {
+    _counter.Counter: ClientTarget<_counter.Counter>(
+      'counter',
+      params: __counterCounter,
+    ),
+    _minicounter.MiniCounter: ClientTarget<_minicounter.MiniCounter>(
+      'minicounter',
+    ),
+  },
+  styles: () => [..._main$server.styles],
+);
+
+Map<String, Object?> __counterCounter(_counter.Counter c) => {
+  'step': c.step,
+  'child': c.child,
+};

experiments/server-components/lib/minicounter.dart

@@ -0,0 +1,29 @@
+import 'package:jaspr/dom.dart';
+import 'package:jaspr/jaspr.dart';
+
+@client
+class MiniCounter extends StatefulComponent {
+  const MiniCounter({super.key});
+
+  @override
+  State<StatefulComponent> createState() => MiniCounterState();
+}
+
+class MiniCounterState extends State<MiniCounter> {
+  int count = 0;
+
+  @override
+  Component build(BuildContext context) {
+    return span(classes: 'client', [
+      button(
+
+        onClick: () {
+          setState(() {
+            count++;
+          });
+        },
+        [.text("Count: $count")],
+      ),
+    ]);
+  }
+}