web-dev-server.config.js

import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
import rollupCommonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import { fromRollup, rollupAdapter } from '@web/dev-server-rollup';
import { storybookWdsPlugin } from './src/stories/lib/markdown.cjs';
import { cemAnalyzerPlugin } from './wds/cem-analyzer-plugin.js';
import { esbuildBundlePlugin } from './wds/esbuild-bundle-plugin.js';

const commonjs = fromRollup(rollupCommonjs);

function commonJsIdentifiers (ids) {
  return ids.map((id) => `**/node_modules/${id}/**/*`);
}

const hmrI18nPlugin = {
  name: 'hmr-i18n',
  async transform (context) {

    // TODO: replace force re render with a call to LitELement requestUpdate() somehow (to keep state)
    const TRANSLATION_FILE_REGEX = /^\/src\/translations\/translations\.[a-z]+\.js$/;
    if (TRANSLATION_FILE_REGEX.test(context.path)) {
      // language=JavaScript
      context.body += `
        ;;
        // Injected by custom HMR for i18n
        import { addTranslations } from '../lib/i18n.js';
        import { forceReRender } from '@web/storybook-prebuilt/web-components.js';

        if (import.meta.hot) {
          import.meta.hot.accept((mod) => {

            // Let's add the new translations
            addTranslations(mod.lang, mod.translations);

            // We're going to assume we will need a to force storybook to re-render
            let needStorybookForceRerender = true;

            // Let's find all our LitElement base custom elements in the story
            // and force requestUpdate() on all their properties
            const customElements = Array
              .from(
                document
                  .querySelector('.story-shadow-container')
                  .shadowRoot
                  .querySelectorAll(':defined')
              )
              .forEach((el) => {
                if (el.requestUpdate != null) {
                  const properties = Object.keys(el.constructor.properties);
                  for (const prop of properties) {
                    el.requestUpdate(prop);
                  }
                  // Seems like it's a LitElement custom element, we won't need the Storybook force rerender
                  needStorybookForceRerender = false;
                }
              });

            if (needStorybookForceRerender) {
              forceReRender();
            }
          });
        }
      `;
    }
  },
};

const injectAuthForSmartComponentsPlugin = {
  name: 'inject-auth-for-smart-components',
  async transform (context) {

    const {
      API_HOST,
      API_OAUTH_TOKEN,
      API_OAUTH_TOKEN_SECRET,
      OAUTH_CONSUMER_KEY,
      OAUTH_CONSUMER_SECRET,
    } = process.env;

    const SMART_COMPONENT_STORY_REGEX = /^\/src\/components\/.*\/cc-.*\.smart.*\.md$/;
    if (SMART_COMPONENT_STORY_REGEX.test(context.path)) {

      // language=JavaScript
      context.body += `
        import { updateRootContext } from '../../lib/smart-manager.js';

        updateRootContext({
          apiConfig: {
            API_HOST: '${API_HOST}',
            API_OAUTH_TOKEN: '${API_OAUTH_TOKEN}',
            API_OAUTH_TOKEN_SECRET: '${API_OAUTH_TOKEN_SECRET}',
            OAUTH_CONSUMER_KEY: '${OAUTH_CONSUMER_KEY}',
            OAUTH_CONSUMER_SECRET: '${OAUTH_CONSUMER_SECRET}',
          },
        });
      `;
    }
  },
};

export default {
  port: 6006,
  nodeResolve: true,
  // watch: true,
  mimeTypes: {
    '**/*.md': 'js',
    '**/*.json': 'js',
    '.**/*.json': 'js',
  },
  plugins: [
    storybookWdsPlugin(),
    hmrI18nPlugin,
    injectAuthForSmartComponentsPlugin,
    cemAnalyzerPlugin,
    hmrPlugin({
      include: ['src/**/*'],
      presets: [presets.lit],
    }),
    rollupAdapter(json()),
    esbuildBundlePlugin({
      pathsToBundle: [
        '/src/lib/leaflet-esm.js',
        '/node_modules/rxjs/dist/esm5/index.js',
        '/node_modules/chart.js/dist/chart.esm.js',
      ],
    }),
    commonjs({
      // the commonjs plugin is slow, list the required packages explicitly:
      include: commonJsIdentifiers([
        'statuses',
        // used by clever-client
        'oauth-1.0a',
        'component-emitter',
      ]),
    }),
  ],
};