Graph Resources

> Create a graph of referenced resources

---

- Install
- API
- GraphResources
- GraphResources
- .sources
- Document
- Document
- resources
- file
- id
- HtmlDocument
- HtmlDocument
- anchors
- identifiers
- ast
- .parse
- See Also
- CssDocument
- CssDocument
- ast
- .parse
- Graph
- Graph
- map
- .addDocument
- documents
- htmlDocuments
- cssDocuments
- .createDocument
- .createHtmlDocument
- .createCssDocument
- Resource
- Resource
- uri
- node
- base
- .isAbsolute
- canonical
- License

---

Install

``yarn add makestatic-graph-resources`

`API`

`$3`

Create a graph of referenced resources.

For each HTML, CSS and Javascript file inspect the abstract syntax tree and create a resource graph of referenced assets.

#### GraphResources

`javascript new GraphResources(context)`

Create a GraphResources plugin.

Enable this plugin for the graph phase.

* context Object the processing context.

#### .sources

`javascript GraphResources.prototype.sources(file, context, options)`

Inspects the abstract syntax tree for each file to find referenced resources and add them to the graph.

If a file does not have an associated abstract syntax tree a document is added to the resource graph but no parsing is performed on the document.

* fileObject the file being processed. *contextObject the processing context. *options Object the plugin options.

`$3`

Represents a document entry in the graph.

#### Document

`javascript new Document(file)`

Create a document.

* file File the encapsulated file.

#### resources

`javascript readonly Array resources`

List of resources referenced in this document.

#### file

`javascript readonly File file`

Reference to the file that created this document.

#### id

`javascript readonly String id`

Document identifier derived from the file path.

`$3`

Represents an HTML document entry in the graph.

#### HtmlDocument

`javascript new HtmlDocument(file)`

Create an HTML document.

* file File the encapsulated file.

#### anchors

`javascript Object anchors`

List of anchor links.

Plugins that execute during the verify phase can use this to check if named anchors exist on the page or test whether external links return a valid HTTP status code.

#### identifiers

`javascript Object identifiers`

Map of id attributes.

Plugins that execute during the verify phase can use this to determine if a document contains duplicate id attributes.

#### ast

`javascript Object ast`

Get a reference to the file abstract syntax tree.

#### .parse

`javascript HtmlDocument.prototype.parse()`

Traverse the file abstract syntax tree and parse resources in to this document.

Note that in the case of a base element with an hrefattribute a resource is not created but all subsequent URLs are considered relative to the base URL.

+ href (a, area, base, link) + src (audio, embed, iframe, img, input, script, source, track, video) + action (form) + cite (blockquote, del, ins, q) + code (applet) + codebase (applet) + data (object) + manifest (html)

`$3`

Represents a CSS document entry in the graph.

#### CssDocument

`javascript new CssDocument(file)`

Create a CSS document.

* file File the encapsulated file.

#### ast

`javascript Object ast`

Get a reference to the file abstract syntax tree.

#### .parse

`javascript CssDocument.prototype.parse()`

Traverse the file abstract syntax tree and parse resources in to this document.

This implementation parses @import rules using either string URLs or theurl() function notation. It also parses all url()function declarations in normal CSS rule declarations.

`$3`

Represents the application resource graph.

#### Graph

`javascript new Graph()`

Create a resource graph.

#### map

`javascript readonly Object map`

Maps file keys to resources.

#### .addDocument

`javascript Graph.prototype.addDocument()`

Adds a document to the graph.

#### documents

`javascript readonly Array documents`

List of documents without abstract syntax trees.

#### htmlDocuments

`javascript readonly Array htmlDocuments`

List of HTML documents.

#### cssDocuments

`javascript readonly Array cssDocuments`

List of CSS documents.

#### .createDocument

`javascript Graph.prototype.createDocument(file)`

Create a document.

Returns a new document.

* file File the encapsulated file.

#### .createHtmlDocument

`javascript Graph.prototype.createHtmlDocument(file)`

Create an HTML document.

Returns a new HTML document.

* file File the encapsulated file.

#### .createCssDocument

`javascript Graph.prototype.createCssDocument(file)`

Create a CSS document.

Returns a new CSS document.

* file File the encapsulated file.

`$3`

Represents a referenced resource.

The resource may exist within the output file structure or may point to an external (absolute) resource.

#### Resource

`javascript new Resource(uri, node[, base])`

Creates a resource.

* uriString uniform resource identifier. *nodeObject abstract syntax tree node. *base String a base URL.

#### uri

`javascript readonly String uri`

Uniform resource identifier.

#### node

`javascript readonly Object node`

An abstract syntax tree node associated with this resource.

#### base

`javascript readonly String base`

Base URL for this resource.

#### .isAbsolute

`javascript Resource.prototype.isAbsolute(uri)`

Determine if a URI is absolute.

If no URI is given the URI for this resource is used.

Returns a boolean indicating if this resource is absolute.

* uri String uniform resource identifier.

#### canonical

`javascript readonly String canonical`

Get the canonical URI for this resource relative to the baseif a base URL has been associated with this resource.

When no base URL is assigned to this resource it will return the uri`.

License

MIT

---

Created by mkdoc on March 13, 2017

