xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

moves style init to initializer. fix i18n loading (#723)

Browse source 
Co-authored-by: Timo K <timok@element.io>
This commit is contained in:
Timo 2022-11-04 18:29:40 +01:00 • committed by GitHub
parent 123763afec
commit cafac39733
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 92 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

124
src/initializer.tsx
View file

@ -36,7 +36,6 @@ class DependencyLoadStates {
// olm: LoadState = LoadState.None; // olm: LoadState = LoadState.None;
config: LoadState = LoadState.None; config: LoadState = LoadState.None;
sentry: LoadState = LoadState.None; sentry: LoadState = LoadState.None;
i18n: LoadState = LoadState.None;
allDepsAreLoaded() { allDepsAreLoaded() {
return !Object.values(this).some((s) => s !== LoadState.Loaded); return !Object.values(this).some((s) => s !== LoadState.Loaded);
@ -45,6 +44,96 @@ class DependencyLoadStates {
export class Initializer { export class Initializer {
private static internalInstance: Initializer; private static internalInstance: Initializer;
public static initBeforeReact() {
// this maybe also needs to return a promise in the future,
// if we have to do async inits before showing the loading screen
// but this should be avioded if possible
//i18n
const languageDetector = new LanguageDetector();
languageDetector.addDetector({
name: "urlFragment",
// Look for a language code in the URL's fragment
lookup: () => getUrlParams().lang ?? undefined,
});
i18n
.use(Backend)
.use(languageDetector)
.use(initReactI18next)
.init({
fallbackLng: "en-GB",
defaultNS: "app",
keySeparator: false,
nsSeparator: false,
pluralSeparator: "|",
contextSeparator: "|",
interpolation: {
escapeValue: false, // React has built-in XSS protections
},
detection: {
// No localStorage detectors or caching here, since we don't have any way
// of letting the user manually select a language
order: ["urlFragment", "navigator"],
caches: [],
},
});
// Custom Themeing
if (import.meta.env.VITE_CUSTOM_THEME) {
const style = document.documentElement.style;
style.setProperty(
"--accent",
import.meta.env.VITE_THEME_ACCENT as string
);
style.setProperty(
"--accent-20",
import.meta.env.VITE_THEME_ACCENT_20 as string
);
style.setProperty("--alert", import.meta.env.VITE_THEME_ALERT as string);
style.setProperty(
"--alert-20",
import.meta.env.VITE_THEME_ALERT_20 as string
);
style.setProperty("--links", import.meta.env.VITE_THEME_LINKS as string);
style.setProperty(
"--primary-content",
import.meta.env.VITE_THEME_PRIMARY_CONTENT as string
);
style.setProperty(
"--secondary-content",
import.meta.env.VITE_THEME_SECONDARY_CONTENT as string
);
style.setProperty(
"--tertiary-content",
import.meta.env.VITE_THEME_TERTIARY_CONTENT as string
);
style.setProperty(
"--tertiary-content-20",
import.meta.env.VITE_THEME_TERTIARY_CONTENT_20 as string
);
style.setProperty(
"--quaternary-content",
import.meta.env.VITE_THEME_QUATERNARY_CONTENT as string
);
style.setProperty(
"--quinary-content",
import.meta.env.VITE_THEME_QUINARY_CONTENT as string
);
style.setProperty(
"--system",
import.meta.env.VITE_THEME_SYSTEM as string
);
style.setProperty(
"--background",
import.meta.env.VITE_THEME_BACKGROUND as string
);
style.setProperty(
"--background-85",
import.meta.env.VITE_THEME_BACKGROUND_85 as string
);
}
}
public static init(): Promise<void> | null { public static init(): Promise<void> | null {
if (Initializer?.internalInstance?.initPromise) { if (Initializer?.internalInstance?.initPromise) {
@ -104,39 +193,6 @@ export class Initializer {
this.loadStates.sentry = LoadState.Loaded; this.loadStates.sentry = LoadState.Loaded;
} }
//i18n
if (this.loadStates.i18n === LoadState.None) {
const languageDetector = new LanguageDetector();
languageDetector.addDetector({
name: "urlFragment",
// Look for a language code in the URL's fragment
lookup: () => getUrlParams().lang ?? undefined,
});
i18n
.use(Backend)
.use(languageDetector)
.use(initReactI18next)
.init({
fallbackLng: "en-GB",
defaultNS: "app",
keySeparator: false,
nsSeparator: false,
pluralSeparator: "|",
contextSeparator: "|",
interpolation: {
escapeValue: false, // React has built-in XSS protections
},
detection: {
// No localStorage detectors or caching here, since we don't have any way
// of letting the user manually select a language
order: ["urlFragment", "navigator"],
caches: [],
},
});
this.loadStates.i18n = LoadState.Loaded;
}
if (this.loadStates.allDepsAreLoaded()) { if (this.loadStates.allDepsAreLoaded()) {
// resolve if there is no dependency that is not loaded // resolve if there is no dependency that is not loaded
resolve(); resolve();

49
src/main.tsx
View file

@ -27,6 +27,7 @@ import { createBrowserHistory } from "history";
import "./index.css"; import "./index.css";
import App from "./App"; import App from "./App";
import { init as initRageshake } from "./settings/rageshake"; import { init as initRageshake } from "./settings/rageshake";
import { Initializer } from "./initializer";
initRageshake(); initRageshake();
@ -51,53 +52,7 @@ if (fatalError !== null) {
throw fatalError; // Stop the app early throw fatalError; // Stop the app early
} }
if (import.meta.env.VITE_CUSTOM_THEME) { Initializer.initBeforeReact();
const style = document.documentElement.style;
style.setProperty("--accent", import.meta.env.VITE_THEME_ACCENT as string);
style.setProperty(
"--accent-20",
import.meta.env.VITE_THEME_ACCENT_20 as string
);
style.setProperty("--alert", import.meta.env.VITE_THEME_ALERT as string);
style.setProperty(
"--alert-20",
import.meta.env.VITE_THEME_ALERT_20 as string
);
style.setProperty("--links", import.meta.env.VITE_THEME_LINKS as string);
style.setProperty(
"--primary-content",
import.meta.env.VITE_THEME_PRIMARY_CONTENT as string
);
style.setProperty(
"--secondary-content",
import.meta.env.VITE_THEME_SECONDARY_CONTENT as string
);
style.setProperty(
"--tertiary-content",
import.meta.env.VITE_THEME_TERTIARY_CONTENT as string
);
style.setProperty(
"--tertiary-content-20",
import.meta.env.VITE_THEME_TERTIARY_CONTENT_20 as string
);
style.setProperty(
"--quaternary-content",
import.meta.env.VITE_THEME_QUATERNARY_CONTENT as string
);
style.setProperty(
"--quinary-content",
import.meta.env.VITE_THEME_QUINARY_CONTENT as string
);
style.setProperty("--system", import.meta.env.VITE_THEME_SYSTEM as string);
style.setProperty(
"--background",
import.meta.env.VITE_THEME_BACKGROUND as string
);
style.setProperty(
"--background-85",
import.meta.env.VITE_THEME_BACKGROUND_85 as string
);
}
const history = createBrowserHistory(); const history = createBrowserHistory();