feat(example): Run heavy work on a separate isolate

Author: bdlukaa

.github/workflows/static.yml

@@ -25,17 +25,21 @@ jobs:
         uses: actions/checkout@v4
       - name: Setup Pages
         uses: actions/configure-pages@v5
-      - name: 'Setup Dart'
+      - name: "Setup Dart"
         uses: dart-lang/setup-dart@v1.3
-      - name: 'Build Jaspr'
+      - name: Install dependencies
+        run: dart pub get
+      - name: Build isolate manager workers
+        run: dart run isolate_manager:generate
+      - name: "Build Jaspr"
         run: |
           dart pub global activate jaspr_cli
           cd example
           jaspr build --verbose
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: 'example/build/jaspr'
+          path: "example/build/jaspr"
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

example/lib/main.client.dart

@@ -1,9 +1,41 @@
 library;
 
+import 'dart:async';
+
+import 'package:isolate_manager/isolate_manager.dart';
 import 'package:jaspr/client.dart';
+import 'package:romanize/romanize.dart';
 
 import 'app.dart';
 
-void main() {
+@pragma('vm:entry-point')
+@isolateManagerWorker
+Future<String> romanize(String text) async {
+  await TextRomanizer.ensureInitialized();
+  return TextRomanizer.romanize(text);
+}
+
+final service = RomanizationService();
+void main() async {
+  await service.init();
+
   runApp(App());
 }
+
+class RomanizationService {
+  late final IsolateManager<String, String> _manager;
+
+  Future<void> init() async {
+    _manager = IsolateManager.create(
+      romanize,
+      workerName: 'romanize',
+      concurrent: 1,
+    );
+
+    await _manager.start();
+  }
+
+  Future<String> convert(String text) async {
+    return await _manager.compute(text);
+  }
+}

example/lib/pages/home.dart

@@ -1,6 +1,6 @@
+import 'package:example/main.client.dart';
 import 'package:jaspr/dom.dart';
 import 'package:jaspr/jaspr.dart';
-import 'package:romanize/romanize.dart';
 import 'package:web/web.dart' as web;
 
 class Home extends StatefulComponent {
@@ -12,8 +12,7 @@ class Home extends StatefulComponent {
 
 class _HomeState extends State<Home> {
   String _text = '안녕하세요, 만나서 반갑습니다.';
-
-  String get _romanized => TextRomanizer.romanize(_text);
+  late String _romanized = _text;
 
   void _syncScroll(web.Event event, String otherId) {
     final source = event.target as web.HTMLTextAreaElement;
@@ -76,7 +75,13 @@ class _HomeState extends State<Home> {
               'scroll': (e) => _syncScroll(e, 'output-area'),
             },
             placeholder: 'Type your text here...',
-            onInput: (text) => setState(() => _text = text),
+            onInput: (text) async {
+              setState(() => _text = text);
+              _romanized = await service.convert(text);
+              if (mounted) {
+                setState(() {});
+              }
+            },
             rows: 15,
             required: true,
             spellCheck: SpellCheck.isFalse,

example/pubspec.yaml

@@ -10,6 +10,7 @@ environment:
 dependencies:
   jaspr: ^0.22.0
   web: ^1.1.1
+  isolate_manager: ^6.1.2
   romanize:
     path: ../
 
@@ -18,6 +19,7 @@ dev_dependencies:
   build_web_compilers: ^4.4.6
   jaspr_builder: ^0.22.0
   lints: ^5.0.0
+  isolate_manager_generator: ^0.3.0
 
 dependency_overrides:
   kuromoji: