Extract HTML DSL and VDOM into separate packages

packages/spark/lib/spark.dart

@@ -53,12 +53,13 @@ library;
 // Hide spark_web types that conflict with the DSL types (Element, Text)
 // and shelf types (Request, Response). Also hide Document/Comment to avoid
 // ambiguity with dart:core or other libraries.
-export 'src/component/component.dart' hide Text, Element, Comment, Document;
+export 'src/component/component.dart'
+    hide Text, Element, Comment, Document, Node;
 export 'src/utils/utils.dart';
 export 'src/annotations/annotations.dart';
 export 'src/page/page.dart';
 export 'src/endpoint/endpoint.dart';
-export 'src/html/dsl.dart';
+export 'package:spark_html_dsl/spark_html_dsl.dart';
 export 'src/style/style.dart';
 export 'src/style/style_registry.dart';
 export 'src/style/css_types/css_types.dart';

packages/spark/lib/src/component/spark_component.dart

@@ -1,10 +1,10 @@
 import 'dart:async';
 
-import '../html/dsl.dart' as html;
+import 'package:spark_html_dsl/spark_html_dsl.dart' as html;
 import '../style/style.dart';
 import '../style/style_registry.dart';
 import 'web_component.dart';
-import 'vdom.dart' as vdom;
+import 'package:spark_vdom/vdom.dart' as vdom;
 
 /// A reactive Web Component for Spark.
 ///
@@ -85,7 +85,7 @@ abstract class SparkComponent extends WebComponent {
   }
 
   /// Builds the component tree with styles automatically prepended.
