let trait return a HOC as the wrapper of the component

packages/runtime/src/App.tsx

@@ -57,20 +57,24 @@ const ImplWrapper: React.FC<{
 
   // traits
   const traitsProps = {};
+  const wrappers: React.FC[] = [];
   for (const t of c.traits) {
     const tImpl = registry.getTrait(
       t.parsedType.version,
       t.parsedType.name
     ).impl;
-    const tProps = tImpl({
+    const { props: tProps, component: Wrapper } = tImpl({
       ...t.properties,
       mergeState,
       subscribeMethods,
     });
     merge(traitsProps, tProps);
+    if (Wrapper) {
+      wrappers.push(Wrapper);
+    }
   }
 
-  return (
+  let C = (
     <Impl
       key={c.id}
       {...c.properties}
@@ -80,6 +84,13 @@ const ImplWrapper: React.FC<{
       slotsMap={slotsMap}
     />
   );
+
+  while (wrappers.length) {
+    const W = wrappers.pop()!;
+    C = <W>{C}</W>;
+  }
+
+  return C;
 };
 
 const DebugStore: React.FC = () => {

packages/runtime/src/registry.tsx

@@ -11,6 +11,7 @@ import ChakraUITabs from "./components/chakra-ui/Tabs";
 import CoreState from "./traits/core/state";
 import CoreEvent from "./traits/core/event";
 import CoreSlot from "./traits/core/slot";
+import CoreHidden from "./traits/core/hidden";
 
 type ImplementedRuntimeComponent = RuntimeComponent & {
   impl: ComponentImplementation;
@@ -40,7 +41,10 @@ export type TraitImplementation<T = any> = (
     mergeState: MergeState;
     subscribeMethods: SubscribeMethods;
   }
-) => any;
+) => {
+  props: any;
+  component?: React.FC;
+};
 
 class Registry {
   components: Map<string, Map<string, ImplementedRuntimeComponent>> = new Map();
@@ -97,3 +101,4 @@ registry.registerComponent(ChakraUITabs);
 registry.registerTrait(CoreState);
 registry.registerTrait(CoreEvent);
 registry.registerTrait(CoreSlot);
+registry.registerTrait(CoreHidden);