# @skypager/helpers-document

> skypager document helper

Latest version **1.3.1** (published 2019-08-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @skypager/helpers-document
pnpm add @skypager/helpers-document
yarn add @skypager/helpers-document
bun add @skypager/helpers-document
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2019-08-21 |
| First published | 2019-01-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 16 |
| Unpacked size | 10.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | Jon Soeder |
| Maintainers | soederpop |

## Links

- npm: https://www.npmjs.com/package/@skypager/helpers-document
- Repository: https://github.com/skypager/skypager
- Homepage: https://skypager.io
- Issues: https://github.com/skypager/skypager/issues
- npm.io page: https://npm.io/package/@skypager/helpers-document

## Dependencies (16)

- [brace](https://npm.io/package/brace.md) ^0.11.1
- [unified](https://npm.io/package/unified.md) ^7.0.0
- [react-ace](https://npm.io/package/react-ace.md) ^6.3.2
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.2.2
- [@babel/types](https://npm.io/package/@babel/types.md) ^7.2.2
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.2.2
- [@babel/template](https://npm.io/package/@babel/template.md) ^7.2.2
- [@babel/traverse](https://npm.io/package/@babel/traverse.md) ^7.2.5
- [@babel/generator](https://npm.io/package/@babel/generator.md) ^7.2.0
- [unist-util-visit](https://npm.io/package/unist-util-visit.md) ^1.4.0
- [unist-util-select](https://npm.io/package/unist-util-select.md) ^2.0.0
- [@skypager/helpers-mdx](https://npm.io/package/@skypager/helpers-mdx.md) ^1.1.1
- [unist-util-find-after](https://npm.io/package/unist-util-find-after.md) ^2.0.2
- [unist-util-find-before](https://npm.io/package/unist-util-find-before.md) ^2.0.2
- [unist-util-find-all-after](https://npm.io/package/unist-util-find-all-after.md) ^1.0.2
- [unist-util-find-all-before](https://npm.io/package/unist-util-find-all-before.md) ^2.0.2

## Recent versions

- 1.3.1 (latest) — 2019-08-21
- 0.3.2 (beta) — 2019-02-14
- 1.1.5 — 2019-06-24
- 1.1.3 — 2019-06-07
- 1.1.2 — 2019-06-02
- 1.1.1 — 2019-05-24
- 1.1.0 — 2019-05-24
- 1.0.1 — 2019-05-17
- 1.0.1-alpha.1 — 2019-05-15
- 0.4.15 — 2019-05-08
- 0.4.14 — 2019-05-08
- 0.4.12 — 2019-05-08
- 0.4.2 — 2019-04-16
- 0.4.0 — 2019-03-26
- 0.3.1 — 2019-02-14
- … 8 more at https://npm.io/package/@skypager/helpers-document/versions

## README

# Document Helper

The Document Helper is an attempt to unify the content of ES6 JavaScript Modules and Markdown Documents that live along side them.

By treating each file as a unique entity, backed by a `File` object in [@skypager/features-file-manager](../../features/file-manager), 
we rely on the ability to work with each file using their respective AST forms provided by libraries like remark and babel.

An AST consists of a tree of nodes (that can contain other nodes), each node describes what kind of syntax it is and where in the file it was pulled from,
a `Position` object with start line and column, and end line and column.

So with this we can say, give me all of the level 1 headings

```javascript
const mdxFile = runtime.mdxDoc('README')
const level1Headings = mdxFile.body.filter((node) => node.type === 'h1')
```

or give me all of the import declarations in this React component

```javascript
const babelFile = runtime.script('src/components/NavBar')

babelFile.parse().then(() => {
  const { importDeclarations } = babelFile  
  console.log(importDeclarations) // raw import nodes, can be parsed for module identifiers like react, react-dom
})
```

These are pretty low level capabilities, on top of which higher level abstractions can be built.

The [Runnable MDX Example App](../../examples/runnable-mdx) is one example, where we use this to make runnable and live-editable code blocks.

In the future, imagine something like this:

You could write a component which lets you write a markdown file like such

```markdown
---
projectType: react-web-application
customer: Soederpop, Inc
deployTo: zeit
accounts:
  google: soederpops-google
---

# [My Website](https://soederpop.com)

[Sketchfile Link](https://link.to/designer/)
[Mock Data](https://google-sheets.com/my/spreadsheets/my-website/mock-data)
[Page Copy](https://google-docs/my/documents/my-website/content)

## Sitemap 

- [Home](/)
- [About](/about) 
- [Contact US](/contact-us) 
- [Products](/products)
- [Product Details](/products/:id)
```

And from this file, be able to identify 

- `My Website` which lives on `soederpop.com`
- a link to a sketchfile, which you can automatically download and use with [Skypager Sketch Helper](../sketch) 
- a link to a [Google Spreadsheet with Mock Data](../google-sheet)
- a link to a [Google Document with Copy / Content](../google-doc)
- the site's pages and their desired URLs 
- that the site should be deployed to zeit.co
- that the site should use soederpops google account to access the google sheets API

Once we expand these links and understand what they are, we can use them to gather the data and information we need to automate every aspect of building and publishing this website. 

We could use the [Script Helper](src/babel/babel.js) to autogenerate a `react-router` component from this information

```javascript
/** these nodes are standard boilerplate */
import React from 'react' 
import { BrowserRouter, Route } from 'react-router-dom' 
/** these nodes are generated from data */
import { HomePage, AboutPage, ProductsPage, ProductDetailsPage } from './pages'

/** this is easily templateable */
export default function WebsiteRouter() {
  return (
    <BrowserRouter>
      {/** this is all data driven */}
      <Route path="/" component={HomePage} />
      <Route path="/about" component={AboutPage} />
      <Route path="/products" component={ProductsPage} />
      <Route path="/products/:id" component={ProductDetailsPage} />
      {/** this is all data driven */}
    </BrowserRouter>
  )  
}
```

By [parsing the layer and sketch file information](../sketch/test/fixtures), we can even generate much of the pages, and theming code.

---
_Source: https://npm.io/package/@skypager/helpers-document · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._