DevExp: Part 2 of 2 - the codebase no longer uses const enums, enabling consumers to be able to use isolatedModules

apps/vr-tests/src/stories/Nav.stories.tsx

@@ -18,25 +18,25 @@ storiesOf('Nav', module)
         .click('.ms-Nav-chevronButton')
         .hover('.ms-Nav-compositeLink')
         .snapshot('click', { cropTo: '.testWrapper' })
-        .end()
-      }
+        .end()}
     >
       {story()}
     </Screener>
   ))
-  .addStory('Root', () => (
-    // tslint:disable-next-line:jsx-ban-props
-    <div style={{ width: '208px' }}>
-      <Nav
-        groups={
-          [
+  .addStory(
+    'Root',
+    () => (
+      // tslint:disable-next-line:jsx-ban-props
+      <div style={{ width: '208px' }}>
+        <Nav
+          groups={[
             {
-              links:
-                [
-                  {
-                    name: 'Home',
-                    url: 'http://example.com',
-                    links: [{
+              links: [
+                {
+                  name: 'Home',
+                  url: 'http://example.com',
+                  links: [
+                    {
                       name: 'Activity',
                       icon: IconNames.Upload,
                       url: 'http://msn.com',
@@ -46,26 +46,28 @@ storiesOf('Nav', module)
                       name: 'News',
                       url: 'http://msn.com',
                       key: 'key2'
-                    }],
-                    isExpanded: true
-                  },
-                  { name: 'Documents', icon: IconNames.Accept, url: 'http://example.com', key: 'key3' },
-                  { name: 'Pages', url: 'http://msn.com', key: 'key4' },
-                  { name: 'Notebook', url: 'http://msn.com', key: 'key5' },
-                  { name: 'Long Name Test for elipse', url: 'http://msn.com', key: 'key6' },
-                  {
-                    name: 'Edit',
-                    url: 'http://cnn.com',
-                    icon: IconNames.Edit,
-                    key: 'key8'
-                  }
-                ]
+                    }
+                  ],
+                  isExpanded: true
+                },
+                { name: 'Documents', icon: IconNames.Accept, url: 'http://example.com', key: 'key3' },
+                { name: 'Pages', url: 'http://msn.com', key: 'key4' },
+                { name: 'Notebook', url: 'http://msn.com', key: 'key5' },
+                { name: 'Long Name Test for elipse', url: 'http://msn.com', key: 'key6' },
+                {
+                  name: 'Edit',
+                  url: 'http://cnn.com',
+                  icon: IconNames.Edit,
+                  key: 'key8'
+                }
+              ]
             }
-          ]
-        }
-        expandedStateText={'expanded'}
-        collapsedStateText={'collapsed'}
-        selectedKey={'key3'}
-      />
-    </div>
-  ), { rtl: true });
+          ]}
+          expandedStateText={'expanded'}
+          collapsedStateText={'collapsed'}
+          selectedKey={'key3'}
+        />
+      </div>
+    ),
+    { rtl: true }
+  );

common/changes/@uifabric/experiments/const-enum_2018-11-17-00-03.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "DevExp: const enums are replaced with constants, this allows the use of isolatedModules mode of compilation",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "[email protected]"
+}

common/changes/@uifabric/variants/const-enum_2018-11-17-00-03.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/variants",
+      "comment": "DevExp: const enums are replaced with constants, this allows the use of isolatedModules mode of compilation",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/variants",
+  "email": "[email protected]"
+}

packages/experiments/src/components/FolderCover/FolderCover.tsx

@@ -13,13 +13,13 @@ export interface IFolderCoverState {
   // TODO Add animation support for drag/drop events.
 }
 
-const enum FolderCoverLayoutValues {
-  smallWidth = 72,
-  smallHeight = 52,
-  largeWidth = 112,
-  largeHeight = 80,
-  contentPadding = 4
-}
+const FolderCoverLayoutValues = {
+  smallWidth: 72 as 72,
+  smallHeight: 52 as 52,
+  largeWidth: 112 as 112,
+  largeHeight: 80 as 80,
+  contentPadding: 4 as 4
+};
 
 const ASSET_CDN_BASE_URL = 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets';
 

packages/experiments/src/components/Tile/ShimmerTile/ShimmerTile.base.tsx

@@ -7,20 +7,20 @@ import { ShimmerGap } from '../../Shimmer/ShimmerGap/ShimmerGap';
 import { ShimmerElementsGroup } from '../../Shimmer/ShimmerElementsGroup/ShimmerElementsGroup';
 import { ShimmerElementType as ElemType } from '../../Shimmer/Shimmer.types';
 
-const enum ShimmerTileLayoutValues {
-  largeSquareWidth = 96,
-  largeSquareHeight = 96,
-  largeNameWidth = 144,
-  largeNameHeight = 7,
-  largeActivityWidth = 96,
-  largeActivityHeight = 7,
-  smallSquareWidth = 62,
-  smallSquareHeight = 61,
-  smallNameWidth = 106,
-  smallNameHeight = 5,
-  smallActivityWidth = 62,
-  smallActivityHeight = 5
-}
+const ShimmerTileLayoutValues = {
+  largeSquareWidth: 96,
+  largeSquareHeight: 96,
+  largeNameWidth: 144,
+  largeNameHeight: 7,
+  largeActivityWidth: 96,
+  largeActivityHeight: 7,
+  smallSquareWidth: 62,
+  smallSquareHeight: 61,
+  smallNameWidth: 106,
+  smallNameHeight: 5,
+  smallActivityWidth: 62,
+  smallActivityHeight: 5
+};
 
 const PLACEHOLDER_SIZES: {
   [P in TileSize]: {

packages/experiments/src/components/Tile/Tile.tsx

@@ -13,15 +13,17 @@ const SignalStyles: any = SignalStylesModule;
 const CheckStyles: any = CheckStylesModule;
 // tslint:enable:no-any
 
-export const enum TileLayoutValues {
-  nameplatePadding = 12,
-  largeNameplateNameHeight = 15,
-  smallNameplateNameHeight = 12,
-  nameplateMargin = 0,
-  largeNameplateActivityHeight = 20,
-  smallNameplateActivityHeight = 20,
-  foregroundMargin = 16
-}
+export const TileLayoutValues = {
+  nameplatePadding: 12 as 12,
+  largeNameplateNameHeight: 15 as 15,
+  smallNameplateNameHeight: 12 as 12,
+  nameplateMargin: 0 as 0,
+  largeNameplateActivityHeight: 20 as 20,
+  smallNameplateActivityHeight: 20 as 20,
+  foregroundMargin: 16 as 16
+};
+
+export type TileLayoutValues = typeof TileLayoutValues[keyof typeof TileLayoutValues];
 
 export interface ITileState {
   isSelected?: boolean;

packages/variants/src/variantThemeType.ts

@@ -1,26 +1,28 @@
 /**
- * Const enum for variant theme types.
+ * Variant theme types values
  *
  * @public
  */
-export const enum VariantThemeType {
+export const VariantThemeType = {
   /*
-  * No variant.
-  */
-  None = 0,
+   * No variant.
+   */
+  None: 0 as 0,
   /*
-  * A variant where the background is a soft version of the background color. Most other colors remain unchanged.
-  */
-  Neutral = 1,
+   * A variant where the background is a soft version of the background color. Most other colors remain unchanged.
+   */
+  Neutral: 1 as 1,
   /*
-  * A variant where the background is a soft version of the primary color. Most other colors remain unchanged.
-  */
-  Soft = 2,
+   * A variant where the background is a soft version of the primary color. Most other colors remain unchanged.
+   */
+  Soft: 2 as 2,
   /*
-  * A variant where the background is a strong version of the primary color. All colors change.
-  * The background becomes shades of the primary color.
-  * The foreground/text becomes shades of the background color.
-  * The primary color becomes shades of the background.
-  */
-  Strong = 3
-}
+   * A variant where the background is a strong version of the primary color. All colors change.
+   * The background becomes shades of the primary color.
+   * The foreground/text becomes shades of the background color.
+   * The primary color becomes shades of the background.
+   */
+  Strong: 3 as 3
+};
+
+export type VariantThemeType = typeof VariantThemeType[keyof typeof VariantThemeType];