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

Add option to selectively include style properties when cloning element #436

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

Justineo
Copy link

@Justineo Justineo commented Sep 22, 2023

Description

Added a new option includeStyleProperties which allows users to selectively copy computed style.

Motivation and Context

Currently we need to copy and serialize all the style properties in computedStyle for every node. In performance sensitive scenarios we would like to be able to minimize the time consumed when cloning node styles, for example:

  • Style attributes that are determined to be unused can be removed
  • Removing style attributes that only affect interaction behavior (eg. pointer-events, cursor, etc.)

Apart from performance use cases, as CSS custom properties are not iterable from CSSStyleDeclaration, they are not included in the snapshot image with current implementation (see #433). This new option may also help in this case as it allows users to manually specify custom properties that are used.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Enhancement (changes that improvement of current feature or performance)
  • Refactoring (changes that neither fixes a bug nor adds a feature)
  • Test Case (changes that add missing tests or correct existing tests)
  • Code style optimization (changes that do not affect the meaning of the code)
  • Docs (changes that only update documentation)
  • Chore (changes that don't modify src or test files)

Self Check before Merge

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

* the full list of computedStyle properties can be cached
* users can now manually specify which style properties are included
@biiibooo
Copy link
Contributor

biiibooo bot commented Sep 22, 2023

👋 @Justineo

💖 Thanks for opening this pull request! 💖

Please follow the contributing guidelines. And we use semantic commit messages to streamline the release process.

Examples of commit messages with semantic prefixes:

  • fix: don't overwrite prevent_default if default wasn't prevented
  • feat: add graph.scale() method
  • docs: graph.getShortestPath is now available

Things that will help get your PR across the finish line:

  • Follow the TypeScript coding style.
  • Run npm run lint locally to catch formatting errors earlier.
  • Document any user-facing changes you've made.
  • Include tests when adding/changing behavior.
  • Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

@codecov
Copy link

codecov bot commented Sep 22, 2023

Codecov Report

Patch coverage: 61.53% and no project coverage change.

Comparison is base (b751cbf) 62.93% compared to head (f9efd26) 62.93%.
Report is 3 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master     #436   +/-   ##
=======================================
  Coverage   62.93%   62.93%           
=======================================
  Files          10       10           
  Lines         580      580           
  Branches      143      143           
=======================================
  Hits          365      365           
  Misses        151      151           
  Partials       64       64           
Files Changed Coverage Δ
src/apply-style.ts 100.00% <ø> (ø)
src/clone-pseudos.ts 29.16% <50.00%> (ø)
src/clone-node.ts 71.42% <54.54%> (ø)
src/util.ts 62.80% <77.77%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

aeharding added a commit to aeharding/modern-screenshot that referenced this pull request Dec 5, 2023
* the full list of computedStyle properties can be cached
* users can now manually specify which style properties are included

This commit is applied from bubkoo/html-to-image#436
aeharding added a commit to aeharding/modern-screenshot that referenced this pull request Dec 5, 2023
* the full list of computedStyle properties can be cached
* users can now manually specify which style properties are included

This commit is applied from bubkoo/html-to-image#436
aeharding added a commit to aeharding/modern-screenshot that referenced this pull request Dec 5, 2023
* the full list of computedStyle properties can be cached

This commit is applied from bubkoo/html-to-image#436
qq15725 pushed a commit to qq15725/modern-screenshot that referenced this pull request Dec 5, 2023
* the full list of computedStyle properties can be cached

This commit is applied from bubkoo/html-to-image#436
@aeharding
Copy link

@Justineo FWIW I was inspired by your PR and made a PR to modern-screenshot with this :)

@@ -118,7 +127,7 @@ function cloneCSSStyle<T extends HTMLElement>(nativeNode: T, clonedNode: T) {
targetStyle.cssText = sourceStyle.cssText
targetStyle.transformOrigin = sourceStyle.transformOrigin
} else {
toArray<string>(sourceStyle).forEach((name) => {
getStyleProperties(options).forEach((name) => {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of allocating a new array with all the property names for each node in order call .forEach on it, it would be even faster to just use a good-old for loop to iterate over all the properties. Since CSSStyleDeclaration is "array-like", it works well:

const propertyNames = options.includeStyleProperties ?? sourceStyle;
for (let i = 0; i < propertyNames; ++i) {
  const name = propertyNames[i];
  let value = sourceStyle.getPropertyValue(name);
  // ...
}

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

Successfully merging this pull request may close these issues.

3 participants