bug(windows): paths - Githubissues

Kristinita commented 3 years ago

1. Summary

posthtml-img-autosize doesn’t work for Windows.

I get errors as:

Error: Promise rejected with value: "ENOENT: no such file or directory, open 'C:\\path\\to\\project\\C:\\KiraImage.jpg'"

2. Reproducibility

I reproduce the problem for posthtml-cli and grunt-posthtml both on Windows.

On Linux I don’t have this problem.

I successfully use some another posthtml plugins (example), so I think that possibly that the problem is specific for the posthtml-img-autosize plugin.

3. Configuration

Operating system:
1. Ubuntu 20.04.1 LTS (Travis CI)
2. Windows Server 2019 (AppVeyor)
3. Windows 10.0.18363 Pro N for Workstations 64-bit EN (Local)
posthtml:
1. posthtml-cli 0.7.6
2. grunt-posthtml 0.5.1
posthtml-img-autosize 0.1.5

4. MCVE

You can see the configuration in the KiraPosthtmlAsync branch of my demo/debugging repository.

KiraPosthtml.html:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Kira Goddess!</title>
</head>

<body>
    <img alt="Nelia leaves" src="NeliaLeaves.jpg">
    <img alt="Kira Goddess" src="https://i.imgur.com/J17UOiZ.jpg">
    <picture>
        <source srcset="NeliaLeaves.webp" type="image/webp">
        <img src="NeliaLeaves.jpg" alt="Nelia leaves again">
    </picture>
</body>

</html>

Gruntfile.coffee:

module.exports = (grunt) ->

    grunt.loadNpmTasks 'grunt-posthtml'

    grunt.initConfig

        posthtml:
            options:
                use: [
                    require('posthtml-img-autosize')(processEmptySize: true)
                ]
            single:
                files: [
                    src: 'KiraPostHTML.html'
                    dest: 'KiraImgAutosizeGrunt.html'
                ]

The part of .travis.yml — Ubuntu build:

install:
- npm install -g grunt-cli posthtml-cli posthtml-img-autosize
- npm install

script:
- posthtml KiraPostHTML.html -o KiraImgAutosizeCLI.html -u posthtml-img-autosize --posthtml-img-autosize.processEmptySize true
- grunt posthtml --verbose
- cat KiraImgAutosizeCLI.html
- cat KiraImgAutosizeGrunt.html

The part of appveyor.yml — Windows build:

install:
- npm install -g grunt-cli posthtml-cli posthtml-img-autosize
- npm install

test_script:
- posthtml KiraPostHTML.html -o KiraImgAutosizeCLI.html -u posthtml-img-autosize --posthtml-img-autosize.processEmptySize true

on_failure:
- grunt posthtml --verbose

5. Behavior

5.1. Ubuntu — expected

Travis build:

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>Kira Goddess!</title>

</head>

<body>

    <img alt="Nelia leaves" src="NeliaLeaves.jpg" width="620" height="1080">

    <img alt="Kira Goddess" src="https://i.imgur.com/J17UOiZ.jpg" width="864" height="1078">

    <picture>

        <source srcset="NeliaLeaves.webp" type="image/webp">

        <img src="NeliaLeaves.jpg" alt="Nelia leaves again" width="620" height="1080">

    </picture>

</body>

</html>

posthtml-img-autosize successfully add width and height for CLI and Grunt commands.

5.2. Windows — bug

AppVeyor build:

posthtml KiraPostHTML.html -o KiraImgAutosizeCLI.html -u posthtml-img-autosize --posthtml-img-autosize.processEmptySize true
Error: Promise rejected with value: "ENOENT: no such file or directory, open 'C:\\projects\\sashagruntdebugging\\C:\\NeliaLeaves.jpg'"
    at process.<anonymous> (C:\Users\appveyor\AppData\Roaming\npm\node_modules\posthtml-cli\node_modules\hard-rejection\index.js:15:12)
    at process.emit (events.js:314:20)
    at processPromiseRejections (internal/process/promises.js:245:33)
    at processTicksAndRejections (internal/process/task_queues.js:94:32)
Command exited with code 1

grunt posthtml --verbose
(node:2368) UnhandledPromiseRejectionWarning: ENOENT: no such file or directory, open 'C:\projects\sashagruntdebugging\C:\NeliaLeaves.jpg'

