From 19929613fd722280750bbc0254b41a70034a588c Mon Sep 17 00:00:00 2001
From: Christophe Le Bars <clb@rouge.network>
Date: Thu, 23 Dec 2021 22:05:27 -0500
Subject: [PATCH] update sapper example

---
 examples/sapper-app-template-web3/README.md   |  4 +++-
 .../sapper-app-template-web3/package.json     | 10 ++++-----
 .../scripts/setupTypeScript.js                |  8 +++----
 .../sapper-app-template-web3/src/ambient.d.ts | 12 +++++-----
 .../src/routes/web3test.svelte                | 14 ++++++------
 .../src/template.html                         |  3 ++-
 .../static/manifest.json                      |  6 +++--
 .../webpack.config.js                         | 22 +++++++++++++------
 8 files changed, 45 insertions(+), 34 deletions(-)

diff --git a/examples/sapper-app-template-web3/README.md b/examples/sapper-app-template-web3/README.md
index 8dc7474..ce25b7c 100644
--- a/examples/sapper-app-template-web3/README.md
+++ b/examples/sapper-app-template-web3/README.md
@@ -2,9 +2,11 @@
 
 The default template for setting up a [Sapper](https://github.com/sveltejs/sapper) project. Can use either Rollup or webpack as bundler.
 
+## Please note
 
-## Getting started
+Sapper is no longer being actively developed. You may be interested in using Sapper's succesor, [SvelteKit](https://kit.svelte.dev/) for new projects.
 
+## Getting started
 
 ### Using `degit`
 
diff --git a/examples/sapper-app-template-web3/package.json b/examples/sapper-app-template-web3/package.json
index 63e324f..d52eebd 100644
--- a/examples/sapper-app-template-web3/package.json
+++ b/examples/sapper-app-template-web3/package.json
@@ -11,15 +11,15 @@
   "dependencies": {
     "compression": "^1.7.1",
     "polka": "next",
-    "sirv": "^1.0.0",
-    "svelte-web3": "^1.3.4"
+    "sirv": "^1.0.0"
   },
   "devDependencies": {
-    "file-loader": "^6.0.0",
+    "svelte-web3": "file:../../",
     "sapper": "^0.28.0",
     "svelte": "^3.17.3",
-    "svelte-loader": "^2.9.0",
-    "webpack": "^4.7.0",
+    "file-loader": "^6.0.0",
+    "svelte-loader": "^3.0.0",
+    "webpack": "^4.46.0",
     "webpack-modules": "^1.0.0"
   }
 }
diff --git a/examples/sapper-app-template-web3/scripts/setupTypeScript.js b/examples/sapper-app-template-web3/scripts/setupTypeScript.js
index 68e5b56..fb5cbdf 100644
--- a/examples/sapper-app-template-web3/scripts/setupTypeScript.js
+++ b/examples/sapper-app-template-web3/scripts/setupTypeScript.js
@@ -194,12 +194,10 @@ function updateWebpackConfig() {
 			/entry: config\.serviceworker\.entry\(\)/,
 			`entry: { 'service-worker': config.serviceworker.entry()['service-worker'].replace(/\\.js$/, '.ts') }`
 		],
