Match-id-31bf755b6dc5deec85ed39d316ac7eba2b574cb9
This commit is contained in:
commit
c568b732fe
|
@ -1,27 +0,0 @@
|
||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
|
@ -1,3 +0,0 @@
|
||||||
Horizon X antd demo:
|
|
||||||
1. run `npm run build:watch` in root's `package.json`
|
|
||||||
2. run `npm start` to run Horizon X antd
|
|
|
@ -1,38 +0,0 @@
|
||||||
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;
|
|
|
@ -1,73 +0,0 @@
|
||||||
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;
|
|
|
@ -1,97 +0,0 @@
|
||||||
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;
|
|
|
@ -1,29 +0,0 @@
|
||||||
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'));
|
|
|
@ -1,34 +0,0 @@
|
||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,54 +0,0 @@
|
||||||
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;
|
|
|
@ -1 +0,0 @@
|
||||||
# horizon jsx babel plugin
|
|
|
@ -1,7 +0,0 @@
|
||||||
/* istanbul ignore next */
|
|
||||||
module.exports = {
|
|
||||||
presets: [
|
|
||||||
'@babel/preset-env',
|
|
||||||
'@babel/preset-typescript'
|
|
||||||
]
|
|
||||||
};
|
|
|
@ -1,5 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
transform: {
|
|
||||||
'\\.(js|jsx|ts|tsx)$': 'babel-jest',
|
|
||||||
}
|
|
||||||
};
|
|
|
@ -1,37 +0,0 @@
|
||||||
{
|
|
||||||
"name": "@cloudsop/horizon-jsx-transform-babel-plugin",
|
|
||||||
"version": "0.2.0",
|
|
||||||
"description": "transform jsx for horizon",
|
|
||||||
"main": "./dist/index.js",
|
|
||||||
"scripts": {
|
|
||||||
"build": "rimraf dist && tsc",
|
|
||||||
"test": "rimraf dist && tsc && jest",
|
|
||||||
"jest": "jest",
|
|
||||||
"prepublish": "npm run build"
|
|
||||||
},
|
|
||||||
"files": [
|
|
||||||
"../dist"
|
|
||||||
],
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/generator": "^7.2.2",
|
|
||||||
"@babel/parser": "^7.2.3"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@babel/core": "^7.2.2",
|
|
||||||
"@babel/plugin-proposal-class-properties": "^7.2.1",
|
|
||||||
"@babel/plugin-proposal-decorators": "^7.2.0",
|
|
||||||
"@babel/plugin-proposal-export-namespace-from": "^7.2.0",
|
|
||||||
"@babel/plugin-proposal-function-sent": "^7.2.0",
|
|
||||||
"@babel/plugin-proposal-json-strings": "^7.2.0",
|
|
||||||
"@babel/plugin-proposal-numeric-separator": "^7.2.0",
|
|
||||||
"@babel/plugin-proposal-throw-expressions": "^7.2.0",
|
|
||||||
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
|
|
||||||
"@babel/plugin-syntax-import-meta": "^7.2.0",
|
|
||||||
"@babel/plugin-syntax-jsx": "^7.2.0",
|
|
||||||
"@babel/plugin-transform-modules-commonjs": "^7.2.0",
|
|
||||||
"@babel/traverse": "^7.11.0",
|
|
||||||
"@babel/preset-env": "^7.16.11",
|
|
||||||
"@babel/types": "^7.0.0",
|
|
||||||
"babel-plugin-tester": "^10.1.0"
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,57 +0,0 @@
|
||||||
import SyntaxJSX from '@babel/plugin-syntax-jsx';
|
|
||||||
import * as BabelCore from '@babel/core';
|
|
||||||
import * as t from '@babel/types';
|
|
||||||
import { NodePath } from '@babel/traverse';
|
|
||||||
import { JSXIdentifier, JSXMemberExpression, JSXNamespacedName } from '@babel/types';
|
|
||||||
|
|
||||||
function isHTMLTag(tagName: string) {
|
|
||||||
return tagName && /^[a-z]/.test(tagName);
|
|
||||||
}
|
|
||||||
|
|
||||||
const horizonJsx = t.memberExpression(t.identifier('Horizon'), t.identifier('jsx'));
|
|
||||||
|
|
||||||
function getTagNodeName(tagNode: JSXIdentifier | JSXMemberExpression | JSXNamespacedName) {
|
|
||||||
let tagName;
|
|
||||||
if (t.isJSXNamespacedName(tagNode)) {
|
|
||||||
throw 'horizon jsx doesn\'t support JSX namespace: ' + tagNode;
|
|
||||||
} else if (t.isJSXIdentifier(tagNode)) {
|
|
||||||
/*
|
|
||||||
this -> thisExpression
|
|
||||||
HTML -> stringLiteral
|
|
||||||
Others -> Identifier
|
|
||||||
*/
|
|
||||||
tagName = tagNode.name === 'this' ?
|
|
||||||
t.thisExpression() : isHTMLTag(tagNode.name) ?
|
|
||||||
t.stringLiteral(tagNode.name) :
|
|
||||||
t.identifier(tagNode.name);
|
|
||||||
} else if (t.isJSXMemberExpression(tagNode)) {
|
|
||||||
tagName = t.memberExpression(
|
|
||||||
getTagNodeName(tagNode.object),
|
|
||||||
getTagNodeName(tagNode.property),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return tagName;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ({ types }: typeof BabelCore) => {
|
|
||||||
|
|
||||||
return {
|
|
||||||
name: 'horizon-jsx-babel-plugin',
|
|
||||||
inherits: SyntaxJSX,
|
|
||||||
|
|
||||||
visitor: {
|
|
||||||
Program(path: NodePath<t.Program>) {
|
|
||||||
// program = path
|
|
||||||
},
|
|
||||||
|
|
||||||
JSXElement: {
|
|
||||||
exit(path: NodePath<t.JSXElement>) {
|
|
||||||
const openingElement = path.get('openingElement');
|
|
||||||
const tagName = getTagNodeName(openingElement.node.name);
|
|
||||||
path.replaceWith(t.callExpression(horizonJsx, [tagName]));
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
|
@ -1,3 +0,0 @@
|
||||||
var x = <div></div>;
|
|
||||||
var y = <Eview.Table></Eview.Table>;
|
|
||||||
var z = <this></this>;
|
|
|
@ -1,3 +0,0 @@
|
||||||
var x = Horizon.jsx('div');
|
|
||||||
var y = Horizon.jsx(Eview.Table);
|
|
||||||
var z = Horizon.jsx(this);
|
|
|
@ -1 +0,0 @@
|
||||||
<div className="123"></div>
|
|
|
@ -1,10 +0,0 @@
|
||||||
const path = require('path');
|
|
||||||
const pluginTester = require('babel-plugin-tester').default;
|
|
||||||
import plugin from '../src';
|
|
||||||
|
|
||||||
pluginTester({
|
|
||||||
plugin,
|
|
||||||
title: 'horizon jsx plugin',
|
|
||||||
fixtures: path.join(__dirname, '__fixtures__'),
|
|
||||||
snapshot: true
|
|
||||||
});
|
|
|
@ -1,9 +0,0 @@
|
||||||
{
|
|
||||||
"extends": "../../tsconfig.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
"outDir": "./dist"
|
|
||||||
},
|
|
||||||
"include": [
|
|
||||||
"src"
|
|
||||||
]
|
|
||||||
}
|
|
Loading…
Reference in New Issue