@hanzogui/theme 2.0.0-rc.41-hanzoai.5

package/src/_mutateTheme.ts

@@ -0,0 +1,197 @@
+import { isServer } from '@hanzogui/constants'
+import { startTransition } from '@hanzogui/start-transition'
+import type { ThemeDefinition, ThemeParsed } from '@hanzogui/web'
+import {
+  ensureThemeVariable,
+  forceUpdateThemes,
+  getConfig,
+  getThemeCSSRules,
+  mutatedAutoVariables,
+  proxyThemeToParents,
+  simpleHash,
+  updateConfig,
+} from '@hanzogui/web'
+
+type MutateThemeOptions = {
+  mutationType: 'replace' | 'update' | 'add'
+  insertCSS?: boolean
+  avoidUpdate?: boolean
+}
+
+type PartialTheme = Partial<Record<keyof ThemeDefinition, any>>
+
+export type MutateOneThemeProps = {
+  name: string
+  theme: PartialTheme
+}
+
+// need to name the batch in case the theme amount changes so it removes properly
+type Batch = boolean | string
+
+// more advanced helper used only internally in studio for now
+export function mutateThemes({
+  themes,
+  batch,
+  insertCSS = true,
+  ...props
+}: Omit<MutateThemeOptions, 'mutationType'> & {
+  themes: MutateOneThemeProps[] // if using batch, know that if you later on do addTheme/etc it will break things
+  // batch is only useful if you know youre only ever going to change these themes using batch
+  // aka only in studio as a preview mode
+  batch?: Batch
+}) {
+  const allThemesProxied: Record<string, ThemeParsed> = {}
+  const allThemesRaw: Record<string, ThemeParsed> = {}
+  for (const { name, theme } of themes) {
+    const res = _mutateTheme({
+      ...props,
+      name,
+      theme,
+      // we'll do one update at the end
+      avoidUpdate: true,
+      // always add which also replaces but doesnt fail first time
+      mutationType: 'add',
+    })
+    if (res) {
+      allThemesProxied[name] = res.theme
+      allThemesRaw[name] = res.themeRaw
+    }
+  }
+
+  const cssRules = insertCSS ? insertThemeCSS(allThemesRaw, batch) : []
+
+  startTransition(() => {
+    for (const themeName in allThemesProxied) {
+      const theme = allThemesProxied[themeName]
+      updateThemeConfig(themeName, theme)
+    }
+    updateThemeStates()
+  })
+
+  return {
+    themes: allThemesProxied,
+    themesRaw: allThemesRaw,
+    cssRules,
+  }
+}
+
+export function _mutateTheme(props: MutateThemeOptions & MutateOneThemeProps) {
+  if (isServer) {
+    if (process.env.NODE_ENV === 'development') {
+      console.warn('Theme mutation is not supported on server side')
+    }
+    return
+  }
+  const config = getConfig()
+  const { name: themeName, theme: themeIn, insertCSS, mutationType } = props
+
+  if (process.env.NODE_ENV === 'development') {
+    if (!config) {
+      throw new Error('No config')
+    }
+    const theme = config.themes[props.name]
+
+    if (mutationType !== 'add' && !theme) {
+      throw new Error(
+        `${mutationType === 'replace' ? 'Replace' : 'Update'} theme failed! Theme ${
+          props.name
+        } does not exist`
+      )
+    }
+  }
+
+  const theme = {
+    ...(mutationType === 'update' ? (config.themes[themeName] ?? {}) : {}),
+    ...themeIn,
+  } as ThemeParsed
+
+  for (const key in theme) {
+    ensureThemeVariable(theme, key)
+  }
+
+  const themeProxied = proxyThemeToParents(themeName, theme)
+
+  const response = {
+    themeRaw: theme,
+    theme: themeProxied,
+    cssRules: [] as string[],
+  }
+
+  if (props.avoidUpdate) {
+    return response
+  }
+
+  if (insertCSS) {
+    response.cssRules = insertThemeCSS({
+      [themeName]: theme,
+    })
+  }
+
+  updateThemeConfig(themeName, themeProxied)
+  updateThemeStates()
+
+  return response
+}
+
+function updateThemeConfig(themeName: string, theme: ThemeParsed) {
+  const config = getConfig()
+  config.themes[themeName] = theme
+  updateConfig('themes', config.themes)
+}
+
+function updateThemeStates() {
+  forceUpdateThemes()
+}
+
+function insertThemeCSS(themes: Record<string, PartialTheme>, batch: Batch = false) {
+  if (process.env.TAMAGUI_TARGET !== 'web') {
+    return []
+  }
+
+  const config = getConfig()
+  let cssRules: string[] = []
+
+  for (const themeName in themes) {
+    const theme = themes[themeName]
+
+    const rules = getThemeCSSRules({
+      config,
+      themeName,
+      names: [themeName],
+      hasDarkLight: true,
+      theme,
+      // Use mutated variable creator which starts from high index to avoid conflicts
+      useMutatedVariables: true,
+    })
+
+    cssRules = [...cssRules, ...rules]
+
+    if (!batch) {
+      updateStyle(`t_theme_style_${themeName}`, rules)
+    }
+  }
+
+  // Output ALL mutated auto variables (since updateStyle replaces the element)
+  if (mutatedAutoVariables.length > 0) {
+    const autoVarCSS = `:root{${mutatedAutoVariables.map((v) => `--${v.name}:${v.val}`).join(';')}}`
+    updateStyle(`t_mutate_vars`, [autoVarCSS])
+  }
+
+  if (batch) {
+    const id = typeof batch == 'string' ? batch : simpleHash(Object.keys(themes).join(''))
+    updateStyle(`t_theme_style_${id}`, cssRules)
+  }
+
+  return cssRules
+}
+
+function updateStyle(id: string, rules: string[]) {
+  const existing = document.querySelector(`#${id}`)
+  const style = document.createElement('style')
+  style.id = id
+  style.appendChild(document.createTextNode(rules.join('\n')))
+  document.head.appendChild(style)
+  if (existing) {
+    existing.parentElement?.removeChild(existing)
+  }
+}

