// src/index.ts import { parse } from "node-html-parser"; import { join } from "path"; import { writeFileSync } from "fs"; import * as url from "url"; import { readdirSync, existsSync, readFileSync, statSync } from "fs"; function inject_ejs() { return { name: "inject-ejs", enforce: "post", transformIndexHtml: (html) => { const replace_gradio_info_info_html = html.replace( /%gradio_api_info%/, `` ); return replace_gradio_info_info_html.replace( /%gradio_config%/, `` ); } }; } function generate_cdn_entry({ version, cdn_base }) { return { name: "generate-cdn-entry", enforce: "post", writeBundle(config, bundle) { if (!config.dir || !bundle["index.html"] || bundle["index.html"].type !== "asset") return; const source = bundle["index.html"].source; const tree = parse(source); const script = Array.from( tree.querySelectorAll("script[type=module]") ).find((node) => node.attributes.src?.includes("assets")); const output_location = join(config.dir, "gradio.js"); writeFileSync(output_location, make_entry(script?.attributes.src || "")); if (!script) return; const transformed_html = bundle["index.html"].source.substring(0, script?.range[0]) + `` + bundle["index.html"].source.substring( script?.range[1], source.length ); const share_html_location = join(config.dir, "share.html"); writeFileSync(share_html_location, transformed_html); } }; } var RE_SVELTE_IMPORT = /import\s+([\w*{},\s]+)\s+from\s+['"](svelte|svelte\/internal)['"]/g; function generate_dev_entry({ enable }) { return { name: "generate-dev-entry", transform(code, id) { if (!enable) return; const new_code = code.replace(RE_SVELTE_IMPORT, (str, $1, $2) => { return `const ${$1.replace(/\* as /, "").replace(/ as /g, ": ")} = window.__gradio__svelte__internal;`; }); return { code: new_code, map: null }; } }; } function make_entry(script) { return `import("${script}"); `; } function handle_ce_css() { return { enforce: "post", name: "custom-element-css", writeBundle(config, bundle) { let file_to_insert = { filename: "", source: "" }; if (!config.dir || !bundle["index.html"] || bundle["index.html"].type !== "asset") return; for (const key in bundle) { const chunk = bundle[key]; if (chunk.type === "chunk") { const _chunk = chunk; const found = _chunk.code?.indexOf("ENTRY_CSS"); if (found > -1) file_to_insert = { filename: join(config.dir, key), source: _chunk.code }; } } const tree = parse(bundle["index.html"].source); const { style, fonts } = Array.from( tree.querySelectorAll("link[rel=stylesheet]") ).reduce( (acc, next) => { if (/.*\/index(.*?)\.css/.test(next.attributes.href)) { return { ...acc, style: next }; } return { ...acc, fonts: [...acc.fonts, next.attributes.href] }; }, { fonts: [], style: void 0 } ); writeFileSync( file_to_insert.filename, file_to_insert.source.replace("__ENTRY_CSS__", style.attributes.href).replace( '"__FONTS_CSS__"', `[${fonts.map((f) => `"${f}"`).join(",")}]` ) ); const share_html_location = join(config.dir, "share.html"); const share_html = readFileSync(share_html_location, "utf8"); const share_tree = parse(share_html); const node = Array.from( share_tree.querySelectorAll("link[rel=stylesheet]") ).find((node2) => /.*\/index(.*?)\.css/.test(node2.attributes.href)); if (!node) return; const transformed_html = share_html.substring(0, node.range[0]) + share_html.substring(node.range[1], share_html.length); writeFileSync(share_html_location, transformed_html); } }; } var __filename = url.fileURLToPath(import.meta.url); var __dirname = url.fileURLToPath(new URL(".", import.meta.url)); function get_export_path(path, root, pkg_json) { if (!pkg_json.exports) return false; if (typeof pkg_json.exports[`${path}`] === "object") return true; const _path = join(root, "..", `${pkg_json.exports[`${path}`]}`); return existsSync(_path); } var ignore_list = [ "tootils", "_cdn-test", "_spaces-test", "_website", "app", "atoms", "fallback", "icons", "lite", "preview", "simpledropdown", "simpleimage", "simpletextbox", "storybook", "theme", "timeseries", "tooltip", "upload", "utils", "wasm" ]; function generate_component_imports() { const exports = readdirSync(join(__dirname, "..", "..")).map((dir) => { if (ignore_list.includes(dir)) return void 0; if (!statSync(join(__dirname, "..", "..", dir)).isDirectory()) return void 0; const package_json_path = join(__dirname, "..", "..", dir, "package.json"); if (existsSync(package_json_path)) { const package_json = JSON.parse( readFileSync(package_json_path, "utf8") ); const component = get_export_path(".", package_json_path, package_json); const example = get_export_path( "./example", package_json_path, package_json ); const base = get_export_path("./base", package_json_path, package_json); if (!component && !example) return void 0; return { name: package_json.name, component, example, base }; } return void 0; }).filter((x) => x !== void 0); const imports = exports.reduce((acc, _export) => { if (!_export) return acc; const example = _export.example ? `example: () => import("${_export.name}/example"), ` : ""; const base = _export.base ? `base: () => import("${_export.name}/base"), ` : ""; return `${acc}"${_export.name.replace("@gradio/", "")}": { ${base} ${example} component: () => import("${_export.name}") }, `; }, ""); return imports; } function load_virtual_component_loader(mode) { const loader_path = join(__dirname, "component_loader.js"); let component_map = ""; if (mode === "test") { component_map = ` const component_map = { "test-component-one": { component: () => import("@gradio-test/test-one"), example: () => import("@gradio-test/test-one/example") }, "dataset": { component: () => import("@gradio-test/test-two"), example: () => import("@gradio-test/test-two/example") }, "image": { component: () => import("@gradio/image"), example: () => import("@gradio/image/example"), base: () => import("@gradio/image/base") }, "audio": { component: () => import("@gradio/audio"), example: () => import("@gradio/audio/example"), base: () => import("@gradio/audio/base") }, "video": { component: () => import("@gradio/video"), example: () => import("@gradio/video/example"), base: () => import("@gradio/video/base") }, // "test-component-one": { // component: () => import("@gradio-test/test-one"), // example: () => import("@gradio-test/test-one/example") // }, }; `; } else { component_map = ` const component_map = { ${generate_component_imports()} }; `; } return `${component_map} ${readFileSync(loader_path, "utf8")}`; } function inject_component_loader({ mode }) { const v_id = "virtual:component-loader"; const resolved_v_id = "\0" + v_id; return { name: "inject-component-loader", enforce: "pre", resolveId(id) { if (id === v_id) return resolved_v_id; }, load(id) { this.addWatchFile(join(__dirname, "component_loader.js")); if (id === resolved_v_id) { return load_virtual_component_loader(mode); } } }; } function resolve_svelte(enable) { return { enforce: "pre", name: "resolve-svelte", async resolveId(id) { if (!enable) return; if (id === "./svelte/svelte.js" || id === "svelte" || id === "svelte/internal") { const mod = join( __dirname, "..", "..", "..", "gradio", "templates", "frontend", "assets", "svelte", "svelte.js" ); return { id: mod, external: "absolute" }; } } }; } function mock_modules() { const v_id_1 = "@gradio-test/test-one"; const v_id_2 = "@gradio-test/test-two"; const v_id_1_example = "@gradio-test/test-one/example"; const v_id_2_example = "@gradio-test/test-two/example"; const resolved_v_id = "\0" + v_id_1; const resolved_v_id_2 = "\0" + v_id_2; const resolved_v_id_1_example = "\0" + v_id_1_example; const resolved_v_id_2_example = "\0" + v_id_2_example; const fallback_example = "@gradio/fallback/example"; const resolved_fallback_example = "\0" + fallback_example; return { name: "mock-modules", enforce: "pre", resolveId(id) { if (id === v_id_1) return resolved_v_id; if (id === v_id_2) return resolved_v_id_2; if (id === v_id_1_example) return resolved_v_id_1_example; if (id === v_id_2_example) return resolved_v_id_2_example; if (id === fallback_example) return resolved_fallback_example; }, load(id) { if (id === resolved_v_id || id === resolved_v_id_2 || id === resolved_v_id_1_example || id === resolved_v_id_2_example || id === resolved_fallback_example) { return `export default {}`; } } }; } export { generate_cdn_entry, generate_dev_entry, handle_ce_css, inject_component_loader, inject_ejs, mock_modules, resolve_svelte };