function add(a: number, b: number): number {
  return a + b;
}

const PI: number = 3.14;

console.log(add(2, 3)); // 5
console.log(PI); // 3.14

// main.ts

import('./math').then(({
  add,
  PI,
}) => {
  console.log(add(2, 3)); // 5
  console.log(PI); // 3.14
});

// math.ts

export function add(
  a: number,
  b: number,
): number {
  return a + b;
}

export const PI: number = 3.14;

// main.ts

import { add, PI } from "./math";

console.log(add(2, 3)); // 출력: 5
console.log(PI); // 출력: 3.14

// math.ts

export function add(
  a: number,
  b: number,
): number {
  return a + b;
}

export const PI: number = 3.14;

import { init } from "@module-federation/enhanced/runtime";
import React from "react";
import ReactDOM from "react-dom";

init({
  name: "host",
  remotes: [],
  shared: {
    react: {
      version: "18.3.1",
      lib: () => React,
      shareConfig: {
        singleton: true,
        requiredVersion: "^18.3.1",
      },
    },
    "react-dom": {
      version: "18.3.1",
      lib: () => ReactDOM,
      shareConfig: {
        singleton: true,
        requiredVersion: "^18.3.1",
      },
    },
  },
});

import("./bootstrap");

import { registerRemotes } from "@module-federation/enhanced/runtime";
import App from "./App";

/**
 * register remotes
 */
registerRemotes([
  {
    name: "hashtag_flea_market",
    entry: "https://hashtag-flea-market.alpha.karrotwebview.com/remoteEntry.js",
    // entry: "http://localhost:4001/remoteEntry.js",
    type: "module",
  },
  {
    name: "hashtag_community_agora",
    entry:
      "https://hashtag-community-agora.alpha.karrotwebview.com/remoteEntry.js",
    // entry: "http://localhost:4002/remoteEntry.js",
    type: "var",
  },
]);

...

import { loadRemote } from "@module-federation/enhanced/runtime";
import { type ElementType, useEffect, useState } from "react";

export function useDynamicImport({ module, scope }: { module: string; scope: string; }) {
  const [component, setComponent] = useState<ElementType | null>(null);

  useEffect(() => {
    if (!module || !scope) return;

    const loadComponent = async () => {
      try {
        const { default: Component } = (await loadRemote(
          `${scope}/${module}`,
        )) as {
          default: ElementType;
        };
        setComponent(() => Component);
      } catch (error) {
        console.error(`Error loading remote module ${scope}/${module}:`, error);
      }
    };

    loadComponent();
  }, [module, scope]);

  return component;
}

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "*": ["./@mf-types/*"]
    }
  },
}

// tsconfig.json
{
  "include": ["./@mf-types/*"]
}

pnpm add @module-federation/vite -D

const mfConfig = {
  name: "hashtag_flea_market",
  filename: "remoteEntry.js",
  manifest: true,
  exposes: {
    "./FeedCardFlea": "./src/components/FeedCardFlea.tsx",
  },
  shared: {
    react: {
      singleton: true,
      requiredVersion: "18.3.1",
    },
    "react-dom": {
      singleton: true,
      requiredVersion: "18.3.1",
    },
    "comma-number": {
      version: "2.1.0",
    },
    "react-lazy-load-image-component": {
      version: "1.6.2",
    },
    "@seed-design/design-token": {
      version: "1.0.3",
    },
    // ERR_REQUIRE_ESM
    // "@daangn/react-monochrome-icon": {
    //   version: "0.0.11",
    // },
    // ERR_PACKAGE_PATH_NOT_EXPORTED (patch)
    "react-intersection-observer": {
      version: "9.13.1",
    },
    // ERR_PACKAGE_PATH_NOT_EXPORTED (patch)
    "@daangn/sprout-components-layout": {
      version: "0.0.0-main-20240404063637",
    },
    // ERR_PACKAGE_PATH_NOT_EXPORTED (patch)
    "@daangn/sprout-components-text": {
      version: "0.0.0-main-20240405062222",
    },
  },
};

import { federation } from "@module-federation/vite";
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import checker from "vite-plugin-checker";
import topLevelAwait from "vite-plugin-top-level-await";

