Match-id-78e8186b6f0560425dffd177e9ea9eb6b8e1bd64

fixtures/antd/.babelrc

@@ -0,0 +1,27 @@
+{
+  "presets": [
+    "@babel/react",
+    "@babel/typescript",
+    [
+      "@babel/env",
+      {
+        "modules": false
+      }
+    ]
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ],
+    [
+      "@babel/plugin-transform-react-jsx",
+      {
+        "pragma": "Horizon.createElement",
+        "pragmaFrag": "Horizon.Fragment"
+      }
+    ]
+  ]
+}

fixtures/antd/README.md

@@ -0,0 +1,3 @@
+Horizon X antd demo:
+1. run `npm run build:watch` in root's `package.json`
+2. run `npm start` to run Horizon X antd

fixtures/antd/components/Menu.jsx

@@ -0,0 +1,38 @@
+import Horizon from 'horizon';
+import { AppstoreOutlined } from '@ant-design/icons';
+import { Menu } from 'antd';
+
+function getItem(label, key, icon, children, type) {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  };
+}
+
+const items = [
+  getItem('sub2', 'sub2', <AppstoreOutlined />, [getItem('sub3', 'sub3', null, [getItem('sub4', 'sub4')])]),
+];
+
+const App = () => {
+  const onClick = e => {
+    console.log('click ', e);
+  };
+
+  return (
+    <Menu
+      onClick={onClick}
+      style={{
+        width: 256,
+      }}
+      defaultSelectedKeys={['sub2']}
+      defaultOpenKeys={['sub2', 'sub3']}
+      mode="inline"
+      items={items}
+    />
+  );
+};
+
+export default App;

fixtures/antd/components/Menu2.jsx

@@ -0,0 +1,73 @@
+import Horizon, { useState } from 'horizon';
+import {
+  AppstoreOutlined,
+  ContainerOutlined,
+  MenuFoldOutlined,
+  PieChartOutlined,
+  DesktopOutlined,
+  MailOutlined,
+  MenuUnfoldOutlined,
+} from '@ant-design/icons';
+import { Button, Menu } from 'antd';
+
+function getItem(label, key, icon, children, type) {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  };
+}
+
+const items = [
+  getItem('选项1', '1', <PieChartOutlined />),
+  getItem('选项2', '2', <DesktopOutlined />),
+  getItem('选项3', '3', <ContainerOutlined />),
+  getItem('分组1', 'sub1', <MailOutlined />, [
+    getItem('选项5', '5'),
+    getItem('选项6', '6'),
+    getItem('选项7', '7'),
+    getItem('选项8', '8'),
+  ]),
+  getItem('分组2', 'sub2', <AppstoreOutlined />, [
+    getItem('选项9', '9'),
+    getItem('选项10', '10'),
+    getItem('分组2-1', 'sub3', null, [getItem('选项11', '11'), getItem('选项12', '12')]),
+  ]),
+];
+
+const App = () => {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <div
+      style={{
+        width: 256,
+        marginLeft: 32,
+      }}
+    >
+      <Button
+        type="primary"
+        onClick={() => {
+          setCollapsed(!collapsed);
+        }}
+        style={{
+          marginBottom: 16,
+        }}
+      >
+        {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+      </Button>
+      <Menu
+        mode="inline"
+        theme="dark"
+        defaultSelectedKeys={['2']}
+        defaultOpenKeys={['sub2']}
+        inlineCollapsed={collapsed}
+        items={items}
+      />
+    </div>
+  );
+};
+
+export default App;

fixtures/antd/components/Table.jsx

