New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

create-svelte

Package Overview
Dependencies
Maintainers
2
Versions
279
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

create-svelte - npm Package Compare versions

Comparing version 2.0.0-next.59 to 2.0.0-next.60

12

bin.js

@@ -9,7 +9,9 @@ #!/usr/bin/env node

// prettier-ignore
const disclaimer = `
Welcome to the SvelteKit setup wizard!
${bold(cyan('Welcome to SvelteKit!'))}
SvelteKit is in public beta now. There are definitely bugs and some feature might not work yet.
If you encounter an issue, have a look at https://github.com/sveltejs/kit/issues and open a new one, if it is not already tracked.
${bold(red('This is beta software; expect bugs and missing features.'))}
If you encounter a problem, open an issue on ${cyan('https://github.com/sveltejs/kit/issues')} if none exists already.
`;

@@ -21,3 +23,3 @@

console.log(gray(`\ncreate-svelte version ${version}`));
console.log(red(disclaimer));
console.log(disclaimer);

@@ -135,3 +137,3 @@ const cwd = process.argv[2] || '.';

console.log(` ${i++}: ${bold(cyan('git init && git add -A && git commit -m "Initial commit"'))} (optional step)`);
console.log(` ${i++}: ${bold(cyan('npm install'))} (or pnpm install, or yarn)`);
console.log(` ${i++}: ${bold(cyan('npm install'))} (or pnpm install, etc)`);
console.log(` ${i++}: ${bold(cyan('npm run dev -- --open'))}`);

@@ -138,0 +140,0 @@

# create-svelte
## 2.0.0-next.60
### Patch Changes
- 1b816b2: Update version of eslint-plugin-svelte3
- 6f2b4a6: Update welcome message
- 6f2b4a6: No adapter by default
## 2.0.0-next.59

@@ -4,0 +12,0 @@

@@ -15,3 +15,3 @@ {

"exclude": [],
"contents": "{\n\t\"devDependencies\": {\n\t\t\"eslint\": \"^7.22.0\",\n\t\t\"eslint-plugin-svelte3\": \"^3.1.0\"\n\t}\n}\n"
"contents": "{\n\t\"devDependencies\": {\n\t\t\"eslint\": \"^7.22.0\",\n\t\t\"eslint-plugin-svelte3\": \"^3.2.0\"\n\t}\n}\n"
},

@@ -56,3 +56,3 @@ {

"exclude": [],
"contents": "const sveltePreprocess = require('svelte-preprocess');\nconst node = require('@sveltejs/adapter-node');\nconst pkg = require('./package.json');\n\n/** @type {import('@sveltejs/kit').Config} */\nmodule.exports = {\n\t// Consult https://github.com/sveltejs/svelte-preprocess\n\t// for more information about preprocessors\n\tpreprocess: sveltePreprocess(),\n\n\tkit: {\n\t\t// By default, `npm run build` will create a standard Node app.\n\t\t// You can create optimized builds for different platforms by\n\t\t// specifying a different adapter\n\t\tadapter: node(),\n\n\t\t// hydrate the <div id=\"svelte\"> element in src/app.html\n\t\ttarget: '#svelte'\n\t}\n};\n"
"contents": "const preprocess = require('svelte-preprocess');\n\n/** @type {import('@sveltejs/kit').Config} */\nmodule.exports = {\n\t// Consult https://github.com/sveltejs/svelte-preprocess\n\t// for more information about preprocessors\n\tpreprocess: preprocess(),\n\n\tkit: {\n\t\t// hydrate the <div id=\"svelte\"> element in src/app.html\n\t\ttarget: '#svelte'\n\t}\n};\n"
},

@@ -81,3 +81,3 @@ {

],
"contents": "const node = require('@sveltejs/adapter-node');\nconst pkg = require('./package.json');\n\n/** @type {import('@sveltejs/kit').Config} */\nmodule.exports = {\n\tkit: {\n\t\t// By default, `npm run build` will create a standard Node app.\n\t\t// You can create optimized builds for different platforms by\n\t\t// specifying a different adapter\n\t\tadapter: node(),\n\n\t\t// hydrate the <div id=\"svelte\"> element in src/app.html\n\t\ttarget: '#svelte'\n\t}\n};\n"
"contents": "/** @type {import('@sveltejs/kit').Config} */\nmodule.exports = {\n\tkit: {\n\t\t// hydrate the <div id=\"svelte\"> element in src/app.html\n\t\ttarget: '#svelte'\n\t}\n};\n"
},

