fix(plugin-preview): remove codesandbox because codesandbox-import-utils license is GPL

.changeset/spicy-humans-thank.md

@@ -0,0 +1,5 @@
+---
+'@rspress/plugin-preview': minor
+---
+
+fix(plugin-preview): remove codesandbox because codesandbox-import-utils license is GPL

packages/document/docs/en/plugin/official-plugins/preview.mdx

@@ -99,7 +99,6 @@ This plugin accepts an object parameter of the following type:
 interface PreviewOptions {
   isMobile?: boolean;
   iframePosition?: 'fixed' | 'follow';
-  enableCodesandbox?: boolean;
   defaultRenderMode?: 'pure' | 'preview';
 }
 ```
@@ -122,16 +121,6 @@ The effect of `fixed` mode is as follows:
 
 ![](https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/rspress/demo-preview-mobile-fixed.png)
 
-### enableCodesandbox
-
-**experimental feature** that enables opening demos in Codesandbox. Currently not supported when `iframePosition` is set to `fixed`.
-
-There are still some limitations with this feature:
-
-- You cannot customize sandbox dependencies: Default dependencies will be only `react`, `react-dom`, and `self`. This means you cannot import other dependencies in your demo,
-  and you need to ensure that `self` is published to npm, which is suitable for projects that are modular in nature.
-- You cannot customize files: This means you cannot import other files in your demo.
-
 ### defaultRenderMode
 
 The default mode of rendering internal code blocks that do not have the `pure` or `preview` identifiers declared by users, defaulting to `preview`.

packages/document/docs/zh/plugin/official-plugins/preview.mdx

@@ -101,7 +101,6 @@ export default function App() {
 interface PreviewOptions {
   isMobile?: boolean;
   iframePosition?: 'fixed' | 'follow';
-  enableCodesandbox?: boolean;
   defaultRenderMode?: 'pure' | 'preview';
 }
 ```
@@ -124,16 +123,6 @@ interface PreviewOptions {
 
 ![](https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/rspress/demo-preview-mobile-fixed.png)
 
-### enableCodesandbox
-
-**试验性功能**，支持在 Codesandbox 打开 Demo，目前不支持 iframePosition 为 fixed 的情况。
-
-此功能，仍有一些使用上的限制：
-
-- 不能自定义 sandbox 依赖：默认仅会声明 react、react-dom、self 三个依赖，这意味着你无法在 demo 里引用其他依赖，
-  同时，你需要确保 self 已经发包至 npm，这适用于模块类型的项目。
-- 不能自定义文件：这意味着你无法在 demo 里引用其他文件。
-
 ### defaultRenderMode
 
 支持用户配置没有主动声明 `pure` 或 `preview` 标识符的内部代码块的默认行为，默认为 `preview`。

packages/plugin-preview/package.json

@@ -41,7 +41,6 @@
     "qrcode.react": "^3.1.0",
     "remark-gfm": "3.0.1",
     "rspack-plugin-virtual-module": "0.1.12",
-    "codesandbox": "2.2.3",
     "lodash": "4.17.21"
   },
   "devDependencies": {

packages/plugin-preview/src/codeToDemo.ts

@@ -27,11 +27,10 @@ export const remarkCodeToDemo: Plugin<
       isMobile: boolean;
       getRouteMeta: () => RouteMeta[];
       iframePosition: 'fixed' | 'follow';
-      enableCodesandbox: boolean;
     },
   ],
   Root
