https://github.com/suiyun39/babel-plugin-jsx-asset-url-import

Extract and transform static url to import in JSX
https://github.com/suiyun39/babel-plugin-jsx-asset-url-import

babel babel-plugin jsx

Last synced: about 17 hours ago
JSON representation

Extract and transform static url to import in JSX

• Host: GitHub
• URL: https://github.com/suiyun39/babel-plugin-jsx-asset-url-import
• Owner: suiyun39
• License: mit
• Created: 2023-01-31T07:56:19.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-03-13T05:17:03.000Z (11 months ago)
• Last Synced: 2024-12-28T17:35:15.302Z (30 days ago)
• Topics: babel, babel-plugin, jsx
• Language: TypeScript
• Homepage:
• Size: 237 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# babel-plugin-jsx-asset-url-import

Extract and transform static url to import in JSX

[English](./README.md) | [简体中文](./README.zh-CN.md)

![npm](https://img.shields.io/npm/v/babel-plugin-jsx-asset-url-import?logo=npm&style=for-the-badge)

![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/suiyun39/babel-plugin-jsx-asset-url-import/ci.yml?label=CI&logo=github-actions&logoColor=white&style=for-the-badge)

![Codecov](https://img.shields.io/codecov/c/github/suiyun39/babel-plugin-jsx-asset-url-import?logo=codecov&style=for-the-badge)

## Example

### Input

```tsx

import React from 'react';

const App: React.FC = () => {

  return 

}

```

### Output

```tsx

import React from 'react';

import _import_assets from './logo.png';

const App: React.FC = () => {

  return 

}

```

## Installation & Usage

```bash

pnpm add -D babel-plugin-jsx-asset-url-import

```

**babel.config.js**

```js

export default {

  plugins: ['jsx-asset-url-import'],

};

```

## Options

### includeAbsolute

- type: `boolean`

- default: `false`

Include absolute paths when extracting

### tags

- type: `Record`

- default:

  ```javascript

  {

    audio: ['src'],

    embed: ['src'],

    img: ['src', 'srcSet'],

    input: ['src'],

    object: ['data'],

    source: ['src', 'srcSet'],

    track: ['src'],

    video: ['poster', 'src'],

    image: ['xlinkHref', 'href'],

    use: ['xlinkHref', 'href'],

  }

  ```

Configure tags and attributes for extraction. If you want to extract the attributes of custom components. Please add it here. Plugin internals will be merged with the default configuration

If your component is contained in object, similar to `` . Please configure as `'Foo.Bar': ['src']`

If you want to disable default rules. Please configure as `img: []`

## Reference & Thanks

- [vue-compiler-sfc](https://github.com/vuejs/core/tree/main/packages/compiler-sfc) - The source of inspiration for this project

- [babel-handbook](https://github.com/jamiebuilds/babel-handbook) - Thanks for providing the Chinese handbook

- [srcset-parse](https://github.com/molefrog/srcset-parse) - Thanks for **[@molefrog](https://github.com/molefrog)**, Dealing with srcset is giving me headaches

- [babel-plugin-transform-jsx-url](https://github.com/xyyjk/babel-plugin-transform-jsx-url)

- [babel-plugin-transform-react-jsx-img-import](https://github.com/gvelo/babel-plugin-transform-react-jsx-img-import)