sveltejs / svelte-cli

Command line interface for Svelte

svelte-cli

Command line interface for Svelte.

DEPRECATION NOTE

As of Svelte version 2.4.0, the CLI is integrated into the svelte package itself, and this package should no longer be used.

Why you shouldn't use this

svelte-cli is useful if you want to try out Svelte, but it's not recommended for serious production use. It will compile your components to standalone JavaScript files, but won't automatically recompile them when they change, and won't deduplicate code shared between your components.

Instead, we recommend using a bundler such as Rollup (with rollup-plugin-svelte), Webpack (with svelte-loader), or another integration listed here. See here for an easy get-started guide.

Installation

npm install -g svelte-cli

Usage

# get help
svelte --help

# generate a JavaScript module from MyComponent.html
svelte compile MyComponent.html > MyComponent.js
svelte compile -i MyComponent.html -o MyComponent.js

# generate a UMD module from MyComponent.html, inferring
# name from the filename ('MyComponent')
svelte compile -f umd MyComponent.html > MyComponent.js

# generate a UMD module, specifying the name
svelte compile -f umd -n CustomName MyComponent.html > MyComponent.js

# compile all .html files in components/
svelte compile -i src/components -o build/components

License

MIT

svelte-cli's Issues

"Uncaught TypeError: node.removeEventListener is not a function" when use Svelte with jQuery on the same page

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../dist/main.js"></script>

When both Svelte and jQuery are included on the page there is an exception "Uncaught TypeError: node.removeEventListener is not a function"

The issue is caused by this function that is generated in the global namespace and rewrites a method of a window object

function removeEventListener ( node, event, handler ) {
	node.removeEventListener ( event, handler, false );
}

Exception is thrown when jQuery calls this function

/**
 * The ready event handler and self cleanup method
 */
function completed() {
	document.removeEventListener( "DOMContentLoaded", completed, false );
	window.removeEventListener( "load", completed, false );
	jQuery.ready();
}

In this case the compiled function is called but not native method and the first argument is "load" instead of DOM node.
The advised solution is to wrap all code generated by the compiler to a self invoked function and avoid rewriting of window.removeEventListener() method.

Node version 6 required

More a head's up, but the CLI fails if you're using node v4.6 with error below... upgrading to node v6.9.1 solved this for me..

Error below on v4.6

`/home/ubuntu/workspace/node_modules/svelte-cli/bin.js:607
const { sourceMap } = options;
^

SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:974:3`

Cannot compile due to error: TypeError: path must be a string or Buffer in binding.stat(pathModule._makeLong(path));

A fresh installation of svelte-cli fails to compile anything.

Stack trace

$ svelte compile --iife ./HelloWorld.html > HelloWorld.js
svelte version 1.41.1
fs.js:955
  binding.stat(pathModule._makeLong(path));
          ^

TypeError: path must be a string or Buffer
    at Object.fs.statSync (fs.js:955:11)
    at compile$1 (/home/me/.node_modules/lib/node_modules/svelte-cli/bin.js:559:19)
    at Object.<anonymous> (/home/me/.node_modules/lib/node_modules/svelte-cli/bin.js:707:3)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Function.Module.runMain (module.js:665:10)
    at startup (bootstrap_node.js:187:16)

Versions

$ node -v
v8.7.0
$ svelte -v
svelte-cli version 1.4.0
svelte version 1.41.1

Watch Mode?

Should the CLI include a -watch option? It could be useful during development. It could be similar to watch in TypeScript.

generate option

Is it possible to use the 'generate: "ssr"' option with the cli?

svelte is both a dev dep and runtime dep... ?

dev dep
runtime dep

Should it only be a runtime dep?

Unexpected token `{` issue

svelte --help
/usr/local/lib/node_modules/svelte-cli/bin.js:607
	const { sourceMap } = options;
	      ^

SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:146:18)
    at node.js:404:3

Node.js version

Which version of Node is required, I have version v4.2.6 and I have error:

/usr/local/lib/node_modules/svelte-cli/bin.js:610
        const { sourceMap } = options;
              ^

SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Function.Module.runMain (module.js:442:10)
    at startup (node.js:136:18)
    at node.js:966:3

Compiling directory of components fails