export default defineConfig({
  build: {
    modulePreload: false,
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
  },
  base: process.env.BASE_URL ?? "http://localhost:4001",
  server: {
    port: 4001,
  },
  preview: {
    port: 4001,
  },
  plugins: [
    process.env.STORYBOOK !== "true" && federation({ ...mfConfig }),
    react(),
    vanillaExtractPlugin({
      unstable_mode: "transform",
    }),
    checker({
      typescript: true,
    }),
    topLevelAwait(),
  ],
});

pnpm add @module-federation/enhanced -D

const mfConfig = {
  name: "hashtag_community_agora",
  filename: "remoteEntry.js",
  exposes: {
    "./FeedCardAgora": "./src/components/FeedCardAgora.tsx",
  },
  shared: {
    react: {
      singleton: true,
      requiredVersion: "18.3.1",
    },
    "react-dom": {
      singleton: true,
      requiredVersion: "18.3.1",
    },
    "@daangn/react-monochrome-icon": {
      version: "0.0.11",
    },
    "@daangn/sprout-components-layout": {
      version: "0.0.0-main-20240404063637",
    },
    "@daangn/sprout-components-text": {
      version: "0.0.0-main-20240405062222",
    },
    "@seed-design/design-token": {
      version: "1.0.3",
    },
    "comma-number": {
      version: "2.1.0",
    },
    "react-intersection-observer": {
      version: "9.13.1",
    },
    "react-lazy-load-image-component": {
      version: "1.6.2",
    },
  },
};

import { ModuleFederationPlugin } from "@module-federation/enhanced/rspack";
import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";
import { VanillaExtractPlugin } from "@vanilla-extract/webpack-plugin";

export default defineConfig({
  html: {
    template: "./index.html",
  },
  source: {
    entry: {
      index: "./src/entry.tsx",
    },
  },
  dev: {
    assetPrefix: "http://localhost:4002",
  },
  server: {
    port: 4002,
  },
  plugins: [
    pluginReact({
      reactRefreshOptions: {
        exclude: [/node_modules/, /\.css\.ts$/],
      },
    }),
  ],
  tools: {
    rspack: {
      plugins: [
        new VanillaExtractPlugin({
          externals: ["@seed-design"],
        }),
        process.env.STORYBOOK !== "true" &&
          new ModuleFederationPlugin({ ...mfConfig }),
      ],
    },
  },
  output: {
    overrideBrowserslist: ["chrome >= 64", "ios_saf >= 14"],
    assetPrefix: process.env.BASE_URL ?? "http://localhost:4002",
    filenameHash: true,
  },
});

pnpm add @module-federation/enhanced -D

const mfConfig = {
  name: "hashtag_webview",
  remotes: {
    hashtag_community_agora: process.env.HASHTAG_COMMUNITY_AGORA_URL
      ? `hashtag_community_agora@${process.env.HASHTAG_COMMUNITY_AGORA_URL}/mf-manifest.json`
      : "hashtag_community_agora@https://hashtag-community-agora.alpha.karrotwebview.com/mf-manifest.json",
  },
  shared: {
    react: {
      singleton: true,
      requiredVersion: "18.3.1",
    },
    "react-dom": {
      singleton: true,
      requiredVersion: "18.3.1",
    },
    "@daangn/react-monochrome-icon": {
      version: "0.0.11",
    },
    "@daangn/sprout-components-layout": {
      version: "0.0.0-main-20240404063637",
    },
    "@daangn/sprout-components-text": {
      version: "0.0.0-main-20240405062222",
    },
    "@seed-design/design-token": {
      version: "1.0.3",
    },
    "comma-number": {
      version: "2.1.0",
    },
    "react-intersection-observer": {
      version: "9.13.1",
    },
    "react-lazy-load-image-component": {
      version: "1.6.2",
    },
  },
};

import { ModuleFederationPlugin } from "@module-federation/enhanced/rspack";
import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";
import { VanillaExtractPlugin } from "@vanilla-extract/webpack-plugin";

