feat: improve rolldown engine

.changeset/two-gifts-doubt.md

@@ -0,0 +1,5 @@
+---
+'@ice/pkg': minor
+---
+
+feat: improve rolldown engine

examples/rolldown-react/README.md

@@ -0,0 +1,3 @@
+# Rolldown React Example
+
+Rolldown React Example, for show less/scss/jsx/tsx usage.

examples/rolldown-react/build.config.mts

@@ -0,0 +1,26 @@
+import { defineConfig } from '@ice/pkg';
+
+// https://pkg.ice.work/reference/config-list
+export default defineConfig({
+  pkgs: [
+    'esm', 'es2017', 'cjs',
+    // '!esm', '!es2017', '!umd',
+    { extends: ['!esm'] },
+    {extends: ['!es2017']},
+    {extends: ['!umd']}
+  ],
+  plugins: [
+    ['@ice/pkg-plugin-jsx-plus'],
+  ],
+  jsxRuntime: 'classic',
+  sourceMaps: false,
+  bundle: {
+    engine: 'rolldown'
+  },
+  declaration: {
+    generator: 'oxc',
+  },
+  alias: {
+    '@': './src',
+  },
+});

examples/rolldown-react/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@ice/pkg-examples-rolldown-react",
+  "version": "0.0.0",
+  "private": true,
+  "files": [
+    "esm",
+    "cjs",
+    "es2017",
+    "dist",
+    "build"
+  ],
+  "exports": {
+    ".": {
+      "es2017": {
+        "types": "./es2017/index.d.ts",
+        "default": "./es2017/index.js"
+      },
+      "default": {
+        "types": "./esm/index.d.ts",
+        "default": "./esm/index.js"
+      }
+    },
+    "./*": "./*"
+  },
+  "sideEffects": [
+    "dist/*",
+    "*.scss",
+    "*.less",
+    "*.css"
+  ],
+  "scripts": {
+    "start": "ice-pkg start",
+    "build": "ice-pkg build",
+    "prepublishOnly": "npm run build",
+    "vitest": "vitest",
+    "jest": "jest"
+  },
+  "dependencies": {
+    "@ice/jsx-runtime": "^0.2.0",
+    "@swc/helpers": "^0.5.13",
+    "babel-runtime-jsx-plus": "^0.1.5",
+    "core-js": "^3.38.1"
+  },
+  "devDependencies": {
+    "@ice/pkg": "workspace:*",
+    "@ice/pkg-plugin-jsx-plus": "workspace:*",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "catalog:",
+    "sass-loader": "catalog:",
+    "style-unit": "^3.0.4"
+  },
+  "peerDependencies": {
+    "react": "^17 || ^18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT"
+}

examples/rolldown-react/src/a.cts

@@ -0,0 +1,10 @@
+export interface Person {
+  age: number;
+  name: string;
+}
+
+export const p: Person = { age: 3, name: 'ice' };
+
+const { ...rest } = p;
+
+console.log(rest);

examples/rolldown-react/src/b.cjs

@@ -0,0 +1,3 @@
+module.exports = function () {
+  console.log(123);
+};

examples/rolldown-react/src/c.mts

@@ -0,0 +1,3 @@
+export default function () {
+  console.log('c');
+}

examples/rolldown-react/src/components/Button/index.scss

@@ -0,0 +1,23 @@
+.pkg-btn {
+  border-radius: 6px;
+  height: 32px;
+  padding: 4px 15px;
+  font-size: 14px;
+  text-align: center;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font-weight: 400;
+
+}
+
+.pkg-btn-primary {
+  color: #fff;
+  background-color: #1677ff;
+  box-shadow: 0 2px 0 rgb(5 145 255 / 10%);
+}
+
+.pkg-btn-default {
+  background-color: #fff;
+  border-color: #d9d9d9;
+  box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
+}

examples/rolldown-react/src/components/Button/index.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import './index.scss';
+import Input from '@/components/Input';
+
+console.log('input', Input);
+
+interface ButtonProps {
+  /**
+   * 设置按钮类型
+   */
+  type?: 'primary' | 'default';
+  /**
+   * 点击跳转的地址，指定此属性 button 的行为和 a 链接一致
+   */
+  href?: string;
+  /**
+   * 显式加载状态
+   */
+  loading: boolean;
+  /**
+   * 点击按钮时的回调
+   */
+  onClick?: React.MouseEventHandler;
+}
+
+export const app: Application = { add: () => Promise.resolve(1) };
+
+const Button: React.FunctionComponent<React.PropsWithChildren<ButtonProps>> = (props: ButtonProps) => {
+  const { type = 'default' } = props;
+  const typeCssSelector = {
+    primary: 'pkg-btn-primary',
+    default: 'pkg-btn-default',
+  };
+  return (
+    <button className={`pkg-btn ${typeCssSelector[type] || ''}`} onClick={props.onClick} data-testid="normal-button">
+      {props.children}
+    </button>
+  );
+};
+
+Button.defaultProps = {
+  type: 'default',
+  onClick: () => {},
+  href: undefined,
+};
+
+export default Button;

examples/rolldown-react/src/components/Input/index.less

