[site] convert to ESM (#6795)

site/package.json

@@ -2,6 +2,7 @@
   "name": "svelte.dev",
   "version": "1.0.0",
   "description": "Docs and examples for Svelte",
+  "type": "module",
   "scripts": {
     "dev": "node scripts/update.js && npm run copy-workers && sapper dev",
     "copy-workers": "node scripts/copy-workers.js",
@@ -22,7 +23,7 @@
     "httpie": "^1.1.2",
     "jsonwebtoken": "^8.5.1",
     "marked": "^1.0.0",
-    "pg": "^7.12.1",
+    "pg": "^8.7.1",
     "polka": "^1.0.0-next.9",
     "prism-svelte": "^0.4.3",
     "prismjs": "^1.25.0",
@@ -44,7 +45,7 @@
     "@sveltejs/site-kit": "^1.4.0",
     "@sveltejs/svelte-repl": "^0.2.1",
     "degit": "^2.1.4",
-    "dotenv": "^8.1.0",
+    "dotenv": "^10.0.0",
     "esm": "^3.2.25",
     "jimp": "^0.8.0",
     "mocha": "^6.2.0",
@@ -53,7 +54,7 @@
     "rollup": "^2.30.0",
     "rollup-plugin-svelte": "^7.0.0",
     "rollup-plugin-terser": "^7.0.0",
-    "sapper": "^0.28.10",
+    "sapper": "^0.29.3",
     "shelljs": "^0.8.3",
     "svelte": "^3.39.0"
   },

site/scripts/copy-workers.js

@@ -1,4 +1,4 @@
-const sh = require('shelljs');
+import sh from 'shelljs';
 
 sh.rm('-rf', 'static/workers');
 sh.cp('-r', 'node_modules/@sveltejs/svelte-repl/workers', 'static');

site/scripts/get-example-thumbnails/index.js

@@ -1,7 +1,7 @@
-const fs = require('fs');
-const puppeteer = require('puppeteer');
-const Jimp = require('jimp');
-const c = require('kleur');
+import fs from 'fs';
+import puppeteer from 'puppeteer';
+import Jimp from 'jimp';
+import c from 'kleur';
 
 const slugs = [];
 

site/scripts/get-examples-from-tutorials/index.js

@@ -1,5 +1,8 @@
-const sander = require('sander');
+import sander from 'sander';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
 process.chdir(`${__dirname}/../..`);
 
 function extract_frontmatter(markdown) {

site/scripts/get_contributors.js

@@ -1,10 +1,14 @@
-require('dotenv/config');
-const fs = require('fs');
-const fetch = require('node-fetch');
-const Jimp = require('jimp');
+import 'dotenv/config';
+import fs from 'fs';
+import fetch from 'node-fetch';
+import Jimp from 'jimp';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
 
 const force = process.env.FORCE_UPDATE === 'true';
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
 process.chdir(__dirname);
 
 const outputFile = `../src/routes/_contributors.js`;

site/scripts/get_donors.js

@@ -1,13 +1,14 @@
-require('dotenv/config');
-const fs = require('fs');
-const fetch = require('node-fetch');
-const Jimp = require('jimp');
-const { dirname } = require('path');
-const { fileURLToPath } = require('url');
+import 'dotenv/config';
+import fs from 'fs';
+import fetch from 'node-fetch';
+import Jimp from 'jimp';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
 
 
 const force = process.env.FORCE_UPDATE === 'true';
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
 process.chdir(__dirname);
 
 const outputFile = `../src/routes/_donors.js`;

site/scripts/update.js

@@ -1,4 +1,4 @@
-const sh = require('shelljs');
+import sh from 'shelljs';
 
 sh.env['FORCE_UPDATE'] = process.argv.includes('--force=true');
 

site/scripts/update_template.js

@@ -1,9 +1,11 @@
-const sh = require('shelljs');
-const fs = require('fs');
-const path = require('path');
+import sh from 'shelljs';
+import fs from 'fs';
+import path, { dirname }  from 'path';
+import { fileURLToPath } from 'url';
 
 const force = process.env.FORCE_UPDATE === 'true';
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
 sh.cd(path.join(__dirname, '..'));
 
 const outputFile = 'static/svelte-app.json';

site/src/routes/blog/index.svelte

@@ -22,7 +22,7 @@
 <div class='posts stretch'>
 	{#each posts as post}
 		<article class='post' data-pubdate={post.metadata.dateString}>
-			<a class="no-underline" rel='prefetch' href='blog/{post.slug}' title='Read the article »'>
+			<a class="no-underline" sapper:prefetch href='blog/{post.slug}' title='Read the article »'>
 				<h2>{post.metadata.title}</h2>
 				<p>{post.metadata.description}</p>
 			</a>

site/src/routes/faq/index.svelte

@@ -26,7 +26,7 @@
 		<article class='faq'>
 			<h2>
 			<span id={faq.fragment} class="offset-anchor"></span>
-			<a class="anchor" rel='prefetch' href='faq#{faq.fragment}' title='{faq.question}'>&nbsp;</a>
+			<a class="anchor" href='faq#{faq.fragment}' title='{faq.question}'>&nbsp;</a>
 			{faq.metadata.question}
 			</h2>
 			<p>{@html faq.answer}</p>

site/src/routes/index.svelte

@@ -87,7 +87,7 @@ npm run dev
 
 		<p style="flex: 1">See the <a href="blog/the-easiest-way-to-get-started">quickstart guide</a> for more information.</p>
 
-		<p class="cta"><a rel="prefetch" href="tutorial">Learn Svelte</a></p>
+		<p class="cta"><a sapper:prefetch href="tutorial">Learn Svelte</a></p>
 	</div>
 </Blurb>
 

site/src/routes/tutorial/[slug]/_TableOfContents.svelte

@@ -64,7 +64,7 @@
 </style>
 
 <nav>
-	<a rel="prefetch" aria-label="Previous tutorial step" class="no-underline" href="tutorial/{(selected.prev || selected).slug}" class:disabled={!selected.prev}>
+	<a sapper:prefetch aria-label="Previous tutorial step" class="no-underline" href="tutorial/{(selected.prev || selected).slug}" class:disabled={!selected.prev}>
 		<Icon name="arrow-left" />
 	</a>
 
@@ -88,7 +88,7 @@
 		</select>
 	</div>
 
-	<a rel="prefetch" aria-label="Next tutorial step" class="no-underline" href="tutorial/{(selected.next || selected).slug}" class:disabled={!selected.next}>
+	<a sapper:prefetch aria-label="Next tutorial step" class="no-underline" href="tutorial/{(selected.next || selected).slug}" class:disabled={!selected.next}>
 		<Icon name="arrow-right" />
 	</a>
 </nav>

site/src/utils/db.js

@@ -1,7 +1,7 @@
-import { Pool } from 'pg';
+import pg from 'pg';
 
 // Uses `PG*` ENV vars
-export const DB = process.env.PGHOST ? new Pool() : null;
+export const DB = process.env.PGHOST ? new pg.Pool() : null;
 
 export function query(text, values=[]) {
 	return DB.query(text, values).then(r => r.rows);