export default defineConfig({
  html: {
    template: "./index.html",
  },
  server: {
    port: 3000,
  },
  source: {
    entry: {
      index: "./src/entry.tsx",
    },
    define: {
      "import.meta.env.VITE_DEV_AUTH_TOKEN": JSON.stringify(
        import.meta.env.VITE_DEV_AUTH_TOKEN,
      ),
      "import.meta.env.VITE_SENTRY_DSN": JSON.stringify(
        import.meta.env.VITE_SENTRY_DSN,
      ),
    },
  },
  plugins: [
    pluginReact({
      reactRefreshOptions: {
        exclude: [/node_modules/, /\.css\.ts$/],
      },
    }),
  ],
  tools: {
    rspack: {
      plugins: [
        new VanillaExtractPlugin({
          externals: ["@seed-design"],
        }),
        process.env.STORYBOOK !== "true" &&
          new ModuleFederationPlugin({
            ...mfConfig,
            runtimePlugins: ["./src/mfPlugins"],
          }),
      ],
    },
  },
  output: {
    overrideBrowserslist: ["chrome >= 64", "ios_saf >= 14"],
  },
});

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "lib": ["ESNext", "DOM"],
    "esModuleInterop": true,
    "jsx": "preserve",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "paths": {
      "*": ["./@mf-types/*"]
    }
  }
}

import { registerRemotes } from "@module-federation/enhanced/runtime";

/**
 * register remotes
 */
registerRemotes([
  {
    name: "hashtag_flea_market",
    entry:
      stage === "production"
        ? "https://hashtag-flea-market.karrotwebview.com/mf-manifest.json"
        : "https://hashtag-flea-market.alpha.karrotwebview.com/mf-manifest.json",
    type: "module",
  },
]);

import { useDynamicImport } from "../hooks/useDynamicImport";

const CardList: React.FC<CardListProps> = ({
  ...
}) => {
  const FeedCardFlea = useDynamicImport({
    module: "FeedCardFlea",
    scope: "hashtag_flea_market",
  });

  ...

  return (
    <>...</>
  );
};

export default CardList;

import { loadRemote } from "@module-federation/enhanced/runtime";
import * as Sentry from "@sentry/react";
import { type ElementType, useEffect, useState } from "react";

interface DynamicImportProps {
  module: string;
  scope: string;
}

export function useDynamicImport({ module, scope }: DynamicImportProps) {
  const [component, setComponent] = useState<ElementType | null>(null);

  useEffect(() => {
    if (!module || !scope) return;

    const loadComponent = async () => {
      try {
        const { default: Component } = (await loadRemote(
          `${scope}/${module}`,
        )) as {
          default: ElementType;
        };
        setComponent(() => Component);
      } catch (error) {
        Sentry.captureException(error);
      }
    };

    loadComponent();
  }, [module, scope]);

  return component;
}

import { ErrorBoundary } from "@sentry/react";
import { Suspense, lazy } from "react";

const FeedCardAgora = lazy(
  () => import("hashtag_community_agora/FeedCardAgora"),
);

const FeedCardAgoraContainer: React.FC<FeedCardAgoraContainerProps> = ({
  ...
}) => {
  ...

  return (
    <ErrorBoundary>
      <Suspense fallback={null}>
        <FeedCardAgora
          ...
        />
      </Suspense>
    </ErrorBoundary>
  );
};

export default FeedCardAgoraContainer;

import { defineConfig } from "@stackflow/config";
import { feedActivityLoader } from "../activities/FeedActivity.loader";
import { myFollowActivityLoader } from "../activities/MyFollowActivity.loader";

export const stackflowTheme = /iphone|ipad|ipod/i.test(
  window.navigator.userAgent.toLowerCase(),
)
  ? "cupertino"
  : "android";

export const config = defineConfig({
  activities: [
    {
      name: "FeedActivity",
      path: "/v1/feed",
      loader: feedActivityLoader,
    },
    {
      name: "MyFollowActivity",
      path: "/v1/my-follow",
      loader: myFollowActivityLoader,
    },
  ],
  transitionDuration: stackflowTheme === "cupertino" ? 270 : 350,
});

