web component + svelte + esbuild = svelteup

client rendering + light weight + extremly fast = svelteup

Web component is the future web tech, which is suitable with a client rendering and light weight frontend framework, svelte.

If we want some components in a simple project, please svelteup. More details on examples

The entry can be a file or a directory. Please reference to examples

The entry should be a directory, and each svelte file will be a seperate entry.

The entry should be a file, and all the web components should be bundled together.

A command line is used to bundle svelte components as web component default.

$ ·> svelteup --help

  Description
    Bundle your Svelte Components
    Parameter Entry can be a file
    Default Entry 'components'

  Usage
    $ svelteup [entry] [options]

  Options
    -o, --outdir      Set output directory (default public/dist)
    -c, --config      Set config path (default svelteup.config.js)
    -d, --dev         [Development] Dev Mode with serving static resources (default false)
    -w, --watch       [Development] Watch Mode without serving static resources (default false)
    -s, --servedir    [Development] Static resources directory
    -p, --port        [Development] Serve port (default 5000)
    -v, --version     Displays current version
    -h, --help        Displays this message

  Examples
    $ svelteup -s public
    $ svelteup bundle.js
    $ svelteup components -o public/dist

Please put a svelteup.config.js or svelteup.config.ts in the project root path.

You can use preprocess and compilerOptions. Even you can compile svelte with customElement:false.

import sveltePreprocess from 'svelte-preprocess';

export default {
  entry: 'examples/no-custom-element/components/index.js',
  outdir: 'examples/no-custom-element/public/dist',
  servedir: 'examples/no-custom-element/public',
  compilerOptions: {
    customElement: false,
  },
  preprocess: sveltePreprocess({
    postcss: {
      plugins: [require('autoprefixer')],
    },
  }),
};

Parameters of svelteup.config.js

import svelteup from 'svelteup';

svelteup('componets/index.js', { servedir: 'public' });

Please have a try.

• svelteup-starter
• keynote-svelte
• chrome-extension-svelte

MIT @brandonxiang