From 5e8e27b165f3e61d914832a7d818b72999c4dd91 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 29 Jul 2025 11:23:44 +0000 Subject: [PATCH 1/7] Initial plan From 6ee5d81c3b0b9d9ba979b14bd78ca5f57b8c494d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 29 Jul 2025 11:30:08 +0000 Subject: [PATCH 2/7] Initial analysis and exploration of repository structure Co-authored-by: Boshen <1430279+Boshen@users.noreply.github.com> --- public/sponsors.svg | 202 +------------------------------------------- 1 file changed, 1 insertion(+), 201 deletions(-) diff --git a/public/sponsors.svg b/public/sponsors.svg index 2220a6304c..3e8fcacea6 100644 --- a/public/sponsors.svg +++ b/public/sponsors.svg @@ -1,201 +1 @@ - - - -Bronze Sponsors - schoolhouse.w... - - - - - -Super Generous - Snyder - - - - - - - - Marais - - - - - - - - Oleksandr - - - - - -Backers - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + From d0b9e2f58a8870bec234c821b2531231c6e7926e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 29 Jul 2025 11:33:26 +0000 Subject: [PATCH 3/7] Add comprehensive documentation for React Refresh and Styled Components transformer plugins Co-authored-by: Boshen <1430279+Boshen@users.noreply.github.com> --- public/sponsors.svg | 202 +++++++++++++++++++++++++++- src/docs/guide/usage/transformer.md | 189 ++++++++++++++++++++++++++ 2 files changed, 390 insertions(+), 1 deletion(-) diff --git a/public/sponsors.svg b/public/sponsors.svg index 3e8fcacea6..2220a6304c 100644 --- a/public/sponsors.svg +++ b/public/sponsors.svg @@ -1 +1,201 @@ - + + + +Bronze Sponsors + schoolhouse.w... + + + + + +Super Generous + Snyder + + + + + + + + Marais + + + + + + + + Oleksandr + + + + + +Backers + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/docs/guide/usage/transformer.md b/src/docs/guide/usage/transformer.md index 7a41226b06..b8b15c5968 100644 --- a/src/docs/guide/usage/transformer.md +++ b/src/docs/guide/usage/transformer.md @@ -5,6 +5,7 @@ - Transforming TypeScript to ESNext. - Transforming React JSX to ESNext, with built-in React Refresh. - [TypeScript Isolated Declarations Emit](https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-beta/#isolated-declarations) without using the TypeScript compiler. +- Built-in support for popular plugins like styled-components. ## Installation @@ -19,6 +20,194 @@ Use the umbrella crate [oxc][url-oxc-crate] with the `transformer` feature. Rust usage example can be found [here](https://github.com/oxc-project/oxc/blob/main/crates/oxc_transformer/examples/transformer.rs). +## Built-in Plugins + +Oxc transformer includes built-in support for popular transformation plugins to improve developer experience and build performance. + +### React Refresh + +React Refresh (also known as React Fast Refresh) provides hot reloading capabilities for React components during development. This plugin automatically instruments React components to preserve state during development. + +#### Usage + +React Refresh is automatically enabled when transforming JSX code in development mode. To configure it explicitly: + +```javascript +import { transform } from "oxc-transform"; + +const result = transform("App.jsx", sourceCode, { + jsx: { + plugin: "react", + development: true, // Enables React Refresh + refresh: { + refreshReg: "$RefreshReg$", + refreshSig: "$RefreshSig$", + emitFullSignatures: true, + }, + }, +}); +``` + +#### Configuration Options + +| Option | Type | Default | Description | +|--------|------|---------|-------------| +| `refreshReg` | `string` | `"$RefreshReg$"` | The name of the function to register components for refresh | +| `refreshSig` | `string` | `"$RefreshSig$"` | The name of the function to create signatures for refresh | +| `emitFullSignatures` | `boolean` | `false` | Whether to emit full signatures for better debugging | + +### Styled Components + +The styled-components plugin adds comprehensive support for styled-components with server-side rendering, style minification, and enhanced debugging capabilities. + +#### Basic Usage + +```javascript +import { transform } from "oxc-transform"; + +const result = transform("Component.jsx", sourceCode, { + plugins: { + styledComponents: { + displayName: true, + ssr: true, + fileName: true, + minify: true, + }, + }, +}); +``` + +#### Input Example + +```jsx +import styled from 'styled-components'; + +const Button = styled.div` + color: blue; + padding: 10px; +`; +``` + +#### Output Example (with default options) + +```jsx +import styled from 'styled-components'; + +const Button = styled.div.withConfig({ + displayName: "Button", + componentId: "sc-1234567-0" +})(["color:blue;padding:10px;"]); +``` + +#### Configuration Options + +##### Core Options + +| Option | Type | Default | Description | +|--------|------|---------|-------------| +| `displayName` | `boolean` | `true` | Enhances the attached CSS class name with component names for easier debugging | +| `ssr` | `boolean` | `true` | Adds unique component IDs to avoid checksum mismatches during server-side rendering | +| `fileName` | `boolean` | `true` | Controls whether the displayName is prefixed with the filename | + +##### Template Literal Options + +| Option | Type | Default | Description | +|--------|------|---------|-------------| +| `transpileTemplateLiterals` | `boolean` | `true` | Converts template literals to a smaller representation for reduced bundle size | +| `minify` | `boolean` | `true` | Minifies CSS content by removing whitespace and comments | + +##### Advanced Options + +| Option | Type | Default | Description | +|--------|------|---------|-------------| +| `pure` | `boolean` | `false` | Adds `/*#__PURE__*/` comments for better tree-shaking | +| `namespace` | `string` | `undefined` | Adds a namespace prefix to component IDs | +| `meaninglessFileNames` | `string[]` | `["index"]` | List of filenames considered meaningless for component naming | + +##### Not Yet Implemented + +| Option | Type | Default | Description | +|--------|------|---------|-------------| +| `cssProp` | `boolean` | `true` | JSX css prop transformation (planned) | +| `topLevelImportPaths` | `string[]` | `[]` | Custom import path handling (planned) | + +#### Development vs Production + +The plugin automatically optimizes for different environments: + +**Development Configuration:** +```javascript +{ + plugins: { + styledComponents: { + displayName: true, + fileName: true, + ssr: false, + minify: false, + }, + }, +} +``` + +**Production Configuration:** +```javascript +{ + plugins: { + styledComponents: { + displayName: false, + fileName: false, + ssr: true, + minify: true, + pure: true, + }, + }, +} +``` + +#### Supported Import Patterns + +The plugin works with various styled-components import patterns: + +```javascript +// Default import +import styled from 'styled-components'; + +// Namespace import +import * as styled from 'styled-components'; + +// Named imports +import { css, createGlobalStyle, keyframes } from 'styled-components'; + +// Native and primitives +import styled from 'styled-components/native'; +import styled from 'styled-components/primitives'; +``` + +#### Features + +**✅ Fully Supported:** +- Display names for debugging +- Filename prefixing in display names +- Server-side rendering support +- Template literal transpilation +- CSS minification +- Namespace prefixes +- Pure annotations for call expressions + +**⚠️ Partially Supported:** +- Pure annotations (call expressions only, not tagged templates due to bundler limitations) + +**❌ Not Yet Implemented:** +- JSX css prop transformation +- Custom import path handling + +#### Performance Benefits + +- **Bundle Size**: Template literal transpilation reduces bundle size compared to standard Babel transformation +- **Runtime Performance**: Minified CSS reduces parsing overhead +- **Tree Shaking**: Pure annotations help bundlers eliminate unused code +- **Development Experience**: Display names improve debugging in React DevTools + ## Isolated Declarations - [`unplugin-isolated-decl`](https://github.com/unplugin/unplugin-isolated-decl) From 72e1b4a7ddc8a222fd0994b6530291b3e996b851 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 30 Jul 2025 01:52:42 +0000 Subject: [PATCH 4/7] Remove unnecessary sections and simplify examples in transformer documentation --- .gitignore | 1 + src/docs/guide/usage/transformer.md | 46 ++--------------------------- 2 files changed, 4 insertions(+), 43 deletions(-) diff --git a/.gitignore b/.gitignore index 40efa36bc3..7467e2249f 100644 --- a/.gitignore +++ b/.gitignore @@ -19,3 +19,4 @@ yarn-debug.log* yarn-error.log* /temp +package-lock.json diff --git a/src/docs/guide/usage/transformer.md b/src/docs/guide/usage/transformer.md index b8b15c5968..4219747940 100644 --- a/src/docs/guide/usage/transformer.md +++ b/src/docs/guide/usage/transformer.md @@ -77,8 +77,9 @@ const result = transform("Component.jsx", sourceCode, { }); ``` -#### Input Example +#### Example +**Input:** ```jsx import styled from 'styled-components'; @@ -88,8 +89,7 @@ const Button = styled.div` `; ``` -#### Output Example (with default options) - +**Output (with default options):** ```jsx import styled from 'styled-components'; @@ -131,39 +131,6 @@ const Button = styled.div.withConfig({ | `cssProp` | `boolean` | `true` | JSX css prop transformation (planned) | | `topLevelImportPaths` | `string[]` | `[]` | Custom import path handling (planned) | -#### Development vs Production - -The plugin automatically optimizes for different environments: - -**Development Configuration:** -```javascript -{ - plugins: { - styledComponents: { - displayName: true, - fileName: true, - ssr: false, - minify: false, - }, - }, -} -``` - -**Production Configuration:** -```javascript -{ - plugins: { - styledComponents: { - displayName: false, - fileName: false, - ssr: true, - minify: true, - pure: true, - }, - }, -} -``` - #### Supported Import Patterns The plugin works with various styled-components import patterns: @@ -201,13 +168,6 @@ import styled from 'styled-components/primitives'; - JSX css prop transformation - Custom import path handling -#### Performance Benefits - -- **Bundle Size**: Template literal transpilation reduces bundle size compared to standard Babel transformation -- **Runtime Performance**: Minified CSS reduces parsing overhead -- **Tree Shaking**: Pure annotations help bundlers eliminate unused code -- **Development Experience**: Display names improve debugging in React DevTools - ## Isolated Declarations - [`unplugin-isolated-decl`](https://github.com/unplugin/unplugin-isolated-decl) From d64621845b61c6e72a236f0f78c492ff6313f627 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 30 Jul 2025 02:04:21 +0000 Subject: [PATCH 5/7] Remove unnecessary package-lock.json from .gitignore as project uses pnpm Co-authored-by: Dunqing <29533304+Dunqing@users.noreply.github.com> --- .gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitignore b/.gitignore index 7467e2249f..40efa36bc3 100644 --- a/.gitignore +++ b/.gitignore @@ -19,4 +19,3 @@ yarn-debug.log* yarn-error.log* /temp -package-lock.json From c78e295242c66afb6f9c2270e0895933c0b288b9 Mon Sep 17 00:00:00 2001 From: Boshen Date: Wed, 30 Jul 2025 10:07:26 +0800 Subject: [PATCH 6/7] u --- src/docs/guide/usage/transformer.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/docs/guide/usage/transformer.md b/src/docs/guide/usage/transformer.md index 4219747940..ea760924d4 100644 --- a/src/docs/guide/usage/transformer.md +++ b/src/docs/guide/usage/transformer.md @@ -20,6 +20,10 @@ Use the umbrella crate [oxc][url-oxc-crate] with the `transformer` feature. Rust usage example can be found [here](https://github.com/oxc-project/oxc/blob/main/crates/oxc_transformer/examples/transformer.rs). +## Isolated Declarations + +- [`unplugin-isolated-decl`](https://github.com/unplugin/unplugin-isolated-decl) + ## Built-in Plugins Oxc transformer includes built-in support for popular transformation plugins to improve developer experience and build performance. @@ -139,7 +143,7 @@ The plugin works with various styled-components import patterns: // Default import import styled from 'styled-components'; -// Namespace import +// Namespace import import * as styled from 'styled-components'; // Named imports @@ -168,10 +172,6 @@ import styled from 'styled-components/primitives'; - JSX css prop transformation - Custom import path handling -## Isolated Declarations - -- [`unplugin-isolated-decl`](https://github.com/unplugin/unplugin-isolated-decl) - [url-oxc-crate]: https://docs.rs/oxc From 9916d745e1b036eb5f645849f09a80260c272fd4 Mon Sep 17 00:00:00 2001 From: Boshen Date: Wed, 30 Jul 2025 10:26:55 +0800 Subject: [PATCH 7/7] u --- src/docs/guide/usage/transformer.md | 65 ++++++++++++++++------------- 1 file changed, 35 insertions(+), 30 deletions(-) diff --git a/src/docs/guide/usage/transformer.md b/src/docs/guide/usage/transformer.md index ea760924d4..6cb7e70b19 100644 --- a/src/docs/guide/usage/transformer.md +++ b/src/docs/guide/usage/transformer.md @@ -54,11 +54,11 @@ const result = transform("App.jsx", sourceCode, { #### Configuration Options -| Option | Type | Default | Description | -|--------|------|---------|-------------| -| `refreshReg` | `string` | `"$RefreshReg$"` | The name of the function to register components for refresh | -| `refreshSig` | `string` | `"$RefreshSig$"` | The name of the function to create signatures for refresh | -| `emitFullSignatures` | `boolean` | `false` | Whether to emit full signatures for better debugging | +| Option | Type | Default | Description | +| -------------------- | --------- | ---------------- | ----------------------------------------------------------- | +| `refreshReg` | `string` | `"$RefreshReg$"` | The name of the function to register components for refresh | +| `refreshSig` | `string` | `"$RefreshSig$"` | The name of the function to create signatures for refresh | +| `emitFullSignatures` | `boolean` | `false` | Whether to emit full signatures for better debugging | ### Styled Components @@ -84,8 +84,9 @@ const result = transform("Component.jsx", sourceCode, { #### Example **Input:** + ```jsx -import styled from 'styled-components'; +import styled from "styled-components"; const Button = styled.div` color: blue; @@ -94,12 +95,13 @@ const Button = styled.div` ``` **Output (with default options):** + ```jsx -import styled from 'styled-components'; +import styled from "styled-components"; const Button = styled.div.withConfig({ displayName: "Button", - componentId: "sc-1234567-0" + componentId: "sc-1234567-0", })(["color:blue;padding:10px;"]); ``` @@ -107,33 +109,33 @@ const Button = styled.div.withConfig({ ##### Core Options -| Option | Type | Default | Description | -|--------|------|---------|-------------| -| `displayName` | `boolean` | `true` | Enhances the attached CSS class name with component names for easier debugging | -| `ssr` | `boolean` | `true` | Adds unique component IDs to avoid checksum mismatches during server-side rendering | -| `fileName` | `boolean` | `true` | Controls whether the displayName is prefixed with the filename | +| Option | Type | Default | Description | +| ------------- | --------- | ------- | ----------------------------------------------------------------------------------- | +| `displayName` | `boolean` | `true` | Enhances the attached CSS class name with component names for easier debugging | +| `ssr` | `boolean` | `true` | Adds unique component IDs to avoid checksum mismatches during server-side rendering | +| `fileName` | `boolean` | `true` | Controls whether the displayName is prefixed with the filename | ##### Template Literal Options -| Option | Type | Default | Description | -|--------|------|---------|-------------| -| `transpileTemplateLiterals` | `boolean` | `true` | Converts template literals to a smaller representation for reduced bundle size | -| `minify` | `boolean` | `true` | Minifies CSS content by removing whitespace and comments | +| Option | Type | Default | Description | +| --------------------------- | --------- | ------- | ------------------------------------------------------------------------------ | +| `transpileTemplateLiterals` | `boolean` | `true` | Converts template literals to a smaller representation for reduced bundle size | +| `minify` | `boolean` | `true` | Minifies CSS content by removing whitespace and comments | ##### Advanced Options -| Option | Type | Default | Description | -|--------|------|---------|-------------| -| `pure` | `boolean` | `false` | Adds `/*#__PURE__*/` comments for better tree-shaking | -| `namespace` | `string` | `undefined` | Adds a namespace prefix to component IDs | +| Option | Type | Default | Description | +| ---------------------- | ---------- | ----------- | ------------------------------------------------------------- | +| `pure` | `boolean` | `false` | Adds `/*#__PURE__*/` comments for better tree-shaking | +| `namespace` | `string` | `undefined` | Adds a namespace prefix to component IDs | | `meaninglessFileNames` | `string[]` | `["index"]` | List of filenames considered meaningless for component naming | ##### Not Yet Implemented -| Option | Type | Default | Description | -|--------|------|---------|-------------| -| `cssProp` | `boolean` | `true` | JSX css prop transformation (planned) | -| `topLevelImportPaths` | `string[]` | `[]` | Custom import path handling (planned) | +| Option | Type | Default | Description | +| --------------------- | ---------- | ------- | ------------------------------------- | +| `cssProp` | `boolean` | `true` | JSX css prop transformation (planned) | +| `topLevelImportPaths` | `string[]` | `[]` | Custom import path handling (planned) | #### Supported Import Patterns @@ -141,22 +143,23 @@ The plugin works with various styled-components import patterns: ```javascript // Default import -import styled from 'styled-components'; +import styled from "styled-components"; // Namespace import -import * as styled from 'styled-components'; +import * as styled from "styled-components"; // Named imports -import { css, createGlobalStyle, keyframes } from 'styled-components'; +import { createGlobalStyle, css, keyframes } from "styled-components"; // Native and primitives -import styled from 'styled-components/native'; -import styled from 'styled-components/primitives'; +import styled from "styled-components/native"; +import styled from "styled-components/primitives"; ``` #### Features **✅ Fully Supported:** + - Display names for debugging - Filename prefixing in display names - Server-side rendering support @@ -166,9 +169,11 @@ import styled from 'styled-components/primitives'; - Pure annotations for call expressions **⚠️ Partially Supported:** + - Pure annotations (call expressions only, not tagged templates due to bundler limitations) **❌ Not Yet Implemented:** + - JSX css prop transformation - Custom import path handling