@@ -0,0 +1,97 @@
+import Horizon from 'horizon';
+import { Table } from 'antd';
+const columns = [
+  {
+    title: 'Full Name',
+    width: 100,
+    dataIndex: 'name',
+    key: 'name',
+    fixed: 'left',
+  },
+  {
+    title: 'Lang',
+    width: 100,
+    dataIndex: 'lang',
+    key: 'age',
+    fixed: 'left',
+  },
+  {
+    title: 'COL1',
+    dataIndex: 'description',
+    key: '1',
+    width: 220,
+  },
+  {
+    title: 'COL2',
+    dataIndex: 'description',
+    key: '2',
+    width: 220,
+  },
+  {
+    title: 'COL3',
+    dataIndex: 'description',
+    key: '3',
+    width: 220,
+  },
+  {
+    title: 'COL4',
+    dataIndex: 'description',
+    key: '4',
+    width: 220,
+  },
+  {
+    title: 'COL5',
+    dataIndex: 'description',
+    key: '5',
+    width: 220,
+  },
+  {
+    title: 'COL6',
+    dataIndex: 'description',
+    key: '6',
+    width: 220,
+  },
+  {
+    title: 'COL7',
+    dataIndex: 'description',
+    key: '7',
+    width: 220,
+  },
+  {
+    title: 'COL8',
+    dataIndex: 'description',
+    key: '8',
+  },
+  {
+    title: 'Action',
+    key: 'operation',
+    fixed: 'right',
+    width: 100,
+    render: () => <a>action</a>,
+  },
+];
+const data = [];
+
+for (let i = 0; i < 100; i++) {
+  data.push({
+    key: i,
+    name: `Horizon ${i}`,
+    lang: 'js',
+    description: `Javascript Framework no. ${i}`,
+  });
+}
+
+const App = () => (
+  <div style={{ width: '1200px' }}>
+    <Table
+      columns={columns}
+      dataSource={data}
+      scroll={{
+        x: 2200,
+        y: 300,
+      }}
+    />
+  </div>
+);
+
+export default App;

fixtures/antd/index.jsx

@@ -0,0 +1,29 @@
+import Horizon from 'horizon';
+import 'antd/dist/antd.css';
+import Table from './components/Table';
+import Menu from './components/Menu';
+import Menu2 from './components/Menu2';
+import { Tabs } from 'antd';
+
+const { TabPane } = Tabs;
+
+const onChange = key => {
+  console.log(key);
+};
+const App = () => (
+  <div style={{ padding: '12px' }}>
+    <h1>Horizon ❌ antd</h1>
+    <Tabs defaultActiveKey="Menu" onChange={onChange}>
+      <TabPane tab="Table" key="Table">
+        <Table />
+      </TabPane>
+      <TabPane tab="Menu" key="Menu">
+        <div style={{ display: 'flex' }}>
+          <Menu />
+          <Menu2 />
+        </div>
+      </TabPane>
+    </Tabs>
+  </div>
+);
+Horizon.render(<App key={1} />, document.getElementById('app'));

fixtures/antd/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "horizon-antd",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "start": "webpack-dev-server --config webpack.dev.js --hot --mode development --open"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@ant-design/icons": "^4.7.0",
+    "@babel/polyfill": "^7.10.4",
+    "antd": "^4.21.3",
+    "css-loader": "^5.2.2",
+    "style-loader": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.11.1",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
+    "@babel/plugin-syntax-jsx": "^7.10.4",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-react": "^7.10.4",
+    "@babel/preset-typescript": "^7.10.4",
+    "@hot-loader/react-dom": "16.9.0",
+    "babel-loader": "^8.1.0",
+    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-template": "^6.2.0",
+    "react-hot-loader": "^4.12.20",
+    "webpack": "4.42.0",
+    "webpack-cli": "3.3.11",
+    "webpack-dev-server": "^3.10.3",
+    "webpack-watch-files-plugin": "^1.2.1"
+  }
+}

fixtures/antd/webpack.dev.js

@@ -0,0 +1,54 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const horizon = path.resolve(__dirname, '../../build/horizon');
+const config = () => {
+  return {
+    entry: ['./index.jsx'],
+    output: {
+      path: path.resolve(__dirname, 'temp'),
+      filename: '[name].[hash].js',
+    },
+    devtool: 'source-map',
+    module: {
+      rules: [
+        {
+          test: /\.ts(x)?|js|jsx$/,
+          exclude: /node_modules/,
+          loader: 'babel-loader',
+        },
+        {
+          test: /\.css$/,
+          use: [
+            'style-loader',
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 1,
+              },
+            },
+          ],
+          exclude: /\.module\.css$/,
+        },
+      ],
+    },
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js', '.jsx', 'json'],
+      alias: {
+        horizon: horizon,
+        react: horizon,
+        'react-dom': horizon,
+      },
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: require('html-webpack-template'),
+        title: 'Horizon Antd',
+        inject: false,
+        appMountId: 'app',
+        filename: 'index.html',
+      }),
+    ],
+  };
+};
+
+module.exports = config;

scripts/rollup/rollup.config.js

@@ -61,7 +61,7 @@ function genConfig(mode) {
       mode === 'production' && terser(),
       copy([
         {
-          from: path.join(libDir, 'index.js'),
+          from: path.join(libDir, '/npm/index.js'),
           to: path.join(outDir, 'index.js'),
         },
         {