get REPL downloads working

Rich-Harris · Rich-Harris · commit 27bf806b306c · 2018-12-22T23:20:16.000-05:00
diff --git a/site/package.json b/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": {
diff --git a/site/scripts/build-svelte-app-json.js b/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));
diff --git a/site/scripts/update_template.sh b/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`
diff --git a/site/src/routes/repl/_components/AppControls/index.html b/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;` });
diff --git a/site/src/routes/repl/_components/Repl.html b/site/src/routes/repl/_components/Repl.html
@@ -18,6 +18,7 @@
 		version; // workaround
 
 		return {
+			imports: bundle.imports,
 			components: $component_store,
 			values: $values_store
 		};
diff --git a/site/static/svelte-app.json b/site/static/svelte-app.json
@@ -0,0 +1 @@
+[{"path":"README.md","data":"*Psst — looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*\n\n---\n\n# svelte app\n\nThis is a project template for [Svelte](https://svelte.technology) apps. It lives at https://github.com/sveltejs/template.\n\nTo create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):\n\n```bash\nnpm install -g degit # you only need to do this once\n\ndegit sveltejs/template svelte-app\ncd svelte-app\n```\n\n*Note that you will need to have [Node.js](https://nodejs.org) installed.*\n\n\n## Get started\n\nInstall the dependencies...\n\n```bash\ncd svelte-app\nnpm install\n```\n\n...then start [Rollup](https://rollupjs.org):\n\n```bash\nnpm run dev\n```\n\nNavigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.\n\n\n## Deploying to the web\n\n### With [now](https://zeit.co/now)\n\nInstall `now` if you haven't already:\n\n```bash\nnpm install -g now\n```\n\nThen, from within your project folder:\n\n```bash\nnow\n```\n\nAs an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.\n\n### With [surge](https://surge.sh/)\n\nInstall `surge` if you haven't already:\n\n```bash\nnpm install -g surge\n```\n\nThen, from within your project folder:\n\n```bash\nnpm run build\nsurge public\n```\n"},{"path":"rollup.config.js","data":"import svelte from 'rollup-plugin-svelte';\nimport resolve from 'rollup-plugin-node-resolve';\nimport commonjs from 'rollup-plugin-commonjs';\nimport { terser } from 'rollup-plugin-terser';\n\nconst production = !process.env.ROLLUP_WATCH;\n\nexport default {\n\tinput: 'src/main.js',\n\toutput: {\n\t\tsourcemap: true,\n\t\tformat: 'iife',\n\t\tname: 'app',\n\t\tfile: 'public/bundle.js'\n\t},\n\tplugins: [\n\t\tsvelte({\n\t\t\t// opt in to v3 behaviour today\n\t\t\tskipIntroByDefault: true,\n\t\t\tnestedTransitions: true,\n\n\t\t\t// enable run-time checks when not in production\n\t\t\tdev: !production,\n\t\t\t// we'll extract any component CSS out into\n\t\t\t// a separate file — better for performance\n\t\t\tcss: css => {\n\t\t\t\tcss.write('public/bundle.css');\n\t\t\t}\n\t\t}),\n\n\t\t// If you have external dependencies installed from\n\t\t// npm, you'll most likely need these plugins. In\n\t\t// some cases you'll need additional configuration —\n\t\t// consult the documentation for details:\n\t\t// https://github.com/rollup/rollup-plugin-commonjs\n\t\tresolve(),\n\t\tcommonjs(),\n\n\t\t// If we're building for production (npm run build\n\t\t// instead of npm run dev), minify\n\t\tproduction && terser()\n\t]\n};\n"},{"path":"public/global.css","data":"html, body {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\nbody {\n\tcolor: #333;\n\tmargin: 0;\n\tpadding: 8px;\n\tbox-sizing: border-box;\n\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n}\n\na {\n\tcolor: rgb(0,100,200);\n\ttext-decoration: none;\n}\n\na:hover {\n\ttext-decoration: underline;\n}\n\na:visited {\n\tcolor: rgb(0,80,160);\n}\n\nlabel {\n\tdisplay: block;\n}\n\ninput, button, select, textarea {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n\tborder-radius: 2px;\n}\n\ninput:disabled {\n\tcolor: #ccc;\n}\n\ninput[type=\"range\"] {\n\theight: 0;\n}\n\nbutton {\n\tbackground-color: #f4f4f4;\n\toutline: none;\n}\n\nbutton:active {\n\tbackground-color: #ddd;\n}\n\nbutton:focus {\n\tborder-color: #666;\n}"},{"path":"public/index.html","data":"<!doctype html>\n<html>\n<head>\n\t<meta charset='utf8'>\n\t<meta name='viewport' content='width=device-width'>\n\n\t<title>Svelte app</title>\n\n\t<link rel='stylesheet' href='global.css'>\n\t<link rel='stylesheet' href='bundle.css'>\n</head>\n\n<body>\n\t<script src='bundle.js'></script>\n</body>\n</html>"},{"path":"package.json","data":"{\n  \"name\": \"svelte-app\",\n  \"version\": \"1.0.0\",\n  \"devDependencies\": {\n    \"npm-run-all\": \"^4.1.3\",\n    \"rollup\": \"^0.66.2\",\n    \"rollup-plugin-commonjs\": \"^9.1.8\",\n    \"rollup-plugin-node-resolve\": \"^3.4.0\",\n    \"rollup-plugin-svelte\": \"^4.3.1\",\n    \"rollup-plugin-terser\": \"^3.0.0\",\n    \"sirv-cli\": \"^0.2.2\",\n    \"svelte\": \"^2.13.5\"\n  },\n  \"scripts\": {\n    \"build\": \"rollup -c\",\n    \"autobuild\": \"rollup -c -w\",\n    \"dev\": \"run-p start:dev autobuild\",\n    \"start\": \"sirv public\",\n    \"start:dev\": \"sirv public --dev\"\n  }\n}\n"}]

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	+[{"path":"README.md","data":"Psst — looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)\n\n---\n\n# svelte app\n\nThis is a project template for [Svelte](https://svelte.technology) apps. It lives at https://github.com/sveltejs/template.\n\nTo create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):\n\n```bash\nnpm install -g degit # you only need to do this once\n\ndegit sveltejs/template svelte-app\ncd svelte-app\n```\n\nNote that you will need to have [Node.js](https://nodejs.org) installed.\n\n\n## Get started\n\nInstall the dependencies...\n\n```bash\ncd svelte-app\nnpm install\n```\n\n...then start [Rollup](https://rollupjs.org):\n\n```bash\nnpm run dev\n```\n\nNavigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.\n\n\n## Deploying to the web\n\n### With [now](https://zeit.co/now)\n\nInstall `now` if you haven't already:\n\n```bash\nnpm install -g now\n```\n\nThen, from within your project folder:\n\n```bash\nnow\n```\n\nAs an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.\n\n### With [surge](https://surge.sh/)\n\nInstall `surge` if you haven't already:\n\n```bash\nnpm install -g surge\n```\n\nThen, from within your project folder:\n\n```bash\nnpm run build\nsurge public\n```\n"},{"path":"rollup.config.js","data":"import svelte from 'rollup-plugin-svelte';\nimport resolve from 'rollup-plugin-node-resolve';\nimport commonjs from 'rollup-plugin-commonjs';\nimport { terser } from 'rollup-plugin-terser';\n\nconst production = !process.env.ROLLUP_WATCH;\n\nexport default {\n\tinput: 'src/main.js',\n\toutput: {\n\t\tsourcemap: true,\n\t\tformat: 'iife',\n\t\tname: 'app',\n\t\tfile: 'public/bundle.js'\n\t},\n\tplugins: [\n\t\tsvelte({\n\t\t\t// opt in to v3 behaviour today\n\t\t\tskipIntroByDefault: true,\n\t\t\tnestedTransitions: true,\n\n\t\t\t// enable run-time checks when not in production\n\t\t\tdev: !production,\n\t\t\t// we'll extract any component CSS out into\n\t\t\t// a separate file — better for performance\n\t\t\tcss: css => {\n\t\t\t\tcss.write('public/bundle.css');\n\t\t\t}\n\t\t}),\n\n\t\t// If you have external dependencies installed from\n\t\t// npm, you'll most likely need these plugins. In\n\t\t// some cases you'll need additional configuration —\n\t\t// consult the documentation for details:\n\t\t// https://github.com/rollup/rollup-plugin-commonjs\n\t\tresolve(),\n\t\tcommonjs(),\n\n\t\t// If we're building for production (npm run build\n\t\t// instead of npm run dev), minify\n\t\tproduction && terser()\n\t]\n};\n"},{"path":"public/global.css","data":"html, body {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\nbody {\n\tcolor: #333;\n\tmargin: 0;\n\tpadding: 8px;\n\tbox-sizing: border-box;\n\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n}\n\na {\n\tcolor: rgb(0,100,200);\n\ttext-decoration: none;\n}\n\na:hover {\n\ttext-decoration: underline;\n}\n\na:visited {\n\tcolor: rgb(0,80,160);\n}\n\nlabel {\n\tdisplay: block;\n}\n\ninput, button, select, textarea {\n\tfont-family: inherit;\n\tfont-size: inherit;\n\tpadding: 0.4em;\n\tmargin: 0 0 0.5em 0;\n\tbox-sizing: border-box;\n\tborder: 1px solid #ccc;\n\tborder-radius: 2px;\n}\n\ninput:disabled {\n\tcolor: #ccc;\n}\n\ninput[type=\"range\"] {\n\theight: 0;\n}\n\nbutton {\n\tbackground-color: #f4f4f4;\n\toutline: none;\n}\n\nbutton:active {\n\tbackground-color: #ddd;\n}\n\nbutton:focus {\n\tborder-color: #666;\n}"},{"path":"public/index.html","data":"<!doctype html>\n<html>\n<head>\n\t<meta charset='utf8'>\n\t<meta name='viewport' content='width=device-width'>\n\n\t<title>Svelte app</title>\n\n\t<link rel='stylesheet' href='global.css'>\n\t<link rel='stylesheet' href='bundle.css'>\n</head>\n\n<body>\n\t<script src='bundle.js'></script>\n</body>\n</html>"},{"path":"package.json","data":"{\n \"name\": \"svelte-app\",\n \"version\": \"1.0.0\",\n \"devDependencies\": {\n \"npm-run-all\": \"^4.1.3\",\n \"rollup\": \"^0.66.2\",\n \"rollup-plugin-commonjs\": \"^9.1.8\",\n \"rollup-plugin-node-resolve\": \"^3.4.0\",\n \"rollup-plugin-svelte\": \"^4.3.1\",\n \"rollup-plugin-terser\": \"^3.0.0\",\n \"sirv-cli\": \"^0.2.2\",\n \"svelte\": \"^2.13.5\"\n },\n \"scripts\": {\n \"build\": \"rollup -c\",\n \"autobuild\": \"rollup -c -w\",\n \"dev\": \"run-p start:dev autobuild\",\n \"start\": \"sirv public\",\n \"start:dev\": \"sirv public --dev\"\n }\n}\n"}]