@plasmicapp/cli 0.1.162

package/src/__tests__/code-utils-spec.ts

@@ -0,0 +1,881 @@
+import {
+  formatScript,
+  mkFixImportContext,
+  replaceImports,
+  tsxToJsx,
+} from "../utils/code-utils";
+import { readFileText } from "../utils/file-utils";
+
+describe("code-utils", function () {
+  it("typescript to javascript should work", function () {
+    const code = `
+// This is a skeleton starter React component generated by Plasmic.
+// @jsx helper
+import React, { ReactNode } from "react";
+import {
+    PlasmicCodeSandboxDialogContent__RenderHelper,
+    PlasmicCodeSandboxDialogContent__VariantsArgs,
+    PlasmicCodeSandboxDialogContent__ArgsType,
+    PlasmicCodeSandboxDialogContent__VariantsType,
+    PlasmicCodeSandboxDialogContent__TriggerStateType,
+} from "./PP__CodeSandboxDialogContent"; // plasmic-import: f68b061e-0f85-41c1-8707-3ba9f634f1af/render
+
+import Button from "../Button"; // plasmic-import: 4SYnkOQLd5/component
+import { PlasmicButton__VariantsArgs } from "../../../plasmic/PlasmicButton"; // plasmic-import: 4SYnkOQLd5/renderer
+import Dropdown from "./Dropdown"; // plasmic-import: a200b79f-288d-4306-be99-e5fd221b8ba6/component
+import { PlasmicDropdown__VariantsArgs } from "./PP__Dropdown"; // plasmic-import: a200b79f-288d-4306-be99-e5fd221b8ba6/renderer
+import DropdownItem from "./DropdownItem"; // plasmic-import: f4c2f0bb-8dce-49c7-a106-65abe9e70e51/component
+import { PlasmicDropdownItem__VariantsArgs } from "./PP__DropdownItem"; // plasmic-import: f4c2f0bb-8dce-49c7-a106-65abe9e70e51/renderer
+import IconButton from "../../IconButton"; // plasmic-import: cfe92-5RW/component
+import { PlasmicIconButton__VariantsArgs } from "../../../plasmic/PlasmicIconButton"; // plasmic-import: cfe92-5RW/renderer
+import { hasVariant, DefaultFlexStack, FlexStack } from "@plasmicapp/react-web";
+import { StudioCtx } from "../../../StudioCtx";
+import { ensure, asOne, isValidEmail } from "../../../../common";
+import { CodeSandboxInfo } from "../../../../shared/db-json-blobs";
+import { createSandboxUrl } from "../../../../codesandbox/url";
+import { Tooltip } from "antd";
+import { observer } from "mobx-react-lite";
+
+interface CodeSandboxDialogContentProps {
+    sc: StudioCtx;
+    onClose: () => void;
+
+    // Required className prop is used for positioning this component
+    className?: string;
+}
+
+function _CodeSandboxDialogContent(props: CodeSandboxDialogContentProps) {
+    const sc = props.sc;
+    const [inviting, setInviting] = React.useState(false);
+    const [submitting, setSubmitting] = React.useState(false);
+    const [email, setEmail] = React.useState("");
+    const [sandboxInfo, setSandboxInfo] = React.useState<
+    CodeSandboxInfo | undefined
+    >(asOne(sc.siteInfo.codeSandboxInfos));
+    const [codeScheme, setCodeScheme] = React.useState<"blackbox" | "direct">(
+    sandboxInfo ? sandboxInfo.code.scheme : "blackbox"
+    );
+
+    const openSandboxPopup = (sandboxId: string) => {
+    const url = createSandboxUrl({ id: sandboxId });
+    if (sc.popupCodesandboxWindow && !sc.popupCodesandboxWindow.closed) {
+        sc.popupCodesandboxWindow.location.href = url;
+        sc.popupCodesandboxWindow.focus();
+    } else {
+        sc.popupCodesandboxWindow = window.open(url);
+    }
+    };
+
+    const onCreateOrUpdateSandbox = async () => {
+    setSubmitting(true);
+    const { id } = await sc.appCtx.api.publishCodeSandbox(
+        sc.siteInfo.id,
+        sandboxInfo
+        ? { ...sandboxInfo }
+        : { code: { lang: "ts", scheme: codeScheme } }
+    );
+
+    await sc.refreshSiteInfo();
+    setSubmitting(false);
+    setSandboxInfo((sc.siteInfo.codeSandboxInfos || []).find(x => x.id === id));
+    openSandboxPopup(id);
+    };
+
+    const onInvite = () => {
+    setInviting(true);
+    sc.appCtx.api
+        .shareCodeSandbox(sc.siteInfo.id, ensure(sandboxInfo).id, email)
+        .then(() => {
+        setInviting(false);
+        });
+    setEmail("");
+    };
+
+    const onSwitchCodeScheme = (scheme: "blackbox" | "direct") => {
+    setCodeScheme(scheme);
+    setSandboxInfo(
+        (sc.siteInfo.codeSandboxInfos || []).find(x => x.code.scheme === scheme)
+    );
+    };
+
+    const onDeleteSandbox = async () => {
+    setSubmitting(true);
+    await sc.appCtx.api.detachCodeSandbox(
+        sc.siteInfo.id,
+        ensure(sandboxInfo).id
+    );
+
+    await sc.refreshSiteInfo();
+    setSubmitting(false);
+    setSandboxInfo(undefined);
+    };
+
+    const variants: PlasmicCodeSandboxDialogContent__VariantsArgs = {
+    state: inviting ? "inviting" : submitting ? "submitting" : undefined,
+    hasSandbox: !!sandboxInfo ? "yes" : "no",
+    invalidEmail: !isValidEmail(email) ? "yes" : undefined,
+    canEdit: !sc.canEditProject() ? "no" : undefined,
+    scheme: codeScheme === "direct" ? "direct" : "blackbox"
+    };
+
+    const args: PlasmicCodeSandboxDialogContent__ArgsType = {};
+
+    // The following code block is fully managed by Plasmic. Don't edit - it will
+    // be overwritten after every "plasmic sync".
+    // plasmic-managed-start
+
+    const rh = new PlasmicCodeSandboxDialogContent__RenderHelper(
+    variants,
+    args,
+    props.className
+    );
+
+    // plasmic-managed-end
+
+    // plasmic-managed-jsx/5487
+    return (
+    <div className={rh.clsRoot()}>
+        <div className={rh.clsF7050e55$eea1$41ab$9682$db9ad8d08cb1()}>
+        <div className={rh.cls70032be2$1620$48b3$ba29$c027e30b7907()}>
+            CodeSandbox
+        </div>
+        <DefaultFlexStack className={rh.cls8oFaZaiIX()}>
+            {rh.showOpenButton() && (
+            <Button
+                startIcon={
+                <img className={rh.cls$qzB2zcT8()} {...rh.props$qzB2zcT8()} />
+                }
+                {...rh.propsOpenButton()}
+                onClick={() => openSandboxPopup(ensure(sandboxInfo).id)}
+            >
+                Open in new tab
+            </Button>
+            )}
+
+            <img
+            className={rh.clsCloseButton()}
+            {...rh.propsCloseButton()}
+            onClick={props.onClose}
+            />
+        </DefaultFlexStack>
+        </div>
+        <div className={rh.cls43fcb29a$5286$4b5a$8593$49b737cdd7b0()} />
+        <DefaultFlexStack className={rh.clsWL8ypAgbq()}>
+        <div className={rh.clsTmQlfUKwS()}>Code scheme</div>
+        <Dropdown
+            {...rh.propsCodeSchemeDropdown()}
+            selectedValue={rh.childStrCodeSchemeDropdown()}
+            items={
+            <>
+                <DropdownItem
+                {...rh.propsBlackBoxOption()}
+                value={"Blackbox Library"}
+                selected={codeScheme === "blackbox"}
+                onSelected={() => onSwitchCodeScheme("blackbox")}
+                />
+
+                <DropdownItem
+                {...rh.propsPlainReactOption()}
+                value={"Direct Edit"}
+                selected={codeScheme === "direct"}
+                onSelected={() => onSwitchCodeScheme("direct")}
+                />
+            </>
+            }
+        />
+        </DefaultFlexStack>
+        <div className={rh.clsH1u3gI8vG()}>{rh.childStrH1u3gI8vG()}</div>
+        {rh.showCreateHint() && (
+        <div className={rh.clsCreateHint()}>
+            {rh.showCreateHint2() && (
+            <div className={rh.clsCreateHint2()}>
+                {rh.childStrCreateHint2()}
+            </div>
+            )}
+        </div>
+        )}
+
+        {rh.showCreateButton() && (
+        <Button
+            startIcon={
+            <img className={rh.clsGvtJoBerl()} {...rh.propsGvtJoBerl()} />
+            }
+            {...rh.propsCreateButton()}
+            onClick={onCreateOrUpdateSandbox}
+        >
+            {rh.childStrCreateButton()}
+        </Button>
+        )}
+
+        {rh.showUpdateHint() && (
+        <div className={rh.clsUpdateHint()}>
+            <div className={rh.clsCreateHint22()}>
+            {rh.childStrCreateHint22()}
+            </div>
+        </div>
+        )}
+
+        {rh.showNmdHeAjEx() && (
+        <DefaultFlexStack className={rh.clsNmdHeAjEx()}>
+            <input
+            className={rh.clsEmail()}
+            {...rh.propsEmail()}
+            onChange={e => setEmail(e.target.value)}
+            value={email}
+            />
+
+            <Button {...rh.propsInviteButton()} onClick={onInvite}>
+            {rh.childStrInviteButton()}
+            </Button>
+            <div className={rh.clsZG$NA1rCh()} />
+            {rh.show$kdxH_yN6() && (
+            <div className={rh.cls$kdxH_yN6()}>
+                {rh.showUpdateButton() && (
+                <Button
+                    startIcon={
+                    rh.showL4QcXYzNZ() && (
+                        <img
+                        className={rh.clsL4QcXYzNZ()}
+                        {...rh.propsL4QcXYzNZ()}
+                        />
+                    )
+                    }
+                    {...rh.propsUpdateButton()}
+                    onClick={onCreateOrUpdateSandbox}
+                >
+                    {rh.childStrUpdateButton()}
+                </Button>
+                )}
+
+                {rh.showDeleteButton() && (
+                <Tooltip title="Detach this code sandbox. You can still access it via codesandbox.io, but Plasmic will start using a new sandbox instead.">
+                    <IconButton
+                    {...rh.propsDeleteButton()}
+                    onClick={onDeleteSandbox}
+                    />
+                </Tooltip>
+                )}
+            </div>
+            )}
+        </DefaultFlexStack>
+        )}
+    </div>
+    );
+}
+
+export const CodeSandboxDialogContent = observer(
+    _CodeSandboxDialogContent as React.FunctionComponent<
+    CodeSandboxDialogContentProps
+    >
+);`;
+    expect(formatScript(tsxToJsx(code), process.cwd()).trim()).toEqual(
+      `
+// This is a skeleton starter React component generated by Plasmic.
+// @jsx helper
+import React from "react";
+import { PlasmicCodeSandboxDialogContent__RenderHelper } from "./PP__CodeSandboxDialogContent"; // plasmic-import: f68b061e-0f85-41c1-8707-3ba9f634f1af/render
+import Button from "../Button"; // plasmic-import: 4SYnkOQLd5/component
+import Dropdown from "./Dropdown"; // plasmic-import: a200b79f-288d-4306-be99-e5fd221b8ba6/component
+import DropdownItem from "./DropdownItem"; // plasmic-import: f4c2f0bb-8dce-49c7-a106-65abe9e70e51/component
+import IconButton from "../../IconButton"; // plasmic-import: cfe92-5RW/component
+import { DefaultFlexStack } from "@plasmicapp/react-web";
+import { ensure, asOne, isValidEmail } from "../../../../common";
+import { createSandboxUrl } from "../../../../codesandbox/url";
+import { Tooltip } from "antd";
+import { observer } from "mobx-react-lite";
+
+function _CodeSandboxDialogContent(props) {
+  const sc = props.sc;
+  const [inviting, setInviting] = React.useState(false);
+  const [submitting, setSubmitting] = React.useState(false);
+  const [email, setEmail] = React.useState("");
+  const [sandboxInfo, setSandboxInfo] = React.useState(
+    asOne(sc.siteInfo.codeSandboxInfos)
+  );
+  const [codeScheme, setCodeScheme] = React.useState(
+    sandboxInfo ? sandboxInfo.code.scheme : "blackbox"
+  );
+  const openSandboxPopup = (sandboxId) => {
+    const url = createSandboxUrl({ id: sandboxId });
+    if (sc.popupCodesandboxWindow && !sc.popupCodesandboxWindow.closed) {
+      sc.popupCodesandboxWindow.location.href = url;
+      sc.popupCodesandboxWindow.focus();
+    } else {
+      sc.popupCodesandboxWindow = window.open(url);
+    }
+  };
+  const onCreateOrUpdateSandbox = async () => {
+    setSubmitting(true);
+    const { id } = await sc.appCtx.api.publishCodeSandbox(
+      sc.siteInfo.id,
+      sandboxInfo
+        ? { ...sandboxInfo }
+        : { code: { lang: "ts", scheme: codeScheme } }
+    );
+    await sc.refreshSiteInfo();
+    setSubmitting(false);
+    setSandboxInfo(
+      (sc.siteInfo.codeSandboxInfos || []).find((x) => x.id === id)
+    );
+    openSandboxPopup(id);
+  };
+  const onInvite = () => {
+    setInviting(true);
+    sc.appCtx.api
+      .shareCodeSandbox(sc.siteInfo.id, ensure(sandboxInfo).id, email)
+      .then(() => {
+        setInviting(false);
+      });
+    setEmail("");
+  };
+  const onSwitchCodeScheme = (scheme) => {
+    setCodeScheme(scheme);
+    setSandboxInfo(
+      (sc.siteInfo.codeSandboxInfos || []).find((x) => x.code.scheme === scheme)
+    );
+  };
+  const onDeleteSandbox = async () => {
+    setSubmitting(true);
+    await sc.appCtx.api.detachCodeSandbox(
+      sc.siteInfo.id,
+      ensure(sandboxInfo).id
+    );
+    await sc.refreshSiteInfo();
+    setSubmitting(false);
+    setSandboxInfo(undefined);
+  };
+  const variants = {
+    state: inviting ? "inviting" : submitting ? "submitting" : undefined,
+    hasSandbox: !!sandboxInfo ? "yes" : "no",
+    invalidEmail: !isValidEmail(email) ? "yes" : undefined,
+    canEdit: !sc.canEditProject() ? "no" : undefined,
+    scheme: codeScheme === "direct" ? "direct" : "blackbox",
+  };
+
+  const args = {};
+  // The following code block is fully managed by Plasmic. Don't edit - it will
+  // be overwritten after every "plasmic sync".
+  // plasmic-managed-start
+  const rh = new PlasmicCodeSandboxDialogContent__RenderHelper(
+    variants,
+    args,
+    props.className
+  );
+  // plasmic-managed-end
+  // plasmic-managed-jsx/5487
+  return (
+    <div className={rh.clsRoot()}>
+      <div className={rh.clsF7050e55$eea1$41ab$9682$db9ad8d08cb1()}>
+        <div className={rh.cls70032be2$1620$48b3$ba29$c027e30b7907()}>
+          CodeSandbox
+        </div>
+        <DefaultFlexStack className={rh.cls8oFaZaiIX()}>
+          {rh.showOpenButton() && (
+            <Button
+              startIcon={
+                <img className={rh.cls$qzB2zcT8()} {...rh.props$qzB2zcT8()} />
+              }
+              {...rh.propsOpenButton()}
+              onClick={() => openSandboxPopup(ensure(sandboxInfo).id)}
+            >
+              Open in new tab
+            </Button>
+          )}
+
+          <img
+            className={rh.clsCloseButton()}
+            {...rh.propsCloseButton()}
+            onClick={props.onClose}
+          />
+        </DefaultFlexStack>
+      </div>
+      <div className={rh.cls43fcb29a$5286$4b5a$8593$49b737cdd7b0()} />
+      <DefaultFlexStack className={rh.clsWL8ypAgbq()}>
+        <div className={rh.clsTmQlfUKwS()}>Code scheme</div>
+        <Dropdown
+          {...rh.propsCodeSchemeDropdown()}
+          selectedValue={rh.childStrCodeSchemeDropdown()}
+          items={
+            <>
+              <DropdownItem
+                {...rh.propsBlackBoxOption()}
+                value={"Blackbox Library"}
+                selected={codeScheme === "blackbox"}
+                onSelected={() => onSwitchCodeScheme("blackbox")}
+              />
+
+              <DropdownItem
+                {...rh.propsPlainReactOption()}
+                value={"Direct Edit"}
+                selected={codeScheme === "direct"}
+                onSelected={() => onSwitchCodeScheme("direct")}
+              />
+            </>
+          }
+        />
+      </DefaultFlexStack>
+      <div className={rh.clsH1u3gI8vG()}>{rh.childStrH1u3gI8vG()}</div>
+      {rh.showCreateHint() && (
+        <div className={rh.clsCreateHint()}>
+          {rh.showCreateHint2() && (
+            <div className={rh.clsCreateHint2()}>
+              {rh.childStrCreateHint2()}
+            </div>
+          )}
+        </div>
+      )}
+
+      {rh.showCreateButton() && (
+        <Button
+          startIcon={
+            <img className={rh.clsGvtJoBerl()} {...rh.propsGvtJoBerl()} />
+          }
+          {...rh.propsCreateButton()}
+          onClick={onCreateOrUpdateSandbox}
+        >
+          {rh.childStrCreateButton()}
+        </Button>
+      )}
+
+      {rh.showUpdateHint() && (
+        <div className={rh.clsUpdateHint()}>
+          <div className={rh.clsCreateHint22()}>
+            {rh.childStrCreateHint22()}
+          </div>
+        </div>
+      )}
+
+      {rh.showNmdHeAjEx() && (
+        <DefaultFlexStack className={rh.clsNmdHeAjEx()}>
+          <input
+            className={rh.clsEmail()}
+            {...rh.propsEmail()}
+            onChange={(e) => setEmail(e.target.value)}
+            value={email}
+          />
+
+          <Button {...rh.propsInviteButton()} onClick={onInvite}>
+            {rh.childStrInviteButton()}
+          </Button>
+          <div className={rh.clsZG$NA1rCh()} />
+          {rh.show$kdxH_yN6() && (
+            <div className={rh.cls$kdxH_yN6()}>
+              {rh.showUpdateButton() && (
+                <Button
+                  startIcon={
+                    rh.showL4QcXYzNZ() && (
+                      <img
+                        className={rh.clsL4QcXYzNZ()}
+                        {...rh.propsL4QcXYzNZ()}
+                      />
+                    )
+                  }
+                  {...rh.propsUpdateButton()}
+                  onClick={onCreateOrUpdateSandbox}
+                >
+                  {rh.childStrUpdateButton()}
+                </Button>
+              )}
+
+              {rh.showDeleteButton() && (
+                <Tooltip title="Detach this code sandbox. You can still access it via codesandbox.io, but Plasmic will start using a new sandbox instead.">
+                  <IconButton
+                    {...rh.propsDeleteButton()}
+                    onClick={onDeleteSandbox}
+                  />
+                </Tooltip>
+              )}
+            </div>
+          )}
+        </DefaultFlexStack>
+      )}
+    </div>
+  );
+}
+
+export const CodeSandboxDialogContent = observer(_CodeSandboxDialogContent);
+      `.trim()
+    );
+  });
+
+  it("fix imports for file should work", function () {
+    const code = `// This is a skeleton starter React component generated by Plasmic.
+import React, { ReactNode } from "react";
+import {
+  PlasmicCodeSandboxDialogContent__RenderHelper,
+  PlasmicCodeSandboxDialogContent__VariantsArgs,
+  PlasmicCodeSandboxDialogContent__ArgsType,
+  PlasmicCodeSandboxDialogContent__TriggerStateType,
+} from "./PP__CodeSandboxDialogContent"; // plasmic-import: f68b061e-0f85-41c1-8707-3ba9f634f1af/render
+import Button from "./Button"; // plasmic-import: 4SYnkOQLd5/component
+import CloseIcon from "./PlasmicIcon__Close"; // plasmic-import: rFn9Vj2p9/icon
+
+import "@plasmicapp/react-web/lib/plasmic.css";
+import "./PP__plasmic__default_style.css"; // plasmic-import: global/defaultcss
+import "./PP__plasmic_kit.css"; // plasmic-import: aBwbYpvCqht4V3F8CJNJX3/projectcss
+import "./PP__CodeSandboxDialogContent.css"; // plasmic-import: f68b061e-0f85-41c1-8707-3ba9f634f1af/css
+
+import {
+  hasVariant,
+  DefaultFlexStack,
+  Stack,
+  PlasmicIcon,
+} from "@plasmicapp/react-web";
+import { StudioCtx } from "../../../StudioCtx";
+import { observer } from "mobx-react-lite";
+
+function _CodeSandboxDialogContent(props) {
+  return null;
+}
+`;
+    const configJson = readFileText(
+      "./testData/fixImports_plasmic.json"
+    ).toString();
+    const config = JSON.parse(configJson);
+    const context = {
+      config,
+      cliArgs: {},
+    } as any;
+    const fixImportContext = mkFixImportContext(config);
+    const replaced = replaceImports(
+      context,
+      code,
+      "/tmp/CodeSandbox.tsx",
+      fixImportContext,
+      false,
+      process.cwd(),
+    );
+    const expectedCode = `// This is a skeleton starter React component generated by Plasmic.
+import React, { ReactNode } from "react";
+import {
+  PlasmicCodeSandboxDialogContent__RenderHelper,
+  PlasmicCodeSandboxDialogContent__VariantsArgs,
+  PlasmicCodeSandboxDialogContent__ArgsType,
+  PlasmicCodeSandboxDialogContent__TriggerStateType,
+} from "./newDir/PP__CodeSandboxDialogContent"; // plasmic-import: f68b061e-0f85-41c1-8707-3ba9f634f1af/render
+import Button from "./newDir/Button"; // plasmic-import: 4SYnkOQLd5/component
+import CloseIcon from "./newDir/PlasmicIcon__Close"; // plasmic-import: rFn9Vj2p9/icon
+
+import "@plasmicapp/react-web/lib/plasmic.css";
+import "./newDir/PP__plasmic__default_style.css"; // plasmic-import: global/defaultcss
+import "./newDir/PP__plasmic_kit.css"; // plasmic-import: aBwbYpvCqht4V3F8CJNJX3/projectcss
+import "./newDir/PP__CodeSandboxDialogContent.css"; // plasmic-import: f68b061e-0f85-41c1-8707-3ba9f634f1af/css
+
+import {
+  hasVariant,
+  DefaultFlexStack,
+  Stack,
+  PlasmicIcon,
+} from "@plasmicapp/react-web";
+import { StudioCtx } from "../../../StudioCtx";
+import { observer } from "mobx-react-lite";
+
+function _CodeSandboxDialogContent(props) {
+  return null;
+}
+`;
+    expect(replaced).toEqual(expectedCode);
+  });
+
+  it("fix imports should remove directives", function () {
+    const code = `// This is a skeleton starter React component generated by Plasmic.
+import React, { ReactNode } from "react";
+import {
+  PlasmicCodeSandboxDialogContent__RenderHelper,
+  PlasmicCodeSandboxDialogContent__VariantsArgs,
+  PlasmicCodeSandboxDialogContent__ArgsType,
+  PlasmicCodeSandboxDialogContent__TriggerStateType,
+} from "./PP__CodeSandboxDialogContent"; // plasmic-import: f68b061e-0f85-41c1-8707-3ba9f634f1af/render
+import Button from "./Button"; // plasmic-import: 4SYnkOQLd5/component
+import CloseIcon from "./PlasmicIcon__Close"; // plasmic-import: rFn9Vj2p9/icon
+
+import "@plasmicapp/react-web/lib/plasmic.css";
+import "./PP__plasmic__default_style.css"; // plasmic-import: global/defaultcss
+import "./PP__plasmic_kit.css"; // plasmic-import: aBwbYpvCqht4V3F8CJNJX3/projectcss
+import "./PP__CodeSandboxDialogContent.css"; // plasmic-import: f68b061e-0f85-41c1-8707-3ba9f634f1af/css
+
+import {
+  hasVariant,
+  DefaultFlexStack,
+  Stack,
+  PlasmicIcon,
+} from "@plasmicapp/react-web";
+import { StudioCtx } from "../../../StudioCtx";
+import { observer } from "mobx-react-lite";
+
+function _CodeSandboxDialogContent(props) {
+  return null;
+}
+`;
+    const configJson = readFileText(
+      "./testData/fixImports_plasmic.json"
+    ).toString();
+    const config = JSON.parse(configJson);
+    const fixImportContext = mkFixImportContext(config);
+    const context = {
+      config,
+      cliArgs: {},
+    } as any;
+    const replaced = replaceImports(
+      context,
+      code,
+      "/tmp/CodeSandbox.tsx",
+      fixImportContext,
+      true,
+      process.cwd(),
+    );
+    const expectedCode = `// This is a skeleton starter React component generated by Plasmic.
+import React, { ReactNode } from "react";
+import {
+  PlasmicCodeSandboxDialogContent__RenderHelper,
+  PlasmicCodeSandboxDialogContent__VariantsArgs,
+  PlasmicCodeSandboxDialogContent__ArgsType,
+  PlasmicCodeSandboxDialogContent__TriggerStateType,
+} from "./newDir/PP__CodeSandboxDialogContent";
+import Button from "./newDir/Button";
+import CloseIcon from "./newDir/PlasmicIcon__Close";
+
+import "@plasmicapp/react-web/lib/plasmic.css";
+import "./newDir/PP__plasmic__default_style.css";
+import "./newDir/PP__plasmic_kit.css";
+import "./newDir/PP__CodeSandboxDialogContent.css";
+
+import {
+  hasVariant,
+  DefaultFlexStack,
+  Stack,
+  PlasmicIcon,
+} from "@plasmicapp/react-web";
+import { StudioCtx } from "../../../StudioCtx";
+import { observer } from "mobx-react-lite";
+
+function _CodeSandboxDialogContent(props) {
+  return null;
+}
+`;
+    expect(replaced).toEqual(expectedCode);
+  });
+
+  it("fix imports for file should work when the code has no semicolon", function () {
+    const code = `// This is a skeleton starter React component generated by Plasmic.
+import React, { ReactNode } from "react";
+import {
+  PlasmicCodeSandboxDialogContent__RenderHelper,
+  PlasmicCodeSandboxDialogContent__VariantsArgs,
+  PlasmicCodeSandboxDialogContent__ArgsType,
+  PlasmicCodeSandboxDialogContent__TriggerStateType,
+} from "./PP__CodeSandboxDialogContent" // plasmic-import: f68b061e-0f85-41c1-8707-3ba9f634f1af/render
+import Button from "./Button" // plasmic-import: 4SYnkOQLd5/component
+import CloseIcon from "./PlasmicIcon__Close" // plasmic-import: rFn9Vj2p9/icon
+
+import "@plasmicapp/react-web/lib/plasmic.css"
+import "./PP__plasmic__default_style.css" // plasmic-import: global/defaultcss
+import "./PP__plasmic_kit.css" // plasmic-import: aBwbYpvCqht4V3F8CJNJX3/projectcss
+import "./PP__CodeSandboxDialogContent.css" // plasmic-import: f68b061e-0f85-41c1-8707-3ba9f634f1af/css
+
+import {
+  hasVariant,
+  DefaultFlexStack,
+  Stack,
+  PlasmicIcon,
+} from "@plasmicapp/react-web";
+import { StudioCtx } from "../../../StudioCtx"
+import { observer } from "mobx-react-lite"
+
+function _CodeSandboxDialogContent(props) {
+  return null
+}
+`;
+
+    const configJson = readFileText(
+      "./testData/fixImports_plasmic.json"
+    ).toString();
+    const config = JSON.parse(configJson);
+    const fixImportContext = mkFixImportContext(config);
+    const context = {
+      config,
+      cliArgs: {},
+    } as any;
+    const replaced = replaceImports(
+      context,
+      code,
+      "/tmp/CodeSandbox.tsx",
+      fixImportContext,
+      false,
+      process.cwd(),
+    );
+    const expectedCode = `// This is a skeleton starter React component generated by Plasmic.
+import React, { ReactNode } from "react";
+import {
+  PlasmicCodeSandboxDialogContent__RenderHelper,
+  PlasmicCodeSandboxDialogContent__VariantsArgs,
+  PlasmicCodeSandboxDialogContent__ArgsType,
+  PlasmicCodeSandboxDialogContent__TriggerStateType,
+} from "./newDir/PP__CodeSandboxDialogContent"; // plasmic-import: f68b061e-0f85-41c1-8707-3ba9f634f1af/render
+import Button from "./newDir/Button"; // plasmic-import: 4SYnkOQLd5/component
+import CloseIcon from "./newDir/PlasmicIcon__Close"; // plasmic-import: rFn9Vj2p9/icon
+
+import "@plasmicapp/react-web/lib/plasmic.css";
+import "./newDir/PP__plasmic__default_style.css"; // plasmic-import: global/defaultcss
+import "./newDir/PP__plasmic_kit.css"; // plasmic-import: aBwbYpvCqht4V3F8CJNJX3/projectcss
+import "./newDir/PP__CodeSandboxDialogContent.css"; // plasmic-import: f68b061e-0f85-41c1-8707-3ba9f634f1af/css
+
+import {
+  hasVariant,
+  DefaultFlexStack,
+  Stack,
+  PlasmicIcon,
+} from "@plasmicapp/react-web";
+import { StudioCtx } from "../../../StudioCtx";
+import { observer } from "mobx-react-lite";
+
+function _CodeSandboxDialogContent(props) {
+  return null;
+}
+`;
+    expect(replaced).toEqual(expectedCode);
+  });
+
+  it("Ts to js should not remove unused React", function () {
+    const input = `
+/* eslint-disable */
+/* tslint:disable */
+/* prettier-ignore-start */
+/** @jsx createPlasmicElementProxy */
+// This class is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: aBwbYpvCqht4V3F8CJNJX3
+// Component: 4SYnkOQLd5
+import React, { ReactNode } from "react";
+import {
+  hasVariant,
+  createPlasmicElement,
+  RenderOpts,
+  Override,
+  classNames,
+  Flex,
+  RenderFunc,
+  RenderFuncOverrides,
+  wrapWithClassName,
+  Renderer,
+  NodeRenderer,
+  createPlasmicElementProxy,
+  makeFragment,
+  PlasmicIcon,
+  PlasmicSlot,
+  MultiChoiceArg,
+  SingleBooleanChoiceArg,
+  SingleChoiceArg
+} from "@plasmicapp/react-web";
+
+import "@plasmicapp/react-web/lib/plasmic.css";
+import "../plasmic__default_style.css"; // plasmic-import: global/defaultcss
+import "./plasmic_plasmic_kit.css"; // plasmic-import: aBwbYpvCqht4V3F8CJNJX3/projectcss
+import "./PlasmicButton.css"; // plasmic-import: 4SYnkOQLd5/css
+import TrashIcon from "./PlasmicIcon__Trash"; // plasmic-import: wibhDXsBy/icon
+
+export type PlasmicButton__VariantsArgs = {
+  type?: SingleChoiceArg<
+    | "primary"
+    | "secondary"
+    | "link"
+    | "backlitError"
+    | "backlitInfo"
+    | "chip"
+    | "toggleOn"
+    | "toggleOff"
+    | "clear"
+  >;
+  size?: SingleChoiceArg<"small" | "stretch" | "wide">;
+  withIcons?: SingleChoiceArg<"startIcon">;
+  disabled?: SingleBooleanChoiceArg<"disabled">;
+  font?: SingleChoiceArg<"bold">;
+};
+
+export type PlasmicButton__ArgsType = {
+  children?: ReactNode;
+  startIcon?: ReactNode;
+};
+
+function PlasmicButton(props: {}): ReactNode {
+  return <button></button>;
+}
+
+function PlasmicButton2(props: {}): React.ReactNode {
+  return <button></button>;
+}
+
+export default PlasmicButton;
+/* prettier-ignore-end */
+`;
+    expect(tsxToJsx(input).trim()).toEqual(
+      `
+/* eslint-disable */
+/* tslint:disable */
+/* prettier-ignore-start */
+/** @jsx createPlasmicElementProxy */
+// This class is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: aBwbYpvCqht4V3F8CJNJX3
+// Component: 4SYnkOQLd5
+import React from \"react\";
+import { createPlasmicElementProxy } from "@plasmicapp/react-web";
+import "@plasmicapp/react-web/lib/plasmic.css";
+import "../plasmic__default_style.css"; // plasmic-import: global/defaultcss
+import "./plasmic_plasmic_kit.css"; // plasmic-import: aBwbYpvCqht4V3F8CJNJX3/projectcss
+import "./PlasmicButton.css"; // plasmic-import: 4SYnkOQLd5/css
+function PlasmicButton(props) {
+    return <button></button>;
+}
+function PlasmicButton2(props) {
+    return <button></button>;
+}
+export default PlasmicButton;
+/* prettier-ignore-end */`.trim()
+    );
+  });
+
+  it("formatJs should not add spaces to comment block", function () {
+    const input = `
+import React, { ReactNode } from "react";
+import "@plasmicapp/react-web/lib/plasmic.css";
+
+function PlasmicButton(props: {}): React.ReactNode {
+  return <button></button>;
+}
+
+function forNode(name: keyof typeof PlasmicButton) {
+  const x = [1, 2].map(v => v > 1);
+  return null;
+}
+
+export default PlasmicButton;
+
+// For debugging
+/* plasmic-nameInIdToUuid/123
+  [{"1": 1""},
+  {"2" : "2}]
+*/
+`;
+    expect(formatScript(input, process.cwd())).toEqual(
+      `import React, { ReactNode } from "react";
+import "@plasmicapp/react-web/lib/plasmic.css";
+
+function PlasmicButton(props: {}): React.ReactNode {
+  return <button></button>;
+}
+
+function forNode(name: keyof typeof PlasmicButton) {
+  const x = [1, 2].map((v) => v > 1);
+  return null;
+}
+
+export default PlasmicButton;
+
+// For debugging
+/* plasmic-nameInIdToUuid/123
+  [{"1": 1""},
+  {"2" : "2}]
+*/
+`
+    );
+  });
+});