gradio/ui/packages/app/vite.config.js
pngwn 1e99873fa5
1957 embed pretty (#3205)
* changes

* changes

* fix all things

* fix root

* fix ids

* tweaks

* twaks

* handle whitespace

* tweaks and fix checks

* revert demo change

* formatting

* formatting

* regen notebooks

* add eager attribute

* tweaks + formatting

* changelog

* fix

* fix

* fix css stuff

* tweak timeout when pollig

* format

* tweak

* format
2023-02-17 18:51:00 +00:00

124 lines
3.0 KiB
JavaScript

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import sveltePreprocess from "svelte-preprocess";
// @ts-ignore
import custom_media from "postcss-custom-media";
// @ts-ignore
import prefixer from "postcss-prefix-selector";
import { readFileSync } from "fs";
import { join } from "path";
const version_path = join(__dirname, "..", "..", "..", "gradio", "version.txt");
const version = readFileSync(version_path, { encoding: "utf-8" })
.trim()
.replace(/\./g, "-");
import {
inject_ejs,
patch_dynamic_import,
generate_cdn_entry,
handle_ce_css
} from "./build_plugins";
const GRADIO_VERSION = process.env.GRADIO_VERSION || "asd_stub_asd";
const TEST_CDN = !!process.env.TEST_CDN;
const CDN = TEST_CDN
? "http://localhost:4321/"
: `https://gradio.s3-us-west-2.amazonaws.com/${GRADIO_VERSION}/`;
//@ts-ignore
export default defineConfig(({ mode }) => {
const CDN_URL = mode === "production:cdn" ? CDN : "/";
const production =
mode === "production:cdn" ||
mode === "production:local" ||
mode === "production:website";
const is_cdn = mode === "production:cdn" || mode === "production:website";
return {
base: is_cdn ? CDN_URL : "./",
server: {
port: 9876
},
build: {
sourcemap: true,
target: "esnext",
minify: production,
outDir: `../../../gradio/templates/${is_cdn ? "cdn" : "frontend"}`
},
define: {
BUILD_MODE: production ? JSON.stringify("prod") : JSON.stringify("dev"),
BACKEND_URL: production
? JSON.stringify("")
: JSON.stringify("http://localhost:7860/"),
GRADIO_VERSION: JSON.stringify(version)
},
css: {
postcss: {
plugins: [
prefixer({
prefix: `.gradio-container-${version}`,
// @ts-ignore
transform(prefix, selector, prefixedSelector, fileName) {
if (selector.indexOf("gradio-container") > -1) {
return prefix;
} else if (
selector.indexOf(":root") > -1 ||
selector.indexOf("dark") > -1 ||
fileName.indexOf(".svelte") > -1
) {
return selector;
} else {
return prefixedSelector;
}
}
}),
custom_media({
importFrom: [
{
customMedia: {
"--screen-sm": "(min-width: 640px)",
"--screen-md": "(min-width: 768px)",
"--screen-lg": "(min-width: 1024px)",
"--screen-xl": "(min-width: 1280px)",
"--screen-xxl": "(min-width: 1536px)"
}
}
]
})
]
}
},
plugins: [
svelte({
experimental: {
inspector: true
},
compilerOptions: {
dev: !production
},
hot: !process.env.VITEST && !production,
preprocess: sveltePreprocess({
postcss: {
plugins: [custom_media()]
}
})
}),
inject_ejs(),
patch_dynamic_import({
mode: is_cdn ? "cdn" : "local",
gradio_version: GRADIO_VERSION,
cdn_url: CDN_URL
}),
generate_cdn_entry({ enable: is_cdn, cdn_url: CDN_URL }),
handle_ce_css()
],
test: {
environment: "happy-dom",
include: ["**/*.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"]
}
};
});