-> = ({ isMobile, getRouteMeta, iframePosition, enableCodesandbox }) => {
+> = ({ isMobile, getRouteMeta, iframePosition }) => {
   const routeMeta = getRouteMeta();
 
   return (tree, vfile) => {
@@ -104,11 +103,6 @@ export const remarkCodeToDemo: Plugin<
               name: 'packageName',
               value: json.name,
             },
-            {
-              type: 'mdxJsxAttribute',
-              name: 'enableCodesandbox',
-              value: enableCodesandbox,
-            },
           ],
           children: [
             externalDemoIndex === undefined

packages/plugin-preview/src/index.ts

@@ -28,12 +28,6 @@ export type Options = {
    * @default 'follow'
    */
   iframePosition?: 'fixed' | 'follow';
-  /**
-   * whether the demo can open in codesandbox
-   * @default false
-   * @experimental
-   */
-  enableCodesandbox?: boolean;
   /**
    * determine how to handle a internal code block without meta
    * @default 'preview'
@@ -67,7 +61,6 @@ export const demoMeta: Record<
 export function pluginPreview(options?: Options): RspressPlugin {
   const isMobile = options?.isMobile ?? false;
   const iframePosition = options?.iframePosition ?? 'follow';
-  const enableCodesandbox = options?.enableCodesandbox ?? false;
   const defaultRenderMode = options?.defaultRenderMode ?? 'preview';
 
   const demoRuntimeModule = new RspackVirtualModulePlugin({});
@@ -285,10 +278,7 @@ import Demo from ${JSON.stringify(demoComponentPath)}
     },
     markdown: {
       remarkPlugins: [
-        [
-          remarkCodeToDemo,
-          { isMobile, getRouteMeta, iframePosition, enableCodesandbox },
-        ],
+        [remarkCodeToDemo, { isMobile, getRouteMeta, iframePosition }],
       ],
       globalComponents: [
         join(staticPath, 'global-components', 'Container.tsx'),

packages/plugin-preview/static/global-components/Container.tsx

@@ -1,22 +1,18 @@
 import { useCallback, useState } from 'react';
 import { withBase, useLang, NoSSR } from '@rspress/core/runtime';
-import { getParameters } from 'codesandbox/lib/api/define';
 import MobileOperation from './common/mobile-operation';
 import IconCode from './icons/Code';
-import IconCodesandbox from './icons/Codesandbox';
 
 type ContainerProps = {
   children: React.ReactNode[];
   isMobile: 'true' | 'false';
-  enableCodesandbox: 'true' | 'false';
   url: string;
   content: string;
   packageName: string;
 };
 
 const Container: React.FC<ContainerProps> = props => {
-  const { children, isMobile, url, content, packageName, enableCodesandbox } =
-    props;
+  const { children, isMobile, url } = props;
   const [showCode, setShowCode] = useState(false);
   const lang = useLang();
 
@@ -39,54 +35,6 @@ const Container: React.FC<ContainerProps> = props => {
     setIframeKey(Math.random());
   }, []);
 
-  const gotoCodeSandBox = () => {
-    const sandBoxConfig = {
-      files: {
-        'package.json': {
-          isBinary: false,
-          content: JSON.stringify({
-            dependencies: {
-              react: '18',
-              'react-dom': '18',
-              [packageName]: 'latest',
-            },
-          }),
-        },
-        [`demo.tsx`]: {
-          isBinary: false,
-          content,
-        },
-        [`index.tsx`]: {
-          isBinary: false,
-          content: [
-            `import React from 'react'`,
-            `import ReactDOM from 'react-dom'`,
-            `import Demo from './demo'`,
-            `ReactDOM.render(<Demo />, document.getElementById('root'))`,
-          ].join('\n'),
-        },
-      },
-    };
-
-    // to specific demo file
-    const query = `file=/demo.tsx`;
-    const form = document.createElement('form');
-    form.action = `https://codesandbox.io/api/v1/sandboxes/define?query=${encodeURIComponent(
-      query,
-    )}`;
-    form.target = '_blank';
-    form.method = 'POST';
-    form.style.display = 'none';
-    const field = document.createElement('input');
-    field.name = 'parameters';
-    field.type = 'hidden';
-    field.setAttribute('value', getParameters(sandBoxConfig));
-    form.appendChild(field);
-    document.body.appendChild(form);
-    form.submit();
-    document.body.removeChild(form);
-  };
-
   return (
     <NoSSR>
       <div className="rspress-preview">
@@ -95,13 +43,7 @@ const Container: React.FC<ContainerProps> = props => {
             <div className="rspress-preview-code">{children?.[0]}</div>
             <div className="rspress-preview-device">
               <iframe src={getPageUrl()} key={iframeKey}></iframe>
-              <MobileOperation
-                url={url}
-                refresh={refresh}
-                gotoCodeSandBox={
-                  enableCodesandbox === 'true' ? gotoCodeSandBox : undefined
-                }
-              />
+              <MobileOperation url={url} refresh={refresh} />
             </div>
           </div>
         ) : (
@@ -116,18 +58,6 @@ const Container: React.FC<ContainerProps> = props => {
                 {children?.[1]}
               </div>
               <div className="rspress-preview-operations web">
-                {enableCodesandbox === 'true' && (
-                  <button
-                    onClick={gotoCodeSandBox}
-                    aria-label={
-                      lang === 'zh'
-                        ? '在 Codesandbox 打开'
-                        : 'Open in Codesandbox'
-                    }
-                  >
-                    <IconCodesandbox />
-                  </button>
-                )}
                 <button
                   onClick={toggleCode}
                   aria-label={lang === 'zh' ? '收起代码' : 'Collapse Code'}

packages/plugin-preview/static/global-components/common/mobile-operation.tsx

@@ -4,30 +4,26 @@ import { withBase, useLang } from '@rspress/core/runtime';
 import IconLaunch from '../icons/Launch';
 import IconQrcode from '../icons/Qrcode';
 import IconRefresh from '../icons/Refresh';
-import IconCodesandbox from '../icons/Codesandbox';
 import './index.scss';
 
 const locales = {
   zh: {
     refresh: '刷新页面',
     open: '在新页面打开',
-    codesandbox: '在 Codesandbox 打开',
   },
   en: {
     refresh: 'Refresh',
     open: 'Open in new page',
-    codesandbox: 'Open in Codesandbox',
   },
 };
 
 export default (props: {
   url: string;
   className?: string;
   refresh: () => void;
-  gotoCodeSandBox?: () => void;
 }) => {
   const [showQRCode, setShowQRCode] = useState(false);
-  const { url, className = '', refresh, gotoCodeSandBox } = props;
+  const { url, className = '', refresh } = props;
   const lang = useLang();
   const triggerRef = useRef(null);
   const t = lang === 'zh' ? locales.zh : locales.en;
@@ -90,11 +86,6 @@ export default (props: {
 
   return (
     <div className={`rspress-preview-operations mobile ${className}`}>
-      {gotoCodeSandBox && (
-        <button onClick={gotoCodeSandBox} aria-label={t.codesandbox}>
-          <IconCodesandbox />
-        </button>
-      )}
       <button onClick={refresh} aria-label={t.refresh}>
         <IconRefresh />
       </button>