-		// Add preprocess to the svelte config, this is tricky because there's no easy signifier.
-		// Instead we look for 'hydratable: true,'
 		[
-			/hydratable: true(?!,\n\s*preprocess)/g,
-			'hydratable: true,\n\t\t\t\t\t\t\tpreprocess: sveltePreprocess({ sourceMap: dev })'
-		],
+      /loader: 'svelte-loader',\n\t\t\t\t\t\toptions: {/g,
+      'loader: \'svelte-loader\',\n\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\tpreprocess: sveltePreprocess({ sourceMap: dev }),'
+    ],
 		// Add TypeScript rules for client and server
 		[
 			/module: {\n\s*rules: \[\n\s*(?!{\n\s*test: \/\\\.ts\$\/)/g,
diff --git a/examples/sapper-app-template-web3/src/ambient.d.ts b/examples/sapper-app-template-web3/src/ambient.d.ts
index ec71cae..a26164d 100644
--- a/examples/sapper-app-template-web3/src/ambient.d.ts
+++ b/examples/sapper-app-template-web3/src/ambient.d.ts
@@ -10,30 +10,30 @@
  */
 declare module "*.gif" {
 	const value: string;
-	export = value;
+	export default value;
 }
 
 declare module "*.jpg" {
 	const value: string;
-	export = value;
+	export default value;
 }
 
 declare module "*.jpeg" {
 	const value: string;
-	export = value;
+	export default value;
 }
 
 declare module "*.png" {
 	const value: string;
-	export = value;
+	export default value;
 }
 
 declare module "*.svg" {
 	const value: string;
-	export = value;
+	export default value;
 }
 
 declare module "*.webp" {
 	const value: string;
-	export = value;
+	export default value;
 }
diff --git a/examples/sapper-app-template-web3/src/routes/web3test.svelte b/examples/sapper-app-template-web3/src/routes/web3test.svelte
index f0cb7dd..1a50574 100644
--- a/examples/sapper-app-template-web3/src/routes/web3test.svelte
+++ b/examples/sapper-app-template-web3/src/routes/web3test.svelte
@@ -1,13 +1,13 @@
 <script>
   import { onMount } from 'svelte';
 
-  import { ethStore, web3, selectedAccount, connected, chainId, chainData } from 'svelte-web3'
+  import { defaultEvmStores, web3, selectedAccount, connected, chainId, chainData } from 'svelte-web3'
 
   export let message
   export let tipAddress
 
-  const enable = () => ethStore.setProvider('https://sokol.poa.network')
-  const enableBrowser = () => ethStore.setBrowserProvider()
+  const enable = () => defaultEvmStores.setProvider('https://sokol.poa.network')
+  const enableBrowser = () => defaultEvmStores.setBrowserProvider()
 
   $: checkAccount = $selectedAccount || '0x0000000000000000000000000000000000000000'
   $: balance = $connected ? $web3.eth.getBalance(checkAccount) : ''
@@ -28,7 +28,7 @@
   onMount(
     async () => {
       message = 'Connecting to Ethereum Testnet Görli...'
-       await ethStore.setProvider('https://rpc.slock.it/goerli')
+       await defaultEvmStores.setProvider('https://rpc.slock.it/goerli')
       message = ''
     })
 
@@ -77,11 +77,11 @@
     <span>waiting...</span>
     {:then value}
     <span>{value}</span>
-    {/await} {$chainData.nativeCurrency?.symbol}
+    {/await} {$chainData.nativeCurrency.symbol}
   </p>
 
-  {#if $selectedAccount}
-  <p><button on:click="{sendTip}">send 0.01 {$chainData.nativeCurrency?.symbol} tip to {tipAddress} (author)</button></p>
+  {#if false && $selectedAccount}
+  <p><button on:click="{sendTip}">send 0.01 {$chainData.nativeCurrency.symbol} tip to {tipAddress} (author)</button></p>
   {/if}
 
   {/if}
diff --git a/examples/sapper-app-template-web3/src/template.html b/examples/sapper-app-template-web3/src/template.html
index be4e891..776ebb3 100644
--- a/examples/sapper-app-template-web3/src/template.html
+++ b/examples/sapper-app-template-web3/src/template.html
@@ -10,7 +10,8 @@
 	<link rel="stylesheet" href="global.css">
 	<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
 	<link rel="icon" type="image/png" href="favicon.png">
-    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
+	<link rel="apple-touch-icon" href="logo-192.png">
+        <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
 
 	<!-- Sapper creates a <script> tag containing `src/client.js`
 	     and anything else it needs to hydrate the app and
diff --git a/examples/sapper-app-template-web3/static/manifest.json b/examples/sapper-app-template-web3/static/manifest.json
index 78ad114..8171da6 100644
--- a/examples/sapper-app-template-web3/static/manifest.json
+++ b/examples/sapper-app-template-web3/static/manifest.json
@@ -9,12 +9,14 @@
 		{
 			"src": "logo-192.png",
 			"sizes": "192x192",
-			"type": "image/png"
+			"type": "image/png",
+			"purpose": "any maskable"
 		},
 		{
 			"src": "logo-512.png",
 			"sizes": "512x512",
-			"type": "image/png"
+			"type": "image/png",
+			"purpose": "any maskable"
 		}
 	]
 }
diff --git a/examples/sapper-app-template-web3/webpack.config.js b/examples/sapper-app-template-web3/webpack.config.js
index 6bd9323..6949273 100644
--- a/examples/sapper-app-template-web3/webpack.config.js
+++ b/examples/sapper-app-template-web3/webpack.config.js
@@ -29,9 +29,15 @@ module.exports = {
 					use: {
 						loader: 'svelte-loader',
 						options: {
-							dev,
-							hydratable: true,
-							hotReload: false // pending https://github.com/sveltejs/svelte/issues/2377
+							compilerOptions: {
+								dev,
+								hydratable: true
+							},
+							// Webpack 4 uses acorn v6 which doesn't work with HMR
+							// Use overrides from npm or resolutions from yarn to set minimal
+							// acorn version to v7+
+							// https://github.com/sveltejs/sapper-template/pull/308
+							hotReload: false
 						}
 					}
 				},
@@ -63,10 +69,12 @@ module.exports = {
 					use: {
 						loader: 'svelte-loader',
 						options: {
-							css: false,
-							generate: 'ssr',
-							hydratable: true,
-							dev
+							compilerOptions: {
+								css: false,
+								generate: 'ssr',
+								hydratable: true,
+								dev
+							},
 						}
 					}
 				},