Public dom patch

[qknight]

DON'T MERGE, this is still for discussion:

Meaningful changes:

• added support for style="float: right" support in the parser crates/core/src/html/attributes/attribute_macros.rs / crates/html-parser/src/lib.rs
• added tests/dom_vdom_standalone.rs for fn test_dom_vdom_standalone() in order to test a standalone DomUpdater concept.

question on style

Do you like the 'style' extension (this PR, top most commit), if so I can create a seperate PR for it. It basically can now parse a <div with a style attribute like:

and then build html from it. I think there is still changes to be desired, for instance the generated html from the parsed strucutre looks like:

so it basically removes spaces between key and value of the style parameter ...

question on updates

When I integrate the DomUpdater into my project at nixcloud/pankat-replit@37b6ca1#diff-5365bd0f6f96dba0088da6cc6d5640f519c460110eb53ae48377086445666490 and try to let it update a already existing section I see a huge changes in the html structure on the first update (unexpected as there are no meaningful changes) and minimal changes on consecutive ones (expected). Why is that?

I can build a standalone version tonight. For now, this is the code i'm using to create a DomNode from existing html.

fn new(id: String) -> Self {
        let window = web_sys::window().expect("no global `window` exists");
        let document = window.document().expect("should have a document on window");

        let div_mount: web_sys::Element = document
            .get_element_by_id(id.as_str())
            .expect("Element with specified id not found");
        let web_sys_node_mount: web_sys::Node = web_sys::Node::from(div_mount);
        let div_domnode_mount: DomNode = DomNode::from(web_sys_node_mount);

        let div = document
            .get_element_by_id("NavAndContent")
            .ok_or("Could not find element with id 'NavAndContent'")
            .unwrap();
        let html_element: HtmlElement = div.dyn_into::<HtmlElement>().unwrap();
        let content = html_element.inner_html();
        //log::info!("content: {}", content);

        let current_vdom: Node<()> = parse_html::<()>(&content).unwrap().unwrap();

        let div_root: web_sys::Element = document
            .get_element_by_id("NavAndContent")
            .expect("Element with specified id not found");
        let web_sys_node_root: web_sys::Node = web_sys::Node::from(div_root);
        let div_domnode_root: DomNode = DomNode::from(web_sys_node_root);

        DomUpdater {
            id,
            current_vdom,
            /// root_node: the first element of the app view, where the patch is generated is relative to
            root_node: Rc::new(RefCell::new(Some(div_domnode_root))),
            /// mount_node: the actual DOM element where the APP is mounted to.
            mount_node: Rc::new(RefCell::new(Some(div_domnode_mount))),
        }
    }

html before dom update:

<div id="container">
  <nav class="navbar navbar-default">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">lastlog.de/blog</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="timeline.html"><span class="glyphicon glyphicon-list" aria-hidden="true"></span> timeline</a></li>
        <li><a href="about.html"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> about</a></li>
        <li><a href="/draft" id="draft" style="display: none"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> draft</a></li>
        <li><a href="/draft?article=posts/roadmap.mdwn" id="roadmap" style="display: none"><span class="glyphicon glyphicon glyphicon-road" aria-hidden="true"></span> roadmap</a></li>

      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a title="live updates of article updates on " id="websocket" style="display: block;"><span id="websocketStatus" class="glyphicon glyphicon-ok" aria-hidden="true"></span> websocket</a></li>
        <!-- <li><a href="#">Login</a></li> -->
      </ul>

      <!--<div id="right">
        <form class="navbar-form navbar-right">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
        </form>
      </div>-->
    </div><!-- /.navbar-collapse -->
  </nav>

<div id="NavAndContent">
  <div id="articleNav">
    ...
</div>
  <div id="seriesNav">
  ...
</div>
  <div class="article">
    ...
  </div>
  <div id="ArticleSourceCode">
  <a href="posts/libnix/libnix_fixPath.mdwn" title="posts/libnix/libnix_fixPath.mdwn">article source</a>
  </div>

</div>
  
</div>

html after dom update

<div id="container">
  <nav class="navbar navbar-default">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">lastlog.de/blog</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="timeline.html"><span class="glyphicon glyphicon-list" aria-hidden="true"></span> timeline</a></li>
        <li><a href="about.html"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> about</a></li>
        <li><a href="/draft" id="draft" style="display: none"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> draft</a></li>
        <li><a href="/draft?article=posts/roadmap.mdwn" id="roadmap" style="display: none"><span class="glyphicon glyphicon glyphicon-road" aria-hidden="true"></span> roadmap</a></li>

      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a title="live updates of article updates on " id="websocket" style="display: block;"><span id="websocketStatus" class="glyphicon glyphicon-ok" aria-hidden="true"></span> websocket</a></li>
        <!-- <li><a href="#">Login</a></li> -->
      </ul>

      <!--<div id="right">
        <form class="navbar-form navbar-right">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
        </form>
      </div>-->
    </div><!-- /.navbar-collapse -->
  </nav>

<div id="NavAndContent"><div id="articleNav"><header class="header">
    </header></div><div id="seriesNav"><a href="timeline.html?filter=series::libnix" title="article series libnix" class="seriesbtn btn btn-primary">libnix</a><header class="seriesHeader">
  </header></div><div class="article">....</div><div id="ArticleSourceCode"><a href="posts/libnix/libnix_fixPath.mdwn" title="posts/libnix/libnix_fixPath.mdwn">article source</a></div></div>
  
</div>