@@ -100,3 +100,3 @@ {

"exclude": [],
"contents": "module.exports = {\n\troot: true,\n\tparser: '@typescript-eslint/parser',\n\textends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],\n\tplugins: ['svelte3', '@typescript-eslint'],\n\tignorePatterns: ['*.cjs'],\n\toverrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],\n\tsettings: {\n\t\t'svelte3/typescript': require('typescript')\n\t},\n\tparserOptions: {\n\t\tsourceType: 'module',\n\t\tecmaVersion: 2019\n\t},\n\tenv: {\n\t\tbrowser: true,\n\t\tes2017: true,\n\t\tnode: true\n\t}\n};\n"
"contents": "module.exports = {\n\troot: true,\n\tparser: '@typescript-eslint/parser',\n\textends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],\n\tplugins: ['svelte3', '@typescript-eslint'],\n\tignorePatterns: ['*.cjs'],\n\toverrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],\n\tsettings: {\n\t\t'svelte3/typescript': () => require('typescript')\n\t},\n\tparserOptions: {\n\t\tsourceType: 'module',\n\t\tecmaVersion: 2019\n\t},\n\tenv: {\n\t\tbrowser: true,\n\t\tes2017: true,\n\t\tnode: true\n\t}\n};\n"
},

@@ -150,3 +150,3 @@ {

"exclude": [],
"contents": "module.exports = {\n\troot: true,\n\tparser: '@typescript-eslint/parser',\n\textends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],\n\tplugins: ['svelte3', '@typescript-eslint'],\n\tignorePatterns: ['*.cjs'],\n\toverrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],\n\tsettings: {\n\t\t'svelte3/typescript': require('typescript')\n\t},\n\tparserOptions: {\n\t\tsourceType: 'module',\n\t\tecmaVersion: 2019\n\t},\n\tenv: {\n\t\tbrowser: true,\n\t\tes2017: true,\n\t\tnode: true\n\t}\n};\n"
"contents": "module.exports = {\n\troot: true,\n\tparser: '@typescript-eslint/parser',\n\textends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],\n\tplugins: ['svelte3', '@typescript-eslint'],\n\tignorePatterns: ['*.cjs'],\n\toverrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],\n\tsettings: {\n\t\t'svelte3/typescript': () => require('typescript')\n\t},\n\tparserOptions: {\n\t\tsourceType: 'module',\n\t\tecmaVersion: 2019\n\t},\n\tenv: {\n\t\tbrowser: true,\n\t\tes2017: true,\n\t\tnode: true\n\t}\n};\n"
},

