rollup.config.js

import alias from '@rollup/plugin-alias';
import jst from 'rollup-plugin-jst';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import replace from '@rollup/plugin-replace';
import babel from 'rollup-plugin-babel';
import postcss from 'rollup-plugin-postcss';
import reactSvg from "rollup-plugin-react-svg";
import image from '@rollup/plugin-image';
import path from 'path'

const pageflowPackageRoot = 'package';
const pageflowPagedEngineRoot = 'entry_types/paged';
const pageflowPagedPackageRoot = pageflowPagedEngineRoot + '/packages/pageflow-paged';
const pageflowPagedReactPackageRoot = pageflowPagedEngineRoot + '/packages/pageflow-paged-react';
const pageflowScrolledPackageRoot = 'entry_types/scrolled/package';

const frontendGlobals = {
  'backbone': 'Backbone',
  'jquery': 'jQuery',
  'jquery-ui': 'jQuery',
  'underscore': '_',
  'i18n-js': 'I18n',
  'iscroll': 'IScroll',
  'video.js': 'videojs'
};

const editorGlobals = {
  ...frontendGlobals,
  'backbone.babysitter': 'Backbone.ChildViewContainer',
  'cocktail': 'Cocktail',
  'jquery.minicolors': 'jQuery',
  'backbone.marionette': 'Backbone.Marionette',
  'wysihtml5': 'wysihtml5'
};

function external(id) {
  // Make all import external except
  // - relative path
  // - absolute paths (generated by @babel/plugin-transform-runtime
  //   for helper modules and the alias plugin below)
  // - aliases like $state
  return !['.', '/', '$'].includes(id[0]);
}

const plugins = ({extractCss, moduleDirectories} = {}) => [
  postcss({
    modules: true,
    extract: extractCss,
    minimize: extractCss
  }),
  babel({
    exclude: 'node_modules/**',
    extensions: ['js', 'jsx', 'svg'],

    // By default rollup-plugin-babel deduplicates runtime helpers
    // inserted by Babel. babel-preset-react-app uses
    // @babel/plugin-transform-runtime which already takes care of
    // this.
    runtimeHelpers: true
  }),
  jst(),
  resolve({
    moduleDirectories: moduleDirectories || ['node_modules'],
    extensions: ['.js', '.jsx']
  }),
  commonjs({
    exclude: ['**/node_modules/symbol-observable/es/*.js'],
    namedExports: {
      'node_modules/esrever/esrever.js': ['reverse'],
      'node_modules/react-is/index.js': ['isValidElementType'],
      'entry_types/paged/packages/pageflow-paged-react/node_modules/react-is/index.js': ['isValidElementType'],
      'entry_types/paged/packages/pageflow-paged-react/node_modules/react-draggable/dist/react-draggable.js': ['DraggableCore']
    }
  }),
  reactSvg({
    svgo: {multipass: true}
  })
];

function stateAlias(path) {
  return alias({
    entries: {
      '$state': __dirname + '/' + path,
    }
  });
}

const ignoreJSXWarning = {
  onwarn: function(warning, warn) {
    // Ignore noisy warning
    // https://github.com/babel/babel/issues/9149
    if (warning.code === 'THIS_IS_UNDEFINED') { return; }
    warn(warning);
  }
};

// pageflow

const pageflow = [
  {
    input: pageflowPackageRoot + '/src/ui/index.js',
    output: {
      file: pageflowPackageRoot + '/ui.js',
      format: 'esm'
    },
    external,
    plugins: plugins()
  },
  {
    input: pageflowPackageRoot + '/src/editor/index.js',
    output: {
      file: pageflowPackageRoot + '/editor.js',
      format: 'esm'
    },
    external,
    plugins: [
      stateAlias(pageflowPackageRoot + '/src/editor/state.js'),
      ...plugins()
    ]
  },
  {
    input: pageflowPackageRoot + '/src/testHelpers/index.js',
    output: {
      file: pageflowPackageRoot + '/testHelpers.js',
      format: 'esm'
    },
    external,
    plugins: [
      stateAlias(pageflowPackageRoot + '/src/editor/state.js'),
      ...plugins()
    ]
  },
  {
    input: pageflowPackageRoot + '/src/frontend/index.js',
    output: {
      file: pageflowPackageRoot + '/frontend.js',
      format: 'esm'
    },
    external,
    plugins: plugins()
  },
  {
    input: pageflowPackageRoot + '/src/ui/index.js',
    output: {
      file: 'app/assets/javascripts/pageflow/dist/ui.js',
      format: 'iife',
      name: 'pageflow._uiGlobalInterop',
      globals: editorGlobals
    },
    external: Object.keys(editorGlobals),
    plugins: plugins()
  }
];

// pageflow-paged

const pageflowPagedEditorGlobals = {
  ...editorGlobals,

  // Allow importing from pageflow/frontend and
  // pageflow-paged/frontend without including all of
  // the frontend code in the editor output.
  'pageflow/frontend': 'pageflow',
  'pageflow-paged/frontend': 'pageflow'
}

