Skip to content

Commit 5aa7990

Browse files
rustkasrustkas
committed
HTML шаблоны в Svelte
1 parent ce7c276 commit 5aa7990

File tree

166 files changed

+5072
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

166 files changed

+5072
-1
lines changed

‎examples/README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@
22

33
1. [Установка и структура проекта.](projects/video01)
44
2. [Компонент и его структура.](projects/video02)
5-
3. [Жизненный цикл компонента.](projects/video03)
5+
3. [Жизненный цикл компонента.](projects/video03)
6+
4. [Синтаксис HTML шаблонов.](projects/video04)

‎examples/projects/video04/README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# HTML шаблоны в Svelte
2+
3+
[![HTML шаблоны в Svelte video](https://img.youtube.com/vi/pOmTYXiF0AU/0.jpg)](https://youtu.be/pOmTYXiF0AU "HTML шаблоны в Svelte")
4+
5+
В этом уроке рассмотрим cинтаксис HTML-тегов [Svelte](https://svelte.dev/), а именно `{@html}`, `{@debug}`, `{#if}`, `{#each}`, `{#await}`, а также `{#key}`.
6+
7+
## Команда запуска приложения
8+
`npm run dev`
9+
10+
## Адрес приложения
11+
`http://localhost:5000/`
12+
13+
## Примеры
14+
15+
1. [Пример №1](code/svelte-todo-01)
16+
2. [Пример №2](code/svelte-todo-02)
17+
3. [Пример №3](code/svelte-todo-03)
18+
4. [Пример №4](code/svelte-todo-04)
19+
5. [Пример №5](code/svelte-todo-05)
20+
6. [Пример №6](code/svelte-todo-06)
21+
7. [Пример №7](code/svelte-todo-07)
22+
8. [Пример №8](code/svelte-todo-08)
23+
9. [Пример №9](code/svelte-todo-09)
24+
10. [Пример №10](code/svelte-todo-10)
25+
11. [Пример №11](code/svelte-todo-11)
26+
12. [Пример №12](code/svelte-todo-12)

‎examples/projects/video04/code/svelte-todo-01/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/node_modules/
2+
/public/build/
3+
4+
.DS_Store

‎examples/projects/video04/code/svelte-todo-01/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Пример использования `@html`

‎examples/projects/video04/code/svelte-todo-01/package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "svelte-app",
3+
"version": "1.0.0",
4+
"private": true,
5+
"scripts": {
6+
"build": "rollup -c",
7+
"dev": "rollup -c -w",
8+
"start": "sirv public --no-clear"
9+
},
10+
"devDependencies": {
11+
"@rollup/plugin-commonjs": "^17.0.0",
12+
"@rollup/plugin-node-resolve": "^11.0.0",
13+
"rollup": "^2.3.4",
14+
"rollup-plugin-css-only": "^3.1.0",
15+
"rollup-plugin-livereload": "^2.0.0",
16+
"rollup-plugin-svelte": "^7.0.0",
17+
"rollup-plugin-terser": "^7.0.0",
18+
"svelte": "^3.0.0"
19+
},
20+
"dependencies": {
21+
"sirv-cli": "^1.0.0",
22+
"uuid": "^8.3.2"
23+
}
24+
}

‎examples/projects/video04/code/svelte-todo-01/public/favicon.png‎

3.05 KB
Loading

‎examples/projects/video04/code/svelte-todo-01/public/global.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
html, body {
2+
position: relative;
3+
width: 100%;
4+
height: 100%;
5+
}
6+
7+
body {
8+
color: #333;
9+
margin: 0;
10+
padding: 8px;
11+
box-sizing: border-box;
12+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
13+
}
14+
15+
a {
16+
color: rgb(0,100,200);
17+
text-decoration: none;
18+
}
19+
20+
a:hover {
21+
text-decoration: underline;
22+
}
23+
24+
a:visited {
25+
color: rgb(0,80,160);
26+
}
27+
28+
label {
29+
display: block;
30+
}
31+
32+
input, button, select, textarea {
33+
font-family: inherit;
34+
font-size: inherit;
35+
-webkit-padding: 0.4em 0;
36+
padding: 0.4em;
37+
margin: 0 0 0.5em 0;
38+
box-sizing: border-box;
39+
border: 1px solid #ccc;
40+
border-radius: 2px;
41+
}
42+
43+
input:disabled {
44+
color: #ccc;
45+
}
46+
47+
button {
48+
color: #333;
49+
background-color: #f4f4f4;
50+
outline: none;
51+
}
52+
53+
button:disabled {
54+
color: #999;
55+
}
56+
57+
button:not(:disabled):active {
58+
background-color: #ddd;
59+
}
60+
61+
button:focus {
62+
border-color: #666;
63+
}
64+
label {
65+
font-size: 28px;
66+
}

‎examples/projects/video04/code/svelte-todo-01/public/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset='utf-8'>
5+
<meta name='viewport' content='width=device-width,initial-scale=1'>
6+
7+
<title>Svelte app</title>
8+
9+
<link rel='icon' type='image/png' href='/favicon.png'>
10+
<link rel='stylesheet' href='/global.css'>
11+
<link rel='stylesheet' href='/build/bundle.css'>
12+
13+
<script defer src='/build/bundle.js'></script>
14+
</head>
15+
16+
<body>
17+
</body>
18+
</html>

‎examples/projects/video04/code/svelte-todo-01/rollup.config.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import svelte from 'rollup-plugin-svelte';
2+
import commonjs from '@rollup/plugin-commonjs';
3+
import resolve from '@rollup/plugin-node-resolve';
4+
import livereload from 'rollup-plugin-livereload';
5+
import { terser } from 'rollup-plugin-terser';
6+
import css from 'rollup-plugin-css-only';
7+
8+
const production = !process.env.ROLLUP_WATCH;
9+
10+
function serve() {
11+
let server;
12+
13+
function toExit() {
14+
if (server) server.kill(0);
15+
}
16+
17+
return {
18+
writeBundle() {
19+
if (server) return;
20+
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
21+
stdio: ['ignore', 'inherit', 'inherit'],
22+
shell: true
23+
});
24+
25+
process.on('SIGTERM', toExit);
26+
process.on('exit', toExit);
27+
}
28+
};
29+
}
30+
31+
export default {
32+
input: 'src/main.js',
33+
output: {
34+
sourcemap: true,
35+
format: 'iife',
36+
name: 'app',
37+
file: 'public/build/bundle.js'
38+
},
39+
plugins: [
40+
svelte({
41+
compilerOptions: {
42+
// enable run-time checks when not in production
43+
dev: !production
44+
}
45+
}),
46+
// we'll extract any component CSS out into
47+
// a separate file - better for performance
48+
css({ output: 'bundle.css' }),
49+
50+
// If you have external dependencies installed from
51+
// npm, you'll most likely need these plugins. In
52+
// some cases you'll need additional configuration -
53+
// consult the documentation for details:
54+
// https://github.com/rollup/plugins/tree/master/packages/commonjs
55+
resolve({
56+
browser: true,
57+
dedupe: ['svelte']
58+
}),
59+
commonjs(),
60+
61+
// In dev mode, call `npm run start` once
62+
// the bundle has been generated
63+
!production && serve(),
64+
65+
// Watch the `public` directory and refresh the
66+
// browser on changes when not in production
67+
!production && livereload('public'),
68+
69+
// If we're building for production (npm run build
70+
// instead of npm run dev), minify
71+
production && terser()
72+
],
73+
watch: {
74+
clearScreen: false
75+
}
76+
};

