remove runtime emotion/react

This commit is contained in:
Bowen Tan 2021-12-16 15:45:11 +08:00
parent 4ac96e3d66
commit 668fd07c99
33 changed files with 150 additions and 90 deletions

View File

@ -1,7 +1,6 @@
import React from 'react';
import { flatten } from 'lodash-es';
import { FormControl, FormLabel, Input, Textarea, VStack } from '@chakra-ui/react';
import { EmotionJSX } from '@emotion/css/types/jsx-namespace';
import { TSchema } from '@sinclair/typebox';
import { parseType, parseTypeBox } from '@sunmao-ui/runtime';
import { eventBus } from '../../eventBus';
@ -55,7 +54,7 @@ export const renderField = (properties: {
</FormControl>
);
} else {
const fieldArray: EmotionJSX.Element[] = flatten(
const fieldArray: React.ReactElement[] = flatten(
Object.keys(value || []).map((childKey, index) => {
const childValue = (value as any)[childKey];
return renderField({

View File

@ -11,20 +11,107 @@ export const ignoreTraitsList = [
export const EmptyAppSchema: Application = {
kind: 'Application',
version: 'example/v1',
metadata: {
name: 'dialog_component',
description: 'dialog component example',
},
metadata: { name: 'dialog_component', description: 'dialog component example' },
spec: {
components: [
{
id: 'gridLayout1',
type: 'core/v1/grid_layout',
id: 'input1',
type: 'chakra_ui/v1/input',
properties: {
layout: [],
variant: 'outline',
placeholder: 'Please input value',
size: 'md',
isDisabled: false,
isRequired: false,
defaultValue: '',
},
traits: [
{
type: 'core/v1/style',
properties: {
styleSlot: 'content',
style: "background: red",
},
},
],
},
{
id: 'input2',
type: 'chakra_ui/v1/input',
properties: {
variant: 'outline',
placeholder: 'Please input value',
size: 'md',
isDisabled: false,
isRequired: false,
defaultValue: '',
},
traits: [],
},
{
id: 'input3',
type: 'chakra_ui/v1/input',
properties: {
variant: 'outline',
placeholder: 'Please input value',
size: 'md',
isDisabled: false,
isRequired: false,
defaultValue: '',
},
traits: [],
},
{
id: 'hstack1',
type: 'chakra_ui/v1/hstack',
properties: { spacing: '24px' },
traits: [],
},
{
id: 'button1',
type: 'chakra_ui/v1/button',
properties: {
text: { raw: 'text', format: 'plain' },
colorScheme: 'blue',
isLoading: false,
},
traits: [
{
type: 'core/v1/slot',
properties: { container: { id: 'hstack1', slot: 'content' } },
},
],
},
{
id: 'button2',
type: 'chakra_ui/v1/button',
properties: {
text: { raw: 'text', format: 'plain' },
colorScheme: 'blue',
isLoading: false,
},
traits: [
{
type: 'core/v1/slot',
properties: { container: { id: 'hstack1', slot: 'content' } },
},
],
},
{
id: 'button3',
type: 'chakra_ui/v1/button',
properties: {
text: { raw: 'text', format: 'plain' },
colorScheme: 'blue',
isLoading: false,
},
traits: [
{
type: 'core/v1/slot',
properties: { container: { id: 'hstack1', slot: 'content' } },
},
],
},
],
},
};

View File

@ -18,10 +18,8 @@
"noEmit": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"types": ["@emotion/react/types/css-prop"],
"baseUrl": "./",
"jsx": "react-jsx",
"jsxImportSource": "@emotion/react",
"rootDir": "src"
},
"include": ["./src"]

View File

@ -31,7 +31,7 @@
"dependencies": {
"@chakra-ui/icons": "^1.0.15",
"@chakra-ui/react": "^1.7.1",
"@emotion/react": "^11",
"@emotion/css": "^11.7.1",
"@emotion/styled": "^11",
"@sinclair/typebox": "^0.21.2",
"@sunmao-ui/core": "^0.3.1",

View File

@ -5,7 +5,6 @@ import { ImplWrapper } from './services/ImplWrapper';
import { resolveAppComponents } from './services/resolveAppComponents';
import { AppProps, UIServices } from './types/RuntimeSchema';
import { DebugEvent, DebugStore } from './services/DebugComponents';
import { css } from '@emotion/react';
// inject modules to App
export function genApp(services: UIServices) {
@ -39,7 +38,7 @@ export const App: React.FC<AppProps> = props => {
);
return (
<div className="App" css={css`height: 100vh; overflow: auto`}>
<div className="App" style={{height: '100vh', overflow: 'auto'}}>
{topLevelComponents.map(c => {
return (
<ImplWrapper

View File

@ -1,6 +1,6 @@
import RGL from 'react-grid-layout';
import React from 'react';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
import { useResizeDetector } from 'react-resize-detector';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
@ -36,7 +36,7 @@ const GridLayout: React.FC<RGL.ReactGridLayoutProps> = props => {
};
return (
<div ref={ref} css={bgCss}>
<div ref={ref} className={bgCss}>
<RGL
cols={12}
compactType={null}

View File

@ -5,7 +5,7 @@ import { ComponentImplementation } from '../../services/registry';
import Slot from '../_internal/Slot';
import { pick } from 'lodash-es';
import { GRID_HEIGHT } from '../../constants';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
const CssGlobals = Type.KeyOf(
Type.Object({
@ -287,7 +287,7 @@ const Box: ComponentImplementation<Static<typeof StyleSchema>> = ({
borderColor="gray.200"
borderRadius="base"
{...styleProps}
css={css`
className={css`
${customStyle?.content}
`}
>

View File

@ -1,6 +1,6 @@
import { useEffect, useRef } from 'react';
import { createComponent } from '@sunmao-ui/core';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
import { Static, Type } from '@sinclair/typebox';
import { Button as BaseButton } from '@chakra-ui/react';
import Text, { TextPropertySchema } from '../_internal/Text';
@ -31,7 +31,7 @@ const Button: ComponentImplementation<Static<typeof PropsSchema>> = ({
return (
<BaseButton
css={css`
className={css`
${customStyle?.content}
`}
{...{ colorScheme, isLoading }}

View File

@ -5,7 +5,7 @@ import { Checkbox as BaseCheckbox, useCheckboxGroupContext } from '@chakra-ui/re
import { ComponentImplementation } from '../../services/registry';
import Text, { TextPropertySchema } from '../_internal/Text';
import { ColorSchemePropertySchema } from './Types/ColorScheme';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
export const IsDisabledSchema = Type.Optional(Type.Boolean());
export const SizePropertySchema = Type.KeyOf(
@ -86,7 +86,7 @@ const Checkbox: ComponentImplementation<Static<typeof PropsSchema>> = ({
onChange={e => {
setChecked(e.target.checked);
}}
css={css`${customStyle?.content}`}
className={css`${customStyle?.content}`}
>
<Text value={text} />
</BaseCheckbox>

View File

@ -5,7 +5,6 @@ import { CheckboxGroup as BaseCheckboxGroup } from '@chakra-ui/react';
import { ComponentImplementation } from '../../services/registry';
import Slot from '../_internal/Slot';
import { SizePropertySchema, IsDisabledSchema } from './Checkbox';
import { css } from '@emotion/react';
const DefaultValueSchema = Type.Optional(
Type.Array(Type.Union([Type.String(), Type.Number()]))
@ -21,7 +20,6 @@ const CheckboxGroup: ComponentImplementation<Static<typeof PropsSchema>> = ({
isDisabled,
slotsMap,
mergeState,
customStyle,
}) => {
const [value, setValue] = useState(defaultValue);
useEffect(() => {
@ -34,7 +32,6 @@ const CheckboxGroup: ComponentImplementation<Static<typeof PropsSchema>> = ({
defaultValue={defaultValue}
isDisabled={isDisabled}
onChange={val => setValue(val)}
css={css`${customStyle?.content}`}
>
<Slot slotsMap={slotsMap} slot="content" />
</BaseCheckboxGroup>
@ -66,7 +63,7 @@ export default {
state: StateSchema,
methods: [],
slots: ['content'],
styleSlots: ['content'],
styleSlots: [],
events: [],
},
}),

View File

@ -86,12 +86,12 @@ const Dialog: ComponentImplementation<Static<typeof PropsSchema>> = ({
onClose={() => setIsOpen(false)}
trapFocus={false}
portalProps={containerRef.current ? portalProps : undefined}
css={`
${customStyle?.content}
`}
>
<AlertDialogOverlay {...(containerRef.current ? dialogOverlayProps : {})}>
<AlertDialogContent {...(containerRef.current ? dialogContentProps : {})}>
<AlertDialogContent
className={`${customStyle?.content}`}
{...(containerRef.current ? dialogContentProps : {})}
>
<AlertDialogHeader>{title}</AlertDialogHeader>
<AlertDialogBody>
<Slot slotsMap={slotsMap} slot="content" />

View File

@ -1,10 +1,10 @@
import { Divider } from '@chakra-ui/react';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
import { createComponent } from '@sunmao-ui/core';
import { ComponentImplementation } from '../../services/registry';
const DividerImpl: ComponentImplementation = ({customStyle}) => {
return <Divider css={css`${customStyle?.content}`} />;
return <Divider className={css`${customStyle?.content}`} />;
};
export default {

View File

@ -1,5 +1,5 @@
import { useEffect, useMemo, useRef, useState } from 'react';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
import { Type, Static } from '@sinclair/typebox';
import { createComponent } from '@sunmao-ui/core';
import { Button, VStack } from '@chakra-ui/react';
@ -110,7 +110,7 @@ const FormImpl: ComponentImplementation<Static<typeof PropsSchema>> = ({
borderColor="gray.200"
borderRadius="4"
spacing="5"
css={css`
className={css`
${customStyle?.content}
`}
>

View File

@ -10,7 +10,7 @@ import {
HStack,
Text,
} from '@chakra-ui/react';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
import { watch } from '../../../utils/watchReactivity';
import { ComponentImplementation } from '../../../services/registry';
import Slot from '../../_internal/Slot';
@ -107,7 +107,7 @@ const FormControlImpl: ComponentImplementation<{
display="flex"
flexDirection="column"
alignItems="end"
css={css`
className={css`
${customStyle?.content}
`}
>

View File

@ -1,5 +1,5 @@
import { createComponent } from '@sunmao-ui/core';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
import { Static, Type } from '@sinclair/typebox';
import { HStack as BaseHStack } from '@chakra-ui/react';
import { ComponentImplementation } from '../../services/registry';
@ -30,7 +30,7 @@ const HStack: ComponentImplementation<Static<typeof PropsSchema>> = ({
border="1px solid"
borderColor="gray.200"
borderRadius="4"
css={css`
className={css`
${customStyle?.content}
`}
{...{ direction, wrap, align, justify, spacing }}

View File

@ -1,5 +1,5 @@
import { Image as BaseImage } from '@chakra-ui/react';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
import { createComponent } from '@sunmao-ui/core';
import { Static, Type } from '@sinclair/typebox';
import { ComponentImplementation } from '../../services/registry';
@ -87,7 +87,7 @@ const Image: ComponentImplementation<Static<typeof PropsSchema>> = ({
`;
return (
<BaseImage
css={style}
className={style}
src={src}
alt={alt}
objectFit={objectFit}

View File

@ -10,7 +10,7 @@ import {
import { createComponent } from '@sunmao-ui/core';
import { Static, Type } from '@sinclair/typebox';
import { ComponentImplementation } from '../../services/registry';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
const AppendElementPropertySchema = Type.Union([
Type.Object({
@ -83,7 +83,7 @@ const Input: ComponentImplementation<Static<typeof PropsSchema>> = ({
isDisabled={isDisabled}
isRequired={isRequired}
onChange={onChange}
css={css`${customStyle?.content}`}
className={css`${customStyle?.content}`}
/>
{right ? (
right.type === 'addon' ? (

View File

@ -4,7 +4,7 @@ import { Static, Type } from '@sinclair/typebox';
import { createComponent } from '@sunmao-ui/core';
import { ComponentImplementation } from '../../services/registry';
import Text, { TextPropertySchema } from '../_internal/Text';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
const Kbd: ComponentImplementation<Static<typeof PropsSchema>> = ({
text,
@ -16,7 +16,7 @@ const Kbd: ComponentImplementation<Static<typeof PropsSchema>> = ({
}, [text.raw]);
return (
<BaseKbd css={css`${customStyle?.content}`}>
<BaseKbd className={css`${customStyle?.content}`}>
<Text value={text} />
</BaseKbd>
);

View File

@ -1,5 +1,5 @@
import { Link } from '@chakra-ui/react';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
import { Static, Type } from '@sinclair/typebox';
import { createComponent } from '@sunmao-ui/core';
import { ComponentImplementation } from '../../services/registry';
@ -16,7 +16,7 @@ const LinkImpl: ComponentImplementation<Static<typeof PropsSchema>> = ({
href={href}
isExternal={isExternal}
color="blue.500"
css={css`
className={css`
${customStyle?.content}
`}
>

View File

@ -5,7 +5,7 @@ import { ComponentImplementation } from '../../services/registry';
import { LIST_ITEM_EXP, LIST_ITEM_INDEX_EXP } from '../../constants';
import { RuntimeModuleSchema } from '../../types/RuntimeSchema';
import { ModuleRenderer } from '../_internal/ModuleRenderer';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
const List: ComponentImplementation<Static<typeof PropsSchema>> = ({
listData,
@ -42,7 +42,7 @@ const List: ComponentImplementation<Static<typeof PropsSchema>> = ({
return (
<BaseList
css={css`
className={css`
${customStyle?.content}
`}
>

View File

@ -4,7 +4,7 @@ import { Static, Type } from '@sinclair/typebox';
import { Select as BaseMultiSelect } from 'chakra-react-select';
import { ComponentImplementation } from '../../services/registry';
import { Box } from '@chakra-ui/react';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
const StateSchema = Type.Object({
value: Type.String(),
@ -34,7 +34,7 @@ const MultiSelect: ComponentImplementation<Static<typeof PropsSchema>> = ({
return (
<Box
width="full"
css={css`
className={css`
${customStyle?.content}
`}
>

View File

@ -9,7 +9,7 @@ import {
import { createComponent } from '@sunmao-ui/core';
import { Static, Type } from '@sinclair/typebox';
import { ComponentImplementation } from '../../services/registry';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
const NumberInput: ComponentImplementation<Static<typeof PropsSchema>> = ({
defaultValue = 0,
@ -61,7 +61,7 @@ const NumberInput: ComponentImplementation<Static<typeof PropsSchema>> = ({
allowMouseWheel={allowMouseWheel}
size={size}
onChange={onChange}
css={css`${customStyle?.content}`}
className={css`${customStyle?.content}`}
>
<NumberInputField />
<NumberInputStepper>

View File

@ -5,7 +5,7 @@ import { Radio as BaseRadio } from '@chakra-ui/react';
import { ComponentImplementation } from '../../services/registry';
import Text, { TextPropertySchema } from '../_internal/Text';
import { ColorSchemePropertySchema } from './Types/ColorScheme';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
const StateSchema = Type.Object({
value: Type.String(),
@ -47,7 +47,7 @@ const Radio: ComponentImplementation<Static<typeof PropsSchema>> = ({
size={size}
spacing={spacing}
colorScheme={colorScheme}
css={css`${customStyle?.content}`}
className={css`${customStyle?.content}`}
>
<Text value={text} />
</BaseRadio>

View File

@ -4,7 +4,7 @@ import { Static, Type } from '@sinclair/typebox';
import { RadioGroup as BaseRadioGroup } from '@chakra-ui/react';
import { ComponentImplementation } from '../../services/registry';
import Slot from '../_internal/Slot';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
const StateSchema = Type.Object({
value: Type.String(),
@ -31,7 +31,7 @@ const RadioGroup: ComponentImplementation<Static<typeof PropsSchema>> = ({
<BaseRadioGroup
value={value}
onChange={val => setValue(isNumerical ? Number(val) : val)}
css={css`${customStyle?.content}`}
className={css`${customStyle?.content}`}
>
<Slot slotsMap={slotsMap} slot="content" />
</BaseRadioGroup>

View File

@ -3,7 +3,7 @@ import { createComponent } from '@sunmao-ui/core';
import { Static, Type } from '@sinclair/typebox';
import { Select as BaseSelect } from '@chakra-ui/react';
import { ComponentImplementation } from '../../services/registry';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
const StateSchema = Type.Object({
value: Type.String(),
@ -48,7 +48,7 @@ const Select: ComponentImplementation<Static<typeof PropsSchema>> = ({
size={size}
variant={variant}
onChange={e => setValue(e.target.value)}
css={css`${customStyle?.content}`}
className={css`${customStyle?.content}`}
>
{options.map(opt => (
<option key={opt.value} value={opt.value}>

View File

@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
import { createComponent } from '@sunmao-ui/core';
import { Tabs as BaseTabs, TabList, Tab, TabPanels, TabPanel, Text } from '@chakra-ui/react';
import { Type, Static } from '@sinclair/typebox';
@ -30,7 +30,7 @@ const Tabs: ComponentImplementation<Static<typeof PropsSchema>> = ({
{tabNames.map((name, idx) => (
<Tab
key={idx}
css={css`
className={css`
${customStyle?.tabItem}
`}
>
@ -43,7 +43,7 @@ const Tabs: ComponentImplementation<Static<typeof PropsSchema>> = ({
return (
<TabPanel
key={idx}
css={css`
className={css`
${customStyle?.tabContent}
`}
>

View File

@ -1,5 +1,5 @@
import { createComponent } from '@sunmao-ui/core';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
import { Static, Type } from '@sinclair/typebox';
import { VStack as BaseVStack } from '@chakra-ui/react';
import { ComponentImplementation } from '../../services/registry';
@ -30,7 +30,7 @@ const VStack: ComponentImplementation<Static<typeof PropsSchema>> = ({
border="1px solid"
borderColor="gray.200"
borderRadius="4"
css={css`
className={css`
${customStyle?.content}
`}
{...{ direction, wrap, align, justify, spacing }}

View File

@ -4,7 +4,7 @@ import { createComponent } from '@sunmao-ui/core';
import { getSlots } from '../_internal/Slot';
import { Static, Type } from '@sinclair/typebox';
import { partial } from 'lodash-es';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
const BaseGridLayout = React.lazy(() => import('../_internal/GridLayout'));
@ -30,9 +30,7 @@ const GridLayout: ComponentImplementation<Static<typeof PropsSchema>> = ({
onDragStop={onDragStop}
onDrop={onDrop}
layout={layout}
css={css`
${customStyle?.content}
`}
className={css`${customStyle?.content}`}
>
{getSlots(slotsMap, 'content', {})}
</BaseGridLayout>

View File

@ -3,7 +3,6 @@ import { Static, Type } from '@sinclair/typebox';
import { ComponentImplementation } from '../../services/registry';
import { RuntimeModuleSchema } from '../../types/RuntimeSchema';
import { ModuleRenderer } from '../_internal/ModuleRenderer';
import { css } from '@emotion/react';
type Props = Static<typeof RuntimeModuleSchema>;
@ -13,8 +12,7 @@ const ModuleContainer: ComponentImplementation<Props> = ({
properties,
handlers,
services,
app,
customStyle
app
}) => {
if (!type) {
return <span>Please choose a module to render.</span>
@ -31,7 +29,6 @@ const ModuleContainer: ComponentImplementation<Props> = ({
handlers={handlers}
services={services}
app={app}
css={css`${customStyle?.content}`}
/>
);
};
@ -60,7 +57,7 @@ export default {
state: {},
methods: [],
slots: [],
styleSlots: ['content'],
styleSlots: [],
events: [],
},
}),

View File

@ -25,7 +25,7 @@ const Button: ComponentImplementation<Static<typeof PropsSchema>> = ({
}, []);
return (
<button ref={ref} onClick={callbackMap?.onClick} css={`${customStyle?.content}`}>
<button ref={ref} onClick={callbackMap?.onClick} className={`${customStyle?.content}`}>
<Text value={text} />
</button>
);

View File

@ -18,10 +18,8 @@
"noEmit": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"types": ["@emotion/react/types/css-prop"],
"baseUrl": "./",
"jsx": "react-jsx",
"jsxImportSource": "@emotion/react",
"rootDir": "src"
},
"include": ["./src"]

View File

@ -5,20 +5,7 @@ import { virtualExamplePlugin } from '@sunmao-ui/vite-plugins';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react({
babel: {
plugins: [
[
'@babel/plugin-transform-react-jsx',
{
throwIfNamespace: false, // defaults to true
runtime: 'automatic',
importSource: '@emotion/react',
},
],
],
},
}),
react(),
virtualExamplePlugin(),
],
define: {

View File

@ -1670,7 +1670,7 @@
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
"@emotion/react@^11", "@emotion/react@^11.1.1":
"@emotion/react@^11.1.1":
version "11.5.0"
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.5.0.tgz#19b5771bbfbda5e8517e948a2d9064810f0022bd"
integrity sha512-MYq/bzp3rYbee4EMBORCn4duPQfgpiEB5XzrZEBnUZAL80Qdfr7CEv/T80jwaTl/dnZmt9SnTa8NkTrwFNpLlw==