rixo / svelte-template-hot Goto Github PK

Copy of official Svelte template with added HMR support

JavaScript 68.12% CSS 13.96% HTML 6.17% Svelte 11.75%

svelte svelte-template svelte-v3 rollup hmr hot-module-replacement rollup-hmr

svelte-template-hot's Introduction

Svelte Template Hot

This is a copy of official Svelte template with added HMR support. It lives at https://github.com/rixo/svelte-template-hot.

This template aims to remain as close to the official template as possible. Please refer to official docs for general usage. For HMR specific stuff, see bellow.

⚠️ Experimental ⚠️

This HMR implementation relies on Svelte's private & non documented API. This means that it can stop working with any new version of Svelte.

Progress of Svelte HMR support can be tracked in this issue.

Update 2020-02-24 We're making progress :)

NOTE This template pins the minor version of Svelte in package.json, using the tilde comparator because, in practice, HMR breakages tend to only happen with new minor versions of Svelte (not patch). And I don't want people to download a hot template with broken HMR... But, in your app, you can change this to your liking -- because you might be more interested in last version of Svelte than stable HMR, or be wise and pin the exact versions of all you dependencies.

Installation

To create a new project based on this template using degit:

npx degit rixo/svelte-template-hot svelte-app
cd svelte-app
npm install

Run the build script a first time, in order to avoid 404 errors about missing bundle.css in the browser:

npm run build

Quick start

npm run dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and... Eyeball!

Usage

HMR is supported both with Nollup or with Rollup itself with (very experimental) rollup-plugin-hot.

Nollup implements the shortest possible path from a file change to the module reloaded in the browser and is all in-memory. Said otherwise, it is insanely fast. Also, it has been around for some time so it is quite battle tested already.

The Rollup plugin on the other hand is still little more than a proof of concept by now, but it has better sourcemap support and error reporting (according to my own tastes at least).

Support for both Nollup and Rollup HMR is provided by rollup-plugin-svelte-hot. Please report issues regarding HMR in this plugin's tracker. Or this template's project might make more sense. You be the judge.

Start HMR server with Nollup

npm run dev:nollup

Start Rollup with HMR support

npm run dev:rollup

Start with LiveReload (no HMR)

This is the default dev of official template.

npm run dev:livereload

Start with default method

Nollup HMR is also aliased as dev so you can simply run:

npm run dev

You can change the default dev script to your preferred method in the scripts section of package.json.

2020-06-29 Nollup has been made the default dev script (instead of Rollup) because just released Nollup 0.12.0 fixes support for Svelte sourcemaps and dynamic imports, and Nollup is monstrously fast (especially on the most important metrics, that is rebuild time in big projects)!

The suggested workflow is to use Nollup for dev and enjoy instant feedback loop. If you need a plugin that doesn't work with Nollup, or if you are in a situation that Nollup makes harder to debug (mainly because of it running your code through eval), you can fallback on npm run dev:rollup (HMR with rollup-plugin-hot). If you have a bug that you suspect might be caused by HMR or HMR code transform, confirm by turning back to npm run dev:livereload.

Build

npm run build

svelte-template-hot's People

Contributors

Stargazers

Watchers

Forkers

originalsin antony m-dary-nur azuwis steinoy sokcuri r2dev2 willnguyen1312 sanshain

svelte-template-hot's Issues

A lot of warnings in console after upgrading nollup to 0.14.3

Maybe is not a svelte-plugin-hot issue and I'll close it ASAP.

After upgrading from nollup 0.14.2 to 0.14.3 I get a lot of warning now with this, why?

Ref: PepsRyuu/nollup#166 (comment)

css wrong path with rollup-plugin-svelte-hot 0.11

Using this in rollup.config.js:

css: css => {
  css.write('public/build/bundle.css')
}

is not ok with rollup-plugin-svelte-hot: 0.11.0

because it creates a fake public/build/bundle.css using npm run dev and a wrong public/build/public/build/bundle.css using npm run build.

Using this code instead:

css: css => {
  css.write('bundle.css')
}

creates a fake bundle.css in root (which is wrong) with npm run dev and a good public/build/bundle.css with npm run build.