import { IconChevronLeftLine } from "@daangn/react-monochrome-icon";
import { vars } from "@seed-design/design-token";
import { basicUIPlugin } from "@stackflow/plugin-basic-ui";
import { historySyncPlugin } from "@stackflow/plugin-history-sync";
import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
import { stackDepthChangePlugin } from "@stackflow/plugin-stack-depth-change";
import { stackflow } from "@stackflow/react/future";
import React from "react";

import FeedActivity from "../activities/FeedActivity";
import MyFollowActivity from "../activities/MyFollowActivity";
import { bridge } from "../bridge";
import { config, stackflowTheme } from "./stackflow.config";

export const { Stack } = stackflow({
  config,
  components: {
    FeedActivity,
    MyFollowActivity,
  },
  plugins: [
    basicRendererPlugin(),
    basicUIPlugin({
      appBar: {
        borderColor:
          stackflowTheme === "cupertino"
            ? vars.$semantic.color.divider3
            : vars.$semantic.color.divider2,
        closeButton: {
          onClick() {
            bridge.closeRouter({});
          },
          renderIcon: () => (
            <IconChevronLeftLine height="1.5rem" width="1.5rem" />
          ),
        },
        iconColor: vars.$semantic.color.inkText,
        textColor: vars.$semantic.color.inkText,
      },
      backgroundColor: vars.$semantic.color.paperDefault,
      theme: stackflowTheme,
    }),
    historySyncPlugin({
      config,
      fallbackActivity: () => "FeedActivity",
    }),
    stackDepthChangePlugin({
      onDepthChanged({ depth }) {
        bridge.styleCurrentRouter({
          router: {
            backSwipable: depth === 1,
            enableSafeAreaInsets: false,
            navbar: false,
            scrollable: false,
          },
        });
      },
      onInit({ depth }) {
        bridge.styleCurrentRouter({
          router: {
            backSwipable: depth === 1,
            enableSafeAreaInsets: false,
            navbar: false,
            scrollable: false,
          },
        });
      },
    }),
  ],
});

pnpm add @module-federation/enhanced -D

const mfConfig = {
  name: "hashtag_my_follow",
  filename: "remoteEntry.js",
  exposes: {
    "./MyFollowActivity": "./src/activities/MyFollowActivity.tsx",
    "./MyFollowActivity.loader": "./src/activities/MyFollowActivity.loader.ts",
  },
  shared: {
    react: {
      singleton: true,
      requiredVersion: "18.3.1",
    },
    "react-dom": {
      singleton: true,
      requiredVersion: "18.3.1",
    },
    "@stackflow/config": {
      requiredVersion: "1.2.0",
    },
    "@stackflow/core": {
      requiredVersion: "1.1.0",
    },
    "@stackflow/plugin-basic-ui": {
      requiredVersion: "1.10.0",
    },
    "@stackflow/plugin-history-sync": {
      requiredVersion: "1.7.0",
    },
    "@stackflow/plugin-renderer-basic": {
      requiredVersion: "1.1.13",
    },
    "@stackflow/plugin-stack-depth-change": {
      requiredVersion: "1.1.5",
    },
    "@stackflow/react": {
      requiredVersion: "1.4.0",
    },
    "@stackflow/react/future": {
      requiredVersion: "1.4.0",
    },
    "@daangn/react-monochrome-icon": {
      version: "0.0.11",
    },
    "@daangn/sprout-components-layout": {
      version: "0.0.0-main-20240404063637",
    },
    "@daangn/sprout-components-text": {
      version: "0.0.0-main-20240405062222",
    },
    "@seed-design/design-token": {
      version: "1.0.3",
    },
  },
};

import { ModuleFederationPlugin } from "@module-federation/enhanced/rspack";
import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";
import { VanillaExtractPlugin } from "@vanilla-extract/webpack-plugin";