[docs]: https://makestatic.ws/docs/ "Documentation"
[standalone manual]: https://github.com/makestatic/website/blob/master/MANUAL.md "Standalone Manual"
[yarn]: https://yarnpkg.com "Yarn"
[webpack]: https://webpack.js.org "Webpack"
[babel]: https://babeljs.io "Babel"
[postcss]: http://postcss.org "Postcss"
[sugarss]: https://github.com/postcss/sugarss "Sugarss"
[reshape]: https://github.com/reshape/reshape "Reshape Source Code"
[reshapeml]: https://reshape.ml "Reshape"
[clean-css]: https://github.com/jakubpawlowicz/clean-css "Clean CSS"
[html-minifier]: https://github.com/kangax/html-minifier "Html Minifier"
[uglify-js]: https://github.com/mishoo/UglifyJS2 "Uglify JS"
[imagemin]: https://github.com/imagemin/imagemin "Imagemin"
[mkdoc]: https://github.com/mkdoc/mkdoc "Mkdoc"
[browsersync]: https://www.browsersync.io "Browsersync"
[yeoman]: http://yeoman.io "Yeoman"
[spike]: https://www.spike.cf "Spike"
[validator]: https://github.com/validator/validator "HTML Validator"
[github pages]: https://pages.github.com "Github Pages"
[amazon s3]: https://aws.amazon.com/s3/ "Amazon S3"
[google sitemaps]: https://support.google.com/webmasters/answer/183668?hl=en&ref_topic=4581190 "Google Sitemaps"
[sitemaps]: https://www.sitemaps.org/ "Sitemaps"

Graph Resources

> Create a graph of referenced resources

---

Install

``yarn add makestatic-graph-resources`

`API`

`$3`

Create a graph of referenced resources.

For each HTML, CSS and Javascript file inspect the abstract syntax tree and create a resource graph of referenced assets.

#### GraphResources

`javascript new GraphResources(context)`

Create a GraphResources plugin.

Enable this plugin for the graph phase.

* context Object the processing context.

#### .sources

`javascript GraphResources.prototype.sources(file, context, options)`

Inspects the abstract syntax tree for each file to find referenced resources and add them to the graph.

If a file does not have an associated abstract syntax tree a document is added to the resource graph but no parsing is performed on the document.

* fileObject the file being processed. *contextObject the processing context. *options Object the plugin options.

`$3`

Represents a document entry in the graph.

#### Document

`javascript new Document(file)`

Create a document.

* file File the encapsulated file.

#### resources

`javascript readonly Array resources`

List of resources referenced in this document.

#### file

`javascript readonly File file`

Reference to the file that created this document.

#### id

`javascript readonly String id`

Document identifier derived from the file path.

`$3`

Represents an HTML document entry in the graph.

#### HtmlDocument

`javascript new HtmlDocument(file)`

Create an HTML document.

* file File the encapsulated file.

#### anchors

`javascript Object anchors`

List of anchor links.

Plugins that execute during the verify phase can use this to check if named anchors exist on the page or test whether external links return a valid HTTP status code.

#### identifiers

`javascript Object identifiers`

Map of id attributes.

Plugins that execute during the verify phase can use this to determine if a document contains duplicate id attributes.

#### ast

`javascript Object ast`

Get a reference to the file abstract syntax tree.

#### .parse

`javascript HtmlDocument.prototype.parse()`

Traverse the file abstract syntax tree and parse resources in to this document.

Note that in the case of a base element with an hrefattribute a resource is not created but all subsequent URLs are considered relative to the base URL.

`$3`

Represents a CSS document entry in the graph.

#### CssDocument

`javascript new CssDocument(file)`

Create a CSS document.

* file File the encapsulated file.

#### ast

`javascript Object ast`

Get a reference to the file abstract syntax tree.

#### .parse

`javascript CssDocument.prototype.parse()`

Traverse the file abstract syntax tree and parse resources in to this document.

This implementation parses @import rules using either string URLs or theurl() function notation. It also parses all url()function declarations in normal CSS rule declarations.

`$3`

Represents the application resource graph.

#### Graph

`javascript new Graph()`

Create a resource graph.

#### map

`javascript readonly Object map`

Maps file keys to resources.

#### .addDocument

`javascript Graph.prototype.addDocument()`

Adds a document to the graph.

#### documents

`javascript readonly Array documents`

List of documents without abstract syntax trees.

#### htmlDocuments

`javascript readonly Array htmlDocuments`

List of HTML documents.

#### cssDocuments

`javascript readonly Array cssDocuments`

List of CSS documents.

#### .createDocument

`javascript Graph.prototype.createDocument(file)`

Create a document.

Returns a new document.

* file File the encapsulated file.

#### .createHtmlDocument

`javascript Graph.prototype.createHtmlDocument(file)`

Create an HTML document.

Returns a new HTML document.

* file File the encapsulated file.

#### .createCssDocument

`javascript Graph.prototype.createCssDocument(file)`

Create a CSS document.

Returns a new CSS document.

* file File the encapsulated file.

`$3`

Represents a referenced resource.

The resource may exist within the output file structure or may point to an external (absolute) resource.

#### Resource

`javascript new Resource(uri, node[, base])`

Creates a resource.

* uriString uniform resource identifier. *nodeObject abstract syntax tree node. *base String a base URL.

#### uri

`javascript readonly String uri`

Uniform resource identifier.

#### node

`javascript readonly Object node`

An abstract syntax tree node associated with this resource.

#### base

`javascript readonly String base`

Base URL for this resource.

#### .isAbsolute

`javascript Resource.prototype.isAbsolute(uri)`

Determine if a URI is absolute.

If no URI is given the URI for this resource is used.

Returns a boolean indicating if this resource is absolute.

* uri String uniform resource identifier.

#### canonical

`javascript readonly String canonical`

Get the canonical URI for this resource relative to the baseif a base URL has been associated with this resource.

When no base URL is assigned to this resource it will return the uri`.

License

MIT

---

Created by mkdoc on March 13, 2017