Merge pull request #486 from ice-lab/release-next

Release @ice/pkg@1.5.3

examples/rax-component/__mocks__/styleMock.js

@@ -0,0 +1,2 @@
+module.exports = {};
+

examples/rax-component/babel.config.json

@@ -0,0 +1,16 @@
+{
+  "presets": [
+    [
+      "@babel/preset-typescript",
+      {
+        "onlyRemoveTypeImports": true
+      }
+    ],
+    ["@babel/preset-env", {
+      "loose": true
+    }],
+    ["@babel/preset-react", {
+      "pragma": "createElement"
+    }]
+  ]
+}

examples/rax-component/enzyme-setup.ts

@@ -0,0 +1,5 @@
+import * as enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-rax';
+
+// Setup Enzyme
+enzyme.configure({ adapter: new Adapter() });

examples/rax-component/jest.config.mjs

@@ -0,0 +1,9 @@
+import pkgService, { defineJestConfig } from '@ice/pkg';
+
+export default defineJestConfig(pkgService, {
+  setupFilesAfterEnv: ['<rootDir>/enzyme-setup.ts'],
+  moduleNameMapper: {
+    '\\.(css|less|scss)$': '<rootDir>/__mocks__/styleMock.js',
+  },
+  transformIgnorePatterns: ['<rootDir>/node_modules/rax-*'],
+});

examples/rax-component/package.json

@@ -38,7 +38,8 @@
     "eslint": "eslint --cache --ext .js,.jsx,.ts,.tsx ./",
     "eslint:fix": "npm run eslint -- --fix",
     "stylelint": "stylelint \"**/*.{css,scss,less}\"",
