Merge pull request #58 from rixo/partial-accept

Add partialAccept option, and do some general cleaning in preparation for publish

.changeset/sharp-olives-drum.md

@@ -0,0 +1,5 @@
+---
+'svelte-hmr': minor
+---
+
+Add partialAccept option to fix HMR support of `<script context="module">`

CONTRIBUTING.md

@@ -90,7 +90,7 @@ If you've changed APIs, update the documentation.
 
 #### Changelogs
 
-For changes to be reflected in package changelogs, run `pnpx changeset` and follow the prompts.
+For changes to be reflected in package changelogs, run `pnpm changeset` and follow the prompts.
 You should always select the packages you've changed, Most likely `svelte-hmr`.
 
 ### What happens next?

package.json

@@ -11,11 +11,9 @@
     "type": "git",
     "url": "https://github.com/sveltejs/svelte-hmr"
   },
-  "devDependencies": {
-    "@changesets/cli": "^2.21.0",
-    "@rixo/eslint-config": "^0.8.1",
-    "@svitejs/changesets-changelog-github-compact": "^0.1.1",
-    "prettier": "^1.19.1"
+  "packageManager": "pnpm@7.1.0",
+  "engines": {
+    "pnpm": "^7.1.0"
   },
   "pnpm": {
     "overrides": {
@@ -25,13 +23,15 @@
       "ignoreMissing": ["nollup","webpack","webpack-dev-server"]
     }
   },
+  "devDependencies": {
+    "@changesets/cli": "^2.21.0",
+    "@rixo/eslint-config": "^0.8.1",
+    "@svitejs/changesets-changelog-github-compact": "^0.1.1",
+    "prettier": "^1.19.1"
+  },
   "scripts": {
     "release": "pnpm changeset publish",
     "lint": "pnpm --recursive lint",
     "test": "pnpm --recursive test"
-  },
-  "packageManager": "pnpm@7.1.0",
-  "engines": {
-    "pnpm": "^7.1.0"
   }
 }

packages/svelte-hmr/lib/make-hot.js

@@ -46,6 +46,9 @@ const defaultHotOptions = {
   // managed (but still...) exceptions, by using Svelte's current_component
   // instead of get_current_component
   allowLiveBinding: false,
+
+  // use acceptExports instead of accept, to fix support of context:module
+  partialAccept: false,
 }
 
 const defaultHotApi = 'hot-api-esm.js'
