web-components/web-dev-server.config.js at main · vaadin/web-components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import { esbuildPlugin } from '@web/dev-server-esbuild';
import { appendStyles, generateListing, isIndexPage } from './wds-utils.js';

const theme = process.argv.join(' ').match(/--theme=(\w+)/u)?.[1] ?? 'base:light';

/** @return {import('@web/test-runner').TestRunnerPlugin} */
export function cssImportPlugin() {
  return {
    name: 'css-import',
    transformImport({ source }) {
      if (source.endsWith('.css')) {
        return `${source}?injectCSS`;
      }
    },
    transform(context) {
      if (context.query.injectCSS !== undefined) {
        return `
          const link = document.createElement('link');
          link.rel = 'stylesheet';
          link.href = ${JSON.stringify(context.path)};
          document.head.appendChild(link);
          await new Promise((resolve, reject) => {
            link.addEventListener('load', resolve);
            link.addEventListener('error', reject);
          });
        `;
      }
    },
    resolveMimeType(context) {
      if (context.query.injectCSS !== undefined) {
        return 'text/javascript';
      }
    },
  };
}

/** @return {import('@web/test-runner').TestRunnerPlugin} */
export function enforceThemePlugin(defaultTheme) {
  return {
    name: 'enforce-theme',
    transform(context) {
      if (!context.response.is('html')) {
        return context.body;
      }

      let { body } = context;

      // Inject theme into HTML responses
      // Use query parameter if present, otherwise fall back to process arg
      const theme = context.query.theme || defaultTheme;

      if (theme.endsWith('dark')) {
        body = body.replace('<html', `<html data-theme="${theme}" theme="dark"`);
      } else {
        body = body.replace('<html', `<html data-theme="${theme}"`);
      }

      if (theme.startsWith('lumo')) {
        body = body.replace(
          '</title>',
          '</title><link rel="stylesheet" href="/packages/vaadin-lumo-styles/lumo.css" />',
        );
      }

      if (theme.startsWith('aura')) {
        body = body.replace('</title>', '</title><link rel="stylesheet" href="/packages/aura/aura.css" />');
      }

      // Inject theme switcher
      body = body.replace('</body>', '<theme-switcher></theme-switcher></body>');

      return body;
    },
  };
}

export default {
  plugins: [
    {
      name: 'dev-page-listing',
      transform(context) {
        if (context.response.is('html')) {
          let body = context.body;

          // Fouc prevention
          body = appendStyles(body);

          // Index page listing
          if (isIndexPage(body)) {
            const path = context.path.replace(/\/?(index.html)?$/u, '');
            const dir = `.${path}`;
            body = generateListing(body, dir);

            // Add <base> to make index pages work without trailing slash
            body = body.replace('<head>', `<head>\n<base href="${path}/">`);
          }

          return { body };
        }
      },
    },
    esbuildPlugin({ ts: true }),
    enforceThemePlugin(theme),
  ],
};