export default defineConfig({
  html: {
    template: "./index.html",
  },
  server: {
    port: 3000,
  },
  source: {
    entry: {
      index: "./src/entry.tsx",
    },
    define: {
      "import.meta.env.VITE_DEV_AUTH_TOKEN": JSON.stringify(
        import.meta.env.VITE_DEV_AUTH_TOKEN,
      ),
      "import.meta.env.VITE_SENTRY_DSN": JSON.stringify(
        import.meta.env.VITE_SENTRY_DSN,
      ),
    },
  },
  plugins: [
    pluginReact({
      reactRefreshOptions: {
        exclude: [/node_modules/, /\.css\.ts$/],
      },
    }),
  ],
  tools: {
    rspack: {
      plugins: [
        new VanillaExtractPlugin({
          externals: ["@seed-design"],
        }),
        process.env.STORYBOOK !== "true" &&
          new ModuleFederationPlugin({ ...mfConfig }),
      ],
    },
  },
  dev: {
    assetPrefix: "http://localhost:3000",
  },
  output: {
    overrideBrowserslist: ["chrome >= 64", "ios_saf >= 14"],
    assetPrefix: process.env.BASE_URL ?? "http://localhost:3000",
    filenameHash: true,
  },
});

const mfConfig = {
  name: "hashtag_webview",
  remotes: {
    hashtag_community_agora: process.env.HASHTAG_COMMUNITY_AGORA_URL
      ? `hashtag_community_agora@${process.env.HASHTAG_COMMUNITY_AGORA_URL}/mf-manifest.json`
      : "hashtag_community_agora@https://hashtag-community-agora.alpha.karrotwebview.com/mf-manifest.json",
    hashtag_my_follow: process.env.HASHTAG_MY_FOLLOW_URL
      ? `hashtag_my_follow@${process.env.HASHTAG_MY_FOLLOW_URL}/mf-manifest.json`
      : "hashtag_my_follow@https://hashtag-my-follow.alpha.karrotwebview.com/mf-manifest.json",
  },
  shared: {
    ...
    "@stackflow/config": {
      requiredVersion: "1.2.0",
    },
    "@stackflow/core": {
      requiredVersion: "1.1.0",
    },
    "@stackflow/plugin-basic-ui": {
      requiredVersion: "1.10.0",
    },
    "@stackflow/plugin-history-sync": {
      requiredVersion: "1.7.0",
    },
    "@stackflow/plugin-renderer-basic": {
      requiredVersion: "1.1.13",
    },
    "@stackflow/plugin-stack-depth-change": {
      requiredVersion: "1.1.5",
    },
    "@stackflow/react": {
      requiredVersion: "1.4.0",
    },
    "@stackflow/react/future": {
      requiredVersion: "1.4.0",
    },
  },
};

import { type ActivityLoaderArgs, defineConfig } from "@stackflow/config";
import { feedActivityLoader } from "../activities/FeedActivity.loader";

export const stackflowTheme = /iphone|ipad|ipod/i.test(
  window.navigator.userAgent.toLowerCase(),
)
  ? "cupertino"
  : "android";

export const config = defineConfig({
  activities: [
    {
      name: "FeedActivity",
      path: "/v1/feed",
      loader: feedActivityLoader,
    },
    {
      name: "MyFollowActivity",
      path: "/v1/my-follow",
      loader: ({ params }: ActivityLoaderArgs<"MyFollowActivity">) =>
        import("hashtag_my_follow/MyFollowActivity.loader").then((module) =>
          module.myFollowActivityLoader({ params, config }),
        ),
    },
  ],
  transitionDuration: stackflowTheme === "cupertino" ? 270 : 350,
});

import { IconChevronLeftLine } from "@daangn/react-monochrome-icon";
import { vars } from "@seed-design/design-token";
import { basicUIPlugin } from "@stackflow/plugin-basic-ui";
import { historySyncPlugin } from "@stackflow/plugin-history-sync";
import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic";
import { stackDepthChangePlugin } from "@stackflow/plugin-stack-depth-change";
import { stackflow } from "@stackflow/react/future";
import React from "react";

import FeedActivity from "../activities/FeedActivity";
import { bridge } from "../bridge";
import { config, stackflowTheme } from "./stackflow.config";

export const { Stack } = stackflow({
  config,
  components: {
    FeedActivity,
    MyFollowActivity: React.lazy(
      () => import("hashtag_my_follow/MyFollowActivity"),
    ),
  },
  ...
});