@@ -58,7 +61,11 @@ const renderApplyHmr = ({
   id,
   cssId,
   nonCssHash,
-  hotOptions: { injectCss },
+  hotOptions: {
+    injectCss,
+    partialAccept,
+    _accept = partialAccept ? "acceptExports(['default'])" : 'accept()',
+  },
   hotOptionsJson,
   hotApiImport,
   adapterImport,
@@ -81,7 +88,7 @@ const renderApplyHmr = ({
   //
   `${imports.join(';')};${`
     if (${meta} && ${meta}.hot) {
-      ${acceptable ? `if (false) ${meta}.hot.accept();` : ''};
+      ${acceptable ? `if (false) ${meta}.hot.${_accept};` : ''};
       $2 = ${globalName}.applyHmr({
         m: ${meta},
         id: ${json(id)},

packages/svelte-hmr/package.json

@@ -28,7 +28,7 @@
   "devDependencies": {
     "dotenv": "^10.0.0",
     "prettier": "^1.19.1",
-    "svelte": "^3.38.3",
+    "svelte": "^3.50.1",
     "tap-mocha-reporter": "^5.0.1",
     "zoar": "^0.3.0",
     "zorax": "^0.0.12"

playground/kit-app/.gitignore

@@ -4,3 +4,7 @@ node_modules
 /.svelte-kit
 /package
 .env
+.env.*
+!.env.example
+.vercel
+.output

playground/kit-app/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

playground/kit-app/README.md

@@ -1,21 +1,19 @@
 # create-svelte
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
 
 ## Creating a project
 
 If you're seeing this, you've probably already done this step. Congrats!
 
 ```bash
 # create a new project in the current directory
-npm init svelte@next
+npm create svelte@latest
 
 # create a new project in my-app
-npm init svelte@next my-app
+npm create svelte@latest my-app
 ```
 
-> Note: the `@next` is temporary
-
 ## Developing
 
 Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
@@ -29,10 +27,12 @@ npm run dev -- --open
 
 ## Building
 
-Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
+To create a production version of your app:
 
 ```bash
 npm run build
 ```
 
-> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

playground/kit-app/jsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

playground/kit-app/package.json

@@ -1,30 +1,25 @@
 {
-  "name": "kit-app",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "dev": "svelte-kit dev",
-    "build": "svelte-kit build",
-    "preview": "svelte-kit preview",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
-    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
-  },
-  "devDependencies": {
-    "@sveltejs/kit": "next",
-    "@typescript-eslint/eslint-plugin": "^4.31.1",
-    "@typescript-eslint/parser": "^4.31.1",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-svelte3": "^3.2.1",
-    "prettier": "^2.4.1",
-    "prettier-plugin-svelte": "^2.4.0",
-    "svelte": "^3.42.6",
-    "svelte-check": "^2.2.6",
-    "svelte-preprocess": "^4.9.4",
-    "tslib": "^2.3.1",
-    "typescript": "^4.4.3"
-  },
-  "type": "module"
+	"name": "kit-app",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"dependencies": {
+		"@fontsource/fira-mono": "^4.5.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "next",
+		"@sveltejs/kit": "next",
+		"@types/cookie": "^0.5.1",
+		"svelte": "^3.50.1",
+		"svelte-check": "^2.7.1",
+		"typescript": "^4.7.4",
+		"vite": "^3.1.0"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
+	}
 }

playground/kit-app/src/app.css

@@ -0,0 +1,107 @@
+@import '@fontsource/fira-mono';
+
+:root {
+	font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	--font-mono: 'Fira Mono', monospace;
+	--pure-white: #ffffff;
+	--primary-color: #b9c6d2;
+	--secondary-color: #d0dde9;
+	--tertiary-color: #edf0f8;
+	--accent-color: #ff3e00;
+	--heading-color: rgba(0, 0, 0, 0.7);
+	--text-color: #444444;
+	--background-without-opacity: rgba(255, 255, 255, 0.7);
+	--column-width: 42rem;
+	--column-margin-top: 4rem;
+}
+
+body {
+	min-height: 100vh;
+	margin: 0;
+	background-color: var(--primary-color);
+	background: linear-gradient(
+		180deg,
+		var(--primary-color) 0%,
+		var(--secondary-color) 10.45%,
+		var(--tertiary-color) 41.35%
+	);
+}
+
+body::before {
+	content: '';
+	width: 80vw;
+	height: 100vh;
+	position: absolute;
+	top: 0;
+	left: 10vw;
+	z-index: -1;
+	background: radial-gradient(
+		50% 50% at 50% 50%,
+		var(--pure-white) 0%,
+		rgba(255, 255, 255, 0) 100%
+	);
+	opacity: 0.05;
+}
+
+#svelte {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+h1,
+h2,
+p {
+	font-weight: 400;
+	color: var(--heading-color);
+}
+
+p {
+	line-height: 1.5;
+}
+
+a {
+	color: var(--accent-color);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+h1 {
+	font-size: 2rem;
+	text-align: center;
+}
+
+h2 {
+	font-size: 1rem;
+}
+
+pre {
+	font-size: 16px;
+	font-family: var(--font-mono);
+	background-color: rgba(255, 255, 255, 0.45);
+	border-radius: 3px;
+	box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
+	padding: 0.5em;
+	overflow-x: auto;
+	color: var(--text-color);
+}
+
+input,
+button {
+	font-size: inherit;
+	font-family: inherit;
+}
+
+button:focus:not(:focus-visible) {
+	outline: none;
+}
+
+@media (min-width: 720px) {
+	h1 {
+		font-size: 2.4rem;
+	}
+}

playground/kit-app/src/app.d.ts

@@ -0,0 +1,14 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+	interface Locals {
+		userid: string;
+	}
+
+	// interface PageData {}
+
+	// interface PageError {}
+
+	// interface Platform {}
+}

playground/kit-app/src/app.html

@@ -2,11 +2,11 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%svelte.head%
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
 	</head>
 	<body>
-		<div id="svelte">%svelte.body%</div>
+		<div>%sveltekit.body%</div>
 	</body>
 </html>