Browse Source

Initial sveltkit starter setup

pull/5/head
Navneet Sharma 1 year ago
parent
commit
34d795ab91
  1. 13
      .editorconfig
  2. 20
      .eslintrc.cjs
  3. 5
      .gitignore
  4. 1
      .npmrc
  5. 4
      .prettierignore
  6. 18
      .prettierrc
  7. 1
      .yarnrc
  8. 42
      README.md
  9. 29
      package.json
  10. 12
      src/app.html
  11. 4
      src/app.scss
  12. 3
      src/global.d.ts
  13. 35
      src/lib/Counter.svelte
  14. 5
      src/routes/$layout.svelte
  15. 45
      src/routes/index.svelte
  16. BIN
      static/favicon.ico
  17. 3
      static/robots.txt
  18. 25
      svelte.config.cjs
  19. 32
      tsconfig.json
  20. 1327
      yarn.lock

13
.editorconfig

@ -0,0 +1,13 @@ @@ -0,0 +1,13 @@
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = tab
indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false

20
.eslintrc.cjs

@ -0,0 +1,20 @@ @@ -0,0 +1,20 @@
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
plugins: ['svelte3', '@typescript-eslint'],
ignorePatterns: ['*.cjs'],
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
settings: {
'svelte3/typescript': require('typescript'),
},
parserOptions: {
sourceType: 'module',
ecmaVersion: 2019,
},
env: {
browser: true,
es2017: true,
node: true,
},
};

5
.gitignore vendored

@ -0,0 +1,5 @@ @@ -0,0 +1,5 @@
.DS_Store
node_modules
/.svelte
/build
/functions

1
.npmrc

@ -0,0 +1 @@ @@ -0,0 +1 @@
engine-strict=true

4
.prettierignore

@ -0,0 +1,4 @@ @@ -0,0 +1,4 @@
.svelte/**
static/**
build/**
node_modules/**

18
.prettierrc

@ -0,0 +1,18 @@ @@ -0,0 +1,18 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 100,
"tabWidth": 4,
"arrowParens": "always",
"bracketSpacing": true,
"svelteStrictMode": true,
"svelteSortOrder": "styles-scripts-options-markup",
"svelteAllowShorthand": false,
"svelteBracketNewLine": true,
"svelteIndentScriptAndStyle": true,
"htmlWhitespaceSensitivity": "strict",
"semi": true,
"jsxBracketSameLine": false,
"jsxSingleQuote": true
}

1
.yarnrc

@ -0,0 +1 @@ @@ -0,0 +1 @@
engine-strict=true

42
README.md

@ -0,0 +1,42 @@ @@ -0,0 +1,42 @@
# create-svelte
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
## Creating a project
If you're seeing this, you've probably already done this step. Congrats!
```bash
# create a new project in the current directory
npm init svelte@next
# create a new project in my-app
npm init svelte@next my-app
```
> Note: the `@next` is temporary
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
Svelte apps are built with _adapters_, which optimise your project for deployment to different environments.
By default, `npm run build` will generate a Node app that you can run with `node build`. To use a different adapter, add it to the `devDependencies` in `package.json` making sure to specify the version as `next` and update your `svelte.config.cjs` to [specify your chosen adapter](https://kit.svelte.dev/docs#configuration-adapter). The following official adapters are available:
- [@sveltejs/adapter-node](https://github.com/sveltejs/kit/tree/master/packages/adapter-node)
- [@sveltejs/adapter-static](https://github.com/sveltejs/kit/tree/master/packages/adapter-static)
- [@sveltejs/adapter-netlify](https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify)
- [@sveltejs/adapter-vercel](https://github.com/sveltejs/kit/tree/master/packages/adapter-vercel)
- ...more soon
[See the adapter documentation for more detail](https://kit.svelte.dev/docs#adapters)

29
package.json

@ -0,0 +1,29 @@ @@ -0,0 +1,29 @@
{
"name": "sveltkit-starter",
"version": "0.0.1",
"scripts": {
"dev": "svelte-kit dev",
"build": "svelte-kit build",
"start": "svelte-kit start",
"lint": "prettier --check . && eslint --ignore-path .gitignore .",
"format": "prettier --write ."
},
"devDependencies": {
"@sveltejs/adapter-node": "next",
"@sveltejs/kit": "next",
"svelte": "^3.29.0",
"vite": "^2.1.0",
"typescript": "^4.0.0",
"tslib": "^2.0.0",
"svelte-preprocess": "^4.0.0",
"sass": "^1.0.0",
"@typescript-eslint/eslint-plugin": "^4.19.0",
"@typescript-eslint/parser": "^4.19.0",
"eslint": "^7.22.0",
"eslint-plugin-svelte3": "^3.1.0",
"prettier": "~2.2.1",
"prettier-plugin-svelte": "^2.2.0",
"eslint-config-prettier": "^8.1.0"
},
"type": "module"
}

12
src/app.html

@ -0,0 +1,12 @@ @@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%svelte.head%
</head>
<body>
<div id="svelte">%svelte.body%</div>
</body>
</html>

4
src/app.scss

@ -0,0 +1,4 @@ @@ -0,0 +1,4 @@
:root {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
}

3
src/global.d.ts vendored

@ -0,0 +1,3 @@ @@ -0,0 +1,3 @@
/// <reference types="@sveltejs/kit" />
/// <reference types="svelte" />
/// <reference types="vite/client" />

35
src/lib/Counter.svelte

@ -0,0 +1,35 @@ @@ -0,0 +1,35 @@
<style lang="scss">
button {
font-family: inherit;
font-size: inherit;
padding: 1em 2em;
color: #ff3e00;
background-color: rgba(255, 62, 0, 0.1);
border-radius: 2em;
border: 2px solid #ff3e00;
outline: none;
width: 200px;
height: 60px;
font-variant-numeric: tabular-nums;
}
button:hover {
border: 3px solid #ff3e00;
}
button:active {
background-color: rgba(255, 62, 0, 0.2);
}
</style>
<script lang="ts">
let count = 0;
const increment = (): void => {
count += 1;
};
</script>
<button on:click="{increment}">
Clicks: {count}
</button>

5
src/routes/$layout.svelte

@ -0,0 +1,5 @@ @@ -0,0 +1,5 @@
<script>
import '../app.scss';
</script>
<slot />

45
src/routes/index.svelte

@ -0,0 +1,45 @@ @@ -0,0 +1,45 @@
<style lang="scss">
main {
text-align: center;
padding: 1em;
margin: 0 auto;
}
h1 {
color: #ff3e00;
text-transform: uppercase;
font-size: 4rem;
font-weight: 100;
line-height: 1.1;
margin: 4rem auto;
max-width: 14rem;
}
p {
max-width: 14rem;
margin: 2rem auto;
line-height: 1.35;
}
@media (min-width: 480px) {
h1 {
max-width: none;
}
p {
max-width: none;
}
}
</style>
<script lang="ts">
import Counter from '$lib/Counter.svelte';
</script>
<main>
<h1>Hello Navneet Sharma!</h1>
<Counter />
<p>Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte apps.</p>
</main>

BIN
static/favicon.ico

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

3
static/robots.txt

@ -0,0 +1,3 @@ @@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

25
svelte.config.cjs

@ -0,0 +1,25 @@ @@ -0,0 +1,25 @@
const sveltePreprocess = require('svelte-preprocess');
const node = require('@sveltejs/adapter-node');
const pkg = require('./package.json');
/** @type {import('@sveltejs/kit').Config} */
module.exports = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: sveltePreprocess(),
kit: {
// By default, `npm run build` will create a standard Node app.
// You can create optimized builds for different platforms by
// specifying a different adapter
adapter: node(),
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte',
vite: {
ssr: {
noExternal: Object.keys(pkg.dependencies || {}),
},
},
},
};

32
tsconfig.json

@ -0,0 +1,32 @@ @@ -0,0 +1,32 @@
{
"compilerOptions": {
"moduleResolution": "node",
"module": "es2020",
"lib": ["es2020"],
"target": "es2019",
/**
svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
to enforce using \`import type\` instead of \`import\` for Types.
*/
"importsNotUsedAsValues": "error",
"isolatedModules": true,
"resolveJsonModule": true,
/**
To have warnings/errors of the Svelte compiler at the correct position,
enable source maps by default.
*/
"sourceMap": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"allowJs": true,
"checkJs": true,
"paths": {
"$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"],
"$service-worker": [".svelte/build/runtime/service-worker"],
"$lib/*": ["src/lib/*"]
}
},
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
}

1327
yarn.lock

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save