-  List<html.VNode> _buildWithStyles() {
+  List<html.Node> _buildWithStyles() {
     final children = build();
     final styles = adoptedStyleSheets;
 
@@ -117,7 +117,7 @@ abstract class SparkComponent extends WebComponent {
     final prevWrapper = html.Element.eventWrapper;
     html.Element.eventWrapper = _wrapHandler;
 
-    List<html.VNode> newVdom;
+    List<html.Node> newVdom;
     try {
       newVdom = [build()];
     } finally {

packages/spark/lib/src/component/web_component.dart

@@ -13,7 +13,7 @@ library;
 // wrap the real package:web DOM objects.
 import 'package:spark_web/spark_web.dart' as web;
 
-import '../html/dsl.dart' as html;
+import 'package:spark_html_dsl/spark_html_dsl.dart' as html;
 
 // Re-export spark_web types for use in components.
 // This allows component code to access web types via the spark.dart barrel.

packages/spark/lib/src/page/spark_page.dart

@@ -1,4 +1,4 @@
-import '../html/node.dart';
+import 'package:spark_html_dsl/spark_html_dsl.dart';
 import 'page_request.dart';
 import 'page_response.dart';
 import '../style/style.dart';
@@ -124,7 +124,7 @@ abstract class SparkPage<T> {
   ///   ]);
   /// }
   /// ```
-  VNode render(T data, PageRequest request);
+  Node render(T data, PageRequest request);
 
   /// Returns the list of island component types used by this page.
   ///

packages/spark/lib/src/server/render_page.dart

@@ -5,7 +5,7 @@ import 'dart:async';
 import 'dart:convert';
 import 'dart:io';
 import '../style/style.dart';
-import '../html/node.dart';
+import 'package:spark_html_dsl/spark_html_dsl.dart';
 
 /// Configuration options for page rendering.
 class PageOptions {
@@ -31,7 +31,7 @@ class PageOptions {
 
   /// Additional content for the head section.
   ///
-  /// Can be a [String], [VNode], or [List<dynamic>].
+  /// Can be a [String], [Node], or [List<dynamic>].
   final Object? headContent;
 
   /// The language attribute for the HTML element.
@@ -155,11 +155,11 @@ String renderPage({
     runZoned(() {
       if (headContent is String && headContent.isNotEmpty) {
         buffer.writeln(headContent);
-      } else if (headContent is VNode) {
+      } else if (headContent is Node) {
         buffer.writeln(headContent.toHtml());
       } else if (headContent is List) {
         for (final item in headContent) {
-          if (item is VNode) {
+          if (item is Node) {
             buffer.writeln(item.toHtml());
           } else if (item != null) {
             buffer.writeln(item.toString());

packages/spark/pubspec.yaml

@@ -12,6 +12,8 @@ environment:
 
 dependencies:
   web: ^1.1.1
+  spark_html_dsl: ^1.0.0-alpha.1
+  spark_vdom: ^1.0.0-alpha.1
   spark_web: ^1.0.0-alpha.1
   meta: ^1.18.0
   shelf: ^1.4.2

packages/spark/test/component/vdom_attributes_test.dart

@@ -1,8 +1,8 @@
 @TestOn('browser')
 library;
 
-import 'package:spark_framework/src/component/vdom_web.dart';
-import 'package:spark_framework/src/html/dsl.dart';
+import 'package:spark_vdom/vdom_web.dart';
+import 'package:spark_html_dsl/spark_html_dsl.dart';
 import 'package:test/test.dart';
 import 'package:web/web.dart' as web;
 

packages/spark/test/component/vdom_browser_test.dart

@@ -1,8 +1,8 @@
 @TestOn('browser')
 library;
 
-import 'package:spark_framework/src/component/vdom_web.dart';
-import 'package:spark_framework/src/html/dsl.dart';
+import 'package:spark_vdom/vdom_web.dart';
+import 'package:spark_html_dsl/spark_html_dsl.dart';
 import 'package:test/test.dart';
 import 'package:web/web.dart' as web;
 

packages/spark/test/component/vdom_test.dart

@@ -1,8 +1,8 @@
 import 'package:test/test.dart';
-import 'package:spark_framework/src/html/dsl.dart';
+import 'package:spark_html_dsl/spark_html_dsl.dart';
 
 // Conditional import - use browser implementation in browser, stub in VM
-import 'package:spark_framework/src/component/vdom_web.dart'
+import 'package:spark_vdom/vdom_web.dart'
     if (dart.library.io) 'vdom_test_stub.dart';
 
 void main() {

packages/spark/test/component/vdom_test_stub.dart

@@ -2,21 +2,21 @@
 /// Provides no-op implementations that allow vdom tests to compile and run in VM mode
 library;
 
-import 'package:spark_framework/src/html/node.dart';
+import 'package:spark_html_dsl/spark_html_dsl.dart';
 
-void mount(dynamic parent, VNode vNode) {
+void mount(dynamic parent, Node vNode) {
   // No-op in VM
 }
 
-void mountList(dynamic parent, List<VNode> vNodes) {
+void mountList(dynamic parent, List<Node> vNodes) {
   // No-op in VM
 }
 
-void patch(dynamic realNode, VNode vNode) {
+void patch(dynamic realNode, Node vNode) {
   // No-op in VM
 }
 
-dynamic createNode(VNode vNode) {
+dynamic createNode(Node vNode) {
   // Return a simple object in VM mode
   return Object();
 }

packages/spark/test/html/node_test.dart

@@ -1,5 +1,5 @@
 import 'dart:async';
-import 'package:spark_framework/src/html/node.dart';
+import 'package:spark_html_dsl/spark_html_dsl.dart';
 import 'package:test/test.dart';
 
 void main() {

packages/spark/test/html_test.dart

@@ -1,5 +1,5 @@
 import 'package:test/test.dart';
-import 'package:spark_framework/src/html/dsl.dart';
+import 'package:spark_html_dsl/spark_html_dsl.dart';
 
 void main() {
   group('HTML DSL', () {

packages/spark/test/page_test.dart

@@ -2,7 +2,7 @@ import 'package:test/test.dart';
 import 'package:spark_framework/src/page/spark_page.dart';
 import 'package:spark_framework/src/page/page_request.dart';
 import 'package:spark_framework/src/page/page_response.dart';
-import 'package:spark_framework/src/html/node.dart';
+import 'package:spark_html_dsl/spark_html_dsl.dart';
 import 'package:shelf/shelf.dart';
 
 // Concrete implementation for testing defaults
@@ -13,7 +13,7 @@ class TestPage extends SparkPage<String> {
   }
 
   @override
-  VNode render(String data, PageRequest request) {
+  Node render(String data, PageRequest request) {
     return Text(data);
   }
 }
@@ -25,7 +25,7 @@ class CustomPage extends SparkPage<void> {
       PageData(null);
 
   @override
-  VNode render(void data, PageRequest request) => Text('');
+  Node render(void data, PageRequest request) => Text('');
 
   @override
   String title(void data, PageRequest request) => 'Custom Title';

packages/spark/test/server/render_page_structure_test.dart

@@ -1,7 +1,7 @@
 @TestOn('vm')
 library;
 
-import 'package:spark_framework/src/html/node.dart';
+import 'package:spark_html_dsl/spark_html_dsl.dart';
 import 'package:spark_framework/src/server/render_page.dart';
 import 'package:spark_framework/src/style/style.dart';
 import 'package:test/test.dart';
@@ -132,15 +132,15 @@ void main() {
       expect(html, contains('<meta name="description" content="test">'));
     });
 
-    test('renders headContent as VNode', () {
+    test('renders headContent as Node', () {
       final vNode = Element(
         'meta',
         attributes: {'name': 'author', 'content': 'Me'},
         selfClosing: true,
       );
 
       final html = renderPage(
-        title: 'VNode Head Page',
+        title: 'Node Head Page',
         content: '<div>Content</div>',
         headContent: vNode,
       );
@@ -166,7 +166,7 @@ void main() {
       expect(html, contains('<meta name="test2" content="2" />'));
     });
 
-    test('renders headContent with CSP nonce injection in VNode', () {
+    test('renders headContent with CSP nonce injection in Node', () {
       // Create a style element without nonce
       // It should pick up the nonce from the zone set by renderPage
       final styleNode = Element(

packages/spark/test/server_test.dart

@@ -4,7 +4,7 @@ library;
 import 'package:test/test.dart';
 import 'package:spark_framework/src/server/render_page.dart';
 import 'package:spark_framework/src/server/static_handler.dart';
-import 'package:spark_framework/src/html/dsl.dart';
+import 'package:spark_html_dsl/spark_html_dsl.dart';
 
 void main() {
   group('renderPage', () {

packages/spark/test/spark_hydration_test.dart

@@ -5,7 +5,7 @@ import 'dart:js_interop';
 import 'dart:js_interop_unsafe';
 import 'package:spark_framework/src/component/spark_component.dart';
 import 'package:spark_framework/src/component/web_component.dart';
-import 'package:spark_framework/src/html/dsl.dart' as html;
+import 'package:spark_html_dsl/spark_html_dsl.dart' as html;
 import 'package:spark_framework/src/style/style.dart';
 import 'package:test/test.dart';
 import 'package:web/web.dart' as web;

packages/spark/test/vdom_hydration_test.dart

@@ -1,8 +1,8 @@
 @TestOn('browser')
 library;
 
-import 'package:spark_framework/src/component/vdom_web.dart';
-import 'package:spark_framework/src/html/dsl.dart' as html;
+import 'package:spark_vdom/vdom_web.dart';
+import 'package:spark_html_dsl/spark_html_dsl.dart' as html;
 import 'package:test/test.dart';
 import 'package:web/web.dart' as web;
 

packages/spark/test/vdom_web_test.dart

@@ -1,8 +1,8 @@
 @TestOn('browser')
 library;
 
-import 'package:spark_framework/src/component/vdom_web.dart';
-import 'package:spark_framework/src/html/dsl.dart' as html;
+import 'package:spark_vdom/vdom_web.dart';
+import 'package:spark_html_dsl/spark_html_dsl.dart' as html;
 import 'package:test/test.dart';
 import 'package:web/web.dart' as web;
 

packages/spark_cli/test/openapi_automation_test.dart

@@ -85,6 +85,10 @@ dependencies:
 dependency_overrides:
   spark_web:
     path: ${p.join(p.dirname(sparkPackagePath), 'spark_web')}
+  spark_html_dsl:
+    path: ${p.join(p.dirname(sparkPackagePath), 'spark_html_dsl')}
+  spark_vdom:
+    path: ${p.join(p.dirname(sparkPackagePath), 'spark_vdom')}
 ''');
     });
 

packages/spark_cli/test/openapi_command_test.dart

@@ -65,6 +65,10 @@ dependencies:
 dependency_overrides:
   spark_web:
     path: ${p.join(p.dirname(sparkPackagePath), 'spark_web')}
+  spark_html_dsl:
+    path: ${p.join(p.dirname(sparkPackagePath), 'spark_html_dsl')}
+  spark_vdom:
+    path: ${p.join(p.dirname(sparkPackagePath), 'spark_vdom')}
 ''');
     });
 

packages/spark_cli/test/openapi_validation_test.dart

@@ -77,6 +77,10 @@ dependencies:
 dependency_overrides:
   spark_web:
     path: ${p.join(p.dirname(sparkPackagePath), 'spark_web')}
+  spark_html_dsl:
+    path: ${p.join(p.dirname(sparkPackagePath), 'spark_html_dsl')}
+  spark_vdom:
+    path: ${p.join(p.dirname(sparkPackagePath), 'spark_vdom')}
 ''');
 
       // Run pub get

packages/spark_html_dsl/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+## 1.0.0-alpha.1
+
+- Initial release extracted from `spark` framework package.
+- Core node types: `Node`, `Text`, `RawHtml`, `Element`.
+- HTML DSL helpers: `h()`, `div()`, `span()`, `p()`, `a()`, `button()`, `input()`, and more.
+- CSP nonce injection support via Dart Zones.
+- `Element.eventWrapper` static hook for framework reactivity integration.
+- Pure Dart package with zero runtime dependencies.

packages/spark_html_dsl/analysis_options.yaml

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

packages/spark_html_dsl/lib/spark_html_dsl.dart

@@ -0,0 +1,22 @@
+/// Spark HTML DSL - Virtual DOM node types and HTML element helpers.
+///
+/// Provides [Node], [Text], [RawHtml], and [Element] node types,
+/// plus a full set of HTML tag helpers ([div], [span], [h1], [button], etc.)
+/// for building declarative HTML structures.
+///
+/// ## Example
+///
+/// ```dart
+/// import 'package:spark_html_dsl/spark_html_dsl.dart';
+///
+/// final page = div([
+///   h1('Hello, world!'),
+///   p('Welcome to Spark.'),
+/// ], className: 'container');
+///
+/// print(page.toHtml());
+/// ```
+library;
+
+export 'src/node.dart';
+export 'src/elements.dart';