chore: update generator to use Griffel (#21390)

* chore: update generator to use Griffel * Change files * make version realistic
microsoft · Jan 24, 2022 · 0fe5ae5 · 0fe5ae5
1 parent b834463
commit 0fe5ae5
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 83 deletions.
diff --git a/change/@fluentui-react-provider-9a410062-0b56-435a-8468-9195cc7a448a.json 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": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git 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
@@ -1,14 +1,14 @@
 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<TProps = {}>(
   testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },
 ) {
   const defaultOptions: Partial<IsConformantOptions<TProps>> = {
     asPropHandlesRef: true,
     componentPath: module!.parent!.filename.replace('.test', ''),
-    extraTests: makeStylesTests as TestObject<TProps>,
+    extraTests: griffelTests as TestObject<TProps>,
   };
 
   baseIsConformant(defaultOptions, testInfo);

diff --git a/...mponent/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs b/...mponent/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,16 +412,15 @@ describe('migrate-converged-pkg generator', () => {
         },
         coverageDirectory: './coverage',
         setupFilesAfterEnv: ['./config/tests.js'],
-        snapshotSerializers: ['@fluentui/jest-serializer-make-styles'],
+        snapshotSerializers: ['@griffel/jest-serializer'],
         };"
       `);
     });
 
     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
@@ -195,9 +195,10 @@ const templates = {
       },
     };
   },
-  babelConfig: (options: { extraPlugins: Array<string> }) => {
+  babelConfig: (options: { extraPresets: Array<string> }) => {
     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<PackageJson>(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<PackageJson>(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);