Getting Started: Buildless Development

import { esbuildPlugin } from '@web/dev-server-esbuild';
import { fromRollup } from '@web/dev-server-rollup';

import rollupCommonjs from '@rollup/plugin-commonjs';
import rollupLitcss from 'rollup-plugin-lit-css';
import rollupGraphQL from '@rollup/plugin-graphql';

const litcss = fromRollup(rollupLitcss);
const graphql = fromRollup(rollupGraphQL);
const commonjs = fromRollup(rollupCommonjs);

/**
 * These are the CSS files you directly import into components
 * Transform these files into Lit `CSSResult` modules
 */
const componentCSS =
  'src/components/**/*.css';

/**
 * These are the CSS files you load globally in `index.html`.
 * Serve these as regular stylesheets
 */
const globalCSS =
  'examples/spacex/style.css';

export default {
  nodeResolve: true,
  watch: true,
  rootDir: '.',
  port: 8090,
  appIndex: 'src/index.html',
  mimeTypes: {
    'src/components/**/*.css': 'js',
    'src/**/*.graphql': 'js',
  },
  plugins: [
    litcss({ include: componentCSS, exclude: globalCSS }),
    graphql(),
    commonjs(),
    esbuildPlugin({ ts: true }),
  ],
};

declare module '*.graphql' {
  import { DocumentNode } from '@apollo/client/core';
  const defaultDocument: DocumentNode;
  export default defaultDocument;
}

declare module '*.css' {
  import { CSSResult } from 'lit';
  const css: CSSResult;
  export default css;
}