Code Monkey home page Code Monkey logo

html-imports-visitor's Introduction

Build Status

HTML Imports visitor

A helper library to traverse the spanning tree of the HTML imports graph.

The linking structure of import link lists forms a directed graph. Each node of the graph is a document and its edge is a link. Branches are intended to form a spanning tree of the graph. This tree gives the deterministic order of the script execution.

โ€“ HTML Imports Spec

Install

npm install [--save-dev] html-imports-visitor

Example

Visit <script>s in proper execution order

import { VisitorHelper, predicates } from "html-imports-visitor"

const visitor = {
  /**
   * Function hook called when a `<link rel="import">` is found
   *
   * @param {Object} link the `<link rel="import">` element
   * @param {string} detail.path absolute file path of `<link rel="import">`'s parent element
   * @param {string} detail.location absolute file path of the linked resource
   */
  import(link, { path, location }) {
    // your code
  },

  /**
   * Function hook called when entering a branch of the tree
   *
   * @param {Object} element the entered document
   * @param {string} detail.path absolute file path of document
   */
  enter(document, { path }) {
    // your code
  },

  /**
   * Function hook called when a `<script>` is found
   *
   * @param {Object} element the found `<script>` element
   * @param {string} detail.path absolute file path of `<script>`'s parent element
   * @param {number} detail.index zero-based index of the visited element relative to its parent
   */
  visit(element, { path, index }) {
    // your code
  }
}

const helper = new VisitorHelper(visitor, predicates.hasTagName("script"))

helper.enter("index.html")

Demo

You can find the minimum configuration needed to run the library in demo/demo.js and you can try it running:

node demo/demo.js

html-visitor-imports uses parse5, documentation about parsed elements can be found here

Also note that remote or non-existing files will be not entered.

Bundle scripts with rollup.js

Take a look at rollup-plugin-html-entry for a real world usage example.

License

MIT

html-imports-visitor's People

Contributors

leogr avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Forkers

theboolean

html-imports-visitor's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.