Merge remote-tracking branch 'origin/main' into chore/deps-minor

maaaathis · maaaathis · commit 67efe1def3c2 · 2025-07-09T10:13:11.000+02:00
* origin/main: chore(release): bump version to 0.2.0-alpha.329 feat(SuspenseTrigger): added remote suspense loading trigger (#1722) # Conflicts: # apps/remote-dom-demo/package.json # pnpm-lock.yaml
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0-alpha.329](https://github.com/mittwald/flow/compare/0.2.0-alpha.328...0.2.0-alpha.329) (2025-07-09)
+
+### Features
+
+* **SuspenseTrigger:** added remote suspense loading trigger ([#1722](https://github.com/mittwald/flow/issues/1722)) ([98e19ee](https://github.com/mittwald/flow/commit/98e19eef41cb66a0dcb5a6024eee33f1464f58d0))
+
 # [0.2.0-alpha.328](https://github.com/mittwald/flow/compare/0.2.0-alpha.327...0.2.0-alpha.328) (2025-07-09)
 
 ### Bug Fixes
diff --git a/apps/remote-dom-demo/package.json b/apps/remote-dom-demo/package.json
@@ -26,6 +26,7 @@
     "react-hook-form": "^7.60.0",
     "remeda": "^2.25.0",
     "sass": "^1.89.2",
+    "usehooks-ts": "^3.1.1",
     "webpack": "^5.99.9"
   },
   "devDependencies": {
diff --git a/apps/remote-dom-demo/src/app/layout.tsx b/apps/remote-dom-demo/src/app/layout.tsx
@@ -63,6 +63,7 @@ export default function Layout(props: PropsWithChildren) {
                 <Link href="/host/react-hook-form">React Hook Form</Link>
                 <Link href="/host/files">Files</Link>
                 <Link href="/host/suspense">Suspense</Link>
+                <Link href="/host/mstudio-loading">mStudio loading</Link>
                 <Link href="/host/tunnel">Tunnel</Link>
                 <Link href="/host/ext-bridge">Ext Bridge</Link>
                 <Link href="/host/error">Error</Link>
diff --git a/apps/remote-dom-demo/src/app/remote/mstudio-loading/page.tsx b/apps/remote-dom-demo/src/app/remote/mstudio-loading/page.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { Heading, Section, Text } from "@mittwald/flow-remote-react-components";
+import { LoadingIndicator } from "@mittwald/mstudio-ext-react-components";
+import { useState } from "react";
+import { useTimeout } from "usehooks-ts";
+
+export default function Page() {
+  const [loading, setIsLoading] = useState(true);
+  const hideLoading = () => {
+    setIsLoading(false);
+  };
+  useTimeout(hideLoading, 3000);
+  console.log("Is loading?", loading);
+
+  return (
+    <Section>
+      <Heading>Demo</Heading>
+      <Text>Some text</Text>
+      <LoadingIndicator show={loading} />
+    </Section>
+  );
+}
diff --git a/lerna.json b/lerna.json
@@ -4,5 +4,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.2.0-alpha.328"
+  "version": "0.2.0-alpha.329"
 }
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0-alpha.329](https://github.com/mittwald/flow/compare/0.2.0-alpha.328...0.2.0-alpha.329) (2025-07-09)
+
+### Features
+
+* **SuspenseTrigger:** added remote suspense loading trigger ([#1722](https://github.com/mittwald/flow/issues/1722)) ([98e19ee](https://github.com/mittwald/flow/commit/98e19eef41cb66a0dcb5a6024eee33f1464f58d0))
+
 # [0.2.0-alpha.328](https://github.com/mittwald/flow/compare/0.2.0-alpha.327...0.2.0-alpha.328) (2025-07-09)
 
 ### Bug Fixes
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.2.0-alpha.328",
+  "version": "0.2.0-alpha.329",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
diff --git a/packages/components/src/components/Activity/Activity.tsx b/packages/components/src/components/Activity/Activity.tsx
@@ -1,20 +1,13 @@
-import type { ComponentType, FC, PropsWithChildren } from "react";
-import React, { lazy, Suspense, useEffect, useState } from "react";
+import SuspenseTrigger from "@/components/SuspenseTrigger";
+import type { FC, PropsWithChildren } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { useIsSSR } from "react-aria";
 
 export interface ActivityProps extends PropsWithChildren {
   isActive?: boolean;
   inactiveDelay?: number;
 }
 
-const nonResolvingPromise = new Promise<{ default: ComponentType<unknown> }>(
-  () => {
-    // no resolve
-  },
-);
-
-const SuspenseTrigger = lazy(() => nonResolvingPromise);
-
 export const Activity: FC<ActivityProps> = (props) => {
   const { children, isActive: isActiveFromProps = true, inactiveDelay } = props;
 
@@ -47,7 +40,7 @@ export const Activity: FC<ActivityProps> = (props) => {
 
   return (
     <Suspense fallback={null}>
-      {!isActive && <SuspenseTrigger />}
+      <SuspenseTrigger show={!isActive} />
       {children}
     </Suspense>
   );
diff --git a/packages/components/src/components/SuspenseTrigger/SuspenseTrigger.tsx b/packages/components/src/components/SuspenseTrigger/SuspenseTrigger.tsx
@@ -0,0 +1,21 @@
+import { lazy, type ComponentType, type FC } from "react";
+
+export interface SuspenseTriggerProps {
+  show?: boolean;
+}
+
+const nonResolvingPromise = new Promise<{ default: ComponentType<unknown> }>(
+  () => {
+    // no resolve
+  },
+);
+
+const NonResolvingLazy = lazy(() => nonResolvingPromise);
+
+/** @flr-generate all */
+export const SuspenseTrigger: FC<SuspenseTriggerProps> = (props) => {
+  const { show = true } = props;
+  return show ? <NonResolvingLazy /> : null;
+};
+
+export default SuspenseTrigger;
diff --git a/packages/components/src/components/SuspenseTrigger/index.ts b/packages/components/src/components/SuspenseTrigger/index.ts
@@ -0,0 +1,2 @@
+export * from "./SuspenseTrigger";
+export { default } from "./SuspenseTrigger";
diff --git a/packages/components/src/components/SuspenseTrigger/view.ts b/packages/components/src/components/SuspenseTrigger/view.ts
@@ -0,0 +1,10 @@
+/* prettier-ignore */
+/* This file is auto-generated with the remote-components-generator */
+import type { SuspenseTrigger } from "./SuspenseTrigger";
+import type { ViewComponent } from "@/lib/viewComponentContext";
+
+declare global {
+  interface FlowViewComponents {
+    SuspenseTrigger: ViewComponent<typeof SuspenseTrigger>;
+  }
+}
diff --git a/packages/components/src/components/public.ts b/packages/components/src/components/public.ts
@@ -88,6 +88,7 @@ export * from "@/components/SettingsProvider";
 export * from "@/components/Skeleton";
 export * from "@/components/SkeletonText";
 export * from "@/components/Slider";
+export * from "@/components/SuspenseTrigger";
 export * from "@/components/Switch";
 export * from "@/components/Table";
 export * from "@/components/Tabs";
diff --git a/packages/components/src/views/SuspenseTriggerView.tsx b/packages/components/src/views/SuspenseTriggerView.tsx
@@ -0,0 +1,16 @@
+/* prettier-ignore */
+/* This file is auto-generated with the remote-components-generator */
+import React, { type FC, useContext } from "react";
+import {
+  SuspenseTrigger,
+  type SuspenseTriggerProps,
+} from "@/components/SuspenseTrigger";
+import { viewComponentContext } from "@/lib/viewComponentContext/viewComponentContext";
+
+const SuspenseTriggerView: FC<SuspenseTriggerProps> = (props) => {
+  const View =
+    useContext(viewComponentContext)["SuspenseTrigger"] ?? SuspenseTrigger;
+  return <View {...props} />;
+};
+
+export default SuspenseTriggerView;
diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0-alpha.329](https://github.com/mittwald/flow/compare/0.2.0-alpha.328...0.2.0-alpha.329) (2025-07-09)
+
+**Note:** Version bump only for package @mittwald/flow-design-tokens
+
 # [0.2.0-alpha.328](https://github.com/mittwald/flow/compare/0.2.0-alpha.327...0.2.0-alpha.328) (2025-07-09)
 
 **Note:** Version bump only for package @mittwald/flow-design-tokens
diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-design-tokens",
-  "version": "0.2.0-alpha.328",
+  "version": "0.2.0-alpha.329",
   "type": "module",
   "description": "The design tokens used in Flow, mittwald’s design system",
   "homepage": "https://github.com/mittwald/flow/tree/main/packages/design-tokens",
diff --git a/packages/ext-bridge/CHANGELOG.md b/packages/ext-bridge/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0-alpha.329](https://github.com/mittwald/flow/compare/0.2.0-alpha.328...0.2.0-alpha.329) (2025-07-09)
+
+**Note:** Version bump only for package @mittwald/ext-bridge
+
 # [0.2.0-alpha.328](https://github.com/mittwald/flow/compare/0.2.0-alpha.327...0.2.0-alpha.328) (2025-07-09)
 
 **Note:** Version bump only for package @mittwald/ext-bridge
diff --git a/packages/ext-bridge/package.json b/packages/ext-bridge/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/ext-bridge",
-  "version": "0.2.0-alpha.328",
+  "version": "0.2.0-alpha.329",
   "type": "module",
   "description": "Bridge for mStudio embedded frontend extensions",
   "homepage": "https://mittwald.github.io/flow",
diff --git a/packages/mstudio-ext-react-components/CHANGELOG.md b/packages/mstudio-ext-react-components/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0-alpha.329](https://github.com/mittwald/flow/compare/0.2.0-alpha.328...0.2.0-alpha.329) (2025-07-09)
+
+### Features
+
+* **SuspenseTrigger:** added remote suspense loading trigger ([#1722](https://github.com/mittwald/flow/issues/1722)) ([98e19ee](https://github.com/mittwald/flow/commit/98e19eef41cb66a0dcb5a6024eee33f1464f58d0))
+
 # [0.2.0-alpha.328](https://github.com/mittwald/flow/compare/0.2.0-alpha.327...0.2.0-alpha.328) (2025-07-09)
 
 **Note:** Version bump only for package @mittwald/mstudio-ext-react-components
diff --git a/packages/mstudio-ext-react-components/package.json b/packages/mstudio-ext-react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/mstudio-ext-react-components",
-  "version": "0.2.0-alpha.328",
+  "version": "0.2.0-alpha.329",
   "type": "module",
   "description": "React components that can be used by mStudio extension developers",
   "homepage": "https://mittwald.github.io/flow",
diff --git a/packages/mstudio-ext-react-components/src/components/index.ts b/packages/mstudio-ext-react-components/src/components/index.ts
@@ -1,3 +1,4 @@
 export * from "./Title";
 export * from "./Actions";
 export * from "./Breadcrumb";
+export { SuspenseTrigger as LoadingIndicator } from "@mittwald/flow-remote-react-components";
diff --git a/packages/react-tunnel/CHANGELOG.md b/packages/react-tunnel/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0-alpha.329](https://github.com/mittwald/flow/compare/0.2.0-alpha.328...0.2.0-alpha.329) (2025-07-09)
+
+**Note:** Version bump only for package @mittwald/react-tunnel
+
 # [0.2.0-alpha.328](https://github.com/mittwald/flow/compare/0.2.0-alpha.327...0.2.0-alpha.328) (2025-07-09)
 
 **Note:** Version bump only for package @mittwald/react-tunnel
diff --git a/packages/react-tunnel/package.json b/packages/react-tunnel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/react-tunnel",
-  "version": "0.2.0-alpha.328",
+  "version": "0.2.0-alpha.329",
   "type": "module",
   "description": "It's like a Portal – but with React components",
   "keywords": [
diff --git a/packages/remote-core/CHANGELOG.md b/packages/remote-core/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0-alpha.329](https://github.com/mittwald/flow/compare/0.2.0-alpha.328...0.2.0-alpha.329) (2025-07-09)
+
+**Note:** Version bump only for package @mittwald/flow-remote-core
+
 # [0.2.0-alpha.328](https://github.com/mittwald/flow/compare/0.2.0-alpha.327...0.2.0-alpha.328) (2025-07-09)
 
 **Note:** Version bump only for package @mittwald/flow-remote-core
diff --git a/packages/remote-core/package.json b/packages/remote-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-remote-core",
-  "version": "0.2.0-alpha.328",
+  "version": "0.2.0-alpha.329",
   "type": "module",
   "description": "Core functionality to setup a remote/host environment",
   "homepage": "https://mittwald.github.io/flow",
diff --git a/packages/remote-elements/CHANGELOG.md b/packages/remote-elements/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0-alpha.329](https://github.com/mittwald/flow/compare/0.2.0-alpha.328...0.2.0-alpha.329) (2025-07-09)
+
+### Features
+
+* **SuspenseTrigger:** added remote suspense loading trigger ([#1722](https://github.com/mittwald/flow/issues/1722)) ([98e19ee](https://github.com/mittwald/flow/commit/98e19eef41cb66a0dcb5a6024eee33f1464f58d0))
+
 # [0.2.0-alpha.328](https://github.com/mittwald/flow/compare/0.2.0-alpha.327...0.2.0-alpha.328) (2025-07-09)
 
 **Note:** Version bump only for package @mittwald/flow-remote-elements
diff --git a/packages/remote-elements/package.json b/packages/remote-elements/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-remote-elements",
-  "version": "0.2.0-alpha.328",
+  "version": "0.2.0-alpha.329",
   "type": "module",
   "description": "Flow compatible remote elements that can be used in a remote environment",
   "homepage": "https://mittwald.github.io/flow",
diff --git a/packages/remote-elements/src/auto-generated/RemoteSuspenseTriggerElement.ts b/packages/remote-elements/src/auto-generated/RemoteSuspenseTriggerElement.ts
@@ -0,0 +1,33 @@
+/* prettier-ignore */
+/* This file is auto-generated with the remote-components-generator */
+import { FlowRemoteElement } from "@/lib/FlowRemoteElement";
+import type { SuspenseTriggerProps as RemoteSuspenseTriggerElementProps } from "@mittwald/flow-react-components";
+export type { SuspenseTriggerProps as RemoteSuspenseTriggerElementProps } from "@mittwald/flow-react-components";
+
+export class RemoteSuspenseTriggerElement extends FlowRemoteElement<RemoteSuspenseTriggerElementProps> {
+  static override get remoteAttributes() {
+    return ["style"];
+  }
+
+  static override get remoteProperties() {
+    return {
+      show: {},
+    };
+  }
+
+  static override get remoteEvents() {
+    return {};
+  }
+
+  static override get remoteSlots() {
+    return [];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "flr-suspense-trigger": InstanceType<typeof RemoteSuspenseTriggerElement>;
+  }
+}
+
+customElements.define("flr-suspense-trigger", RemoteSuspenseTriggerElement);
diff --git a/packages/remote-elements/src/auto-generated/index.ts b/packages/remote-elements/src/auto-generated/index.ts
@@ -97,6 +97,7 @@ export * from "./RemoteSeparatorElement";
 export * from "./RemoteSkeletonElement";
 export * from "./RemoteSkeletonTextElement";
 export * from "./RemoteSliderElement";
+export * from "./RemoteSuspenseTriggerElement";
 export * from "./RemoteSwitchElement";
 export * from "./RemoteTabElement";
 export * from "./RemoteTabTitleElement";
diff --git a/packages/remote-react-components/CHANGELOG.md b/packages/remote-react-components/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0-alpha.329](https://github.com/mittwald/flow/compare/0.2.0-alpha.328...0.2.0-alpha.329) (2025-07-09)
+
+### Features
+
+* **SuspenseTrigger:** added remote suspense loading trigger ([#1722](https://github.com/mittwald/flow/issues/1722)) ([98e19ee](https://github.com/mittwald/flow/commit/98e19eef41cb66a0dcb5a6024eee33f1464f58d0))
+
 # [0.2.0-alpha.328](https://github.com/mittwald/flow/compare/0.2.0-alpha.327...0.2.0-alpha.328) (2025-07-09)
 
 **Note:** Version bump only for package @mittwald/flow-remote-react-components
diff --git a/packages/remote-react-components/package.json b/packages/remote-react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-remote-react-components",
-  "version": "0.2.0-alpha.328",
+  "version": "0.2.0-alpha.329",
   "type": "module",
   "description": "React components that can be used in a remote environment",
   "homepage": "https://mittwald.github.io/flow",
diff --git a/packages/remote-react-components/src/auto-generated/SuspenseTrigger.ts b/packages/remote-react-components/src/auto-generated/SuspenseTrigger.ts
@@ -0,0 +1,21 @@
+/* prettier-ignore */
+/* This file is auto-generated with the remote-components-generator */
+"use client";
+import createFlowRemoteComponent from "@/components/createFlowRemoteComponent";
+import { RemoteSuspenseTriggerElement } from "@mittwald/flow-remote-elements";
+export { type RemoteSuspenseTriggerElement } from "@mittwald/flow-remote-elements";
+
+export const SuspenseTrigger = createFlowRemoteComponent(
+  "flr-suspense-trigger",
+  "SuspenseTrigger",
+  {
+    clearPropsContext: false,
+  },
+  RemoteSuspenseTriggerElement,
+  {
+    slotProps: {
+      wrapper: "flr-slot-root-wrapper",
+    },
+    eventProps: {},
+  },
+);
diff --git a/packages/remote-react-components/src/auto-generated/index.ts b/packages/remote-react-components/src/auto-generated/index.ts
@@ -97,6 +97,7 @@ export * from "./Separator";
 export * from "./Skeleton";
 export * from "./SkeletonText";
 export * from "./Slider";
+export * from "./SuspenseTrigger";
 export * from "./Switch";
 export * from "./Tab";
 export * from "./TabTitle";
diff --git a/packages/remote-react-components/src/components/RemoteRoot.tsx b/packages/remote-react-components/src/components/RemoteRoot.tsx
diff --git a/packages/remote-react-components/src/tests/SuspenseTrigger.browser.test.remote.tsx b/packages/remote-react-components/src/tests/SuspenseTrigger.browser.test.remote.tsx
diff --git a/packages/remote-react-components/src/tests/SuspenseTrigger.browser.test.tsx b/packages/remote-react-components/src/tests/SuspenseTrigger.browser.test.tsx
diff --git a/packages/remote-react-components/src/tests/helpers.ts b/packages/remote-react-components/src/tests/helpers.ts
diff --git a/packages/remote-react-renderer/CHANGELOG.md b/packages/remote-react-renderer/CHANGELOG.md
diff --git a/packages/remote-react-renderer/package.json b/packages/remote-react-renderer/package.json
diff --git a/packages/remote-react-renderer/src/auto-generated/index.ts b/packages/remote-react-renderer/src/auto-generated/index.ts
diff --git a/packages/stylesheet/CHANGELOG.md b/packages/stylesheet/CHANGELOG.md
diff --git a/packages/stylesheet/package.json b/packages/stylesheet/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -4,5 +4,5 @@`
`4`	`4`	`"packages": [`
`5`	`5`	`"packages/*"`
`6`	`6`	`],`
`7`		`- "version": "0.2.0-alpha.328"`
	`7`	`+ "version": "0.2.0-alpha.329"`
`8`	`8`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@mittwald/flow-react-components",`
`3`		`- "version": "0.2.0-alpha.328",`
	`3`	`+ "version": "0.2.0-alpha.329",`
`4`	`4`	`"type": "module",`
`5`	`5`	`"description": "A React implementation of Flow, mittwald’s design system",`
`6`	`6`	`"homepage": "https://mittwald.github.io/flow",`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export * from "./SuspenseTrigger";`
	`2`	`+export { default } from "./SuspenseTrigger";`