diff --git a/fixtures/antd/.babelrc b/fixtures/antd/.babelrc new file mode 100644 index 00000000..bb6ba7f0 --- /dev/null +++ b/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" + } + ] + ] +} diff --git a/fixtures/antd/README.md b/fixtures/antd/README.md new file mode 100644 index 00000000..6a5b5e81 --- /dev/null +++ b/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 diff --git a/fixtures/antd/components/Menu.jsx b/fixtures/antd/components/Menu.jsx new file mode 100644 index 00000000..16f6b407 --- /dev/null +++ b/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', , [getItem('sub3', 'sub3', null, [getItem('sub4', 'sub4')])]), +]; + +const App = () => { + const onClick = e => { + console.log('click ', e); + }; + + return ( + + ); +}; + +export default App; diff --git a/fixtures/antd/components/Menu2.jsx b/fixtures/antd/components/Menu2.jsx new file mode 100644 index 00000000..97c1679a --- /dev/null +++ b/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', ), + getItem('选项2', '2', ), + getItem('选项3', '3', ), + getItem('分组1', 'sub1', , [ + getItem('选项5', '5'), + getItem('选项6', '6'), + getItem('选项7', '7'), + getItem('选项8', '8'), + ]), + getItem('分组2', 'sub2', , [ + 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 ( +
+ + +
+ ); +}; + +export default App; diff --git a/fixtures/antd/components/Table.jsx b/fixtures/antd/components/Table.jsx new file mode 100644 index 00000000..5ca9b680 --- /dev/null +++ b/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: () => action, + }, +]; +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 = () => ( +
+ + +); + +export default App; diff --git a/fixtures/antd/index.jsx b/fixtures/antd/index.jsx new file mode 100644 index 00000000..a603b89c --- /dev/null +++ b/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 = () => ( +
+

Horizon ❌ antd

+ + +
+ + +
+ + +
+ + + +); +Horizon.render(, document.getElementById('app')); diff --git a/fixtures/antd/package.json b/fixtures/antd/package.json new file mode 100644 index 00000000..fdde6acd --- /dev/null +++ b/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" + } +} diff --git a/fixtures/antd/webpack.dev.js b/fixtures/antd/webpack.dev.js new file mode 100644 index 00000000..f452ad2c --- /dev/null +++ b/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; diff --git a/libs/horizon/index.js b/libs/horizon/npm/index.js similarity index 100% rename from libs/horizon/index.js rename to libs/horizon/npm/index.js diff --git a/scripts/rollup/rollup.config.js b/scripts/rollup/rollup.config.js index 4d5cf9be..c3c31b49 100644 --- a/scripts/rollup/rollup.config.js +++ b/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'), }, {