Path problem for CLI and Grunt both.

6. Not helped

I tried:

6.1. CLI

Command-line arguments like:

6.2. Grunt

Options like:

root: '\.'
root: process.cwd()

7. root option

I don’t understand why posthtml-img-autosize has a root option at all. PostHTML works with HTML directly. In HTML, relative links to images look like:

src="NeliaLeaves.jpg"
src="..\..\path\to\NeliaLeaves.jpg"

Is these cases a root option not really needed.

Is it needed in any other cases?

Thanks.

Scrum commented 3 years ago

@Kristinita resolve in version 0.1.6

Kristinita commented 3 years ago

Status: CONFIRMED :heavy_check_mark:

I upgraded posthtml-img-autosize to the version 0.1.6 → in Windows I got the same behavior as for Linux; see AppVeyor build.

Thanks.

Kristinita commented 3 years ago

@Scrum, excuse me, I said “confirmed” too early

Status: Another problem :exclamation:

1. Summary

posthtml-img-autosize 0.1.6 works incorrectly, if HTML files and images are in folders and/or subfolders.

2. Details

As I wrote in the section 7 of original issue, “I don’t understand why posthtml-img-autosize has a root option at all”.

HTML already use relative paths. For example, we have a line in our HTML:

<img alt="Nelia leaves" src="NeliaLeaves.jpg">

And a project where HTML files are located in various folders and subfolders.

3. Behavior 1

3.1. Expected

If HTML file is KiraPostHTML.html:

NeliaLeaves.jpg should be in the root folder

elif KiraFolder/KiraPostHTML.html:

correct path for image is KiraFolder/NeliaLeaves.jpg

else KiraFolder/KiraSubfolder/KiraPostHTML.html:

KiraFolder/KiraSubfolder/NeliaLeaves.jpg

and so on.

3.2. Current

In all three cases above posthtml-img-autosize tries to find the file NeliaLeaves.jpg in the root folder.

4. MCVE

You can see this configuration in the KiraPosthtmlImgAutosizePaths branch of my demo/debugging repository.

The part of package.json:

{
  "devDependencies": {
    "coffeescript": "^2.5.1",
    "grunt": "^1.3.0",
    "grunt-posthtml": "0.5.1",
    "posthtml-img-autosize": "^0.1.6"
  }
}

Gruntfile.coffee (in example I builded the file object dynamically):

module.exports = (grunt) ->

    grunt.loadNpmTasks 'grunt-posthtml'

    grunt.initConfig

        posthtml:
            options:
                use: [
                    require('posthtml-img-autosize')(processEmptySize: true)
                ]
            target:
                files: [
                    expand: true
                    cwd: '.'
                    src: 'KiraFolder/*.html'
                    dest: '.'
                    ext: '.output.html'
                ]

The part of .travis.yml:

install:
- npm install -g grunt-cli posthtml-cli posthtml-img-autosize
- npm install

script:
- posthtml KiraFolder/KiraPostHTML.html -o KiraFolder/KiraImgAutosizeCLI.html -u posthtml-img-autosize --posthtml-img-autosize.processEmptySize true
- grunt posthtml --verbose
- cat KiraFolder/KiraImgAutosizeCLI.html
- cat KiraFolder/KiraPostHTML.output.html

KiraFolder/KiraPostHTML.html:

<!doctype html>
<html>

<head>
    <title>Kira Goddess!</title>
</head>

<body>
    <img alt="Nelia leaves" src="NeliaLeaves.jpg">
</body>

</html>

5. Behavior 2

Correct image path is SashaGruntDebugging/KiraFolder/NeliaLeaves.jpg, not SashaGruntDebugging/NeliaLeaves.jpg.

5.1. CLI

Travis build:

$ posthtml KiraFolder/KiraPostHTML.html -o KiraFolder/KiraImgAutosizeCLI.html -u posthtml-img-autosize --posthtml-img-autosize.processEmptySize true

Error: Promise rejected with value: "ENOENT: no such file or directory, open '/home/travis/build/Kristinita/SashaGruntDebugging/NeliaLeaves.jpg'"

    at process.<anonymous> (/home/travis/.nvm/versions/node/v14.13.1/lib/node_modules/posthtml-cli/node_modules/hard-rejection/index.js:15:12)

    at process.emit (events.js:314:20)

    at processPromiseRejections (internal/process/promises.js:245:33)

    at processTicksAndRejections (internal/process/task_queues.js:94:32)

