svelte-hint/SETUP.md

SETUP

Shamefully copied from the carbon team

SvelteKit

SvelteKit is fast becoming the de facto framework for building Svelte apps that supports both client-side rendering (CSR) and server-side rendering (SSR).

For set-ups powered by vite, add svelte-hint to the list of dependencies for vite to optimize.

If using a SvelteKit adapter, instruct vite to avoid externalizing svelte-hint when building for production.

// svelte.config.js
import adapter from '@sveltejs/adapter-node'

const production = process.env.NODE_ENV === 'production'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
    target: '#svelte',
    vite: {
      optimizeDeps: {
        include: ['svelte-hint'],
      },
      ssr: {
        noExternal: [production && 'svelte-hint'].filter(Boolean),
      },
    },
  },
}

export default config

Vite

vite-plugin-svelte is an alternative to using SvelteKit. Similarly, instruct vite to optimize svelte-hint in vite.config.js.

Note that @sveltejs/vite-plugin-svelte is the official vite/svelte integration not to be confused with svite.

// vite.config.js
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { defineConfig } from 'vite'

export default defineConfig(({ mode }) => {
  return {
    plugins: [svelte()],
    build: { minify: mode === 'production' },
    optimizeDeps: { include: ['svelte-hint'] },
  }
})

Sapper

sapper is another official Svelte framework that supports server-side rendering (SSR).

Take care to install svelte-hint-svelte as a development dependency.

No additional configuration should be necessary.

Rollup

ReferenceError: process is not defined

Install and add @rollup/plugin-replace to the list of plugins in rollup.config.js to avoid the process is not defined runtime error.

This plugin statically replaces strings in bundled files with the specified value.

In the example below, all instances of process.env.NODE_ENV will be replaced with "production" while bundling.

// rollup.config.js
import replace from '@rollup/plugin-replace'

export default {
  // ...
  plugins: [
    replace({
      preventAssignment: true,
      'process.env.NODE_ENV': JSON.stringify('production'),
    }),
  ],
}

this has been rewritten to undefined

Set context: "window" to address the this has been rewritten to undefined Rollup error.

export default {
+  context: "window",
};

Circular dependency warnings

You may see circular dependency warnings for d3 and svelte-hint packages that can be safely ignored.

Use the onwarn option to selectively ignore these warnings.

// rollup.config.js
export default {
  onwarn: (warning, warn) => {
    // omit circular dependency warnings emitted from
    // "d3-*" packages and "svelte-hint"
    if (warning.code === 'CIRCULAR_DEPENDENCY' && /^node_modules\/(d3-|svelte-hint)/.test(warning.importer)) {
      return
    }

    // preserve all other warnings
    warn(warning)
  },
}

Dynamic imports

If using dynamic imports, set inlineDynamicImports: true in rollup.config.js to enable code-splitting.

Otherwise, you may encounter the Rollup error Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.

export default {
+  inlineDynamicImports: true,
};

Webpack

webpack is another popular application bundler used to build Svelte apps.

No additional configuration should be necessary.

Snowpack

snowpack is an ESM-powered frontend build tool.

Ensure you have @snowpack/plugin-svelte added as a plugin in snowpack.config.js.

No additional configuration should be necessary.

// snowpack.config.js

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  plugins: ['@snowpack/plugin-svelte'],
}