Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Roy Segall
    @RoySegall
    Cool :)
    Carlos Mantilla
    @ceoaliongroo
    Cool Beans!!
    Roy Segall
    @RoySegall
    Yalla
    Carlos Mantilla
    @ceoaliongroo
    Look this:
    Carlos Mantilla
    @ceoaliongroo
    Roy Segall
    @RoySegall
    @ceoaliongroo Have a look in the PR. I did some work over there
    #2
    Carlos Mantilla
    @ceoaliongroo
    Mergeeeee!!!
    :D
    Carlos Mantilla
    @ceoaliongroo
    Tommy Hodgins
    @tomhodgins
    Hey! I just found this project today :D Looks really cool
    Tommy Hodgins
    @tomhodgins
    Anybody here? I've been experimenting with the idea of writing a preprocessor for XPath as well :D
    Roy Segall
    @RoySegall
    Welll... I don't remember where we started or stopped so can't tell you what's the status here.
    Tommy Hodgins
    @tomhodgins
    That's okay! Not many people are interested in XPath at all
    I've been using XPath selectors in the browser, via JS's document.evaluate() to write selectors for elements that CSS can't reach, for the purpose of applying styles to those elements
    It's amazing, however the XPath syntax is a little ugly to read and learn. I don't mind writing it out, but I have a hard time convincing other people to bother learning and writing it
    Tommy Hodgins
    @tomhodgins
    <ul>
      <li class=test>item
      <li class=testing>item
      <li class=tested>item
    </ul>
    
    <script type=module>
      /*
    
        Define some shorthand helper functions that represent the syntax
    
      */
    
      let origin = (string, right) =>
        `${string}${right || ''}`
    
      let tag = (string, right) =>
        `${string}${right || ''}`
    
      let attribute = (string, right) =>
        `${Object.entries(string).map(
             attr =>`[@${attr[0]}="${attr[1]}"]`
           )}${right || ''}`
    
      /*
    
        Define your XPath selector using lisp-like syntax with functions
    
      */
    
      let testSelector =
        origin('//',
          tag('*',
            attribute({class: 'test'})
          )
        )
    
      /*
    
        Use JS-in-CSS and its XPath selector plugin to apply CSS styles to tags matching the XPath selector
    
      */
    
      import jsincss from 'https://unpkg.com/jsincss/index.js'
      import xpath from 'https://unpkg.com/jsincss-xpath-selector/index.js'
    
      jsincss(()=>`
    
        ${xpath(testSelector, `
          background: lime;
        `)}
    
      `)
    </script>
    Something like this as a proof-of-concept
    Here I'm writing super simple functions like attribute() that accept very simple JS arguments, and convert that into the string part of an XPath selector related to that part. Then you can build a selector in JS kind of like working with an Abstract Syntax Tree, but simpler and more flexible, and that will end up being intrepreted as a string. In this case origin('//', tag('*', attribute({class: 'test'}))) ends up as //*[@class="test"]
    To see another example, here's the same kind of functions and fake AST being used to construct CSS selectors: http://staticresource.com/listcss.html
    Roy Segall
    @RoySegall
    You should not do it at run time. You should have a gulp task which takes the XPath and covert it to CSS selector and attach it to the element
    Tommy Hodgins
    @tomhodgins
    In the case of XPath running in the browser, JS is a requirement
    This is mostly useful for XPath selectors that can't be converted to CSS selectors, but can be expressed as XPath in a more succint way than writing out the equivalent JS logic each time, like selecting parents of an element, or selecting an element by partially matching a tag name, or partially matching an attribute name, or selecting elements based on their text content