-    "lint": "npm run eslint && npm run stylelint"
+    "lint": "npm run eslint && npm run stylelint",
+    "test": "jest"
   },
   "keywords": [
     "ice",
@@ -47,15 +48,27 @@
   ],
   "dependencies": {
     "@swc/helpers": "^0.4.14",
-    "babel-runtime-jsx-plus": "^0.1.5"
+    "babel-runtime-jsx-plus": "^0.1.5",
+    "rax-view": "^2.3.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
     "@ice/pkg": "workspace:*",
     "@ice/pkg-plugin-docusaurus": "workspace:*",
     "@ice/pkg-plugin-jsx-plus": "workspace:*",
     "@ice/pkg-plugin-rax-component": "workspace:*",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/enzyme": "^3.10.12",
     "@types/rax": "^1.0.0",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-rax": "^1.0.3",
+    "jest": "^28.0.0",
     "rax": "^1.2.2",
+    "rax-test-renderer": "^1.1.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

examples/rax-component/src/components/Header/index.css

@@ -0,0 +1,3 @@
+div {
+  color: red
+}

examples/rax-component/src/components/Header/index.tsx

@@ -0,0 +1,9 @@
+import { createElement } from 'rax';
+import View from 'rax-view';
+import './index.css';
+
+export default function Header() {
+  return (
+    <View data-testid="header">Header</View>
+  );
+}

examples/rax-component/src/index.tsx

@@ -1,5 +1,6 @@
 import { createElement, Fragment } from 'rax';
 import styles from './index.module.css';
+import Header from './components/Header';
 
 interface ComponentProps {
   /** Title for ExampleRaxComponent. */
@@ -8,12 +9,14 @@ interface ComponentProps {
 
 export default function ExampleRaxComponent(props: ComponentProps) {
   const { title = 'Hello World!' } = props;
-
+  console.log(__DEV__);
+  const role = 'admin';
   return (
     <div className={styles.ExampleRaxComponent}>
+      <Header />
       {title}
       <>xxxxxxxx</>
-      <div x-if={true}>admin</div>
+      <div x-if={role === 'admin'}>admin</div>
       <div x-else>guest</div>
     </div>
   );

examples/rax-component/tests/Header.spec.tsx

@@ -0,0 +1,8 @@
+import { createElement } from 'rax';
+import renderer from 'rax-test-renderer';
+import Header from '../src/components/Header';
+
+test('test <Button /> component', () => {
+  const tree = renderer.create(<Header />);
+  expect(tree.toJSON().children[0]).toBe('Header')
+});

examples/rax-component/tests/types.d.ts

@@ -0,0 +1,2 @@
+declare module 'rax-test-renderer';
+declare module 'enzyme-adapter-rax';

examples/rax-component/tsconfig.json

@@ -12,7 +12,8 @@
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noImplicitAny": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "types": ["vitest/globals"]
   },
-  "include": ["src"],
+  "include": ["src", "tests"],
 }

examples/react-component/__mocks__/styleMock.js

@@ -0,0 +1,2 @@
+module.exports = {};
+

examples/react-component/build.config.mts

@@ -9,10 +9,10 @@ export default defineConfig({
   transform: {
     formats: ['esm', 'es2017'],
   },
+  jsxRuntime: 'classic',
   sourceMaps: false,
   bundle: {
     formats: ['esm', 'es2017'],
-    minify: false,
     development: true,
   },
   alias: {

examples/react-component/jest-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

examples/react-component/jest.config.mjs

@@ -0,0 +1,11 @@
+import pkgService, { defineJestConfig } from '@ice/pkg';
+
+export default defineJestConfig(pkgService, {
+  preset: 'ts-jest',
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
+  testEnvironment: 'jest-environment-jsdom',
+  moduleNameMapper: {
+    '\\.module\\.(css|scss|less)$': 'identity-obj-proxy',
+    '\\.(css|less|scss)$': '<rootDir>/__mocks__/styleMock.js',
+  },
+});

examples/react-component/package.json

@@ -26,7 +26,9 @@
   "scripts": {
     "start": "ice-pkg start",
     "build": "ice-pkg build",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "vitest": "vitest",
+    "jest": "jest"
   },
   "dependencies": {
     "@ice/jsx-runtime": "^0.2.0",
@@ -37,11 +39,22 @@
     "@ice/pkg": "workspace:*",
     "@ice/pkg-plugin-docusaurus": "workspace:*",
     "@ice/pkg-plugin-jsx-plus": "workspace:*",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.0",
+    "jsdom": "^21.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "style-unit": "^3.0.4"
+    "sass": "^1.58.3",
+    "sass-loader": "^13.2.0",
+    "style-unit": "^3.0.4",
+    "ts-jest": "^29.0.0",
+    "vitest": "^0.28.5"
   },
   "peerDependencies": {
     "react": "^17 || ^18"

examples/react-component/src/components/Button.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
+import styles from './index.module.scss';
 
 interface ButtonProps {
   onClick?: React.MouseEventHandler;
 }
 
 const Button: React.FunctionComponent<React.PropsWithChildren<ButtonProps>> = (props) => {
   return (
-    <button onClick={props.onClick}>{props.children}</button>
+    <button className={styles.button} onClick={props.onClick} data-testid="normal-button">{props.children}</button>
   );
 };
 

examples/react-component/src/components/index.module.scss

@@ -0,0 +1,3 @@
+.button {
+  background: lightskyblue;
+}

examples/react-component/src/index.css

@@ -0,0 +1,4 @@
+/* This is comment */
+.title {
+  color: red;
+}

examples/react-component/src/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Button from '@/components/Button';
+import './index.css';
 
 export default function Component() {
   console.log(__DEV__);
@@ -8,7 +9,7 @@ export default function Component() {
   const [visible, setVisible] = React.useState(false);
   return (
     <>
-      <h1 style={{ fontSize: '100rpx' }}>Hello World</h1>
+      <h1 style={{ fontSize: '100rpx' }} data-testid="title">Hello World</h1>
       <Button onClick={() => setVisible(!visible)}>Click Me to Set Visible</Button>
 
       <div>

examples/react-component/tests/Button.spec.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import Button from '../src/components/Button';
+
+test('test <Button /> component', () => {
+  render(<Button>PKG</Button>);
+  expect(screen.getByTestId('normal-button')).toHaveTextContent('PKG');
+});

examples/react-component/tests/Index.spec.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import Index from '../src/index';
+
+test('test <Button /> component', () => {
+  render(<Index />);
+  expect(screen.getByTestId('title')).toHaveTextContent('Hello World');
+});

examples/react-component/vitest-setup.ts

@@ -0,0 +1,4 @@
+import matchers from '@testing-library/jest-dom/matchers';
+import { expect } from 'vitest';
+
+expect.extend(matchers);

examples/react-component/vitest.config.mts

@@ -0,0 +1,9 @@
+import pkgService, { defineVitestConfig } from '@ice/pkg';
+
+export default defineVitestConfig(pkgService, () => ({
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./vitest-setup.ts'],
+    globals: true,
+  },
+}));

package.json

@@ -24,6 +24,7 @@
     "@changesets/cli": "^2.26.0",
     "@commitlint/cli": "^15.0.0",
     "@iceworks/spec": "^1.6.0",
+    "@vitest/coverage-c8": "^0.28.5",
     "eslint": "^8.19.0",
     "fs-extra": "^10.1.0",
     "ice-npm-utils": "workspace:^3.0.2",
@@ -38,6 +39,6 @@
     "axios": "^0.23.0",
     "c8": "^7.11.3",
     "ts-node": "^10.8.2",
-    "vitest": "^0.7.13"
+    "vitest": "^0.28.5"
   }
 }

packages/pkg/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 1.5.3
+
+### Patch Changes
+
+- f2f17ed: feat: minify css bundle
+- 35bf1ca: feat: support configure jsxRuntime
+- 52ccdf5: feat: support UI or unit test
+
+## 1.5.3-beta.0
+
+### Patch Changes
+
+- f2f17ed: feat: minify css bundle
+- 35bf1ca: feat: support configure jsxRuntime
+- 52ccdf5: feat: support UI or unit test
+
 ## 1.5.2
 
 ### Patch Changes

packages/pkg/bin/cli.mjs

@@ -5,15 +5,10 @@ import consola from 'consola';
 import { cac } from 'cac';
 import { readFileSync } from 'fs';
 import { join, dirname } from 'path';
-import { require } from '../lib/utils.js';
-import componentService from '../lib/index.js';
+import pkgService, { getBuiltInPlugins } from '../lib/index.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
-const getBuiltInPlugins = () => [
-  require.resolve('./plugins/component'),
-];
-
 const cli = cac('ice-pkg');
 
 (async () => {
@@ -32,7 +27,7 @@ const cli = cac('ice-pkg');
       delete options['--'];
       const { rootDir, ...commandArgs } = options;
 
-      await componentService.run({
+      await pkgService.run({
         command: 'build',
         commandArgs,
         getBuiltInPlugins,
@@ -55,7 +50,7 @@ const cli = cac('ice-pkg');
       delete options['--'];
       const { rootDir, ...commandArgs } = options;
 
-      await componentService.run({
+      await pkgService.run({
         command: 'start',
         commandArgs,
         getBuiltInPlugins,

packages/pkg/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/pkg",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "Core service of ice component",
   "type": "module",
   "main": "./lib/index.js",
@@ -16,7 +16,7 @@
   "scripts": {
     "build": "rm -rf lib && tsc",
     "watch": "tsc -w",
-    "lint": "pnpm eslint --ext .js,.jsx,.ts,.tsx,.mts,.mjs ./",
+    "lint": "pnpm eslint --ext .js,.jsx,.ts,.tsx,.mts,.mjs ./src",
     "prepublishOnly": "pnpm run-s lint build"
   },
   "author": "",
@@ -49,6 +49,7 @@
     "fs-extra": "^10.0.0",
     "globby": "^11.0.4",
     "gzip-size": "^7.0.0",
+    "lodash.merge": "^4.6.2",
     "magic-string": "^0.25.7",
     "picocolors": "^1.0.0",
     "postcss": "^8.4.6",
@@ -61,9 +62,13 @@
   "devDependencies": {
     "@types/babel__core": "^7.1.20",
     "@types/fs-extra": "^9.0.13",
+    "@types/lodash.merge": "^4.6.7",
     "@types/node": "^17.0.2",
+    "jest": "^29.4.3",
+    "cssnano": "^5.1.15",
     "sass": "^1.49.8",
-    "source-map": "0.6.1"
+    "source-map": "0.6.1",
+    "vitest": "^0.28.5"
   },
   "publishConfig": {
     "access": "public",