jaspr_converter 1.1.0

Convert Jaspr component trees to HTML and parse HTML back into Jaspr components.

example/jaspr_converter_example.dart

import 'dart:io';

import 'package:jaspr/dom.dart';
import 'package:jaspr/server.dart';
import 'package:jaspr_converter/jaspr_converter.dart';

Future<void> main() async {
  Jaspr.initializeApp();

  Directory('output').createSync(recursive: true);

  _printSection('1. Render a Jaspr component to HTML');

  final landingCard = div(classes: 'card', [
    h1([Component.text('jaspr_converter')]),
    p([Component.text('Convert Jaspr components to HTML and back again.')]),
  ]);

  final landingHtml = await JasprConverter.toHtml(
    landingCard,
    outputFilename: 'output/landing-card.html',
  );

  print(landingHtml);

  _printSection('2. Generate a full HTML document');

  final fullDocument = await JasprConverter.toHtml(
    main_([
      h1([Component.text('Generated page')]),
      p([Component.text('This file was rendered from a Jaspr component.')]),
    ]),
    fullHtmlDocument: true,
    outputFilename: 'output/generated-page.html',
    pageTitle: 'jaspr_converter generated page',
  );

  print(fullDocument);

  _printSection('3. Parse raw HTML into a Jaspr component');

  final parsedRawHtml = await JasprConverter.toComponent(
    '<section id="hero"><h2>Hello</h2><p>Parsed from raw HTML.</p></section>',
    outputFilename: 'output/raw_html_component.dart',
    className: 'RawHtmlComponent',
  );

  if (parsedRawHtml != null) {
    print(parsedRawHtml.stringify);
    print(parsedRawHtml.toHtml());
  }

  _printSection('4. Parse HTML from a local file path');

  final localSource = File('output/source.html')
    ..writeAsStringSync(
      '<article><h2>Local file</h2><p>Parsed from source.html.</p></article>',
    );

  final parsedFile = await JasprConverter.toComponent(
    localSource.path,
    outputFilename: 'output/local_file_component.dart',
    className: 'LocalFileComponent',
    asStatefulComponent: true,
  );

  if (parsedFile != null) {
    print(parsedFile.toHtml());
  }

  _printSection('5. Parse HTML from a remote URL');

  print(
    'Remote URLs are supported with the same API. This call is commented out '
    'so the example stays deterministic when offline.',
  );

  print('''
final parsedUrl = await JasprConverter.toComponent(
  'https://example.com',
  outputFilename: 'output/remote_url_component.dart',
  className: 'RemoteUrlComponent',
  fullHtmlDocument: true,
);
''');

  _printSection('6. Render a dynamic newsletter for email');

  final newsletter = AsyncBuilder(
    builder: (context) async {
      final issues = await _loadNewsletterItems();

      return Component.element(
        tag: 'table',
        attributes: {
          'role': 'presentation',
          'width': '100%',
          'cellpadding': '0',
          'cellspacing': '0',
          'style':
              'max-width: 640px; margin: 0 auto; font-family: Arial, sans-serif;',
        },
        children: [
          Component.element(
            tag: 'tbody',
            children: [
              Component.element(
                tag: 'tr',
                children: [
                  Component.element(
                    tag: 'td',
                    attributes: {
                      'style':
                          'padding: 24px; background: #101828; color: white;',
                    },
                    children: [
                      h1([Component.text('Weekly Product Digest')]),
                      p([
                        Component.text(
                          'A dynamic newsletter built with Jaspr components.',
                        ),
                      ]),
                    ],
                  ),
                ],
              ),
              for (final issue in issues)
                Component.element(
                  tag: 'tr',
                  children: [
                    Component.element(
                      tag: 'td',
                      attributes: {
                        'style':
                            'padding: 20px 24px; border-bottom: 1px solid #eaecf0;',
                      },
                      children: [
                        h2([Component.text(issue.title)]),
                        p([Component.text(issue.summary)]),
                        a(href: issue.url, [Component.text('Read more')]),
                      ],
                    ),
                  ],
                ),
            ],
          ),
        ],
      );
    },
  );

  final newsletterHtml = await newsletter.toHtmlSync(fullHtml: true);
  await File('output/newsletter-email.html').writeAsString(newsletterHtml);

  print(newsletterHtml);
  print(
    'The newsletter HTML can be passed to an email provider such as SendGrid, '
    'Mailgun, Postmark, or AWS SES.',
  );

  _printSection('7. Extension helpers');

  print('Dart-style component source:');
  print(landingCard.stringify);

  print('\nSynchronous HTML serialization:');
  print(landingCard.toHtml());
}

Future<List<NewsletterItem>> _loadNewsletterItems() async {
  await Future<void>.delayed(const Duration(milliseconds: 200));

  return const [
    NewsletterItem(
      title: 'Launch: HTML conversion',
      summary: 'Render Jaspr components into formatted HTML for publishing.',
      url: 'https://example.com/releases/html-conversion',
    ),
    NewsletterItem(
      title: 'Automation: generated newsletters',
      summary: 'Build reusable newsletter layouts with async data sources.',
      url: 'https://example.com/guides/newsletters',
    ),
  ];
}

void _printSection(String title) {
  print('\n$title');
  print('-' * title.length);
}

class NewsletterItem {
  const NewsletterItem({
    required this.title,
    required this.summary,
    required this.url,
  });

  final String title;
  final String summary;
  final String url;
}