import { DeepPartial } from "utility-types";
import { PlasmicApi } from "../api";
export declare const DEFAULT_HOST: string;
export declare const AUTH_FILE_NAME = ".plasmic.auth";
export declare const CONFIG_FILE_NAME = "plasmic.json";
export declare const LOCK_FILE_NAME = "plasmic.lock";
export declare const CONFIG_SCHEMA_FILE_NAME = "plasmic.schema.json";
export declare const ENV_AUTH_HOST = "PLASMIC_AUTH_HOST";
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" | "tanstack";
/**
* The folder containing the component source files; this is the default place where
* all files are generated and stored.
*/
srcDir: string;
/**
* The default folder where Plasmic-managed files will be stored. These include
* blackbox component files, svg component files, style files, etc. The path
* is relative to the srcDir.
*/
defaultPlasmicDir: string;
/**
* Next.js specific config
*/
nextjsConfig?: {
/** The folder containing page components source files. */
pagesDir?: string;
};
/** Gatsby-specific config */
gatsbyConfig?: {
/** 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 */
images: ImagesConfig;
/** Config for fonts import */
fontOpts?: FontConfig;
/** Config for style generation */
style: StyleConfig;
/** Config for style tokens */
tokens: TokensConfig;
/** Metadata for global variant groups */
globalVariants: GlobalVariantsConfig;
/** Metadata for each project that has been synced */
projects: ProjectConfig[];
/** Wether we should wrap the pages with the project global contexts or not */
wrapPagesWithGlobalContexts: boolean;
/** Whether to preserve js / ts / jsx / tsx file extensions in import statements */
preserveJsImportExtensions: boolean;
/** The version of cli when this file was written */
cliVersion?: string;
/** Configuration for localization */
i18n?: I18NConfig;
/** Arbitrary command to run after `plasmic sync` has run; useful for linting and code formatting synced files */
postSyncCommands?: string[];
/**
* Package manager to use when installing or upgrading required
* packages. If not specified, then it is best-effort automatically
* derived.
*/
packageManager?: "npm" | "yarn" | "yarn2" | "pnpm";
}
export interface CodeConfig {
/** Language to generate code in */
lang: "ts" | "js";
/** The default code generation scheme. Each component can override the scheme. */
scheme: "blackbox";
reactRuntime: "classic" | "automatic";
}
export interface StyleConfig {
/** Styling framework to use */
scheme: "css" | "css-modules";
/** File location for global css styles shared by all components. Relative to srcDir */
defaultStyleCssFilePath: string;
skipGlobalCssImport?: boolean;
}
export interface ImagesConfig {
/**
* How image files should be referenced from generated React components. The choices are:
* * "files" - imported as relative files, like "import img from './image.png'". Not all bundlers support this.
* * "public-files" - images are stored in a public folder, and referenced from some url prefix, like `
`.
* * "inlined" - inlined directly into React files and css files as base64-encoded data-URIs.
* * "cdn" - images are served from Plasmic's CDN. Allows for dynamic resizing of images for
* serving the optimal file size given browser viewport.
*/
scheme: "inlined" | "files" | "public-files" | "cdn";
/**
* The folder where "public" static files are stored. Plasmic-managed image files will be stored as "plasmic/project-name/image-name" under this folder. Relative to srcDir; for example, "../public"
*/
publicDir?: string;
/**
* The url prefix where "public" static files are stored. For example, if publicDir is "public", publicUrlPrefix is "/static", then a file at public/test.png will be served at /static/test.png.
*/
publicUrlPrefix?: string;
}
export interface CodeComponentConfig {
id: string;
name: string;
displayName: string;
componentImportPath: string;
helper?: {
name: string;
importPath: string;
};
}
export interface CustomFunctionConfig {
id: string;
name: string;
namespace?: string | null;
importPath: string;
defaultExport: boolean;
}
export interface ProjectConfig {
/** Project ID */
projectId: string;
/** Project API token. Grants read-only sync access to just this specific project and its dependencies. */
projectApiToken?: string;
/** Project name synced down from Studio */
projectName: string;
/** Project branch to be synced */
projectBranchName?: string;
/**
* A version range for syncing this project. Can be:
* * "latest" - always syncs down whatever has been saved in the project.
* * ">0" - always syncs down the latest published version of the project.
* * any other semver string you'd like
*/
version: string;
/** File location for the project-wide css styles. Relative to srcDir */
cssFilePath: string;
/** File location for the project-wide global contexts. Relative to srcDir */
globalContextsFilePath: string;
/** File location for the project-wide splits provider. Relative to srcDir */
splitsProviderFilePath: string;
/** File location for the project-wide style tokens provider. Relative to srcDir */
styleTokensProviderFilePath: string;
/** File location for the project-wide data tokens provider. Relative to srcDir */
dataTokensFilePath: string;
/** File location for the project-wide plasmic.ts file. Relative to srcDir */
projectModuleFilePath: string;
codeComponents?: CodeComponentConfig[];
customFunctions?: CustomFunctionConfig[];
/** Metadata for each synced component in this project. */
components: ComponentConfig[];
/** Metadata for each synced icon in this project */
icons: IconConfig[];
/** Metadata for each synced image in this project */
images: ImageConfig[];
/**
* True if the project was installed indirectly (as a dependency); if set,
* codegen will not generate pages.
*/
indirect: boolean;
}
export declare function createProjectConfig(base: {
projectId: string;
projectApiToken: string;
projectName: string;
version: string;
cssFilePath: string;
indirect: boolean;
}): ProjectConfig;
export interface TokensConfig {
scheme: "theo";
tokensFilePath: string;
}
/**
* Describes how to import a Component
*/
export interface ImportSpec {
/**
* The import path to use to instantiate this Component. The modulePath can be:
* * An external npm module, like "antd/lib/button"
* * A local file, like "components/Button.tsx" (path is relative to srcDir, and file extension is fully specified). If local file is specified, then the module is imported via relative path.
*
* For this to be an external npm module, the ComponentConfig.type must be "mapped".
*/
modulePath: string;
/**
* If the Component is a named export of the module, then this is the name. If the Component
* is the default export, then this is undefined.
*/
exportName?: string;
}
export interface ComponentConfig {
/** Component ID */
id: string;
/** Javascript name of component */
name: string;
/** Plasmic project that this component belongs in */
projectId: string;
/** Whether this component is managed by Plasmic -- with Plasmic* files generated -- or mapped to an external library */
type: "managed" | "mapped";
/** How to import this Component from another component file */
importSpec: ImportSpec;
/** The file path for the blackbox render module, relative to srcDir. */
renderModuleFilePath: string;
/** The file path for the component css file, relative to srcDir. */
cssFilePath: string;
/** Code generation scheme used for this component */
scheme: "blackbox" | "direct";
componentType: "page" | "component";
/** Page path if the component is a page */
path?: string;
/** Plume type if component is a Plume component */
plumeType?: string;
/**
* RSC metadata for this component. The structure of the config changes when this is set:
* renderModuleFilePath points to the client blackbox render module.
* importSpec points to the server skeleton file.
*/
rsc?: {
/** The server blackbox render module */
serverModulePath: string;
/** The client skeleton file */
clientModulePath: string;
};
}
export interface IconConfig {
/** ID of icon */
id: string;
/** Javascript name of the React component for this icon */
name: string;
/** The file path for the React component file for this icon, relative to srcDir. */
moduleFilePath: string;
}
export interface ImageConfig {
/** ID of image */
id: string;
/** name of image */
name: string;
/** File path for the image file, relative to srcDir */
filePath: string;
}
export interface FontConfig {
/** "import" generates `@import url(...)`
*
* "none" doesn't generate anything; you need to load the font yourself.
*/
scheme: "import" | "none";
}
export interface GlobalVariantsConfig {
variantGroups: GlobalVariantGroupConfig[];
}
export interface GlobalVariantGroupConfig {
/** ID of the global variant group */
id: string;
/** Javascript name of the global variant group */
name: string;
/** Plasmic project this global variant group belongs to */
projectId: string;
/** File path for the global variant group React context definition, relative to srcDir */
contextFilePath: string;
}
export interface FileLock {
type: "renderModule" | "cssRules" | "icon" | "image" | "projectCss" | "globalVariant" | "globalContexts" | "splitsProvider" | "styleTokensProvider" | "dataTokens" | "projectModule";
checksum: string;
assetId: string;
}
export interface ProjectLock {
projectId: string;
branchName: string;
version: string;
dependencies: {
[projectId: string]: string;
};
lang: "ts" | "js";
fileLocks: FileLock[];
codegenVersion?: string;
}
export interface I18NConfig {
/**
* For localization, whether the extracted strings are keyed by its content,
* or by a hash of its content, or by where the string is found ("path")
*/
keyScheme: "content" | "hash" | "path";
/**
* For localization, rich text with embedded tags are exported as
* "Hello <0>there0>, I am <1>here1>". Some frameworks, like
* react-intl, doesn't work with numbers as tag names, so you can
* specify a prefix. For example, a tagPrefix of "n" turns the above
* into "Hello there, I am here".
*/
tagPrefix?: string;
}
export interface PlasmicLock {
projects: ProjectLock[];
cliVersion?: string;
}
/**
* PlasmicContext is the PlasmicConfig plus context in which the PlasmicConfig was
* created.
*/
export interface PlasmicContext {
configFile: string;
lockFile: string;
rootDir: string;
absoluteSrcDir: string;
config: PlasmicConfig;
lock: PlasmicLock;
auth: AuthConfig;
api: PlasmicApi;
cliArgs: any;
}
export interface AuthConfig {
host: string;
user: string;
token: string;
basicAuthUser?: string;
basicAuthPassword?: string;
}
export declare const DEFAULT_CONFIG: PlasmicConfig;
export declare const DEFAULT_PUBLIC_FILES_CONFIG: ImagesConfig;
/**
* Finds the full path to the plasmic.json file in `dir`. If
* `opts.traverseParents` is set to true, then will also look in ancestor
* directories until the plasmic.json file is found. If none is found,
* returns undefined.
*/
export declare function findConfigFile(dir: string, opts: {
traverseParents?: boolean;
}): string | undefined;
/**
* Given some partial configs for PlasmicConfig, fills in all required fields
* with default values.
*/
export declare function fillDefaults(config: DeepPartial): PlasmicConfig;
export declare function readConfig(configFile: string, autoFillDefaults: boolean): PlasmicConfig;
export declare function writeConfig(configFile: string, config: PlasmicConfig): Promise;
export declare function writeLock(lockFile: string, lock: PlasmicLock): Promise;
export declare function updateConfig(context: PlasmicContext, newConfig: PlasmicConfig): Promise;
export declare function getOrAddProjectConfig(context: PlasmicContext, projectId: string, base?: ProjectConfig): ProjectConfig;
export declare function getOrAddProjectLock(context: PlasmicContext, projectId: string, branchName: string, base?: ProjectLock): ProjectLock;
export declare function isPageAwarePlatform(platform: string): boolean;