Excited to be using svelte! It's a great way to progressively enhance non-SPAs in particular.

Trying to compile a directory of components as noted in the README is failing with EEXIST because the destination directory already exists.

$ svelte compile -i _svelte_components -o _js/components 
fs.js:854
  return binding.mkdir(pathModule._makeLong(path),
                 ^

Error: EEXIST: file already exists, mkdir '_js'
    at Object.fs.mkdirSync (fs.js:854:18)
    at mkdirp (/home/mischka/projects/predict-pain-lab/node_modules/svelte-cli/bin.js:550:5)
    at mkdirp (/home/mischka/projects/predict-pain-lab/node_modules/svelte-cli/bin.js:549:2)
    at compile$1 (/home/mischka/projects/predict-pain-lab/node_modules/svelte-cli/bin.js:573:3)
    at Object.<anonymous> (/home/mischka/projects/predict-pain-lab/node_modules/svelte-cli/bin.js:663:3)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
error Command failed with exit code 1.

$ tree _svelte_components/
_svelte_components/
└── PersonDetails.html

0 directories, 1 file

$ tree _js
_js
├── components
│   └── PersonDetails.js

1 directory, 16 files

Thank you! 🐣

Update svelte please.

The svelte version here is 1.6, please update to 1.9

Support passing more options to compiler

It was brought up in Gitter that there's no way to pass store: true to the compiler. This one seems a little weird to implement, though, since we're intending to remove that option and have it effectively always be true in Svelte v2. There are probably also other things that can't be set from the CLI.

I suggest that we add a way to pass any options into the compiler (or at least those whose values are serializable as JSON). That would avoid these from having to get added individually as new features are added to the compiler, would avoid documenting how to pass each option, and would ease the transition to using build tool integrations later.

A simple way to do this would be something like --options '{store:true,cascade:false}' although that's not the most user-friendly to type.

No install on windows

$ npm install -g svelt-cli
npm ERR! Windows_NT 10.0.14986
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\Sean\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "install" "-g" "svelt-cli"
npm ERR! node v7.5.0
npm ERR! npm v4.2.0

npm ERR! Cannot read property 'path' of null
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Sean\AppData\Roaming\npm-cache_logs\2017-02-22T18_53_50_857Z-debug.log

Log file attached as .txt

2017-02-22T18_58_14_465Z-debug.txt

I get the same error when trying it with Ubuntu Bash on Windows with WSL.

Add some tests...

Issue installing svelte 2.0 on MacOS

Using:
sudo npm install -g svelte-cli
I get this error:
[email protected] requires a peer of svelte@* but none is installed.
and svelte is not installed.

I had to install svelte 1.5.0 to run the HelloWorld example
sudo npm install -g [email protected]

strip BOM

sveltejs/svelte#661

Compiler error

Compiler doesn't seem to read html file correctly (Windows 10), see below

svelte compile HelloWorld.html > HelloWorld.js
svelte version 1.22.4
compiling HelloWorld.html...
Expected valid tag name
1: ��< h 1 > H e l l o { { n a m e } } < / h 1 >
^

Support `dev` flag in CLI

The new dev: true option in the compiler should be exposed in the CLI. I'm currently thinking a --dev/-d flag. I can work on a this if that sounds like how you want to handle this.

Cannot compile on Windows 7

I tried following along with the Getting Started section of the guide.

First, I ran this:
echo "<h1>Hello {{name}}</h1>" > HelloWorld.html

Then I ran this:
svelte compile --format iife .\HelloWorld.html > HelloWorld.js

This caused an empty HelloWorld.js file to be generated, and returned the following error:

compiling HelloWorld.html...

C:\Users\\Roaming\npm\node_modules\svelte-cli\node_modules\svelte\dist\svelte.js:4138
                        throw new ParseError( message, this.template, index );
                        ^
ParseError: Expected valid tag name

Running on Windows 7, x64
Node v6.5.0
svelte-cli installed globally using npm v3.10.6

Files compiled to .html when compiling directory

Looks like the extension isn't being changed to js when compiling from a directory.

$ svelte compile -i _svelte_components -o _js/components 
compiling _svelte_components/PersonDetails.html...
wrote _js/components/PersonDetails.html
Done in 0.12s.