Skip to content

Commit c0cea2a

Browse files
committed
Remove Svelte 2 HMR
1 parent 99a64d5 commit c0cea2a

File tree

6 files changed

+2
-269
lines changed

6 files changed

+2
-269
lines changed

README.md

+1-98
Original file line numberDiff line numberDiff line change
@@ -145,104 +145,7 @@ This should create an additional `styles.css.map` file.
145145

146146
### Hot Reload
147147

148-
Hot reloading is turned off by default, you can turn it on using the `hotReload` option as shown below:
149-
150-
```javascript
151-
...
152-
module: {
153-
rules: [
154-
...
155-
{
156-
test: /\.(html|svelte)$/,
157-
exclude: /node_modules/,
158-
use: {
159-
loader: 'svelte-loader',
160-
options: {
161-
hotReload: true
162-
}
163-
}
164-
}
165-
...
166-
]
167-
}
168-
...
169-
```
170-
171-
#### Hot reload rules and caveats:
172-
173-
- `_rerender` and `_register` are reserved method names, please don't use them in `methods:{...}`
174-
- Turning `dev` mode on (`dev:true`) is **not** necessary.
175-
- Modifying the HTML (template) part of your component will replace and re-render the changes in place. Current local state of the component will also be preserved (this can be turned off per component see [Stop preserving state](#stop-preserving-state)).
176-
- When modifying the `<script>` part of your component, instances will be replaced and re-rendered in place too.
177-
However if your component has lifecycle methods that produce global side-effects, you might need to reload the whole page.
178-
- If you are using `svelte/store`, a full reload is required if you modify `store` properties
179-
180-
181-
Components will **not** be hot reloaded in the following situations:
182-
1. `process.env.NODE_ENV === 'production'`
183-
2. Webpack is minifying code
184-
3. Webpack's `target` is `node` (i.e SSR components)
185-
4. `generate` option has a value of `ssr`
186-
187-
#### Stop preserving state
188-
189-
Sometimes it might be necessary for some components to avoid state preservation on hot reload.
190-
191-
This can be configured on a per-component basis by adding a property `noPreserveState = true` to the component's constructor using the `setup()` method. For example:
192-
```js
193-
export default {
194-
setup(comp){
195-
comp.noPreserveState = true;
196-
},
197-
data(){return {...}},
198-
oncreate(){...}
199-
}
200-
```
201-
202-
Or, on a global basis by adding `{noPreserveState: true}` to `hotOptions`. For example:
203-
```js
204-
{
205-
test: /\.(html|svelte)$/,
206-
exclude: /node_modules/,
207-
use: [
208-
{
209-
loader: 'svelte-loader',
210-
options: {
211-
hotReload: true,
212-
hotOptions: {
213-
noPreserveState: true
214-
}
215-
}
216-
}
217-
]
218-
}
219-
```
220-
221-
**Please Note:** If you are using `svelte/store`, `noPreserveState` has no effect on `store` properties. Neither locally, nor globally.
222-
223-
#### External Dependencies
224-
225-
If you rely on any external dependencies (files required in a preprocessor for example) you might want to watch these files for changes and re-run svelte compile.
226-
227-
Webpack allows [loader dependencies](https://webpack.js.org/contribute/writing-a-loader/#loader-dependencies) to trigger a recompile. svelte-loader exposes this API via `options.externalDependencies`.
228-
For example:
229-
230-
```js
231-
...
232-
const variables = path.resolve('./variables.js');
233-
...
234-
{
235-
test: /\.(html|svelte)$/,
236-
use: [
237-
{
238-
loader: 'svelte-loader',
239-
options: {
240-
externalDependencies: [variables]
241-
}
242-
}
243-
]
244-
}
245-
```
148+
See [rixo/svelte-hmr](https://github.com/rixo/svelte-hmr#webpack) for info on how to setup hot module reloading (HMR).
246149

247150
## License
248151

index.js

-36
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,19 @@
11
const { relative } = require('path');
22
const { getOptions } = require('loader-utils');
33

4-
const hotApi = require.resolve('./lib/hot-api.js');
5-
64
const { compile, preprocess } = require('svelte/compiler');
75

86
const pluginOptions = {
9-
externalDependencies: true,
10-
hotReload: true,
11-
hotOptions: true,
127
preprocess: true,
138
emitCss: true,
149

1510
// legacy
1611
onwarn: true,
17-
shared: true,
1812
style: true,
1913
script: true,
2014
markup: true
2115
};
2216

23-
function makeHot(id, code, hotOptions) {
24-
const options = JSON.stringify(hotOptions);
25-
const replacement = `
26-
if (module.hot) {
27-
const { configure, register, reload } = require('${posixify(hotApi)}');
28-
29-
module.hot.accept();
30-
31-
if (!module.hot.data) {
32-
// initial load
33-
configure(${options});
34-
$2 = register(${id}, $2);
35-
} else {
36-
// hot update
37-
$2 = reload(${id}, $2);
38-
}
39-
}
40-
41-
export default $2;
42-
`;
43-
44-
return code.replace(/(export default ([^;]*));/, () => replacement);
45-
}
46-
4717
function posixify(file) {
4818
return file.replace(/[/\\]/g, '/');
4919
}
@@ -128,12 +98,6 @@ module.exports = function(source, map) {
12898
: handleWarning
12999
);
130100

131-
if (options.hotReload && !isProduction && !isServer) {
132-
const hotOptions = Object.assign({}, options.hotOptions);
133-
const id = JSON.stringify(relative(process.cwd(), compileOptions.filename));
134-
js.code = makeHot(id, js.code, hotOptions);
135-
}
136-
137101
if (options.emitCss && css.code) {
138102
const resource = posixify(compileOptions.filename);
139103
const cssPath = `${resource}.${index++}.css`;

lib/hot-api.js

-51
This file was deleted.

package-lock.json

-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@
1515
"webpack-loader"
1616
],
1717
"dependencies": {
18-
"loader-utils": "^1.1.0",
19-
"svelte-dev-helper": "^1.1.9"
18+
"loader-utils": "^1.1.0"
2019
},
2120
"devDependencies": {
2221
"chai": "^4.1.2",

test/loader.spec.js

-77
Original file line numberDiff line numberDiff line change
@@ -298,83 +298,6 @@ describe('loader', () => {
298298
)(done);
299299
});
300300
});
301-
302-
describe('hotReload', () => {
303-
it(
304-
'should configure hotReload=false (default)',
305-
testLoader(
306-
'test/fixtures/good.html',
307-
function(err, code, map) {
308-
expect(err).not.to.exist;
309-
310-
expect(code).not.to.contain('module.hot.accept();');
311-
},
312-
{}
313-
)
314-
);
315-
316-
it(
317-
'should configure hotReload=true',
318-
testLoader(
319-
'test/fixtures/good.html',
320-
function(err, code, map) {
321-
expect(err).not.to.exist;
322-
323-
expect(code).to.contain('module.hot.accept();');
324-
expect(code).not.to.contain('configure({"noPreserveState":true});');
325-
},
326-
{ hotReload: true }
327-
)
328-
);
329-
330-
it(
331-
'should configure hotReload=true & hotOptions',
332-
testLoader(
333-
'test/fixtures/good.html',
334-
function(err, code, map) {
335-
expect(err).not.to.exist;
336-
337-
expect(code).to.contain('module.hot.accept();');
338-
expect(code).to.contain('configure({"noPreserveState":true});');
339-
},
340-
{
341-
hotReload: true,
342-
hotOptions: {
343-
noPreserveState: true
344-
}
345-
}
346-
)
347-
);
348-
349-
it(
350-
'should ignore hotReload when generate=ssr',
351-
testLoader(
352-
'test/fixtures/good.html',
353-
function(err, code, map) {
354-
expect(err).not.to.exist;
355-
356-
expect(code).not.to.contain('module.hot.accept();');
357-
},
358-
{
359-
hotReload: true,
360-
generate: 'ssr'
361-
}
362-
)
363-
);
364-
365-
it(
366-
'should require resolved hot-api.js',
367-
testLoader(
368-
'test/fixtures/good.html',
369-
function(err, code, map) {
370-
expect(err).not.to.exist;
371-
372-
expect(code).to.contain(require.resolve('../lib/hot-api.js').replace(/[/\\]/g, '/'));
373-
},
374-
{ hotReload: true }
375-
)
376-
);
377-
});
378301
});
379302
});
380303

0 commit comments

Comments
 (0)