feat: svgs working in webview

Cargo.toml

@@ -22,8 +22,8 @@ default = [
     "core",
     "macro",
     "hooks",
-    "html",
     "ssr",
+    "html",
     "web",
     "desktop",
     # "atoms",

packages/html/src/lib.rs

@@ -29,7 +29,7 @@ macro_rules! no_namespace_trait_methods {
         $(
             $(#[$attr])*
             fn $name<'a>(&self, cx: NodeFactory<'a>, val: Arguments) -> Attribute<'a> {
-                cx.attr(stringify!(name), val, None, false)
+                cx.attr(stringify!($name), val, None, false)
             }
         )*
     };
@@ -701,7 +701,9 @@ macro_rules! builder_constructors {
 
     ( $(
         $(#[$attr:meta])*
-        $name:ident <> $namespace:tt;
+        $name:ident <> $namespace:tt {
+            $($fil:ident: $vil:ident,)*
+        };
     )* ) => {
         $(
             #[allow(non_camel_case_types)]
@@ -710,7 +712,17 @@ macro_rules! builder_constructors {
 
             impl DioxusElement for $name {
                 const TAG_NAME: &'static str = stringify!($name);
-                const NAME_SPACE: Option<&'static str> = Some(stringify!($namespace));
+                const NAME_SPACE: Option<&'static str> = Some($namespace);
+            }
+
+            impl SvgAttributes for $name {}
+
+            impl $name {
+                $(
+                    pub fn $fil<'a>(&self, cx: NodeFactory<'a>, val: Arguments) -> Attribute<'a> {
+                        cx.attr(stringify!($fil), val, Some(stringify!($namespace)), false)
+                    }
+                )*
             }
         )*
     };
@@ -1622,52 +1634,321 @@ builder_constructors! {
     template {};
 }
 
+pub trait SvgAttributes {
+    aria_trait_methods! {
+        accent_height: "accent-height",
+        accumulate: "accumulate",
+        additive: "additive",
+        alignment_baseline: "alignment-baseline",
+        alphabetic: "alphabetic",
+        amplitude: "amplitude",
+        arabic_form: "arabic-form",
+        ascent: "ascent",
+        attributeName: "attributeName",
+        attributeType: "attributeType",
+        azimuth: "azimuth",
+        baseFrequency: "baseFrequency",
+        baseline_shift: "baseline-shift",
+        baseProfile: "baseProfile",
+        bbox: "bbox",
+        begin: "begin",
+        bias: "bias",
+        by: "by",
+        calcMode: "calcMode",
+        cap_height: "cap-height",
+        class: "class",
+        clip: "clip",
+        clipPathUnits: "clipPathUnits",
+        clip_path: "clip-path",
+        clip_rule: "clip-rule",
+        color: "color",
+        color_interpolation: "color-interpolation",
+        color_interpolation_filters: "color-interpolation-filters",
+        color_profile: "color-profile",
+        color_rendering: "color-rendering",
+        contentScriptType: "contentScriptType",
+        contentStyleType: "contentStyleType",
+        crossorigin: "crossorigin",
+        cursor: "cursor",
+        cx: "cx",
+        cy: "cy",
+        d: "d",
+        decelerate: "decelerate",
+        descent: "descent",
+        diffuseConstant: "diffuseConstant",
+        direction: "direction",
+        display: "display",
+        divisor: "divisor",
+        dominant_baseline: "dominant-baseline",
+        dur: "dur",
+        dx: "dx",
+        dy: "dy",
+        edgeMode: "edgeMode",
+        elevation: "elevation",
+        enable_background: "enable-background",
+        end: "end",
+        exponent: "exponent",
+        fill: "fill",
+        fill_opacity: "fill-opacity",
+        fill_rule: "fill-rule",
+        filter: "filter",
+        filterRes: "filterRes",
+        filterUnits: "filterUnits",
+        flood_color: "flood-color",
+        flood_opacity: "flood-opacity",
+        font_family: "font-family",
+        font_size: "font-size",
+        font_size_adjust: "font-size-adjust",
+        font_stretch: "font-stretch",
+        font_style: "font-style",
+        font_variant: "font-variant",
+        font_weight: "font-weight",
+        format: "format",
+        from: "from",
+        fr: "fr",
+        fx: "fx",
+        fy: "fy",
+        g1: "g1",
+        g2: "g2",
+        glyph_name: "glyph-name",
+        glyph_orientation_horizontal: "glyph-orientation-horizontal",
+        glyph_orientation_vertical: "glyph-orientation-vertical",
+        glyphRef: "glyphRef",
+        gradientTransform: "gradientTransform",
+        gradientUnits: "gradientUnits",
+        hanging: "hanging",
+        height: "height",
+        href: "href",
+        hreflang: "hreflang",
+        horiz_adv_x: "horiz-adv-x",
+        horiz_origin_x: "horiz-origin-x",
+        id: "id",
+        ideographic: "ideographic",
+        image_rendering: "image-rendering",
+        _in: "_in",
+        in2: "in2",
+        intercept: "intercept",
+        k: "k",
+        k1: "k1",
+        k2: "k2",
+        k3: "k3",
+        k4: "k4",
+        kernelMatrix: "kernelMatrix",
+        kernelUnitLength: "kernelUnitLength",
+        kerning: "kerning",
+        keyPoints: "keyPoints",
+        keySplines: "keySplines",
+        keyTimes: "keyTimes",
+        lang: "lang",
+        lengthAdjust: "lengthAdjust",
+        letter_spacing: "letter-spacing",
+        lighting_color: "lighting-color",
+        limitingConeAngle: "limitingConeAngle",
+        local: "local",
+        marker_end: "marker-end",
+        marker_mid: "marker-mid",
+        marker_start: "marker_start",
+        markerHeight: "markerHeight",
+        markerUnits: "markerUnits",
+        markerWidth: "markerWidth",
+        mask: "mask",
+        maskContentUnits: "maskContentUnits",
+        maskUnits: "maskUnits",
+        mathematical: "mathematical",
+        max: "max",
+        media: "media",
+        method: "method",
+        min: "min",
+        mode: "mode",
+        name: "name",
+        numOctaves: "numOctaves",
+        offset: "offset",
+        opacity: "opacity",
+        operator: "operator",
+        order: "order",
+        orient: "orient",
+        orientation: "orientation",
+        origin: "origin",
+        overflow: "overflow",
+        overline_position: "overline-position",
+        overline_thickness: "overline-thickness",
+        panose_1: "panose-1",
+        paint_order: "paint-order",
+        path: "path",
+        pathLength: "pathLength",
+        patternContentUnits: "patternContentUnits",
+        patternTransform: "patternTransform",
+        patternUnits: "patternUnits",
+        ping: "ping",
+        pointer_events: "pointer-events",
+        points: "points",
+        pointsAtX: "pointsAtX",
+        pointsAtY: "pointsAtY",
+        pointsAtZ: "pointsAtZ",
+        preserveAlpha: "preserveAlpha",
+        preserveAspectRatio: "preserveAspectRatio",
+        primitiveUnits: "primitiveUnits",
+        r: "r",
+        radius: "radius",
+        referrerPolicy: "referrerPolicy",
+        refX: "refX",
+        refY: "refY",
+        rel: "rel",
+        rendering_intent: "rendering-intent",
+        repeatCount: "repeatCount",
+        repeatDur: "repeatDur",
+        requiredExtensions: "requiredExtensions",
+        requiredFeatures: "requiredFeatures",
+        restart: "restart",
+        result: "result",
+        rotate: "rotate",
+        rx: "rx",
+        ry: "ry",
+        scale: "scale",
+        seed: "seed",
+        shape_rendering: "shape-rendering",
+        slope: "slope",
+        spacing: "spacing",
+        specularConstant: "specularConstant",
+        specularExponent: "specularExponent",
+        speed: "speed",
+        spreadMethod: "spreadMethod",
+        startOffset: "startOffset",
+        stdDeviation: "stdDeviation",
+        stemh: "stemh",
+        stemv: "stemv",
+        stitchTiles: "stitchTiles",
+        stop_color: "stop_color",
+        stop_opacity: "stop_opacity",
+        strikethrough_position: "strikethrough-position",
+        strikethrough_thickness: "strikethrough-thickness",
+        string: "string",
+        stroke: "stroke",
+        stroke_dasharray: "stroke-dasharray",
+        stroke_dashoffset: "stroke-dashoffset",
+        stroke_linecap: "stroke-linecap",
+        stroke_linejoin: "stroke-linejoin",
+        stroke_miterlimit: "stroke-miterlimit",
+        stroke_opacity: "stroke-opacity",
+        stroke_width: "stroke-width",
+        style: "style",
+        surfaceScale: "surfaceScale",
+        systemLanguage: "systemLanguage",
+        tabindex: "tabindex",
+        tableValues: "tableValues",
+        target: "target",
+        targetX: "targetX",
+        targetY: "targetY",
+        text_anchor: "text-anchor",
+        text_decoration: "text-decoration",
+        text_rendering: "text-rendering",
+        textLength: "textLength",
+        to: "to",
+        transform: "transform",
+        transform_origin: "transform-origin",
+        _type: "_type",
+        u1: "u1",
+        u2: "u2",
+        underline_position: "underline-position",
+        underline_thickness: "underline-thickness",
+        unicode: "unicode",
+        unicode_bidi: "unicode-bidi",
+        unicode_range: "unicode-range",
+        units_per_em: "units-per-em",
+        v_alphabetic: "v-alphabetic",
+        v_hanging: "v-hanging",
+        v_ideographic: "v-ideographic",
+        v_mathematical: "v-mathematical",
+        values: "values",
+        vector_effect: "vector-effect",
+        version: "version",
+        vert_adv_y: "vert-adv-y",
+        vert_origin_x: "vert-origin-x",
+        vert_origin_y: "vert-origin-y",
+        viewBox: "viewBox",
+        viewTarget: "viewTarget",
+        visibility: "visibility",
+        width: "width",
+        widths: "widths",
+        word_spacing: "word-spacing",
+        writing_mode: "writing-mode",
+        x: "x",
+        x_height: "x-height",
+        x1: "x1",
+        x2: "x2",
+        xmlns: "xmlns",
+        xChannelSelector: "xChannelSelector",
+        y: "y",
+        y1: "y1",
+        y2: "y2",
+        yChannelSelector: "yChannelSelector",
+        z: "z",
+        zoomAndPan: "zoomAndPan",
+    }
+}
+
 builder_constructors! {
     // SVG components
     /// Build a
     /// [`<svg>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg)
     /// element.
-    svg <> "http://www.w3.org/2000/svg" ;
+    svg <> "http://www.w3.org/2000/svg" { };
 
     /// Build a
     /// [`<path>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path)
     /// element.
-    path <> "http://www.w3.org/2000/svg";
+    path <> "http://www.w3.org/2000/svg" {
+
+    };
 
     /// Build a
     /// [`<circle>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle)
     /// element.
-    circle <>  "http://www.w3.org/2000/svg";
+    circle <>  "http://www.w3.org/2000/svg" {
+
+    };
 
     /// Build a
     /// [`<ellipse>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse)
     /// element.
-    ellipse <> "http://www.w3.org/2000/svg";
+    ellipse <> "http://www.w3.org/2000/svg" {
+
+    };
 
     /// Build a
     /// [`<line>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line)
     /// element.
-    line <> "http://www.w3.org/2000/svg";
+    line <> "http://www.w3.org/2000/svg" {
+
+    };
 
     /// Build a
     /// [`<polygon>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon)
     /// element.
-    polygon <> "http://www.w3.org/2000/svg";
+    polygon <> "http://www.w3.org/2000/svg" {
+
+    };
 
     /// Build a
     /// [`<polyline>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline)
     /// element.
-    polyline <> "http://www.w3.org/2000/svg";
+    polyline <> "http://www.w3.org/2000/svg" {
+
+    };
 
     /// Build a
     /// [`<rect>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect)
     /// element.
-    rect <> "http://www.w3.org/2000/svg";
+    rect <> "http://www.w3.org/2000/svg" {
+
+    };
 
     /// Build a
     /// [`<image>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image)
     /// element.
-    image <> "http://www.w3.org/2000/svg";
+    image <> "http://www.w3.org/2000/svg" {
+
+    };
 
 }
 

packages/webview/Cargo.toml

@@ -10,19 +10,22 @@ license = "MIT/Apache-2.0"
 
 [dependencies]
 # web-view = { git = "https://github.com/Boscop/web-view" }
-dioxus-core = { path="../core", version="0.1.2", features=["serialize"] }
+dioxus-core = { path = "../core", version = "0.1.2", features = ["serialize"] }
 anyhow = "1.0.38"
 argh = "0.1.4"
 serde = "1.0.120"
 serde_json = "1.0.61"
-async-std = { version="1.9.0", features=["attributes"] }
 thiserror = "1.0.23"
 log = "0.4.13"
-fern = { version="0.6.0", features=["colored"] }
+fern = { version = "0.6.0", features = ["colored"] }
+html-escape = "0.2.9"
+wry = "0.11.0"
+
 
+[dev-dependencies]
 tide = "0.15.0"
 tide-websockets = "0.3.0"
-html-escape = "0.2.9"
+async-std = { version = "1.9.0", features = ["attributes"] }
 
 # thiserror = "1.0.23"
 # log = "0.4.13"
@@ -30,10 +33,9 @@ html-escape = "0.2.9"
 # wasm-bindgen-cli-support = "0.2.71"
 # anyhow = "1.0.38"
 # argh = "0.1.4"
+# async-std = { version = "1.9.0", features = ["attributes"] }
 # serde = "1.0.120"
 # serde_json = "1.0.61"
-# async-std = { version = "1.9.0", features = ["attributes"] }
-wry = "0.10.3"
 
 
 [build-dependencies]

packages/webview/src/index.html

@@ -2,8 +2,6 @@
 <html>
 
 <head>
-    <!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" /> -->
-
     <script>
         class Interpreter {
             constructor(root) {
@@ -110,20 +108,11 @@
             }
         }
 
-        function EditListReceived(rawEditList) {
-            let editList = JSON.parse(rawEditList);
-            console.warn("hnelllo");
-            editList.forEach(function (edit, index) {
-                console.log(edit);
-                op_table[edit.type](interpreter, edit);
-            });
-        }
-
         const op_table = new OPTABLE();
 
         async function initialize() {
             const reply = await rpc.call('initiate');
-            const interpreter = new Interpreter(window.document.getElementById("_dioxusroot").firstChild);
+            const interpreter = new Interpreter(window.document.getElementById("_dioxusroot"));
             console.log(reply);
 
             for (let x = 0; x < reply.length; x++) {
@@ -143,7 +132,9 @@
 
 <body>
     <div id="_dioxusroot">
-        _
+        <div>
+
+        </div>
     </div>
 </body>
 

src/lib.rs

@@ -188,7 +188,7 @@ pub use dioxus_webview as desktop;
 pub mod prelude {
     //! A glob import that includes helper types like FC, rsx!, html!, and required traits
     pub use dioxus_core::prelude::*;
-    pub use dioxus_elements::GlobalAttributes;
+    pub use dioxus_elements::{GlobalAttributes, SvgAttributes};
     pub use dioxus_hooks::*;
     pub use dioxus_html as dioxus_elements;
 }