Make it compile with openfl html5

application.xml

@@ -15,4 +15,6 @@
 
     <haxelib name="haxeui-core" />
     <haxelib name="haxeui-openfl" />
+
+    <define name="haxeui_allow_drag_any_component"/>
 </project>

src/Main.hx

@@ -6,7 +6,7 @@ import custom.Preloader;
 
 class Main {
     public static function main() {
-        #if js
+        #if haxeui_html5
         new haxe.ui.editors.code.monaco.MonacoLoader().register(null);
         #end
         //var dark = Browser.window.matchMedia('(prefers-color-scheme: dark)').matches;

src/custom/IFrame.hx

@@ -1,5 +1,7 @@
 package custom;
 
+#if haxeui_html5
+
 import haxe.ui.backend.html5.HtmlUtils;
 import haxe.ui.containers.Box;
 import js.Browser;
@@ -46,4 +48,6 @@ class IFrame extends Box {
 
         return b;
     }
-}
+}
+
+#end

src/module.xml

@@ -18,6 +18,7 @@
 
     <components>
         <component package="custom" />
+        <exclude pattern="src/custom/IFrame.hx" unless="haxeui_html5" />
     </components>
 
     <scriptlets>

src/views/CustomComponentView.hx

@@ -8,6 +8,8 @@ class CustomComponentView extends View {
     }
 }
 
+#if haxeui_html5
+
 @:xml('
 <dialog title="Custom Component In Dialog" width="600" height="600" styleName="no-padding">
     <iframe url="http://haxeui.org" width="100%" height="100%" />
@@ -19,4 +21,6 @@ class CustomComponentDialog extends Dialog {
         modal = false;
         buttons = DialogButton.CLOSE;
     }
-}
+}
+
+#end

src/views/MainView.hx

@@ -106,7 +106,9 @@ class MainView extends HBox {
             ViewManager.instance.registerView({ group: "Miscellaneous", subGroup:"Animation", title: "Animated Highlight", smallIcon: "icons/svg/animation.svg", largeIcon: "icons/svg/animation.svg", viewClass: AnimatedHighlightView, relevantFiles: ["views/animated-highlight.xml"] });
             ViewManager.instance.registerView({ group: "Miscellaneous", subGroup:"Animation", title: "Animated Dots", smallIcon: "icons/svg/animation.svg", largeIcon: "icons/svg/animation.svg", viewClass: AnimatedDotsView, relevantFiles: ["views/animated-dots.xml", "src/views/AnimatedDotsView.hx"] });
         ViewManager.instance.registerView({ group: "Miscellaneous", title: "Validators", smallIcon: "icons/svg/validators.svg", largeIcon: "icons/svg/validators.svg", viewClass: ValidatorsView, relevantFiles: ["views/validators.xml", "src/views/ValidatorsView.hx"] });
+        #if haxeui_html5
         ViewManager.instance.registerView({ group: "Miscellaneous", title: "Custom Component", smallIcon: "icons/svg/scrollviews.svg", largeIcon: "icons/svg/scrollviews.svg", viewClass: CustomComponentView, relevantFiles: ["views/custom-component.xml", "src/views/CustomComponentView.hx", "src/custom/IFrame.hx"] });
+        #end
         ViewManager.instance.registerView({ group: "Miscellaneous", title: "App Icon", smallIcon: "icons/svg/app-icon.svg", largeIcon: "icons/svg/app-icon.svg", viewClass: AppIconView, relevantFiles: ["views/app-icon.xml", "src/views/AppIconView.hx"] });
         ViewManager.instance.registerView({ group: "Miscellaneous", title: "Notifications", smallIcon: "icons/svg/notifications.svg", largeIcon: "icons/svg/notifications.svg", viewClass: NotificationsView, relevantFiles: ["views/notifications.xml", "src/views/NotificationsView.hx"] });
             ViewManager.instance.registerView({ group: "Miscellaneous", subGroup: "Notifications", title: "Actions", smallIcon: "icons/svg/notifications.svg", largeIcon: "icons/svg/notifications.svg", viewClass: NotificationActionEventsView, relevantFiles: ["views/notification-action-events.xml", "src/views/NotificationActionEventsView.hx"] });

src/views/ViewManager.hx

@@ -136,7 +136,7 @@ class ViewManager {
         viewContainer.percentHeight = 100;
 
         if (ext == "hx" || ext == "xml" || ext == "css" || ext == "properties") {
-            #if js
+            #if haxeui_html5
             var editor = new haxe.ui.editors.code.CodeEditor();
             editor.percentWidth = 100;
             editor.percentHeight = 100;