minify script injection at build-time

Vijaykv5 commented 8 months ago

The script is minified and minified script is correctly injected into Nuxt project using useHead.

Steps done :

The provided script is defined as a string, with unnecessary whitespace removed using .replace(/\s+/g, ' ').
The script is then injected into the page using useHead, specifying the script tag's position, key, and innerHTML containing the script.
After running your build process, check the output directory in name of script.min.js in /dist folder

/claim #3

Summary by CodeRabbit

New Features
- Introduced a new way to format dates based on user locale and specified options, enhancing date displays throughout the application.

coderabbitai[bot] commented 8 months ago

[!IMPORTANT]

Auto Review Skipped

Review was skipped due to path filters

Files ignored due to path filters (2)
* `package.json` is excluded by: `!**/*.json` * `pnpm-lock.yaml` is excluded by: `!**/*.yaml`

Walkthrough

This update introduces a more efficient and maintainable approach to handling date formatting in a web application. By externalizing JavaScript logic into a separate script and simplifying the DOM manipulation process, the changes enhance code readability and performance.

Changes

File Path	Change Summary
`src/.../NuxtTime.vue`	- Added `scriptString` import - Simplified innerHTML manipulation
`src/script.ts`	- New file for date formatting script - Handles date formatting dynamically

Related issues

danielroe/nuxt-time#3: The changes in this PR could contribute to optimizing performance and ensuring cross-browser compatibility by simplifying script injection, which indirectly supports the goal of minifying and transpiling script injection at build-time. This is because the update involves cleaner script management, which could make the minification and transpilation process more straightforward.

Poem

🐰 Oh, how the dates now gracefully align,
With scripts so sleek, and code divine.
🌟 From chaos to order, our journey we chart,
A tale of refactoring, played with heart.
💻 In the realm of code, we hop with glee,
For cleaner, faster, our apps shall be.
🚀 To the future, we leap, with joy we sing,
"Let's celebrate the changes we bring!"

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

Tips

### Chat There are 3 ways to chat with CodeRabbit: - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit-tests for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit tests for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit tests.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - The JSON schema for the configuration file is available [here](https://coderabbit.ai/integrations/coderabbit-overrides.v2.json). - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json` ### CodeRabbit Discord Community Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback.

Vijaykv5 commented 8 months ago

@danielroe May you can review this PR?

Thanks!

socket-security[bot] commented 8 months ago

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/esbuild@0.20.1	environment, filesystem, network, shell	`0`	134 kB	evanw

View full report↗︎

Vijaykv5 commented 8 months ago

This doesn't seem to use the minified script at all, just produces it in the dist directory. you're right! @danielroe The current code only just minifies it & produce it dist folder. I need that minified file to Inject in the usehead but currently its just using the script inside /src/script not the the minified one inside dist. I'm new to Vue, May you can help me with it so we can resolve it. Thanks!

Vijaykv5 commented 7 months ago

@danielroe May you can suggest me the best way to implement it please?

danielroe commented 7 months ago

I really appreciate your time on this. I've implemented it here - I hope that helps in future!

danielroe / nuxt-time