The command "posthtml KiraFolder/KiraPostHTML.html -o KiraFolder/KiraImgAutosizeCLI.html -u posthtml-img-autosize --posthtml-img-autosize.processEmptySize true" exited with 1.

5.2. Grunt

Travis build:

Running "posthtml:target" (posthtml) task

Verifying property posthtml.target exists in config…OK

Files: KiraFolder/KiraPostHTML.html -> KiraFolder/KiraPostHTML.output.html

Options: use=[null], singleTags=[], closingSingleTag="default", skipParse=null, sync=null

Reading KiraFolder/KiraPostHTML.html…OK

(node:6165) UnhandledPromiseRejectionWarning: ENOENT: no such file or directory, open '/home/travis/build/Kristinita/SashaGruntDebugging/NeliaLeaves.jpg'

(Use `node --trace-warnings …` to show where the warning was created)

(node:6165) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)

(node:6165) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Thanks.

Scrum commented 3 years ago

As I wrote in the section 7 of original issue, “I don’t understand why posthtml-img-autosize has a root option at all”.

HTML already use relative paths. For example, we have a line in our HTML:

The build process itself has a root and all running build processes will rely on this root, accordingly plugins need to specify paths relative to the root of the build process

module.exports = (grunt) ->

    grunt.loadNpmTasks 'grunt-posthtml'

    grunt.initConfig

        posthtml:
            options:
                use: [
                    require('posthtml-img-autosize')(
                        root: 'KiraFolder',
                        processEmptySize: true
                    )
                ]
            target:
                files: [
                    expand: true
                    cwd: '.'
                    src: 'KiraFolder/*.html'
                    dest: '.'
                    ext: '.output.html'
                ]

Kristinita commented 3 years ago

Status: Not fixed :crying_cat_face:

1. Details

@Scrum, I don’t understand, how it can solve paths problem for real projects with multiple folders and subfolders. And I still think that the root option — this is a wrong scenario.

If it doesn’t, please show the correct Gruntfile.coffee for the MCVE below.

2. MCVE

See this configuration in KiraPosthtmlImgAutosizeMultipleFiles branch of my repository for demonstrations and debugging.

Content of output folder of my repository:

├───KiraAnotherFolder
│       KiraPostHTML.html
│
└───KiraFolder
    │   KiraPostHTML.html
    │   NeliaLeaves.jpg
    │
    └───KiraSubfolder
            KiraPostHTML.html

Parts of the files:

KiraFolder/KiraPostHTML.html:

<img alt="Nelia leaves" src="NeliaLeaves.jpg">

KiraFolder/KiraSubfolder/KiraPostHTML.html:

<img alt="Nelia leaves" src="../NeliaLeaves.jpg">

KiraAnotherFolder/KiraPostHTML.html:

<img alt="Nelia leaves" src="../KiraFolder/NeliaLeaves.jpg">

Paths in the src attribute of all 3 files are correct, but posthtml-img-autosize doesn’t work as expected, see the Travis build.

Thanks.

Scrum commented 3 years ago

@Scrum, I don’t understand, how it can solve paths problem for real projects with multiple folders and subfolders. And I still think that the root option — this is a wrong scenario.

If it doesn’t, please show the correct Gruntfile.coffee for the MCVE below.

You can not specify the root directory, but then you need to specify the full path to the resource location.

Because your paths are relative to the root directory output. This is how it will be right for all three files where used img

<img alt="Nelia leaves" src="KiraFolder/NeliaLeaves.jpg">

Kristinita commented 3 years ago

Status: Not fixed :crying_cat_face:

Because your paths are relative to the root directory output. This is how it will be right for all three files where used img

<img alt="Nelia leaves" src="KiraFolder/NeliaLeaves.jpg">

@Scrum, but browsers will not find the correct path to the image in this case. The image will not be displayed in browsers.

Could not load the image

Thanks.

Scrum commented 3 years ago

It seems to me that you have a rather confusing connection between templates and static resources.

I can suggest you structure your ecosystem to something like this