‎examples/projects/video04/code/svelte-todo-01/scripts/setupTypeScript.js‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
// @ts-check
2+
3+
/** This script modifies the project to support TS code in .svelte files like:
4+
5+
<script lang="ts">
6+
export let name: string;
7+
</script>
8+
9+
As well as validating the code for CI.
10+
*/
11+
12+
/** To work on this script:
13+
rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template
14+
*/
15+
16+
const fs = require("fs")
17+
const path = require("path")
18+
const { argv } = require("process")
19+
20+
const projectRoot = argv[2] || path.join(__dirname, "..")
21+
22+
// Add deps to pkg.json
23+
const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8"))
24+
packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
25+
"svelte-check": "^2.0.0",
26+
"svelte-preprocess": "^4.0.0",
27+
"@rollup/plugin-typescript": "^8.0.0",
28+
"typescript": "^4.0.0",
29+
"tslib": "^2.0.0",
30+
"@tsconfig/svelte": "^2.0.0"
31+
})
32+
33+
// Add script for checking
34+
packageJSON.scripts = Object.assign(packageJSON.scripts, {
35+
"check": "svelte-check --tsconfig ./tsconfig.json"
36+
})
37+
38+
// Write the package JSON
39+
fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, " "))
40+
41+
// mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too
42+
const beforeMainJSPath = path.join(projectRoot, "src", "main.js")
43+
const afterMainTSPath = path.join(projectRoot, "src", "main.ts")
44+
fs.renameSync(beforeMainJSPath, afterMainTSPath)
45+
46+
// Switch the app.svelte file to use TS
47+
const appSveltePath = path.join(projectRoot, "src", "App.svelte")
48+
let appFile = fs.readFileSync(appSveltePath, "utf8")
49+
appFile = appFile.replace("<script>", '<script lang="ts">')
50+
appFile = appFile.replace("export let name;", 'export let name: string;')
51+
fs.writeFileSync(appSveltePath, appFile)
52+
53+
// Edit rollup config
54+
const rollupConfigPath = path.join(projectRoot, "rollup.config.js")
55+
let rollupConfig = fs.readFileSync(rollupConfigPath, "utf8")
56+
57+
// Edit imports
58+
rollupConfig = rollupConfig.replace(`'rollup-plugin-terser';`, `'rollup-plugin-terser';
59+
import sveltePreprocess from 'svelte-preprocess';
60+
import typescript from '@rollup/plugin-typescript';`)
61+
62+
// Replace name of entry point
63+
rollupConfig = rollupConfig.replace(`'src/main.js'`, `'src/main.ts'`)
64+
65+
// Add preprocessor
66+
rollupConfig = rollupConfig.replace(
67+
'compilerOptions:',
68+
'preprocess: sveltePreprocess({ sourceMap: !production }),\n\t\t\tcompilerOptions:'
69+
);
70+
71+
// Add TypeScript
72+
rollupConfig = rollupConfig.replace(
73+
'commonjs(),',
74+
'commonjs(),\n\t\ttypescript({\n\t\t\tsourceMap: !production,\n\t\t\tinlineSources: !production\n\t\t}),'
75+
);
76+
fs.writeFileSync(rollupConfigPath, rollupConfig)
77+
78+
// Add TSConfig
79+
const tsconfig = `{
80+
"extends": "@tsconfig/svelte/tsconfig.json",
81+
82+
"include": ["src/**/*"],
83+
"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
84+
}`
85+
const tsconfigPath = path.join(projectRoot, "tsconfig.json")
86+
fs.writeFileSync(tsconfigPath, tsconfig)
87+
88+
// Add global.d.ts
89+
const dtsPath = path.join(projectRoot, "src", "global.d.ts")
90+
fs.writeFileSync(dtsPath, `/// <reference types="svelte" />`)
91+
92+
// Delete this script, but not during testing
93+
if (!argv[2]) {
94+
// Remove the script
95+
fs.unlinkSync(path.join(__filename))
96+
97+
// Check for Mac's DS_store file, and if it's the only one left remove it
98+
const remainingFiles = fs.readdirSync(path.join(__dirname))
99+
if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') {
100+
fs.unlinkSync(path.join(__dirname, '.DS_store'))
101+
}
102+
103+
// Check if the scripts folder is empty
104+
if (fs.readdirSync(path.join(__dirname)).length === 0) {
105+
// Remove the scripts folder
106+
fs.rmdirSync(path.join(__dirname))
107+
}
108+
}
109+
110+
// Adds the extension recommendation
111+
fs.mkdirSync(path.join(projectRoot, ".vscode"), { recursive: true })
112+
fs.writeFileSync(path.join(projectRoot, ".vscode", "extensions.json"), `{
113+
"recommendations": ["svelte.svelte-vscode"]
114+
}
115+
`)
116+
117+
console.log("Converted to TypeScript.")
118+
119+
if (fs.existsSync(path.join(projectRoot, "node_modules"))) {
120+
console.log("\nYou will need to re-run your dependency manager to get started.")
121+
}

0 commit comments

Comments
 (0)