`npm run build` does not exit

Steps to reproduce:

npx degit rixo/svelte-template-hot test
cd test
npm install
npm run build

And then the build process does not exit.

I believe commit 0b50fc1 is related.

Dynamic import?

Can I using dynamic import for code splitting with this template?

DevTools failed to load SourceMap with nollup only

I'm trying to use the amazing @urql/svelte.

It works both with nollup and rollup.

But with nollup I have these warnings in console:

DevTools failed to load SourceMap: Could not load content for http://localhost:5000/node_modules/@urql/core/dist/2b2328af.mjs.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for http://localhost:5000/node_modules/@urql/svelte/dist/urql-svelte.mjs.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Reproduction here: https://github.com/frederikhors/svelte-template-hot/tree/urql-svelte-sourcemap-warnings

Why?

Maximum call stack size exceeded

RangeError: Maximum call stack size exceeded
    at callAsyncFirstHook (/home/zen/Documents/psikotes/node_modules/.pnpm/[email protected][email protected]/node_modules/nollup/lib/impl/PluginLifecycle.js:34:24)
    at Object.resolveId (/home/zen/Documents/psikotes/node_modules/.pnpm/[email protected][email protected]/node_modules/nollup/lib/impl/PluginLifecycle.js:129:28)
    at Object.resolve (/home/zen/Documents/psikotes/node_modules/.pnpm/[email protected][email protected]/node_modules/nollup/lib/impl/PluginContext.js:117:64)
    at Object.resolveId (/home/zen/Documents/psikotes/node_modules/.pnpm/@rollup/[email protected][email protected]/node_modules/@rollup/plugin-commonjs/dist/index.js:1131:17)
    at _callAsyncHook (/home/zen/Documents/psikotes/node_modules/.pnpm/[email protected][email protected]/node_modules/nollup/lib/impl/PluginLifecycle.js:12:31)
    at callAsyncFirstHook (/home/zen/Documents/psikotes/node_modules/.pnpm/[email protected][email protected]/node_modules/nollup/lib/impl/PluginLifecycle.js:34:24)
    at Object.resolveId (/home/zen/Documents/psikotes/node_modules/.pnpm/[email protected][email protected]/node_modules/nollup/lib/impl/PluginLifecycle.js:129:28)
    at Object.resolve (/home/zen/Documents/psikotes/node_modules/.pnpm/[email protected][email protected]/node_modules/nollup/lib/impl/PluginContext.js:117:64)
    at Object.resolveId (/home/zen/Documents/psikotes/node_modules/.pnpm/@rollup/[email protected][email protected]/node_modules/@rollup/plugin-commonjs/dist/index.js:1131:17)
    at _callAsyncHook (/home/zen/Documents/psikotes/node_modules/.pnpm/[email protected][email protected]/node_modules/nollup/lib/impl/PluginLifecycle.js:12:31)
RangeError: Maximum call stack size exceeded
    at callAsyncFirstHook (/home/zen/Documents/psikotes/node_modules/.pnpm/[email protected][email protected]/node_modules/nollup/lib/impl/PluginLifecycle.js:34:24)
    at Object.resolveId (/home/zen/Documents/psikotes/node_modules/.pnpm/[email protected][email protected]/node_modules/nollup/lib/impl/PluginLifecycle.js:129:28)
    at Object.resolve (/home/zen/Documents/psikotes/node_modules/.pnpm/[email protected][email protected]/node_modules/nollup/lib/impl/PluginContext.js:117:64)
    at Object.resolveId (/home/zen/Documents/psikotes/node_modules/.pnpm/@rollup/[email protected][email protected]/node_modules/@rollup/plugin-commonjs/dist/index.js:1131:17)
    at _callAsyncHook (/home/zen/Documents/psikotes/node_modules/.pnpm/[email protected][email protected]/node_modules/nollup/lib/impl/PluginLifecycle.js:12:31)
    at callAsyncFirstHook (/home/zen/Documents/psikotes/node_modules/.pnpm/[email protected][email protected]/node_modules/nollup/lib/impl/PluginLifecycle.js:34:24)
    at Object.resolveId (/home/zen/Documents/psikotes/node_modules/.pnpm/[email protected][email protected]/node_modules/nollup/lib/impl/PluginLifecycle.js:129:28)
    at Object.resolve (/home/zen/Documents/psikotes/node_modules/.pnpm/[email protected][email protected]/node_modules/nollup/lib/impl/PluginContext.js:117:64)
    at Object.resolveId (/home/zen/Documents/psikotes/node_modules/.pnpm/@rollup/[email protected][email protected]/node_modules/@rollup/plugin-commonjs/dist/index.js:1131:17)
    at _callAsyncHook (/home/zen/Documents/psikotes/node_modules/.pnpm/[email protected][email protected]/node_modules/nollup/lib/impl/PluginLifecycle.js:12:31)