@@ -0,0 +1,14 @@
+input {
+  padding: 8px 10px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+
+input:hover {
+  border-color: #a0cfff;
+}
+
+input:focus {
+  border-color: #409eff;
+  outline: none;
+}

examples/rolldown-react/src/components/Input/index.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import './index.less';
+
+export default class Input extends React.Component {
+  render() {
+    return (
+      <>
+        <input />
+      </>
+    );
+  }
+}
+
+Input.propTypes = {
+  /**
+   * 输入框的 id
+   */
+  id: PropTypes.string,
+  /**
+   * 设置校验状态
+   */
+  status: PropTypes.string,
+};

examples/rolldown-react/src/components/Test/index.css

@@ -0,0 +1,8 @@
+/* This is comment */
+.title {
+  color: red;
+}
+
+.btn {
+  width: 50rpx;
+}

examples/rolldown-react/src/components/Test/index.jsx

@@ -0,0 +1,53 @@
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import './index.css';
+/**
+ * Test component
+ */
+const Test = ({ title }) => {
+  console.log(__DEV__);
+  console.log(process.env.NODE_ENV);
+
+  const [visible, setVisible] = React.useState(false);
+  return (
+    <div>
+      <h1 style={{ fontSize: '100rpx' }} data-testid="title">
+        {title}
+      </h1>
+      <button onClick={() => setVisible(!visible)} className="btn">
+        Click Me to Set Visible
+      </button>
+
+      <div>
+        <div x-if={visible}>Hello</div>
+        <div x-else>World</div>
+      </div>
+    </div>
+  );
+};
+
+Test.propTypes = {
+  /**
+   *
+   */
+  title: PropTypes.string,
+  /**
+   *
+   */
+  baz: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /**
+   *
+   */
+  bar(props, propName, componentName) {
+    // ...
+  },
+};
+
+Test.defaultProps = {
+  title: 'Hello World',
+  bar: () => {},
+  baz: 'baz',
+};
+
+export default Test;

examples/rolldown-react/src/d.mjs

@@ -0,0 +1,4 @@
+export default function () {
+  console.log('d');
+  return 'd';
+}

examples/rolldown-react/src/index.ts

@@ -0,0 +1,3 @@
+export { default as Button } from '@/components/Button';
+export { default as Test } from '@/components/Test';
+export { default as Input } from '@/components/Input';

examples/rolldown-react/src/typings.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="@ice/pkg/types" />
+
+interface Application {
+  add: () => Promise<number>;
+}

examples/rolldown-react/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "ESNext",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "example-pkg-react-component": ["./src"],
+      "example-pkg-react-component/*": ["./src/*"]
+    },
+    "declaration": true,
+    "isolatedDeclarations": true
+  },
+  "include": ["src"]
+}

packages/pkg/package.json

@@ -66,14 +66,14 @@
     "gzip-size": "^7.0.0",
     "http-proxy-middleware": "^3.0.5",
     "magic-string": "^0.25.7",
-    "oxc-transform": "~0.89.0",
+    "oxc-transform": "^0.114.0",
     "picocolors": "^1.0.0",
     "postcss": "^8.4.31",
     "postcss-plugin-rpx2vw": "^1.0.0",
-    "rolldown": "^0.15.1",
+    "rolldown": "^1.0.0-rc.8",
     "rollup": "^4.0.0",
-    "rollup-plugin-styler": "^1.8.0",
-    "rollup-plugin-visualizer": "^5.12.0",
+    "rollup-plugin-styler": "^2.0.0",
+    "rollup-plugin-visualizer": "^5.14.0",
     "semver": "^7.5.2",
     "tsc-alias": "1.8.13",
     "typescript": "^5.0.0",
@@ -87,7 +87,7 @@
     "@types/express": "^5.0.6",
     "@types/fs-extra": "^9.0.13",
     "@types/semver": "^7.7.1",
-    "cssnano": "^5.1.15",
+    "cssnano": "^7.0.0",
     "jest": "^29.4.3",
     "sass": "catalog:",
     "source-map": "0.6.1"

packages/pkg/src/core/init.ts

@@ -1,6 +1,5 @@
 import { AliasBundleFormatString, BuildTask, BundleUserConfig, Context, DeclarationUserConfig } from '../types.js';
 import { formatEntry, getTransformDefaultOutputDir } from '../helpers/getTaskIO.js';
-import getDefaultDefineValues from '../helpers/getDefaultDefineValues.js';
 import { stringifyObject } from '../utils.js';
 import { merge, mergeWith, omit } from 'es-toolkit/object';
 import path, { resolve } from 'node:path';
@@ -60,10 +59,6 @@ function initSharedTask(buildTask: BuildTask, options: InitTaskOptions) {
   config.alias ??= mergeDefaults({ ...pkg?.alias }, userConfig.alias ?? {});
   // Configure define
   config.define = Object.assign(
-    // Note: The define values in bundle mode will be defined (according to the `modes` value)
-    // in generating rollup options. But when the command is test, we don't need to get the rollup options.
-    // So in test, we assume the mode is 'development'.
-    command === 'test' ? getDefaultDefineValues('development') : {},
     stringifyObject(userConfig.define ?? {}),
     stringifyObject(pkg?.define ?? {}),
     stringifyObject(config.define ?? {}),