Skip to content

J
jimu-core
Commit 0393dd69 authored by fanxuehui's avatar fanxuehui
Browse files
Options

feat: carding module

parent 7377058c
Hide whitespace changes
Inline Side-by-side
Showing with 165 additions and 34 deletions
build/webpack.base.js
View file @ 0393dd69
const { distPath, theme } = require('./config'); const { distPath, theme } = require('./config');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path'); const path = require('path');
module.exports = { module.exports = {
output: { output: {
path: distPath, path: distPath,
...@@ -56,12 +56,5 @@ module.exports = { ...@@ -56,12 +56,5 @@ module.exports = {
externals: { externals: {
swiper: 'Swiper', swiper: 'Swiper',
}, },
plugins: [ plugins: [new CleanWebpackPlugin()],
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
hash: false,
template: path.join(__dirname, '../src/index.html'),
filename: 'index.html',
}),
],
}; };
build/webpack.dev.js
View file @ 0393dd69
...@@ -2,18 +2,19 @@ const webpack = require('webpack'); ...@@ -2,18 +2,19 @@ const webpack = require('webpack');
const merge = require('webpack-merge'); const merge = require('webpack-merge');
const { host, port } = require('./config'); const { host, port } = require('./config');
const webpackBaseConfig = require('./webpack.base.js'); const webpackBaseConfig = require('./webpack.base.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const { distPath } = require('./config');
module.exports = merge(webpackBaseConfig, { module.exports = merge(webpackBaseConfig, {
mode: 'development', mode: 'development',
entry: [ entry: [
`webpack-dev-server/client?http://${host}:${port}`, `webpack-dev-server/client?http://${host}:${port}`,
'webpack/hot/only-dev-server', 'webpack/hot/only-dev-server',
`../src/index.ts`, path.join(__dirname, `../fixtures/index.tsx`),
], ],
devtool: 'inline-source-map', devtool: 'inline-source-map',
module: { module: {},
rules: [].concat(getStyle(true)),
},
output: { output: {
publicPath: '/', publicPath: '/',
filename: 'assets/[hash:8].[name].js', filename: 'assets/[hash:8].[name].js',
...@@ -22,6 +23,11 @@ module.exports = merge(webpackBaseConfig, { ...@@ -22,6 +23,11 @@ module.exports = merge(webpackBaseConfig, {
plugins: [ plugins: [
new webpack.HotModuleReplacementPlugin(), new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({}), new webpack.DefinePlugin({}),
new HtmlWebpackPlugin({
hash: false,
template: path.join(__dirname, '../fixtures/index.html'),
filename: 'index.html',
}),
], ],
devServer: { devServer: {
host, host,
......
src/index.html → fixtures/index.html
View file @ 0393dd69
...@@ -5,5 +5,7 @@ ...@@ -5,5 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title> <title>Document</title>
</head> </head>
<body></body> <body>
<div id="app"></div>
</body>
</html> </html>
fixtures/index.tsx 0 → 100644
View file @ 0393dd69
import React from 'react';
import { render } from 'react-dom';
import JimuEditor from '../src/jimu-editor/index';
function Canvas() {
return <div>extended Canvas</div>;
}
render(
<JimuEditor controls={[]} canvas={Canvas}></JimuEditor>,
document.getElementById('app')
);
package.json
View file @ 0393dd69
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
"main": "./lib/index.js", "main": "./lib/index.js",
"bin": {}, "bin": {},
"scripts": { "scripts": {
"start": "tsc -w -p .", "start": "npm run dev",
"dev": "webpack-dev-server --config build/webpack.base.js --open", "dev": "webpack-dev-server --config build/webpack.dev.js --open",
"clean": "rimraf lib", "clean": "rimraf lib",
"test": "npm run lint", "test": "npm run lint",
"lint": "eslint src test", "lint": "eslint src test",
......
src/index.ts deleted 100644 → 0
View file @ 7377058c
function foo(bar: string): void {
console.log(bar);
}
foo('');
export default foo;
src/jimu-editor/app.ts deleted 100644 → 0
View file @ 7377058c
import React from 'react';
function JimuEditor(props: { a: string }) {
console.log(props);
}
src/jimu-editor/app.tsx 0 → 100644
View file @ 0393dd69
import React, { FC } from 'react';
import { JimuEditorProps } from './shared/interfaces';
import Stage from './components/stage';
import Header from './components/header';
import { StoreProvider } from './store';
function JimuEditor({ canvas, controls }: JimuEditorProps) {
return (
<StoreProvider>
<Header></Header>
<Stage></Stage>
</StoreProvider>
);
}
export default JimuEditor;
src/jimu-editor/components/canvas/index.tsx 0 → 100644
View file @ 0393dd69
import React from 'react';
function Canvas() {
return <div>canvas</div>;
}
export default Canvas;
src/jimu-editor/components/header.tsx 0 → 100644
View file @ 0393dd69
import React from 'react';
import { useStores } from '../hooks/use-store';
import { observer } from 'mobx-react';
function Header() {
const { scopeStore } = useStores();
return <div>Header</div>;
}
export default observer(Header);
src/jimu-editor/components/icon-host.tsx 0 → 100644
View file @ 0393dd69
// 物料图标注入点
// 注入点容器可替换
src/jimu-editor/components/stage/index.tsx 0 → 100644
View file @ 0393dd69
import React from 'react';
import { observer } from 'mobx-react';
import { useStores } from '../../hooks/use-store';
import Canvas from '../canvas';
function Stage() {
const { scopeStore } = useStores();
const handleClick = () => {};
return (
<div onClick={handleClick}>
stage
<Canvas></Canvas>
</div>
);
}
export default observer(Stage);
src/jimu-editor/hooks/use-store/index.ts 0 → 100644
View file @ 0393dd69
import React from 'react';
import { storesContext } from '../../store';
export const useStores = () => React.useContext(storesContext);
src/jimu-editor/index.ts
View file @ 0393dd69
import React from 'react'; import JimuEditor from './app';
export default JimuEditor;
src/jimu-editor/shared/interfaces.ts
View file @ 0393dd69
import { ReactElement } from 'react'; import {
ReactElement,
Component,
FunctionComponent,
CSSProperties,
} from 'react';
// 积木编辑器props // 积木编辑器props
export interface JimuEditorProps { export interface JimuEditorProps {
Stage: ReactElement; canvas?: Component | FunctionComponent;
controls: IControls[]; controls?: IControls[];
} }
// 控件类型 // 控件类型
export interface IControls { export interface IControls {
Entity?: ReactElement; Entity?: Component | FunctionComponent;
options: IControlsOptions; options: IControlsOptions;
} }
export interface IControlsOptions { export interface IControlsOptions {
...@@ -37,11 +42,17 @@ export interface IWrappedWidget { ...@@ -37,11 +42,17 @@ export interface IWrappedWidget {
events: IEvent[]; events: IEvent[];
} }
export interface IWidget { export interface IWidget {
Editor: ReactElement; Editor: Component | FunctionComponent;
Layer: ReactElement; Layer: Component | FunctionComponent;
Stele: ReactElement; Stele: Component | FunctionComponent;
meta: IMeta; meta: IMeta;
} }
export interface WrappedWidget {
type: string;
style: CSSStyleRule;
id: string;
widget: IWidget;
}
export interface IMeta { export interface IMeta {
script: string; script: string;
deps: string[]; deps: string[];
...@@ -69,3 +80,14 @@ export interface IEvent { ...@@ -69,3 +80,14 @@ export interface IEvent {
des: string; des: string;
pub?: string; pub?: string;
} }
// 产出JSON格式
export interface IPage {
attr: IPageAttr;
widgetList: IWidget[];
}
export interface IPageAttr {
style: CSSProperties;
name: string;
id: string;
}
src/jimu-editor/store/index.tsx 0 → 100644
View file @ 0393dd69
import React, { createContext } from 'react';
import { ScopeStore } from './scope';
import { StageStore } from './stage';
const stores = {
stageStore: new StageStore(),
scopeStore: new ScopeStore(),
};
export const storesContext = createContext(stores);
export const StoreProvider = ({ children }) => {
return (
<storesContext.Provider value={stores}>{children}</storesContext.Provider>
);
};
src/jimu-editor/store/scope.ts
View file @ 0393dd69
// 编辑器扩展和外部参数管理
import { observable, action, computed } from 'mobx';
export class ScopeStore {
@observable
controls = [];
@observable
props = { test: 2 };
@action
changeProps(props) {
console.log(props, this.props);
this.props = props;
}
}
src/jimu-editor/store/stage.ts
View file @ 0393dd69
// 舞台数据
import { observable, action, computed } from 'mobx';
import { IPage } from '../shared/interfaces';
export class StageStore {
@observable
data: IPage = {
attr: {
style: { width: 100 },
id: '',
name: '',
},
widgetList: [],
};
@observable
targetWidgetId: string = '';
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment