const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin
module.exports = {
  core: {
    builder: 'webpack5',
  },
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        transcludeMarkdown: true
      }
    },
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  features: {
    buildStoriesJson: true
  },
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
    });

    config.experiments = {
      ...config.experiments,
      ...{
        topLevelAwait: true,
      }
    }
    config.externals = {
      ...config.externals,
      ...{
        vue: 'Vue',
        vuex: 'Vuex',
        '@geip/basic-components': 'GCPDesignPro'
      }
    }
    config.plugins.push(new ModuleFederationPlugin(
      {
        remotes: {
          // '@gcbp/web-framework':
          //   `GCPWebFramework@http://localhost:9091/gcp/web-framework/latest/gcp.js`
          '@gcbp/web-framework':
            `GCPWebFramework@https://cdn.developer.glodon.com/gcp/web-framework/latest/gcp.js`
        }
      }
    ))
    return config;
  },
}