diff --git a/change/@fluentui-react-provider-9a410062-0b56-435a-8468-9195cc7a448a.json b/change/@fluentui-react-provider-9a410062-0b56-435a-8468-9195cc7a448a.json new file mode 100644 index 0000000000000..3035c48d4e513 --- /dev/null +++ b/change/@fluentui-react-provider-9a410062-0b56-435a-8468-9195cc7a448a.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "add @types/react-test-renderer to devDependencies", + "packageName": "@fluentui/react-provider", + "email": "olfedias@microsoft.com", + "dependentChangeType": "none" +} diff --git a/packages/react-provider/package.json b/packages/react-provider/package.json index 78a848fbf44eb..2177ccaabdb68 100644 --- a/packages/react-provider/package.json +++ b/packages/react-provider/package.json @@ -34,6 +34,7 @@ "@types/enzyme-adapter-react-16": "1.0.3", "@types/react": "16.9.42", "@types/react-dom": "16.9.10", + "@types/react-test-renderer": "^16.0.0", "enzyme": "~3.10.0", "enzyme-adapter-react-16": "^1.15.0", "react": "16.8.6", diff --git a/scripts/create-component/plop-templates/src/common/isConformant.ts.hbs b/scripts/create-component/plop-templates/src/common/isConformant.ts.hbs index a6b1f0890db02..750ce2150eafb 100644 --- a/scripts/create-component/plop-templates/src/common/isConformant.ts.hbs +++ b/scripts/create-component/plop-templates/src/common/isConformant.ts.hbs @@ -1,6 +1,6 @@ import { isConformant as baseIsConformant } from '@fluentui/react-conformance'; import type { IsConformantOptions, TestObject } from '@fluentui/react-conformance'; -import makeStylesTests from '@fluentui/react-conformance-make-styles'; +import griffelTests from '@fluentui/react-conformance-griffel'; export function isConformant( testInfo: Omit, 'componentPath'> & { componentPath?: string }, @@ -8,7 +8,7 @@ export function isConformant( const defaultOptions: Partial> = { asPropHandlesRef: true, componentPath: module!.parent!.filename.replace('.test', ''), - extraTests: makeStylesTests as TestObject, + extraTests: griffelTests as TestObject, }; baseIsConformant(defaultOptions, testInfo); diff --git a/scripts/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs b/scripts/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs index 00721c5bf8e38..0fc990c7a9450 100644 --- a/scripts/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs +++ b/scripts/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs @@ -1,4 +1,4 @@ -import { makeStyles, mergeClasses } from '@fluentui/react-make-styles'; +import { makeStyles, mergeClasses } from '@griffel/react'; import type { {{componentName}}State } from './{{componentName}}.types'; /** diff --git a/scripts/create-package/plop-templates-react/.babelrc.json b/scripts/create-package/plop-templates-react/.babelrc.json index b51a5457ced10..40e01373083ce 100644 --- a/scripts/create-package/plop-templates-react/.babelrc.json +++ b/scripts/create-package/plop-templates-react/.babelrc.json @@ -1,3 +1,4 @@ { - "plugins": ["module:@fluentui/babel-make-styles", "annotate-pure-calls", "@babel/transform-react-pure-annotations"] + "presets": ["@griffel"], + "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"] } diff --git a/scripts/create-package/plop-templates-react/jest.config.js b/scripts/create-package/plop-templates-react/jest.config.js index c2a9e205df8e6..3ed4f68a5bc7f 100644 --- a/scripts/create-package/plop-templates-react/jest.config.js +++ b/scripts/create-package/plop-templates-react/jest.config.js @@ -3,7 +3,7 @@ const path = require('path'); const config = createConfig({ setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))], - snapshotSerializers: ['@fluentui/jest-serializer-make-styles'], + snapshotSerializers: ['@griffel/jest-serializer'], }); module.exports = config; diff --git a/scripts/create-package/plop-templates-react/package.json.hbs b/scripts/create-package/plop-templates-react/package.json.hbs index 73460720e361f..f5bbe21a0737e 100644 --- a/scripts/create-package/plop-templates-react/package.json.hbs +++ b/scripts/create-package/plop-templates-react/package.json.hbs @@ -24,11 +24,9 @@ "update-snapshots": "just-scripts jest -u" }, "devDependencies": { - "@fluentui/babel-make-styles": "", "@fluentui/eslint-plugin": "", - "@fluentui/jest-serializer-make-styles": "", "@fluentui/react-conformance": "", - "@fluentui/react-conformance-make-styles": "", + "@fluentui/react-conformance-griffel": "", "@fluentui/scripts": "", "@types/enzyme": "", "@types/enzyme-adapter-react-16": "", @@ -42,9 +40,9 @@ "react-test-renderer": "" }, "dependencies": { - "@fluentui/react-make-styles": "", "@fluentui/react-theme": "", "@fluentui/react-utilities": "", + "@griffel/react": "", "tslib": "" }, "peerDependencies": { diff --git a/scripts/create-package/plopfile.ts b/scripts/create-package/plopfile.ts index 45cd3906b4b8c..3eb88fd2f5dbe 100644 --- a/scripts/create-package/plopfile.ts +++ b/scripts/create-package/plopfile.ts @@ -16,7 +16,7 @@ const v8ReferencePackages = { node: ['codemods'], }; const convergedReferencePackages = { - react: ['react-menu'], + react: ['react-provider'], node: ['babel-make-styles'], }; diff --git a/tools/generators/migrate-converged-pkg/index.spec.ts b/tools/generators/migrate-converged-pkg/index.spec.ts index e7c02628a44fd..3f4dcf73895b8 100644 --- a/tools/generators/migrate-converged-pkg/index.spec.ts +++ b/tools/generators/migrate-converged-pkg/index.spec.ts @@ -326,7 +326,6 @@ describe('migrate-converged-pkg generator', () => { expect(rootTsConfig.compilerOptions.paths).toEqual( expect.objectContaining({ '@proj/react-dummy': ['packages/react-dummy/src/index.ts'], - '@proj/react-make-styles': ['packages/react-make-styles/src/index.ts'], '@proj/react-theme': ['packages/react-theme/src/index.ts'], '@proj/react-utilities': ['packages/react-utilities/src/index.ts'], }), @@ -383,7 +382,7 @@ describe('migrate-converged-pkg generator', () => { const config = createConfig({ setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))], - snapshotSerializers: ['@fluentui/jest-serializer-make-styles'], + snapshotSerializers: ['@griffel/jest-serializer'], }); module.exports = config;" @@ -413,7 +412,7 @@ describe('migrate-converged-pkg generator', () => { }, coverageDirectory: './coverage', setupFilesAfterEnv: ['./config/tests.js'], - snapshotSerializers: ['@fluentui/jest-serializer-make-styles'], + snapshotSerializers: ['@griffel/jest-serializer'], };" `); }); @@ -421,8 +420,7 @@ describe('migrate-converged-pkg generator', () => { it(`should add 'snapshotSerializers' to jest.config.js only when needed`, async () => { const projectConfig = readProjectConfiguration(tree, options.name); function removePkgDependenciesThatTriggerSnapshotSerializersAddition() { - const workspaceConfig = readWorkspaceConfiguration(tree); - const packagesThatTriggerAddingSnapshots = [`@${workspaceConfig.npmScope}/react-make-styles`]; + const packagesThatTriggerAddingSnapshots = ['@griffel/react']; updateJson(tree, `${projectConfig.root}/package.json`, (json: PackageJson) => { packagesThatTriggerAddingSnapshots.forEach(pkgName => { @@ -958,94 +956,61 @@ describe('migrate-converged-pkg generator', () => { } it(`should setup .babelrc.json`, async () => { - const babelMakeStylesPkg = getScopedPkgName(tree, 'babel-make-styles'); const projectConfig = readProjectConfiguration(tree, options.name); - let packageJson = getPackageJson(projectConfig); - let devDeps = packageJson.devDependencies || {}; - expect(devDeps[babelMakeStylesPkg]).toBe(undefined); - await generator(tree, options); - let babelConfig = getBabelConfig(projectConfig); expect(babelConfig).toEqual({ - plugins: [ - 'module:@fluentui/babel-make-styles', - 'annotate-pure-calls', - '@babel/transform-react-pure-annotations', - ], + presets: ['@griffel'], + plugins: ['annotate-pure-calls', '@babel/transform-react-pure-annotations'], }); tree.delete(`${projectConfig.root}/.babelrc.json`); await generator(tree, options); - babelConfig = getBabelConfig(projectConfig); - packageJson = getPackageJson(projectConfig); - devDeps = packageJson.devDependencies || {}; expect(babelConfig).toEqual({ - plugins: [ - 'module:@fluentui/babel-make-styles', - 'annotate-pure-calls', - '@babel/transform-react-pure-annotations', - ], + presets: ['@griffel'], + plugins: ['annotate-pure-calls', '@babel/transform-react-pure-annotations'], }); - expect(devDeps[babelMakeStylesPkg]).toBe('9.0.0-alpha.0'); }); - it(`should add @fluentui/babel-make-styles plugin only if needed`, async () => { + it(`should add @griffel/babel-preset only if needed`, async () => { let projectConfig = readProjectConfiguration(tree, options.name); - const babelMakeStylesPkg = getScopedPkgName(tree, 'babel-make-styles'); updateJson(tree, `${projectConfig.root}/package.json`, (json: PackageJson) => { if (json.dependencies) { - delete json.dependencies[getScopedPkgName(tree, 'react-make-styles')]; - delete json.dependencies[getScopedPkgName(tree, 'make-styles')]; + delete json.dependencies['@griffel/react']; } - json.devDependencies = json.devDependencies || {}; - json.devDependencies[babelMakeStylesPkg] = '^9.0.0-alpha.0'; - return json; }); let babelConfig = getBabelConfig(projectConfig); - let packageJson = getPackageJson(projectConfig); - let devDeps = packageJson.devDependencies || {}; expect(babelConfig).toEqual({ - plugins: [ - 'module:@fluentui/babel-make-styles', - 'annotate-pure-calls', - '@babel/transform-react-pure-annotations', - ], + presets: ['@griffel'], + plugins: ['annotate-pure-calls', '@babel/transform-react-pure-annotations'], }); - expect(devDeps[babelMakeStylesPkg]).toBe('^9.0.0-alpha.0'); await generator(tree, options); - babelConfig = getBabelConfig(projectConfig); - packageJson = getPackageJson(projectConfig); - devDeps = packageJson.devDependencies || {}; expect(babelConfig).toEqual({ + presets: [], plugins: ['annotate-pure-calls', '@babel/transform-react-pure-annotations'], }); - expect(devDeps[babelMakeStylesPkg]).toBe(undefined); projectConfig = readProjectConfiguration(tree, '@proj/babel-make-styles'); await generator(tree, { name: '@proj/babel-make-styles' }); - babelConfig = getBabelConfig(projectConfig); - packageJson = getPackageJson(projectConfig); - devDeps = packageJson.devDependencies || {}; expect(babelConfig).toEqual({ + presets: [], plugins: ['annotate-pure-calls', '@babel/transform-react-pure-annotations'], }); - expect(devDeps[babelMakeStylesPkg]).toBe(undefined); }); }); @@ -1219,14 +1184,15 @@ function setupDummyPackage( const defaults = { version: '9.0.0-alpha.40', dependencies: { - [`@${workspaceConfig.npmScope}/react-make-styles`]: '^9.0.0-alpha.38', + [`@griffel/react`]: '1.0.0', [`@${workspaceConfig.npmScope}/react-theme`]: '^9.0.0-alpha.13', [`@${workspaceConfig.npmScope}/react-utilities`]: '^9.0.0-alpha.25', tslib: '^2.1.0', someThirdPartyDep: '^11.1.2', }, babelConfig: { - plugins: ['module:@fluentui/babel-make-styles', 'annotate-pure-calls', '@babel/transform-react-pure-annotations'], + presets: ['@griffel'], + plugins: ['annotate-pure-calls', '@babel/transform-react-pure-annotations'], }, tsConfig: { compilerOptions: { baseUrl: '.', typeRoots: ['../../node_modules/@types', '../../typings'] } }, }; @@ -1265,7 +1231,7 @@ function setupDummyPackage( const config = createConfig({ setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))], - snapshotSerializers: ['@fluentui/jest-serializer-make-styles'], + snapshotSerializers: ['@griffel/jest-serializer'], }); module.exports = config; diff --git a/tools/generators/migrate-converged-pkg/index.ts b/tools/generators/migrate-converged-pkg/index.ts index 66cb192575aec..7e03dde39d62a 100644 --- a/tools/generators/migrate-converged-pkg/index.ts +++ b/tools/generators/migrate-converged-pkg/index.ts @@ -195,9 +195,10 @@ const templates = { }, }; }, - babelConfig: (options: { extraPlugins: Array }) => { + babelConfig: (options: { extraPresets: Array }) => { return { - plugins: [...options.extraPlugins, 'annotate-pure-calls', '@babel/transform-react-pure-annotations'], + presets: [...options.extraPresets], + plugins: ['annotate-pure-calls', '@babel/transform-react-pure-annotations'], }; }, jestSetup: stripIndents` @@ -223,7 +224,7 @@ const templates = { }, coverageDirectory: './coverage', setupFilesAfterEnv: ['${options.testSetupFilePath}'], - ${options.addSnapshotSerializers ? `snapshotSerializers: ['@fluentui/jest-serializer-make-styles'],` : ''} + ${options.addSnapshotSerializers ? `snapshotSerializers: ['@griffel/jest-serializer'],` : ''} }; `, storybook: { @@ -733,7 +734,7 @@ function shouldSetupE2E(tree: Tree, options: NormalizedSchema) { function updateLocalJestConfig(tree: Tree, options: NormalizedSchema) { const jestSetupFilePath = options.paths.jestSetupFile; - const packagesThatTriggerAddingSnapshots = [`@${options.workspaceConfig.npmScope}/react-make-styles`]; + const packagesThatTriggerAddingSnapshots = [`@griffel/react`]; const packageJson = readJson(tree, options.paths.packageJson); packageJson.dependencies = packageJson.dependencies ?? {}; @@ -834,28 +835,13 @@ function updatedBaseTsConfig(tree: Tree, options: NormalizedSchema) { } function setupBabel(tree: Tree, options: NormalizedSchema) { - const currentProjectNpmScope = `@${options.workspaceConfig.npmScope}`; const pkgJson = readJson(tree, options.paths.packageJson); pkgJson.dependencies = pkgJson.dependencies || {}; pkgJson.devDependencies = pkgJson.devDependencies || {}; - const shouldAddMakeStylesPlugin = - !options.name.includes('make-styles') && - (pkgJson.dependencies[`${currentProjectNpmScope}/react-make-styles`] || - pkgJson.dependencies[`${currentProjectNpmScope}/make-styles`]); - - const extraPlugins = shouldAddMakeStylesPlugin ? ['module:@fluentui/babel-make-styles'] : []; - - const config = templates.babelConfig({ extraPlugins }); - - const babelMakeStylesProjectName = `${currentProjectNpmScope}/babel-make-styles`; - if (shouldAddMakeStylesPlugin) { - const babelMakeStylesProject = getProjectConfig(tree, { packageName: babelMakeStylesProjectName }); - const babelMakeStylesPkgJson: PackageJson = readJson(tree, babelMakeStylesProject.paths.packageJson); - pkgJson.devDependencies[babelMakeStylesProjectName] = `${babelMakeStylesPkgJson.version}`; - } else { - delete pkgJson.devDependencies[babelMakeStylesProjectName]; - } + const shouldAddGriffelPreset = pkgJson.dependencies['@griffel/react']; + const extraPresets = shouldAddGriffelPreset ? ['@griffel'] : []; + const config = templates.babelConfig({ extraPresets }); tree.write(options.paths.babelConfig, serializeJson(config)); writeJson(tree, options.paths.packageJson, pkgJson);