Necessitates Proper Modularity

    web-tree

    2.2.0 • Public • Published

    web-tree

    This repo has two components:

    • An npm library for constructing URL trees
    • A Firefox add-on that builds a URL tree as you browse and allows you to view the tree and filter by domain and/or path

    Add-on

    Install

    You can install it here!

    For development

    1. Clone the repo and bundle the library for the browser with npm run bundle
    2. Open Firefox and enter about:debugging#/runtime/this-firefox into the search bar
    3. Click "Load Temporary Add-On"
    4. Select add-on/manifest.json from the project directory

    Usage

    Open devtools in Firefox and click on web-tree.

    You should see show and clear buttons in the panel and a filter input.

    The show button will display an expandable/collapsible subtree that falls under the filtered domain/path (if any).

    The clear button wipes the state of the tree clean.

    Library

    Install

    npm i web-tree

    Usage

    Create a tree

    'use strict'
     
    const Tree = require('web-tree')
     
    const tree = new Tree()

    Add URLs to tree

    // Set domains
    tree.set('https://foo.com')
    tree.set('https://bar.foo.com')
     
    // Set paths
    tree.set('https://baz.bar.foo.com?testing=123')
    tree.set('https://bar.foo.com/bam/fob')
    tree.set('https://bar.foo.com/bam/boo')

    Get URL domain/path in tree

    tree.get('https://foo.com')             // returns domain
    tree.get('https://bar.foo.com/bam/fob') // returns path
    tree.get('https://foo.com/')            // returns undefined

    Generate object representation of tree

    tree.toObject()
     
    // {
    //   com: {
    //     subdomains: {
    //       foo: {
    //         subdomains: {
    //           bar: {
    //             path: {
    //               subpaths: {
    //                 bam: {
    //                   subpaths: {
    //                     fob: {},
    //                     boo: {}
    //                   }
    //                 }
    //               }
    //             },
    //             subdomains: {
    //               baz: {
    //                 path: {
    //                   searchParams: {
    //                     testing: ['123']
    //                   }
    //                 }
    //               }
    //             }
    //           }
    //         }
    //       }
    //     }
    //   }
    // }

    Generate string representation of tree

    tree.toString()
     
    // .com
    //   .foo
    //     .bar
    //       /bam
    //         /boo
    //         /fob
    //       .baz
    //         ?testing=123

    Generate HTML representation of tree

    tree.toHTML()
     
    // <button class="web-tree-btn">.com</button>
    // <div class="web-tree-div">
    //   <button class="web-tree-btn">.foo</button>
    //   <div class="web-tree-div">
    //     <button class="web-tree-btn">.bar</button>
    //     <div class="Web-tree-div">
    //       <button class="web-tree-btn">/bam</button>
    //       <div class="web-tree-div">
    //         <button class="web-tree-btn">/boo</button>
    //         <div class="web-tree-div">
    //         </div>
    //         <button class="web-tree-btn">/fob</button>
    //         <div class="web-tree-div">
    //         </div>
    //       </div>
    //       <button class="web-tree-btn">.baz</button>
    //       <div class="web-tree-div">
    //         <p>?testing=123</p>
    //       </div>
    //     </div>
    //   </div>
    // </div>

    Delete URLs from tree

    // Delete domains
    tree.delete('https://baz.bar.foo.com')     // returns true
    tree.delete('https://bam.bar.foo.com')     // returns false
     
    // Delete paths
    tree.delete('https://bar.foo.com/bam/fob') // returns true
    tree.delete('https://foo.com/')            // returns false
     
    // Check string representation
    tree.toString()
     
    // .com
    //   .foo
    //     .bar
    //       /bam
    //         /boo

    Test

    npm test

    Lint

    npm run lint

    Documentation

    npm run doc

    Contributing

    Please do!

    If you find a bug, want a feature added, or just have a question, feel free to open an issue. In addition, you're welcome to create a pull request addressing an issue. You should push your changes to a feature branch and request merge to develop.

    Make sure linting and tests pass and coverage is 💯 before creating a pull request!

    Install

    npm i web-tree

    DownloadsWeekly Downloads

    5

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    28 kB

    Total Files

    15

    Last publish

    Collaborators

    • zbo14
    • d4l3c00p3r