@@ -153,0 +153,0 @@ {

@@ -44,8 +44,8 @@ [

"name": "src/routes/todos/index.json.js",
"contents": "import { api } from './_api';\n\n// GET /todos.json\nexport const get = async (request) => {\n\tif (!request.context.userid) {\n\t\t// the user has never visited the site before\n\t\t// and so doesn't yet have a userid, which is\n\t\t// set in `handle`, in src/hooks.js\n\t\treturn { body: [] };\n\t}\n\n\tconst response = await api(request, `todos/${request.context.userid}`);\n\n\tif (response.status === 404) {\n\t\t// the user has visited before, but hasn't yet\n\t\t// created a todo list. start with an empty array\n\t\treturn { body: [] };\n\t}\n\n\treturn response;\n};\n\n// POST /todos.json\nexport const post = async (request) => {\n\tconst response = await api(request, `todos/${request.context.userid}`, {\n\t\t// because index.svelte posts a FormData object,\n\t\t// request.body is _also_ a (readonly) FormData\n\t\t// object, which allows us to get form data\n\t\t// with the `body.get(key)` method\n\t\ttext: request.body.get('text')\n\t});\n\n\treturn response;\n};\n"
"contents": "import { api } from './_api';\n\n// GET /todos.json\nexport const get = async (request) => {\n\t// request.context.userid comes from src/hooks.js\n\tconst response = await api(request, `todos/${request.context.userid}`);\n\n\tif (response.status === 404) {\n\t\t// user hasn't created a todo list.\n\t\t// start with an empty array\n\t\treturn { body: [] };\n\t}\n\n\treturn response;\n};\n\n// POST /todos.json\nexport const post = async (request) => {\n\tconst response = await api(request, `todos/${request.context.userid}`, {\n\t\t// because index.svelte posts a FormData object,\n\t\t// request.body is _also_ a (readonly) FormData\n\t\t// object, which allows us to get form data\n\t\t// with the `body.get(key)` method\n\t\ttext: request.body.get('text')\n\t});\n\n\treturn response;\n};\n"
},
{
"name": "src/routes/todos/index.svelte",
"contents": "<script context=\"module\">\n\timport { enhance } from '$lib/form';\n\t\n\t// see https://kit.svelte.dev/docs#loading\n\texport const load = async ({ fetch }) => {\n\t\tconst res = await fetch('/todos.json');\n\t\n\t\tif (res.ok) {\n\t\t\tconst todos = await res.json();\n\t\n\t\t\treturn {\n\t\t\t\tprops: { todos }\n\t\t\t};\n\t\t}\n\t\n\t\tconst { message } = await res.json();\n\t\n\t\treturn {\n\t\t\terror: new Error(message)\n\t\t};\n\t};\n</script>\n\n<script>\n\timport { scale } from 'svelte/transition';\n\timport { flip } from 'svelte/animate';\n\t\n\texport let todos;\n\t\n\tasync function patch(res) {\n\t\tconst todo = await res.json();\n\t\n\t\ttodos = todos.map((t) => {\n\t\t\tif (t.uid === todo.uid) return todo;\n\t\t\treturn t;\n\t\t});\n\t}\n</script>\n\n<svelte:head>\n\t<title>Todos</title>\n</svelte:head>\n\n<div class=\"todos\">\n\t<h1>Todos</h1>\n\n\t<form class=\"new\" action=\"/todos.json\" method=\"post\" use:enhance={{\n\t\tresult: async (res, form) => {\n\t\t\tconst created = await res.json();\n\t\t\ttodos = [...todos, created]\n\n\t\t\tform.reset();\n\t\t}\n\t}}>\n\t\t<input name=\"text\" placeholder=\"+ tap to add a todo\">\n\t</form>\n\n\t{#each todos as todo (todo.uid)}\n\t\t<div class=\"todo\" class:done={todo.done} transition:scale|local={{start:0.7}} animate:flip={{duration:200}}>\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tpending: (data) => {\n\t\t\t\t\tconst done = !!data.get('done');\n\n\t\t\t\t\ttodos = todos.map(t => {\n\t\t\t\t\t\tif (t === todo) return { ...t, done };\n\t\t\t\t\t\treturn t;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input type=\"hidden\" name=\"done\" value={todo.done ? '' : 'true'}>\n\t\t\t\t<button class=\"toggle\" aria-label=\"Mark todo as {todo.done ? 'not done' : 'done'}\"/>\n\t\t\t</form>\n\n\t\t\t<form class=\"text\" action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input type=\"text\" name=\"text\" value={todo.text}>\n\t\t\t\t<button class=\"save\" aria-label=\"Save todo\"/>\n\t\t\t</form>\n\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=delete\" method=\"post\" use:enhance={{\n\t\t\t\tresult: () => {\n\t\t\t\t\ttodos = todos.filter(t => t.uid !== todo.uid);\n\t\t\t\t}\n\t\t\t}}>\n\t\t\t\t<button class=\"delete\" aria-label=\"Delete todo\"/>\n\t\t\t</form>\n\t\t</div>\n\t{/each}\n</div>\n\n<style>\n\t.todos {\n\t\twidth: 100%;\n\t\tmax-width: var(--column-width);\n\t\tmargin: var(--column-margin-top) auto 0 auto;\n\t\tline-height: 1;\n\t}\n\n\t.new {\n\t\tmargin: 0 0 0.5rem 0;\n\t}\n\n\tinput {\n\t\tborder: 1px solid transparent;\n\t}\n\n\tinput:focus-visible {\n\t\tbox-shadow: inset 1px 1px 6px rgba(0,0,0,0.1);\n\t\tborder: 1px solid #ff3e00 !important;\n\t\toutline: none;\n\t}\n\n\t.new input {\n\t\tfont-size: 28px;\n\t\twidth: 100%;\n\t\tpadding: 0.5em 1em 0.3em 1em;\n\t\tbox-sizing: border-box;\n\t\tbackground: rgba(255,255,255,0.05);\n\t\tborder-radius: 8px;\n\t\ttext-align: center;\n\t}\n\n\t.todo {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 2rem 1fr 2rem;\n\t\tgrid-gap: 0.5rem;\n\t\talign-items: center;\n\t\tmargin: 0 0 0.5rem 0;\n\t\tpadding: 0.5rem;\n\t\tbackground-color: white;\n\t\tborder-radius: 8px;\n\t\tfilter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1));\n\t\ttransform: translate(-1px, -1px);\n\t\ttransition: filter 0.2s, transform 0.2s;\n\t}\n\n\n\t.done {\n\t\ttransform: none;\n\t\topacity: 0.4;\n\t\tfilter: drop-shadow(0px 0px 1px rgba(0,0,0,0.1));\n\t}\n\n\tform.text {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\t.todo input {\n\t\tflex: 1;\n\t\tpadding: 0.5em 2em 0.5em 0.8em;\n\t\tborder-radius: 3px;\n\t}\n\n\t.todo button {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t\tbackground-position: 50% 50%;\n\t\tbackground-repeat: no-repeat;\n\t}\n\n\tbutton.toggle {\n\t\tborder: 1px solid rgba(0,0,0,0.2);\n\t\tborder-radius: 50%;\n\t\tbox-sizing: border-box;\n\t\tbackground-size: 1em auto;\n\t}\n\n\t.done .toggle {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n\t}\n\n\t.delete {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n\t\topacity: 0.2;\n\t}\n\n\t.delete:hover {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n\n\t.save {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\topacity: 0;\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A\");\n\t}\n\n\t.todo input:focus + .save {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n</style>"
"contents": "<script context=\"module\">\n\timport { enhance } from '$lib/form';\n\t\n\t// see https://kit.svelte.dev/docs#loading\n\texport const load = async ({ fetch }) => {\n\t\tconst res = await fetch('/todos.json');\n\t\n\t\tif (res.ok) {\n\t\t\tconst todos = await res.json();\n\t\n\t\t\treturn {\n\t\t\t\tprops: { todos }\n\t\t\t};\n\t\t}\n\t\n\t\tconst { message } = await res.json();\n\t\n\t\treturn {\n\t\t\terror: new Error(message)\n\t\t};\n\t};\n</script>\n\n<script>\n\timport { scale } from 'svelte/transition';\n\timport { flip } from 'svelte/animate';\n\t\n\texport let todos;\n\t\n\tasync function patch(res) {\n\t\tconst todo = await res.json();\n\t\n\t\ttodos = todos.map((t) => {\n\t\t\tif (t.uid === todo.uid) return todo;\n\t\t\treturn t;\n\t\t});\n\t}\n</script>\n\n<svelte:head>\n\t<title>Todos</title>\n</svelte:head>\n\n<div class=\"todos\">\n\t<h1>Todos</h1>\n\n\t<form class=\"new\" action=\"/todos.json\" method=\"post\" use:enhance={{\n\t\tresult: async (res, form) => {\n\t\t\tconst created = await res.json();\n\t\t\ttodos = [...todos, created]\n\n\t\t\tform.reset();\n\t\t}\n\t}}>\n\t\t<input name=\"text\" placeholder=\"+ tap to add a todo\">\n\t</form>\n\n\t{#each todos as todo (todo.uid)}\n\t\t<div class=\"todo\" class:done={todo.done} transition:scale|local={{start:0.7}} animate:flip={{duration:200}}>\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tpending: (data) => {\n\t\t\t\t\ttodo.done = !!data.get('done');\n\t\t\t\t},\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input type=\"hidden\" name=\"done\" value={todo.done ? '' : 'true'}>\n\t\t\t\t<button class=\"toggle\" aria-label=\"Mark todo as {todo.done ? 'not done' : 'done'}\"/>\n\t\t\t</form>\n\n\t\t\t<form class=\"text\" action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input type=\"text\" name=\"text\" value={todo.text}>\n\t\t\t\t<button class=\"save\" aria-label=\"Save todo\"/>\n\t\t\t</form>\n\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=delete\" method=\"post\" use:enhance={{\n\t\t\t\tresult: () => {\n\t\t\t\t\ttodos = todos.filter(t => t.uid !== todo.uid);\n\t\t\t\t}\n\t\t\t}}>\n\t\t\t\t<button class=\"delete\" aria-label=\"Delete todo\"/>\n\t\t\t</form>\n\t\t</div>\n\t{/each}\n</div>\n\n<style>\n\t.todos {\n\t\twidth: 100%;\n\t\tmax-width: var(--column-width);\n\t\tmargin: var(--column-margin-top) auto 0 auto;\n\t\tline-height: 1;\n\t}\n\n\t.new {\n\t\tmargin: 0 0 0.5rem 0;\n\t}\n\n\tinput {\n\t\tborder: 1px solid transparent;\n\t}\n\n\tinput:focus-visible {\n\t\tbox-shadow: inset 1px 1px 6px rgba(0,0,0,0.1);\n\t\tborder: 1px solid #ff3e00 !important;\n\t\toutline: none;\n\t}\n\n\t.new input {\n\t\tfont-size: 28px;\n\t\twidth: 100%;\n\t\tpadding: 0.5em 1em 0.3em 1em;\n\t\tbox-sizing: border-box;\n\t\tbackground: rgba(255,255,255,0.05);\n\t\tborder-radius: 8px;\n\t\ttext-align: center;\n\t}\n\n\t.todo {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 2rem 1fr 2rem;\n\t\tgrid-gap: 0.5rem;\n\t\talign-items: center;\n\t\tmargin: 0 0 0.5rem 0;\n\t\tpadding: 0.5rem;\n\t\tbackground-color: white;\n\t\tborder-radius: 8px;\n\t\tfilter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1));\n\t\ttransform: translate(-1px, -1px);\n\t\ttransition: filter 0.2s, transform 0.2s;\n\t}\n\n\n\t.done {\n\t\ttransform: none;\n\t\topacity: 0.4;\n\t\tfilter: drop-shadow(0px 0px 1px rgba(0,0,0,0.1));\n\t}\n\n\tform.text {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\t.todo input {\n\t\tflex: 1;\n\t\tpadding: 0.5em 2em 0.5em 0.8em;\n\t\tborder-radius: 3px;\n\t}\n\n\t.todo button {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t\tbackground-position: 50% 50%;\n\t\tbackground-repeat: no-repeat;\n\t}\n\n\tbutton.toggle {\n\t\tborder: 1px solid rgba(0,0,0,0.2);\n\t\tborder-radius: 50%;\n\t\tbox-sizing: border-box;\n\t\tbackground-size: 1em auto;\n\t}\n\n\t.done .toggle {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n\t}\n\n\t.delete {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n\t\topacity: 0.2;\n\t}\n\n\t.delete:hover {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n\n\t.save {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\topacity: 0;\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A\");\n\t}\n\n\t.todo input:focus + .save {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n</style>\n"
}
]

