npmpackage.info

@mdx-js/loader

Markdown for the component era

3.1.0

17,877

MIT

JavaScript

14.73 kB

272,876,661 5.1

Installations

npm install @mdx-js/loader

Developer Guide

BETA

Typescript

No

Module System

ESM

Node Version

23.0.0

NPM Version

10.9.0 Score

50.7

Supply Chain

65.6

Quality

81.4

Maintenance

100

Vulnerability

99.6

License

Pull Requests

Open

7

Total

1,419

Closed

313

Merged

1,099

Issues

Open

6

Total

671

Closed

665

Releases

119

3.1.0

Published on 18 Oct 2024

3.0.1

Published on 12 Feb 2024

3.0.0

Published on 24 Oct 2023

2.3.0

Published on 09 Feb 2023

2.2.1

Published on 14 Dec 2022

2.2.0

Published on 14 Dec 2022

View all 119 releases

Contributors

193

Unable to fetch Contributors

View all 193 contributors

Languages

JavaScript

MDX

JavaScript (100%)

Developer

mdx-js

Download Statistics

Total Downloads

272,876,661

Last Day

22,849

Last Week

355,685

Last Month

2,249,834

Last Year

31,067,538

GitHub Statistics

17,877 Stars

1,743 Commits

1,138 Forks

88 Watching

10 Branches

193 Contributors

Sponsor this package

https://opencollective.com/unified

Maintainers

Package Meta Information

Latest Version

3.1.0

Package Id

@mdx-js/loader@3.1.0

Unpacked Size

14.73 kB

Size

5.66 kB

File Count

NPM Version

10.9.0

Node Version

23.0.0

Publised On

18 Oct 2024

Total Downloads

Cumulative downloads

Total Downloads

272,876,661

Last day

-80.2%

22,849

Compared to previous day

Last week

-37.6%

355,685

Compared to previous week

Last month

-11.9%

2,249,834

Compared to previous month

Last year

-19.3%

31,067,538

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@mdx-js/mdx source-map

Peer Dependencies

webpack

Versions

`@mdx-js/loader`

webpack loader for MDX.

What is this?
When should I use this?
Install
Use
API
- mdx
- Options
Examples
- Combine with Babel
Types
Compatibility
Security
Contribute
License

What is this?

This package is a webpack loader to support MDX.

When should I use this?

This integration is useful if you’re using webpack (or another tool that uses webpack, such as Next.js or Rspack).

This integration can be combined with the Babel loader to compile modern JavaScript features to ones your users support.

If you want to evaluate MDX code then the lower-level compiler (@mdx-js/mdx) can be used manually.

Install

This package is ESM only. In Node.js (version 16+), install with npm:

1npm install @mdx-js/loader

Use

Add something along these lines to your webpack.config.js:

1/**
2 * @import {Options} from '@mdx-js/loader'
3 * @import {Configuration} from 'webpack'
4 */
5
6/** @type {Configuration} */
7const webpackConfig = {
8  module: {
9    // …
10    rules: [
11      // …
12      {
13        test: /\.mdx?$/,
14        use: [
15          {
16            loader: '@mdx-js/loader',
17            /** @type {Options} */
18            options: {/* jsxImportSource: …, otherOptions… */}
19          }
20        ]
21      }
22    ]
23  }
24}
25
26export default webpackConfig

See also ¶ Next.js and ¶ Vue CLI, if you’re using webpack through them, for more info.

API

This package exports no identifiers. The default export is mdx.

`mdx`

This package exports a webpack plugin as the default export. Configuration (see Options) are passed separately through webpack.

`Options`

Configuration (TypeScript type).

Options are the same as CompileOptions from @mdx-js/mdx with the exception that the SourceMapGenerator and development options are supported based on how you configure webpack. You cannot pass them manually.

Examples

Combine with Babel

If you use modern JavaScript features you might want to use Babel through babel-loader to compile to code that works in older browsers:

1/**
2 * @import {Options} from '@mdx-js/loader'
3 * @import {Configuration} from 'webpack'
4 */
5
6/** @type {Configuration} */
7const webpackConfig = {
8  module: {
9    // …
10    rules: [
11      // …
12      {
13        test: /\.mdx?$/,
14        use: [
15          // Note that Webpack runs right-to-left: `@mdx-js/loader` is used first, then
16          // `babel-loader`.
17          {loader: 'babel-loader', options: {}},
18          {
19            loader: '@mdx-js/loader',
20            /** @type {Options} */
21            options: {}
22          }
23        ]
24      }
25    ]
26  }
27}
28
29export default webpackConfig

Types

This package is fully typed with TypeScript. It exports the additional type Options. See § Types on our website for information.

Compatibility

Projects maintained by the unified collective are compatible with maintained versions of Node.js.

When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line, @mdx-js/loader@^3, compatible with Node.js 16.

Security

See § Security on our website for information.

Contribute

See § Contribute on our website for ways to get started. See § Support for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Security-Policy

Determines if the project has published a security policy.

8

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

4

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 4

Details

Warn: third-party GitHubAction not pinned by hash: .github/workflows/bb.yml:5: update your workflow using https://app.stepsecurity.io/secureworkflow/mdx-js/mdx/bb.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:8: update your workflow using https://app.stepsecurity.io/secureworkflow/mdx-js/mdx/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/mdx-js/mdx/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/mdx-js/mdx/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/mdx-js/mdx/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/mdx-js/mdx/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/website.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/mdx-js/mdx/website.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/website.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/mdx-js/mdx/website.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/website.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/mdx-js/mdx/website.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/website.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/mdx-js/mdx/website.yml/main?enable=pin
Info: 0 out of 8 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 2 third-party GitHubAction dependencies pinned
Info: 3 out of 3 npmCommand dependencies pinned

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

5.1

/10

Last Scanned on 2024-12-16

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @mdx-js/loader

@mdx-js/vue-loader

2.0.0

Deprecated: this package is no longer maintained.

@mdx-js/node-loader

3.1.0

Node.js loader for MDX

mdx-frontmatter-loader

0.1.1

frontmatter loader for @mdx-js

jest-mdx-loader

0.1.1

Jest transformer that wraps mdx-js/mx webpack loader

@mdx-js/loader

Installations

Developer Guide

No

ESM

23.0.0

10.9.0

Score

Pull Requests

7

1,419

313

1,099

Issues

6

671

665

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Sponsor this package

Maintainers

Package Meta Information

Total Downloads

272,876,661

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

@mdx-js/loader

Contents

What is this?

When should I use this?

Install

Use

API

mdx

Options

Examples

Combine with Babel

Types

Compatibility

Security

Contribute

License

10

10

10

10

10

8

4

0

0

0

0

0

0

5.1

/10

Other packages similar to @mdx-js/loader

`@mdx-js/loader`

`mdx`

`Options`