package/src/addTheme.ts

@@ -0,0 +1,11 @@
+import type { ThemeDefinition, ThemeParsed } from '@hanzogui/web'
+
+import { _mutateTheme } from './_mutateTheme'
+
+export function addTheme(props: {
+  name: string
+  theme: Partial<Record<keyof ThemeDefinition, any>>
+  insertCSS?: boolean
+}) {
+  return _mutateTheme({ ...props, insertCSS: true, mutationType: 'add' })
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './addTheme'
+export * from './updateTheme'
+export * from './replaceTheme'
+export { mutateThemes } from './_mutateTheme'
+export type { MutateOneThemeProps } from './_mutateTheme'

package/src/replaceTheme.ts

@@ -0,0 +1,14 @@
+import type { ThemeDefinition } from '@hanzogui/web'
+
+import { _mutateTheme } from './_mutateTheme'
+
+export function replaceTheme({
+  name,
+  theme,
+}: {
+  name: string
+  theme: Partial<Record<keyof ThemeDefinition, any>>
+}) {
+  const next = _mutateTheme({ name, theme, insertCSS: true, mutationType: 'replace' })
+  return next
+}

package/src/updateTheme.ts

@@ -0,0 +1,13 @@
+import type { ThemeDefinition, ThemeName } from '@hanzogui/web'
+
+import { _mutateTheme } from './_mutateTheme'
+
+export function updateTheme({
+  name,
+  theme,
+}: {
+  name: ThemeName | (string & {})
+  theme: Partial<Record<keyof ThemeDefinition, any>>
+}) {
+  return _mutateTheme({ name, theme, insertCSS: true, mutationType: 'update' })
+}

package/types/_mutateTheme.d.ts

@@ -0,0 +1,27 @@
+import type { ThemeDefinition, ThemeParsed } from '@hanzogui/web';
+type MutateThemeOptions = {
+    mutationType: 'replace' | 'update' | 'add';
+    insertCSS?: boolean;
+    avoidUpdate?: boolean;
+};
+type PartialTheme = Partial<Record<keyof ThemeDefinition, any>>;
+export type MutateOneThemeProps = {
+    name: string;
+    theme: PartialTheme;
+};
+type Batch = boolean | string;
+export declare function mutateThemes({ themes, batch, insertCSS, ...props }: Omit<MutateThemeOptions, 'mutationType'> & {
+    themes: MutateOneThemeProps[];
+    batch?: Batch;
+}): {
+    themes: Record<string, ThemeParsed>;
+    themesRaw: Record<string, ThemeParsed>;
+    cssRules: string[];
+};
+export declare function _mutateTheme(props: MutateThemeOptions & MutateOneThemeProps): {
+    themeRaw: ThemeParsed;
+    theme: {};
+    cssRules: string[];
+} | undefined;
+export {};
+//# sourceMappingURL=_mutateTheme.d.ts.map

package/types/_mutateTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_mutateTheme.d.ts","sourceRoot":"","sources":["../src/_mutateTheme.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAYjE,KAAK,kBAAkB,GAAG;IACxB,YAAY,EAAE,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAA;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,KAAK,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,eAAe,EAAE,GAAG,CAAC,CAAC,CAAA;AAE/D,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,YAAY,CAAA;CACpB,CAAA;AAGD,KAAK,KAAK,GAAG,OAAO,GAAG,MAAM,CAAA;AAG7B,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,KAAK,EACL,SAAgB,EAChB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,kBAAkB,EAAE,cAAc,CAAC,GAAG;IAC5C,MAAM,EAAE,mBAAmB,EAAE,CAAA;IAG7B,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;;;;EAkCA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,kBAAkB,GAAG,mBAAmB;;;cAuCxD,MAAM,EAAE;cAiB3B"}

package/types/addTheme.d.ts

@@ -0,0 +1,11 @@
+import type { ThemeDefinition, ThemeParsed } from '@hanzogui/web';
+export declare function addTheme(props: {
+    name: string;
+    theme: Partial<Record<keyof ThemeDefinition, any>>;
+    insertCSS?: boolean;
+}): {
+    themeRaw: ThemeParsed;
+    theme: {};
+    cssRules: string[];
+} | undefined;
+//# sourceMappingURL=addTheme.d.ts.map

package/types/addTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"addTheme.d.ts","sourceRoot":"","sources":["../src/addTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAIjE,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAC9B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,eAAe,EAAE,GAAG,CAAC,CAAC,CAAA;IAClD,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;;;;cAEA"}

package/types/index.d.ts

@@ -0,0 +1,6 @@
+export * from './addTheme';
+export * from './updateTheme';
+export * from './replaceTheme';
+export { mutateThemes } from './_mutateTheme';
+export type { MutateOneThemeProps } from './_mutateTheme';
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,YAAY,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA"}

package/types/replaceTheme.d.ts

@@ -0,0 +1,10 @@
+import type { ThemeDefinition } from '@hanzogui/web';
+export declare function replaceTheme({ name, theme, }: {
+    name: string;
+    theme: Partial<Record<keyof ThemeDefinition, any>>;
+}): {
+    themeRaw: import("@hanzogui/web").ThemeParsed;
+    theme: {};
+    cssRules: string[];
+} | undefined;
+//# sourceMappingURL=replaceTheme.d.ts.map

package/types/replaceTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"replaceTheme.d.ts","sourceRoot":"","sources":["../src/replaceTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAIpD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,KAAK,GACN,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,eAAe,EAAE,GAAG,CAAC,CAAC,CAAA;CACnD;;;;cAGA"}

package/types/updateTheme.d.ts

@@ -0,0 +1,10 @@
+import type { ThemeDefinition, ThemeName } from '@hanzogui/web';
+export declare function updateTheme({ name, theme, }: {
+    name: ThemeName | (string & {});
+    theme: Partial<Record<keyof ThemeDefinition, any>>;
+}): {
+    themeRaw: import("@hanzogui/web").ThemeParsed;
+    theme: {};
+    cssRules: string[];
+} | undefined;
+//# sourceMappingURL=updateTheme.d.ts.map

package/types/updateTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"updateTheme.d.ts","sourceRoot":"","sources":["../src/updateTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAI/D,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,GACN,EAAE;IACD,IAAI,EAAE,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IAC/B,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,eAAe,EAAE,GAAG,CAAC,CAAC,CAAA;CACnD;;;;cAEA"}