Add dedupe to node-resolve config

Hi @rixo !

I'm trying out the template on some smaller projects, so I'll raise any issues I find.

First one is that you get a lot of errors if you're trying to link modules, and this is because the template is missing dedupe config.

Is there a way to proxy calls?

Is there a way to use nollup proxy option?

Specifically I need to proxy /api/todos calls to http://myserver:3000/api/todos.

What do you suggest?

Thanks.

Local state is not preserved as expected

I'm having trouble getting HMR working. Any save results in a full refresh and state loss for me.

Here's a basic example:

<script>
  let n = 0
</script>

<main>
  <h1>{n}</h1>
  <button on:click={() => n++}>+</button>
</main>

Saving this component file results in n being reset to 0.

Any advice?

Update the rollup-plugin-hot version

There 0.0.13-4 version with the 0.0.0.0 host support.

What do you think about Typescript?

Do you think I can use it with no issues as described in the sveltejs/template instructions if I use this template?

CSS/CSS Problems

Hello, i tried to get HMR working on my project by moving the rollup config from this repo to my project

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';
import css from 'rollup-plugin-css-only';
import scss from "rollup-plugin-scss";
import replace from 'rollup-plugin-replace';
import hmr from 'rollup-plugin-hot'
const production = !process.env.ROLLUP_WATCH;
const isNollup = !!process.env.NOLLUP
const isWatch = !!process.env.ROLLUP_WATCH
const isLiveReload = !!process.env.LIVERELOAD

const isDev = isWatch || isLiveReload
const isProduction = !isDev

const isHot = isWatch && !isLiveReload

function serve() {
	let server;

	function toExit() {
		if (server) server.kill(0);
	}

	return {
		writeBundle() {
			if (server) return;
			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
				stdio: ['ignore', 'inherit', 'inherit'],
				shell: true
			});

			process.on('SIGTERM', toExit);
			process.on('exit', toExit);
		}
	};
}



export default {
	input: 'src/main.ts',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		dir: 'public/build/',
		chunkFileNames: '[name].js',
		exports: "named"

	},
	inlineDynamicImports: true,
	plugins: [
		replace({
			'process.env.NODE_ENV': JSON.stringify(
				'production'
			)
		}),
		svelte({
			preprocess: [
				sveltePreprocess({ sourceMap: !production })
			],
			compilerOptions: {
				// enable run-time checks when not in production
				dev: !production,
				cssHash: function(option) {
					return `_${option.hash(option.css)}`;
				},
				css: css => {
					css.write('bundle.css')
				},

			}


		}),

		// we'll extract any component CSS out into
		// a separate file - better for performance
		scss({output: 'public/build/bundle.css'}),
		css({ output: 'bundle.css' }),


		// If you have external dependencies installed from
		// npm, you'll most likely need these plugins. In
		// some cases you'll need additional configuration -
		// consult the documentation for details:
		// https://github.com/rollup/plugins/tree/master/packages/commonjs
		resolve({
			browser: true,
			dedupe: ['svelte']
		}),
		commonjs(),
		typescript({
			include: ['./**/*.ts', './../network/**/*.ts', './../shared/**/*.ts'],
			sourceMap: !production,
			inlineSources: !production
		}),

		// In dev mode, call `npm run start` once
		// the bundle has been generated
		isDev && !isNollup && serve(),

		// Watch the `public` directory and refresh the
		// browser on changes when not in production
		isLiveReload && livereload('public'),

		// If we're building for production (npm run build
		// instead of npm run dev), minify
		isProduction && terser(),
		hmr({
			public: 'public',
			inMemory: true,
			host: '0.0.0.0',
			port: 35729,
			compatModuleHot: !isHot,
		})
	],
	watch: {
		clearScreen: false
	}
};

