React 19 Support

[bokerman]

Starting a new React project with Fluent UI, would you recommend starting React 19 (with React Fluent UI components)? All the advices, recommendations and experience is much appreciated.

[khmakoto]

Hi @bokerman, we don't officially support React 19 yet, so we cannot guarantee that everything will work out of the box. My suggestion would be to start with a lower version of React to ensure you are in a supported version of the library.

[tpalacino]

➕1️⃣

[blendsdk]

@khmakoto & @tudorpopams any news on this question? This issue is preventing us to use several external components which are long migrated to v19. It would be very appreciated if you could provide us some clarity.

[tudorpopams]

Hello folks, we are working on making sure that R18 is fully supported first, as this is not an easy task (RFC here). Once we achieve full 18 support we will move forward with R19, but there are some known issues that we're aware of. As I said in a different post, we'll try to get React 18 support out there as soon as possible, hopefully by the end of next month and the tackle the 19 problems.

[rcleveng]

Thank you for the transparency.

I hadn't realized 18 wasn't yet properly supported already. I'm new to react and liked the look and feel of fluentUI so was just getting started with nextjs (which seems to require 19) and looking for a UI library to start using for some personal projects.

[petval]

we'll try to get React 18 support out there as soon as possible, hopefully by the end of next month and the tackle the 19 problems.
4 months later, still nothing? Classic Microsoft.

[wegylexy]

You could implement a jsx-runtime and set jsxImportSource in tsconfig.json to wrap FluenUI Web Compoenents for use in your React 19 project rather than waiting for support from FluenUI React Components.

Not directly related to React, but I spent the past few days writing a Vite plugin to wrap FluenUI Web Components into SolidJS components and generate TypeScript declaration:

import { normalizePath, Plugin } from 'vite'
import { resolve } from 'path'
import { readFile, writeFile } from 'fs/promises'
import { createSourceFile, EntityName, isExportDeclaration, isIdentifier as isTsIdentifier, isNamedExports, isTypeQueryNode, isTypeReferenceNode, isVariableStatement, NodeArray, ScriptTarget, SyntaxKind, TypeNode } from 'typescript'
import { parse, transformAsync, traverse } from '@babel/core'
import { generate } from '@babel/generator'
import { Identifier, ImportSpecifier, isIdentifier as isJsIdentifier, isMemberExpression, isStringLiteral, isTemplateLiteral } from '@babel/types'

