JSPM

  • Created
  • Published
  • Downloads 154330
  • Score
    100M100P100Q162615F
  • License MIT

dpdm

Package Exports

  • dpdm

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (dpdm) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

dpdm

A dependencies analysis instrument and framework.

Install

# internal
npm i -g https://git.same.com/same-client/dpdm.git

# TODO publish to npm
npm i -g dpdm

Example

If you have a project will follow directory structure:

.
├── node_modules
│   └── ...
├── package.json
├── src
│   ├── components
│   │   ├── Dialog.less
│   │   ├── Dialog.tsx
│   │   └── Provider.tsx
│   ├── index.ts
│   └── widgets
│       └── alert.ts
├── tsconfig.json
└── typings.json

5 directories, 8 files

And with the follow contents:

/* -------- ./package.json -------- */
{
  "name": "example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
/* -------- ./src/components/Dialog.less -------- */
/**
 * @description
 * @author acrazing
 * @since 2016-09-24 21:37:52
 * @version 1.0.0.0
 * @file components/Dialog.less
 * @desc components/Dialog.less
 */


.dialog {
  position: fixed;
}
/* -------- ./src/components/Dialog.tsx -------- */
/**
 * @description
 * @author acrazing
 * @since 2016-09-24 21:31:49
 * @version 1.0.0.0
 * @file components/Dialog.tsx
 * @desc components/Dialog.tsx
 */


import * as React from 'react'
import './Dialog.less'

export class Dialog extends React.Component<void, void> {
  render() {
    return <div>{this.props.children}</div>
  }
}
/* -------- ./src/components/Provider.tsx -------- */
/**
 * @description
 * @author acrazing
 * @since 2016-09-24 21:32:36
 * @version 1.0.0.0
 * @file components/Provider.tsx
 * @desc components/Provider.tsx
 */


import * as React from 'react'

export class Provider extends React.Component<void, void> {
  render() {
    return <div>Hello Provider</div>
  }
}

export function mount<T>(Component: typeof React.Component, props:T, children:React.ReactNode) {
  // pass
}
/* -------- ./src/index.ts -------- */
/**
 * @description
 * @author acrazing
 * @since 2016-09-24 21:31:12
 * @version 1.0.0.0
 * @file index.ts
 * @desc index.ts
 */


export * from './widgets/alert'
export * from './components/Dialog'
export * from './components/Provider'
/* -------- ./src/widgets/alert.ts -------- */
/**
 * @description
 * @author acrazing
 * @since 2016-09-24 21:32:00
 * @version 1.0.0.0
 * @file widgets/alert.ts
 * @desc widgets/alert.ts
 */


import { Dialog } from 'components/Dialog'
import { mount } from 'components/Provider'

export function alert(msg) {
  mount(Dialog, void 0, msg)
}
/* -------- ./tsconfig.json -------- */
{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "declaration": true
    }
}
/* -------- ./typings.json -------- */
{
  "name": "example",
  "dependencies": {}
}

Then run dpdm under this directory, will print on screen:

{
  "entries": {
    "index.ts": {
      "files": [
        "widgets/alert.ts",
        "components/Dialog.tsx",
        "components/Dialog.less",
        "components/Provider.tsx"
      ],
      "modules": [],
      "unknown": [
        "react"
      ]
    }
  },
  "files": {
    "index.ts": {
      "files": [
        "widgets/alert.ts",
        "components/Dialog.tsx",
        "components/Provider.tsx"
      ],
      "modules": [],
      "unknown": [],
      "uid": 1
    },
    "widgets/alert.ts": {
      "files": [
        "components/Dialog.tsx",
        "components/Provider.tsx"
      ],
      "modules": [],
      "unknown": [],
      "uid": 1
    },
    "components/Dialog.tsx": {
      "files": [
        "components/Dialog.less"
      ],
      "modules": [],
      "unknown": [
        "react"
      ],
      "uid": 1
    },
    "components/Provider.tsx": {
      "files": [],
      "modules": [],
      "unknown": [
        "react"
      ],
      "uid": 1
    }
  },
  "parents": {
    "widgets/alert.ts": [
      "index.ts"
    ],
    "components/Dialog.tsx": [
      "index.ts",
      "widgets/alert.ts"
    ],
    "components/Provider.tsx": [
      "index.ts",
      "widgets/alert.ts"
    ],
    "components/Dialog.less": [
      "components/Dialog.tsx"
    ]
  },
  "modules": {}
}

The result includes four map:

  • entries: the entry files specified by command line,
  • files: the all files are dependent on the entries and entries self,
  • parents: the files dependent,
  • modules: the modules dependent,

The entries and files include the file's dependencies, seperated by modules, files and unknown. entries resolved all dependencies recursively, files just resolved shallowly.

For typescript, if a import or export has a moduleSpecifier, will think as a dependency, if is relative or absolute path, or the moduleResolution is classic and could be resolve, will be treated as file dependency, else if be resolved by node_modules, will treated as module dependency, else is unknown dependency

Usage

Command line

License

MIT