Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Convert codebase to CommonJS JavaScript with JSDoc annotations #3

Merged
merged 3 commits into from
Feb 3, 2025
Merged

Convert codebase to CommonJS JavaScript with JSDoc annotations #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2597b53
Convert codebase to CommonJS JavaScript with JSDoc annotations
svbutko Feb 3, 2025
e85afcf
Remove redundant README
svbutko Feb 3, 2025
7e44f3b
Adjust code location in README
svbutko Feb 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 0 additions & 9 deletions .prettierrc.js
View file
Open in desktop

This file was deleted.

81 changes: 40 additions & 41 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
[![GitHub Followers](https://img.shields.io/github/followers/svbutko?label=Follow%20%40svbutko&style=social)](https://github.com/svbutko)
[![Twitter Follow](https://img.shields.io/twitter/follow/svbutko?label=Follow%20%40svbutko&style=social)](https://twitter.com/svbutko)

<a href="https://www.buymeacoffee.com/svbutko"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=svbutko&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff"></a>

Generate code-friendly image URI source constants.
To learn about use cases and what issues it solves check [this blog post](https://dev.to/svbutko/react-native-image-resource-generator-m14).
Expand All @@ -30,56 +29,56 @@ npm install --save-dev react-native-image-resource-generator
### Usage

1. Create a folder and put all of your images there (_sub-folders are supported too_). Example:
```
project
│ package.json
│ src
│
└───resources
│ │ fonts
│ │ settings
│ │
│ └───images
│ │ arrow_down.png
│ │ [email protected]
│ │ [email protected]
│ │ arrow_up.png
│ │ ...
```
```
project
│ package.json
│ src
│
└───resources
│ │ fonts
│ │ settings
│ │
│ └───images
│ │ arrow_down.png
│ │ [email protected]
│ │ [email protected]
│ │ arrow_up.png
│ │ ...
```
2. Add script to your `package.json` scripts or type into terminal:
* JavaScript: ```img-res-gen --dir=resources/images --out=src/common/ImageResources.js```
* TypeScript ```img-res-gen --dir=resources/images --out=src/common/ImageResources.g.ts --ts```
3. The result of the previous command will create a file with static image URI sources, which will look something similar to this:
```typescript
/* eslint:disable */
/* tslint:disable */
import {ImageURISource} from "react-native";

export class ImageResources {
static readonly account: ImageURISource = require("../../resources/images/account.png");
static readonly arrow_down: ImageURISource = require("../../resources/images/arrow_down.png");
static readonly arrow_up: ImageURISource = require("../../resources/images/arrow_up.png");
static readonly avatar: ImageURISource = require("../../resources/images/avatar.png");
static readonly back: ImageURISource = require("../../resources/images/back.png");
static readonly bank: ImageURISource = require("../../resources/images/bank.png");
static readonly bell: ImageURISource = require("../../resources/images/bell.png");
}
```
```typescript
/* eslint:disable */
/* tslint:disable */
import {ImageURISource} from "react-native";
export class ImageResources {
static readonly account: ImageURISource = require("../../resources/images/account.png");
static readonly arrow_down: ImageURISource = require("../../resources/images/arrow_down.png");
static readonly arrow_up: ImageURISource = require("../../resources/images/arrow_up.png");
static readonly avatar: ImageURISource = require("../../resources/images/avatar.png");
static readonly back: ImageURISource = require("../../resources/images/back.png");
static readonly bank: ImageURISource = require("../../resources/images/bank.png");
static readonly bell: ImageURISource = require("../../resources/images/bell.png");
}
```
4. After this use it anywhere you need:
```typescript jsx
<Image source={ImageResources.account} style={styles.icon} />
```
```typescript jsx
<Image source={ImageResources.account} style={styles.icon} />
```

If you added or removed images, simply re-run the script to regenerate the file.

### Options

| Option | Description | Required | Example
|---------------|-----------------------------------------------------------------------------|----------|---------------------------------------
| dir | Relative directory path with images | `True` | `img-res-gen --dir=resources/images`
| out | Output file path | `True` | `img-res-gen --out=src/common/ImageResources.g.ts`
| read | Read directory path, adds additional path to a file's output required path | `False` | `img-res-gen --read=build/src`
| ts | Should the output file be generated as a TypeScript file | `False` | `img-res-gen --ts`
| Option | Description | Required | Example |
|--------|----------------------------------------------------------------------------|----------|----------------------------------------------------|
| dir | Relative directory path with images | `True` | `img-res-gen --dir=resources/images` |
| out | Output file path | `True` | `img-res-gen --out=src/common/ImageResources.g.ts` |
| read | Read directory path, adds additional path to a file's output required path | `False` | `img-res-gen --read=build/src` |
| ts | Should the output file be generated as a TypeScript file | `False` | `img-res-gen --ts` |



Loading