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

fix: Update useStyledComponentsTarget to support case where head tag is removed. #414

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from

Conversation

liamcho
Copy link
Contributor

@liamcho liamcho commented Jan 22, 2025

Changes

  • Re-fixed an issue where widget style is not applied due to style tag being dynamically removed and then re-added in the head tag in a WordPress like environment

ticket: AA-772

Additional Notes

Checklist

Before requesting a code review, please check the following:

  • [Required] CI has passed all checks.
  • [Required] A self-review has been conducted to ensure there are no minor mistakes.
  • [Required] Unnecessary comments/debugging code have been removed.
  • [Required] All requirements specified in the ticket have been accurately implemented.
  • Ensure the ticket has been updated with the sprint, status, and story points.

@liamcho liamcho added the 1.9.6 label Jan 22, 2025
@liamcho liamcho requested review from AhyoungRyu and bang9 January 22, 2025 03:03
@liamcho liamcho self-assigned this Jan 22, 2025
Copy link

netlify bot commented Jan 22, 2025

Deploy Preview for chat-ai-widget ready!

Name Link
🔨 Latest commit 9370101
🔍 Latest deploy log https://app.netlify.com/sites/chat-ai-widget/deploys/6791ff12831f3a00083692c7
😎 Deploy Preview https://deploy-preview-414--chat-ai-widget.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

github-actions bot commented Jan 22, 2025

Size Change: +171 B (+0.03%)

Total Size: 618 kB

Filename Size Change
./dist/__bundle-b5ef7de4-********.js 891 B +1 B (+0.11%)
./dist/index-********.js 304 kB +81 B (+0.03%)
./dist/index.es.js 172 B -1 B (-0.58%)
./dist/index.umd.js 289 kB +85 B (+0.03%)
./dist/Placeholder.error-********.js 347 B +3 B (+0.87%)
./dist/Placeholder.loading-********.js 184 B -1 B (-0.54%)
./dist/Placeholder.noChannels-********.js 184 B +2 B (+1.1%)
./dist/Placeholder.noMessages-********.js 184 B +1 B (+0.55%)
ℹ️ View Unchanged
Filename Size
./dist/__bundle-46d64517-********.js 4.01 kB
./dist/__bundle-7c3d40f4-********.js 21 B
./dist/PlaceholderCommon-********.js 245 B
./dist/style.css 9.52 kB
./dist/TokensBody-********.js 9.1 kB

compressed-size-action

Copy link
Contributor

@bang9 bang9 left a comment

Choose a reason for hiding this comment

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

lgtm!

console.warn('[useStyledComponentsTarget]: Styled Components styles re-injected, switching to <body>');
setTarget(document.body);
} else if (node instanceof HTMLElement && node.id === StyledId) {
moveStyleToBody(node);
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: 요거 added 케이스는 제거가 되어도 될거같아요

Copy link
Contributor Author

Choose a reason for hiding this comment

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

오 넵 헤드에 추가됐을 때 바디로 옮기는 로직이었네요. 있으면 안될 로직이네요. 완료했습니다.

const moveStyleToBody = (styleElement: HTMLElement) => {
if (styleElement && styleElement.parentElement !== document.body) {
console.warn(`[useStyledComponentsTarget]: Moving style element ${StyledId} to <body>.`);
document.body.appendChild(styleElement);
Copy link
Contributor

Choose a reason for hiding this comment

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

요거는 제거된 케이스에서만, body 대신 head 위치에 다시 추가하면 좋을 것 같습니다!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

제거된 케이스가 Head 에서 제거된 케이스로 이해했는데 그렇다면 head 에 추가할 수 없지 않을까요? 그래서 body 에 추가하도록 구현했어요.

@liamcho
Copy link
Contributor Author

liamcho commented Jan 23, 2025

@bang9 changelog 는 1.9.4 에 나간 그데로 적어놓긴 했는데, 다른 좋은 아이디어 있으실까요?

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

Successfully merging this pull request may close these issues.

2 participants