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.

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

Future plans #352

Open
2 tasks done
sindresorhus opened this issue Feb 10, 2019 · 5 comments
Open
2 tasks done

Future plans #352

sindresorhus opened this issue Feb 10, 2019 · 5 comments
Labels

Comments

@sindresorhus
Copy link
Owner

sindresorhus commented Feb 10, 2019

I got out v5 at last, which switched from PhantomJS to Puppeteer. This was an important release as PhantomJS is no longer maintained. Because of this, I tried to keep the breaking changes to a minimum. There are however lots of improvements I would like to do to the API, but which can be done sometime in the future. Here are some rough ideas:

Options:

  • transparent => defaultBackground and make it true by default (since it's inverted)
  • username => authentication.username
  • password => authentication.password
  • scale => scaleFactor and change the default value from 1 to 2
  • crop => fullPage and make it true by default (since it's inverted)
  • format => type (and value jpg => jpeg)
  • selector => element
  • css => styles and accept type string[] instead of string
  • script => scripts and accept type string[] instead of string
  • hide => hideElements and accept type string[] instead of string

API:

  • .src() => .source()
  • .dest() => .destination()

I would also like to move away from the chainable API to a single method call.

Before
const Pageres = require('pageres');

(async () => {
	await new Pageres({delay: 2})
		.src('https://github.com/sindresorhus/pageres', ['480x320', '1024x768'], {crop: true})
		.src('https://sindresorhus.com', ['1280x1024', '1920x1080'])
		.dest('output')
		.run();
})();
After
const pageres = require('pageres');

(async () => {
	await pageres({
		sources: [
			{
				url: 'https://github.com/sindresorhus/pageres',
				sizes: ['480x320', '1024x768'],
				// These options override the global ones
				delay: 4
			}
		]
		destination: 'output',
		delay: 2
	});
})();

Thoughts?


Open questions

  • Should we make '480x320' => {width: 480, height: 320}? Or support both?
  • Should sources item specific options be top-level in the source object (like in the above example) or nested inside {options: {delay: 4}}?
@sunitJindal
Copy link

Should we make '480x320' => {width: 480, height: 320}? Or support both?

The current input style is also common way of addressing the screen sizes, hence no harm in keeping it. And using the object notation would make the input more explicit.

If both notations are kept, it'll give new users flexibility to choose between these 2 options and users upgrading from previous versions will still have their scripts working with old input format.

My input: Keep both

@Kristinita
Copy link

Maybe it would be nice to add cwd option, that Grunt users can simply set URLs list without duplicates? It may help for users, that use pageres for current site visual testing.

Example:

  • Before:
urls: ["site/dev/index.html"
        "site/dev/KiraFirstPath/KiraFirstFile.html"
        "site/dev/KiraSecondPath/KiraSecondFile.html"]
  • After:
cwd: "site/dev/"
urls: ["index.html"
        "KiraFirstPath/KiraFirstFile.html"
        "KiraSecondPath/KiraSecondFile.html"]

Thanks.

@sindresorhus
Copy link
Owner Author

@Kristinita
Copy link

@sindresorhus, type:reply

You can already do that with Grunt: https://gruntjs.com/configuring-tasks#building-the-files-object-dynamically

Docs says about files object, but for custom plugins options (as grunt-pageres urls option) similar formats doesn't work.

For example, this configuration:

urls: [
        expand: true
        cwd: "site/dev/"
        src: ["index.html"
            "KiraFirstPath/KiraFirstFile.html"
            "KiraSecondPath/KiraSecondFile.html"]
        ]

or this:

urls:
    files: [
        expand: true
        cwd: "site/dev/"
        src: ["index.html"
            "KiraFirstPath/KiraFirstFile.html"
            "KiraSecondPath/KiraSecondFile.html"]
        ]

will not work.

Thanks.

@sindresorhus
Copy link
Owner Author

@Kristinita Good point. Yes, we should support the standard src property in grunt-pageres for local files.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants