jantimon / next-yak

a streamlined CSS-in-JS solution tailor-made for Next.js, seamlessly combining the expressive power of styled-components syntax with efficient build-time extraction and minimal runtime footprint, ensuring optimal performance and easy integration with existing atomic CSS frameworks like Tailwind CSS
https://yak.js.org
108 stars 2 forks source link

rust based transform #116

Closed jantimon closed 4 weeks ago

jantimon commented 1 month ago

an exited yak sitting on a flying rocket. the brand SWC is written on the rocket in yellow letters

fixes #110

Summary by CodeRabbit

vercel[bot] commented 1 month ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
next-yak-benchmark ❌ Failed (Inspect) Jul 16, 2024 6:32pm
yacijs ❌ Failed (Inspect) Jul 16, 2024 6:32pm
coderabbitai[bot] commented 1 month ago

Walkthrough

The project has transitioned from using a Babel plugin to a Rust-based SWC plugin, enhancing performance and control over variable scopes and template literals. This update includes the introduction of new dependencies and configurations, the addition of CSS-in-JS parsing capabilities, and a restructuring of the yak-swc package to include Rust-based transformation logic and testing.

Changes

Files/Groups Summaries
.gitignore Updated to include target directory while excluding playground/dist.
packages/yak-swc/.gitignore Added to ignore target directory and its contents.
packages/yak-swc/Cargo.toml Updated with workspace configuration, release profile optimizations, and new dependencies like lazy_static, serde, swc_core, and more.
packages/yak-swc/css_in_js_parser/CHANGELOG.md Introduced, documenting the release history of the CSS-in-JS parser.
packages/yak-swc/css_in_js_parser/Cargo.toml Updated to include dependencies like serde, serde_json, and insta.
packages/yak-swc/css_in_js_parser/LICENSE New file containing MIT License text by Jan Nicklas.
packages/yak-swc/css_in_js_parser/README.md Introduced, explaining the CSS-in-JS parser's functionality, including parsing, state maintenance, and CSS regeneration.
packages/yak-swc/css_in_js_parser/examples/basic_usage.rs Demonstrates basic usage of the css_in_js_parser library to parse and regenerate CSS.
packages/yak-swc/css_in_js_parser/examples/resume_state.rs Demonstrates resuming CSS parsing from a previous state using css_in_js_parser.
packages/yak-swc/css_in_js_parser/src/lib.rs Introduced modules for parsing CSS and converting it back, with public re-exports.
packages/yak-swc/css_in_js_parser/src/to_css.rs Includes functions to convert CSS declarations to strings, handle scopes, and merge CSS chunks.
packages/yak-swc/yak_swc/.cargo/config Introduces command aliases for building plugin binaries for specific targets.
packages/yak-swc/yak_swc/package.json Updated to version 0.1.0 with a new SWC plugin for next-yak, including build scripts and dependencies.
packages/yak-swc/rustfmt.toml Introduces configurations for max_width set to 100 and tab_spaces set to 2.
packages/yak-swc/yak_swc/src/lib.rs Introduces logic for transforming CSS-in-JS expressions using SWC Rust, including a TransformVisitor struct and various methods for handling parsing and transformation.
packages/yak-swc/yak_swc/src/utils/ast_helper.rs Introduces functions and structs for manipulating AST nodes and handling template literals.
packages/yak-swc/yak_swc/src/utils/wrap_return_value.rs Introduces functions to manipulate expressions by adding suffixes.
packages/yak-swc/yak_swc/src/yak_imports.rs Introduces a YakImportVisitor struct to gather and manipulate imports from the "next-yak" library.
packages/yak-swc/yak_swc/tests/fixture/.../output.tsx Introduces styled components and demonstrates the use of CSS-in-JS with dynamic theming and cross-file imports.

Assessment against linked issues

Objective (Issues) Addressed Explanation
Transition from Babel to SWC Rust WASM (#110)
Testing injected comments and handling template literals better (#110) The new implementation introduces better control over template literals, but specific testing for injected comments isn't explicitly mentioned.
Supporting .yak with SWC (#110) The current changes do not explicitly mention .yak file support, requiring further validation to confirm if this support is included.

Recent review details **Configuration used: CodeRabbit UI** **Review profile: CHILL**
Commits Files that changed from the base of the PR and between 919f0da1c82f80711550a82e85f43d758635152e and 9ea6584d8bad80224cefa9f1883d7f3f2e1e7f07.
Files ignored due to path filters (1) * `pnpm-lock.yaml` is excluded by `!**/pnpm-lock.yaml`
Files selected for processing (11) * .github/workflows/example.yml (1 hunks) * .github/workflows/swc.yml (1 hunks) * .gitignore (1 hunks) * packages/next-yak/loaders/lib/encodeModuleImport.ts (1 hunks) * packages/next-yak/loaders/lib/resolveCrossFileSelectors.ts (5 hunks) * packages/yak-swc/package.json (1 hunks) * packages/yak-swc/yak_swc/src/lib.rs (1 hunks) * packages/yak-swc/yak_swc/src/utils/encode_module_import.rs (1 hunks) * packages/yak-swc/yak_swc/tests/fixture/cross-file-member/output.tsx (1 hunks) * packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin/output.tsx (1 hunks) * packages/yak-swc/yak_swc/tests/fixture/cross-file/output.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (9) * .github/workflows/swc.yml * .gitignore * packages/next-yak/loaders/lib/encodeModuleImport.ts * packages/yak-swc/package.json * packages/yak-swc/yak_swc/src/lib.rs * packages/yak-swc/yak_swc/src/utils/encode_module_import.rs * packages/yak-swc/yak_swc/tests/fixture/cross-file-member/output.tsx * packages/yak-swc/yak_swc/tests/fixture/cross-file-mixin/output.tsx * packages/yak-swc/yak_swc/tests/fixture/cross-file/output.tsx
Additional context used
Biome
packages/next-yak/loaders/lib/resolveCrossFileSelectors.ts
[error] 10-10: Don't use '{}' as a type. Prefer explicitly define the object shape. '{}' means "any non-nullable value". (lint/complexity/noBannedTypes)
Additional comments not posted (4)
.github/workflows/example.yml (1)
`1-64`: **Comprehensive Review of GitHub Actions Workflow** 1. **Environment Variables Security**: The use of secrets for `VERCEL_PROJECT_ID`, `VERCEL_ORG_ID`, and `VERCEL_TOKEN` is appropriate as it keeps sensitive information secure. 2. **Rust and WASM Setup**: The steps to install Rust and add the `wasm32-wasi` target are correctly configured. This is crucial for compiling Rust to WebAssembly which is needed for the SWC plugin. 3. **Node.js and pnpm Setup**: Using `actions/setup-node` with caching enabled and `pnpm` for package management are best practices that help speed up the build process. 4. **Vercel CLI Installation**: Installing Vercel CLI globally might not be the best practice. Consider using a local installation or a Docker container to isolate the environment. 5. **Caching Strategy**: The use of `Swatinem/rust-cache` for caching Rust dependencies is a good practice. However, ensure that the `workspaces` path is correctly specified and relevant to the project structure. 6. **Error Handling**: There is no explicit error handling for failed steps. Consider adding `fail-fast: false` to the job and appropriate error handling steps. 7. **Deployment**: The deployment steps using Vercel are clear. However, ensure that the `--prebuilt` flag is correctly used as per Vercel's deployment strategies. Overall, the workflow is well-structured but could benefit from minor improvements in error handling and dependency management practices.
packages/next-yak/loaders/lib/resolveCrossFileSelectors.ts (3)
`8-15`: **Updated Regex Pattern and Error Handling** The updated regex pattern for CSS imports (`moduleSelectorRegex`) is now more specific, which should improve the accuracy of matching relevant CSS files. However, ensure that the regex pattern is thoroughly tested to match all intended cases without false positives. The error handling in line 15 is robust, providing clear error messages for invalid module selectors. This is crucial for debugging and maintaining the code.
Tools
Biome
[error] 10-10: Don't use '{}' as a type. Prefer explicitly define the object shape. '{}' means "any non-nullable value". (lint/complexity/noBannedTypes)
--- `279-286`: **Handling of Template Literals: Simplified and Effective** The handling of template literals has been simplified to directly initialize constants when the template has only one quasi. This is a clean and efficient approach. --- `336-340`: **Enhanced Template Literal Support in Object Expressions: Approved** The support for template literals in object expressions has been enhanced, allowing for more dynamic handling of values. This is a beneficial change for flexibility.
--- 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](https://coderabbit.ai): > :bangbang: **IMPORTANT** > Auto-reply has been disabled for this repository in the CodeRabbit settings. The CodeRabbit bot will not respond to your replies unless it is explicitly tagged. - 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 testing code 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 testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` 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 an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - 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/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
codspeed-hq[bot] commented 1 month ago

CodSpeed Performance Report

Merging #116 will not alter performance

Comparing feature/rust (bfa4cf6) with main (05d4782)

Summary

✅ 2 untouched benchmarks