How to use @uifabric/tsx-editor - 5 common examples

// Production defaults
  let minFileNamePart = '';
  const entryPointName = 'fabric-sitev5';
  let publicPath = 'https://static2.sharepointonline.com/files/fabric/fabric-website/dist/';

  // Dogfood overrides
  if (!isProductionArg) {
    publicPath = '/dist/';
  } else {
    minFileNamePart = '.min';
  }

  return resources.createConfig(
    entryPointName,
    isProductionArg,
    addMonacoWebpackConfig({
      entry: {
        [entryPointName]: './lib/root.js'
      },

      output: {
        publicPath: publicPath,
        chunkFilename: `${entryPointName}-${version}-[name]-${now}${minFileNamePart}.js`
      },

      // The website config intentionally doesn't have React as an external because we bundle it
      // to ensure we get a consistent version.

      resolve: {
        alias: {
          '@uifabric/fabric-website/src': path.join(__dirname, 'src'),
          '@uifabric/fabric-website/lib': path.join(__dirname, 'lib'),

// @ts-check

const path = require('path');
const resources = require('@uifabric/build/webpack/webpack-resources');
const { addMonacoWebpackConfig } = require('@uifabric/tsx-editor/scripts/addMonacoWebpackConfig');

const entryPointName = 'fabric-sitev5';

module.exports = resources.createServeConfig(
  addMonacoWebpackConfig({
    entry: {
      [entryPointName]: './src/root.tsx'
    },

    output: {
      chunkFilename: `${entryPointName}-[name].js`
    },

    // The website config intentionally doesn't have React as an external because we bundle it
    // to ensure we get a consistent version.

    optimization: {
      removeAvailableModules: false
    },

    resolve: {

let path = require('path');
const resources = require('@uifabric/build/webpack/webpack-resources');
const { addMonacoWebpackConfig } = require('@uifabric/tsx-editor/scripts/addMonacoWebpackConfig');

const BUNDLE_NAME = 'office-ui-fabric-react';
const IS_PRODUCTION = process.argv.indexOf('--production') > -1;

module.exports = [
  ...resources.createConfig(
    BUNDLE_NAME,
    IS_PRODUCTION,
    addMonacoWebpackConfig({
      entry: { [BUNDLE_NAME]: './lib/index.js' },

      output: {
        libraryTarget: 'var',
        library: 'Fabric'
      },

      externals: {
        react: 'React',
        'react-dom': 'ReactDOM'
      },

      resolve: {
        alias: {
          'office-ui-fabric-react$': path.resolve(__dirname, '../../packages/office-ui-fabric-react/lib'),
          'office-ui-fabric-react/src': path.resolve(__dirname, '../../packages/office-ui-fabric-react/src'),

const getResolveAlias = require('@uifabric/build/webpack/getResolveAlias');
const resources = require('@uifabric/build/webpack/webpack-resources');
const { addMonacoWebpackConfig } = require('@uifabric/tsx-editor/scripts/addMonacoWebpackConfig');

const BUNDLE_NAME = 'demo-app';

module.exports = resources.createServeConfig(
  addMonacoWebpackConfig({
    entry: {
      [BUNDLE_NAME]: './src/index.tsx'
    },

    externals: {
      react: 'React',
      'react-dom': 'ReactDOM'
    },

    resolve: {
      alias: getResolveAlias()
    }
  })
);

private _transformCode(code: string): string | undefined {
    return transformExample({
      tsCode: code,
      id: CONTENT_ID,
      supportedPackages: SUPPORTED_PACKAGES
    }).output;
  }