const pageflowPaged = [
  {
    input: pageflowPagedPackageRoot + '/src/editor/index.js',
    output: {
      file: pageflowPagedEngineRoot + '/app/assets/javascripts/pageflow_paged/dist/editor.js',
      format: 'iife',
      name: 'pageflow_paged',
      globals: pageflowPagedEditorGlobals
    },
    external: Object.keys(pageflowPagedEditorGlobals),
    plugins: [
      stateAlias(pageflowPagedPackageRoot + '/src/editor/state.js'),
      ...plugins()
    ]
  },
  {
    input: pageflowPagedPackageRoot + '/src/frontend/index.js',
    output: {
      file: pageflowPagedEngineRoot + '/app/assets/javascripts/pageflow_paged/dist/frontend.js',
      format: 'iife',
      name: 'pageflow_paged.frontend',
      globals: frontendGlobals
    },
    external: Object.keys(frontendGlobals),
    plugins: plugins()
  }
];

const pageflowPagedReact = ['client', 'server'].map(target => {
  var targetGlobals = {
    client: {
      'backbone': 'Backbone',
      'react-dom': 'ReactDOM'
    },
    server: {
      'backbone': '{}',
      'react-dom': '{}',
      'react-wavesurfer': '{}'
    }
  };

  const globals = {
    'pageflow': 'pageflow',
    'react': 'React',
    ...targetGlobals[target]
  };

  return {
    input: `${pageflowPagedReactPackageRoot}/src/index.js`,
    output: {
      file: `${pageflowPagedEngineRoot}/app/assets/javascripts/pageflow_paged/dist/react-${target}.js`,
      format: 'iife',
      name: 'pageflow.react',
      globals
    },
    external: Object.keys(globals),
    plugins: [
      alias({
        entries: {
          'redux-saga/effects': __dirname + '/entry_types/paged/packages/pageflow-paged-react/node_modules/redux-saga/es/effects',
        }
      }),
      ...plugins({
        moduleDirectories: [
          'node_modules',
          path.resolve(__dirname, `${pageflowPagedReactPackageRoot}/src`)
        ]
      }),
      replace({
        preventAssignment: true,
        values: {
          'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        }
      })
    ]
  };
});

// pageflow-scrolled

const pageflowScrolled = [
  {
    input: pageflowScrolledPackageRoot + '/src/editor/index.js',
    output: {
      file: pageflowScrolledPackageRoot + '/editor.js',
      format: 'esm',
    },
    external,
    plugins: [
      image({include: pageflowScrolledPackageRoot + '/src/editor/views/images/*.svg'}),
      ...plugins()
    ]
  },
  {
    input: pageflowScrolledPackageRoot + '/src/frontend/index.js',
    output: {
      dir: pageflowScrolledPackageRoot + '/frontend',
      format: 'esm',
    },
    external,
    plugins: plugins({extractCss: true}),
    ...ignoreJSXWarning
  },
  {
    input: pageflowScrolledPackageRoot + '/src/frontend/server.js',
    output: {
      file: pageflowScrolledPackageRoot + '/frontend-server.js',
      format: 'esm',
    },
    external,
    plugins: plugins(),
    ...ignoreJSXWarning
  },
  {
    input: pageflowScrolledPackageRoot + '/src/testHelpers/index.js',
    output: {
      file: pageflowScrolledPackageRoot + '/testHelpers.js',
      format: 'esm'
    },
    external,
    plugins: plugins()
  },

  {
    input: pageflowScrolledPackageRoot + '/src/contentElements/editor.js',
    output: {
      file: pageflowScrolledPackageRoot + '/contentElements-editor.js',
      format: 'esm',
    },
    external,
    plugins: [
      image({include: [
        '**/editor/**/images/*.svg',
        '**/pictogram.svg'
      ]}),
      ...plugins()
    ]
  },
  {
    input: pageflowScrolledPackageRoot + '/src/contentElements/frontend.js',
    output: {
      file: pageflowScrolledPackageRoot + '/contentElements-frontend.js',
      format: 'esm',
    },
    external,
    plugins: plugins({extractCss: true}),
    ...ignoreJSXWarning
  },

  ...([
    'defaultNavigation', 'consentBar',
    'textInlineFileRights', 'iconInlineFileRights',
    'iconScrollIndicator'
  ].map(name => (
    {
      input: `${pageflowScrolledPackageRoot}/src/widgets/${name}/index.js`,
      output: {
        file: `${pageflowScrolledPackageRoot}/widgets/${name}.js`,
        format: 'esm',
      },
      external,
      plugins: plugins({extractCss: true}),
      ...ignoreJSXWarning
    }
  ))),

  ...(['tikTokEmbed', 'hotspots'].map(name => (
    {
      input: `${pageflowScrolledPackageRoot}/src/contentElements/${name}/frontend.js`,
      output: {
        file: `${pageflowScrolledPackageRoot}/contentElements/${name}-frontend.js`,
        format: 'esm',
      },
      external,
      plugins: plugins({extractCss: true}),
      ...ignoreJSXWarning
    }
  )))
];

export default [
  ...pageflow,
  ...pageflowScrolled,
  ...pageflowPaged,
  ...pageflowPagedReact
]