@plasmicapp/cli 0.1.337 → 0.1.338

package/dist/actions/export.d.ts

@@ -2,7 +2,7 @@ import { CommonArgs } from "..";
 import { I18NConfig } from "../utils/config-utils";
 export interface ExportArgs extends CommonArgs {
     projects: readonly string[];
-    platform: "" | "react" | "nextjs" | "gatsby";
+    platform: "" | "react" | "nextjs" | "gatsby" | "tanstack";
     codeLang: "" | "ts" | "js";
     styleScheme: "" | "css" | "css-modules";
     imagesScheme: "" | "inlined" | "files";

package/dist/actions/init.d.ts

@@ -1,7 +1,7 @@
 import { CommonArgs } from "..";
 export interface InitArgs extends CommonArgs {
     host: string;
-    platform: "" | "react" | "nextjs" | "gatsby";
+    platform: "" | "react" | "nextjs" | "gatsby" | "tanstack";
     codeLang: "" | "ts" | "js";
     codeScheme: "" | "blackbox";
     styleScheme: "" | "css" | "css-modules";

package/dist/index.js

@@ -34,9 +34,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// ../../node_modules/yargs/build/lib/common-types.js
+// node_modules/yargs/build/lib/common-types.js
 var require_common_types = __commonJS({
-  "../../node_modules/yargs/build/lib/common-types.js"(exports) {
+  "node_modules/yargs/build/lib/common-types.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.objectKeys = exports.assertSingleKey = exports.assertNotStrictEqual = void 0;
@@ -56,9 +56,9 @@ var require_common_types = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/build/lib/is-promise.js
+// node_modules/yargs/build/lib/is-promise.js
 var require_is_promise = __commonJS({
-  "../../node_modules/yargs/build/lib/is-promise.js"(exports) {
+  "node_modules/yargs/build/lib/is-promise.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.isPromise = void 0;
@@ -69,9 +69,9 @@ var require_is_promise = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/build/lib/yerror.js
+// node_modules/yargs/build/lib/yerror.js
 var require_yerror = __commonJS({
-  "../../node_modules/yargs/build/lib/yerror.js"(exports) {
+  "node_modules/yargs/build/lib/yerror.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.YError = void 0;
@@ -86,9 +86,9 @@ var require_yerror = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/build/lib/parse-command.js
+// node_modules/yargs/build/lib/parse-command.js
 var require_parse_command = __commonJS({
-  "../../node_modules/yargs/build/lib/parse-command.js"(exports) {
+  "node_modules/yargs/build/lib/parse-command.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.parseCommand = void 0;
@@ -127,9 +127,9 @@ var require_parse_command = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/build/lib/argsert.js
+// node_modules/yargs/build/lib/argsert.js
 var require_argsert = __commonJS({
-  "../../node_modules/yargs/build/lib/argsert.js"(exports) {
+  "node_modules/yargs/build/lib/argsert.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.argsert = void 0;
@@ -191,9 +191,9 @@ var require_argsert = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/build/lib/middleware.js
+// node_modules/yargs/build/lib/middleware.js
 var require_middleware = __commonJS({
-  "../../node_modules/yargs/build/lib/middleware.js"(exports) {
+  "node_modules/yargs/build/lib/middleware.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.applyMiddleware = exports.commandMiddlewareFactory = exports.globalMiddlewareFactory = void 0;
@@ -399,9 +399,9 @@ var require_decamelize = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/node_modules/yargs-parser/lib/tokenize-arg-string.js
+// node_modules/yargs-parser/lib/tokenize-arg-string.js
 var require_tokenize_arg_string = __commonJS({
-  "../../node_modules/yargs/node_modules/yargs-parser/lib/tokenize-arg-string.js"(exports, module2) {
+  "node_modules/yargs-parser/lib/tokenize-arg-string.js"(exports, module2) {
     module2.exports = function(argString) {
       if (Array.isArray(argString)) {
         return argString.map((e) => typeof e !== "string" ? e + "" : e);
@@ -435,9 +435,9 @@ var require_tokenize_arg_string = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/node_modules/yargs-parser/index.js
+// node_modules/yargs-parser/index.js
 var require_yargs_parser = __commonJS({
-  "../../node_modules/yargs/node_modules/yargs-parser/index.js"(exports, module2) {
+  "node_modules/yargs-parser/index.js"(exports, module2) {
     var camelCase = require_camelcase();
     var decamelize = require_decamelize();
     var path15 = require("path");
@@ -1226,9 +1226,9 @@ var require_yargs_parser = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/build/lib/command.js
+// node_modules/yargs/build/lib/command.js
 var require_command = __commonJS({
-  "../../node_modules/yargs/build/lib/command.js"(exports) {
+  "node_modules/yargs/build/lib/command.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.isCommandBuilderCallback = exports.isCommandBuilderDefinition = exports.isCommandHandlerDefinition = exports.command = void 0;
@@ -1589,9 +1589,9 @@ var require_command = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/build/lib/obj-filter.js
+// node_modules/yargs/build/lib/obj-filter.js
 var require_obj_filter = __commonJS({
-  "../../node_modules/yargs/build/lib/obj-filter.js"(exports) {
+  "node_modules/yargs/build/lib/obj-filter.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.objFilter = void 0;
@@ -2826,9 +2826,9 @@ var require_ansi_styles = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/node_modules/wrap-ansi/index.js
+// node_modules/cliui/node_modules/wrap-ansi/index.js
 var require_wrap_ansi = __commonJS({
-  "../../node_modules/yargs/node_modules/wrap-ansi/index.js"(exports, module2) {
+  "node_modules/cliui/node_modules/wrap-ansi/index.js"(exports, module2) {
     "use strict";
     var stringWidth = require_string_width();
     var stripAnsi = require_strip_ansi();
@@ -2959,9 +2959,9 @@ var require_wrap_ansi = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/node_modules/cliui/index.js
+// node_modules/cliui/index.js
 var require_cliui = __commonJS({
-  "../../node_modules/yargs/node_modules/cliui/index.js"(exports, module2) {
+  "node_modules/cliui/index.js"(exports, module2) {
     "use strict";
     var stringWidth = require_string_width();
     var stripAnsi = require_strip_ansi();
@@ -3221,9 +3221,9 @@ var require_cliui = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/build/lib/usage.js
+// node_modules/yargs/build/lib/usage.js
 var require_usage = __commonJS({
-  "../../node_modules/yargs/build/lib/usage.js"(exports) {
+  "node_modules/yargs/build/lib/usage.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.usage = void 0;
@@ -3701,9 +3701,9 @@ var require_usage = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/build/lib/completion-templates.js
+// node_modules/yargs/build/lib/completion-templates.js
 var require_completion_templates = __commonJS({
-  "../../node_modules/yargs/build/lib/completion-templates.js"(exports) {
+  "node_modules/yargs/build/lib/completion-templates.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.completionZshTemplate = exports.completionShTemplate = void 0;
@@ -3758,9 +3758,9 @@ compdef _{{app_name}}_yargs_completions {{app_name}}
   }
 });
 
-// ../../node_modules/yargs/build/lib/completion.js
+// node_modules/yargs/build/lib/completion.js
 var require_completion = __commonJS({
-  "../../node_modules/yargs/build/lib/completion.js"(exports) {
+  "node_modules/yargs/build/lib/completion.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.completion = void 0;
@@ -3884,9 +3884,9 @@ var require_completion = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/build/lib/levenshtein.js
+// node_modules/yargs/build/lib/levenshtein.js
 var require_levenshtein = __commonJS({
-  "../../node_modules/yargs/build/lib/levenshtein.js"(exports) {
+  "node_modules/yargs/build/lib/levenshtein.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.levenshtein = void 0;
@@ -3927,9 +3927,9 @@ var require_levenshtein = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/build/lib/validation.js
+// node_modules/yargs/build/lib/validation.js
 var require_validation = __commonJS({
-  "../../node_modules/yargs/build/lib/validation.js"(exports) {
+  "node_modules/yargs/build/lib/validation.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.validation = void 0;
@@ -4226,9 +4226,9 @@ ${customMsgs.join("\n")}` : "";
   }
 });
 
-// ../../node_modules/yargs/build/lib/apply-extends.js
+// node_modules/yargs/build/lib/apply-extends.js
 var require_apply_extends = __commonJS({
-  "../../node_modules/yargs/build/lib/apply-extends.js"(exports) {
+  "node_modules/yargs/build/lib/apply-extends.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.applyExtends = void 0;
@@ -4291,9 +4291,9 @@ var require_apply_extends = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/build/lib/process-argv.js
+// node_modules/yargs/build/lib/process-argv.js
 var require_process_argv = __commonJS({
-  "../../node_modules/yargs/build/lib/process-argv.js"(exports) {
+  "node_modules/yargs/build/lib/process-argv.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.getProcessArgvBin = exports.getProcessArgvWithoutBin = void 0;
@@ -4784,9 +4784,9 @@ var require_get_caller_file = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/build/lib/yargs.js
+// node_modules/yargs/build/lib/yargs.js
 var require_yargs = __commonJS({
-  "../../node_modules/yargs/build/lib/yargs.js"(exports) {
+  "node_modules/yargs/build/lib/yargs.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.isYargsInstance = exports.rebase = exports.Yargs = void 0;
@@ -5862,9 +5862,9 @@ var require_yargs = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/yargs.js
+// node_modules/yargs/yargs.js
 var require_yargs2 = __commonJS({
-  "../../node_modules/yargs/yargs.js"(exports, module2) {
+  "node_modules/yargs/yargs.js"(exports, module2) {
     "use strict";
     async function requiresNode8OrGreater() {
     }
@@ -5877,9 +5877,9 @@ var require_yargs2 = __commonJS({
   }
 });
 
-// ../../node_modules/yargs/index.js
+// node_modules/yargs/index.js
 var require_yargs3 = __commonJS({
-  "../../node_modules/yargs/index.js"(exports, module2) {
+  "node_modules/yargs/index.js"(exports, module2) {
     "use strict";
     var yargs2 = require_yargs2();
     var processArgv = require_process_argv();
@@ -499222,6 +499222,9 @@ function makeImportPath(context, fromPath, toPath, stripExt, forceRelative = fal
   if (stripExt) {
     result = stripExtension(result);
   }
+  if (result.endsWith(".css") && context.config.platform === "tanstack" && context.config.style.scheme === "css") {
+    result = `${result}?url`;
+  }
   return result;
 }
 function isLocalModulePath(modulePath) {
@@ -499626,7 +499629,7 @@ function defaultPublicResourcePath(context, project, ...subpaths) {
 var INDEX_EXT_REGEXP = /\/index\.(jsx|tsx)$/;
 var EXT_REGEXP = /\.(jsx|tsx)$/;
 function defaultPagePath(context, fileName) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   if (context.config.platform === "nextjs") {
     if ((_b = (_a = context.config.nextjsConfig) == null ? void 0 : _a.pagesDir) == null ? void 0 : _b.endsWith("app")) {
       const matchesIndex = fileName.match(INDEX_EXT_REGEXP);
@@ -499646,6 +499649,16 @@ function defaultPagePath(context, fileName) {
     }
   } else if (context.config.platform === "gatsby") {
     return import_upath3.default.join(((_d = context.config.gatsbyConfig) == null ? void 0 : _d.pagesDir) || "", fileName);
+  } else if (context.config.platform === "tanstack") {
+    let renamedFileName = fileName.replace(/\[(\w+)\]/g, "$$$1");
+    const matchesIndex = fileName.match(INDEX_EXT_REGEXP);
+    if (!matchesIndex) {
+      renamedFileName = renamedFileName.replace(EXT_REGEXP, "/index.$1");
+    }
+    return import_upath3.default.join(
+      ((_e = context.config.tanstackConfig) == null ? void 0 : _e.pagesDir) || "",
+      renamedFileName
+    );
   } else {
     return fileName;
   }
@@ -499792,6 +499805,9 @@ function getAllPaths(context) {
   if (config.nextjsConfig) {
     pushPath(config.nextjsConfig, "pagesDir");
   }
+  if (config.tanstackConfig) {
+    pushPath(config.tanstackConfig, "pagesDir");
+  }
   return pairs;
 }
 function assertAllPathsInRootDir(context) {
@@ -500290,7 +500306,7 @@ function getOrAddProjectLock(context, projectId, branchName, base) {
   return project;
 }
 function isPageAwarePlatform(platform) {
-  return platform === "nextjs" || platform === "gatsby";
+  return platform === "nextjs" || platform === "gatsby" || platform === "tanstack";
 }
 
 // src/api.ts
@@ -500826,6 +500842,14 @@ function detectCreateReactApp() {
     return false;
   }
 }
+function detectTanStackApp() {
+  try {
+    const packageJsonContent = getParsedPackageJson();
+    return "@tanstack/react-router" in packageJsonContent.dependencies;
+  } catch {
+    return false;
+  }
+}
 
 // src/actions/init.ts
 async function initPlasmic(opts) {
@@ -500868,13 +500892,22 @@ function createInitConfig(opts) {
         pagesDir: opts.pagesDir
       }
     },
+    ...opts.platform === "tanstack" && {
+      tanstackConfig: {
+        pagesDir: opts.pagesDir
+      }
+    },
     code: {
       ...opts.codeLang && { lang: opts.codeLang },
       ...opts.codeScheme && { scheme: opts.codeScheme },
       ...opts.reactRuntime && { reactRuntime: opts.reactRuntime }
     },
     style: {
-      ...opts.styleScheme && { scheme: opts.styleScheme }
+      ...opts.styleScheme && {
+        // Css Modules is not supported yet in SSR for TanStack
+        // https://github.com/TanStack/router/issues/3023
+        scheme: opts.platform === "tanstack" ? "css" : opts.styleScheme
+      }
     },
     images: {
       ...opts.imagesScheme && { scheme: opts.imagesScheme },
@@ -500897,12 +500930,13 @@ function simulatePrompt(question, defaultAnswer, bold = false) {
 }
 async function deriveInitAnswers(opts) {
   const plasmicRootDir = opts.config ? import_upath5.default.dirname(opts.config) : opts.baseDir;
-  const platform = !!opts.platform ? opts.platform : detectNextJs() ? "nextjs" : detectGatsby() ? "gatsby" : detectCreateReactApp() ? "react" : "";
+  const platform = !!opts.platform ? opts.platform : detectNextJs() ? "nextjs" : detectGatsby() ? "gatsby" : detectTanStackApp() ? "tanstack" : detectCreateReactApp() ? "react" : "";
   const isCra = platform === "react";
   const isNext = platform === "nextjs";
   const isNextAppDir = isNext && detectNextJsAppDir();
   const isGatsby = platform === "gatsby";
-  const isGeneric = !isCra && !isNext && !isGatsby;
+  const isTanStack = platform === "tanstack";
+  const isGeneric = !isCra && !isNext && !isGatsby && !isTanStack;
   const isTypescript = detectTypescript();
   if (isNext) {
     if (isNextAppDir) {
@@ -500912,10 +500946,12 @@ async function deriveInitAnswers(opts) {
     }
   } else if (isGatsby) {
     logger.info("Detected Gatsby...");
+  } else if (isTanStack) {
+    logger.info("Detected TanStack router app...");
   } else if (isCra) {
     logger.info("Detected create-react-app...");
   }
-  const deriver = isNext ? getNextDefaults(plasmicRootDir, isNextAppDir) : isGatsby ? getGatsbyDefaults(plasmicRootDir) : isCra ? getCraDefaults(plasmicRootDir) : getGenericDefaults(plasmicRootDir);
+  const deriver = isNext ? getNextDefaults(plasmicRootDir, isNextAppDir) : isGatsby ? getGatsbyDefaults(plasmicRootDir) : isTanStack ? getTanStackDefaults(plasmicRootDir) : isCra ? getCraDefaults(plasmicRootDir) : getGenericDefaults(plasmicRootDir);
   const srcDir = ensureString(deriver.srcDir);
   const getDefaultAnswer = (name, defaultAnswer) => {
     if (opts[name]) {
@@ -501152,6 +501188,35 @@ function getGatsbyDefaults(plasmicRootDir) {
     alwaysDerived: ["imagesScheme", "pagesDir"]
   };
 }
+function getTanStackDefaults(plasmicRootDir) {
+  var _a;
+  const projectRootDir = (_a = findPackageJsonDir(plasmicRootDir)) != null ? _a : plasmicRootDir;
+  return {
+    srcDir: import_upath5.default.relative(
+      plasmicRootDir,
+      import_upath5.default.join(projectRootDir, "src", "components")
+    ),
+    pagesDir: (srcDir) => {
+      const absSrcDir = import_upath5.default.join(plasmicRootDir, srcDir);
+      const absPagesDir = import_upath5.default.join(projectRootDir, "src", "routes");
+      const relDir = import_upath5.default.relative(absSrcDir, absPagesDir);
+      return relDir;
+    },
+    styleScheme: "css",
+    imagesScheme: "public-files",
+    imagesPublicDir: (srcDir) => import_upath5.default.relative(
+      import_upath5.default.join(plasmicRootDir, srcDir),
+      import_upath5.default.join(projectRootDir, "public")
+    ),
+    imagesPublicUrlPrefix: "/",
+    alwaysDerived: [
+      "styleScheme",
+      "imagesScheme",
+      "imagesPublicDir",
+      "pagesDir"
+    ]
+  };
+}
 function getCraDefaults(plasmicRootDir) {
   var _a;
   const projectRootDir = (_a = findPackageJsonDir(plasmicRootDir)) != null ? _a : plasmicRootDir;
@@ -501185,7 +501250,7 @@ var INIT_ARGS_DESCRIPTION = {
   platform: {
     shortDescription: "Target platform",
     longDescription: "Target platform to generate code for",
-    choices: ["react", "nextjs", "gatsby"]
+    choices: ["react", "nextjs", "gatsby", "tanstack"]
   },
   codeLang: {
     shortDescription: "Target language",

package/dist/lib.js

@@ -494564,6 +494564,9 @@ function makeImportPath(context, fromPath, toPath, stripExt, forceRelative = fal
   if (stripExt) {
     result = stripExtension(result);
   }
+  if (result.endsWith(".css") && context.config.platform === "tanstack" && context.config.style.scheme === "css") {
+    result = `${result}?url`;
+  }
   return result;
 }
 function isLocalModulePath(modulePath) {
@@ -494968,7 +494971,7 @@ function defaultPublicResourcePath(context, project, ...subpaths) {
 var INDEX_EXT_REGEXP = /\/index\.(jsx|tsx)$/;
 var EXT_REGEXP = /\.(jsx|tsx)$/;
 function defaultPagePath(context, fileName) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   if (context.config.platform === "nextjs") {
     if ((_b = (_a = context.config.nextjsConfig) == null ? void 0 : _a.pagesDir) == null ? void 0 : _b.endsWith("app")) {
       const matchesIndex = fileName.match(INDEX_EXT_REGEXP);
@@ -494988,6 +494991,16 @@ function defaultPagePath(context, fileName) {
     }
   } else if (context.config.platform === "gatsby") {
     return import_upath3.default.join(((_d = context.config.gatsbyConfig) == null ? void 0 : _d.pagesDir) || "", fileName);
+  } else if (context.config.platform === "tanstack") {
+    let renamedFileName = fileName.replace(/\[(\w+)\]/g, "$$$1");
+    const matchesIndex = fileName.match(INDEX_EXT_REGEXP);
+    if (!matchesIndex) {
+      renamedFileName = renamedFileName.replace(EXT_REGEXP, "/index.$1");
+    }
+    return import_upath3.default.join(
+      ((_e = context.config.tanstackConfig) == null ? void 0 : _e.pagesDir) || "",
+      renamedFileName
+    );
   } else {
     return fileName;
   }
@@ -495134,6 +495147,9 @@ function getAllPaths(context) {
   if (config.nextjsConfig) {
     pushPath(config.nextjsConfig, "pagesDir");
   }
+  if (config.tanstackConfig) {
+    pushPath(config.tanstackConfig, "pagesDir");
+  }
   return pairs;
 }
 function assertAllPathsInRootDir(context) {
@@ -495632,7 +495648,7 @@ function getOrAddProjectLock(context, projectId, branchName, base) {
   return project;
 }
 function isPageAwarePlatform(platform) {
-  return platform === "nextjs" || platform === "gatsby";
+  return platform === "nextjs" || platform === "gatsby" || platform === "tanstack";
 }
 
 // src/api.ts
@@ -496168,6 +496184,14 @@ function detectCreateReactApp() {
     return false;
   }
 }
+function detectTanStackApp() {
+  try {
+    const packageJsonContent = getParsedPackageJson();
+    return "@tanstack/react-router" in packageJsonContent.dependencies;
+  } catch {
+    return false;
+  }
+}
 
 // src/actions/init.ts
 async function initPlasmic(opts) {
@@ -496210,13 +496234,22 @@ function createInitConfig(opts) {
         pagesDir: opts.pagesDir
       }
     },
+    ...opts.platform === "tanstack" && {
+      tanstackConfig: {
+        pagesDir: opts.pagesDir
+      }
+    },
     code: {
       ...opts.codeLang && { lang: opts.codeLang },
       ...opts.codeScheme && { scheme: opts.codeScheme },
       ...opts.reactRuntime && { reactRuntime: opts.reactRuntime }
     },
     style: {
-      ...opts.styleScheme && { scheme: opts.styleScheme }
+      ...opts.styleScheme && {
+        // Css Modules is not supported yet in SSR for TanStack
+        // https://github.com/TanStack/router/issues/3023
+        scheme: opts.platform === "tanstack" ? "css" : opts.styleScheme
+      }
     },
     images: {
       ...opts.imagesScheme && { scheme: opts.imagesScheme },
@@ -496239,12 +496272,13 @@ function simulatePrompt(question, defaultAnswer, bold = false) {
 }
 async function deriveInitAnswers(opts) {
   const plasmicRootDir = opts.config ? import_upath5.default.dirname(opts.config) : opts.baseDir;
-  const platform = !!opts.platform ? opts.platform : detectNextJs() ? "nextjs" : detectGatsby() ? "gatsby" : detectCreateReactApp() ? "react" : "";
+  const platform = !!opts.platform ? opts.platform : detectNextJs() ? "nextjs" : detectGatsby() ? "gatsby" : detectTanStackApp() ? "tanstack" : detectCreateReactApp() ? "react" : "";
   const isCra = platform === "react";
   const isNext = platform === "nextjs";
   const isNextAppDir = isNext && detectNextJsAppDir();
   const isGatsby = platform === "gatsby";
-  const isGeneric = !isCra && !isNext && !isGatsby;
+  const isTanStack = platform === "tanstack";
+  const isGeneric = !isCra && !isNext && !isGatsby && !isTanStack;
   const isTypescript = detectTypescript();
   if (isNext) {
     if (isNextAppDir) {
@@ -496254,10 +496288,12 @@ async function deriveInitAnswers(opts) {
     }
   } else if (isGatsby) {
     logger.info("Detected Gatsby...");
+  } else if (isTanStack) {
+    logger.info("Detected TanStack router app...");
   } else if (isCra) {
     logger.info("Detected create-react-app...");
   }
-  const deriver = isNext ? getNextDefaults(plasmicRootDir, isNextAppDir) : isGatsby ? getGatsbyDefaults(plasmicRootDir) : isCra ? getCraDefaults(plasmicRootDir) : getGenericDefaults(plasmicRootDir);
+  const deriver = isNext ? getNextDefaults(plasmicRootDir, isNextAppDir) : isGatsby ? getGatsbyDefaults(plasmicRootDir) : isTanStack ? getTanStackDefaults(plasmicRootDir) : isCra ? getCraDefaults(plasmicRootDir) : getGenericDefaults(plasmicRootDir);
   const srcDir = ensureString(deriver.srcDir);
   const getDefaultAnswer = (name, defaultAnswer) => {
     if (opts[name]) {
@@ -496494,6 +496530,35 @@ function getGatsbyDefaults(plasmicRootDir) {
     alwaysDerived: ["imagesScheme", "pagesDir"]
   };
 }
+function getTanStackDefaults(plasmicRootDir) {
+  var _a;
+  const projectRootDir = (_a = findPackageJsonDir(plasmicRootDir)) != null ? _a : plasmicRootDir;
+  return {
+    srcDir: import_upath5.default.relative(
+      plasmicRootDir,
+      import_upath5.default.join(projectRootDir, "src", "components")
+    ),
+    pagesDir: (srcDir) => {
+      const absSrcDir = import_upath5.default.join(plasmicRootDir, srcDir);
+      const absPagesDir = import_upath5.default.join(projectRootDir, "src", "routes");
+      const relDir = import_upath5.default.relative(absSrcDir, absPagesDir);
+      return relDir;
+    },
+    styleScheme: "css",
+    imagesScheme: "public-files",
+    imagesPublicDir: (srcDir) => import_upath5.default.relative(
+      import_upath5.default.join(plasmicRootDir, srcDir),
+      import_upath5.default.join(projectRootDir, "public")
+    ),
+    imagesPublicUrlPrefix: "/",
+    alwaysDerived: [
+      "styleScheme",
+      "imagesScheme",
+      "imagesPublicDir",
+      "pagesDir"
+    ]
+  };
+}
 function getCraDefaults(plasmicRootDir) {
   var _a;
   const projectRootDir = (_a = findPackageJsonDir(plasmicRootDir)) != null ? _a : plasmicRootDir;
@@ -496527,7 +496592,7 @@ var INIT_ARGS_DESCRIPTION = {
   platform: {
     shortDescription: "Target platform",
     longDescription: "Target platform to generate code for",
-    choices: ["react", "nextjs", "gatsby"]
+    choices: ["react", "nextjs", "gatsby", "tanstack"]
   },
   codeLang: {
     shortDescription: "Target language",

package/dist/plasmic.schema.json

@@ -568,7 +568,8 @@
             "enum": [
                 "gatsby",
                 "nextjs",
-                "react"
+                "react",
+                "tanstack"
             ],
             "type": "string"
         },
@@ -594,6 +595,16 @@
             "$ref": "#/definitions/StyleConfig",
             "description": "Config for style generation"
         },
+        "tanstackConfig": {
+            "description": "Tanstack-specific config",
+            "properties": {
+                "pagesDir": {
+                    "description": "The folder containing page components source files.",
+                    "type": "string"
+                }
+            },
+            "type": "object"
+        },
         "tokens": {
             "$ref": "#/definitions/TokensConfig",
             "description": "Config for style tokens"

package/dist/utils/config-utils.d.ts

@@ -10,7 +10,7 @@ export declare const ENV_AUTH_USER = "PLASMIC_AUTH_USER";
 export declare const ENV_AUTH_TOKEN = "PLASMIC_AUTH_TOKEN";
 export interface PlasmicConfig {
     /** Target platform to generate code for */
-    platform: "react" | "nextjs" | "gatsby";
+    platform: "react" | "nextjs" | "gatsby" | "tanstack";
     /**
      * The folder containing the component source files; this is the default place where
      * all files are generated and stored.
@@ -34,6 +34,11 @@ export interface PlasmicConfig {
         /** The folder containing page components source files. */
         pagesDir?: string;
     };
+    /** Tanstack-specific config */
+    tanstackConfig?: {
+        /** The folder containing page components source files. */
+        pagesDir?: string;
+    };
     /** Config for code generation */
     code: CodeConfig;
     /** Config for pictures */

package/dist/utils/envdetect.d.ts

@@ -3,3 +3,4 @@ export declare function detectNextJs(): boolean;
 export declare function detectNextJsAppDir(): any;
 export declare function detectGatsby(): string | null;
 export declare function detectCreateReactApp(): boolean;
+export declare function detectTanStackApp(): boolean;

package/dist/utils/file-utils.d.ts

@@ -9,7 +9,7 @@ export declare function writeFileContentRaw(filePath: string, content: string |
 export declare function defaultResourcePath(context: PlasmicContext, project: ProjectConfig | ProjectMetaBundle | string, ...subpaths: string[]): string;
 export declare function defaultPublicResourcePath(context: PlasmicContext, project: ProjectConfig, ...subpaths: string[]): string;
 export declare function defaultPagePath(context: {
-    config: Pick<PlasmicConfig, "platform" | "gatsbyConfig" | "nextjsConfig">;
+    config: Pick<PlasmicConfig, "platform" | "gatsbyConfig" | "nextjsConfig" | "tanstackConfig">;
 }, fileName: string): string;
 /**
  * Returns true iff paths `a` and `b` resolve to the same page URI. For

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/cli",
-  "version": "0.1.337",
+  "version": "0.1.338",
   "description": "plasmic cli for syncing local code with Plasmic designs",
   "engines": {
     "node": ">=12"
@@ -83,5 +83,5 @@
     "wrap-ansi": "^7.0.0",
     "yargs": "^15.4.1"
   },
-  "gitHead": "5dbcf9cb4a1be8f4060acbb9e3bdf698e99af7c6"
+  "gitHead": "7199e5b0c2c94b6e95c81c8120d9861faf98d7ee"
 }

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

@@ -102,4 +102,51 @@ describe("defaultPagePath", () => {
       )
     ).toBe("../app/not-index/page.tsx");
   });
+  it("handles tanstack pagesDir", () => {
+    expect(
+      defaultPagePath(
+        {
+          config: {
+            platform: "tanstack",
+            tanstackConfig: { pagesDir: "../routes" },
+          },
+        },
+        "/index.tsx"
+      )
+    ).toBe("../routes/index.tsx");
+    expect(
+      defaultPagePath(
+        {
+          config: {
+            platform: "tanstack",
+            tanstackConfig: { pagesDir: "../routes" },
+          },
+        },
+        "/nested/index.tsx"
+      )
+    ).toBe("../routes/nested/index.tsx");
+
+    expect(
+      defaultPagePath(
+        {
+          config: {
+            platform: "tanstack",
+            tanstackConfig: { pagesDir: "../routes" },
+          },
+        },
+        "/post.tsx"
+      )
+    ).toBe("../routes/post/index.tsx");
+    expect(
+      defaultPagePath(
+        {
+          config: {
+            platform: "tanstack",
+            tanstackConfig: { pagesDir: "../routes" },
+          },
+        },
+        "/post/[postId].tsx"
+      )
+    ).toBe("../routes/post/$postId/index.tsx");
+  });
 });

package/src/actions/export.ts

@@ -24,7 +24,7 @@ import { DEFAULT_SPLITS_PROVIDER_NAME } from "./sync-splits-provider";
 
 export interface ExportArgs extends CommonArgs {
   projects: readonly string[];
-  platform: "" | "react" | "nextjs" | "gatsby";
+  platform: "" | "react" | "nextjs" | "gatsby" | "tanstack";
   codeLang: "" | "ts" | "js";
   styleScheme: "" | "css" | "css-modules";
   imagesScheme: "" | "inlined" | "files";

package/src/actions/init.ts

@@ -20,6 +20,7 @@ import {
   detectGatsby,
   detectNextJs,
   detectNextJsAppDir,
+  detectTanStackApp,
   detectTypescript,
 } from "../utils/envdetect";
 import { existsBuffered } from "../utils/file-utils";
@@ -33,7 +34,7 @@ import { confirmWithUser } from "../utils/user-utils";
 
 export interface InitArgs extends CommonArgs {
   host: string;
-  platform: "" | "react" | "nextjs" | "gatsby";
+  platform: "" | "react" | "nextjs" | "gatsby" | "tanstack";
   codeLang: "" | "ts" | "js";
   codeScheme: "" | "blackbox";
   styleScheme: "" | "css" | "css-modules";
@@ -97,13 +98,22 @@ function createInitConfig(opts: Omit<InitArgs, "baseDir">): PlasmicConfig {
         pagesDir: opts.pagesDir,
       },
     }),
+    ...(opts.platform === "tanstack" && {
+      tanstackConfig: {
+        pagesDir: opts.pagesDir,
+      },
+    }),
     code: {
       ...(opts.codeLang && { lang: opts.codeLang }),
       ...(opts.codeScheme && { scheme: opts.codeScheme }),
       ...(opts.reactRuntime && { reactRuntime: opts.reactRuntime }),
     },
     style: {
-      ...(opts.styleScheme && { scheme: opts.styleScheme }),
+      ...(opts.styleScheme && {
+        // Css Modules is not supported yet in SSR for TanStack
+        // https://github.com/TanStack/router/issues/3023
+        scheme: opts.platform === "tanstack" ? "css" : opts.styleScheme,
+      }),
     },
     images: {
       ...(opts.imagesScheme && { scheme: opts.imagesScheme }),
@@ -165,6 +175,8 @@ async function deriveInitAnswers(
     ? "nextjs"
     : detectGatsby()
     ? "gatsby"
+    : detectTanStackApp()
+    ? "tanstack"
     : detectCreateReactApp()
     ? "react"
     : "";
@@ -172,7 +184,8 @@ async function deriveInitAnswers(
   const isNext = platform === "nextjs";
   const isNextAppDir = isNext && detectNextJsAppDir();
   const isGatsby = platform === "gatsby";
-  const isGeneric = !isCra && !isNext && !isGatsby;
+  const isTanStack = platform === "tanstack";
+  const isGeneric = !isCra && !isNext && !isGatsby && !isTanStack;
   const isTypescript = detectTypescript();
 
   if (isNext) {
@@ -183,6 +196,8 @@ async function deriveInitAnswers(
     }
   } else if (isGatsby) {
     logger.info("Detected Gatsby...");
+  } else if (isTanStack) {
+    logger.info("Detected TanStack router app...");
   } else if (isCra) {
     logger.info("Detected create-react-app...");
   }
@@ -192,6 +207,8 @@ async function deriveInitAnswers(
     ? getNextDefaults(plasmicRootDir, isNextAppDir)
     : isGatsby
     ? getGatsbyDefaults(plasmicRootDir)
+    : isTanStack
+    ? getTanStackDefaults(plasmicRootDir)
     : isCra
     ? getCraDefaults(plasmicRootDir)
     : getGenericDefaults(plasmicRootDir);
@@ -473,6 +490,36 @@ function getGatsbyDefaults(plasmicRootDir: string): DefaultDeriver {
   };
 }
 
+function getTanStackDefaults(plasmicRootDir: string): DefaultDeriver {
+  const projectRootDir = findPackageJsonDir(plasmicRootDir) ?? plasmicRootDir;
+  return {
+    srcDir: path.relative(
+      plasmicRootDir,
+      path.join(projectRootDir, "src", "components")
+    ),
+    pagesDir: (srcDir: string) => {
+      const absSrcDir = path.join(plasmicRootDir, srcDir);
+      const absPagesDir = path.join(projectRootDir, "src", "routes");
+      const relDir = path.relative(absSrcDir, absPagesDir);
+      return relDir;
+    },
+    styleScheme: "css",
+    imagesScheme: "public-files",
+    imagesPublicDir: (srcDir: string) =>
+      path.relative(
+        path.join(plasmicRootDir, srcDir),
+        path.join(projectRootDir, "public")
+      ),
+    imagesPublicUrlPrefix: "/",
+    alwaysDerived: [
+      "styleScheme",
+      "imagesScheme",
+      "imagesPublicDir",
+      "pagesDir",
+    ],
+  };
+}
+
 function getCraDefaults(plasmicRootDir: string): DefaultDeriver {
   const projectRootDir = findPackageJsonDir(plasmicRootDir) ?? plasmicRootDir;
   return {
@@ -519,7 +566,7 @@ const INIT_ARGS_DESCRIPTION: {
   platform: {
     shortDescription: "Target platform",
     longDescription: "Target platform to generate code for",
-    choices: ["react", "nextjs", "gatsby"],
+    choices: ["react", "nextjs", "gatsby", "tanstack"],
   },
   codeLang: {
     shortDescription: "Target language",

package/src/utils/code-utils.ts

@@ -528,6 +528,16 @@ function makeImportPath(
   if (stripExt) {
     result = stripExtension(result);
   }
+
+  if (
+    result.endsWith(".css") &&
+    context.config.platform === "tanstack" &&
+    context.config.style.scheme === "css"
+  ) {
+    // In Tanstack we import css as url such as ".css?url" at the moment
+    result = `${result}?url`;
+  }
+
   return result;
 }
 

package/src/utils/config-utils.ts

@@ -27,7 +27,7 @@ export const ENV_AUTH_TOKEN = "PLASMIC_AUTH_TOKEN";
 
 export interface PlasmicConfig {
   /** Target platform to generate code for */
-  platform: "react" | "nextjs" | "gatsby";
+  platform: "react" | "nextjs" | "gatsby" | "tanstack";
 
   /**
    * The folder containing the component source files; this is the default place where
@@ -56,6 +56,12 @@ export interface PlasmicConfig {
     pagesDir?: string;
   };
 
+  /** Tanstack-specific config */
+  tanstackConfig?: {
+    /** The folder containing page components source files. */
+    pagesDir?: string;
+  };
+
   /** Config for code generation */
   code: CodeConfig;
 
@@ -636,5 +642,7 @@ export function getOrAddProjectLock(
 }
 
 export function isPageAwarePlatform(platform: string): boolean {
-  return platform === "nextjs" || platform === "gatsby";
+  return (
+    platform === "nextjs" || platform === "gatsby" || platform === "tanstack"
+  );
 }

package/src/utils/envdetect.ts

@@ -46,3 +46,12 @@ export function detectCreateReactApp() {
     return false;
   }
 }
+
+export function detectTanStackApp() {
+  try {
+    const packageJsonContent = getParsedPackageJson();
+    return "@tanstack/react-router" in packageJsonContent.dependencies;
+  } catch {
+    return false;
+  }
+}

package/src/utils/file-utils.ts

@@ -81,7 +81,10 @@ const EXT_REGEXP = /\.(jsx|tsx)$/;
 
 export function defaultPagePath(
   context: {
-    config: Pick<PlasmicConfig, "platform" | "gatsbyConfig" | "nextjsConfig">;
+    config: Pick<
+      PlasmicConfig,
+      "platform" | "gatsbyConfig" | "nextjsConfig" | "tanstackConfig"
+    >;
   },
   fileName: string
 ) {
@@ -106,6 +109,20 @@ export function defaultPagePath(
     }
   } else if (context.config.platform === "gatsby") {
     return path.join(context.config.gatsbyConfig?.pagesDir || "", fileName);
+  } else if (context.config.platform === "tanstack") {
+    // use $ for dynamic paths, convert "/posts/[postId]" to "/posts/$postId"
+    let renamedFileName = fileName.replace(/\[(\w+)\]/g, "$$$1");
+
+    const matchesIndex = fileName.match(INDEX_EXT_REGEXP);
+    if (!matchesIndex) {
+      // convert "/foo/bar.tsx" to "/foo/bar/index.tsx"
+      renamedFileName = renamedFileName.replace(EXT_REGEXP, "/index.$1");
+    }
+
+    return path.join(
+      context.config.tanstackConfig?.pagesDir || "",
+      renamedFileName
+    );
   } else {
     return fileName;
   }
@@ -351,6 +368,9 @@ function getAllPaths(context: PlasmicContext): BundleKeyPair[] {
   if (config.nextjsConfig) {
     pushPath(config.nextjsConfig, "pagesDir");
   }
+  if (config.tanstackConfig) {
+    pushPath(config.tanstackConfig, "pagesDir");
+  }
 
   return pairs;
 }