Merge pull request #1904 from sveltejs/repl-downloads

REPL downloads

.gitignore

@@ -21,4 +21,6 @@ _actual*.*
 /site/cypress/screenshots/
 /site/__sapper__/
 /site/.env
-/site/.sessions
+/site/.sessions
+/site/static/svelte-app.json
+/site/scripts/svelte-app

site/package.json

@@ -5,13 +5,13 @@
   "scripts": {
     "dev": "sapper dev",
     "sapper": "sapper build --legacy",
-    "export": "sapper export --legacy",
+    "update_template": "sh ./scripts/update_template.sh",
     "start": "node __sapper__/build",
     "cy:run": "cypress run",
     "cy:open": "cypress open",
     "test": "run-p --race dev cy:run",
     "deploy": "npm run stage && now alias",
-    "prestage": "npm run sapper",
+    "prestage": "npm run update_template && npm run sapper",
     "stage": "now"
   },
   "dependencies": {

site/scripts/build-svelte-app-json.js

@@ -0,0 +1,11 @@
+const fs = require('fs');
+
+const files = [];
+
+for (const path of process.argv.slice(2)) {
+	if (!path.includes('/.')) {
+		files.push({ path: path.slice(19), data: fs.readFileSync(path).toString() });
+	}
+}
+
+fs.writeFileSync('static/svelte-app.json', JSON.stringify(files));

site/scripts/update_template.sh

@@ -0,0 +1,15 @@
+cd `dirname $0`/..
+
+# fetch svelte-app
+rm -rf scripts/svelte-app
+node_modules/.bin/degit sveltejs/template scripts/svelte-app
+
+# update repl-viewer.css based on template
+cp scripts/svelte-app/public/global.css static/repl-viewer.css
+
+# remove src (will be recreated client-side) and node_modules
+rm -rf scripts/svelte-app/src
+rm -rf scripts/svelte-app/node_modules
+
+# build svelte-app.json
+node scripts/build-svelte-app-json.js `find scripts/svelte-app -type f`

site/src/routes/guide/index.html

@@ -83,6 +83,17 @@
 		overflow: hidden;
 	}
 
+	aside::after {
+		content: '';
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		width: 100%;
+		height: var(--top-offset);
+		background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,1) 100%);
+		pointer-events: none;
+	}
+
 	.sidebar {
 		padding: var(--top-offset) 3.2rem var(--top-offset) 0;
 		font-family: var(--font-ui);

site/src/routes/repl/_components/AppControls/index.html

@@ -171,13 +171,15 @@
 	async function download() {
 		downloading = true;
 
+		const { components, imports, values } = repl.toJSON();
+
 		const files = await (await fetch('/svelte-app.json')).json();
 
-		if (bundle.imports.length > 0) {
+		if (imports.length > 0) {
 			const idx = files.findIndex(({ path }) => path === 'package.json');
 			const pkg = JSON.parse(files[idx].data);
 			const deps = {};
-			bundle.imports.forEach(mod => {
+			imports.forEach(mod => {
 				const match = /^(@[^\/]+\/)?[^@\/]+/.exec(mod);
 				deps[match[0]] = 'latest';
 			});
@@ -191,7 +193,7 @@
 
 var app = new App({
 	target: document.body,
-	props: ${JSON.stringify(data, null, '\t').replace(/\n/g, '\n\t')}
+	props: ${JSON.stringify(values, null, '\t').replace(/\n/g, '\n\t')}
 });
 
 export default app;` });

site/src/routes/repl/_components/Repl.html

@@ -18,6 +18,7 @@
 		version; // workaround
 
 		return {
+			imports: bundle.imports,
 			components: $component_store,
 			values: $values_store
 		};