mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-03-01 11:45:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

Move mount_css() from main.ts to css.ts (#4222)

Browse Source 
* Move mount_css() from main.ts to css.ts because these is a circular dependency between main.ts and Index.svelte (and it will help the development of the Wasm ver in the future)

* changelog

---------

Co-authored-by: pngwn <hello@pngwn.io>
This commit is contained in:
Yuichiro Tachibana (Tsuchiya) 2023-05-17 13:38:21 +03:00 committed by GitHub
parent b0cccb43d6
commit 0a01388dec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 21 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -9,6 +9,7 @@ No changes to highlight.
## Other Changes:
- Refactor web component `initial_height` attribute by [@whitphx](https://github.com/whitphx) in [PR 4223](https://github.com/gradio-app/gradio/pull/4223)
- Relocate `mount_css` fn to remove circular dependency [@whitphx](https://github.com/whitphx) in [PR 4222](https://github.com/gradio-app/gradio/pull/4222)
## Breaking Changes:

2
js/app/src/Index.svelte
View File

@ -1,6 +1,6 @@
<script context="module" lang="ts">
import { writable } from "svelte/store";
import { mount_css } from "./main";
import { mount_css } from "./css";
import type {
ComponentMeta,

18
js/app/src/css.ts Normal file
View File

@ -0,0 +1,18 @@
export function mount_css(url: string, target: HTMLElement): Promise<void> {
const existing_link = document.querySelector(`link[href='${url}']`);
if (existing_link) return Promise.resolve();
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = url;
// @ts-ignore
target.appendChild(link);
return new Promise((res, rej) => {
link.addEventListener("load", () => res());
link.addEventListener("error", () =>
rej(new Error(`Unable to preload CSS for ${url}`))
);
});
}

20
js/app/src/main.ts
View File

@ -1,4 +1,5 @@
import "@gradio/theme";
import { mount_css } from "./css";
import Index from "./Index.svelte";
import type { ThemeMode } from "./components/types";
@ -11,25 +12,6 @@ let FONTS: string | [];
FONTS = "__FONTS_CSS__";
export function mount_css(url: string, target: HTMLElement): Promise<void> {
const existing_link = document.querySelector(`link[href='${url}']`);
if (existing_link) return Promise.resolve();
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = url;
// @ts-ignore
target.appendChild(link);
return new Promise((res, rej) => {
link.addEventListener("load", () => res());
link.addEventListener("error", () =>
rej(new Error(`Unable to preload CSS for ${url}`))
);
});
}
function create_custom_element() {
class GradioApp extends HTMLElement {
constructor() {