i ended up this way, and everything works except when i change css/scss Code... The Module reloads with the new CSS hash, but the new CSS Code isnt injected to the dom so I have broken design / missing styles.

Do we need `//@hmr:keep` now?

Do we need //@hmr:keep now?

svelte-flatpickr, localization, import object is undefined with nollup

I'm trying to use svelte-flatpickr which works very good with npm run dev:rollup.

Here a reproduction: https://github.com/frederikhors/svelte-template-hot/tree/svelte-flatpickr-localization.

This is the code: https://github.com/frederikhors/svelte-template-hot/blob/svelte-flatpickr-localization/src/FlatPickr.svelte:

I'm following the docs here: https://flatpickr.js.org/localization/.

<script>
  import Flatpickr from "svelte-flatpickr";
  import { French } from "flatpickr/dist/l10n/fr.js";
  console.log("French", French); // why this is undefined?

  export let date = null;
  
  const options = {
    enableTime: true,
    locale: French,
    defaultDate: date,
    allowInput: true,
  };
</script>

<Flatpickr {options} bind:value={date} />

But this line: import { French } from "flatpickr/dist/l10n/fr.js" doesn't work: French is undefined.

Why?

TypeError: Cannot read property 'length' of undefined w/ @rollup/plugin-commonjs v16

From "@rollup/plugin-commonjs": "16.0.0" this is the error:

[Nollup] Listening on http://localhost:5000
TypeError: Cannot read property 'length' of undefined
    at new MagicString (C:\svelte\node_modules\magic-string\dist\magic-string.cjs.js:354:34)
    at module.exports (C:\svelte\node_modules\nollup\lib\impl\ImportExportResolver.js:318:21)
    at compileModule (C:\svelte\node_modules\nollup\lib\impl\NollupCompiler.js:59:30)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async compileInputTarget (C:\svelte\node_modules\nollup\lib\impl\NollupCompiler.js:138:5)
    at async Object.compile (C:\svelte\node_modules\nollup\lib\impl\NollupCompiler.js:211:31)
    at async generateImpl (C:\svelte\node_modules\nollup\lib\index.js:13:21)

Reproduction here: https://github.com/frederikhors/svelte-template-hot/tree/update-commonjs-to-16

Issue with commonjs@17

We just fixed the issue with nollup and commonjs@16; now we have one with commonjs@17:

Error: Insufficient Rollup version: "@rollup/plugin-commonjs" requires at least [email protected] but found [email protected].
  at validateRollupVersion (C:\svelte-template-hot\node_modules\@rollup\plugin-commonjs\dist\index.js:591:11)
  at Object.buildStart (C:\svelte-template-hot\node_modules\@rollup\plugin-commonjs\dist\index.js:1504:7)
  at _callAsyncHook (C:\svelte-template-hot\node_modules\nollup\lib\impl\PluginLifecycle.js:12:31)    at callAsyncParallelHook (C:\svelte-template-hot\node_modules\nollup\lib\impl\PluginLifecycle.js:68:26)
  at Object.buildStart (C:\svelte-template-hot\node_modules\nollup\lib\impl\PluginLifecycle.js:116:19)
  at Object.compile (C:\svelte-template-hot\node_modules\nollup\lib\impl\NollupCompiler.js:206:41)    at generateImpl (C:\svelte-template-hot\node_modules\nollup\lib\index.js:13:42)
  at C:\svelte-template-hot\node_modules\nollup\lib\index.js:38:21
  at new Promise (<anonymous>)
  at Object.generate (C:\svelte-template-hot\node_modules\nollup\lib\index.js:34:20)

Reproduction: https://github.com/frederikhors/svelte-template-hot/tree/update-to-commonjs-17