src
├── assets
│   ├── configs
│   ├── styles
│   ├── fonts
│   ├── images
│   ├── videos
│   ├── audios
│   └── javascripts
└── templates
    ├── base
    │   └── base.html
    ├── coponents
    │   └── button.html    
    ├── layout
    │   └── header.html    
    └── pages
        └── index.html

Try to keep all static resources in one place assets

Kristinita commented 3 years ago

Status: Still not fixed :crying_cat_face:

1. MCVE

Type: Counterargument 💬

The structure of files and folders in the folder output:

│   KiraRoot.html
│
├───assets
│       NeliaLeaves.jpg
│
└───KiraFolder
    │   KiraInFolder.html
    │
    └───KiraSubfolder
            KiraInSubfolder.html

Parts of files:

KiraRoot.html:

<img alt="Nelia leaves" src="assets/NeliaLeaves.jpg">

KiraFolder/KiraInFolder.html:

<img alt="Nelia leaves" src="../assets/NeliaLeaves.jpg">

KiraFolder/KiraSubfolder/KiraInSubfolder.html:

<img alt="Nelia leaves" src="../../assets/NeliaLeaves.jpg">

posthtml-img-autosize will not work in this case.

2. Questions

Type: Questions :question:

Will posthtml-img-autosize support relative paths in the src attribute as in this MCVE?
If not, can I hear the reasons for this solution? What’s wrong with such paths?

Thanks.

Scrum commented 3 years ago

1. Will posthtml-img-autosize support relative paths in the `src` attribute as in this MCVE?
2. If not, can I hear the reasons for this solution? What’s wrong with such paths?

At the moment, relative paths are supported, but it should be borne in mind that they are resolved relative to the running process + root options and not relative to the html file

Kristinita commented 3 years ago

Type: Questions :question:

At the moment, relative paths are supported, but it should be borne in mind that they are resolved relative to the running process + root options and not relative to the html file

Yes, I understand the behavior at the moment, but my question is about something else. I’ll try to ask questions in other words:

Will posthtml-img-autosize support paths relative to the HTML file in the src attribute in the future?
If no, any reasons? Maybe I don’t know something, and paths relative to the HTML file no longer recommended.

Thanks.

Scrum commented 3 years ago

Yes, you can create a task feature where the root directory will be the context entry file.

Kristinita commented 3 years ago

Type: Question :question:

Yes, you can create a task feature where the root directory will be the context entry file.

Could you give an example of what you said (for example, for this MCVE)?

Thanks.

Scrum commented 3 years ago

posthtml:
            options:
                use: [
                    require('posthtml-img-autosize')(
                        root: 'byEntry'
                    )
                ]

or new property ctx

posthtml:
            options:
                use: [
                    require('posthtml-img-autosize')(
                        ctx: 'byEntry'
                    )
                ]

Kristinita commented 3 years ago

Type: Reply 💬

It has no effect: commit changes — Travis build failed.

Thanks.

Scrum commented 3 years ago

This is an example of a feature that needs to be implemented. :)

Kristinita commented 3 years ago

Type: Question :question:

Are there any chances that this feature will be implemented?

Thanks.

Scrum commented 3 years ago

Are there any chances that this feature will be implemented?

There are always chances

Kristinita commented 3 years ago

@Scrum, OK, we are waiting for this feature to be implemented.

Thanks.

Kristinita commented 2 years ago

This issue is still relevant for August, 2022.

I still can’t find any alternative that automatically adds height and width for all img.

Thanks.

Scrum commented 2 years ago

@Kristinita Hello, please create a new task, it is very difficult to understand the essence of the problem. a lot of comments.

Thank you.

Kristinita commented 2 years ago

@Scrum , OK, see #26.

Thanks.

posthtml / posthtml-img-autosize

bug(windows): paths #17

1. Summary

2. Reproducibility

3. Configuration

4. MCVE

5. Behavior

5.1. Ubuntu — expected

5.2. Windows — bug

6. Not helped

6.1. CLI

6.2. Grunt

7. root option

1. Summary

2. Details

3. Behavior 1

3.1. Expected

3.2. Current

4. MCVE

5. Behavior 2

5.1. CLI

5.2. Grunt

1. Details

2. MCVE

1. MCVE

2. Questions