From f3c5521f80321a43483c3a49c58f8bc7ad119e3a Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 22 Dec 2018 22:18:28 -0500 Subject: [PATCH 1/3] merge conflict --- site/src/routes/guide/index.html | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/site/src/routes/guide/index.html b/site/src/routes/guide/index.html index ff8bc20d73..09c3603f27 100644 --- a/site/src/routes/guide/index.html +++ b/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); From 27bf806b306c63daf7b93082a2d295c0e83c29c5 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 22 Dec 2018 23:20:16 -0500 Subject: [PATCH 2/3] get REPL downloads working --- site/package.json | 4 ++-- site/scripts/build-svelte-app-json.js | 11 +++++++++++ site/scripts/update_template.sh | 15 +++++++++++++++ .../repl/_components/AppControls/index.html | 8 +++++--- site/src/routes/repl/_components/Repl.html | 1 + site/static/svelte-app.json | 1 + 6 files changed, 35 insertions(+), 5 deletions(-) create mode 100644 site/scripts/build-svelte-app-json.js create mode 100755 site/scripts/update_template.sh create mode 100644 site/static/svelte-app.json diff --git a/site/package.json b/site/package.json index 62f2537530..5d6a36b14c 100644 --- 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 new file mode 100644 index 0000000000..59a4b4a07b --- /dev/null +++ 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 new file mode 100755 index 0000000000..59ab3cb0cd --- /dev/null +++ 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 index 381cc93f75..ab439251ac 100644 --- 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 index 55a044a6c4..bd24e7ea19 100644 --- 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 new file mode 100644 index 0000000000..fb9280de66 --- /dev/null +++ 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":"\n\n\n\t\n\t\n\n\tSvelte app\n\n\t\n\t\n\n\n\n\t\n\n"},{"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"}] \ No newline at end of file From 899b14da3e6cfa225e74d2b543dce72805bfea28 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Sat, 22 Dec 2018 23:24:31 -0500 Subject: [PATCH 3/3] oops --- .gitignore | 4 +++- site/static/svelte-app.json | 1 - 2 files changed, 3 insertions(+), 2 deletions(-) delete mode 100644 site/static/svelte-app.json diff --git a/.gitignore b/.gitignore index 1499a0e697..bf38bbc4e9 100644 --- a/.gitignore +++ b/.gitignore @@ -21,4 +21,6 @@ _actual*.* /site/cypress/screenshots/ /site/__sapper__/ /site/.env -/site/.sessions \ No newline at end of file +/site/.sessions +/site/static/svelte-app.json +/site/scripts/svelte-app \ No newline at end of file diff --git a/site/static/svelte-app.json b/site/static/svelte-app.json deleted file mode 100644 index fb9280de66..0000000000 --- a/site/static/svelte-app.json +++ /dev/null @@ -1 +0,0 @@ -[{"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":"\n\n\n\t\n\t\n\n\tSvelte app\n\n\t\n\t\n\n\n\n\t\n\n"},{"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"}] \ No newline at end of file