Skip to content

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

feat: carding module

parent 7377058c
Show 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 { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
output: {
path: distPath,
......@@ -56,12 +56,5 @@ module.exports = {
externals: {
swiper: 'Swiper',
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
hash: false,
template: path.join(__dirname, '../src/index.html'),
filename: 'index.html',
}),
],
plugins: [new CleanWebpackPlugin()],
};
build/webpack.dev.js
View file @ 0393dd69
......@@ -2,18 +2,19 @@ const webpack = require('webpack');
const merge = require('webpack-merge');
const { host, port } = require('./config');
const webpackBaseConfig = require('./webpack.base.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const { distPath } = require('./config');
module.exports = merge(webpackBaseConfig, {
mode: 'development',
entry: [
`webpack-dev-server/client?http://${host}:${port}`,
'webpack/hot/only-dev-server',
`../src/index.ts`,
path.join(__dirname, `../fixtures/index.tsx`),
],
devtool: 'inline-source-map',
module: {
rules: [].concat(getStyle(true)),
},
module: {},
output: {
publicPath: '/',
filename: 'assets/[hash:8].[name].js',
......@@ -22,6 +23,11 @@ module.exports = merge(webpackBaseConfig, {
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({}),
new HtmlWebpackPlugin({
hash: false,
template: path.join(__dirname, '../fixtures/index.html'),
filename: 'index.html',
}),
],
devServer: {
host,
......
src/index.html → fixtures/index.html
View file @ 0393dd69
......@@ -5,5 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
<body>
<div id="app"></div>
</body>
</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 @@
"main": "./lib/index.js",
"bin": {},
"scripts": {
"start": "tsc -w -p .",
"dev": "webpack-dev-server --config build/webpack.base.js --open",
"start": "npm run dev",
"dev": "webpack-dev-server --config build/webpack.dev.js --open",
"clean": "rimraf lib",
"test": "npm run lint",
"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
export interface JimuEditorProps {
Stage: ReactElement;
controls: IControls[];
canvas?: Component | FunctionComponent;
controls?: IControls[];
}
// 控件类型
export interface IControls {
Entity?: ReactElement;
Entity?: Component | FunctionComponent;
options: IControlsOptions;
}
export interface IControlsOptions {
......@@ -37,11 +42,17 @@ export interface IWrappedWidget {
events: IEvent[];
}
export interface IWidget {
Editor: ReactElement;
Layer: ReactElement;
Stele: ReactElement;
Editor: Component | FunctionComponent;
Layer: Component | FunctionComponent;
Stele: Component | FunctionComponent;
meta: IMeta;
}
export interface WrappedWidget {
type: string;
style: CSSStyleRule;
id: string;
widget: IWidget;
}
export interface IMeta {
script: string;
deps: string[];
......@@ -69,3 +80,14 @@ export interface IEvent {
des: 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