@@ -44,8 +44,8 @@ [

"name": "src/routes/todos/index.json.ts",
"contents": "import { api } from './_api';\nimport type { RequestHandler } from '@sveltejs/kit';\n\n// GET /todos.json\nexport const get: RequestHandler = async (request) => {\n\tif (!request.context.userid) {\n\t\t// the user has never visited the site before\n\t\t// and so doesn't yet have a userid, which is\n\t\t// set in `handle`, in src/hooks.js\n\t\treturn { body: [] };\n\t}\n\n\tconst response = await api(request, `todos/${request.context.userid}`);\n\n\tif (response.status === 404) {\n\t\t// the user has visited before, but hasn't yet\n\t\t// created a todo list. start with an empty array\n\t\treturn { body: [] };\n\t}\n\n\treturn response;\n};\n\n// POST /todos.json\nexport const post: RequestHandler = async (request) => {\n\tconst response = await api(request, `todos/${request.context.userid}`, {\n\t\t// because index.svelte posts a FormData object,\n\t\t// request.body is _also_ a (readonly) FormData\n\t\t// object, which allows us to get form data\n\t\t// with the `body.get(key)` method\n\t\ttext: request.body.get('text')\n\t});\n\n\treturn response;\n};\n"
"contents": "import { api } from './_api';\nimport type { RequestHandler } from '@sveltejs/kit';\n\n// GET /todos.json\nexport const get: RequestHandler = async (request) => {\n\t// request.context.userid comes from src/hooks.js\n\tconst response = await api(request, `todos/${request.context.userid}`);\n\n\tif (response.status === 404) {\n\t\t// user hasn't created a todo list.\n\t\t// start with an empty array\n\t\treturn { body: [] };\n\t}\n\n\treturn response;\n};\n\n// POST /todos.json\nexport const post: RequestHandler = async (request) => {\n\tconst response = await api(request, `todos/${request.context.userid}`, {\n\t\t// because index.svelte posts a FormData object,\n\t\t// request.body is _also_ a (readonly) FormData\n\t\t// object, which allows us to get form data\n\t\t// with the `body.get(key)` method\n\t\ttext: request.body.get('text')\n\t});\n\n\treturn response;\n};\n"
},
{
"name": "src/routes/todos/index.svelte",
"contents": "<script context=\"module\" lang=\"ts\">\n\timport { enhance } from '$lib/form';\n\timport type { Load } from '@sveltejs/kit';\n\n\t// see https://kit.svelte.dev/docs#loading\n\texport const load: Load = async ({ fetch }) => {\n\t\tconst res = await fetch('/todos.json');\n\n\t\tif (res.ok) {\n\t\t\tconst todos = await res.json();\n\n\t\t\treturn {\n\t\t\t\tprops: { todos }\n\t\t\t};\n\t\t}\n\n\t\tconst { message } = await res.json();\n\n\t\treturn {\n\t\t\terror: new Error(message)\n\t\t};\n\t}\n</script>\n\n<script lang=\"ts\">\n\timport { scale } from 'svelte/transition';\n\timport { flip } from 'svelte/animate';\n\n\ttype Todo = {\n\t\tuid: string;\n\t\tcreated_at: Date;\n\t\ttext: string;\n\t\tdone: boolean;\n\t};\n\n\texport let todos: Todo[];\n\n\tasync function patch(res: Response) {\n\t\tconst todo = await res.json();\n\n\t\ttodos = todos.map(t => {\n\t\t\tif (t.uid === todo.uid) return todo;\n\t\t\treturn t;\n\t\t});\n\t}\n</script>\n\n<svelte:head>\n\t<title>Todos</title>\n</svelte:head>\n\n<div class=\"todos\">\n\t<h1>Todos</h1>\n\n\t<form class=\"new\" action=\"/todos.json\" method=\"post\" use:enhance={{\n\t\tresult: async (res, form) => {\n\t\t\tconst created = await res.json();\n\t\t\ttodos = [...todos, created]\n\n\t\t\tform.reset();\n\t\t}\n\t}}>\n\t\t<input name=\"text\" placeholder=\"+ tap to add a todo\">\n\t</form>\n\n\t{#each todos as todo (todo.uid)}\n\t\t<div class=\"todo\" class:done={todo.done} transition:scale|local={{start:0.7}} animate:flip={{duration:200}}>\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tpending: (data) => {\n\t\t\t\t\tconst done = !!data.get('done');\n\n\t\t\t\t\ttodos = todos.map(t => {\n\t\t\t\t\t\tif (t === todo) return { ...t, done };\n\t\t\t\t\t\treturn t;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input type=\"hidden\" name=\"done\" value={todo.done ? '' : 'true'}>\n\t\t\t\t<button class=\"toggle\" aria-label=\"Mark todo as {todo.done ? 'not done' : 'done'}\"/>\n\t\t\t</form>\n\n\t\t\t<form class=\"text\" action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input type=\"text\" name=\"text\" value={todo.text}>\n\t\t\t\t<button class=\"save\" aria-label=\"Save todo\"/>\n\t\t\t</form>\n\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=delete\" method=\"post\" use:enhance={{\n\t\t\t\tresult: () => {\n\t\t\t\t\ttodos = todos.filter(t => t.uid !== todo.uid);\n\t\t\t\t}\n\t\t\t}}>\n\t\t\t\t<button class=\"delete\" aria-label=\"Delete todo\"/>\n\t\t\t</form>\n\t\t</div>\n\t{/each}\n</div>\n\n<style>\n\t.todos {\n\t\twidth: 100%;\n\t\tmax-width: var(--column-width);\n\t\tmargin: var(--column-margin-top) auto 0 auto;\n\t\tline-height: 1;\n\t}\n\n\t.new {\n\t\tmargin: 0 0 0.5rem 0;\n\t}\n\n\tinput {\n\t\tborder: 1px solid transparent;\n\t}\n\n\tinput:focus-visible {\n\t\tbox-shadow: inset 1px 1px 6px rgba(0,0,0,0.1);\n\t\tborder: 1px solid #ff3e00 !important;\n\t\toutline: none;\n\t}\n\n\t.new input {\n\t\tfont-size: 28px;\n\t\twidth: 100%;\n\t\tpadding: 0.5em 1em 0.3em 1em;\n\t\tbox-sizing: border-box;\n\t\tbackground: rgba(255,255,255,0.05);\n\t\tborder-radius: 8px;\n\t\ttext-align: center;\n\t}\n\n\t.todo {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 2rem 1fr 2rem;\n\t\tgrid-gap: 0.5rem;\n\t\talign-items: center;\n\t\tmargin: 0 0 0.5rem 0;\n\t\tpadding: 0.5rem;\n\t\tbackground-color: white;\n\t\tborder-radius: 8px;\n\t\tfilter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1));\n\t\ttransform: translate(-1px, -1px);\n\t\ttransition: filter 0.2s, transform 0.2s;\n\t}\n\n\n\t.done {\n\t\ttransform: none;\n\t\topacity: 0.4;\n\t\tfilter: drop-shadow(0px 0px 1px rgba(0,0,0,0.1));\n\t}\n\n\tform.text {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\t.todo input {\n\t\tflex: 1;\n\t\tpadding: 0.5em 2em 0.5em 0.8em;\n\t\tborder-radius: 3px;\n\t}\n\n\t.todo button {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t\tbackground-position: 50% 50%;\n\t\tbackground-repeat: no-repeat;\n\t}\n\n\tbutton.toggle {\n\t\tborder: 1px solid rgba(0,0,0,0.2);\n\t\tborder-radius: 50%;\n\t\tbox-sizing: border-box;\n\t\tbackground-size: 1em auto;\n\t}\n\n\t.done .toggle {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n\t}\n\n\t.delete {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n\t\topacity: 0.2;\n\t}\n\n\t.delete:hover {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n\n\t.save {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\topacity: 0;\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A\");\n\t}\n\n\t.todo input:focus + .save {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n</style>"
"contents": "<script context=\"module\" lang=\"ts\">\n\timport { enhance } from '$lib/form';\n\timport type { Load } from '@sveltejs/kit';\n\n\t// see https://kit.svelte.dev/docs#loading\n\texport const load: Load = async ({ fetch }) => {\n\t\tconst res = await fetch('/todos.json');\n\n\t\tif (res.ok) {\n\t\t\tconst todos = await res.json();\n\n\t\t\treturn {\n\t\t\t\tprops: { todos }\n\t\t\t};\n\t\t}\n\n\t\tconst { message } = await res.json();\n\n\t\treturn {\n\t\t\terror: new Error(message)\n\t\t};\n\t}\n</script>\n\n<script lang=\"ts\">\n\timport { scale } from 'svelte/transition';\n\timport { flip } from 'svelte/animate';\n\n\ttype Todo = {\n\t\tuid: string;\n\t\tcreated_at: Date;\n\t\ttext: string;\n\t\tdone: boolean;\n\t};\n\n\texport let todos: Todo[];\n\n\tasync function patch(res: Response) {\n\t\tconst todo = await res.json();\n\n\t\ttodos = todos.map(t => {\n\t\t\tif (t.uid === todo.uid) return todo;\n\t\t\treturn t;\n\t\t});\n\t}\n</script>\n\n<svelte:head>\n\t<title>Todos</title>\n</svelte:head>\n\n<div class=\"todos\">\n\t<h1>Todos</h1>\n\n\t<form class=\"new\" action=\"/todos.json\" method=\"post\" use:enhance={{\n\t\tresult: async (res, form) => {\n\t\t\tconst created = await res.json();\n\t\t\ttodos = [...todos, created]\n\n\t\t\tform.reset();\n\t\t}\n\t}}>\n\t\t<input name=\"text\" placeholder=\"+ tap to add a todo\">\n\t</form>\n\n\t{#each todos as todo (todo.uid)}\n\t\t<div class=\"todo\" class:done={todo.done} transition:scale|local={{start:0.7}} animate:flip={{duration:200}}>\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tpending: (data) => {\n\t\t\t\t\ttodo.done = !!data.get('done');\n\t\t\t\t},\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input type=\"hidden\" name=\"done\" value={todo.done ? '' : 'true'}>\n\t\t\t\t<button class=\"toggle\" aria-label=\"Mark todo as {todo.done ? 'not done' : 'done'}\"/>\n\t\t\t</form>\n\n\t\t\t<form class=\"text\" action=\"/todos/{todo.uid}.json?_method=patch\" method=\"post\" use:enhance={{\n\t\t\t\tresult: patch\n\t\t\t}}>\n\t\t\t\t<input type=\"text\" name=\"text\" value={todo.text}>\n\t\t\t\t<button class=\"save\" aria-label=\"Save todo\"/>\n\t\t\t</form>\n\n\t\t\t<form action=\"/todos/{todo.uid}.json?_method=delete\" method=\"post\" use:enhance={{\n\t\t\t\tresult: () => {\n\t\t\t\t\ttodos = todos.filter(t => t.uid !== todo.uid);\n\t\t\t\t}\n\t\t\t}}>\n\t\t\t\t<button class=\"delete\" aria-label=\"Delete todo\"/>\n\t\t\t</form>\n\t\t</div>\n\t{/each}\n</div>\n\n<style>\n\t.todos {\n\t\twidth: 100%;\n\t\tmax-width: var(--column-width);\n\t\tmargin: var(--column-margin-top) auto 0 auto;\n\t\tline-height: 1;\n\t}\n\n\t.new {\n\t\tmargin: 0 0 0.5rem 0;\n\t}\n\n\tinput {\n\t\tborder: 1px solid transparent;\n\t}\n\n\tinput:focus-visible {\n\t\tbox-shadow: inset 1px 1px 6px rgba(0,0,0,0.1);\n\t\tborder: 1px solid #ff3e00 !important;\n\t\toutline: none;\n\t}\n\n\t.new input {\n\t\tfont-size: 28px;\n\t\twidth: 100%;\n\t\tpadding: 0.5em 1em 0.3em 1em;\n\t\tbox-sizing: border-box;\n\t\tbackground: rgba(255,255,255,0.05);\n\t\tborder-radius: 8px;\n\t\ttext-align: center;\n\t}\n\n\t.todo {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 2rem 1fr 2rem;\n\t\tgrid-gap: 0.5rem;\n\t\talign-items: center;\n\t\tmargin: 0 0 0.5rem 0;\n\t\tpadding: 0.5rem;\n\t\tbackground-color: white;\n\t\tborder-radius: 8px;\n\t\tfilter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1));\n\t\ttransform: translate(-1px, -1px);\n\t\ttransition: filter 0.2s, transform 0.2s;\n\t}\n\n\n\t.done {\n\t\ttransform: none;\n\t\topacity: 0.4;\n\t\tfilter: drop-shadow(0px 0px 1px rgba(0,0,0,0.1));\n\t}\n\n\tform.text {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1;\n\t}\n\n\t.todo input {\n\t\tflex: 1;\n\t\tpadding: 0.5em 2em 0.5em 0.8em;\n\t\tborder-radius: 3px;\n\t}\n\n\t.todo button {\n\t\twidth: 2em;\n\t\theight: 2em;\n\t\tborder: none;\n\t\tbackground-color: transparent;\n\t\tbackground-position: 50% 50%;\n\t\tbackground-repeat: no-repeat;\n\t}\n\n\tbutton.toggle {\n\t\tborder: 1px solid rgba(0,0,0,0.2);\n\t\tborder-radius: 50%;\n\t\tbox-sizing: border-box;\n\t\tbackground-size: 1em auto;\n\t}\n\n\t.done .toggle {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n\t}\n\n\t.delete {\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A\");\n\t\topacity: 0.2;\n\t}\n\n\t.delete:hover {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n\n\t.save {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\topacity: 0;\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A\");\n\t}\n\n\t.todo input:focus + .save {\n\t\ttransition: opacity 0.2s;\n\t\topacity: 1;\n\t}\n</style>\n"
}
]

@@ -10,3 +10,2 @@ {

"devDependencies": {
"@sveltejs/adapter-node": "next",
"@sveltejs/kit": "next",

@@ -13,0 +12,0 @@ "svelte": "^3.29.0",

@@ -10,3 +10,2 @@ {

"devDependencies": {
"@sveltejs/adapter-node": "next",
"@sveltejs/kit": "next",

@@ -13,0 +12,0 @@ "svelte": "^3.29.0",

{
"name": "create-svelte",
"version": "2.0.0-next.59",
"version": "2.0.0-next.60",
"bin": "./bin.js",

@@ -10,3 +10,3 @@ "dependencies": {

"devDependencies": {
"@sveltejs/kit": "1.0.0-next.86",
"@sveltejs/kit": "1.0.0-next.88",
"@types/gitignore-parser": "^0.0.0",

@@ -13,0 +13,0 @@ "@types/prettier": "^2.2.3",

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc