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

To help you get started, we’ve selected a few @uifabric/tsx-editor examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github OfficeDev / office-ui-fabric-react / apps / fabric-website / webpack.config.js View on Github external
// 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'),
github OfficeDev / office-ui-fabric-react / apps / fabric-website / webpack.serve.config.js View on Github external
// @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: {
github OfficeDev / office-ui-fabric-react / apps / fabric-website-resources / webpack.config.js View on Github external
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'),
github OfficeDev / office-ui-fabric-react / apps / fabric-website-resources / webpack.serve.config.js View on Github external
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()
    }
  })
);
github OfficeDev / office-ui-fabric-react / packages / example-app-base / src / components / ExampleCard / ExampleCard.tsx View on Github external
private _transformCode(code: string): string | undefined {
    return transformExample({
      tsCode: code,
      id: CONTENT_ID,
      supportedPackages: SUPPORTED_PACKAGES
    }).output;
  }

@uifabric/tsx-editor

Live tsx editor for Fabric website.

MIT
Latest version published 2 years ago

Package Health Score

61 / 100
Full package analysis

Similar packages