export default function SolidFluent(options?: {
  /** default `src/solid-fluent.d.ts` */
  types?: string
}) {
  const cache = (async () => {
    const { version, types } = JSON.parse(await readFile(resolve(__dirname, 'node_modules/@fluentui/web-components/package.json'), 'utf8')) as {
      version: string
      types: string
    }
    try {
      const declaration = resolve(__dirname, 'node_modules/@fluentui/web-components', types),
        statements = createSourceFile(declaration, await readFile(declaration, 'utf8'), ScriptTarget.Latest).statements,
        aliases = Object.fromEntries(statements.filter(s => isExportDeclaration(s)).map(s => s.exportClause)
          .flatMap(e => e && isNamedExports(e) ? e.elements : [])
          .map(({ name, propertyName }) => propertyName && isTsIdentifier(name) && isTsIdentifier(propertyName) &&
            [propertyName.escapedText.toString(), name.escapedText.toString()]
          ).filter(e => e) as [string, string][]
        )
      return [version, Object.fromEntries(statements.flatMap(s => isVariableStatement(s) &&
        s.modifiers?.some(m => m.kind === SyntaxKind.ExportKeyword) ? s.declarationList.declarations : []
      ).map((
        { name, type }, _i, _a,
        typeArguments?: NodeArray<TypeNode>, argument?: TypeNode, exprName?: EntityName, expr?: string
      ) =>
        type && isTsIdentifier(name) && isTypeReferenceNode(type) &&
        (typeArguments = type.typeArguments) && isTsIdentifier(type.typeName) &&
        isTypeQueryNode(argument = typeArguments[0]) && isTsIdentifier(exprName = argument.exprName) &&
        [name.escapedText.toString(), aliases[expr = exprName.escapedText.toString()] || expr]
      ).filter(e => e) as [string, string][])]
    } catch (e) {
      if (typeof version !== 'string' || !(parseInt(version.split('.', 1)[0]) > 2)) {
        console.error('@fluentui/web-components version must be at least 3')
      }
      throw e
    }
  })(), id = 'virtual:solid-fluent', rid = '\0' + id, esmp = normalizePath(resolve(__dirname, 'node_modules/@fluentui/web-components/dist/esm'))
  let dev: boolean
  return {
    name: 'solid-fluent',
    enforce: 'pre',
    configResolved(config) {
      dev = config.command === 'serve'
    },
    async buildStart() {
      const [version, components] = await cache, d = `declare module 'virtual:solid-fluent' {
  import * as F from '@fluentui/web-components'
  import { JSX } from 'solid-js'
  type SolidFluentProps<T> = JSX.HTMLAttributes<T> & {
    [K in Exclude<keyof T, keyof HTMLElement> & {
      [P in keyof T]: T[P] extends (...args: any[]) => any ? never : P
    }[keyof T]]?: T[K]
  }
  function c<T>(props: SolidFluentProps<T>): T
  const ${Object.values(components).map(c => `${c} = c<F.${c}>`).join(', ')}
}`, t = options?.types || 'src/solid-fluent.d.ts', p = resolve(__dirname, t), b = performance.now()
      let skip = false
      try {
        skip = await readFile(p, 'utf8') === d
      } catch { }
      if (!skip) {
        console.log(`Generating \x1b[35m${t}\x1b[0m for \x1b[36m@fluentui/web-components@${version}\x1b[0m...`)
        await writeFile(p, d)
      }
      console.log(`\x1b[32m✓ \x1b[35m${t}\x1b[${skip ? '0m already up-to-date.' : `32m generated in ${(performance.now() - b).toFixed(2)}ms`}\x1b[0m`)
    },
    resolveId(source) {
      if (source === id) {
        return rid
      }
    },
    async load(id) {
      if (id === rid) {
        const [, components] = await cache
        return `import * as F from '@fluentui/web-components'
import { spread } from 'solid-js/web'
${Object.keys(components).map(d => `F.${d}.define(F.FluentDesignSystem.registry)`).join('\n')}
const c = t => p => (e => (spread(e, p), e))(new t())
export const ${Object.values(components).map(c => `${c} = c(F.${c})`).join(', ')}`
      }
    },
    async transform(code, id) {
      if (id === rid) {
        return await transformAsync(code, {
          presets: ['babel-preset-solid'],
          compact: true
        })
      } else if (!dev && id.startsWith(esmp)) {
        const ast = parse(code, { sourceType: 'module' })
        if (ast) {
          let html = new Set<string>(), css = new Set<string>(), any = false
          function stripCss(raw: string) {
            const c = raw.replace(/\n\s*|(?<=[\s(){}])\s+|\s+(?=[(){}])|\s*\n|;?\s*(?=})|(?<=:)\s+(?=[^"']+;)/g, '')
            if (c !== raw) {
              any = true
            }
            return c
          }
          traverse(ast, {
            ImportDeclaration({ node: { source, specifiers } }) {
              if (source.value === '@microsoft/fast-element') {
                for (const s of specifiers) {
                  ({ html, css })[((s as ImportSpecifier).imported as Identifier)?.name]?.add(s.local.name)
                }
              }
            },
            TaggedTemplateExpression({ node: { tag, quasi } }) {
              const i = isJsIdentifier(tag)
              if (i && html.has(tag.name) ||
                isMemberExpression(tag) && tag.object && isJsIdentifier(tag.object) && tag.object.name &&
                html.has(tag.object.name) && isJsIdentifier(tag.property) && tag.property.name === 'partial') {
                for (const { value } of quasi.quasis) {
                  const original = value.raw
                  if (original !== (value.raw = original.replace(/\n\s*|\s+|\s*\n/g, ' '))) {
                    any = true
                  }
                }
              } else if (i && css.has(tag.name) ||
                isMemberExpression(tag) && tag.object && isJsIdentifier(tag.object) && tag.object.name &&
                css.has(tag.object.name) && isJsIdentifier(tag.property) && tag.property.name === 'partial') {
                for (const { value } of quasi.quasis) {
                  value.raw = stripCss(value.raw)
                }
              }
            },
            CallExpression({ node: { callee, arguments: [arg] } }) {
              if (arg) {
                if (isJsIdentifier(callee) && html.has(callee.name) ||
                  isMemberExpression(callee) && isJsIdentifier(callee.property) && callee.property.name === 'partial') {
                  function strip(raw: string) {
                    const c = raw.replace(/\s*([(),<=>{}]|\/>)\s*/g, '$1').replace(/\s\s+/g, ' ')
                    if (c !== raw) {
                      any = true
                    }
                    return c
                  }
                  if (isStringLiteral(arg)) {
                    arg.value = strip(arg.value)
                  } else if (isTemplateLiteral(arg)) {
                    for (const { value } of arg.quasis) {
                      value.raw = strip(value.raw)
                    }
                  }
                } else if (isTemplateLiteral(arg) && isMemberExpression(callee) &&
                  isJsIdentifier(callee.property) && callee.property.name === 'replaceSync') {
                  for (const { value } of arg.quasis) {
                    value.raw = stripCss(value.raw)
                  }
                }
              }
            },
            AssignmentExpression({ node }) {
              if (isTemplateLiteral(node.right) &&
                isMemberExpression(node.left) && isJsIdentifier(node.left.property) && node.left.property.name === 'textContent') {
                for (const { value } of node.right.quasis) {
                  value.raw = stripCss(value.raw)
                }
              }
            }
          })
          if (any) {
            return generate(ast, {}, code)
          }
        }
      }
    }
  } as Plugin
}

Then I can use them as below:

import { Button as FluentButton } from 'virtual:solid-fluent'
export default TwoButtons() {
  return (<>
    <FluentButton>Left</FluentButton>
    <FluentButton>Right</FluentButton>
  </>)
}

[wegylexy]

edited to fix reactivity

[wegylexy]

And then here is the plugin for icons too. Dynamically importing all available icons during dev, and bundling only used ones for prod by static analysis.

import { normalizePath, Plugin } from 'vite'
import { extname, resolve } from 'path'
import { readdir, readFile, writeFile } from 'fs/promises'
import { createProgram, forEachChild, FunctionDeclaration, isFunctionDeclaration, isIdentifier, isJsxAttribute, isJsxExpression, isJsxOpeningElement, isJsxSelfClosingElement, isModuleDeclaration, isStringLiteralLike } from 'typescript'
import { transformAsync } from '@babel/core'

export default function FluentIcons(options?: {
  /** default `src/fluent-icons.d.ts` */
  types?: string
}) {
  const cache = Promise.all([
    readFile(resolve(__dirname, 'node_modules/@fluentui/svg-icons/package.json'), 'utf8')
      .then(p => (JSON.parse(p) as { version: string }).version),
    readdir(resolve(__dirname, 'node_modules/@fluentui/svg-icons/icons'), {
      recursive: true
    }).then(d => d.filter(f => extname(f) === '.svg').map(f => normalizePath(f.slice(0, -4))))
  ]), t = options?.types || 'src/fluent-icons.d.ts', p = resolve(__dirname, t)
  const id = 'virtual:fluent-icons', rid = '\0' + id,
    idp = id + '/', ridp = '\0' + idp,
    used = new Set<string>()
  let dev: boolean
  return {
    name: 'fluent-icons-pass1',
    enforce: 'pre',
    configResolved(config) {
      dev = config.command === 'serve'
    },
    async buildStart() {
      const [version, icons] = await cache, d = `declare module 'virtual:fluent-icons' {
  import { JSX } from 'solid-js'
  type Icons = ${icons.map(i => `'${i}'`).join(' | ')}
  function Icon(props: { src: Icons, slot?: string } & JSX.SvgSVGAttributes<SVGSVGElement> ): SVGSVGElement
}`, b = performance.now()
      let skip = false
      try {
        skip = await readFile(p, 'utf8') === d
      } catch { }
      if (!skip) {
        console.log(`Generating \x1b[35m${t}\x1b[0m for \x1b[36m@fluentui/svg-icons@${version}\x1b[0m...`)
        await writeFile(p, d)
      }
      console.log(`\x1b[32m✓ \x1b[35m${t}\x1b[${skip ? '0m already up-to-date.' : `32m generated in ${(performance.now() - b).toFixed(2)}ms`}\x1b[0m`)
      if (!dev) {
        const dts = resolve(__dirname, 'src/fluent-icons.d.ts'), tsc = createProgram([dts].concat(
          (await readdir(resolve(__dirname, 'src'), { recursive: true }))
            .filter(f => f.endsWith('.tsx'))
            .map(f => resolve(__dirname, 'src', f))
        ), { project: resolve(__dirname, 'tsconfig.app.json') })
        const checker = tsc.getTypeChecker()
        const iconType = checker.getTypeAtLocation(forEachChild(tsc.getSourceFile(dts)!.statements.find(s => isModuleDeclaration(s))!.body!, function visit(node): FunctionDeclaration | undefined {
          if (isFunctionDeclaration(node)) {
            return node
          }
          return forEachChild(node, visit)
        })!), iconTypeName = checker.typeToString(iconType)
        for (const f of tsc.getRootFileNames()) {
          forEachChild(tsc.getSourceFile(f)!, function visit(node) {
            if ((isJsxOpeningElement(node) || isJsxSelfClosingElement(node)) && checker.getTypeAtLocation(node.tagName) === iconType) {
              for (const p of node.attributes.properties) {
                const { name } = p
                if (name && isIdentifier(name) && isJsxAttribute(p) && p.initializer && name.escapedText === 'src') {
                  const i = p.initializer
                  if (isStringLiteralLike(i)) {
                    used.add(i.text)
                  } else if (isJsxExpression(i) && i.expression) {
                    (function visit(t) {
                      if (t.isStringLiteral()) {
                        used.add(t.value)
                      } else if (t.isUnion()) {
                        t.types.forEach(t => visit(t))
                      } else {
                        throw new TypeError(`Type '${checker.typeToString(t)}' is not assignable to '${iconTypeName}.svg'.`)
                      }
                    })(checker.getTypeAtLocation(i.expression))
                  } else {
                    throw new TypeError(`Type '${checker.typeToString(checker.getTypeAtLocation(i))}' is not assignable to '${iconTypeName}.svg'.`)
                  }
                }
              }
            }
            forEachChild(node, visit)
          })
        }
        const all = new Set(icons), diff = Array.from(used).filter(i => !all.has(i))
        if (diff.length) {
          throw new TypeError(`Type '${diff.map(i => `"${i}"`).join(' | ')}' is not assignable to '${iconTypeName}'.`)
        }
      }
    },
    resolveId(source) {
      if (source === id) {
        return rid
      }
      if (source.startsWith(idp)) {
        return '\0' + source
      }
    },
    async load(id) {
      if (id === rid) {
        if (dev) {
          return `import { createMemo, lazy, splitProps } from 'solid-js'
import { spread } from 'solid-js/web'
const Icons = {
${(await cache)[1].map(i => `  '${i}': () => import('virtual:fluent-icons/${i}.jsx')`).join(',\n')}
}
export function Icon(props) {
  const [i, l] = splitProps(props, ['src']), m = createMemo(() => Icons[i.src])
  return createMemo(() => {
    const c = m()
    return c ? lazy(c)(l) : <img alt={i.src} style={{color: 'red'}} />
  })()
}`
        } else {
          const icons = [] as string[]
          for (const i of used) {
            icons.push(`  '${i}': () => (${await readFile(resolve(__dirname, 'node_modules/@fluentui/svg-icons/icons', i + '.svg'), 'utf8')})`)
          }
          return `import { createMemo, splitProps } from 'solid-js'
import { spread } from 'solid-js/web'
const Icons = {
${icons.join(',\n')}
}
export function Icon(props) {
  const [i, l] = splitProps(props, ['src']), c = createMemo(() => Icons[i.src])
  return createMemo(() => (e => (spread(e, l, true, true), e))(c()()))()
}`
        }
      }
      if (dev && id.endsWith('.jsx') && id.startsWith(ridp)) {
        const path = id.slice(ridp.length, -4) + '.svg'
        return `import { spread } from 'solid-js/web'
export default (props => (svg => (spread(svg, props, true, true), svg))(${await readFile(resolve(__dirname, 'node_modules/@fluentui/svg-icons/icons', path), 'utf8')}))`
      }
    },
    async transform(code, id) {
      if (id === rid || dev && id.endsWith('.jsx') && id.startsWith(ridp)) {
        return await transformAsync(code, {
          presets: ['babel-preset-solid'],
          compact: true
        })
      }
    }
  } as Plugin
}